@codingame/monaco-vscode-mcp-service-override 17.2.0 → 18.0.0

package/vscode/src/vs/workbench/contrib/mcp/browser/mcpServerEditor.js

@@ -0,0 +1,542 @@
+
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import { append, $, clearNode, addDisposableListener, setParentFlowTo } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { ActionBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/actionbar/actionbar';
+import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
+import { Action } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { insert } from '@codingame/monaco-vscode-api/vscode/vs/base/common/arrays';
+import { Cache } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cache';
+import { CancellationTokenSource } from '@codingame/monaco-vscode-api/vscode/vs/base/common/cancellation';
+import { isCancellationError } from '@codingame/monaco-vscode-api/vscode/vs/base/common/errors';
+import { Emitter, Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { Disposable, dispose, MutableDisposable, DisposableStore, toDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { matchesScheme, Schemas } from '@codingame/monaco-vscode-api/vscode/vs/base/common/network';
+import { language } from '@codingame/monaco-vscode-api/vscode/vs/base/common/platform';
+import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { generateUuid } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uuid';
+import { TokenizationRegistry } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages';
+import { ILanguageService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service';
+import { generateTokensCSSForColorMap } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/supports/tokenization';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { INotificationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/notification/common/notification.service';
+import { IOpenerService } from '@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service';
+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-dcfc2191-2da1-54c7-8fb7-e92c5d11ecef-common/vscode/vs/workbench/browser/parts/editor/editorPane';
+import { renderMarkdownDocument, DEFAULT_MARKDOWN_STYLES } from '@codingame/monaco-vscode-cf77987b-b1b7-5359-aaf8-a259c63d9f03-common/vscode/vs/workbench/contrib/markdown/browser/markdownDocumentRenderer';
+import { IWebviewService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/webview/browser/webview.service';
+import { IExtensionService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/extensions/common/extensions.service';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+import { McpServerContainers, mcpServerIcon } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/mcp/common/mcpTypes';
+import { PublisherWidget, InstallCountWidget, RatingsWidget, onClick } from './mcpServerWidgets.js';
+import { InstallAction, UninstallAction, ManageMcpServerAction, DropDownAction } from './mcpServerActions.js';
+import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
+
+var McpServerEditor_1;
+var McpServerEditorTab;
+(function (McpServerEditorTab) {
+    McpServerEditorTab["Readme"] = "readme";
+})(McpServerEditorTab || (McpServerEditorTab = {}));
+function toDateString(date) {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}, ${date.toLocaleTimeString(language, { hourCycle: 'h23' })}`;
+}
+class NavBar extends Disposable {
+    get onChange() { return this._onChange.event; }
+    get currentId() { return this._currentId; }
+    constructor(container) {
+        super();
+        this._onChange = this._register(( new Emitter()));
+        this._currentId = null;
+        const element = append(container, $('.navbar'));
+        this.actions = [];
+        this.actionbar = this._register(( new ActionBar(element)));
+    }
+    push(id, label, tooltip) {
+        const action = ( new Action(id, label, undefined, true, () => this.update(id, true)));
+        action.tooltip = tooltip;
+        this.actions.push(action);
+        this.actionbar.push(action);
+        if (this.actions.length === 1) {
+            this.update(id);
+        }
+    }
+    clear() {
+        this.actions = dispose(this.actions);
+        this.actionbar.clear();
+    }
+    switch(id) {
+        const action = this.actions.find(action => action.id === id);
+        if (action) {
+            action.run();
+            return true;
+        }
+        return false;
+    }
+    update(id, focus) {
+        this._currentId = id;
+        this._onChange.fire({ id, focus: !!focus });
+        this.actions.forEach(a => a.checked = a.id === id);
+    }
+}
+var WebviewIndex;
+(function (WebviewIndex) {
+    WebviewIndex[WebviewIndex["Readme"] = 0] = "Readme";
+    WebviewIndex[WebviewIndex["Changelog"] = 1] = "Changelog";
+})(WebviewIndex || (WebviewIndex = {}));
+let McpServerEditor = class McpServerEditor extends EditorPane {
+    static { McpServerEditor_1 = this; }
+    static { this.ID = 'workbench.editor.mcpServer'; }
+    constructor(group, telemetryService, instantiationService, themeService, notificationService, openerService, storageService, extensionService, webviewService, languageService, contextKeyService, hoverService) {
+        super(McpServerEditor_1.ID, group, telemetryService, themeService, storageService);
+        this.instantiationService = instantiationService;
+        this.notificationService = notificationService;
+        this.openerService = openerService;
+        this.extensionService = extensionService;
+        this.webviewService = webviewService;
+        this.languageService = languageService;
+        this.contextKeyService = contextKeyService;
+        this.hoverService = hoverService;
+        this._scopedContextKeyService = this._register(( new MutableDisposable()));
+        this.initialScrollProgress = ( new Map());
+        this.currentIdentifier = '';
+        this.layoutParticipants = [];
+        this.contentDisposables = this._register(( new DisposableStore()));
+        this.transientDisposables = this._register(( new DisposableStore()));
+        this.activeElement = null;
+        this.mcpServerReadme = null;
+    }
+    get scopedContextKeyService() {
+        return this._scopedContextKeyService.value;
+    }
+    createEditor(parent) {
+        const root = append(parent, $('.extension-editor'));
+        this._scopedContextKeyService.value = this.contextKeyService.createScoped(root);
+        this._scopedContextKeyService.value.createKey('inExtensionEditor', true);
+        root.tabIndex = 0;
+        root.style.outline = 'none';
+        root.setAttribute('role', 'document');
+        const header = append(root, $('.header'));
+        const iconContainer = append(header, $('.icon-container'));
+        const details = append(header, $('.details'));
+        const title = append(details, $('.title'));
+        const name = append(title, $('span.name.clickable', { role: 'heading', tabIndex: 0 }));
+        this._register(this.hoverService.setupManagedHover(getDefaultHoverDelegate('mouse'), name, ( localize(7899, "Extension name"))));
+        const subtitle = append(details, $('.subtitle'));
+        const subTitleEntryContainers = [];
+        const publisherContainer = append(subtitle, $('.subtitle-entry'));
+        subTitleEntryContainers.push(publisherContainer);
+        const publisherWidget = this.instantiationService.createInstance(PublisherWidget, publisherContainer, false);
+        const installCountContainer = append(subtitle, $('.subtitle-entry'));
+        subTitleEntryContainers.push(installCountContainer);
+        const installCountWidget = this.instantiationService.createInstance(InstallCountWidget, installCountContainer, false);
+        const ratingsContainer = append(subtitle, $('.subtitle-entry'));
+        subTitleEntryContainers.push(ratingsContainer);
+        const ratingsWidget = this.instantiationService.createInstance(RatingsWidget, ratingsContainer, false);
+        const widgets = [
+            publisherWidget,
+            installCountWidget,
+            ratingsWidget,
+        ];
+        const description = append(details, $('.description'));
+        const actions = [
+            this.instantiationService.createInstance(InstallAction),
+            this.instantiationService.createInstance(UninstallAction),
+            this.instantiationService.createInstance(ManageMcpServerAction, true),
+        ];
+        const actionsAndStatusContainer = append(details, $('.actions-status-container.mcp-server-actions'));
+        const actionBar = this._register(( new ActionBar(actionsAndStatusContainer, {
+            actionViewItemProvider: (action, options) => {
+                if (action instanceof DropDownAction) {
+                    return action.createActionViewItem(options);
+                }
+                return undefined;
+            },
+            focusOnlyEnabledItems: true
+        })));
+        actionBar.push(actions, { icon: true, label: true });
+        actionBar.setFocusable(true);
+        this._register(Event.any(...( actions.map(a => Event.filter(a.onDidChange, e => e.enabled !== undefined))))(() => {
+            actionBar.setFocusable(false);
+            actionBar.setFocusable(true);
+        }));
+        const mcpServerContainers = this.instantiationService.createInstance(McpServerContainers, [...actions, ...widgets]);
+        for (const disposable of [...actions, ...widgets, mcpServerContainers]) {
+            this._register(disposable);
+        }
+        const onError = Event.chain(actionBar.onDidRun, $ => ( $.map(({ error }) => error))
+            .filter(error => !!error));
+        this._register(onError(this.onError, this));
+        const body = append(root, $('.body'));
+        const navbar = ( new NavBar(body));
+        const content = append(body, $('.content'));
+        content.id = generateUuid();
+        this.template = {
+            content,
+            description,
+            header,
+            iconContainer,
+            name,
+            navbar,
+            actionsAndStatusContainer,
+            actionBar: actionBar,
+            set mcpServer(mcpServer) {
+                mcpServerContainers.mcpServer = mcpServer;
+                let lastNonEmptySubtitleEntryContainer;
+                for (const subTitleEntryElement of subTitleEntryContainers) {
+                    subTitleEntryElement.classList.remove('last-non-empty');
+                    if (subTitleEntryElement.children.length > 0) {
+                        lastNonEmptySubtitleEntryContainer = subTitleEntryElement;
+                    }
+                }
+                if (lastNonEmptySubtitleEntryContainer) {
+                    lastNonEmptySubtitleEntryContainer.classList.add('last-non-empty');
+                }
+            }
+        };
+    }
+    async setInput(input, options, context, token) {
+        await super.setInput(input, options, context, token);
+        if (this.template) {
+            await this.render(input.mcpServer, this.template, !!options?.preserveFocus);
+        }
+    }
+    async render(mcpServer, template, preserveFocus) {
+        this.activeElement = null;
+        this.transientDisposables.clear();
+        const token = this.transientDisposables.add(( new CancellationTokenSource())).token;
+        this.mcpServerReadme = ( new Cache(() => mcpServer.getReadme(token)));
+        template.mcpServer = mcpServer;
+        clearNode(template.iconContainer);
+        if (mcpServer.iconUrl) {
+            const icon = append(template.iconContainer, $('img.icon', { alt: '' }));
+            this.transientDisposables.add(addDisposableListener(icon, 'error', () => {
+                clearNode(template.iconContainer);
+                append(template.iconContainer, $(ThemeIcon.asCSSSelector(mcpServerIcon)));
+            }, { once: true }));
+            icon.src = mcpServer.iconUrl;
+        }
+        else {
+            append(template.iconContainer, $(ThemeIcon.asCSSSelector(mcpServerIcon)));
+        }
+        template.name.textContent = mcpServer.label;
+        template.name.classList.toggle('clickable', !!mcpServer.url);
+        template.description.textContent = mcpServer.description;
+        if (mcpServer.url) {
+            this.transientDisposables.add(onClick(template.name, () => this.openerService.open(( URI.parse(mcpServer.url)))));
+        }
+        this.renderNavbar(mcpServer, template, preserveFocus);
+    }
+    renderNavbar(extension, template, preserveFocus) {
+        template.content.innerText = '';
+        template.navbar.clear();
+        if (this.currentIdentifier !== extension.id) {
+            this.initialScrollProgress.clear();
+            this.currentIdentifier = extension.id;
+        }
+        template.navbar.push(McpServerEditorTab.Readme, ( localize(7900, "Details")), ( localize(7901, "Extension details, rendered from the extension's 'README.md' file")));
+        if (template.navbar.currentId) {
+            this.onNavbarChange(extension, { id: template.navbar.currentId, focus: !preserveFocus }, template);
+        }
+        template.navbar.onChange(e => this.onNavbarChange(extension, e, template), this, this.transientDisposables);
+    }
+    clearInput() {
+        this.contentDisposables.clear();
+        this.transientDisposables.clear();
+        super.clearInput();
+    }
+    focus() {
+        super.focus();
+        this.activeElement?.focus();
+    }
+    showFind() {
+        this.activeWebview?.showFind();
+    }
+    runFindAction(previous) {
+        this.activeWebview?.runFindAction(previous);
+    }
+    get activeWebview() {
+        if (!this.activeElement || !this.activeElement.runFindAction) {
+            return undefined;
+        }
+        return this.activeElement;
+    }
+    onNavbarChange(extension, { id, focus }, template) {
+        this.contentDisposables.clear();
+        template.content.innerText = '';
+        this.activeElement = null;
+        if (id) {
+            const cts = ( new CancellationTokenSource());
+            this.contentDisposables.add(toDisposable(() => cts.dispose(true)));
+            this.open(id, extension, template, cts.token)
+                .then(activeElement => {
+                if (cts.token.isCancellationRequested) {
+                    return;
+                }
+                this.activeElement = activeElement;
+                if (focus) {
+                    this.focus();
+                }
+            });
+        }
+    }
+    open(id, extension, template, token) {
+        switch (id) {
+            case McpServerEditorTab.Readme: return this.openDetails(extension, template, token);
+        }
+        return Promise.resolve(null);
+    }
+    async openMarkdown(extension, cacheResult, noContentCopy, container, webviewIndex, title, token) {
+        try {
+            const body = await this.renderMarkdown(extension, cacheResult, container, token);
+            if (token.isCancellationRequested) {
+                return Promise.resolve(null);
+            }
+            const webview = this.contentDisposables.add(this.webviewService.createWebviewOverlay({
+                title,
+                options: {
+                    enableFindWidget: true,
+                    tryRestoreScrollPosition: true,
+                    disableServiceWorker: true,
+                },
+                contentOptions: {},
+                extension: undefined,
+            }));
+            webview.initialScrollProgress = this.initialScrollProgress.get(webviewIndex) || 0;
+            webview.claim(this, this.window, this.scopedContextKeyService);
+            setParentFlowTo(webview.container, container);
+            webview.layoutWebviewOverElement(container);
+            webview.setHtml(body);
+            webview.claim(this, this.window, undefined);
+            this.contentDisposables.add(webview.onDidFocus(() => this._onDidFocus?.fire()));
+            this.contentDisposables.add(webview.onDidScroll(() => this.initialScrollProgress.set(webviewIndex, webview.initialScrollProgress)));
+            const removeLayoutParticipant = insert(this.layoutParticipants, {
+                layout: () => {
+                    webview.layoutWebviewOverElement(container);
+                }
+            });
+            this.contentDisposables.add(toDisposable(removeLayoutParticipant));
+            let isDisposed = false;
+            this.contentDisposables.add(toDisposable(() => { isDisposed = true; }));
+            this.contentDisposables.add(this.themeService.onDidColorThemeChange(async () => {
+                const body = await this.renderMarkdown(extension, cacheResult, container);
+                if (!isDisposed) {
+                    webview.setHtml(body);
+                }
+            }));
+            this.contentDisposables.add(webview.onDidClickLink(link => {
+                if (!link) {
+                    return;
+                }
+                if (matchesScheme(link, Schemas.http) || matchesScheme(link, Schemas.https) || matchesScheme(link, Schemas.mailto)) {
+                    this.openerService.open(link);
+                }
+            }));
+            return webview;
+        }
+        catch (e) {
+            const p = append(container, $('p.nocontent'));
+            p.textContent = noContentCopy;
+            return p;
+        }
+    }
+    async renderMarkdown(extension, cacheResult, container, token) {
+        const contents = await this.loadContents(() => cacheResult, container);
+        if (token?.isCancellationRequested) {
+            return '';
+        }
+        const content = await renderMarkdownDocument(contents, this.extensionService, this.languageService, { shouldSanitize: true, token });
+        if (token?.isCancellationRequested) {
+            return '';
+        }
+        return this.renderBody(content);
+    }
+    renderBody(body) {
+        const nonce = generateUuid();
+        const colorMap = TokenizationRegistry.getColorMap();
+        const css = colorMap ? generateTokensCSSForColorMap(colorMap) : '';
+        return `<!DOCTYPE html>
+		<html>
+			<head>
+				<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https: data:; media-src https:; script-src 'none'; style-src 'nonce-${nonce}';">
+				<style nonce="${nonce}">
+					${DEFAULT_MARKDOWN_STYLES}
+
+					/* prevent scroll-to-top button from blocking the body text */
+					body {
+						padding-bottom: 75px;
+					}
+
+					#scroll-to-top {
+						position: fixed;
+						width: 32px;
+						height: 32px;
+						right: 25px;
+						bottom: 25px;
+						background-color: var(--vscode-button-secondaryBackground);
+						border-color: var(--vscode-button-border);
+						border-radius: 50%;
+						cursor: pointer;
+						box-shadow: 1px 1px 1px rgba(0,0,0,.25);
+						outline: none;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+
+					#scroll-to-top:hover {
+						background-color: var(--vscode-button-secondaryHoverBackground);
+						box-shadow: 2px 2px 2px rgba(0,0,0,.25);
+					}
+
+					body.vscode-high-contrast #scroll-to-top {
+						border-width: 2px;
+						border-style: solid;
+						box-shadow: none;
+					}
+
+					#scroll-to-top span.icon::before {
+						content: "";
+						display: block;
+						background: var(--vscode-button-secondaryForeground);
+						/* Chevron up icon */
+						webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDpub25lO30KPC9zdHlsZT4KPHRpdGxlPnVwY2hldnJvbjwvdGl0bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04LDUuMWwtNy4zLDcuM0wwLDExLjZsOC04bDgsOGwtMC43LDAuN0w4LDUuMXoiLz4KPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ii8+Cjwvc3ZnPgo=');
+						-webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDpub25lO30KPC9zdHlsZT4KPHRpdGxlPnVwY2hldnJvbjwvdGl0bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04LDUuMWwtNy4zLDcuM0wwLDExLjZsOC04bDgsOGwtMC43LDAuN0w4LDUuMXoiLz4KPHJlY3QgY2xhc3M9InN0MSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ii8+Cjwvc3ZnPgo=');
+						width: 16px;
+						height: 16px;
+					}
+					${css}
+				</style>
+			</head>
+			<body>
+				<a id="scroll-to-top" role="button" aria-label="scroll to top" href="#"><span class="icon"></span></a>
+				${body}
+			</body>
+		</html>`;
+    }
+    async openDetails(extension, template, token) {
+        const details = append(template.content, $('.details'));
+        const readmeContainer = append(details, $('.readme-container'));
+        const additionalDetailsContainer = append(details, $('.additional-details-container'));
+        const layout = () => details.classList.toggle('narrow', this.dimension && this.dimension.width < 500);
+        layout();
+        this.contentDisposables.add(toDisposable(insert(this.layoutParticipants, { layout })));
+        const activeElement = await this.openMarkdown(extension, this.mcpServerReadme.get(), ( localize(7902, "No README available.")), readmeContainer, WebviewIndex.Readme, ( localize(7903, "Readme")), token);
+        this.renderAdditionalDetails(additionalDetailsContainer, extension);
+        return activeElement;
+    }
+    renderAdditionalDetails(container, extension) {
+        const content = $('div', { class: 'additional-details-content', tabindex: '0' });
+        const scrollableContent = ( new DomScrollableElement(content, {}));
+        const layout = () => scrollableContent.scanDomNode();
+        const removeLayoutParticipant = insert(this.layoutParticipants, { layout });
+        this.contentDisposables.add(toDisposable(removeLayoutParticipant));
+        this.contentDisposables.add(scrollableContent);
+        this.contentDisposables.add(this.instantiationService.createInstance(AdditionalDetailsWidget, content, extension));
+        append(container, scrollableContent.getDomNode());
+        scrollableContent.scanDomNode();
+    }
+    loadContents(loadingTask, container) {
+        container.classList.add('loading');
+        const result = this.contentDisposables.add(loadingTask());
+        const onDone = () => container.classList.remove('loading');
+        result.promise.then(onDone, onDone);
+        return result.promise;
+    }
+    layout(dimension) {
+        this.dimension = dimension;
+        this.layoutParticipants.forEach(p => p.layout());
+    }
+    onError(err) {
+        if (isCancellationError(err)) {
+            return;
+        }
+        this.notificationService.error(err);
+    }
+};
+McpServerEditor = McpServerEditor_1 = ( __decorate([
+    ( __param(1, ITelemetryService)),
+    ( __param(2, IInstantiationService)),
+    ( __param(3, IThemeService)),
+    ( __param(4, INotificationService)),
+    ( __param(5, IOpenerService)),
+    ( __param(6, IStorageService)),
+    ( __param(7, IExtensionService)),
+    ( __param(8, IWebviewService)),
+    ( __param(9, ILanguageService)),
+    ( __param(10, IContextKeyService)),
+    ( __param(11, IHoverService))
+], McpServerEditor));
+let AdditionalDetailsWidget = class AdditionalDetailsWidget extends Disposable {
+    constructor(container, extension, hoverService, openerService) {
+        super();
+        this.container = container;
+        this.hoverService = hoverService;
+        this.openerService = openerService;
+        this.disposables = this._register(( new DisposableStore()));
+        this.render(extension);
+    }
+    render(extension) {
+        this.container.innerText = '';
+        this.disposables.clear();
+        if (extension.local) {
+            this.renderInstallInfo(this.container, extension.local);
+        }
+        if (extension.gallery) {
+            this.renderMarketplaceInfo(this.container, extension);
+        }
+        this.renderExtensionResources(this.container, extension);
+    }
+    renderExtensionResources(container, extension) {
+        const resources = [];
+        if (extension.repository) {
+            try {
+                resources.push([( localize(7904, "Repository")), ( URI.parse(extension.repository))]);
+            }
+            catch (error) {  }
+        }
+        if (extension.publisherUrl && extension.publisherDisplayName) {
+            resources.push([extension.publisherDisplayName, ( URI.parse(extension.publisherUrl))]);
+        }
+        if (resources.length) {
+            const extensionResourcesContainer = append(container, $('.resources-container.additional-details-element'));
+            append(extensionResourcesContainer, $('.additional-details-title', undefined, ( localize(7905, "Resources"))));
+            const resourcesElement = append(extensionResourcesContainer, $('.resources'));
+            for (const [label, uri] of resources) {
+                const resource = append(resourcesElement, $('a.resource', { tabindex: '0' }, label));
+                this.disposables.add(onClick(resource, () => this.openerService.open(uri)));
+                this.disposables.add(this.hoverService.setupManagedHover(getDefaultHoverDelegate('mouse'), resource, ( uri.toString())));
+            }
+        }
+    }
+    renderInstallInfo(container, extension) {
+        const installInfoContainer = append(container, $('.more-info-container.additional-details-element'));
+        append(installInfoContainer, $('.additional-details-title', undefined, ( localize(7906, "Installation"))));
+        const installInfo = append(installInfoContainer, $('.more-info'));
+        append(installInfo, $('.more-info-entry', undefined, $('div.more-info-entry-name', undefined, ( localize(7907, "Identifier"))), $('code', undefined, extension.name)));
+        append(installInfo, $('.more-info-entry', undefined, $('div.more-info-entry-name', undefined, ( localize(7908, "Version"))), $('code', undefined, extension.version)));
+    }
+    renderMarketplaceInfo(container, extension) {
+        const gallery = extension.gallery;
+        const moreInfoContainer = append(container, $('.more-info-container.additional-details-element'));
+        append(moreInfoContainer, $('.additional-details-title', undefined, ( localize(7909, "Marketplace"))));
+        const moreInfo = append(moreInfoContainer, $('.more-info'));
+        if (gallery) {
+            if (!extension.local) {
+                append(moreInfo, $('.more-info-entry', undefined, $('div.more-info-entry-name', undefined, ( localize(7907, "Identifier"))), $('code', undefined, extension.name)));
+                append(moreInfo, $('.more-info-entry', undefined, $('div.more-info-entry-name', undefined, ( localize(7908, "Version"))), $('code', undefined, gallery.version)));
+            }
+            append(moreInfo, $('.more-info-entry', undefined, $('div.more-info-entry-name', undefined, ( localize(7910, "Last Released"))), $('div', undefined, toDateString(( new Date(gallery.lastUpdated))))));
+        }
+    }
+};
+AdditionalDetailsWidget = ( __decorate([
+    ( __param(2, IHoverService)),
+    ( __param(3, IOpenerService))
+], AdditionalDetailsWidget));
+
+export { McpServerEditor };

package/vscode/src/vs/workbench/contrib/mcp/browser/mcpServerEditorInput.d.ts

@@ -0,0 +1,17 @@
+import { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
+import { EditorInputCapabilities, IUntypedEditorInput } from "@codingame/monaco-vscode-api/vscode/vs/workbench/common/editor";
+import { EditorInput } from "@codingame/monaco-vscode-api/vscode/vs/workbench/common/editor/editorInput";
+import { ThemeIcon } from "@codingame/monaco-vscode-api/vscode/vs/base/common/themables";
+import { IWorkbenchMcpServer } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/mcp/common/mcpTypes";
+export declare class McpServerEditorInput extends EditorInput {
+    private _mcpServer;
+    static readonly ID = "workbench.mcpServer.input2";
+    get typeId(): string;
+    get capabilities(): EditorInputCapabilities;
+    get resource(): URI;
+    constructor(_mcpServer: IWorkbenchMcpServer);
+    get mcpServer(): IWorkbenchMcpServer;
+    getName(): string;
+    getIcon(): ThemeIcon | undefined;
+    matches(other: EditorInput | IUntypedEditorInput): boolean;
+}

package/vscode/src/vs/workbench/contrib/mcp/browser/mcpServerEditorInput.js

@@ -0,0 +1,45 @@
+
+import { Schemas } from '@codingame/monaco-vscode-api/vscode/vs/base/common/network';
+import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { EditorInputCapabilities } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/editor';
+import { EditorInput } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/editor/editorInput';
+import { join } from '@codingame/monaco-vscode-api/vscode/vs/base/common/path';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { registerIcon } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/iconRegistry';
+
+const ExtensionEditorIcon = registerIcon('extensions-editor-label-icon', Codicon.extensions, ( localize(7911, 'Icon of the extensions editor label.')));
+class McpServerEditorInput extends EditorInput {
+    static { this.ID = 'workbench.mcpServer.input2'; }
+    get typeId() {
+        return McpServerEditorInput.ID;
+    }
+    get capabilities() {
+        return EditorInputCapabilities.Readonly | EditorInputCapabilities.Singleton;
+    }
+    get resource() {
+        return ( URI.from({
+            scheme: Schemas.extension,
+            path: join(this.mcpServer.id, 'mcpServer')
+        }));
+    }
+    constructor(_mcpServer) {
+        super();
+        this._mcpServer = _mcpServer;
+    }
+    get mcpServer() { return this._mcpServer; }
+    getName() {
+        return localize(7912, "Extension: {0}", this._mcpServer.label);
+    }
+    getIcon() {
+        return ExtensionEditorIcon;
+    }
+    matches(other) {
+        if (super.matches(other)) {
+            return true;
+        }
+        return other instanceof McpServerEditorInput && this._mcpServer.name === other._mcpServer.name;
+    }
+}
+
+export { McpServerEditorInput };

package/vscode/src/vs/workbench/contrib/mcp/browser/mcpServerWidgets.d.ts

@@ -0,0 +1,54 @@
+import { Disposable, IDisposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import { IHoverService } from "@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service";
+import { IOpenerService } from "@codingame/monaco-vscode-api/vscode/vs/platform/opener/common/opener.service";
+import { IMcpServerContainer, IWorkbenchMcpServer } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/mcp/common/mcpTypes";
+export declare abstract class McpServerWidget extends Disposable implements IMcpServerContainer {
+    private _mcpServer;
+    get mcpServer(): IWorkbenchMcpServer | null;
+    set mcpServer(mcpServer: IWorkbenchMcpServer | null);
+    update(): void;
+    abstract render(): void;
+}
+export declare function onClick(element: HTMLElement, callback: () => void): IDisposable;
+export declare class McpServerIconWidget extends McpServerWidget {
+    private readonly disposables;
+    private readonly element;
+    private readonly iconElement;
+    private readonly defaultIconElement;
+    private iconUrl;
+    constructor(container: HTMLElement);
+    private clear;
+    render(): void;
+}
+export declare class PublisherWidget extends McpServerWidget {
+    readonly container: HTMLElement;
+    private small;
+    private readonly hoverService;
+    private readonly openerService;
+    private element;
+    private containerHover;
+    private readonly disposables;
+    constructor(container: HTMLElement, small: boolean, hoverService: IHoverService, openerService: IOpenerService);
+    private clear;
+    render(): void;
+}
+export declare class InstallCountWidget extends McpServerWidget {
+    readonly container: HTMLElement;
+    private small;
+    private readonly hoverService;
+    private readonly disposables;
+    constructor(container: HTMLElement, small: boolean, hoverService: IHoverService);
+    private clear;
+    render(): void;
+    static getInstallLabel(extension: IWorkbenchMcpServer, small: boolean): string | undefined;
+}
+export declare class RatingsWidget extends McpServerWidget {
+    readonly container: HTMLElement;
+    private small;
+    private readonly hoverService;
+    private containerHover;
+    private readonly disposables;
+    constructor(container: HTMLElement, small: boolean, hoverService: IHoverService);
+    private clear;
+    render(): void;
+}