@codingame/monaco-vscode-chat-service-override 31.0.0 → 32.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.js

@@ -2,13 +2,14 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as aiCustomizationManagement from './media/aiCustomizationManagement.css';
-import { $ as $$1, append, Dimension, addDisposableListener } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, addDisposableListener, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { status } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/aria/aria';
 import { RunOnceScheduler } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
-import { CancellationToken } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
 import { VSBuffer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/buffer';
 import { onUnexpectedError } from '@codingame/monaco-vscode-api/vscode/vs/base/common/errors';
 import { DisposableStore, toDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { SplitView, Sizing } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/splitview/splitview';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
@@ -40,6 +41,8 @@ import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/sear
 import { PANEL_BORDER } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/theme';
 import { AICustomizationManagementEditorInput } from './aiCustomizationManagementEditorInput.js';
 import { AICustomizationListWidget } from './aiCustomizationListWidget.js';
+import { ITEMS_MODEL_SECTIONS } from './aiCustomizationItemsModel.js';
+import { IAICustomizationItemsModel } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationItemsModel.service';
 import { McpListWidget } from './mcpListWidget.js';
 import { PluginListWidget } from './pluginListWidget.js';
 import { AI_CUSTOMIZATION_MANAGEMENT_EDITOR_ID, CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_EDITOR, CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_SECTION, CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_HARNESS, AI_CUSTOMIZATION_MANAGEMENT_SELECTED_SECTION_KEY, AI_CUSTOMIZATION_MANAGEMENT_SIDEBAR_WIDTH_KEY, SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, CONTENT_MIN_WIDTH } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagement';
@@ -49,6 +52,7 @@ import { PromptsType, Target } from '@codingame/monaco-vscode-api/vscode/vs/work
 import { PromptsStorage } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/service/promptsService';
 import { IPromptsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/service/promptsService.service';
 import { AGENT_MD_FILENAME } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/config/promptFileLocations';
+import { getTarget, getAttributeDefinition } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/languageProviders/promptFileAttributes';
 import { NEW_SKILL_COMMAND_ID, NEW_AGENT_COMMAND_ID, NEW_INSTRUCTIONS_COMMAND_ID, NEW_PROMPT_COMMAND_ID } from '@codingame/monaco-vscode-xterm-addons-common/vscode/vs/workbench/contrib/chat/browser/promptSyntax/newPromptFileActions';
 import { showConfigureHooksQuickPick } from '../promptSyntax/hookActions.js';
 import { resolveWorkspaceTargetDirectory, resolveUserTargetDirectory } from './customizationCreatorService.js';
@@ -63,20 +67,20 @@ import { getSimpleEditorOptions } from '@codingame/monaco-vscode-api/vscode/vs/w
 import { IWorkingCopyService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/workingCopy/common/workingCopyService.service';
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { IFileService } from '@codingame/monaco-vscode-api/vscode/vs/platform/files/common/files.service';
+import { IMarkdownRendererService } from '@codingame/monaco-vscode-api/vscode/vs/platform/markdown/browser/markdownRenderer.service';
 import { INotificationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/notification/common/notification.service';
 import { IQuickInputService } from '@codingame/monaco-vscode-api/vscode/vs/platform/quickinput/common/quickInput.service';
 import { IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
 import { Action } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
-import { McpServerEditorInput } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/mcp/browser/mcpServerEditorInput';
-import { McpServerEditor } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/mcp/browser/mcpServerEditor';
 import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
-import { AgentPluginEditor } from '../agentPluginEditor/agentPluginEditor.js';
-import { AgentPluginEditorInput } from '../agentPluginEditor/agentPluginEditorInput.js';
-import { CustomizationHarness, matchesWorkspaceSubpath } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService';
+import { EmbeddedMcpServerDetail } from './embeddedMcpServerDetail.js';
+import { EmbeddedAgentPluginDetail } from './embeddedAgentPluginDetail.js';
+import { matchesWorkspaceSubpath } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService';
 import { ICustomizationHarnessService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/customizationHarnessService.service';
 import { ChatConfiguration } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/constants';
 import { AICustomizationWelcomePage } from './aiCustomizationWelcomePage.js';
 import { IViewsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/views/common/viewsService.service';
+import { SessionType } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatSessionsService';
 import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 import { Orientation } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/sash/sash';
 import { AICustomizationManagementSection, BUILTIN_STORAGE } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/aiCustomizationWorkspaceService';
@@ -85,7 +89,7 @@ var AICustomizationManagementEditor_1;
 registerCss(aiCustomizationManagement);
 const $ = $$1;
 const aiCustomizationManagementSashBorder = registerColor("aiCustomizationManagement.sashBorder", PANEL_BORDER, ( localize(
-    5410,
+    5490,
     "The color of the Agent Customizations editor splitview sash border."
 )));
 class SectionItemDelegate {
@@ -159,13 +163,15 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         configurationService,
         workingCopyService,
         hoverService,
+        markdownRendererService,
         modelService,
         quickInputService,
         contextMenuService,
         fileService,
         notificationService,
         harnessService,
-        viewsService
+        viewsService,
+        itemsModel
     ) {
         super(
             AICustomizationManagementEditor_1.ID,
@@ -184,6 +190,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.configurationService = configurationService;
         this.workingCopyService = workingCopyService;
         this.hoverService = hoverService;
+        this.markdownRendererService = markdownRendererService;
         this.modelService = modelService;
         this.quickInputService = quickInputService;
         this.contextMenuService = contextMenuService;
@@ -191,16 +198,24 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.notificationService = notificationService;
         this.harnessService = harnessService;
         this.viewsService = viewsService;
+        this.itemsModel = itemsModel;
         this.editorActionButtonInProgress = false;
+        this.editorDisplayMode = "preview";
         this.editorModelChangeDisposables = this._register(( new DisposableStore()));
+        this.editorPreviewDisposables = this._register(( new DisposableStore()));
+        this.editorPreviewRenderScheduler = this._register(( new RunOnceScheduler(() => {
+            if (this.viewMode === "editor" && this.editorDisplayMode === "preview") {
+                this.renderCurrentEditorPreview();
+            }
+        }, 200)));
         this.builtinEditingSessions = ( new Map());
+        this.currentEditingReadOnly = false;
         this.viewMode = "list";
         this.mcpDetailDisposables = this._register(( new DisposableStore()));
         this.pluginDetailDisposables = this._register(( new DisposableStore()));
         this.sections = [];
         this.allSections = [];
         this.editorDisposables = this._register(( new DisposableStore()));
-        this.promptsSectionCountScheduler = this._register(( new RunOnceScheduler(() => this._doRefreshAllPromptsSectionCounts(), 100)));
         this._editorContentChanged = false;
         this.inEditorContextKey = CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_EDITOR.bindTo(contextKeyService);
         this.sectionContextKey = CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_SECTION.bindTo(contextKeyService);
@@ -218,62 +233,62 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this._register(toDisposable(() => this.disposeBuiltinEditingSessions()));
         const sectionInfo = {
             [AICustomizationManagementSection.Agents]: {
-                label: ( localize(5411, "Agents")),
+                label: ( localize(5491, "Agents")),
                 icon: agentIcon,
                 description: ( localize(
-                    5412,
+                    5492,
                     "Define custom agents with specialized personas, tool access, and instructions for specific tasks."
                 ))
             },
             [AICustomizationManagementSection.Skills]: {
-                label: ( localize(5413, "Skills")),
+                label: ( localize(5493, "Skills")),
                 icon: skillIcon,
                 description: ( localize(
-                    5414,
+                    5494,
                     "Create reusable skill files that provide domain-specific knowledge and workflows."
                 ))
             },
             [AICustomizationManagementSection.Instructions]: {
-                label: ( localize(5415, "Instructions")),
+                label: ( localize(5495, "Instructions")),
                 icon: instructionsIcon,
                 description: ( localize(
-                    5416,
+                    5496,
                     "Set always-on instructions that guide AI behavior across your workspace or user profile."
                 ))
             },
             [AICustomizationManagementSection.Prompts]: {
-                label: ( localize(5417, "Prompts")),
+                label: ( localize(5497, "Prompts")),
                 icon: promptIcon,
-                description: ( localize(5418, "Reusable prompt templates that can be invoked as slash commands."))
+                description: ( localize(5498, "Reusable prompt templates that can be invoked as slash commands."))
             },
             [AICustomizationManagementSection.Hooks]: {
-                label: ( localize(5419, "Hooks")),
+                label: ( localize(5499, "Hooks")),
                 icon: hookIcon,
                 description: ( localize(
-                    5420,
+                    5500,
                     "Configure automated actions triggered by events like saving files or running tasks."
                 ))
             },
             [AICustomizationManagementSection.McpServers]: {
-                label: ( localize(5421, "MCP Servers")),
+                label: ( localize(5501, "MCP Servers")),
                 icon: Codicon.server,
                 description: ( localize(
-                    5422,
+                    5502,
                     "Connect external tool servers that extend AI capabilities with custom tools and data sources."
                 ))
             },
             [AICustomizationManagementSection.Plugins]: {
-                label: ( localize(5423, "Plugins")),
+                label: ( localize(5503, "Plugins")),
                 icon: pluginIcon,
                 description: ( localize(
-                    5424,
+                    5504,
                     "Install and manage agent plugins that add additional tools, skills, and integrations."
                 ))
             },
             [AICustomizationManagementSection.Models]: {
-                label: ( localize(5425, "Models")),
+                label: ( localize(5505, "Models")),
                 icon: Codicon.vm,
-                description: ( localize(5426, "Configure and manage language models available for use."))
+                description: ( localize(5506, "Configure and manage language models available for use."))
             }
         };
         for (const id of this.workspaceService.managementSections) {
@@ -323,7 +338,8 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             layout: (width, _, height) => {
                 this.sidebarContainer.style.width = `${width}px`;
                 if (height !== undefined) {
-                    this.sectionsList.layout(height - 8, width);
+                    const headerHeight = this.sidebarHeaderContainer?.offsetHeight ?? 0;
+                    this.sectionsList.layout(Math.max(0, height - 8 - headerHeight), width);
                 }
             }
         }, savedWidth, undefined, true);
@@ -348,14 +364,6 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                             height: Math.max(0, height - editorHeaderHeight - padding)
                         });
                     }
-                    if (this.viewMode === "mcpDetail" && this.embeddedMcpEditor) {
-                        const backHeaderHeight = 40;
-                        this.embeddedMcpEditor.layout(new Dimension(width, Math.max(0, height - backHeaderHeight)));
-                    }
-                    if (this.viewMode === "pluginDetail" && this.embeddedPluginEditor) {
-                        const backHeaderHeight = 40;
-                        this.embeddedPluginEditor.layout(new Dimension(width, Math.max(0, height - backHeaderHeight)));
-                    }
                 }
             }
         }, Sizing.Distribute, undefined, true);
@@ -381,7 +389,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         let hidden;
         if (this.isHarnessSelectorEnabled) {
             const activeId = this.harnessService.activeHarness.get();
-            const descriptor = this.harnessService.availableHarnesses.get().find(h => h.id === activeId);
+            const descriptor = this.harnessService.findHarnessById(activeId);
             hidden = ( new Set(descriptor?.hiddenSections ?? []));
         } else {
             hidden = ( new Set());
@@ -417,8 +425,8 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                 setRowLineHeight: false,
                 horizontalScrolling: false,
                 accessibilityProvider: {
-                    getAriaLabel: item => item.label,
-                    getWidgetAriaLabel: () => ( localize(5427, "Agent Customization Sections"))
+                    getAriaLabel: item => item.count > 0 ? ( localize(5507, "{0}, {1} items", item.label, item.count)) : item.label,
+                    getWidgetAriaLabel: () => ( localize(5508, "Agent Customization Sections"))
                 },
                 openOnSingleClick: true,
                 identityProvider: {
@@ -454,31 +462,33 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                 }
             }
             this._previousActiveHarnessId = activeId;
-            this.refreshAllPromptsSectionCounts();
         }));
         if (!this.isHarnessSelectorEnabled) {
-            this.harnessService.setActiveHarness(CustomizationHarness.VSCode);
+            this.harnessService.setActiveHarness(SessionType.Local);
         }
         this.editorDisposables.add(this.configurationService.onDidChangeConfiguration(e => {
             if (e.affectsConfiguration(ChatConfiguration.ChatCustomizationHarnessSelectorEnabled)) {
                 if (!this.isHarnessSelectorEnabled) {
-                    this.harnessService.setActiveHarness(CustomizationHarness.VSCode);
+                    this.harnessService.setActiveHarness(SessionType.Local);
                 }
             }
+            if (e.affectsConfiguration(ChatConfiguration.ChatCustomizationsStructuredPreviewEnabled)) {
+                this.onStructuredPreviewSettingChanged();
+            }
         }));
     }
     createSidebarHeader(sidebarContent) {
         const headerRow = this.sidebarHeaderContainer = append(sidebarContent, $(".sidebar-header-row"));
         const homeButton = this.homeButton = append(headerRow, $("button.sidebar-home-button"));
-        homeButton.setAttribute("aria-label", ( localize(5428, "Overview")));
+        homeButton.setAttribute("aria-label", ( localize(5509, "Overview")));
         this.editorDisposables.add(
-            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), homeButton, ( localize(5429, "Back to overview")))
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), homeButton, ( localize(5510, "Back to overview")))
         );
         const homeIcon = append(homeButton, $("span.sidebar-home-icon"));
         homeIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.home));
         homeIcon.setAttribute("aria-hidden", "true");
         const homeLabel = this.homeButtonLabel = append(homeButton, $("span.sidebar-home-label"));
