chat: replace embedded MCP/plugin editors with compact detail widgets#312465
Merged
joshspicer merged 5 commits intomainfrom Apr 25, 2026
Merged
chat: replace embedded MCP/plugin editors with compact detail widgets#312465joshspicer merged 5 commits intomainfrom
joshspicer merged 5 commits intomainfrom
Conversation
The Chat Customizations management editor previously embedded the full-page McpServerEditor and AgentPluginEditor inside its split-pane detail host. Those editors are designed for a wide standalone editor area and rendered visually broken in the narrow split pane regardless of CSS overrides. This change introduces two small dedicated detail components, EmbeddedMcpServerDetail and EmbeddedAgentPluginDetail, which render compactly in the split pane (icon, name, scope/source, description) and offer an 'Open in editor' link to launch the full standalone editor for advanced flows. The previous '.extension-editor' host overrides are removed in favor of focused '.ai-customization-embedded-detail' styles. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Adds six new component-explorer fixtures that render EmbeddedMcpServerDetail and EmbeddedAgentPluginDetail in isolation (workspace/user/empty for MCP, installed/marketplace/empty for plugin). These complement the existing host- editor fixtures and catch regressions in the widgets themselves without requiring the full management editor stack. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The full-page McpServerEditor and AgentPluginEditor are visually broken in several flows, so linking out to them from the compact detail widget did more harm than and the link looked out of place in an otherwise minimalgood header. Drop the link, its handlers, and the now-unused services (IHoverService, IEditorService, IInstantiationService) along with the related CSS. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Screenshot ChangesBase: Changed (62)
|
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePage/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemEditor/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemEditor/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Light
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Dark
| Before | After |
|---|---|
|
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Light
| Before | After |
|---|---|
|
 |
editor/inlineChatAffordance/InlineChatAffordance/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineChatAffordance/InlineChatAffordance/Light
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/other/HintsToolbar/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/other/HintsToolbar/Light
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/other/HintsToolbarHovered/Dark
| Before | After |
|---|---|
|
|
editor/inlineCompletions/other/HintsToolbarHovered/Light
| Before | After |
|---|---|
|
|
editor/inlineCompletions/views/SideBySideViewSmall/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/SideBySideViewSmall/Light
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/SideBySideViewWide/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/SideBySideViewWide/Light
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/WordReplacementView/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/WordReplacementView/Light
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/DeletionView/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/DeletionView/Light
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/LineReplacementView/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineCompletions/views/LineReplacementView/Light
| Before | After |
|---|---|
 |
 |
editor/multiDiffEditor/MultiDiffEditor/Dark
| Before | After |
|---|---|
 |
 |
editor/multiDiffEditor/MultiDiffEditor/Light
| Before | After |
|---|---|
 |
 |
editor/suggestWidget/MethodCompletions/Dark
| Before | After |
|---|---|
 |
 |
editor/suggestWidget/MethodCompletions/Light
| Before | After |
|---|---|
 |
 |
peekReference/PeekReferences/Dark
| Before | After |
|---|---|
 |
 |
peekReference/PeekReferences/Light
| Before | After |
|---|---|
 |
 |
Added (16)
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetailNarrow/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetailNarrow/Light
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetailNarrow/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetailNarrow/Light
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailWorkspace/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailWorkspace/Light
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailUser/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailUser/Light
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailEmpty/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailEmpty/Light
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailInstalled/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailInstalled/Light
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailMarketplace/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailMarketplace/Light
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailEmpty/Dark
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailEmpty/Light
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the AI Customizations management editor’s split-pane detail host to use purpose-built compact DOM widgets for MCP servers and agent plugins, replacing the previously embedded full-page editor panes that didn’t scale down well in narrow layouts.
Changes:
- Replace embedded
McpServerEditor/AgentPluginEditorusage withEmbeddedMcpServerDetail/EmbeddedAgentPluginDetailcompact widgets. - Update management editor CSS to support scrolling + flex sizing for the new embedded detail widgets.
- Add/adjust component explorer fixtures and update the Sessions design doc for the new embedded detail approach.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts | Swaps embedded editor panes for compact embedded detail widgets; removes layout calls for those panes. |
| src/vs/workbench/contrib/chat/browser/aiCustomization/embeddedMcpServerDetail.ts | New compact MCP server identity/description widget for split-pane detail. |
| src/vs/workbench/contrib/chat/browser/aiCustomization/embeddedAgentPluginDetail.ts | New compact agent plugin identity/description widget for split-pane detail. |
| src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css | Adds shared .ai-customization-embedded-detail styling and adjusts detail container overflow/min-height. |
| src/vs/workbench/test/browser/componentFixtures/sessions/aiCustomizationManagementEditor.fixture.ts | Adds new standalone fixtures for the embedded widgets and improves first-row selection for MCP/plugin lists. |
| src/vs/sessions/AI_CUSTOMIZATIONS.md | Documents the embedded detail widget approach in the Sessions design doc. |
Copilot's findings
- Files reviewed: 6/6 changed files
- Comments generated: 2
dmitrivMS
previously approved these changes
Apr 25, 2026
- EmbeddedMcpServerDetail: server.codicon already contains the full codicon
class name (e.g. "codicon-foo"), matching the pattern in
mcpServerWidgets.ts. The previous code prefixed it again and validated
against the Codicon registry, so custom server icons never rendered. Mirror
the existing pattern: `codicon ${server.codicon}` when set, otherwise the
themed mcpServerIcon.
- AI_CUSTOMIZATIONS.md: drop stale mention of the "Open in editor" link, which
was removed earlier in this branch.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
roblourens
previously approved these changes
Apr 25, 2026
The AICustomizationManagementEditor constructor calls harnessService.findHarnessById, which the fixture mock did not implement. This caused all renderEditor-based fixtures (including McpServerDetailNarrow and PluginDetailNarrow) to crash during construction and produce blank screenshots in CI. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
roblourens
approved these changes
Apr 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Replaces the full-page
McpServerEditorandAgentPluginEditorthat were embedded inside the Chat Customizations management editor's split-pane detail host with two small dedicated widgets:EmbeddedMcpServerDetail— icon + name + scope + description for an MCP serverEmbeddedAgentPluginDetail— icon + name + source + description for an agent pluginBoth are plain
Disposablewidgets (noEditorPaneplumbing) that flow with their container.Why
The two extension-style editors are designed for a wide standalone editor area. When embedded in the narrow split pane they rendered visually broken — overflowing headers, misaligned chrome, and stretched layouts — no matter how much CSS was layered on top. After repeated attempts to scope
extensionEditor.cssoverrides failed, the cleaner fix is to render purpose-built compact components in the split pane.Advanced actions (enable / disable / uninstall / configure, contributed items, README) remain accessible via the existing row context menu and from the standalone editors when opened directly. The compact widget intentionally surfaces only identity + description.
Notes for reviewers
.extension-editorCSS overrides removed in favor of focused.ai-customization-embedded-detailstyles.aiCustomizationManagementEditor.tsno longer calls.layout(Dimension)on the detail widgets during split-view layout (the new components don't need it).McpServerDetail/PluginDetailhost-editor fixtures.src/vs/sessions/AI_CUSTOMIZATIONS.md.Validation
npm run compile-check-ts-nativenpm run valid-layers-checkVisual verification was blocked locally by an unrelated pre-existing Electron module load error.