@codingame/monaco-vscode-chat-service-override 26.2.2 → 28.0.0

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

@@ -0,0 +1,878 @@
+
+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 { CancellationToken } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
+import { DisposableStore, toDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { Delayer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
+import { Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+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';
+import { StorageScope, StorageTarget } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage';
+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';
+import { IThemeService } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/themeService.service';
+import { EditorPane } from '@codingame/monaco-vscode-api/vscode/vs/workbench/browser/parts/editor/editorPane';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+import { WorkbenchList } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
+import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
+import { basename, isEqual } from '@codingame/monaco-vscode-api/vscode/vs/base/common/resources';
+import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { registerColor } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colorUtils';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/baseColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/chartsColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/editorColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/inputColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/listColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/menuColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/minimapColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/miscColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/quickpickColors';
+import '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/colors/searchColors';
+import { PANEL_BORDER } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/theme';
+import { AICustomizationListWidget } from './aiCustomizationListWidget.js';
+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, 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 './aiCustomizationManagement.js';
+import { pluginIcon, hookIcon, promptIcon, instructionsIcon, skillIcon, agentIcon } from './aiCustomizationIcons.js';
+import { ChatModelsWidget } from '../chatManagement/chatModelsWidget.js';
+import { PromptsType, Target } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/promptSyntax/promptTypes';
+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 { 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';
+import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
+import { IAICustomizationWorkspaceService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/aiCustomizationWorkspaceService.service';
+import { CodeEditorWidget } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/widget/codeEditor/codeEditorWidget';
+import { ITextModelService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/resolverService.service';
+import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
+import { getSimpleEditorOptions } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/codeEditor/browser/simpleEditorOptions';
+import { IWorkingCopyService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/workingCopy/common/workingCopyService.service';
+import { ITextFileService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/textfile/common/textfiles.service';
+import { IFileDialogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/dialogs/common/dialogs.service';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+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 { AICustomizationManagementSection } from '../../common/aiCustomizationWorkspaceService.js';
+import { Orientation } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/sash/sash';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
+
+var AICustomizationManagementEditor_1;
+registerCss(aiCustomizationManagement);
+const $ = $$1;
+const aiCustomizationManagementSashBorder = registerColor("aiCustomizationManagement.sashBorder", PANEL_BORDER, ( localize(
+    5294,
+    "The color of the Chat Customization Management editor splitview sash border."
+)));
+class SectionItemDelegate {
+    getHeight() {
+        return 26;
+    }
+    getTemplateId() {
+        return "sectionItem";
+    }
+}
+class SectionItemRenderer {
+    constructor() {
+        this.templateId = "sectionItem";
+    }
+    renderTemplate(container) {
+        container.classList.add("section-list-item");
+        const icon = append(container, $(".section-icon"));
+        const label = append(container, $(".section-label"));
+        return {
+            container,
+            icon,
+            label
+        };
+    }
+    renderElement(element, index, templateData) {
+        templateData.icon.className = "section-icon";
+        templateData.icon.classList.add(...ThemeIcon.asClassNameArray(element.icon));
+        templateData.label.textContent = element.label;
+    }
+    disposeTemplate() {}
+}
+let AICustomizationManagementEditor = class AICustomizationManagementEditor extends EditorPane {
+    static {
+        AICustomizationManagementEditor_1 = this;
+    }
+    static {
+        this.ID = AI_CUSTOMIZATION_MANAGEMENT_EDITOR_ID;
+    }
+    constructor(
+        group,
+        telemetryService,
+        themeService,
+        storageService,
+        instantiationService,
+        contextKeyService,
+        openerService,
+        commandService,
+        workspaceService,
+        promptsService,
+        textModelService,
+        configurationService,
+        workingCopyService,
+        textFileService,
+        fileDialogService,
+        hoverService
+    ) {
+        super(
+            AICustomizationManagementEditor_1.ID,
+            group,
+            telemetryService,
+            themeService,
+            storageService
+        );
+        this.storageService = storageService;
+        this.instantiationService = instantiationService;
+        this.openerService = openerService;
+        this.commandService = commandService;
+        this.workspaceService = workspaceService;
+        this.promptsService = promptsService;
+        this.textModelService = textModelService;
+        this.configurationService = configurationService;
+        this.workingCopyService = workingCopyService;
+        this.textFileService = textFileService;
+        this.fileDialogService = fileDialogService;
+        this.hoverService = hoverService;
+        this.editorModelChangeDisposables = this._register(( new DisposableStore()));
+        this.viewMode = "list";
+        this.mcpDetailDisposables = this._register(( new DisposableStore()));
+        this.pluginDetailDisposables = this._register(( new DisposableStore()));
+        this.sections = [];
+        this.selectedSection = AICustomizationManagementSection.Agents;
+        this.editorDisposables = this._register(( new DisposableStore()));
+        this._editorContentChanged = false;
+        this.inEditorContextKey = CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_EDITOR.bindTo(contextKeyService);
+        this.sectionContextKey = CONTEXT_AI_CUSTOMIZATION_MANAGEMENT_SECTION.bindTo(contextKeyService);
+        this._register(autorun(reader => {
+            this.workspaceService.activeProjectRoot.read(reader);
+            if (this.viewMode === "editor") {
+                this.currentEditingProjectRoot = this.workspaceService.getActiveProjectRoot();
+            }
+        }));
+        this._register(toDisposable(() => {
+            this.currentModelRef?.dispose();
+            this.currentModelRef = undefined;
+        }));
+        const sectionInfo = {
+            [AICustomizationManagementSection.Agents]: {
+                label: ( localize(5295, "Agents")),
+                icon: agentIcon
+            },
+            [AICustomizationManagementSection.Skills]: {
+                label: ( localize(5296, "Skills")),
+                icon: skillIcon
+            },
+            [AICustomizationManagementSection.Instructions]: {
+                label: ( localize(5297, "Instructions")),
+                icon: instructionsIcon
+            },
+            [AICustomizationManagementSection.Prompts]: {
+                label: ( localize(5298, "Prompts")),
+                icon: promptIcon
+            },
+            [AICustomizationManagementSection.Hooks]: {
+                label: ( localize(5299, "Hooks")),
+                icon: hookIcon
+            },
+            [AICustomizationManagementSection.McpServers]: {
+                label: ( localize(5300, "MCP Servers")),
+                icon: Codicon.server
+            },
+            [AICustomizationManagementSection.Plugins]: {
+                label: ( localize(5301, "Plugins")),
+                icon: pluginIcon
+            },
+            [AICustomizationManagementSection.Models]: {
+                label: ( localize(5302, "Models")),
+                icon: Codicon.vm
+            }
+        };
+        for (const id of this.workspaceService.managementSections) {
+            const info = sectionInfo[id];
+            if (info) {
+                this.sections.push({
+                    id,
+                    ...info
+                });
+            }
+        }
+        const savedSection = this.storageService.get(AI_CUSTOMIZATION_MANAGEMENT_SELECTED_SECTION_KEY, StorageScope.PROFILE);
+        if (savedSection && ( this.sections.some(s => s.id === savedSection))) {
+            this.selectedSection = savedSection;
+        } else if (this.sections.length > 0) {
+            this.selectedSection = this.sections[0].id;
+        }
+    }
+    createEditor(parent) {
+        this.editorDisposables.clear();
+        this.container = append(parent, $(".ai-customization-management-editor"));
+        this.createSplitView();
+        this.updateStyles();
+    }
+    createSplitView() {
+        this.splitViewContainer = append(this.container, $(".management-split-view"));
+        this.sidebarContainer = $(".management-sidebar");
+        this.contentContainer = $(".management-content");
+        this.createSidebar();
+        this.createContent();
+        this.splitView = this.editorDisposables.add(( new SplitView(this.splitViewContainer, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: true
+        })));
+        const savedWidth = this.storageService.getNumber(
+            AI_CUSTOMIZATION_MANAGEMENT_SIDEBAR_WIDTH_KEY,
+            StorageScope.PROFILE,
+            SIDEBAR_DEFAULT_WIDTH
+        );
+        this.splitView.addView({
+            onDidChange: Event.None,
+            element: this.sidebarContainer,
+            minimumSize: SIDEBAR_MIN_WIDTH,
+            maximumSize: SIDEBAR_MAX_WIDTH,
+            layout: (width, _, height) => {
+                this.sidebarContainer.style.width = `${width}px`;
+                if (height !== undefined) {
+                    const footerHeight = this.folderPickerContainer?.offsetHeight ?? 0;
+                    const listHeight = height - 8 - footerHeight;
+                    this.sectionsList.layout(listHeight, width);
+                }
+            }
+        }, savedWidth, undefined, true);
+        this.splitView.addView({
+            onDidChange: Event.None,
+            element: this.contentContainer,
+            minimumSize: CONTENT_MIN_WIDTH,
+            maximumSize: Number.POSITIVE_INFINITY,
+            layout: (width, _, height) => {
+                this.contentContainer.style.width = `${width}px`;
+                if (height !== undefined) {
+                    this.listWidget.layout(height - 16, width - 24);
+                    this.mcpListWidget?.layout(height - 16, width - 24);
+                    this.pluginListWidget?.layout(height - 16, width - 24);
+                    const modelsFooterHeight = this.modelsFooterElement?.offsetHeight || 80;
+                    this.modelsWidget?.layout(height - 16 - modelsFooterHeight, width);
+                    if (this.viewMode === "editor" && this.embeddedEditor) {
+                        const editorHeaderHeight = 50;
+                        const padding = 24;
+                        this.embeddedEditor.layout({
+                            width: Math.max(0, width - padding),
+                            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);
+        this.editorDisposables.add(this.splitView.onDidSashChange(() => {
+            const width = this.splitView.getViewSize(0);
+            this.storageService.store(
+                AI_CUSTOMIZATION_MANAGEMENT_SIDEBAR_WIDTH_KEY,
+                width,
+                StorageScope.PROFILE,
+                StorageTarget.USER
+            );
+        }));
+        this.editorDisposables.add(this.splitView.onDidSashReset(() => {
+            const totalWidth = this.splitView.getViewSize(0) + this.splitView.getViewSize(1);
+            this.splitView.resizeView(0, SIDEBAR_DEFAULT_WIDTH);
+            this.splitView.resizeView(1, totalWidth - SIDEBAR_DEFAULT_WIDTH);
+        }));
+    }
+    createSidebar() {
+        const sidebarContent = append(this.sidebarContainer, $(".sidebar-content"));
+        const sectionsListContainer = append(sidebarContent, $(".sidebar-sections-list"));
+        this.sectionsList = this.editorDisposables.add(this.instantiationService.createInstance(
+            WorkbenchList,
+            "AICustomizationManagementSections",
+            sectionsListContainer,
+            ( new SectionItemDelegate()),
+            [( new SectionItemRenderer())],
+            {
+                multipleSelectionSupport: false,
+                setRowLineHeight: false,
+                horizontalScrolling: false,
+                accessibilityProvider: {
+                    getAriaLabel: item => item.label,
+                    getWidgetAriaLabel: () => ( localize(5303, "Chat Customization Sections"))
+                },
+                openOnSingleClick: true,
+                identityProvider: {
+                    getId: item => item.id
+                }
+            }
+        ));
+        this.sectionsList.splice(0, this.sectionsList.length, this.sections);
+        const selectedIndex = this.sections.findIndex(s => s.id === this.selectedSection);
+        if (selectedIndex >= 0) {
+            this.sectionsList.setSelection([selectedIndex]);
+        }
+        this.editorDisposables.add(this.sectionsList.onDidChangeSelection(e => {
+            if (e.elements.length > 0) {
+                this.selectSection(e.elements[0].id);
+            }
+        }));
+        if (this.workspaceService.isSessionsWindow) {
+            this.createFolderPicker(sidebarContent);
+        }
+    }
+    createFolderPicker(sidebarContent) {
+        const footer = this.folderPickerContainer = append(sidebarContent, $(".sidebar-folder-picker"));
+        const button = append(footer, $("button.folder-picker-button"));
+        button.setAttribute("aria-label", ( localize(5304, "Browse folder")));
+        const folderIcon = append(button, $(`.codicon.codicon-${Codicon.folder.id}`));
+        folderIcon.classList.add("folder-picker-icon");
+        this.folderPickerLabel = append(button, $("span.folder-picker-label"));
+        this.folderPickerClearButton = append(footer, $("button.folder-picker-clear"));
+        this.folderPickerClearButton.setAttribute("aria-label", ( localize(5305, "Reset to session folder")));
+        append(this.folderPickerClearButton, $(`.codicon.codicon-${Codicon.close.id}`));
+        this.editorDisposables.add(addDisposableListener(button, "click", () => {
+            this.browseForFolder();
+        }));
+        this.editorDisposables.add(addDisposableListener(this.folderPickerClearButton, "click", () => {
+            this.workspaceService.clearOverrideProjectRoot();
+        }));
+        this.editorDisposables.add(
+            this.hoverService.setupManagedHover(getDefaultHoverDelegate("element"), button, () => {
+                const root = this.workspaceService.getActiveProjectRoot();
+                return root?.fsPath ?? "";
+            })
+        );
+        this.editorDisposables.add(autorun(reader => {
+            const root = this.workspaceService.activeProjectRoot.read(reader);
+            const hasOverride = this.workspaceService.hasOverrideProjectRoot.read(reader);
+            this.updateFolderPickerLabel(root, hasOverride);
+        }));
+    }
+    updateFolderPickerLabel(root, hasOverride) {
+        if (this.folderPickerLabel) {
+            this.folderPickerLabel.textContent = root ? basename(root) : ( localize(5306, "No folder"));
+        }
+        if (this.folderPickerClearButton) {
+            this.folderPickerClearButton.style.display = hasOverride ? "" : "none";
+        }
+    }
+    async browseForFolder() {
+        const result = await this.fileDialogService.showOpenDialog({
+            canSelectFolders: true,
+            canSelectFiles: false,
+            canSelectMany: false,
+            title: ( localize(5307, "Select Folder to Explore")),
+            defaultUri: this.workspaceService.getActiveProjectRoot()
+        });
+        if (result?.[0]) {
+            this.workspaceService.setOverrideProjectRoot(result[0]);
+        }
+    }
+    createContent() {
+        const contentInner = append(this.contentContainer, $(".content-inner"));
+        this.promptsContentContainer = append(contentInner, $(".prompts-content-container"));
+        this.listWidget = this.editorDisposables.add(this.instantiationService.createInstance(AICustomizationListWidget));
+        this.promptsContentContainer.appendChild(this.listWidget.element);
+        this.editorDisposables.add(this.listWidget.onDidSelectItem(item => {
+            const isWorkspaceFile = item.storage === PromptsStorage.local;
+            const isReadOnly = item.storage === PromptsStorage.extension || item.storage === PromptsStorage.plugin;
+            this.showEmbeddedEditor(item.uri, item.name, isWorkspaceFile, isReadOnly);
+        }));
+        this.editorDisposables.add(this.listWidget.onDidRequestCreate(promptType => {
+            this.createNewItemWithAI(promptType);
+        }));
+        this.editorDisposables.add(this.listWidget.onDidRequestCreateManual((
+            {
+                type,
+                target
+            }
+        ) => {
+            this.createNewItemManual(type, target);
+        }));
+        const hasSections = ( new Set(this.workspaceService.managementSections));
+        if (( hasSections.has(AICustomizationManagementSection.Models))) {
+            this.modelsContentContainer = append(contentInner, $(".models-content-container"));
+            this.modelsWidget = this.editorDisposables.add(this.instantiationService.createInstance(ChatModelsWidget));
+            this.modelsContentContainer.appendChild(this.modelsWidget.element);
+            this.modelsFooterElement = append(this.modelsContentContainer, $(".section-footer"));
+            const modelsDescription = append(this.modelsFooterElement, $("p.section-footer-description"));
+            modelsDescription.textContent = ( localize(
+                5308,
+                "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(5309, "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();
+                this.openerService.open(( URI.parse(modelsLink.href)));
+            }));
+        }
+        if (( hasSections.has(AICustomizationManagementSection.McpServers))) {
+            this.mcpContentContainer = append(contentInner, $(".mcp-content-container"));
+            this.mcpListWidget = this.editorDisposables.add(this.instantiationService.createInstance(McpListWidget));
+            this.mcpContentContainer.appendChild(this.mcpListWidget.element);
+            this.mcpDetailContainer = append(contentInner, $(".mcp-detail-container"));
+            this.createEmbeddedMcpDetail();
+            this.editorDisposables.add(this.mcpListWidget.onDidSelectServer(server => {
+                this.showEmbeddedMcpDetail(server);
+            }));
+        }
+        if (( hasSections.has(AICustomizationManagementSection.Plugins))) {
+            this.pluginContentContainer = append(contentInner, $(".plugin-content-container"));
+            this.pluginListWidget = this.editorDisposables.add(this.instantiationService.createInstance(PluginListWidget));
+            this.pluginContentContainer.appendChild(this.pluginListWidget.element);
+            this.pluginDetailContainer = append(contentInner, $(".plugin-detail-container"));
+            this.createEmbeddedPluginDetail();
+            this.editorDisposables.add(this.pluginListWidget.onDidSelectPlugin(item => {
+                this.showEmbeddedPluginDetail(item);
+            }));
+        }
+        this.editorContentContainer = append(contentInner, $(".editor-content-container"));
+        this.createEmbeddedEditor();
+        this.updateContentVisibility();
+        if (this.isPromptsSection(this.selectedSection)) {
+            void this.listWidget.setSection(this.selectedSection);
+        }
+    }
+    isPromptsSection(section) {
+        return section === AICustomizationManagementSection.Agents || section === AICustomizationManagementSection.Skills || section === AICustomizationManagementSection.Instructions || section === AICustomizationManagementSection.Prompts || section === AICustomizationManagementSection.Hooks;
+    }
+    selectSection(section) {
+        if (this.selectedSection === section) {
+            return;
+        }
+        if (this.viewMode === "editor") {
+            this.goBackToList();
+        }
+        if (this.viewMode === "mcpDetail") {
+            this.goBackFromMcpDetail();
+        }
+        if (this.viewMode === "pluginDetail") {
+            this.goBackFromPluginDetail();
+        }
+        this.selectedSection = section;
+        this.sectionContextKey.set(section);
+        this.storageService.store(
+            AI_CUSTOMIZATION_MANAGEMENT_SELECTED_SECTION_KEY,
+            section,
+            StorageScope.PROFILE,
+            StorageTarget.USER
+        );
+        this.updateContentVisibility();
+        if (this.isPromptsSection(section)) {
+            void this.listWidget.setSection(section);
+        }
+    }
+    updateContentVisibility() {
+        const isEditorMode = this.viewMode === "editor";
+        const isMcpDetailMode = this.viewMode === "mcpDetail";
+        const isPluginDetailMode = this.viewMode === "pluginDetail";
+        const isDetailMode = isMcpDetailMode || isPluginDetailMode;
+        const isPromptsSection = this.isPromptsSection(this.selectedSection);
+        const isModelsSection = this.selectedSection === AICustomizationManagementSection.Models;
+        const isMcpSection = this.selectedSection === AICustomizationManagementSection.McpServers;
+        const isPluginsSection = this.selectedSection === AICustomizationManagementSection.Plugins;
+        this.promptsContentContainer.style.display = !isEditorMode && !isDetailMode && isPromptsSection ? "" : "none";
+        if (this.modelsContentContainer) {
+            this.modelsContentContainer.style.display = !isEditorMode && !isDetailMode && isModelsSection ? "" : "none";
+        }
+        if (this.mcpContentContainer) {
+            this.mcpContentContainer.style.display = !isEditorMode && !isDetailMode && isMcpSection ? "" : "none";
+        }
+        if (this.mcpDetailContainer) {
+            this.mcpDetailContainer.style.display = isMcpDetailMode ? "" : "none";
+        }
+        if (this.pluginContentContainer) {
+            this.pluginContentContainer.style.display = !isEditorMode && !isDetailMode && isPluginsSection ? "" : "none";
+        }
+        if (this.pluginDetailContainer) {
+            this.pluginDetailContainer.style.display = isPluginDetailMode ? "" : "none";
+        }
+        if (this.editorContentContainer) {
+            this.editorContentContainer.style.display = isEditorMode ? "" : "none";
+        }
+        if (isModelsSection && this.modelsWidget) {
+            this.modelsWidget.render();
+            if (this.dimension) {
+                this.layout(this.dimension);
+            }
+        }
+    }
+    async createNewItemWithAI(type) {
+        if (this.input) {
+            this.group.closeEditor(this.input);
+        }
+        await this.workspaceService.generateCustomization(type);
+    }
+    async createNewItemManual(type, target) {
+        if (type === PromptsType.hook) {
+            if (this.workspaceService.isSessionsWindow) {
+                await this.instantiationService.invokeFunction(showConfigureHooksQuickPick, {
+                    openEditor: async resource => {
+                        await this.showEmbeddedEditor(resource, basename(resource), true);
+                        return;
+                    },
+                    target: Target.GitHubCopilot
+                });
+            } else {
+                await this.instantiationService.invokeFunction(showConfigureHooksQuickPick, {
+                    openEditor: async resource => {
+                        await this.showEmbeddedEditor(resource, basename(resource), true);
+                        return;
+                    }
+                });
+            }
+            return;
+        }
+        const targetDir = target === "workspace" ? resolveWorkspaceTargetDirectory(this.workspaceService, type) : await resolveUserTargetDirectory(this.promptsService, type);
+        const options = {
+            targetFolder: targetDir,
+            targetStorage: target === "user" ? PromptsStorage.user : PromptsStorage.local,
+            openFile: async uri => {
+                const isWorkspace = target === "workspace";
+                await this.showEmbeddedEditor(uri, basename(uri), isWorkspace);
+                return this.embeddedEditor;
+            }
+        };
+        let commandId;
+        switch (type) {
+        case PromptsType.prompt:
+            commandId = NEW_PROMPT_COMMAND_ID;
+            break;
+        case PromptsType.instructions:
+            commandId = NEW_INSTRUCTIONS_COMMAND_ID;
+            break;
+        case PromptsType.agent:
+            commandId = NEW_AGENT_COMMAND_ID;
+            break;
+        case PromptsType.skill:
+            commandId = NEW_SKILL_COMMAND_ID;
+            break;
+        default:
+            return;
+        }
+        await this.commandService.executeCommand(commandId, options);
+        void this.listWidget.refresh();
+    }
+    updateStyles() {
+        const borderColor = this.theme.getColor(aiCustomizationManagementSashBorder);
+        if (borderColor) {
+            this.splitView?.style({
+                separatorBorder: borderColor
+            });
+        }
+    }
+    async setInput(input, options, context, token) {
+        this.workspaceService.clearOverrideProjectRoot();
+        this.inEditorContextKey.set(true);
+        this.sectionContextKey.set(this.selectedSection);
+        await super.setInput(input, options, context, token);
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+    }
+    clearInput() {
+        this.inEditorContextKey.set(false);
+        if (this.viewMode === "editor") {
+            this.goBackToList();
+        }
+        if (this.viewMode === "mcpDetail") {
+            this.goBackFromMcpDetail();
+        }
+        if (this.viewMode === "pluginDetail") {
+            this.goBackFromPluginDetail();
+        }
+        this.workspaceService.clearOverrideProjectRoot();
+        super.clearInput();
+    }
+    layout(dimension) {
+        this.dimension = dimension;
+        if (this.container && this.splitView) {
+            this.splitViewContainer.style.height = `${dimension.height}px`;
+            this.splitView.layout(dimension.width, dimension.height);
+        }
+    }
+    focus() {
+        super.focus();
+        if (this.viewMode === "editor") {
+            this.embeddedEditor?.focus();
+            return;
+        }
+        if (this.selectedSection === AICustomizationManagementSection.McpServers) {
+            this.mcpListWidget?.focusSearch();
+        } else if (this.selectedSection === AICustomizationManagementSection.Plugins) {
+            this.pluginListWidget?.focusSearch();
+        } else if (this.selectedSection === AICustomizationManagementSection.Models) {
+            this.modelsWidget?.focusSearch();
+        } else {
+            this.listWidget?.focusSearch();
+        }
+    }
+    selectSectionById(sectionId) {
+        const index = this.sections.findIndex(s => s.id === sectionId);
+        if (index >= 0) {
+            if (this.viewMode === "editor") {
+                this.goBackToList();
+            }
+            if (this.viewMode === "mcpDetail") {
+                this.goBackFromMcpDetail();
+            }
+            if (this.viewMode === "pluginDetail") {
+                this.goBackFromPluginDetail();
+            }
+            this.selectedSection = sectionId;
+            this.sectionContextKey.set(sectionId);
+            this.storageService.store(
+                AI_CUSTOMIZATION_MANAGEMENT_SELECTED_SECTION_KEY,
+                sectionId,
+                StorageScope.PROFILE,
+                StorageTarget.USER
+            );
+            this.updateContentVisibility();
+            if (this.isPromptsSection(sectionId)) {
+                void this.listWidget.setSection(sectionId);
+            }
+            this.sectionsList.setFocus([index]);
+            this.sectionsList.setSelection([index]);
+        }
+    }
+    refreshList() {
+        void this.listWidget.refresh();
+    }
+    async generateDebugReport() {
+        return this.listWidget.generateDebugReport();
+    }
+    createEmbeddedEditor() {
+        if (!this.editorContentContainer) {
+            return;
+        }
+        const editorHeader = append(this.editorContentContainer, $(".editor-header"));
+        const backButton = append(editorHeader, $("button.editor-back-button"));
+        backButton.setAttribute("aria-label", ( localize(5310, "Back to list")));
+        const backIcon = append(backButton, $(`.codicon.codicon-${Codicon.arrowLeft.id}`));
+        backIcon.setAttribute("aria-hidden", "true");
+        this.editorDisposables.add(addDisposableListener(backButton, "click", () => {
+            this.goBackToList();
+        }));
+        const itemInfo = append(editorHeader, $(".editor-item-info"));
+        this.editorItemNameElement = append(itemInfo, $(".editor-item-name"));
+        this.editorItemPathElement = append(itemInfo, $(".editor-item-path"));
+        this.editorSaveIndicator = append(editorHeader, $(".editor-save-indicator"));
+        const 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, {
+                ...getSimpleEditorOptions(this.configurationService),
+                readOnly: false,
+                minimap: {
+                    enabled: false
+                },
+                lineNumbers: "on",
+                wordWrap: "on",
+                scrollBeyondLastLine: false,
+                automaticLayout: false,
+                folding: true,
+                renderLineHighlight: "all",
+                scrollbar: {
+                    vertical: "auto",
+                    horizontal: "auto"
+                },
+                overflowWidgetsDomNode
+            }, {
+                isSimpleWidget: false
+            })
+        );
+    }
+    async showEmbeddedEditor(uri, displayName, isWorkspaceFile = false, isReadOnly = false) {
+        this.currentModelRef?.dispose();
+        this.currentModelRef = undefined;
+        this.currentEditingUri = uri;
+        this.currentEditingProjectRoot = isWorkspaceFile ? this.workspaceService.getActiveProjectRoot() : undefined;
+        this.viewMode = "editor";
+        this.editorItemNameElement.textContent = displayName;
+        this.editorItemPathElement.textContent = basename(uri);
+        this.updateContentVisibility();
+        try {
+            const ref = await this.textModelService.createModelReference(uri);
+            if (!isEqual(this.currentEditingUri, uri)) {
+                ref.dispose();
+                return;
+            }
+            this.currentModelRef = ref;
+            this.embeddedEditor.setModel(ref.object.textEditorModel);
+            this.embeddedEditor.updateOptions({
+                readOnly: isReadOnly
+            });
+            if (this.dimension) {
+                this.layout(this.dimension);
+            }
+            this.embeddedEditor.focus();
+            this.editorModelChangeDisposables.clear();
+            this._editorContentChanged = false;
+            const saveDelayer = this.editorModelChangeDisposables.add(( new Delayer(500)));
+            this.editorModelChangeDisposables.add(ref.object.textEditorModel.onDidChangeContent(() => {
+                this._editorContentChanged = true;
+                this.editorSaveIndicator.className = "editor-save-indicator visible";
+                this.editorSaveIndicator.classList.add(...ThemeIcon.asClassNameArray(Codicon.loading), "codicon-modifier-spin");
+                this.editorSaveIndicator.title = ( localize(5311, "Saving..."));
+                saveDelayer.trigger(async () => {
+                    try {
+                        await this.textFileService.save(uri);
+                    } catch (error) {
+                        console.error("Failed to save AI customization file:", error);
+                        this.editorSaveIndicator.className = "editor-save-indicator visible error";
+                        this.editorSaveIndicator.classList.add(...ThemeIcon.asClassNameArray(Codicon.error));
+                        this.editorSaveIndicator.title = ( localize(5312, "Save Failed"));
+                    }
+                });
+            }));
+            this.editorModelChangeDisposables.add(this.workingCopyService.onDidSave(e => {
+                if (isEqual(e.workingCopy.resource, uri)) {
+                    this.editorSaveIndicator.className = "editor-save-indicator visible saved";
+                    this.editorSaveIndicator.classList.add(...ThemeIcon.asClassNameArray(Codicon.check));
+                    this.editorSaveIndicator.title = ( localize(5313, "Saved"));
+                }
+            }));
+        } catch (error) {
+            console.error("Failed to load model for embedded editor:", error);
+            if (isEqual(this.currentEditingUri, uri)) {
+                this.goBackToList();
+            }
+        }
+    }
+    goBackToList() {
+        const fileUri = this.currentEditingUri;
+        const projectRoot = this.currentEditingProjectRoot;
+        if (fileUri && projectRoot && this._editorContentChanged) {
+            this.workspaceService.commitFiles(projectRoot, [fileUri]);
+        }
+        this.currentModelRef?.dispose();
+        this.currentModelRef = undefined;
+        this.currentEditingUri = undefined;
+        this.currentEditingProjectRoot = undefined;
+        this.editorModelChangeDisposables.clear();
+        this.editorSaveIndicator.className = "editor-save-indicator";
+        this.editorSaveIndicator.title = "";
+        this.embeddedEditor?.setModel(null);
+        this.viewMode = "list";
+        this.updateContentVisibility();
+        void this.listWidget?.refresh();
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+        this.listWidget?.focusSearch();
+    }
+    createEmbeddedMcpDetail() {
+        if (!this.mcpDetailContainer) {
+            return;
+        }
+        const detailHeader = append(this.mcpDetailContainer, $(".editor-header"));
+        const backButton = append(detailHeader, $("button.editor-back-button"));
+        backButton.setAttribute("aria-label", ( localize(5314, "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);
+    }
+    async showEmbeddedMcpDetail(server) {
+        if (!this.embeddedMcpEditor) {
+            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;
+        }
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+    }
+    goBackFromMcpDetail() {
+        this.mcpDetailDisposables.clear();
+        this.embeddedMcpEditor?.clearInput();
+        this.viewMode = "list";
+        this.updateContentVisibility();
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+        this.mcpListWidget?.focusSearch();
+    }
+    createEmbeddedPluginDetail() {
+        if (!this.pluginDetailContainer) {
+            return;
+        }
+        const detailHeader = append(this.pluginDetailContainer, $(".editor-header"));
+        const backButton = append(detailHeader, $("button.editor-back-button"));
+        backButton.setAttribute("aria-label", ( localize(5315, "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);
+    }
+    async showEmbeddedPluginDetail(item) {
+        if (!this.embeddedPluginEditor) {
+            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;
+        }
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+    }
+    goBackFromPluginDetail() {
+        this.pluginDetailDisposables.clear();
+        this.embeddedPluginEditor?.clearInput();
+        this.viewMode = "list";
+        this.updateContentVisibility();
+        if (this.dimension) {
+            this.layout(this.dimension);
+        }
+        this.pluginListWidget?.focusSearch();
+    }
+};
+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, ITextFileService)), ( __param(14, IFileDialogService)), ( __param(15, IHoverService))], AICustomizationManagementEditor));
+
+export { AICustomizationManagementEditor, aiCustomizationManagementSashBorder };