-        homeLabel.textContent = ( localize(5430, "Overview"));
+        homeLabel.textContent = ( localize(5511, "Overview"));
         this.editorDisposables.add(addDisposableListener(homeButton, "click", () => {
             this.showWelcomePage();
         }));
@@ -491,11 +501,11 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }
         const container = this.harnessDropdownContainer = append(parent, $(".sidebar-harness-dropdown"));
         this.harnessDropdownButton = append(container, $("button.harness-dropdown-button"));
-        this.harnessDropdownButton.setAttribute("aria-label", ( localize(5431, "Select customization target")));
+        this.harnessDropdownButton.setAttribute("aria-label", ( localize(5512, "Select customization target")));
         this.harnessDropdownButton.setAttribute("aria-haspopup", "listbox");
         this.editorDisposables.add(
             this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), this.harnessDropdownButton, () => {
-                const descriptor = this.harnessService.availableHarnesses.get().find(h => h.id === this.harnessService.activeHarness.get());
+                const descriptor = this.harnessService.findHarnessById(this.harnessService.activeHarness.get());
                 return descriptor?.label ?? "";
             })
         );
@@ -606,23 +616,27 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }, this.commandService, this.workspaceService, this.hoverService)));
         this.welcomePage.rebuildCards(( new Set(( this.sections.map(s => s.id)))));
     }
