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

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

@@ -4,11 +4,13 @@ import { IModelService } from "@codingame/monaco-vscode-api/vscode/vs/editor/com
 import { IHoverService } from "@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service";
 import { ILabelService } from "@codingame/monaco-vscode-api/vscode/vs/platform/label/common/label.service";
 import { IOpenerService } from "@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service";
-import { IChatDebugEventFileListContent } from "../../common/chatDebugService.js";
+import { IChatDebugEventFileListContent } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatDebugService";
 /**
  * Render a file list resolved content as a rich HTML element.
  */
-export declare function renderCustomizationDiscoveryContent(content: IChatDebugEventFileListContent, openerService: IOpenerService, modelService: IModelService, languageService: ILanguageService, hoverService: IHoverService, labelService: ILabelService): {
+export declare function renderCustomizationDiscoveryContent(content: IChatDebugEventFileListContent, openerService: IOpenerService, modelService: IModelService, languageService: ILanguageService, hoverService: IHoverService, labelService: ILabelService, scrollable?: {
+    scanDomNode(): void;
+}): {
     element: HTMLElement;
     disposables: DisposableStore;
 };

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

@@ -123,20 +123,21 @@ function renderCustomizationDiscoveryContent(
     modelService,
     languageService,
     hoverService,
-    labelService
+    labelService,
+    scrollable
 ) {
     const disposables = ( new DisposableStore());
     const container = $("div.chat-debug-file-list");
     container.tabIndex = 0;
     const capitalizedType = content.discoveryType.charAt(0).toUpperCase() + content.discoveryType.slice(1);
-    append(container, $("div.chat-debug-file-list-title", undefined, ( localize(5620, "{0} Discovery Results", capitalizedType))));
-    append(container, $("div.chat-debug-file-list-summary", undefined, ( localize(5621, "Total files: {0}", content.files.length))));
+    append(container, $("div.chat-debug-file-list-title", undefined, ( localize(5722, "{0} Discovery Results", capitalizedType))));
+    append(container, $("div.chat-debug-file-list-summary", undefined, ( localize(5723, "Total files: {0}", content.files.length))));
     const loaded = content.files.filter(f => f.status === "loaded");
     if (loaded.length > 0) {
         const section = append(container, $("div.chat-debug-file-list-section"));
         append(
             section,
-            $("div.chat-debug-file-list-section-title", undefined, ( localize(5622, "Loaded ({0})", loaded.length)))
+            $("div.chat-debug-file-list-section-title", undefined, ( localize(5724, "Loaded ({0})", loaded.length)))
         );
         const groups = ( new Map());
         for (const file of loaded) {
@@ -150,7 +151,7 @@ function renderCustomizationDiscoveryContent(
         }
         const listEl = append(section, $("div.chat-debug-file-list-rows"));
         listEl.setAttribute("role", "list");
-        listEl.setAttribute("aria-label", ( localize(5623, "Loaded files")));
+        listEl.setAttribute("aria-label", ( localize(5725, "Loaded files")));
         const rows = [];
         for (const [locationLabel, files] of groups) {
             const groupHeader = append(listEl, $("div.chat-debug-file-list-group-header"));
@@ -163,7 +164,7 @@ function renderCustomizationDiscoveryContent(
                 link.textContent = locationLabel;
                 link.tabIndex = -1;
                 disposables.add(
-                    hoverService.setupManagedHover(getDefaultHoverDelegate("element"), link, ( localize(5624, "Open {0} in Extensions", firstFile.extensionId)))
+                    hoverService.setupManagedHover(getDefaultHoverDelegate("element"), link, ( localize(5726, "Open {0} in Extensions", firstFile.extensionId)))
                 );
                 disposables.add(addDisposableListener(link, EventType.CLICK, e => {
                     e.preventDefault();
@@ -215,11 +216,11 @@ function renderCustomizationDiscoveryContent(
         const section = append(container, $("div.chat-debug-file-list-section"));
         append(
             section,
-            $("div.chat-debug-file-list-section-title", undefined, ( localize(5625, "Skipped ({0})", skipped.length)))
+            $("div.chat-debug-file-list-section-title", undefined, ( localize(5727, "Skipped ({0})", skipped.length)))
         );
         const groups = ( new Map());
         for (const file of skipped) {
-            const key = file.skipReason ?? ( localize(5626, "unknown"));
+            const key = file.skipReason ?? ( localize(5728, "unknown"));
             let group = groups.get(key);
             if (!group) {
                 group = [];
@@ -229,7 +230,7 @@ function renderCustomizationDiscoveryContent(
         }
         const listEl = append(section, $("div.chat-debug-file-list-rows"));
         listEl.setAttribute("role", "list");
-        listEl.setAttribute("aria-label", ( localize(5627, "Skipped files")));
+        listEl.setAttribute("aria-label", ( localize(5729, "Skipped files")));
         const rows = [];
         for (const [reasonLabel, files] of groups) {
             const groupHeader = append(listEl, $("div.chat-debug-file-list-group-header"));
@@ -251,7 +252,7 @@ function renderCustomizationDiscoveryContent(
                     if (detail) {
                         detail += ", ";
                     }
-                    detail += ( localize(5628, "duplicate of {0}", file.duplicateOf.path));
+                    detail += ( localize(5730, "duplicate of {0}", file.duplicateOf.path));
                 }
                 row.appendChild(createInlineFileLink(
                     file.uri,
@@ -286,13 +287,13 @@ function renderCustomizationDiscoveryContent(
         const chevron = append(header, $("span.chat-debug-message-section-chevron"));
         append(
             header,
-            $("span.chat-debug-message-section-title", undefined, ( localize(5629, "Sources ({0})", content.sourceFolders.length)))
+            $("span.chat-debug-message-section-title", undefined, ( localize(5731, "Sources ({0})", content.sourceFolders.length)))
         );
         const settingsKey = getSettingsKeyForDiscoveryType(content.discoveryType);
         if (settingsKey) {
             const gearBtn = disposables.add(( new Button(header, {
-                title: ( localize(5630, "Configure locations")),
-                ariaLabel: ( localize(5631, "Configure locations")),
+                title: ( localize(5732, "Configure locations")),
+                ariaLabel: ( localize(5733, "Configure locations")),
                 hoverDelegate: getDefaultHoverDelegate("mouse")
             })));
             gearBtn.icon = Codicon.settingsGear;
@@ -321,13 +322,13 @@ function renderCustomizationDiscoveryContent(
         const contentEl = append(sectionEl, $("div.chat-debug-source-folder-content"));
         contentEl.tabIndex = 0;
         contentEl.setAttribute("role", "region");
-        contentEl.setAttribute("aria-label", ( localize(5632, "Source folders")));
+        contentEl.setAttribute("aria-label", ( localize(5734, "Source folders")));
         const capitalizedType = content.discoveryType.charAt(0).toUpperCase() + content.discoveryType.slice(1);
         const sourcesCaption = capitalizedType.endsWith("s") ? capitalizedType : capitalizedType + "s";
         append(
             contentEl,
             $("div.chat-debug-source-folder-note", undefined, ( localize(
-                5633,
+                5735,
                 "{0} were discovered by checking the following sources in order:",
                 sourcesCaption
             )))
@@ -338,7 +339,14 @@ function renderCustomizationDiscoveryContent(
             append(row, $("span.chat-debug-source-folder-index", undefined, `${i + 1}.`));
             append(row, $("span.chat-debug-source-folder-label", undefined, folder.uri.path));
         }
-        setupCollapsibleToggle(chevron, header, contentEl, disposables,  true);
+        setupCollapsibleToggle(
+            chevron,
+            header,
+            contentEl,
+            disposables,
+             true,
+            scrollable
+        );
     }
     return {
         element: container,
@@ -348,13 +356,13 @@ function renderCustomizationDiscoveryContent(
 function fileListToPlainText(content) {
     const lines = [];
     const capitalizedType = content.discoveryType.charAt(0).toUpperCase() + content.discoveryType.slice(1);
-    lines.push(( localize(5634, "{0} Discovery Results", capitalizedType)));
-    lines.push(( localize(5635, "Total files: {0}", content.files.length)));
+    lines.push(( localize(5736, "{0} Discovery Results", capitalizedType)));
+    lines.push(( localize(5737, "Total files: {0}", content.files.length)));
     lines.push("");
     const loaded = content.files.filter(f => f.status === "loaded");
     const skipped = content.files.filter(f => f.status === "skipped");
     if (loaded.length > 0) {
-        lines.push(( localize(5636, "Loaded ({0})", loaded.length)));
+        lines.push(( localize(5738, "Loaded ({0})", loaded.length)));
         const groups = ( new Map());
         for (const f of loaded) {
             const parentDir = content.discoveryType === "skill" ? dirname(dirname(f.uri)) : dirname(f.uri);
@@ -376,10 +384,10 @@ function fileListToPlainText(content) {
         lines.push("");
     }
     if (skipped.length > 0) {
-        lines.push(( localize(5637, "Skipped ({0})", skipped.length)));
+        lines.push(( localize(5739, "Skipped ({0})", skipped.length)));
         const skippedGroups = ( new Map());
         for (const f of skipped) {
-            const key = f.skipReason ?? ( localize(5638, "unknown"));
+            const key = f.skipReason ?? ( localize(5740, "unknown"));
             let group = skippedGroups.get(key);
             if (!group) {
                 group = [];
@@ -398,7 +406,7 @@ function fileListToPlainText(content) {
                         parts.push(f.errorMessage);
                     }
                     if (f.duplicateOf) {
-                        parts.push(( localize(5639, "duplicate of {0}", f.duplicateOf.path)));
+                        parts.push(( localize(5741, "duplicate of {0}", f.duplicateOf.path)));
                     }
                     detail += ` (${parts.join(", ")})`;
                 }
@@ -408,7 +416,7 @@ function fileListToPlainText(content) {
     }
     if (content.sourceFolders && content.sourceFolders.length > 0) {
         lines.push("");
-        lines.push(( localize(5640, "Sources ({0})", content.sourceFolders.length)));
+        lines.push(( localize(5742, "Sources ({0})", content.sourceFolders.length)));
         for (const folder of content.sourceFolders) {
             lines.push(`  ${folder.uri.path}`);
         }

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

@@ -1,12 +1,8 @@
 import { DisposableStore } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
-import { IChatDebugMessageSection } from "../../common/chatDebugService.js";
 /**
  * Wire up a collapsible toggle on a chevron+header+content triple.
  * Handles icon switching and display toggling.
  */
-export declare function setupCollapsibleToggle(chevron: HTMLElement, header: HTMLElement, contentEl: HTMLElement, disposables: DisposableStore, initiallyCollapsed?: boolean): void;
-/**
- * Render a collapsible section with a clickable header and pre-formatted content
- * wrapped in a scrollable element.
- */
-export declare function renderCollapsibleSection(parent: HTMLElement, section: IChatDebugMessageSection, disposables: DisposableStore, initiallyCollapsed?: boolean): void;
+export declare function setupCollapsibleToggle(chevron: HTMLElement, header: HTMLElement, contentEl: HTMLElement, disposables: DisposableStore, initiallyCollapsed?: boolean, scrollable?: {
+    scanDomNode(): void;
+}): void;

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

@@ -1,10 +1,9 @@
 
-import { $ as $$1, clearNode, addDisposableListener, EventType, append } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { clearNode, addDisposableListener, EventType } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 
-const $ = $$1;
-function setupCollapsibleToggle(chevron, header, contentEl, disposables, initiallyCollapsed = false) {
+function setupCollapsibleToggle(chevron, header, contentEl, disposables, initiallyCollapsed = false, scrollable) {
     let collapsed = initiallyCollapsed;
     header.tabIndex = 0;
     header.role = 'button';
@@ -22,6 +21,7 @@ function setupCollapsibleToggle(chevron, header, contentEl, disposables, initial
         collapsed = !collapsed;
         chevron.className = 'chat-debug-message-section-chevron';
         updateState();
+        scrollable?.scanDomNode();
     }));
     disposables.add(addDisposableListener(header, EventType.KEY_DOWN, (e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -30,17 +30,5 @@ function setupCollapsibleToggle(chevron, header, contentEl, disposables, initial
         }
     }));
 }
-function renderCollapsibleSection(parent, section, disposables, initiallyCollapsed = false) {
-    const sectionEl = append(parent, $('div.chat-debug-message-section'));
-    const header = append(sectionEl, $('div.chat-debug-message-section-header'));
-    const chevron = append(header, $(`span.chat-debug-message-section-chevron`));
-    append(header, $('span.chat-debug-message-section-title', undefined, section.name));
-    const contentEl = $('pre.chat-debug-message-section-content');
-    contentEl.textContent = section.content;
-    contentEl.tabIndex = 0;
-    const wrapper = append(sectionEl, $('div.chat-debug-message-section-content-wrapper'));
-    wrapper.appendChild(contentEl);
-    setupCollapsibleToggle(chevron, header, wrapper, disposables, initiallyCollapsed);
-}
 
-export { renderCollapsibleSection, setupCollapsibleToggle };
+export { setupCollapsibleToggle };

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

@@ -1,10 +1,11 @@
 import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import { ILanguageService } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service";
 import { IClipboardService } from "@codingame/monaco-vscode-api/vscode/vs/platform/clipboard/common/clipboardService.service";
 import { IHoverService } from "@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service";
 import { IInstantiationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation";
 import { IOpenerService } from "@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service";
 import { IEditorService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorService.service";
-import { IChatDebugEvent } from "../../common/chatDebugService.js";
+import { IChatDebugEvent } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatDebugService";
 import { IChatDebugService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatDebugService.service";
 /**
  * Reusable detail panel that resolves and displays the content of a
@@ -18,17 +19,32 @@ export declare class ChatDebugDetailPanel extends Disposable {
     private readonly clipboardService;
     private readonly hoverService;
     private readonly openerService;
+    private readonly languageService;
     private readonly _onDidHide;
     readonly onDidHide: import("@codingame/monaco-vscode-api/vscode/vs/base/common/event").Event<void>;
+    private readonly _onDidChangeWidth;
+    readonly onDidChangeWidth: import("@codingame/monaco-vscode-api/vscode/vs/base/common/event").Event<number>;
     readonly element: HTMLElement;
     private readonly contentContainer;
+    private readonly scrollable;
+    private readonly sash;
+    private headerElement;
     private readonly detailDisposables;
     private currentDetailText;
     private currentDetailEventId;
     private firstFocusableElement;
-    constructor(parent: HTMLElement, chatDebugService: IChatDebugService, instantiationService: IInstantiationService, editorService: IEditorService, clipboardService: IClipboardService, hoverService: IHoverService, openerService: IOpenerService);
+    private _width;
+    get width(): number;
+    constructor(parent: HTMLElement, chatDebugService: IChatDebugService, instantiationService: IInstantiationService, editorService: IEditorService, clipboardService: IClipboardService, hoverService: IHoverService, openerService: IOpenerService, languageService: ILanguageService);
     show(event: IChatDebugEvent): Promise<void>;
     get isVisible(): boolean;
     focus(): void;
+    /**
+     * Set explicit dimensions on the scrollable element so the scrollbar
+     * can compute its size. Call after the panel is shown and whenever
+     * the available space changes.
+     */
+    layout(height: number): void;
+    layoutSash(): void;
     hide(): void;
 }

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

@@ -2,6 +2,9 @@
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import { $ as $$1, append, hide, addDisposableListener, EventType, getWindow, show, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
+import { Sash, Orientation, SashState } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/sash/sash';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
 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, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
@@ -20,9 +23,16 @@ import { fileListToPlainText, renderCustomizationDiscoveryContent } from './chat
 import { resolvedMessageToPlainText, renderResolvedMessageContent, messageEventToPlainText, renderUserMessageContent, renderAgentResponseContent } from './chatDebugMessageContentRenderer.js';
 import { toolCallContentToPlainText, renderToolCallContent } from './chatDebugToolCallContentRenderer.js';
 import { modelTurnContentToPlainText, renderModelTurnContent } from './chatDebugModelTurnContentRenderer.js';
+import { hookContentToPlainText, renderHookContent } from './chatDebugHookContentRenderer.js';
 
 const $ = $$1;
+const DETAIL_PANEL_DEFAULT_WIDTH = 350;
+const DETAIL_PANEL_MIN_WIDTH = 200;
+const DETAIL_PANEL_MAX_WIDTH = 800;
 let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
+    get width() {
+        return this._width;
+    }
     constructor(
         parent,
         chatDebugService,
@@ -30,7 +40,8 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
         editorService,
         clipboardService,
         hoverService,
-        openerService
+        openerService,
+        languageService
     ) {
         super();
         this.chatDebugService = chatDebugService;
@@ -39,13 +50,48 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
         this.clipboardService = clipboardService;
         this.hoverService = hoverService;
         this.openerService = openerService;
+        this.languageService = languageService;
         this._onDidHide = this._register(( new Emitter()));
         this.onDidHide = this._onDidHide.event;
+        this._onDidChangeWidth = this._register(( new Emitter()));
+        this.onDidChangeWidth = this._onDidChangeWidth.event;
         this.detailDisposables = this._register(( new DisposableStore()));
         this.currentDetailText = "";
+        this._width = DETAIL_PANEL_DEFAULT_WIDTH;
         this.element = append(parent, $(".chat-debug-detail-panel"));
         this.contentContainer = $(".chat-debug-detail-content");
+        this.scrollable = this._register(( new DomScrollableElement(this.contentContainer, {
+            horizontal: ScrollbarVisibility.Hidden,
+            vertical: ScrollbarVisibility.Auto
+        })));
+        this.element.style.width = `${this._width}px`;
         hide(this.element);
+        this.sash = this._register(( new Sash(parent, {
+            getVerticalSashLeft: () => parent.offsetWidth - this._width
+        }, {
+            orientation: Orientation.VERTICAL
+        })));
+        this.sash.state = SashState.Disabled;
+        let sashStartWidth;
+        this._register(this.sash.onDidStart(() => sashStartWidth = this._width));
+        this._register(this.sash.onDidEnd(() => {
+            sashStartWidth = undefined;
+            this.sash.layout();
+        }));
+        this._register(this.sash.onDidChange(e => {
+            if (sashStartWidth === undefined) {
+                return;
+            }
+            const delta = e.startX - e.currentX;
+            const newWidth = Math.max(
+                DETAIL_PANEL_MIN_WIDTH,
+                Math.min(DETAIL_PANEL_MAX_WIDTH, sashStartWidth + delta)
+            );
+            this._width = newWidth;
+            this.element.style.width = `${newWidth}px`;
+            this.sash.layout();
+            this._onDidChangeWidth.fire(newWidth);
+        }));
         this._register(addDisposableListener(this.element, EventType.KEY_DOWN, e => {
             if ((e.ctrlKey || e.metaKey) && e.key === "a") {
                 const target = e.target;
@@ -70,14 +116,17 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
         this.currentDetailEventId = event.id;
         const resolved = event.id ? await this.chatDebugService.resolveEvent(event.id) : undefined;
         show(this.element);
+        this.sash.state = SashState.Enabled;
+        this.sash.layout();
         clearNode(this.element);
         clearNode(this.contentContainer);
         this.detailDisposables.clear();
         const header = append(this.element, $(".chat-debug-detail-header"));
-        this.element.appendChild(this.contentContainer);
+        this.headerElement = header;
+        this.element.appendChild(this.scrollable.getDomNode());
         const fullScreenButton = this.detailDisposables.add(( new Button(header, {
-            ariaLabel: ( localize(5643, "Open in Editor")),
-            title: ( localize(5643, "Open in Editor"))
+            ariaLabel: ( localize(5745, "Open in Editor")),
+            title: ( localize(5745, "Open in Editor"))
         })));
         fullScreenButton.element.classList.add("chat-debug-detail-button");
         fullScreenButton.icon = Codicon.goToFile;
@@ -89,8 +138,8 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             });
         }));
         const copyButton = this.detailDisposables.add(( new Button(header, {
-            ariaLabel: ( localize(5644, "Copy")),
-            title: ( localize(5644, "Copy"))
+            ariaLabel: ( localize(5746, "Copy")),
+            title: ( localize(5746, "Copy"))
         })));
         copyButton.element.classList.add("chat-debug-detail-button");
         copyButton.icon = Codicon.copy;
@@ -98,8 +147,8 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             this.clipboardService.writeText(this.currentDetailText);
         }));
         const closeButton = this.detailDisposables.add(( new Button(header, {
-            ariaLabel: ( localize(5645, "Close")),
-            title: ( localize(5645, "Close"))
+            ariaLabel: ( localize(5747, "Close")),
+            title: ( localize(5747, "Close"))
         })));
         closeButton.element.classList.add("chat-debug-detail-button");
         closeButton.icon = Codicon.close;
@@ -115,19 +164,19 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
                 resolved,
                 this.openerService,
                 accessor.get(IModelService),
-                accessor.get(ILanguageService),
+                this.languageService,
                 this.hoverService,
-                accessor.get(ILabelService)
+                accessor.get(ILabelService),
+                this.scrollable
             ));
             this.detailDisposables.add(contentDisposables);
             this.contentContainer.appendChild(contentEl);
         } else if (resolved && resolved.kind === "toolCall") {
             this.currentDetailText = toolCallContentToPlainText(resolved);
-            const languageService = this.instantiationService.invokeFunction(accessor => accessor.get(ILanguageService));
             const {
                 element: contentEl,
                 disposables: contentDisposables
-            } = await renderToolCallContent(resolved, languageService);
+            } = await renderToolCallContent(resolved, this.languageService, this.clipboardService, this.scrollable);
             if (this.currentDetailEventId !== event.id) {
                 contentDisposables.dispose();
                 return;
@@ -139,7 +188,11 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             const {
                 element: contentEl,
                 disposables: contentDisposables
-            } = renderResolvedMessageContent(resolved);
+            } = await renderResolvedMessageContent(resolved, this.languageService, this.clipboardService, this.scrollable);
+            if (this.currentDetailEventId !== event.id) {
+                contentDisposables.dispose();
+                return;
+            }
             this.detailDisposables.add(contentDisposables);
             this.contentContainer.appendChild(contentEl);
         } else if (resolved && resolved.kind === "modelTurn") {
@@ -147,7 +200,23 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             const {
                 element: contentEl,
                 disposables: contentDisposables
-            } = renderModelTurnContent(resolved);
+            } = await renderModelTurnContent(resolved, this.languageService, this.clipboardService, this.scrollable);
+            if (this.currentDetailEventId !== event.id) {
+                contentDisposables.dispose();
+                return;
+            }
+            this.detailDisposables.add(contentDisposables);
+            this.contentContainer.appendChild(contentEl);
+        } else if (resolved && resolved.kind === "hook") {
+            this.currentDetailText = hookContentToPlainText(resolved);
+            const {
+                element: contentEl,
+                disposables: contentDisposables
+            } = await renderHookContent(resolved, this.languageService, this.clipboardService, this.scrollable);
+            if (this.currentDetailEventId !== event.id) {
+                contentDisposables.dispose();
+                return;
+            }
             this.detailDisposables.add(contentDisposables);
             this.contentContainer.appendChild(contentEl);
         } else if (event.kind === "userMessage") {
@@ -155,7 +224,11 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             const {
                 element: contentEl,
                 disposables: contentDisposables
-            } = renderUserMessageContent(event);
+            } = await renderUserMessageContent(event, this.languageService, this.clipboardService, this.scrollable);
+            if (this.currentDetailEventId !== event.id) {
+                contentDisposables.dispose();
+                return;
+            }
             this.detailDisposables.add(contentDisposables);
             this.contentContainer.appendChild(contentEl);
         } else if (event.kind === "agentResponse") {
@@ -163,7 +236,11 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             const {
                 element: contentEl,
                 disposables: contentDisposables
-            } = renderAgentResponseContent(event);
+            } = await renderAgentResponseContent(event, this.languageService, this.clipboardService, this.scrollable);
+            if (this.currentDetailEventId !== event.id) {
+                contentDisposables.dispose();
+                return;
+            }
             this.detailDisposables.add(contentDisposables);
             this.contentContainer.appendChild(contentEl);
         } else {
@@ -176,6 +253,12 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
             }
             pre.textContent = this.currentDetailText;
         }
+        const parentHeight = this.element.parentElement?.clientHeight ?? 0;
+        if (parentHeight > 0) {
+            this.layout(parentHeight);
+        } else {
+            this.scrollable.scanDomNode();
+        }
     }
     get isVisible() {
         return this.element.style.display !== "none";
@@ -183,16 +266,28 @@ let ChatDebugDetailPanel = class ChatDebugDetailPanel extends Disposable {
     focus() {
         this.firstFocusableElement?.focus();
     }
+    layout(height) {
+        const headerHeight = this.headerElement?.offsetHeight ?? 0;
+        const scrollableHeight = Math.max(0, height - headerHeight);
+        this.contentContainer.style.height = `${scrollableHeight}px`;
+        this.scrollable.scanDomNode();
+        this.sash.layout();
+    }
+    layoutSash() {
+        this.sash.layout();
+    }
     hide() {
         this.currentDetailEventId = undefined;
         this.firstFocusableElement = undefined;
+        this.headerElement = undefined;
         hide(this.element);
+        this.sash.state = SashState.Disabled;
         clearNode(this.element);
         clearNode(this.contentContainer);
         this.detailDisposables.clear();
         this._onDidHide.fire();
     }
 };
-ChatDebugDetailPanel = ( __decorate([( __param(1, IChatDebugService)), ( __param(2, IInstantiationService)), ( __param(3, IEditorService)), ( __param(4, IClipboardService)), ( __param(5, IHoverService)), ( __param(6, IOpenerService))], ChatDebugDetailPanel));
+ChatDebugDetailPanel = ( __decorate([( __param(1, IChatDebugService)), ( __param(2, IInstantiationService)), ( __param(3, IEditorService)), ( __param(4, IClipboardService)), ( __param(5, IHoverService)), ( __param(6, IOpenerService)), ( __param(7, ILanguageService))], ChatDebugDetailPanel));
 
 export { ChatDebugDetailPanel };

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

@@ -2,6 +2,7 @@ import { Dimension } from "@codingame/monaco-vscode-api/vscode/vs/base/browser/d
 import { CancellationToken } from "@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation";
 import { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
 import { IContextKeyService } from "@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service";
+import { IConfigurationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service";
 import { IInstantiationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation";
 import { IStorageService } from "@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage.service";
 import { ITelemetryService } from "@codingame/monaco-vscode-api/vscode/vs/platform/telemetry/common/telemetry.service";
@@ -21,6 +22,7 @@ export declare class ChatDebugEditor extends EditorPane {
     private readonly chatWidgetService;
     private readonly chatService;
     private readonly contextKeyService;
+    private readonly configurationService;
     static readonly ID: string;
     private container;
     private currentDimension;
@@ -32,15 +34,13 @@ export declare class ChatDebugEditor extends EditorPane {
     private filterState;
     private readonly sessionModelListener;
     private readonly modelChangeListeners;
-    /** Saved session resource so we can restore it after the editor is re-shown. */
-    private savedSessionResource;
     /**
      * Stops the streaming pipeline and clears cached events for the
      * active session. Called when navigating away from a session or
      * when the editor becomes hidden.
      */
     private endActiveSession;
-    constructor(group: IEditorGroup, telemetryService: ITelemetryService, themeService: IThemeService, storageService: IStorageService, instantiationService: IInstantiationService, chatDebugService: IChatDebugService, chatWidgetService: IChatWidgetService, chatService: IChatService, contextKeyService: IContextKeyService);
+    constructor(group: IEditorGroup, telemetryService: ITelemetryService, themeService: IThemeService, storageService: IStorageService, instantiationService: IInstantiationService, chatDebugService: IChatDebugService, chatWidgetService: IChatWidgetService, chatService: IChatService, contextKeyService: IContextKeyService, configurationService: IConfigurationService);
     protected createEditor(parent: HTMLElement): void;
     private showView;
     navigateToSession(sessionResource: URI, view?: "logs" | "overview" | "flowchart"): void;