-    createBackArrowButton() {
+    createBackArrowButton(onClick) {
         const button = $("button.section-back-arrow-button");
         button.type = "button";
-        button.setAttribute("aria-label", ( localize(5432, "Back to overview")));
+        button.setAttribute("aria-label", ( localize(5513, "Back to overview")));
         this.editorDisposables.add(
-            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), button, ( localize(5433, "Back to overview")))
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), button, ( localize(5514, "Back to overview")))
         );
         const icon = append(button, $("span.section-back-arrow-icon"));
         icon.classList.add(...ThemeIcon.asClassNameArray(Codicon.arrowLeft));
         icon.setAttribute("aria-hidden", "true");
         this.editorDisposables.add(addDisposableListener(button, "click", () => {
-            this.showWelcomePage();
+            if (onClick) {
+                onClick();
+            } else {
+                this.showWelcomePage();
+            }
         }));
         return button;
     }
-    injectBackArrowIntoSearchRow(widget) {
-        widget.prependToSearchRow(this.createBackArrowButton());
+    injectBackArrowIntoSearchRow(widget, onClick) {
+        widget.prependToSearchRow(this.createBackArrowButton(onClick));
     }
     createContent() {
         const contentInner = append(this.contentContainer, $(".content-inner"));
@@ -671,11 +685,11 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             this.modelsFooterElement = append(this.modelsContentContainer, $(".section-footer"));
             const modelsDescription = append(this.modelsFooterElement, $("p.section-footer-description"));
             modelsDescription.textContent = ( localize(
-                5434,
+                5515,
                 "Browse and manage language models from different providers. Select models for use in chat, code completion, and other AI features."
             ));
             const modelsLink = append(this.modelsFooterElement, $("a.section-footer-link"));
-            modelsLink.textContent = ( localize(5435, "Learn more about language models"));
+            modelsLink.textContent = ( localize(5516, "Learn more about language models"));
             modelsLink.href = "https://code.visualstudio.com/docs/copilot/customization/language-models";
             this.editorDisposables.add(addDisposableListener(modelsLink, "click", e => {
                 e.preventDefault();
@@ -686,7 +700,13 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             this.mcpContentContainer = append(contentInner, $(".mcp-content-container"));
             this.mcpListWidget = this.editorDisposables.add(this.instantiationService.createInstance(McpListWidget));
             this.mcpContentContainer.appendChild(this.mcpListWidget.element);
-            this.injectBackArrowIntoSearchRow(this.mcpListWidget);
+            this.injectBackArrowIntoSearchRow(this.mcpListWidget, () => {
+                if (this.mcpListWidget.isInBrowseMode()) {
+                    this.mcpListWidget.exitBrowseMode();
+                } else {
+                    this.showWelcomePage();
+                }
+            });
             this.mcpDetailContainer = append(contentInner, $(".mcp-detail-container"));
             this.createEmbeddedMcpDetail();
             this.editorDisposables.add(this.mcpListWidget.onDidSelectServer(server => {
@@ -700,7 +720,13 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             this.pluginContentContainer = append(contentInner, $(".plugin-content-container"));
             this.pluginListWidget = this.editorDisposables.add(this.instantiationService.createInstance(PluginListWidget));
             this.pluginContentContainer.appendChild(this.pluginListWidget.element);
-            this.injectBackArrowIntoSearchRow(this.pluginListWidget);
+            this.injectBackArrowIntoSearchRow(this.pluginListWidget, () => {
+                if (this.pluginListWidget.isInBrowseMode()) {
+                    this.pluginListWidget.exitBrowseMode();
+                } else {
+                    this.showWelcomePage();
+                }
+            });
             this.pluginDetailContainer = append(contentInner, $(".plugin-detail-container"));
             this.createEmbeddedPluginDetail();
             this.editorDisposables.add(this.pluginListWidget.onDidSelectPlugin(item => {
@@ -734,19 +760,12 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             }));
             this.modelsWidget.fireItemCount();
         }
-        this.editorDisposables.add(
-            this.promptsService.onDidChangeCustomAgents(() => this.refreshAllPromptsSectionCounts())
-        );
-        this.editorDisposables.add(
-            this.promptsService.onDidChangeSkills(() => this.refreshAllPromptsSectionCounts())
-        );
-        this.editorDisposables.add(
-            this.promptsService.onDidChangeInstructions(() => this.refreshAllPromptsSectionCounts())
-        );
-        this.editorDisposables.add(
-            this.promptsService.onDidChangeSlashCommands(() => this.refreshAllPromptsSectionCounts())
-        );
-        this.refreshAllPromptsSectionCounts();
+        for (const section of ITEMS_MODEL_SECTIONS) {
+            const observable = this.itemsModel.getCount(section);
+            this.editorDisposables.add(autorun(reader => {
+                this.updateSectionCount(section, observable.read(reader));
+            }));
+        }
         if (this.isPromptsSection(this.selectedSection)) {
             void this.listWidget.setSection(this.selectedSection);
         }
@@ -763,18 +782,6 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.sectionsList.splice(0, this.sectionsList.length, this.sections);
         this.ensureSectionsListReflectsActiveSection();
     }
-    refreshAllPromptsSectionCounts() {
-        this.promptsSectionCountScheduler.schedule();
-    }
-    _doRefreshAllPromptsSectionCounts() {
-        for (const section of this.sections) {
-            if (this.isPromptsSection(section.id)) {
-                this.listWidget.computeItemCountForSection(section.id).then(count => {
-                    this.updateSectionCount(section.id, count);
-                }, onUnexpectedError);
-            }
-        }
-    }
     showWelcomePage() {
         if (this.viewMode === "editor") {
             this.goBackToList();
@@ -791,6 +798,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.welcomePage?.reset();
         this.updateContentVisibility();
         this.ensureSectionsListReflectsActiveSection(undefined);
+        this.welcomePage?.focus();
     }
     selectSection(section, options) {
         if (this.selectedSection === section && !options?.showMarketplace) {
@@ -821,6 +829,9 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         if (this.isPromptsSection(section)) {
             void this.listWidget.setSection(section);
         }
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
         this.ensureSectionsListReflectsActiveSection(section);
         if (options?.showMarketplace) {
             if (section === AICustomizationManagementSection.McpServers) {
@@ -829,6 +840,15 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                 this.pluginListWidget?.showBrowseMarketplace();
             }
         }
+        if (section === AICustomizationManagementSection.McpServers) {
+            this.mcpListWidget?.focusSearch();
+        } else if (section === AICustomizationManagementSection.Plugins) {
+            this.pluginListWidget?.focusSearch();
+        } else if (section === AICustomizationManagementSection.Models) {
+            this.modelsWidget?.focusSearch();
+        } else {
+            this.listWidget?.focusSearch();
+        }
     }
     ensureSectionsListReflectsActiveSection(section = this.selectedSection) {
         if (!this.sectionsList) {
@@ -926,7 +946,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                 await this.fileService.createFile(fileUri);
                 await this.showEmbeddedEditor(fileUri, fileName, PromptsType.instructions, PromptsStorage.local, true);
             }
-            void this.listWidget.refresh();
+            this.listWidget.refresh();
             return;
         }
         if (type === PromptsType.hook) {
@@ -987,7 +1007,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             return;
         }
         await this.commandService.executeCommand(commandId, options);
-        void this.listWidget.refresh();
+        this.listWidget.refresh();
     }
     async resolveTargetDirectoryWithPicker(type, target) {
         const allFolders = await this.promptsService.getSourceFolders(type);
@@ -1034,7 +1054,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             uri: folder.uri
         })));
         const picked = await this.quickInputService.pick(items, {
-            placeHolder: ( localize(5436, "Select a directory for the new customization file"))
+            placeHolder: ( localize(5517, "Select a directory for the new customization file"))
         });
         return picked?.uri ?? null;
     }
@@ -1089,7 +1109,11 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
     focus() {
         super.focus();
         if (this.viewMode === "editor") {
-            this.embeddedEditor?.focus();
+            if (this.editorDisplayMode === "raw") {
+                this.embeddedEditor?.focus();
+            } else {
+                this.editorModeButton?.focus();
+            }
             return;
         }
         if (this.selectedSection === undefined) {
@@ -1144,7 +1168,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }
     }
     refreshList() {
-        void this.listWidget.refresh();
+        this.listWidget.refresh();
     }
     revealLastItem() {
         if (this.selectedSection === AICustomizationManagementSection.McpServers) {
@@ -1164,11 +1188,11 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }
         const editorHeader = append(this.editorContentContainer, $(".editor-header"));
         this.editorActionButton = append(editorHeader, $("button.editor-back-button"));
-        this.editorActionButton.setAttribute("aria-label", ( localize(5437, "Back to list")));
+        this.editorActionButton.setAttribute("aria-label", ( localize(5518, "Back to list")));
         this.editorDisposables.add(this.hoverService.setupManagedHover(
             getDefaultHoverDelegate("element"),
             this.editorActionButton,
-            ( localize(5438, "Back to list"))
+            ( localize(5519, "Back to list"))
         ));
         this.editorActionButtonIcon = append(
             this.editorActionButton,
@@ -1178,21 +1202,47 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.editorDisposables.add(addDisposableListener(this.editorActionButton, "click", () => {
             void this.handleEditorActionButton().catch(error => {
                 console.error("Failed to handle editor back action:", error);
-                this.notificationService.error(( localize(5439, "Failed to finish the prompt action.")));
+                this.notificationService.error(( localize(5520, "Failed to finish the prompt action.")));
             });
         }));
         const itemInfo = append(editorHeader, $(".editor-item-info"));
         this.editorItemNameElement = append(itemInfo, $(".editor-item-name"));
         this.editorItemPathElement = append(itemInfo, $(".editor-item-path"));
+        this.editorModeButton = append(editorHeader, $("button.editor-mode-button"));
+        this.editorModeButton.type = "button";
+        this.editorModeButton.setAttribute("aria-pressed", "false");
+        this.editorDisposables.add(this.hoverService.setupManagedHover(
+            getDefaultHoverDelegate("element"),
+            this.editorModeButton,
+            () => this.getEditorModeButtonTooltip()
+        ));
+        this.editorDisposables.add(addDisposableListener(this.editorModeButton, "click", () => {
+            this.toggleEditorDisplayMode();
+        }));
         this.editorSaveIndicator = append(editorHeader, $(".editor-save-indicator"));
-        const embeddedEditorContainer = append(this.editorContentContainer, $(".embedded-editor-container"));
+        this.editorPreviewContainer = append(this.editorContentContainer, $(".editor-preview-container"));
+        this.editorPreviewScrollContainer = append(this.editorPreviewContainer, $(".editor-preview-scroll-container"));
+        this.editorPreviewScrollContainer.setAttribute("role", "region");
+        this.editorPreviewScrollContainer.setAttribute("aria-label", ( localize(5521, "Customization preview")));
+        this.editorPreviewIssuesContainer = append(this.editorPreviewScrollContainer, $(".editor-preview-issues"));
+        const frontMatterSection = append(
+            this.editorPreviewScrollContainer,
+            $(".editor-preview-section.editor-preview-frontmatter-section")
+        );
+        this.editorPreviewFrontMatterContainer = append(frontMatterSection, $(".editor-preview-frontmatter-list"));
+        const bodySection = append(
+            this.editorPreviewScrollContainer,
+            $(".editor-preview-section.editor-preview-body-section")
+        );
+        this.editorPreviewBodyContainer = append(bodySection, $(".editor-preview-body-content"));
+        this.embeddedEditorContainer = append(this.editorContentContainer, $(".embedded-editor-container"));
         const overflowWidgetsDomNode = append(
             this.editorContentContainer,
             $(".embedded-editor-overflow-widgets.monaco-editor")
         );
         this.editorDisposables.add(toDisposable(() => overflowWidgetsDomNode.remove()));
         this.embeddedEditor = this.editorDisposables.add(
-            this.instantiationService.createInstance(CodeEditorWidget, embeddedEditorContainer, {
+            this.instantiationService.createInstance(CodeEditorWidget, this.embeddedEditorContainer, {
                 ...getSimpleEditorOptions(this.configurationService),
                 readOnly: false,
                 minimap: {
@@ -1213,6 +1263,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                 isSimpleWidget: false
             })
         );
+        this.updateEditorDisplayMode();
     }
     async showEmbeddedEditor(
         uri,
@@ -1225,16 +1276,21 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.currentModelRef?.dispose();
         this.currentModelRef = undefined;
         this.editorModelChangeDisposables.clear();
+        this.editorPreviewDisposables.clear();
+        this.editorPreviewRenderScheduler.cancel();
         this.currentEditingUri = uri;
         this.currentEditingProjectRoot = isWorkspaceFile ? this.workspaceService.getActiveProjectRoot() : undefined;
         this.currentEditingStorage = storage;
         this.currentEditingPromptType = promptType;
+        this.currentEditingReadOnly = isReadOnly;
+        this.editorDisplayMode = this.isStructuredPreviewSupported(promptType) ? "preview" : "raw";
         this.viewMode = "editor";
         this.editorItemNameElement.textContent = displayName;
         this.editorItemPathElement.textContent = basename(uri);
         this._editorContentChanged = false;
         this.resetEditorSaveIndicator();
         this.updateEditorActionButton();
+        this.updateEditorDisplayMode();
         this.updateContentVisibility();
         try {
             if (storage === BUILTIN_STORAGE && (promptType === PromptsType.prompt || promptType === PromptsType.skill)) {
@@ -1247,13 +1303,19 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                     readOnly: false
                 });
                 this._editorContentChanged = session.model.getValue() !== session.originalContent;
+                this.renderCurrentEditorPreview();
                 this.updateEditorActionButton();
                 if (this.dimension) {
                     this.layout(this.dimension);
                 }
-                this.embeddedEditor.focus();
+                if (this.editorDisplayMode === "raw") {
+                    this.embeddedEditor.focus();
+                } else {
+                    this.editorModeButton?.focus();
+                }
                 this.editorModelChangeDisposables.add(session.model.onDidChangeContent(() => {
                     this._editorContentChanged = session.model.getValue() !== session.originalContent;
+                    this.scheduleCurrentEditorPreviewRender();
                     this.updateEditorActionButton();
                 }));
                 return;
@@ -1268,13 +1330,19 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             this.embeddedEditor.updateOptions({
                 readOnly: isReadOnly
             });
+            this.renderCurrentEditorPreview();
             if (this.dimension) {
                 this.layout(this.dimension);
             }
-            this.embeddedEditor.focus();
+            if (this.editorDisplayMode === "raw") {
+                this.embeddedEditor.focus();
+            } else {
+                this.editorModeButton?.focus();
+            }
             this._editorContentChanged = this.workingCopyService.isDirty(uri);
             this.editorModelChangeDisposables.add(ref.object.textEditorModel.onDidChangeContent(() => {
                 this._editorContentChanged = true;
+                this.scheduleCurrentEditorPreviewRender();
                 this.resetEditorSaveIndicator();
             }));
             this.editorModelChangeDisposables.add(this.workingCopyService.onDidSave(e => {
@@ -1282,7 +1350,9 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                     this._editorContentChanged = this.workingCopyService.isDirty(uri);
                     this.editorSaveIndicator.className = "editor-save-indicator visible saved";
                     this.editorSaveIndicator.classList.add(...ThemeIcon.asClassNameArray(Codicon.check));
-                    this.editorSaveIndicator.title = ( localize(5440, "Saved"));
+                    this.editorSaveIndicator.title = ( localize(5522, "Saved"));
+                    this.editorSaveIndicator.setAttribute("aria-label", ( localize(5522, "Saved")));
+                    status(( localize(5522, "Saved")));
                 }
             }));
         } catch (error) {
@@ -1311,10 +1381,15 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         this.currentEditingProjectRoot = undefined;
         this.currentEditingStorage = undefined;
         this.currentEditingPromptType = undefined;
+        this.currentEditingReadOnly = false;
+        this.editorDisplayMode = "preview";
         this._editorContentChanged = false;
         this.editorModelChangeDisposables.clear();
+        this.editorPreviewRenderScheduler.cancel();
+        this.clearEditorPreview();
         this.resetEditorSaveIndicator();
         this.updateEditorActionButton();
+        this.updateEditorDisplayMode();
         this.embeddedEditor?.setModel(null);
         this.viewMode = "list";
         this.updateContentVisibility();
@@ -1327,7 +1402,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             const saveRequest = backgroundSaveRequest;
             void this.saveExistingCustomization(saveRequest).catch(error => {
                 console.error("Failed to save customization changes on exit:", error);
-                this.notificationService.warn(( localize(5441, "Could not save changes to {0}.", basename(saveRequest.fileUri))));
+                this.notificationService.warn(( localize(5523, "Could not save changes to {0}.", basename(saveRequest.fileUri))));
             });
         }
     }
@@ -1420,7 +1495,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         const workspaceFolder = resolveWorkspaceTargetDirectory(this.workspaceService, promptType);
         if (workspaceFolder) {
             items.push({
-                label: ( localize(5442, "Workspace")),
+                label: ( localize(5524, "Workspace")),
                 description: workspaceFolder.fsPath,
                 target: "workspace",
                 folder: workspaceFolder
@@ -1429,19 +1504,19 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         const userFolder = await resolveUserTargetDirectory(this.promptsService, promptType);
         if (userFolder) {
             items.push({
-                label: ( localize(5443, "User")),
+                label: ( localize(5525, "User")),
                 description: userFolder.fsPath,
                 target: "user",
                 folder: userFolder
             });
         }
         items.push({
-            label: ( localize(5444, "Cancel")),
+            label: ( localize(5526, "Cancel")),
             target: "cancel"
         });
         return this.quickInputService.pick(items, {
             canPickMany: false,
-            placeHolder: ( localize(5445, "Select Workspace, User, or Cancel")),
+            placeHolder: ( localize(5527, "Select Workspace, User, or Cancel")),
             matchOnDescription: true
         });
     }
@@ -1474,7 +1549,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
                     void this.listWidget?.refresh();
                 }, error => {
                     console.error("Failed to save built-in override:", error);
-                    this.notificationService.warn(saveRequest.target === "workspace" ? ( localize(5446, "Could not save the override to the workspace.")) : ( localize(5447, "Could not save the override to your user folder.")));
+                    this.notificationService.warn(saveRequest.target === "workspace" ? ( localize(5528, "Could not save the override to the workspace.")) : ( localize(5529, "Could not save the override to your user folder.")));
                 });
             }
         } finally {
@@ -1490,8 +1565,8 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         const shouldShowBuiltinSaveAction = this.shouldShowBuiltinSaveAction();
         this.editorActionButtonIcon.className = `codicon codicon-${shouldShowBuiltinSaveAction ? Codicon.save.id : Codicon.arrowLeft.id} editor-action-button-icon`;
         this.editorActionButton.disabled = this.editorActionButtonInProgress;
-        this.editorActionButton.setAttribute("aria-label", shouldShowBuiltinSaveAction ? ( localize(5448, "Save override")) : ( localize(5437, "Back to list")));
-        this.editorActionButton.title = shouldShowBuiltinSaveAction ? ( localize(5449, "Save override (choose Workspace, User, or Cancel)")) : ( localize(5437, "Back to list"));
+        this.editorActionButton.setAttribute("aria-label", shouldShowBuiltinSaveAction ? ( localize(5530, "Save override")) : ( localize(5518, "Back to list")));
+        this.editorActionButton.title = shouldShowBuiltinSaveAction ? ( localize(5531, "Save override (choose Workspace, User, or Cancel)")) : ( localize(5518, "Back to list"));
     }
     shouldShowBuiltinSaveAction() {
         return this._editorContentChanged && this.currentEditingStorage === BUILTIN_STORAGE && (this.currentEditingPromptType === PromptsType.prompt || this.currentEditingPromptType === PromptsType.skill);
@@ -1526,13 +1601,252 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
             return true;
         } catch (error) {
             console.error("Failed to save built-in override:", error);
-            this.notificationService.warn(target.target === "workspace" ? ( localize(5446, "Could not save the override to the workspace.")) : ( localize(5447, "Could not save the override to your user folder.")));
+            this.notificationService.warn(target.target === "workspace" ? ( localize(5528, "Could not save the override to the workspace.")) : ( localize(5529, "Could not save the override to your user folder.")));
             return false;
         }
     }
     resetEditorSaveIndicator() {
         this.editorSaveIndicator.className = "editor-save-indicator";
         this.editorSaveIndicator.title = "";
+        this.editorSaveIndicator.removeAttribute("aria-label");
+    }
+    isStructuredPreviewSupported(promptType) {
+        if (this.configurationService.getValue(ChatConfiguration.ChatCustomizationsStructuredPreviewEnabled) !== true) {
+            return false;
+        }
+        return promptType === PromptsType.agent || promptType === PromptsType.skill || promptType === PromptsType.instructions || promptType === PromptsType.prompt;
+    }
+    onStructuredPreviewSettingChanged() {
+        if (this.viewMode !== "editor") {
+            return;
+        }
+        const supportsStructuredPreview = this.isStructuredPreviewSupported(this.currentEditingPromptType);
+        if (!supportsStructuredPreview) {
+            this.editorDisplayMode = "raw";
+            this.editorPreviewRenderScheduler.cancel();
+            this.clearEditorPreview();
+        } else if (this.editorDisplayMode === "preview") {
+            this.editorPreviewRenderScheduler.schedule();
+        }
+        this.updateEditorDisplayMode();
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+    }
+    getCurrentEditingModel() {
+        if (!this.currentEditingUri) {
+            return undefined;
+        }
+        if (this.currentEditingStorage === BUILTIN_STORAGE) {
+            return this.builtinEditingSessions.get(( this.currentEditingUri.toString()))?.model;
+        }
+        return this.currentModelRef?.object.textEditorModel;
+    }
+    toggleEditorDisplayMode() {
+        if (!this.isStructuredPreviewSupported(this.currentEditingPromptType)) {
+            return;
+        }
+        this.editorDisplayMode = this.editorDisplayMode === "preview" ? "raw" : "preview";
+        if (this.editorDisplayMode === "preview") {
+            this.editorPreviewRenderScheduler.cancel();
+            this.renderCurrentEditorPreview();
+        }
+        this.updateEditorDisplayMode();
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+        if (this.editorDisplayMode === "raw") {
+            this.embeddedEditor?.focus();
+        } else {
+            this.editorModeButton?.focus();
+        }
+    }
+    updateEditorDisplayMode() {
+        const supportsStructuredPreview = this.isStructuredPreviewSupported(this.currentEditingPromptType);
+        const showPreview = supportsStructuredPreview && this.editorDisplayMode === "preview";
+        if (this.editorModeButton) {
+            this.editorModeButton.style.display = supportsStructuredPreview ? "" : "none";
+            this.editorModeButton.textContent = this.getEditorModeButtonLabel();
+            this.editorModeButton.setAttribute("aria-label", this.getEditorModeButtonTooltip());
+            this.editorModeButton.setAttribute("aria-pressed", String(this.editorDisplayMode === "raw"));
+            this.editorModeButton.title = this.getEditorModeButtonTooltip();
+        }
+        if (this.editorPreviewContainer) {
+            this.editorPreviewContainer.style.display = showPreview ? "" : "none";
+        }
+        if (this.embeddedEditorContainer) {
+            this.embeddedEditorContainer.style.display = showPreview ? "none" : "";
+        }
+    }
+    getEditorModeButtonLabel() {
+        if (!this.isStructuredPreviewSupported(this.currentEditingPromptType)) {
+            return "";
+        }
+        if (this.editorDisplayMode === "raw") {
+            return localize(5532, "Preview");
+        }
+        return this.canEditCurrentRaw() ? ( localize(5533, "Edit")) : ( localize(5534, "View Raw"));
+    }
+    getEditorModeButtonTooltip() {
+        if (!this.isStructuredPreviewSupported(this.currentEditingPromptType)) {
+            return "";
+        }
+        if (this.editorDisplayMode === "raw") {
+            return localize(5535, "Show structured preview");
+        }
+        return this.canEditCurrentRaw() ? ( localize(5536, "Edit the raw markdown file")) : ( localize(5537, "Show the raw markdown file"));
+    }
+    canEditCurrentRaw() {
+        const promptType = this.currentEditingPromptType;
+        if (!promptType) {
+            return false;
+        }
+        return (this.currentEditingStorage === BUILTIN_STORAGE && (promptType === PromptsType.prompt || promptType === PromptsType.skill)) || !this.currentEditingReadOnly;
+    }
+    scheduleCurrentEditorPreviewRender() {
+        if (this.editorDisplayMode !== "preview") {
+            return;
+        }
+        this.editorPreviewRenderScheduler.schedule();
+    }
+    renderCurrentEditorPreview() {
+        const model = this.getCurrentEditingModel();
+        const promptType = this.currentEditingPromptType;
+        if (!model || !promptType || this.editorDisplayMode !== "preview" || !this.isStructuredPreviewSupported(promptType)) {
+            this.clearEditorPreview();
+            return;
+        }
+        const parsedPromptFile = this.promptsService.getParsedPromptFile(model);
+        this.renderEditorPreview(parsedPromptFile, promptType);
+    }
+    renderEditorPreview(parsedPromptFile, promptType) {
+        if (!this.editorPreviewIssuesContainer || !this.editorPreviewFrontMatterContainer || !this.editorPreviewBodyContainer) {
+            return;
+        }
+        this.editorPreviewDisposables.clear();
+        clearNode(this.editorPreviewIssuesContainer);
+        clearNode(this.editorPreviewFrontMatterContainer);
+        clearNode(this.editorPreviewBodyContainer);
+        const target = getTarget(promptType, parsedPromptFile.header ?? parsedPromptFile.uri);
+        this.renderPreviewIssues(parsedPromptFile);
+        this.renderPreviewFrontMatter(parsedPromptFile, promptType, target);
+        this.renderPreviewBody(parsedPromptFile);
+    }
+    renderPreviewIssues(parsedPromptFile) {
+        if (!this.editorPreviewIssuesContainer || !parsedPromptFile.header?.errors.length) {
+            return;
+        }
+        const issuesContainer = append(this.editorPreviewIssuesContainer, $(".editor-preview-issues-box"));
+        append(issuesContainer, $("div.editor-preview-issues-title")).textContent = ( localize(5538, "Header issues detected"));
+        append(issuesContainer, $("div.editor-preview-issues-description")).textContent = ( localize(5539, "Switch to raw view to fix invalid or unsupported metadata entries."));
+        const list = append(issuesContainer, $("ul.editor-preview-issues-list"));
+        for (const error of parsedPromptFile.header.errors) {
+            append(list, $("li.editor-preview-issues-item")).textContent = error.message;
+        }
+    }
+    renderPreviewFrontMatter(parsedPromptFile, promptType, target) {
+        if (!this.editorPreviewFrontMatterContainer) {
+            return;
+        }
+        const attributes = parsedPromptFile.header?.attributes ?? [];
+        if (!attributes.length) {
+            append(
+                this.editorPreviewFrontMatterContainer,
+                $("div.editor-preview-empty-state")
+            ).textContent = ( localize(5540, "No metadata found in this file."));
+            return;
+        }
+        for (const attribute of attributes) {
+            this.renderPreviewAttribute(attribute, promptType, target);
+        }
+    }
+    renderPreviewAttribute(attribute, promptType, target) {
+        if (!this.editorPreviewFrontMatterContainer) {
+            return;
+        }
+        const row = append(this.editorPreviewFrontMatterContainer, $(".editor-preview-row"));
+        const header = append(row, $(".editor-preview-row-header"));
+        append(header, $("div.editor-preview-row-key")).textContent = attribute.key;
+        const helpButton = append(header, $("button.editor-preview-row-help"));
+        helpButton.type = "button";
+        helpButton.setAttribute("aria-label", ( localize(5541, "Show help for '{0}'", attribute.key)));
+        const helpIcon = append(helpButton, $("span.editor-preview-row-help-icon"));
+        helpIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.info));
+        helpIcon.setAttribute("aria-hidden", "true");
+        const description = getAttributeDefinition(attribute.key, promptType, target)?.description ?? ( localize(5542, "Custom metadata field `{0}`.", attribute.key));
+        const helpHover = this.editorPreviewDisposables.add(
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), helpButton, {
+                markdown: ( new MarkdownString(description)),
+                markdownNotSupportedFallback: description
+            })
+        );
+        this.editorPreviewDisposables.add(addDisposableListener(helpButton, "click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+            helpHover.show(true);
+        }));
+        const valueElement = append(row, $("div.editor-preview-row-value"));
+        const valueText = this.stringifyPreviewValue(attribute.value);
+        valueElement.textContent = valueText;
+        valueElement.classList.toggle("multiline", valueText.includes("\n"));
+    }
+    renderPreviewBody(parsedPromptFile) {
+        if (!this.editorPreviewBodyContainer) {
+            return;
+        }
+        const bodyContent = parsedPromptFile.body?.getContent() ?? "";
+        if (!bodyContent.trim()) {
+            append(this.editorPreviewBodyContainer, $("div.editor-preview-empty-state")).textContent = ( localize(5543, "No markdown body found in this file."));
+            return;
+        }
+        const markdown = ( new MarkdownString(bodyContent, {
+            supportThemeIcons: true
+        }));
+        markdown.baseUri = parsedPromptFile.uri;
+        const renderedMarkdown = this.editorPreviewDisposables.add(this.markdownRendererService.render(markdown));
+        this.editorPreviewBodyContainer.appendChild(renderedMarkdown.element);
+    }
+    stringifyPreviewValue(value) {
+        switch (value.type) {
+        case "scalar":
+            return value.value;
+        case "sequence":
+            if (value.items.every(item => item.type === "scalar")) {
+                return ( value.items.map(item => item.value)).join("\n");
+            }
+            return JSON.stringify(this.toPreviewObject(value), null, 2);
+        case "map":
+            return JSON.stringify(this.toPreviewObject(value), null, 2);
+        }
+    }
+    toPreviewObject(value) {
+        switch (value.type) {
+        case "scalar":
+            return value.value;
+        case "sequence":
+            return ( value.items.map(item => this.toPreviewObject(item)));
+        case "map":
+            {
+                const entries = {};
+                for (const property of value.properties) {
+                    entries[property.key.value] = this.toPreviewObject(property.value);
+                }
+                return entries;
+            }
+        }
+    }
+    clearEditorPreview() {
+        this.editorPreviewRenderScheduler.cancel();
+        this.editorPreviewDisposables.clear();
+        if (this.editorPreviewIssuesContainer) {
+            clearNode(this.editorPreviewIssuesContainer);
+        }
+        if (this.editorPreviewFrontMatterContainer) {
+            clearNode(this.editorPreviewFrontMatterContainer);
+        }
+        if (this.editorPreviewBodyContainer) {
+            clearNode(this.editorPreviewBodyContainer);
+        }
     }
     disposeBuiltinEditingSessions() {
         for (const session of ( this.builtinEditingSessions.values())) {
@@ -1555,41 +1869,35 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }
         const detailHeader = append(this.mcpDetailContainer, $(".editor-header"));
         const backButton = append(detailHeader, $("button.editor-back-button"));
-        backButton.setAttribute("aria-label", ( localize(5450, "Back to MCP servers")));
+        backButton.setAttribute("aria-label", ( localize(5544, "Back to MCP servers")));
         this.editorDisposables.add(
-            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), backButton, ( localize(5451, "Back to MCP servers")))
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), backButton, ( localize(5545, "Back to MCP servers")))
         );
         const backIconEl = append(backButton, $(`.codicon.codicon-${Codicon.arrowLeft.id}`));
         backIconEl.setAttribute("aria-hidden", "true");
         this.editorDisposables.add(addDisposableListener(backButton, "click", () => {
             this.goBackFromMcpDetail();
         }));
-        const editorContainer = append(this.mcpDetailContainer, $(".mcp-detail-editor-container"));
-        this.embeddedMcpEditor = this.editorDisposables.add(this.instantiationService.createInstance(McpServerEditor, this.group));
-        this.embeddedMcpEditor.create(editorContainer);
+        const detailBody = append(this.mcpDetailContainer, $(".mcp-detail-editor-container"));
+        this.embeddedMcpDetail = this.editorDisposables.add(
+            this.instantiationService.createInstance(EmbeddedMcpServerDetail, detailBody)
+        );
     }
     async showEmbeddedMcpDetail(server) {
-        if (!this.embeddedMcpEditor) {
+        if (!this.embeddedMcpDetail) {
             return;
         }
         this.viewMode = "mcpDetail";
         this.updateContentVisibility();
-        const input = this.instantiationService.createInstance(McpServerEditorInput, server);
         this.mcpDetailDisposables.clear();
-        this.mcpDetailDisposables.add(input);
-        try {
-            await this.embeddedMcpEditor.setInput(input, undefined, {}, CancellationToken.None);
-        } catch {
-            this.goBackFromMcpDetail();
-            return;
-        }
+        this.embeddedMcpDetail.setInput(server);
         if (this.dimension) {
             this.layout(this.dimension);
         }
     }
     goBackFromMcpDetail() {
         this.mcpDetailDisposables.clear();
-        this.embeddedMcpEditor?.clearInput();
+        this.embeddedMcpDetail?.clearInput();
         this.viewMode = "list";
         this.updateContentVisibility();
         if (this.dimension) {
@@ -1603,34 +1911,28 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }
         const detailHeader = append(this.pluginDetailContainer, $(".editor-header"));
         const backButton = append(detailHeader, $("button.editor-back-button"));
-        backButton.setAttribute("aria-label", ( localize(5452, "Back to plugins")));
+        backButton.setAttribute("aria-label", ( localize(5546, "Back to plugins")));
         this.editorDisposables.add(
-            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), backButton, ( localize(5453, "Back to plugins")))
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), backButton, ( localize(5547, "Back to plugins")))
         );
         const backIconEl = append(backButton, $(`.codicon.codicon-${Codicon.arrowLeft.id}`));
         backIconEl.setAttribute("aria-hidden", "true");
         this.editorDisposables.add(addDisposableListener(backButton, "click", () => {
             this.goBackFromPluginDetail();
         }));
-        const editorContainer = append(this.pluginDetailContainer, $(".plugin-detail-editor-container"));
-        this.embeddedPluginEditor = this.editorDisposables.add(this.instantiationService.createInstance(AgentPluginEditor, this.group));
-        this.embeddedPluginEditor.create(editorContainer);
+        const detailBody = append(this.pluginDetailContainer, $(".plugin-detail-editor-container"));
+        this.embeddedPluginDetail = this.editorDisposables.add(
+            this.instantiationService.createInstance(EmbeddedAgentPluginDetail, detailBody)
+        );
     }
     async showEmbeddedPluginDetail(item) {
-        if (!this.embeddedPluginEditor) {
+        if (!this.embeddedPluginDetail) {
             return;
         }
         this.viewMode = "pluginDetail";
         this.updateContentVisibility();
-        const input = ( new AgentPluginEditorInput(item));
         this.pluginDetailDisposables.clear();
-        this.pluginDetailDisposables.add(input);
-        try {
-            await this.embeddedPluginEditor.setInput(input, undefined, {}, CancellationToken.None);
-        } catch {
-            this.goBackFromPluginDetail();
-            return;
-        }
+        this.embeddedPluginDetail.setInput(item);
         if (this.dimension) {
             this.layout(this.dimension);
         }
@@ -1643,7 +1945,7 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
     }
     goBackFromPluginDetail() {
         this.pluginDetailDisposables.clear();
-        this.embeddedPluginEditor?.clearInput();
+        this.embeddedPluginDetail?.clearInput();
         const returnSection = this.pluginDetailReturnSection;
         this.pluginDetailReturnSection = undefined;
         if (returnSection) {
@@ -1660,6 +1962,6 @@ let AICustomizationManagementEditor = class AICustomizationManagementEditor exte
         }
     }
 };
-AICustomizationManagementEditor = AICustomizationManagementEditor_1 = ( __decorate([( __param(1, ITelemetryService)), ( __param(2, IThemeService)), ( __param(3, IStorageService)), ( __param(4, IInstantiationService)), ( __param(5, IContextKeyService)), ( __param(6, IOpenerService)), ( __param(7, ICommandService)), ( __param(8, IAICustomizationWorkspaceService)), ( __param(9, IPromptsService)), ( __param(10, ITextModelService)), ( __param(11, IConfigurationService)), ( __param(12, IWorkingCopyService)), ( __param(13, IHoverService)), ( __param(14, IModelService)), ( __param(15, IQuickInputService)), ( __param(16, IContextMenuService)), ( __param(17, IFileService)), ( __param(18, INotificationService)), ( __param(19, ICustomizationHarnessService)), ( __param(20, IViewsService))], AICustomizationManagementEditor));
+AICustomizationManagementEditor = AICustomizationManagementEditor_1 = ( __decorate([( __param(1, ITelemetryService)), ( __param(2, IThemeService)), ( __param(3, IStorageService)), ( __param(4, IInstantiationService)), ( __param(5, IContextKeyService)), ( __param(6, IOpenerService)), ( __param(7, ICommandService)), ( __param(8, IAICustomizationWorkspaceService)), ( __param(9, IPromptsService)), ( __param(10, ITextModelService)), ( __param(11, IConfigurationService)), ( __param(12, IWorkingCopyService)), ( __param(13, IHoverService)), ( __param(14, IMarkdownRendererService)), ( __param(15, IModelService)), ( __param(16, IQuickInputService)), ( __param(17, IContextMenuService)), ( __param(18, IFileService)), ( __param(19, INotificationService)), ( __param(20, ICustomizationHarnessService)), ( __param(21, IViewsService)), ( __param(22, IAICustomizationItemsModel))], AICustomizationManagementEditor));
 
 export { AICustomizationManagementEditor, aiCustomizationManagementSashBorder };