@codingame/monaco-vscode-chat-service-override 36.2.7 → 37.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css

@@ -11,6 +11,19 @@
 	overflow: hidden;
 }
 
+.plugin-list-widget .plugin-card-section-count {
+	min-width: var(--vscode-spacing-size160);
+	padding: 0 var(--vscode-spacing-size40);
+	border-radius: var(--vscode-cornerRadius-circle);
+	background: var(--vscode-toolbar-hoverBackground);
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-label3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 16px;
+	text-align: center;
+	box-sizing: border-box;
+}
+
 /* Inset button focus rings so they aren't clipped by a widget's overflow:hidden edge. !important overrides button.css. */
 .ai-customization-management-editor .monaco-button:focus,
 .ai-customization-list-widget .monaco-button:focus,
@@ -80,8 +93,85 @@
 }
 
 .ai-customization-management-editor .sidebar-sections-list {
+	flex: 0 0 auto;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .sidebar-migration-shortcut {
+	flex-shrink: 0;
+	margin-top: var(--vscode-spacing-size80);
+	padding-top: var(--vscode-spacing-size40);
+}
+
+.ai-customization-management-editor .sidebar-migration-separator {
+	height: var(--vscode-strokeThickness);
+	margin: 0 8px 6px;
+	background-color: var(--vscode-widget-border, var(--vscode-editorWidget-border, transparent));
+}
+
+.ai-customization-management-editor .sidebar-migration-shortcut > button.sidebar-migration-button {
+	all: unset;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 4px 8px;
+	border: none;
+	border-radius: var(--vscode-cornerRadius-small);
+	background: transparent;
+	color: var(--vscode-foreground);
+	cursor: pointer;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 18px;
+	font-family: inherit;
+	text-align: left;
+}
+
+.ai-customization-management-editor .sidebar-migration-shortcut > button.sidebar-migration-button:hover {
+	background-color: var(--vscode-list-hoverBackground);
+}
+
+.ai-customization-management-editor .sidebar-migration-shortcut > button.sidebar-migration-button.selected {
+	background-color: var(--vscode-list-activeSelectionBackground);
+	color: var(--vscode-list-activeSelectionForeground);
+}
+
+.ai-customization-management-editor .sidebar-migration-shortcut > button.sidebar-migration-button:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .sidebar-migration-icon {
+	flex-shrink: 0;
+	width: 16px;
+	height: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: inherit;
+	opacity: 1;
+}
+
+.ai-customization-management-editor .sidebar-migration-label {
 	flex: 1;
 	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 12px;
+	font-weight: 400;
+}
+
+.ai-customization-management-editor .sidebar-migration-count {
+	margin-left: auto;
+	flex-shrink: 0;
+	min-width: 14px;
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-fontSize-label2);
+	font-weight: var(--vscode-fontWeight-semiBold);
+	line-height: 16px;
+	text-align: right;
 }
 
 /* Section list items */
@@ -130,8 +220,8 @@
 
 .ai-customization-management-editor .section-list-item .section-count {
 	flex-shrink: 0;
-	font-size: var(--vscode-agents-fontSize-label2);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-label2);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-descriptionForeground);
 	border-radius: 8px;
 	min-width: 14px;
@@ -165,6 +255,22 @@
 	box-sizing: border-box;
 }
 
+.plugin-list-widget > .section-title-header,
+.plugin-list-widget > .plugin-marketplace-back-container,
+.plugin-list-widget > .list-search-and-button-container,
+.plugin-list-widget > .mcp-list-container,
+.tools-list-widget > .section-title-header,
+.tools-list-widget > .tools-list-search-and-button-container {
+	width: min(100%, 840px);
+	margin-inline: auto;
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .contributed-section-container {
+	flex: 1 1 auto;
+	min-height: 0;
+}
+
 .ai-customization-management-editor .section-back-arrow-button {
 	flex-shrink: 0;
 	align-self: flex-start;
@@ -258,7 +364,7 @@
 }
 
 .ai-customization-management-editor .harness-dropdown-chevron {
-	font-size: 12px;
+	font-size: var(--vscode-codiconFontSize-compact);
 	flex-shrink: 0;
 	opacity: 0.7;
 }
@@ -268,9 +374,50 @@
 .mcp-list-widget .list-search-and-button-container {
 	display: flex;
 	align-items: center;
-	gap: 8px;
 	flex-shrink: 0;
-	padding: 16px 0;
+	padding: var(--vscode-spacing-size160) 0 0;
+	margin-bottom: var(--vscode-spacing-size160);
+}
+
+.ai-customization-list-widget .list-search-and-button-container {
+	gap: var(--vscode-spacing-size80);
+}
+
+.mcp-list-widget .list-search-and-button-container {
+	gap: var(--vscode-spacing-size40);
+}
+
+.plugin-list-widget.browse-mode .list-search-and-button-container {
+	gap: var(--vscode-spacing-sizeNone);
+}
+
+.plugin-list-widget.narrow-layout .list-search-and-button-container {
+	align-items: stretch;
+	flex-wrap: wrap;
+}
+
+.plugin-list-widget.narrow-layout .list-search-container {
+	flex-basis: 100%;
+}
+
+.plugin-list-widget.narrow-layout .list-button-group {
+	width: 100%;
+	flex-wrap: nowrap;
+}
+
+.plugin-list-widget.narrow-layout .list-button-group > .list-add-button-container,
+.plugin-list-widget.narrow-layout .list-button-group > .list-add-button {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.plugin-list-widget.narrow-layout .list-button-group > .list-add-button {
+	width: auto;
+}
+
+.plugin-list-widget.narrow-layout .list-button-group > .list-icon-button {
+	flex: 0 0 var(--vscode-spacing-size280);
+	width: var(--vscode-spacing-size280);
 }
 
 .ai-customization-list-widget .list-search-container,
@@ -300,7 +447,7 @@
 .ai-customization-list-widget .list-container {
 	flex: 1;
 	min-height: 0;
-	overflow: auto;
+	overflow: hidden;
 }
 
 .ai-customization-list-widget .list-empty-message {
@@ -326,13 +473,13 @@
 .ai-customization-list-widget .list-empty-state .empty-state-text,
 .ai-customization-management-editor .tools-list-widget .list-empty-state .empty-state-text {
 	font-size: 16px;
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-foreground);
 }
 
 .ai-customization-list-widget .list-empty-state .empty-state-subtext,
 .ai-customization-management-editor .tools-list-widget .list-empty-state .empty-state-subtext {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-descriptionForeground);
 	max-width: 250px;
 	line-height: 1.4;
@@ -342,6 +489,20 @@
 	margin-top: 16px;
 }
 
+/* Sessions empty state */
+.agent-sessions-workbench .ai-customization-list-widget .list-empty-state .empty-state-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+}
+
+.agent-sessions-workbench .ai-customization-list-widget .list-empty-state .empty-state-header > .empty-state-icon {
+	font-size: 16px;
+	margin-bottom: 0;
+	flex-shrink: 0;
+}
+
 /* Group header styling */
 .ai-customization-group-header {
 	display: flex;
@@ -370,7 +531,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 12px;
+	font-size: var(--vscode-codiconFontSize-compact);
 	opacity: 0.7;
 	order: 10;
 	margin-left: auto;
@@ -388,9 +549,10 @@
 	min-width: 0;
 }
 
+/* No text-transform: these labels are localized strings that are already cased correctly, and
+per-word capitalization does not survive translation. */
 .ai-customization-group-header .group-label {
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
-	text-transform: capitalize;
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -399,8 +561,8 @@
 
 .ai-customization-group-header .group-count {
 	flex-shrink: 0;
-	font-size: var(--vscode-agents-fontSize-label2);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-label2);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-descriptionForeground);
 	text-align: right;
 	margin-top: 2px;
@@ -490,7 +652,7 @@
 /* Shared inline badge style — used by MCP "Bridged" badge and item badges */
 .inline-badge {
 	flex-shrink: 0;
-	font-size: var(--vscode-agents-fontSize-label3);
+	font-size: var(--vscode-fontSize-label3);
 	padding: 0 4px;
 	border-radius: 3px;
 	color: var(--vscode-descriptionForeground);
@@ -545,7 +707,7 @@
 }
 
 .ai-customization-list-item .item-name {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -553,7 +715,7 @@
 }
 
 .ai-customization-list-item .item-description {
-	font-size: var(--vscode-agents-fontSize-body2);
+	font-size: var(--vscode-fontSize-body2);
 	color: var(--vscode-descriptionForeground);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -563,7 +725,7 @@
 
 .ai-customization-list-item .item-description.is-filename {
 	font-family: monospace;
-	font-size: var(--vscode-agents-fontSize-label3);
+	font-size: var(--vscode-fontSize-label3);
 	opacity: 0.7;
 }
 
@@ -620,8 +782,8 @@
 .ai-customization-list-widget .section-title-header .section-title,
 .mcp-list-widget .section-title-header .section-title,
 .ai-customization-management-editor .tools-list-widget .section-title-header .section-title {
-	font-size: var(--vscode-agents-fontSize-heading2);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-heading2);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	margin: 0;
 	color: var(--vscode-foreground);
 }
@@ -629,21 +791,16 @@
 .ai-customization-list-widget .section-title-header .section-title-description,
 .mcp-list-widget .section-title-header .section-title-description,
 .ai-customization-management-editor .tools-list-widget .section-title-header .section-title-description {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	line-height: 1.45;
 	color: var(--vscode-descriptionForeground);
 	margin: 0 0 8px 0;
-	/* Reserve space for ~2 lines so the header height is stable across sections. */
-	/* Rounded up to a whole pixel so naturally-wrapped 2-line descriptions and */
-	/* shorter 1-line descriptions render at the same height instead of differing */
-	/* by a sub-pixel rounding. */
-	min-height: 38px;
 }
 
 .ai-customization-list-widget .section-title-header .section-title-link,
 .mcp-list-widget .section-title-header .section-title-link,
 .ai-customization-management-editor .tools-list-widget .section-title-header .section-title-link {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	/* Match the description's line-height so the link's inline-flex line-box */
 	/* does not change the total header height between sections. */
 	line-height: 1.45;
@@ -676,13 +833,13 @@
 }
 
 .ai-customization-list-widget .section-footer .section-footer-description {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-descriptionForeground);
 	margin: 0 0 8px 0;
 }
 
 .ai-customization-list-widget .section-footer .section-footer-link {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-textLink-foreground);
 	text-decoration: none;
 	cursor: pointer;
@@ -748,8 +905,8 @@
 }
 
 .ai-customization-overview .overview-section .section-label {
-	font-size: var(--vscode-agents-fontSize-label1);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-label1);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-foreground);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -761,7 +918,7 @@
 .ai-customization-overview .overview-section .section-count {
 	flex-shrink: 0;
 	font-size: 9px;
-	font-weight: 500;
+	font-weight: var(--vscode-fontWeight-semiBold);
 	padding: 1px 5px;
 	background-color: var(--vscode-list-inactiveSelectionBackground);
 	color: var(--vscode-list-inactiveSelectionForeground, var(--vscode-foreground));
@@ -772,15 +929,16 @@
 
 /* Content container visibility */
 .ai-customization-management-editor .prompts-content-container,
+.ai-customization-management-editor .prompt-migration-content-container,
 .ai-customization-management-editor .mcp-content-container,
 .ai-customization-management-editor .plugin-content-container,
 .ai-customization-management-editor .models-content-container,
-.ai-customization-management-editor .tools-content-container,
-.ai-customization-management-editor .automations-content-container {
+.ai-customization-management-editor .tools-content-container {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	padding: 40px 40px 16px;
+	padding-block: var(--vscode-spacing-size400) var(--vscode-spacing-size160);
+	padding-inline: var(--vscode-spacing-size400);
 	background: var(--vscode-agentsPanel-background);
 	border: 1px solid var(--vscode-agentsPanel-border);
 	border-radius: 6px;
@@ -788,384 +946,1298 @@
 	box-sizing: border-box;
 }
 
-/* Tools section list widget */
-.ai-customization-management-editor .tools-list-widget {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	overflow: hidden;
+.ai-customization-management-editor .prompts-content-container,
+.ai-customization-management-editor .prompt-migration-content-container,
+.ai-customization-management-editor .tools-content-container {
+	padding-inline: var(--vscode-spacing-sizeNone);
+}
+
+/* The scroll hosts reach the pane edge while their content retains the panel inset. */
+.ai-customization-management-editor .prompts-content-container > .ai-customization-list-widget.plugin-list-widget > .section-title-header,
+.ai-customization-management-editor .prompts-content-container > .ai-customization-list-widget.plugin-list-widget > .list-search-and-button-container,
+.ai-customization-management-editor .prompts-content-container > .ai-customization-list-widget.plugin-list-widget .plugin-card-scroll,
+.ai-customization-management-editor .prompt-migration-content-container > .section-title-header,
+.ai-customization-management-editor .prompt-migration-content-container > .customization-migration-banner,
+.ai-customization-management-editor .prompt-migration-content-container > .prompt-migration-footer,
+.ai-customization-management-editor .prompt-migration-list,
+.ai-customization-management-editor .tools-content-container > .tools-list-widget > .section-title-header,
+.ai-customization-management-editor .tools-content-container > .tools-list-widget > .tools-list-search-and-button-container,
+.ai-customization-management-editor .tools-list-tree {
+	width: min(calc(100% - var(--vscode-spacing-size400) - var(--vscode-spacing-size400)), 840px);
+	margin-inline: auto;
 }
 
-.ai-customization-management-editor .tools-list-search-and-button-container {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex: none;
+.ai-customization-management-editor .tools-content-container > .tools-list-widget > .tools-gallery-container {
+	width: min(calc(100% - var(--vscode-spacing-size400) - var(--vscode-spacing-size400) - var(--vscode-spacing-size40)), 840px);
+	margin-inline: auto;
+	box-sizing: border-box;
 }
 
-.ai-customization-management-editor .tools-list-search-container {
-	flex: 1;
+.ai-customization-management-editor .prompts-content-container > .ai-customization-list-widget.plugin-list-widget > .plugin-card-scrollable {
+	max-width: none;
 }
 
-.ai-customization-management-editor .tools-list-search-container .monaco-inputbox {
+.ai-customization-management-editor .prompt-migration-list-scrollable {
+	position: relative;
+	flex: 1;
+	min-height: 0;
 	width: 100%;
 }
 
-.ai-customization-management-editor .tools-list-browse-button-container {
+.ai-customization-management-editor .prompt-migration-list-scrollable > .prompt-migration-scroll-container {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .prompt-migration-footer {
 	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--vscode-spacing-size80);
+	padding-top: var(--vscode-spacing-size120);
+	border-top: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
 }
 
-.ai-customization-management-editor .tools-list-browse-button-container .monaco-button {
-	white-space: nowrap;
+.ai-customization-management-editor .prompt-migration-selected-count {
+	font-size: var(--vscode-agents-fontSize-body2);
+	color: var(--vscode-descriptionForeground);
 }
 
-/* Marketplace browse (gallery) list */
-.ai-customization-management-editor .tools-gallery-container {
+.ai-customization-management-editor .prompt-migration-settings-item {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size80);
+	min-height: 56px;
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120);
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .prompt-migration-settings-item-text {
 	display: flex;
 	flex-direction: column;
-	flex: 1;
-	min-height: 0;
+	gap: var(--vscode-spacing-size20);
+	min-width: 0;
+	cursor: pointer;
 }
 
-.ai-customization-management-editor .tools-gallery-list {
-	flex: 1;
-	min-height: 0;
+.ai-customization-management-editor .prompt-migration-settings-item-label {
+	color: var(--vscode-foreground);
 }
 
-/* Shared gallery row used by the tools, MCP server and plugin marketplace lists. See galleryItemRenderer.ts */
-.ai-customization-management-editor .gallery-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 12px;
-	box-sizing: border-box;
-	border-radius: 4px;
-	cursor: default;
+.ai-customization-management-editor .prompt-migration-settings-item-description {
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-body2);
 }
 
-.ai-customization-management-editor .gallery-item:hover {
-	background-color: var(--vscode-list-hoverBackground);
+.ai-customization-management-editor .prompt-migration-settings-item.disabled .prompt-migration-settings-item-text {
+	cursor: default;
+	opacity: 0.6;
 }
 
-.ai-customization-management-editor .gallery-item-details {
+.ai-customization-management-editor .prompt-migration-state {
 	display: flex;
 	flex-direction: column;
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
+	align-items: flex-start;
+	gap: var(--vscode-spacing-size60);
+	margin-top: var(--vscode-spacing-size120);
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
+	border-radius: var(--vscode-cornerRadius-medium);
 }
 
-.ai-customization-management-editor .gallery-item-name {
+.ai-customization-management-editor .prompt-migration-state-title {
+	color: var(--vscode-foreground);
 	font-size: var(--vscode-agents-fontSize-body1);
 	font-weight: var(--vscode-agents-fontWeight-semiBold);
-	line-height: 18px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
-.ai-customization-management-editor .gallery-item-description,
-.ai-customization-management-editor .gallery-item-publisher {
-	font-size: var(--vscode-agents-fontSize-body2);
+.ai-customization-management-editor .prompt-migration-state-description {
 	color: var(--vscode-descriptionForeground);
-	line-height: 16px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	font-size: var(--vscode-agents-fontSize-body2);
 }
 
-.ai-customization-management-editor .gallery-item-action {
-	flex-shrink: 0;
+.ai-customization-management-editor .prompt-migration-state .monaco-button {
+	width: auto;
+	margin-top: var(--vscode-spacing-size40);
 }
 
-.ai-customization-management-editor .gallery-item-action .monaco-button {
-	white-space: nowrap;
-	font-size: var(--vscode-agents-fontSize-body2);
-	padding: 2px 10px;
+.ai-customization-management-editor .prompt-migration-footer .monaco-button {
+	width: auto;
 }
 
-.ai-customization-management-editor .gallery-item-action .monaco-button:focus-visible {
-	outline-offset: -1px;
+.ai-customization-management-editor .prompt-migration-content-container .section-title-header {
+	margin-bottom: var(--vscode-spacing-size80);
 }
 
-/* DomScrollableElement wrapper around the tool tree; takes remaining height for the overlay scrollbar. */
-.ai-customization-management-editor .tools-list-tree-scrollable {
-	position: relative;
-	flex: 1;
-	min-height: 0;
+.ai-customization-management-editor .prompt-migration-content-container .section-title-header .section-title-row {
+	margin-bottom: 0;
 }
 
-/* The scrolled element: bound it to the wrapper so clientHeight < scrollHeight when content overflows. */
-.ai-customization-management-editor .tools-list-tree {
-	position: absolute;
-	inset: 0;
-	overflow: hidden;
+.ai-customization-management-editor .customization-migration-banner {
+	flex-shrink: 0;
+	margin: 0 0 var(--vscode-spacing-size240);
+	padding: 0;
+	background: transparent;
+	border: 0;
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .customization-migration-banner-content {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--vscode-spacing-size80);
+	min-width: 0;
 }
 
-/* Top-level tool-set row */
-.ai-customization-management-editor .tools-list-setrow {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 6px 12px;
-	border-radius: 4px;
-	outline-offset: -1px;
+.ai-customization-management-editor .customization-migration-banner-title {
+	margin: 0;
+	font-size: var(--vscode-fontSize-body1);
+	font-weight: var(--vscode-fontWeight-semiBold);
+	color: var(--vscode-foreground);
 }
 
-.ai-customization-management-editor .tools-list-setrow:hover,
+.ai-customization-management-editor .customization-migration-banner-message {
+	margin: 0;
+	font-size: var(--vscode-fontSize-body1);
+	line-height: 1.45;
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-management-editor .customization-migration-banner-message.rendered-markdown p {
+	margin: 0;
+}
+
+.ai-customization-management-editor .customization-migration-banner-message.rendered-markdown a {
+	color: var(--vscode-textLink-foreground);
+}
+
+.ai-customization-management-editor .customization-migration-banner-message.rendered-markdown a:hover,
+.ai-customization-management-editor .customization-migration-banner-message.rendered-markdown a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+.ai-customization-management-editor .customization-migration-banner-consequence {
+	margin: 0;
+	font-size: var(--vscode-fontSize-body2);
+	line-height: 1.45;
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .migration-learn-more-link {
+	align-self: flex-start;
+	margin-top: 0;
+}
+
+.ai-customization-management-editor .customization-migration-banner .section-title-link {
+	color: var(--vscode-textLink-foreground);
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.ai-customization-management-editor .customization-migration-banner .section-title-link:hover,
+.ai-customization-management-editor .customization-migration-banner .section-title-link:active {
+	color: var(--vscode-textLink-activeForeground);
+	text-decoration: underline;
+}
+
+.ai-customization-management-editor .customization-migration-page-destinations {
+	margin-top: var(--vscode-spacing-size120);
+}
+
+.ai-customization-management-editor .prompt-migration-list {
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	gap: var(--vscode-spacing-size100);
+	padding: 0;
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .prompt-migration-group {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+}
+
+.ai-customization-management-editor .prompt-migration-group-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--vscode-spacing-size120);
+	margin-bottom: var(--vscode-spacing-size80);
+	padding: 0;
+	background: transparent;
+}
+
+.ai-customization-management-editor .prompt-migration-group-heading {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size60);
+	min-width: 0;
+}
+
+.ai-customization-management-editor .customization-section-toggle {
+	flex: 0 0 auto;
+	width: var(--vscode-spacing-size160);
+	height: var(--vscode-spacing-size160);
+	padding: 0;
+	border: 0;
+	border-radius: var(--vscode-cornerRadius-small);
+	background: transparent;
+	color: var(--vscode-icon-foreground);
+	line-height: var(--vscode-spacing-size160);
+	cursor: pointer;
+}
+
+.ai-customization-management-editor .customization-section-toggle:hover {
+	background: var(--vscode-toolbar-hoverBackground);
+}
+
+.ai-customization-management-editor .customization-section-toggle:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: calc(-1 * var(--vscode-strokeThickness));
+}
+
+.ai-customization-management-editor .distributed-section-layout.virtualized-section-layout-overflow {
+	padding-right: var(--vscode-spacing-size100);
+}
+
+.vscode-high-contrast .ai-customization-management-editor .customization-section-toggle:focus-visible {
+	outline-color: var(--vscode-contrastActiveBorder);
+}
+
+.ai-customization-management-editor .prompt-migration-group-title {
+	margin: 0;
+	font-size: var(--vscode-agents-fontSize-heading3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-management-editor .prompt-migration-group-count {
+	font-size: var(--vscode-agents-fontSize-label2);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .prompt-migration-group-controls {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size40);
+	flex: 0 0 auto;
+}
+
+.ai-customization-management-editor .prompt-migration-group-controls .monaco-checkbox {
+	margin-right: 0;
+}
+
+.ai-customization-management-editor .prompt-migration-select-all-label {
+	padding-inline-end: var(--vscode-spacing-size20);
+	font-size: var(--vscode-agents-fontSize-body2);
+	color: var(--vscode-descriptionForeground);
+	cursor: pointer;
+}
+
+.ai-customization-management-editor .prompt-migration-group-checkbox {
+	margin: 0;
+}
+
+.ai-customization-management-editor .prompt-migration-group-items {
+	display: flex;
+	flex-direction: column;
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
+	border-radius: var(--vscode-cornerRadius-medium);
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .prompt-migration-group-items.virtualized-section-list {
+	display: block;
+}
+
+.ai-customization-management-editor .prompt-migration-group-items.virtualized-section-list .monaco-list-row {
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .prompt-migration-group-empty {
+	padding: var(--vscode-spacing-size160);
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
+}
+
+.ai-customization-management-editor .prompt-migration-item {
+	gap: 8px;
+	cursor: default;
+	min-height: 56px;
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120);
+	border-radius: 0;
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .prompt-migration-group-items.virtualized-section-list .monaco-list-row:not(:first-child) {
+	box-shadow: inset 0 var(--vscode-strokeThickness) var(--vscode-widget-border);
+}
+
+.ai-customization-management-editor .prompt-migration-checkbox {
+	flex-shrink: 0;
+	margin: 0;
+}
+
+.ai-customization-management-editor .prompt-migration-item-name {
+	color: inherit;
+}
+
+.ai-customization-management-editor .prompt-migration-item .item-left {
+	gap: 8px;
+}
+
+.ai-customization-management-editor .prompt-migration-open-button.monaco-text-button {
+	flex: 1;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+	min-width: 0;
+	width: 100%;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+	border-radius: var(--vscode-cornerRadius-small);
+}
+
+.ai-customization-management-editor .prompt-migration-item .icon-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	border: none;
+	border-radius: var(--vscode-cornerRadius-small);
+	background: transparent;
+	color: var(--vscode-icon-foreground);
+	cursor: pointer;
+	font-size: 16px;
+}
+
+.ai-customization-management-editor .prompt-migration-more-action {
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .prompt-migration-item .icon-button:hover {
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.ai-customization-management-editor .prompt-migration-item .icon-button:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .prompt-migration-empty {
+	margin: 0;
+	padding: 8px 12px;
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-fontSize-body2);
+}
+
+.ai-customization-management-editor .prompt-migration-button {
+	min-width: 96px;
+}
+
+/* Tools section list widget */
+.ai-customization-management-editor .tools-list-widget {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .tools-list-search-and-button-container {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex: none;
+}
+
+.ai-customization-management-editor .tools-list-search-container {
+	flex: 1;
+}
+
+.ai-customization-management-editor .tools-list-search-container .monaco-inputbox {
+	width: 100%;
+}
+
+.ai-customization-management-editor .tools-list-browse-button-container {
+	flex-shrink: 0;
+}
+
+.ai-customization-management-editor .tools-list-browse-button-container .monaco-button {
+	white-space: nowrap;
+}
+
+/* Marketplace browse (gallery) list */
+.ai-customization-management-editor .tools-gallery-container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.ai-customization-management-editor .tools-gallery-list {
+	flex: 1;
+	min-height: 0;
+}
+
+/* Shared gallery row used by the tools, MCP server and plugin marketplace lists. See galleryItemRenderer.ts */
+.ai-customization-management-editor .gallery-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	box-sizing: border-box;
+	border-radius: 4px;
+	cursor: default;
+}
+
+.ai-customization-management-editor .gallery-item:hover {
+	background-color: var(--vscode-list-hoverBackground);
+}
+
+.ai-customization-management-editor .gallery-item-details {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .gallery-item-name {
+	font-size: var(--vscode-fontSize-body1);
+	font-weight: var(--vscode-fontWeight-semiBold);
+	line-height: 18px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ai-customization-management-editor .gallery-item-description,
+.ai-customization-management-editor .gallery-item-publisher {
+	font-size: var(--vscode-fontSize-body2);
+	color: var(--vscode-descriptionForeground);
+	line-height: 16px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ai-customization-management-editor .gallery-item-action {
+	flex-shrink: 0;
+}
+
+.ai-customization-management-editor .gallery-item-action .monaco-button {
+	white-space: nowrap;
+	font-size: var(--vscode-fontSize-body2);
+	padding: 2px 10px;
+}
+
+.ai-customization-management-editor .gallery-item-action .monaco-button:focus-visible {
+	outline-offset: -1px;
+}
+
+/* DomScrollableElement wrapper around the tool tree; takes remaining height for the overlay scrollbar. */
+.ai-customization-management-editor .tools-list-tree-scrollable {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+	width: 100%;
+}
+
+.ai-customization-management-editor .tools-list-tree-scrollable > .tools-list-scroll-container {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .tools-list-tree {
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size100);
+	padding: 0 0 var(--vscode-spacing-size200);
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .tools-inventory-section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size100);
+}
+
+.ai-customization-management-editor .tools-inventory-section-header {
+	display: flex;
+	align-items: flex-end;
+	gap: var(--vscode-spacing-size80);
+	min-width: 0;
+}
+
+.ai-customization-management-editor .tools-inventory-section-text {
+	flex: 1;
+	min-width: 0;
+}
+
+.ai-customization-management-editor .tools-inventory-section-heading-row {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size60);
+}
+
+.ai-customization-management-editor .tools-inventory-section-title,
+.ai-customization-management-editor .tools-marketplace-title {
+	margin: 0;
+	font-size: var(--vscode-agents-fontSize-heading3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-management-editor .tools-inventory-section-count {
+	min-width: var(--vscode-spacing-size160);
+	padding: 0 var(--vscode-spacing-size40);
+	border-radius: var(--vscode-cornerRadius-circle);
+	background: var(--vscode-toolbar-hoverBackground);
+	font-size: var(--vscode-agents-fontSize-label3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	color: var(--vscode-descriptionForeground);
+	line-height: 16px;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .tools-inventory-section-description,
+.ai-customization-management-editor .tools-marketplace-description {
+	margin: var(--vscode-spacing-size20) 0 0;
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .tools-inventory-section-actions {
+	flex-shrink: 0;
+}
+
+.ai-customization-management-editor .tools-inventory-section-actions .monaco-button {
+	width: auto;
+}
+
+.ai-customization-management-editor .tools-list-widget.narrow-layout .tools-inventory-section-header {
+	align-items: stretch;
+	flex-wrap: wrap;
+}
+
+.ai-customization-management-editor .tools-list-widget.narrow-layout .tools-inventory-section-actions {
+	width: 100%;
+}
+
+.ai-customization-management-editor .tools-list-widget.narrow-layout .tools-inventory-section-actions .monaco-button {
+	width: 100%;
+}
+
+.ai-customization-management-editor .tools-list-widget.narrow-layout .tools-list-toolrow {
+	padding-inline-start: var(--vscode-spacing-size240);
+}
+
+.ai-customization-management-editor .tools-inventory-list {
+	display: flex;
+	flex-direction: column;
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
+	border-radius: var(--vscode-cornerRadius-medium);
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .tools-inventory-list .plugin-inventory-empty {
+	padding: var(--vscode-spacing-size160);
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
+}
+
+.ai-customization-management-editor .tools-marketplace-header {
+	flex-shrink: 0;
+	margin-bottom: var(--vscode-spacing-size120);
+}
+
+/* Top-level tool-set row */
+.ai-customization-management-editor .tools-list-setrow {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120);
+	border-radius: 0;
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .tools-list-setrow:hover,
 .ai-customization-management-editor .tools-list-toolrow:hover {
 	background: var(--vscode-list-hoverBackground);
 }
 
-/* Match the other customization lists' focus ring: :focus-within for inner checkbox/chevron, :focus for a row click. */
-.ai-customization-management-editor .tools-list-setrow:focus,
-.ai-customization-management-editor .tools-list-setrow:focus-within,
-.ai-customization-management-editor .tools-list-toolrow:focus,
-.ai-customization-management-editor .tools-list-toolrow:focus-within {
-	outline: 1px solid var(--vscode-list-focusOutline);
-	background: var(--vscode-list-focusBackground, var(--vscode-list-hoverBackground));
+/* A row-to-row divider between every adjacent row (set-to-set, set-to-tool, tool-to-tool, tool-to-set). */
+.ai-customization-management-editor .tools-inventory-list .monaco-list-row:not(:first-child) {
+	box-shadow: inset 0 var(--vscode-strokeThickness) var(--vscode-widget-border);
+}
+
+.ai-customization-management-editor .tools-list-chevron {
+	flex: none;
+	width: 16px;
+	height: 16px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--vscode-codiconFontSize-compact);
+	color: var(--vscode-foreground);
+	opacity: 0.7;
+	cursor: pointer;
+	margin-left: auto;
+}
+
+/* Tool row: visually indented under its tool set via its own `padding-inline-start` (no DOM nesting). */
+.ai-customization-management-editor .tools-list-toolrow {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: var(--vscode-spacing-size60) var(--vscode-spacing-size120) var(--vscode-spacing-size60) var(--vscode-spacing-size400);
+	border-radius: 0;
+	cursor: pointer;
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .tools-list-more-action {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--vscode-spacing-size240);
+	height: var(--vscode-spacing-size240);
+	padding: 0;
+	border: none;
+	border-radius: var(--vscode-cornerRadius-small);
+	background: transparent;
+	color: var(--vscode-descriptionForeground);
+	cursor: pointer;
+}
+
+.ai-customization-management-editor .tools-list-more-action:hover {
+	background: var(--vscode-toolbar-hoverBackground);
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-management-editor .tools-list-more-action:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .tools-list-always-available {
+	flex: 0 0 auto;
+	font-size: var(--vscode-agents-fontSize-label2);
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .tools-list-toolrow.readonly {
+	cursor: default;
+}
+
+.ai-customization-management-editor .tools-list-row-main {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+	flex: 1;
+	min-width: 0;
+	cursor: pointer;
+}
+
+.ai-customization-management-editor .tools-list-row-text {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+}
+
+.ai-customization-management-editor .tools-list-row-label {
+	font-size: var(--vscode-fontSize-body1);
+	line-height: 18px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ai-customization-management-editor .tools-list-setrow .tools-list-row-label {
+	font-weight: var(--vscode-fontWeight-semiBold);
+}
+
+/* Search match highlighting in tool set / tool names */
+.ai-customization-management-editor .tools-list-row-label .highlight {
+	font-weight: var(--vscode-fontWeight-semiBold);
+	color: var(--vscode-list-highlightForeground);
+}
+
+.ai-customization-management-editor .tools-list-row-subtext {
+	font-size: var(--vscode-fontSize-body2);
+	line-height: 14px;
+	color: var(--vscode-descriptionForeground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Enabled/total tool count shown at the right of a tool-set row */
+.ai-customization-management-editor .tools-list-row-count {
+	flex: none;
+	font-size: var(--vscode-fontSize-body2);
+	color: var(--vscode-descriptionForeground);
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+/* Embedded MCP server detail view */
+.ai-customization-management-editor .mcp-detail-container {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .mcp-detail-editor-container {
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+	min-height: 0;
+}
+
+/* Embedded plugin detail view */
+.ai-customization-management-editor .plugin-detail-container,
+.ai-customization-management-editor .tools-detail-container {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	padding: var(--vscode-spacing-size160);
+	background: var(--vscode-agentsPanel-background);
+	border: var(--vscode-strokeThickness) solid var(--vscode-agentsPanel-border);
+	border-radius: var(--vscode-cornerRadius-medium);
+	overflow: hidden;
+	box-sizing: border-box;
+}
+
+/* Inline back button with the embedded detail header */
+.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail,
+.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail,
+.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail {
+	padding: 0;
+}
+
+.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail .embedded-detail-header,
+.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail .embedded-detail-header,
+.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail .embedded-detail-header {
+	align-items: center;
+}
+
+.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty),
+.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty),
+.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty) {
+	display: flex;
+	align-items: center;
+	margin-inline-end: var(--vscode-spacing-size200);
+}
+
+.ai-customization-management-editor .plugin-detail-editor-container,
+.ai-customization-management-editor .tools-detail-editor-container {
+	flex: 1;
+	overflow: auto;
+	min-height: 0;
+	display: flex;
+	justify-content: center;
+}
+
+/* Shared embedded detail component foundation */
+.ai-customization-management-editor .ai-customization-embedded-detail {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size200);
+	padding: var(--vscode-spacing-size160) var(--vscode-spacing-size240) var(--vscode-spacing-size240);
+	max-width: 720px;
+	width: 100%;
+	min-width: 0;
+	box-sizing: border-box;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail.embedded-mcp-detail {
+	flex: 1;
+	gap: 0;
+	max-width: none;
+	min-height: 0;
+	padding: 0;
+}
+
+.ai-customization-management-editor .embedded-mcp-detail.is-empty .mcp-detail-header {
+	display: none;
+}
+
+.ai-customization-management-editor .mcp-detail-container .embedded-mcp-detail .embedded-detail-leading-slot:not(:empty) {
+	display: contents;
+	margin: 0;
+}
+
+.ai-customization-management-editor .embedded-mcp-detail .mcp-detail-definition-editor {
+	flex: 1;
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .embedded-mcp-detail .mcp-detail-definition-empty {
+	margin: var(--vscode-spacing-size80) calc(var(--vscode-spacing-size160) - var(--vscode-spacing-size40)) var(--vscode-spacing-size160);
+	padding-inline: var(--vscode-spacing-size40);
+	border-radius: var(--vscode-cornerRadius-small);
+}
+
+.ai-customization-management-editor .embedded-mcp-detail .embedded-detail-leading-slot:empty {
+	display: none;
+}
+
+.ai-customization-management-editor .mcp-detail-container .mcp-detail-header {
+	gap: var(--vscode-spacing-size80);
+	padding-inline: var(--vscode-spacing-size160);
+}
+
+.ai-customization-management-editor .mcp-detail-container .editor-back-button {
+	width: var(--vscode-spacing-size280);
+	height: var(--vscode-spacing-size280);
+}
+
+.ai-customization-management-editor .mcp-detail-container .mcp-detail-definition-empty {
+	margin-inline-start: calc(var(--vscode-spacing-size160) + var(--vscode-spacing-size280) + var(--vscode-spacing-size80) - var(--vscode-spacing-size40));
+}
+
+/* The tools detail lists many short tool descriptions, so let it use the full editor width. */
+.ai-customization-management-editor .ai-customization-embedded-detail.embedded-tool-detail {
+	max-width: none;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-header,
+.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-description,
+.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-tools {
+	display: none;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-header {
+	display: flex;
+	align-items: flex-start;
+	gap: 0;
+	min-width: 0;
+	margin-bottom: var(--vscode-spacing-size40);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-icon {
+	flex: 0 0 auto;
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-icon.codicon::before {
+	font-size: 28px;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-header-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	gap: var(--vscode-spacing-size60);
+	margin-left: auto;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions .monaco-button {
+	width: auto;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions .monaco-button-dropdown:focus-within {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+	border-radius: var(--vscode-cornerRadius-small);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions .monaco-button-dropdown > .monaco-button:focus {
+	outline: 0;
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-header {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	row-gap: var(--vscode-spacing-size80);
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-leading-slot {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-leading-slot:empty {
+	display: none;
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-header-text {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-leading-slot:empty + .embedded-detail-header-text {
+	grid-column: 1 / -1;
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-title-actions {
+	grid-column: 2;
+	grid-row: 2;
+	justify-content: flex-start;
+	margin-left: 0;
+}
+
+.ai-customization-management-editor .embedded-plugin-detail.narrow-layout .embedded-detail-leading-slot:empty ~ .embedded-detail-title-actions {
+	grid-column: 1 / -1;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-name-row {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size60);
+	min-width: 0;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-status-badge {
+	flex-shrink: 0;
+	margin-top: 1px;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions .embedded-detail-disable-button.monaco-button {
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions .embedded-detail-uninstall-button.monaco-button {
+	color: var(--vscode-errorForeground);
+	border-color: transparent;
+	background: transparent;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-title-actions .embedded-detail-uninstall-button.monaco-button:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-name {
+	margin: 0;
+	font-size: var(--vscode-fontSize-heading2);
+	line-height: 22px;
+	font-weight: var(--vscode-fontWeight-semiBold);
+	word-break: break-word;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-scope {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-label1);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-scope .codicon {
+	font-size: var(--vscode-codiconFontSize-compact);
 }
 
-.ai-customization-management-editor .tools-list-chevron {
-	flex: none;
-	width: 16px;
-	height: 16px;
-	display: inline-flex;
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-badges {
+	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	justify-content: center;
-	font-size: 12px;
+	gap: var(--vscode-spacing-size40);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-description {
 	color: var(--vscode-foreground);
-	opacity: 0.7;
-	cursor: pointer;
-	margin-left: auto;
+	font-size: var(--vscode-fontSize-body1);
+	line-height: 1.4;
+	white-space: pre-wrap;
+	word-break: break-word;
+	padding-inline-start: 32px;
+	margin-bottom: var(--vscode-spacing-size40);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail.embedded-plugin-detail .embedded-detail-description,
+.ai-customization-management-editor .ai-customization-embedded-detail.embedded-plugin-detail .embedded-detail-section {
+	padding-inline-start: 0;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail.embedded-plugin-detail .embedded-detail-facts {
+	padding-inline-start: 0;
+	margin-bottom: 0;
 }
 
-/* Child tool row (indented under the tool set) */
-.ai-customization-management-editor .tools-list-children {
+.ai-customization-management-editor .embedded-plugin-detail .plugin-detail-source-facts {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: var(--vscode-spacing-size40);
 }
 
-.ai-customization-management-editor .tools-list-toolrow {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 12px 4px 40px;
-	border-radius: 4px;
-	cursor: pointer;
-	outline-offset: -1px;
+.ai-customization-management-editor .embedded-plugin-detail .plugin-detail-readme-message {
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
 }
 
-.ai-customization-management-editor .tools-list-toolrow.readonly {
-	cursor: default;
+.ai-customization-management-editor .embedded-plugin-detail .plugin-detail-readme > .plugin-detail-contribution-group-title {
+	font-weight: var(--vscode-fontWeight-semiBold);
 }
 
-.ai-customization-management-editor .tools-list-row-main {
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-facts {
 	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-	flex: 1;
+	flex-direction: column;
+	gap: 0;
+	padding-inline-start: 32px;
+	margin-bottom: var(--vscode-spacing-size80);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-row {
+	display: grid;
+	grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
+	gap: var(--vscode-spacing-size120);
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120);
 	min-width: 0;
-	cursor: pointer;
 }
 
-.ai-customization-management-editor .tools-list-row-text {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-row:not(:last-child) {
+	box-shadow: inset 0 calc(-1 * var(--vscode-strokeThickness)) var(--vscode-widget-border);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-label,
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-value {
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
 	min-width: 0;
 }
 
-.ai-customization-management-editor .tools-list-row-label {
-	font-size: var(--vscode-agents-fontSize-body1);
-	line-height: 18px;
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-label {
+	color: var(--vscode-descriptionForeground);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-value {
+	color: var(--vscode-foreground);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.ai-customization-management-editor .tools-list-setrow .tools-list-row-label {
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-value.has-actions {
+	overflow: visible;
 }
 
-/* Search match highlighting in tool set / tool names */
-.ai-customization-management-editor .tools-list-row-label .highlight {
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
-	color: var(--vscode-list-highlightForeground);
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-link {
+	color: var(--vscode-textLink-foreground);
+	text-decoration: none;
 }
 
-.ai-customization-management-editor .tools-list-row-subtext {
-	font-size: var(--vscode-agents-fontSize-body2);
-	line-height: 14px;
-	color: var(--vscode-descriptionForeground);
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-fact-link:hover {
+	color: var(--vscode-textLink-activeForeground);
+	text-decoration: underline;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-location-value {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size40);
+	min-width: 0;
+	max-width: 100%;
+	line-height: 20px;
+	padding: var(--vscode-spacing-size20);
+	margin: calc(-1 * var(--vscode-spacing-size20));
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-location-label {
+	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-/* Enabled/total tool count shown at the right of a tool-set row */
-.ai-customization-management-editor .tools-list-row-count {
-	flex: none;
-	font-size: var(--vscode-agents-fontSize-body2);
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-copy-button.monaco-button {
+	flex-shrink: 0;
+	width: 20px;
+	min-width: 20px;
+	height: 20px;
+	padding: 0;
+	background: transparent;
+	border-color: transparent;
 	color: var(--vscode-descriptionForeground);
-	font-variant-numeric: tabular-nums;
-	white-space: nowrap;
-	cursor: pointer;
 }
 
-/* Embedded MCP server detail view */
-.ai-customization-management-editor .mcp-detail-container {
-	position: relative;
-	height: 100%;
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-copy-button.monaco-button:hover {
+	background: transparent;
+	color: var(--vscode-textLink-activeForeground);
+}
+
+.ai-customization-management-editor .mcp-detail-definition-empty:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-section {
+	padding-inline-start: 32px;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-section-title {
+	margin: 0 0 var(--vscode-spacing-size60) 0;
+	font-size: var(--vscode-agents-fontSize-heading3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 18px;
+	color: var(--vscode-foreground);
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-chip-list {
 	display: flex;
 	flex-direction: column;
-	min-height: 0;
-	padding: 16px;
-	background: var(--vscode-agentsPanel-background);
-	border: 1px solid var(--vscode-agentsPanel-border);
-	border-radius: 6px;
-	overflow: hidden;
-	box-sizing: border-box;
+	gap: 0;
 }
 
-.ai-customization-management-editor .mcp-detail-editor-container {
-	flex: 1;
-	overflow: auto;
-	min-height: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-flat-list {
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
+	border-radius: var(--vscode-cornerRadius-medium);
+	overflow: hidden;
 }
 
-/* Embedded plugin detail view */
-.ai-customization-management-editor .plugin-detail-container,
-.ai-customization-management-editor .tools-detail-container {
-	position: relative;
-	height: 100%;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-section {
 	display: flex;
 	flex-direction: column;
-	min-height: 0;
-	padding: 16px;
-	background: var(--vscode-agentsPanel-background);
-	border: 1px solid var(--vscode-agentsPanel-border);
-	border-radius: 6px;
-	overflow: hidden;
-	box-sizing: border-box;
+	gap: var(--vscode-spacing-size60);
+	min-width: 0;
+	padding: var(--vscode-spacing-size100) var(--vscode-spacing-size120);
 }
 
-/* Inline back button with the embedded detail header */
-.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail,
-.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail,
-.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail {
-	padding: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-section + .plugin-detail-contribution-section {
+	box-shadow: inset 0 var(--vscode-strokeThickness) var(--vscode-widget-border);
 }
 
-.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail .embedded-detail-header,
-.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail .embedded-detail-header,
-.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail .embedded-detail-header {
-	align-items: center;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size60);
+	min-width: 0;
 }
 
-.ai-customization-management-editor .mcp-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty),
-.ai-customization-management-editor .plugin-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty),
-.ai-customization-management-editor .tools-detail-container .ai-customization-embedded-detail .embedded-detail-leading-slot:not(:empty) {
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-group-title {
 	display: flex;
-	align-items: center;
-	margin-inline-end: 4px;
+	align-items: baseline;
+	gap: var(--vscode-spacing-size60);
+	font-size: var(--vscode-agents-fontSize-label1);
+	font-weight: var(--vscode-agents-fontWeight-regular);
+	color: var(--vscode-foreground);
 }
 
-.ai-customization-management-editor .plugin-detail-editor-container,
-.ai-customization-management-editor .tools-detail-editor-container {
-	flex: 1;
-	overflow: auto;
-	min-height: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-title-count {
+	color: var(--vscode-descriptionForeground);
 }
 
-/* Compact embedded detail component (shared by MCP / plugin) */
-.ai-customization-management-editor .ai-customization-embedded-detail {
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-list {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	padding: 16px 24px 24px 24px;
-	max-width: 720px;
-	min-width: 0;
+	gap: var(--vscode-spacing-size60);
 }
 
-/* The tools detail lists many short tool descriptions, so let it use the full editor width. */
-.ai-customization-management-editor .ai-customization-embedded-detail.embedded-tool-detail {
-	max-width: none;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-row {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	gap: var(--vscode-spacing-size20);
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-header,
-.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-description,
-.ai-customization-management-editor .ai-customization-embedded-detail.is-empty .embedded-detail-tools {
-	display: none;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-link {
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: var(--vscode-textLink-foreground);
+	text-align: left;
+	cursor: pointer;
+	font-family: inherit;
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-header {
-	display: flex;
-	align-items: flex-start;
-	gap: 4px;
-	min-width: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-link:hover {
+	color: var(--vscode-textLink-activeForeground);
+	text-decoration: underline;
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-icon {
-	flex: 0 0 auto;
-	width: 32px;
-	height: 32px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--vscode-foreground);
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-link:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: -1px;
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-icon.codicon::before {
-	font-size: 28px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-name {
+	font-size: var(--vscode-agents-fontSize-body1);
+	line-height: 18px;
+	color: var(--vscode-descriptionForeground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-header-text {
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-link.plugin-detail-contribution-name {
+	color: var(--vscode-textLink-foreground);
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-name {
-	margin: 0;
-	font-size: var(--vscode-agents-fontSize-heading2);
-	line-height: 22px;
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
-	word-break: break-word;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-link.plugin-detail-contribution-name:hover {
+	color: var(--vscode-textLink-activeForeground);
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-scope {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-description,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-more,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-empty {
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
 	color: var(--vscode-descriptionForeground);
-	font-size: 12px;
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-scope .codicon {
-	font-size: 12px;
+.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-chip-list > .plugin-detail-contribution-empty {
+	padding: var(--vscode-spacing-size100) var(--vscode-spacing-size120);
 }
 
-.ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-description {
-	color: var(--vscode-foreground);
-	font-size: var(--vscode-agents-fontSize-body1);
-	line-height: 1.4;
-	white-space: pre-wrap;
-	word-break: break-word;
-	padding-inline-start: 32px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-contribution-description {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.vscode-high-contrast .ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-flat-list {
+	border-color: var(--vscode-contrastBorder);
 }
 
 .ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-empty {
 	color: var(--vscode-descriptionForeground);
-	font-size: var(--vscode-agents-fontSize-body1);
-	padding: 8px 0;
+	font-size: var(--vscode-fontSize-body1);
+	padding-block: var(--vscode-spacing-size80);
 }
 
 /* Included tools list (tool extension detail) */
@@ -1178,15 +2250,15 @@
 }
 
 .ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools-heading {
-	font-size: var(--vscode-agents-fontSize-body1);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-body1);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-foreground);
 	margin: 0;
 }
 
 .ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools-message {
 	color: var(--vscode-descriptionForeground);
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 }
 
 .ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tools-list {
@@ -1204,14 +2276,14 @@
 }
 
 .ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tool-name {
-	font-size: var(--vscode-agents-fontSize-body1);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-body1);
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-foreground);
 	word-break: break-word;
 }
 
 .ai-customization-management-editor .ai-customization-embedded-detail .embedded-detail-tool-description {
-	font-size: var(--vscode-agents-fontSize-body2);
+	font-size: var(--vscode-fontSize-body2);
 	color: var(--vscode-descriptionForeground);
 	line-height: 1.4;
 	word-break: break-word;
@@ -1231,14 +2303,14 @@
 }
 
 .ai-customization-management-editor .models-content-container .section-footer-description {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-descriptionForeground);
 	line-height: 1.5;
 	margin: 0 0 8px 0;
 }
 
 .ai-customization-management-editor .models-content-container .section-footer-link {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-textLink-foreground);
 	text-decoration: none;
 	cursor: pointer;
@@ -1264,13 +2336,14 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	min-height: 0;
 	overflow: hidden;
 }
 
 .mcp-list-widget .mcp-list-container {
 	flex: 1;
 	min-height: 0;
-	overflow: auto;
+	overflow: hidden;
 }
 
 /* MCP Empty State */
@@ -1287,12 +2360,12 @@
 
 .mcp-list-widget .mcp-empty-state .empty-text {
 	font-size: 16px;
-	font-weight: 500;
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-foreground);
 }
 
 .mcp-list-widget .mcp-empty-state .empty-subtext {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-descriptionForeground);
 	max-width: 250px;
 	line-height: 1.4;
@@ -1302,6 +2375,20 @@
 	margin-top: 16px;
 }
 
+/* Sessions empty state */
+.agent-sessions-workbench .mcp-empty-state .empty-state-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+}
+
+.agent-sessions-workbench .mcp-empty-state .empty-state-header > .empty-icon {
+	font-size: 16px;
+	margin-bottom: 0;
+	flex-shrink: 0;
+}
+
 /* MCP Disabled (access blocked) state */
 .mcp-list-widget .mcp-disabled-state {
 	display: none;
@@ -1337,12 +2424,12 @@
 
 .mcp-list-widget .mcp-disabled-state .empty-text {
 	font-size: 16px;
-	font-weight: 500;
+	font-weight: var(--vscode-fontWeight-semiBold);
 	color: var(--vscode-foreground);
 }
 
 .mcp-list-widget .mcp-disabled-state .empty-subtext {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	color: var(--vscode-descriptionForeground);
 	max-width: 420px;
 	line-height: 1.5;
@@ -1375,9 +2462,10 @@
 	align-items: center;
 	padding: 6px 8px 6px 30px;
 	cursor: pointer;
-	border-radius: 4px;
+	border-radius: var(--vscode-cornerRadius-small);
 	min-height: 32px;
 	gap: 10px;
+	box-sizing: border-box;
 }
 
 .mcp-server-item:not(.has-detail):not(.builtin) {
@@ -1406,7 +2494,7 @@
 }
 
 .mcp-server-item .mcp-server-name {
-	font-size: var(--vscode-agents-fontSize-body1);
+	font-size: var(--vscode-fontSize-body1);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -1414,7 +2502,7 @@
 }
 
 .mcp-server-item .mcp-server-description {
-	font-size: var(--vscode-agents-fontSize-body2);
+	font-size: var(--vscode-fontSize-body2);
 	color: var(--vscode-descriptionForeground);
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -1422,1430 +2510,1233 @@
 	line-height: 14px;
 }
 
+.mcp-server-item.has-error {
+	align-items: flex-start;
+	padding-top: var(--vscode-spacing-size120);
+	padding-bottom: var(--vscode-spacing-size120);
+}
+
+.mcp-server-item .mcp-server-description.error {
+	color: var(--vscode-errorForeground);
+	margin-top: var(--vscode-spacing-size80);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	overflow: visible;
+	text-overflow: clip;
+}
+
+.mcp-server-item .mcp-server-description.error:not(.expanded) {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	max-height: 3lh;
+	overflow: hidden;
+}
+
+.mcp-server-item .mcp-server-error-toggle.monaco-button {
+	align-self: flex-start;
+	width: auto;
+	min-width: 0;
+	padding: 0;
+	margin-top: var(--vscode-spacing-size40);
+	color: var(--vscode-textLink-foreground);
+	font-size: var(--vscode-fontSize-body2);
+	border: 0;
+	background: transparent;
+}
+
+.mcp-server-item .mcp-server-error-toggle.monaco-button:hover {
+	color: var(--vscode-textLink-activeForeground);
+	text-decoration: underline;
+}
+
+.mcp-server-item .mcp-server-actions {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size40);
+}
+
+.mcp-server-item .mcp-server-sign-in.monaco-button,
+.plugin-list-widget .mcp-installed-home-row .mcp-server-sign-in.monaco-button {
+	min-width: 0;
+	min-height: var(--vscode-spacing-size240);
+	padding: 0 var(--vscode-spacing-size80);
+	font-size: var(--vscode-fontSize-label1);
+	border-radius: var(--vscode-cornerRadius-small);
+}
+
 .mcp-server-item .mcp-server-status {
 	flex-shrink: 0;
-	font-size: var(--vscode-agents-fontSize-label2);
-	padding: 2px 8px;
-	border-radius: 4px;
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	width: var(--vscode-spacing-size240);
+	height: var(--vscode-spacing-size240);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--vscode-codiconFontSize);
 }
 
 .mcp-server-item .mcp-server-status.running {
-	background-color: color-mix(in srgb, var(--vscode-terminal-ansiGreen) 50%, transparent);
-	color: var(--vscode-editor-background);
+	color: var(--vscode-charts-green);
 }
 
 .mcp-server-item .mcp-server-status.starting {
-	background-color: color-mix(in srgb, var(--vscode-terminal-ansiYellow) 50%, transparent);
-	color: var(--vscode-editor-background);
+	color: var(--vscode-progressBar-background, var(--vscode-icon-foreground));
 }
 
 .mcp-server-item .mcp-server-status.auth-required {
-	background-color: color-mix(in srgb, var(--vscode-terminal-ansiYellow) 50%, transparent);
-	color: var(--vscode-editor-background);
+	color: var(--vscode-list-warningForeground, var(--vscode-editorWarning-foreground));
 }
 
-.mcp-server-item .mcp-server-status.error {
-	background-color: color-mix(in srgb, var(--vscode-terminal-ansiRed) 50%, transparent);
-	color: var(--vscode-editor-background);
+.mcp-server-item.disabled {
+	opacity: 0.5;
 }
 
-.mcp-server-item .mcp-server-status.stopped {
-	background-color: color-mix(in srgb, var(--vscode-badge-background) 50%, transparent);
-	color: var(--vscode-badge-foreground);
+.mcp-server-item .mcp-server-status.disabled {
+	color: var(--vscode-disabledForeground);
 }
 
-.mcp-server-item.disabled {
-	opacity: 0.5;
+.plugin-list-widget .plugin-search-header {
+	display: flex;
+	align-items: flex-end;
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120) var(--vscode-spacing-size40);
+	-webkit-user-select: none;
+	user-select: none;
+	pointer-events: none;
 }
 
-.mcp-server-item .mcp-server-status.disabled {
-	background-color: color-mix(in srgb, var(--vscode-badge-background) 50%, transparent);
-	color: var(--vscode-badge-foreground);
+.plugin-list-widget .plugin-search-header.available-to-install {
+	padding-top: var(--vscode-spacing-size160);
 }
 
-/* Button group for Add Server + Browse Marketplace */
-.mcp-list-widget .list-button-group {
+.plugin-list-widget .monaco-list-row.plugin-search-header:hover {
+	background: transparent;
+}
+
+.plugin-list-widget .plugin-search-header-label {
+	font-size: var(--vscode-agents-fontSize-heading3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 18px;
+	color: var(--vscode-foreground);
+}
+
+/* Plugin list item */
+.plugin-list-widget .plugin-list-item {
 	display: flex;
-	gap: 4px;
-	flex-shrink: 0;
+	align-items: center;
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120);
+	border-radius: var(--vscode-cornerRadius-small);
+	gap: var(--vscode-spacing-size120);
+	min-height: 44px;
+	overflow: hidden;
+	box-sizing: border-box;
 }
 
-/* Embedded Editor View */
-.ai-customization-management-editor .editor-content-container {
-	height: 100%;
+.plugin-list-widget .plugin-installed-item:not(.plugin-home-row),
+.plugin-list-widget .plugin-marketplace-item {
+	cursor: pointer;
+}
+
+.plugin-list-widget .plugin-card-grid.plugin-inventory-list {
 	display: flex;
 	flex-direction: column;
-	padding: 0;
-	background: var(--vscode-agentsPanel-background);
-	border: 1px solid var(--vscode-agentsPanel-border);
-	border-radius: 6px;
+	gap: 0;
+	border: var(--vscode-strokeThickness) solid var(--vscode-agentsPanel-border);
+	border-radius: var(--vscode-cornerRadius-medium);
 	overflow: hidden;
+}
+
+.plugin-list-widget .plugin-card-grid.plugin-inventory-list.virtualized-section-list {
+	display: block;
+}
+
+.plugin-list-widget .virtualized-section-list .monaco-list-row {
 	box-sizing: border-box;
 }
 
-.ai-customization-management-editor .editor-header {
+.plugin-list-widget .customization-inventory-list .monaco-list-row.ai-customization-list-item {
+	background-color: var(--vscode-editorWidget-background);
+}
+
+.plugin-list-widget .customization-inventory-list .monaco-list-row.ai-customization-list-item:hover {
+	background-color: var(--vscode-list-hoverBackground);
+}
+
+.plugin-list-widget .virtualized-section-list .monaco-list-row:not(:first-child) {
+	box-shadow: inset 0 var(--vscode-strokeThickness) var(--vscode-widget-border, var(--vscode-agentsPanel-border));
+}
+
+.plugin-list-widget .plugin-home-row {
+	width: 100%;
+	min-height: 64px;
+	background: transparent;
+	border-radius: 0;
+	cursor: pointer;
+}
+
+.plugin-list-widget .plugin-home-row.customization-home-row.disabled {
+	opacity: 0.6;
+}
+
+.plugin-list-widget .customization-card-primary-action {
+	appearance: none;
+	background: transparent;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	padding: 0;
+	text-align: start;
+	min-width: 0;
+	cursor: pointer;
+}
+
+.plugin-list-widget .plugin-home-row > .customization-card-primary-action {
 	display: flex;
 	align-items: center;
-	gap: 8px;
-	padding: 16px 16px 6px;
-	flex-shrink: 0;
+	align-self: stretch;
+	flex: 1;
 }
 
-.ai-customization-management-editor .editor-back-button {
-	flex-shrink: 0;
-	align-self: flex-start;
+.plugin-list-widget .customization-row-primary {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	width: 26px;
-	height: 26px;
-	border-radius: 4px;
+	align-self: stretch;
+	flex: 1;
+	min-width: 0;
+	border-radius: var(--vscode-cornerRadius-small);
 	cursor: pointer;
-	background: transparent;
-	border: none;
-	color: var(--vscode-foreground);
-	opacity: 0.8;
-	transition: background-color 0.1s ease, opacity 0.1s ease;
 }
 
-.ai-customization-management-editor .editor-back-button:hover:not(:disabled) {
-	background-color: var(--vscode-toolbar-hoverBackground);
-	opacity: 1;
+.plugin-list-widget .customization-card-primary-action:focus-visible,
+.plugin-list-widget .plugin-remote-item:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: -1px;
 }
 
-.ai-customization-management-editor .editor-back-button:active:not(:disabled) {
-	background-color: var(--vscode-toolbar-activeBackground);
+.plugin-list-widget .plugin-home-row:not(:last-child) {
+	box-shadow: inset 0 calc(-1 * var(--vscode-strokeThickness)) var(--vscode-widget-border, var(--vscode-agentsPanel-border));
 }
 
-.ai-customization-management-editor .editor-back-button:disabled {
-	cursor: default;
-	opacity: 0.45;
+.plugin-list-widget .plugin-home-row:hover {
+	background: var(--vscode-list-hoverBackground);
 }
 
-.ai-customization-management-editor .editor-action-button-icon {
-	font-size: 14px;
-	line-height: 14px;
+.plugin-list-widget .plugin-home-row .plugin-list-item-action {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size40);
+	margin-left: auto;
 }
 
-.ai-customization-management-editor .editor-item-info {
+.plugin-list-widget .plugin-list-item:hover {
+	background-color: var(--vscode-list-hoverBackground);
+}
+
+.plugin-list-widget .plugin-list-item.disabled {
+	opacity: 0.6;
+}
+
+.plugin-list-widget .plugin-home-row.disabled {
+	opacity: 1;
+}
+
+.plugin-list-widget .plugin-list-item .item-sync-checkbox {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+}
+
+.plugin-list-widget .plugin-list-item-details {
+	flex: 1;
+	min-width: 0;
 	display: flex;
 	flex-direction: column;
+	gap: var(--vscode-spacing-size20);
 	overflow: hidden;
-	flex: 1;
+}
+
+.plugin-list-widget .plugin-list-item-name-row {
+	display: flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size60);
 	min-width: 0;
+	overflow: hidden;
 }
 
-.ai-customization-management-editor .editor-item-name {
-	font-size: 14px;
-	font-weight: 500;
-	color: var(--vscode-foreground);
+.plugin-list-widget .plugin-list-item-name {
+	font-size: var(--vscode-agents-fontSize-body1);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 18px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.ai-customization-management-editor .editor-item-path {
+.plugin-list-widget .plugin-list-item-description,
+.plugin-list-widget .plugin-list-item-source,
+.plugin-list-widget .plugin-list-item-metadata {
 	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 14px;
 	color: var(--vscode-descriptionForeground);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	font-family: var(--monaco-monospace-font);
-}
-
-.ai-customization-management-editor .editor-save-indicator {
-	flex-shrink: 0;
-	width: 16px;
-	height: 16px;
-	font-size: 16px;
-	line-height: 16px;
-	text-align: center;
-	color: var(--vscode-descriptionForeground);
-	opacity: 0;
-	transition: opacity 0.2s ease;
-	margin-right: 4px;
 }
 
-.ai-customization-management-editor .editor-save-indicator.visible {
-	opacity: 0.7;
-}
-
-.ai-customization-management-editor .editor-save-indicator.saved {
-	color: var(--vscode-testing-iconPassed, #73c991);
-	opacity: 1;
+.plugin-list-widget .plugin-list-item-source {
+	color: var(--vscode-textPreformat-foreground, var(--vscode-descriptionForeground));
 }
 
-.ai-customization-management-editor .editor-mode-button {
+.plugin-list-widget .plugin-list-item-status {
 	flex-shrink: 0;
-	height: 26px;
-	padding: 0 10px;
-	border-radius: 4px;
-	border: 1px solid var(--vscode-widget-border);
-	background: var(--vscode-button-secondaryBackground);
-	color: var(--vscode-button-secondaryForeground);
-	cursor: pointer;
-	font-size: 12px;
-	line-height: 24px;
-	transition: background-color 0.1s ease, border-color 0.1s ease;
+	font-size: var(--vscode-agents-fontSize-label2);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 18px;
+	padding: 0 var(--vscode-spacing-size80);
+	border-radius: var(--vscode-cornerRadius-circle);
+	color: var(--vscode-badge-foreground);
+	background-color: var(--vscode-badge-background);
 }
 
-.ai-customization-management-editor .editor-mode-button:hover {
-	background: var(--vscode-button-secondaryHoverBackground);
+.plugin-list-widget .plugin-list-item-status.running {
+	color: var(--vscode-editor-background);
+	background-color: color-mix(in srgb, var(--vscode-terminal-ansiGreen) 50%, transparent);
 }
 
-.ai-customization-management-editor .editor-mode-button:focus-visible {
-	outline: 1px solid var(--vscode-focusBorder);
-	outline-offset: 1px;
+.plugin-list-widget .plugin-list-item-status.disabled {
+	color: var(--vscode-badge-foreground);
+	background-color: color-mix(in srgb, var(--vscode-badge-background) 50%, transparent);
 }
 
-.ai-customization-management-editor .editor-preview-container,
-.ai-customization-management-editor .embedded-editor-container {
-	flex: 1;
-	margin-top: 8px;
-	min-height: 0;
-	overflow: hidden;
+.plugin-list-widget .mcp-runtime-status-badge {
+	color: var(--vscode-foreground);
+	background-color: var(--vscode-toolbar-hoverBackground);
 }
 
-.ai-customization-management-editor .editor-preview-container {
-	background: var(--vscode-editor-background);
-	overflow: hidden;
+.plugin-list-widget .mcp-runtime-status-badge.running {
+	color: var(--vscode-foreground);
+	background-color: color-mix(in srgb, var(--vscode-charts-green) 18%, transparent);
 }
 
-.ai-customization-management-editor .editor-preview-scroll-container {
-	height: 100%;
-	overflow: auto;
-	padding: 16px;
-	box-sizing: border-box;
-	outline: none;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
+.plugin-list-widget .mcp-runtime-status-badge.starting {
+	background-color: color-mix(in srgb, var(--vscode-progressBar-background) 18%, transparent);
 }
 
-.ai-customization-management-editor .editor-preview-section {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
+.plugin-list-widget .mcp-runtime-status-badge.auth-required {
+	background-color: color-mix(in srgb, var(--vscode-list-warningForeground, var(--vscode-editorWarning-foreground)) 18%, transparent);
 }
 
-.ai-customization-management-editor .editor-preview-frontmatter-list {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
+.plugin-list-widget .mcp-runtime-status-badge.error {
+	background-color: color-mix(in srgb, var(--vscode-errorForeground) 18%, transparent);
 }
 
-.ai-customization-management-editor .editor-preview-row {
+.plugin-list-widget .plugin-list-item-action {
 	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	padding: 10px 12px;
-	background: var(--vscode-editorWidget-background);
-	border: 1px solid var(--vscode-widget-border);
-	border-radius: 6px;
+	align-items: center;
+	flex-flow: row nowrap;
+	gap: var(--vscode-spacing-size40);
+	flex-shrink: 0;
+	margin-left: auto;
 }
 
-.ai-customization-management-editor .editor-preview-row-header {
-	display: flex;
-	align-items: center;
-	gap: 8px;
+.plugin-list-widget .plugin-list-item-action .plugin-card-icon-button.monaco-button {
+	width: var(--vscode-spacing-size240);
+	min-width: var(--vscode-spacing-size240);
+	height: var(--vscode-spacing-size240);
+	padding: 0;
+	border-color: transparent;
+	background: transparent;
+	color: var(--vscode-descriptionForeground);
 }
 
-.ai-customization-management-editor .editor-preview-row-key {
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--vscode-foreground);
-	font-family: var(--monaco-monospace-font);
+.plugin-list-widget .plugin-list-item-action .plugin-card-icon-button.monaco-button:hover {
+	background: var(--vscode-toolbar-hoverBackground);
+	border-color: transparent;
+	color: var(--vscode-textLink-activeForeground);
 }
 
-.ai-customization-management-editor .editor-preview-row-help {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	height: 20px;
+.plugin-list-widget .mcp-server-actions .plugin-card-icon-button.monaco-button {
+	width: var(--vscode-spacing-size240);
+	min-width: var(--vscode-spacing-size240);
+	height: var(--vscode-spacing-size240);
 	padding: 0;
-	border: none;
-	border-radius: 999px;
+	border-color: transparent;
 	background: transparent;
 	color: var(--vscode-descriptionForeground);
-	cursor: pointer;
 }
 
-.ai-customization-management-editor .editor-preview-row-help:hover {
+.plugin-list-widget .mcp-server-actions .plugin-card-icon-button.monaco-button:hover {
 	background: var(--vscode-toolbar-hoverBackground);
-	color: var(--vscode-foreground);
+	border-color: transparent;
+	color: var(--vscode-textLink-activeForeground);
 }
 
-.ai-customization-management-editor .editor-preview-row-help:focus-visible {
-	outline: 1px solid var(--vscode-focusBorder);
-	outline-offset: 1px;
+.vscode-high-contrast .plugin-list-widget .plugin-list-item-action .plugin-card-icon-button.monaco-button:focus-visible,
+.vscode-high-contrast .plugin-list-widget .mcp-server-actions .plugin-card-icon-button.monaco-button:focus-visible {
+	border-color: var(--vscode-contrastActiveBorder);
 }
 
-.ai-customization-management-editor .editor-preview-row-help-icon {
-	font-size: 14px;
-	line-height: 14px;
+.plugin-list-widget .customization-home-row:hover {
+	background: color-mix(in srgb, var(--vscode-list-hoverBackground) 65%, transparent);
 }
 
-.ai-customization-management-editor .editor-preview-row-value {
-	font-size: var(--vscode-agents-fontSize-body1);
-	line-height: 1.5;
-	color: var(--vscode-foreground);
-	white-space: pre-wrap;
-	word-break: break-word;
+/* The enablement switch is the shared `Switch` widget; its styling lives in base. */
+
+.plugin-list-widget .plugin-list-item-install-button {
+	font-size: var(--vscode-agents-fontSize-body2);
+	padding: var(--vscode-spacing-size40) var(--vscode-spacing-size80);
 }
 
-.ai-customization-management-editor .editor-preview-row-value.multiline {
-	font-family: var(--monaco-monospace-font);
-	font-size: 12px;
+.plugin-list-widget .plugin-list-item-install-button:focus-visible {
+	outline-offset: -1px;
 }
 
-.ai-customization-management-editor .editor-preview-body-content {
-	padding: 12px 14px;
-	background: var(--vscode-editorWidget-background);
-	border: 1px solid var(--vscode-widget-border);
-	border-radius: 6px;
+.plugin-list-widget .plugin-card-container {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
 }
 
-.ai-customization-management-editor .editor-preview-body-content > :first-child {
-	margin-top: 0;
+.plugin-list-widget .plugin-card-scrollable {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+	width: 100%;
+	max-width: 840px;
+	margin: 0 auto;
 }
 
-.ai-customization-management-editor .editor-preview-body-content > :last-child {
-	margin-bottom: 0;
+.plugin-list-widget .plugin-card-scrollable > .plugin-card-container {
+	position: absolute;
+	inset: 0;
 }
 
-.ai-customization-management-editor .editor-preview-empty-state {
-	padding: 12px 14px;
-	background: var(--vscode-editorWidget-background);
-	border: 1px dashed var(--vscode-widget-border);
-	border-radius: 6px;
-	color: var(--vscode-descriptionForeground);
-	font-size: 12px;
+.plugin-list-widget .plugin-card-scroll {
+	height: 100%;
+	overflow: auto;
+	padding: 0 0 var(--vscode-spacing-size200);
+	box-sizing: border-box;
 }
 
-.ai-customization-management-editor .editor-preview-issues-box {
-	padding: 12px 14px;
-	background: var(--vscode-inputValidation-warningBackground);
-	border: 1px solid var(--vscode-inputValidation-warningBorder);
-	border-radius: 6px;
-	color: var(--vscode-inputValidation-warningForeground);
+.plugin-list-widget .plugin-card-scroll.distributed-section-layout {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: var(--vscode-spacing-size100);
+	height: 100%;
+	min-height: 0;
+	padding-bottom: 0;
+	overflow: hidden;
 }
 
-.ai-customization-management-editor .editor-preview-issues-title {
-	font-size: 12px;
-	font-weight: 600;
+.plugin-list-widget .distributed-section-layout > .plugin-card-section {
+	flex: 0 0 auto;
+	margin-bottom: 0;
 }
 
-.ai-customization-management-editor .editor-preview-issues-description,
-.ai-customization-management-editor .editor-preview-issues-list {
-	font-size: 12px;
-	line-height: 1.4;
+.plugin-list-widget .distributed-section-layout .plugin-card-section-header {
+	margin-bottom: var(--vscode-spacing-size20);
 }
 
-.ai-customization-management-editor .editor-preview-issues-list {
-	margin: 0;
-	padding-left: 18px;
+.plugin-list-widget .plugin-card-scroll-content {
+	height: auto;
+	overflow: visible;
+	padding: 0 0 var(--vscode-spacing-size200);
 }
 
-.ai-customization-management-editor .embedded-editor-container .monaco-editor {
-	border-radius: 4px;
+.plugin-list-widget .plugin-marketplace-back-container {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	padding: var(--vscode-spacing-size120) 0 0;
 }
 
-/* Initial open transition: a subtle fade + lift plays once when the editor
-pane is first mounted. View switches inside the modal are not animated. */
-.ai-customization-management-editor {
-	animation: ai-customization-view-enter 160ms ease-out;
+.plugin-list-widget .plugin-card-section {
+	margin-bottom: var(--vscode-spacing-size240);
 }
 
-@keyframes ai-customization-view-enter {
-	from {
-		opacity: 0;
-		transform: translateY(4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+.plugin-list-widget .plugin-card-section-header {
+	display: flex;
+	align-items: flex-end;
+	justify-content: flex-start;
+	gap: var(--vscode-spacing-size60);
+	margin-bottom: var(--vscode-spacing-size120);
+	min-width: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-	.ai-customization-management-editor {
-		animation: none;
-	}
+.plugin-list-widget .plugin-card-section-actions {
+	display: flex;
+	align-items: center;
+	flex: 0 0 auto;
+	gap: var(--vscode-spacing-size40);
 }
 
-/* Welcome page styles live in the welcome page variant stylesheets. */
-
-
-/* Automations section
- *
- * The outer `.automations-content-container` shares the panel-surface
- * styling with the prompts / MCP / plugin / models containers (see the
- * shared rule above near line 758) so the Automations tab visually
- * matches its siblings: 40px panel padding, agentsPanel background,
- * rounded border. The list-widget below fills that panel.
- *
- * No standalone rule is needed here. The shared selector covers it. */
-
-.automations-list-widget {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
+.plugin-list-widget .plugin-card-section-actions .monaco-button {
+	width: auto;
 }
 
-.automations-list-widget .automations-empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 48px 24px;
-	gap: 8px;
-	text-align: center;
-	flex: 1;
+.plugin-list-widget .plugin-card-section-actions .plugin-update-button.monaco-button {
+	width: var(--vscode-spacing-size280);
+	min-width: var(--vscode-spacing-size280);
+	padding: var(--vscode-spacing-size40) 0;
 }
 
-.automations-list-widget .automations-empty-state .automations-empty-title {
-	font-size: 16px;
-	font-weight: 500;
-	color: var(--vscode-foreground);
-	margin: 0;
+.plugin-list-widget.narrow-layout .available-plugins-section .plugin-card-section-header,
+.plugin-list-widget.narrow-layout .installed-plugins-section .plugin-card-section-header,
+.plugin-list-widget.narrow-layout .available-mcp-servers-section .plugin-card-section-header,
+.plugin-list-widget.narrow-layout .installed-mcp-servers-section .plugin-card-section-header,
+.plugin-list-widget.narrow-layout .customization-card-section .plugin-card-section-header {
+	align-items: stretch;
+	flex-wrap: wrap;
 }
 
-.automations-list-widget .automations-empty-state .automations-empty-message {
-	font-size: var(--vscode-agents-fontSize-body1);
-	color: var(--vscode-descriptionForeground);
-	max-width: 320px;
-	line-height: 1.4;
-	margin: 0;
+.plugin-list-widget.narrow-layout .available-plugins-section .plugin-card-section-actions,
+.plugin-list-widget.narrow-layout .installed-plugins-section .plugin-card-section-actions,
+.plugin-list-widget.narrow-layout .available-mcp-servers-section .plugin-card-section-actions,
+.plugin-list-widget.narrow-layout .installed-mcp-servers-section .plugin-card-section-actions,
+.plugin-list-widget.narrow-layout .customization-card-section .plugin-card-section-actions {
+	width: 100%;
 }
 
-.automations-list-widget .automations-empty-state .automations-empty-cta {
-	margin-top: 16px;
-	min-width: 160px;
-	align-self: center;
+.plugin-list-widget.narrow-layout .available-plugins-section .plugin-available-action,
+.plugin-list-widget.narrow-layout .installed-plugins-section .plugin-installed-action,
+.plugin-list-widget.narrow-layout .installed-mcp-servers-section .plugin-installed-action,
+.plugin-list-widget.narrow-layout .customization-card-section .customization-create-action,
+.plugin-list-widget.narrow-layout .customization-card-section .customization-generate-action {
+	flex: 1 1 auto;
+	min-width: 0;
 }
 
-/* Header. This mirrors `.section-title-header` on the prompts side so the
- * Automations tab reads with the same vertical rhythm and underline
- * treatment as Agents / Skills / Prompts / Instructions. Horizontal
- * padding is absent because the parent `.automations-content-container`
- * already owns 40px panel padding. */
-.automations-list-widget .automations-header {
-	flex-shrink: 0;
-	padding: 0 0 32px;
-	border-bottom: 1px solid var(--vscode-panel-border);
+.plugin-list-widget.narrow-layout .customization-card-section .customization-create-action > .monaco-button {
+	flex: 1 1 auto;
+	min-width: 0;
 }
 
-.automations-list-widget .automations-header-row {
+.plugin-list-widget .plugin-card-section-heading-row {
 	display: flex;
-	flex-direction: row;
 	align-items: center;
-	justify-content: space-between;
-	gap: 8px 16px;
-	flex-wrap: wrap;
+	gap: var(--vscode-spacing-size60);
 }
 
-.automations-list-widget .automations-header-title {
-	font-size: var(--vscode-agents-fontSize-heading2);
+.plugin-list-widget .plugin-card-section-text {
+	flex: 1;
+	min-width: 0;
+}
+
+.plugin-list-widget .plugin-card-section-title {
+	margin: 0;
+	font-size: var(--vscode-agents-fontSize-heading3);
 	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 18px;
 	color: var(--vscode-foreground);
-	margin: 0;
-	min-width: 0;
 }
 
-.automations-list-widget .automations-header-subtitle {
-	font-size: var(--vscode-agents-fontSize-body1);
-	line-height: 1.45;
+.plugin-list-widget .plugin-card-section-description {
+	margin-top: var(--vscode-spacing-size20);
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
 	color: var(--vscode-descriptionForeground);
-	margin: 0 0 8px 0;
-	/* Reserve ~2 lines so vertical rhythm matches the prompts-side
-	 * `.section-title-description` even when our subtitle is short. */
-	min-height: 38px;
 }
 
-.automations-list-widget .automations-new-button {
-	width: auto;
-	flex: 0 0 auto;
-	padding: 4px 14px;
+.plugin-list-widget .plugin-card-grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: var(--vscode-spacing-size80);
 }
 
-/* When the widget is empty, hide the header so the empty-state CTA reads
- * as the primary action and there is not a duplicate New button. */
-.automations-list-widget.automations-empty .automations-header {
-	display: none;
+.plugin-list-widget .plugin-inventory-empty {
+	padding: var(--vscode-spacing-size160);
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
 }
 
-/* List */
-.automations-list-widget .automations-list {
+.plugin-list-widget .virtualized-section-loading {
 	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: auto;
-	gap: 6px;
+	align-items: center;
+	box-sizing: border-box;
+	padding-inline: var(--vscode-spacing-size160);
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-fontSize-body2);
 }
 
-.automations-list-widget .automations-row {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	gap: 12px;
-	padding: 12px 16px;
-	border-radius: 6px;
-	cursor: pointer;
+.plugin-list-widget .plugin-marketplace-home-row .plugin-list-item-install-button.monaco-button {
+	width: auto;
+	flex: 0 0 auto;
 }
 
-.automations-list-widget .automations-row:not(.automations-row-disabled):hover {
-	background-color: var(--vscode-list-hoverBackground);
+.plugin-list-widget .plugin-search-results .plugin-card-section:last-child {
+	margin-bottom: 0;
 }
 
-.automations-list-widget .automations-row-wrapper:has(> .automations-row-history) .automations-row:not(.automations-row-disabled):hover {
-	background-color: transparent;
+.plugin-list-widget.wide-layout .plugin-marketplace-recommended-section .plugin-card-grid {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.automations-list-widget .automations-row:has(:focus-visible) {
-	outline: 1px solid var(--vscode-focusBorder);
-	outline-offset: -1px;
+.plugin-list-widget .plugin-card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size80);
+	min-width: 0;
+	min-height: 112px;
+	padding: var(--vscode-spacing-size120);
+	border: var(--vscode-strokeThickness) solid var(--vscode-agentsPanel-border);
+	border-radius: var(--vscode-cornerRadius-large);
+	color: var(--vscode-foreground);
+	box-sizing: border-box;
+	cursor: pointer;
 }
 
-.automations-list-widget .automations-row-disabled {
-	opacity: 0.6;
+.plugin-list-widget .plugin-marketplace-card {
+	justify-content: space-between;
+	gap: var(--vscode-spacing-size120);
+	min-height: 0;
+	padding-bottom: var(--vscode-spacing-size120);
 }
 
-.automations-list-widget .automations-row-main {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
+.plugin-list-widget .plugin-marketplace-card .plugin-card-header {
 	flex: 1;
-	min-width: 0;
+	align-items: stretch;
+	flex-direction: column;
 }
 
-.automations-list-widget .automations-row-name {
-	font-size: var(--vscode-agents-fontSize-body1);
-	font-weight: 600;
-	color: var(--vscode-foreground);
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 8px;
-	word-break: break-word;
+.plugin-list-widget .plugin-marketplace-card .plugin-card-title-block.customization-card-primary-action {
+	width: 100%;
 }
 
-.automations-list-widget .automations-row-disabled-badge {
-	font-size: 11px;
-	font-weight: 400;
-	padding: 1px 6px;
-	border-radius: 3px;
-	background-color: var(--vscode-badge-background);
-	color: var(--vscode-badge-foreground);
+.plugin-list-widget .plugin-marketplace-card .plugin-card-header .plugin-card-actions {
+	justify-content: flex-start;
+	margin-top: auto;
+	margin-left: 0;
+	padding-top: var(--vscode-spacing-size80);
 }
 
-.automations-list-widget .automations-row-meta {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 6px;
-	font-size: 12px;
-	color: var(--vscode-descriptionForeground);
-	flex-wrap: wrap;
+.plugin-list-widget .plugin-marketplace-card .plugin-card-subtitle {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	white-space: normal;
 }
 
-.automations-list-widget .automations-row-meta-sep {
-	opacity: 0.6;
+.plugin-list-widget .plugin-card:hover {
+	background: var(--vscode-list-hoverBackground);
 }
 
-.automations-list-widget .automations-row-prompt {
-	font-size: 12px;
-	color: var(--vscode-descriptionForeground);
-	margin-top: 2px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	word-break: break-word;
+.plugin-list-widget .plugin-card.disabled {
+	opacity: 0.65;
 }
 
-.automations-list-widget .automations-row-actions {
+.plugin-list-widget .plugin-card-header {
 	display: flex;
-	flex-direction: row;
-	gap: 4px;
-	align-items: center;
-	flex: 0 0 auto;
-}
-
-.automations-list-widget .automations-row-action-button {
-	display: inline-flex;
 	align-items: center;
-	justify-content: center;
-	width: 24px;
-	height: 24px;
-	padding: 0;
-	border: none;
-	border-radius: 4px;
-	background: transparent;
-	color: var(--vscode-icon-foreground);
-	cursor: pointer;
-	font-size: 16px;
+	gap: var(--vscode-spacing-size100);
+	min-width: 0;
 }
 
-.automations-list-widget .automations-row-action-button:hover:not(:disabled) {
-	background-color: var(--vscode-toolbar-hoverBackground);
+.plugin-list-widget .plugin-card-header .plugin-card-actions {
+	margin-left: auto;
+	padding-top: var(--vscode-spacing-size20);
 }
 
-.automations-list-widget .automations-row-action-button:focus {
-	outline: 1px solid var(--vscode-focusBorder);
-	outline-offset: -1px;
+.plugin-list-widget .plugin-card-title-block {
+	flex: 1;
+	min-width: 0;
 }
 
-.automations-list-widget .automations-row-action-button:disabled {
-	opacity: 0.4;
-	cursor: default;
+.plugin-list-widget .plugin-card-title {
+	font-size: var(--vscode-agents-fontSize-body1);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 18px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-/* Run history (inline) */
-.automations-list-widget .automations-row-wrapper {
-	display: flex;
-	flex-direction: column;
-	border-radius: 6px;
+.plugin-list-widget .plugin-card-subtitle,
+.plugin-list-widget .plugin-card-description,
+.plugin-list-widget .plugin-card-meta {
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 16px;
+	color: var(--vscode-descriptionForeground);
 	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-/*
- * When a wrapper has an expanded history panel, flatten the row's bottom
- * corners so the row + history read as one visually connected card.
- */
-.automations-list-widget .automations-row-wrapper:has(> .automations-row-history) .automations-row {
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
+.plugin-list-widget .plugin-card-description {
+	white-space: normal;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
 }
 
-.automations-list-widget .automations-row-history {
-	padding: 4px 16px 12px 40px;
+.plugin-list-widget .plugin-card-badges,
+.plugin-list-widget .plugin-card-actions {
 	display: flex;
-	flex-direction: column;
-	gap: 4px;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: var(--vscode-spacing-size40);
 }
 
-.automations-list-widget .automations-history-heading {
-	font-size: 11px;
-	font-weight: 600;
-	margin: 4px 0;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	color: var(--vscode-descriptionForeground);
+.plugin-list-widget .plugin-card-badges {
+	justify-content: flex-start;
 }
 
-.automations-list-widget .automations-history-empty {
-	font-size: 12px;
-	color: var(--vscode-descriptionForeground);
-	font-style: italic;
+.plugin-list-widget .plugin-card-actions {
+	justify-content: flex-end;
 }
 
-.automations-list-widget .automations-history-list {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
+.plugin-list-widget .plugin-card-actions .monaco-button {
+	width: auto;
+	flex: 0 0 auto;
+	font-size: var(--vscode-agents-fontSize-body2);
+	padding: 0 var(--vscode-spacing-size80);
+	min-height: 24px;
 }
 
-.automations-list-widget .automations-history-row {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	gap: 8px;
-	font-size: 12px;
-	padding: 6px 10px;
-	border-radius: 4px;
-	background-color: var(--vscode-editorWidget-background, transparent);
+.plugin-list-widget .plugin-card-actions .plugin-card-icon-button.monaco-button {
+	width: 24px;
+	min-width: 24px;
+	padding: 0;
 }
 
-.automations-list-widget .automations-history-status {
+.plugin-list-widget .plugin-card-actions .plugin-card-ghost-button.monaco-button,
+.plugin-list-widget .plugin-card-section-header .plugin-card-ghost-button.monaco-button,
+.plugin-list-widget .plugin-marketplace-page-header .plugin-card-ghost-button.monaco-button {
+	background: transparent;
+	color: var(--vscode-foreground);
+	border-color: transparent;
+	width: auto;
 	flex: 0 0 auto;
-	width: 16px;
-	height: 16px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
 }
 
-.automations-list-widget .automations-history-row[data-run-status="completed"] .automations-history-status {
-	color: var(--vscode-testing-iconPassed, var(--vscode-icon-foreground));
+.plugin-list-widget .plugin-card-actions .plugin-card-ghost-button.monaco-button:hover,
+.plugin-list-widget .plugin-card-section-header .plugin-card-ghost-button.monaco-button:hover,
+.plugin-list-widget .plugin-marketplace-page-header .plugin-card-ghost-button.monaco-button:hover {
+	background: var(--vscode-toolbar-hoverBackground);
+	color: var(--vscode-foreground);
 }
 
-.automations-list-widget .automations-history-row[data-run-status="failed"] .automations-history-status {
-	color: var(--vscode-testing-iconFailed, var(--vscode-errorForeground));
+.plugin-list-widget .plugin-home-empty-card {
+	display: flex;
+	flex-direction: column;
+	grid-column: 1 / -1;
+	align-items: center;
+	justify-content: center;
+	gap: var(--vscode-spacing-size120);
+	min-height: 160px;
+	padding: var(--vscode-spacing-size360) var(--vscode-spacing-size160);
+	margin: var(--vscode-spacing-size40) 0 var(--vscode-spacing-size240);
+	text-align: center;
+	box-sizing: border-box;
 }
 
-.automations-list-widget .automations-history-row[data-run-status="running"] .automations-history-status {
-	color: var(--vscode-charts-blue, var(--vscode-icon-foreground));
+.plugin-list-widget .plugin-home-empty-title {
+	margin: 0;
+	font-size: var(--vscode-agents-fontSize-heading3);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	color: var(--vscode-foreground);
 }
 
-.automations-list-widget .automations-history-row-text {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	flex: 1;
-	min-width: 0;
+.plugin-list-widget .plugin-home-empty-description {
+	max-width: 520px;
+	font-size: var(--vscode-agents-fontSize-body2);
+	line-height: 1.45;
+	color: var(--vscode-descriptionForeground);
 }
 
-.automations-list-widget .automations-history-row-first {
-	display: flex;
-	flex-direction: row;
+.plugin-list-widget .plugin-home-empty-card .plugin-card-actions {
+	justify-content: center;
 	flex-wrap: wrap;
-	gap: 6px;
-	color: var(--vscode-foreground);
 }
 
-.automations-list-widget .automations-history-row-status {
-	font-weight: 600;
+.plugin-list-widget .plugin-browse-all-button.monaco-button {
+	width: fit-content;
+	flex: 0 0 auto;
 }
 
-.automations-list-widget .automations-history-row-sep {
-	color: var(--vscode-descriptionForeground);
-	opacity: 0.6;
+.vscode-high-contrast .plugin-list-widget .plugin-card,
+.vscode-high-contrast .plugin-list-widget .plugin-home-empty-card {
+	border-color: var(--vscode-contrastBorder);
 }
 
-.automations-list-widget .automations-history-row-trigger,
-.automations-list-widget .automations-history-row-started,
-.automations-list-widget .automations-history-row-duration {
-	color: var(--vscode-descriptionForeground);
+/* Button group for Add Server + Browse Marketplace */
+.mcp-list-widget .list-button-group {
+	display: flex;
+	gap: 4px;
+	flex-shrink: 0;
 }
 
-.automations-list-widget .automations-history-row-error {
-	color: var(--vscode-errorForeground);
-	font-size: 11px;
-	white-space: pre-wrap;
-	word-break: break-word;
+/* Embedded Editor View */
+.ai-customization-management-editor .editor-content-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	background: var(--vscode-agentsPanel-background);
+	border: 1px solid var(--vscode-agentsPanel-border);
+	border-radius: 6px;
+	overflow: hidden;
+	box-sizing: border-box;
 }
 
-.automations-list-widget .automations-history-row-open {
-	flex: 0 0 auto;
-	width: 24px;
-	height: 24px;
-	display: inline-flex;
+.ai-customization-management-editor .editor-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 16px 16px 6px;
+	flex-shrink: 0;
+}
+
+.ai-customization-management-editor .editor-back-button {
+	flex-shrink: 0;
+	align-self: flex-start;
+	display: flex;
 	align-items: center;
 	justify-content: center;
+	width: 26px;
+	height: 26px;
+	padding: 0;
+	border-radius: var(--vscode-cornerRadius-small);
 	cursor: pointer;
-	border-radius: 4px;
 	background: transparent;
-	opacity: 0;
-	color: var(--vscode-icon-foreground);
-	font-size: 16px;
+	border: none;
+	color: var(--vscode-foreground);
+	opacity: 0.8;
+	transition: background-color 0.1s ease, opacity 0.1s ease;
 }
 
-.automations-list-widget .automations-history-row:hover .automations-history-row-open,
-.automations-list-widget .automations-history-row-open:focus-visible {
-	opacity: 1;
+.ai-customization-management-editor .editor-back-button .codicon {
+	font-size: var(--vscode-codiconFontSize);
+	line-height: 1;
 }
 
-.automations-list-widget .automations-history-row-open:focus-visible {
-	outline: 1px solid var(--vscode-focusBorder);
+.ai-customization-management-editor .editor-back-button:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
 	outline-offset: -1px;
 }
 
-.automations-list-widget .automations-history-row-open:hover {
+.ai-customization-management-editor .editor-back-button:hover:not(:disabled) {
 	background-color: var(--vscode-toolbar-hoverBackground);
+	opacity: 1;
 }
 
-.automations-list-widget .automations-history-more {
-	font-size: 11px;
-	color: var(--vscode-descriptionForeground);
-	font-style: italic;
+.ai-customization-management-editor .editor-back-button:active:not(:disabled) {
+	background-color: var(--vscode-toolbar-activeBackground);
 }
 
-/* Dialog */
-.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message-detail {
-	display: none;
+.ai-customization-management-editor .editor-back-button:disabled {
+	cursor: default;
+	opacity: 0.45;
 }
 
-/*
- * The dialog's built-in title (rendered into `.dialog-message-text`)
- * stays in the DOM so `aria-labelledby="monaco-dialog-message-text"`
- * still binds for screen readers, but is visually hidden. Our own
- * `.automation-titlebar` provides the visible chrome. Visually-hidden
- * pattern (not `display: none`) because some AT/screen-reader combos
- * skip aria-labelledby targets when `display: none` is in effect.
- * Same treatment for the unused dialog icon slot.
- */
-.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message {
-	margin: 0;
-	padding: 0;
+.ai-customization-management-editor .editor-action-button-icon {
+	font-size: 14px;
+	line-height: 14px;
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message .dialog-message-text {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
+.ai-customization-management-editor .editor-item-info {
+	display: flex;
+	flex-direction: column;
 	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
+	flex: 1;
+	min-width: 0;
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row > .dialog-icon.codicon {
-	display: none;
+.ai-customization-management-editor .editor-item-name {
+	font-size: 14px;
+	font-weight: var(--vscode-fontWeight-semiBold);
+	color: var(--vscode-foreground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-/*
- * Lock the dialog box to a stable width. Without this rule the dialog
- * inherits `width: min-content` from `dialog.css` and re-flows as the
- * embedded chat input's chips change size (e.g. when the model picker
- * resolves a shorter label). Use min(640px, 92vw) so the dialog still
- * shrinks gracefully on narrow viewports.
- *
- * Padding is stripped (vs. the base 8px) so our `.automation-titlebar`
- * stripe can paint edge-to-edge inside the dialog body. The form pane
- * re-adds its own padding.
- *
- * Note: `extraClasses` on Dialog adds the class to `.monaco-dialog-box`
- * itself (not an ancestor), so we attach the rule directly here.
- */
-.monaco-dialog-box.automation-dialog {
-	width: min(640px, 92vw);
-	min-width: min(520px, 92vw);
-	max-width: 92vw;
-	padding: 0;
-	background-color: var(--vscode-quickInput-background);
-	color: var(--vscode-quickInput-foreground);
-	/* Anchor for the absolutely-positioned close-X (see below). */
-	position: relative;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content {
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-agents-fontSize-body1);
+	line-height: 1.5;
+	overflow-wrap: anywhere;
 }
 
-/*
- * Float the close-X over the titlebar so the title text sits flush
- * with the top edge of the modal (QuickInput-style). Without this,
- * `.dialog-toolbar-row` reserves ~24px of dead space above the title.
- * `z-index` keeps the X above the sticky titlebar.
- */
-.monaco-dialog-box.automation-dialog .dialog-toolbar-row {
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: auto;
-	padding: 4px 6px 0 0;
-	z-index: 2;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown > :first-child {
+	margin-top: 0;
 }
 
-.automation-dialog-body {
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown > :last-child {
+	margin-bottom: 0;
 }
 
-/*
- * Strip the base dialog padding on the message row and container so
- * our titlebar can full-bleed. The form pane below re-adds horizontal
- * padding so the form fields don't crash into the dialog edge.
- *
- * Container still owns the scrolling (per base/.../dialog.css), so
- * the titlebar uses `position: sticky; top: 0` to stay visible as the
- * form scrolls underneath it.
- */
-.monaco-dialog-box.automation-dialog .dialog-message-row {
-	padding: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown p {
+	margin: 0 0 var(--vscode-spacing-size120) 0;
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container {
-	padding: 0;
-	/*
-	 * The base dialog leaves the message container at content size
-	 * (`align-self: stretch` only stretches height in a horizontal flex
-	 * row). Our form fields are `width: 100%` of this container, so they
-	 * track the container's intrinsic min-content width. It shrinks
-	 * over the first second as the embedded chat input's chip labels
-	 * (model name, mode name, etc.) resolve and the toolbar's
-	 * min-content drops. Forcing the container to fill the row width
-	 * keeps every field at the dialog's locked width from first paint
-	 * onwards. `min-width: 0` lets the container shrink inside the row
-	 * (which has `overflow: hidden`) instead of being pushed by long
-	 * chip labels.
-	 */
-	flex: 1 1 auto;
-	min-width: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h1,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h2,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h3,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h4,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h5,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h6 {
+	margin: var(--vscode-spacing-size160) 0 var(--vscode-spacing-size80);
+	color: var(--vscode-foreground);
+	font-weight: var(--vscode-agents-fontWeight-semiBold);
+	line-height: 1.35;
 }
 
-/*
- * QuickInput-style titlebar. The visual "line" beneath it is purely
- * the background contrast between `quickInputTitle.background` (a
- * translucent stripe) and `quickInput.background` (the form area).
- * No `border-bottom`. Sticky so the title stays in view as the form
- * scrolls (the dialog's message-container is the scroll host).
- */
-.automation-titlebar {
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	/* Right padding reserves room for the floating close-X chip. */
-	padding: 8px 36px 8px 14px;
-	text-align: left;
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h1 {
 	font-size: var(--vscode-agents-fontSize-heading2);
-	color: var(--vscode-quickInput-foreground);
-	background-color: var(--vscode-quickInputTitle-background);
 }
 
-.automation-description {
-	padding: 8px 14px;
-	font-size: var(--vscode-agents-fontSize-body2, 12px);
-	color: var(--vscode-descriptionForeground);
-	line-height: 1.4;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h2,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h3 {
+	font-size: var(--vscode-agents-fontSize-heading3);
 }
 
-.automation-form-pane {
-	flex: 1 1 auto;
-	min-width: 0;
-	min-height: 0;
-	padding: 4px 14px 6px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h4,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h5,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown h6 {
+	font-size: var(--vscode-agents-fontSize-label1);
 }
 
-/*
- * Theme the native overflow scrollbar on the dialog body so it matches
- * the rest of VS Code. .dialog-message-container is the scroll host
- * (see base/browser/ui/dialog/dialog.css). Without this the dialog
- * shows the platform's default scrollbar which clashes visually with
- * the chat input embedded above.
- */
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar {
-	width: 10px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown a,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown a code {
+	color: var(--vscode-textLink-foreground);
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-track {
-	background-color: transparent;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown a:hover,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown a:active {
+	color: var(--vscode-textLink-activeForeground);
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb {
-	min-height: 20px;
-	background-color: var(--vscode-scrollbarSlider-background);
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown ul,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown ol {
+	margin: 0 0 var(--vscode-spacing-size120) 0;
+	padding-inline-start: var(--vscode-spacing-size240);
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb:hover {
-	background-color: var(--vscode-scrollbarSlider-hoverBackground);
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown li {
+	margin: var(--vscode-spacing-size40) 0;
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb:active {
-	background-color: var(--vscode-scrollbarSlider-activeBackground);
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown li > p {
+	margin: 0;
 }
 
-.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-corner {
-	display: none;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown code {
+	font-family: var(--monaco-monospace-font);
+	font-size: var(--vscode-agents-fontSize-label2);
+	color: var(--vscode-textPreformat-foreground);
+	background: var(--vscode-textCodeBlock-background);
+	border-radius: var(--vscode-cornerRadius-small);
+	padding: 0 var(--vscode-spacing-size40);
 }
 
-/*
- * Z-index bridge for popups while the automation dialog is open.
- * The dialog modal block is z-index 2575 (see base/.../dialog.css)
- * and shares that value with .context-view (set inline in
- * contextview.ts as `2575 + layer`). DOM order means the dialog
- * shows on top, hiding any popup the chat input chips, the quick
- * input, or a context menu try to open. We can't change the inline
- * z-index from outside, so use `!important` while the dialog service
- * marks the active container as automation-dialog-open.
- */
-.automation-dialog-open .context-view.monaco-component {
-	z-index: 2600 !important;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown pre,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown div[data-code] {
+	margin: 0 0 var(--vscode-spacing-size120) 0;
+	padding: var(--vscode-spacing-size100) var(--vscode-spacing-size120);
+	overflow: auto;
+	white-space: pre;
+	background: var(--vscode-textCodeBlock-background);
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
+	border-radius: var(--vscode-cornerRadius-medium);
+	box-sizing: border-box;
 }
 
-.automation-dialog-open .quick-input-widget {
-	z-index: 2600 !important;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown pre code,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown div[data-code] code {
+	display: block;
+	padding: 0;
+	background: transparent;
+	border-radius: 0;
+	white-space: pre;
 }
 
-.automation-dialog-open .monaco-menu-container {
-	z-index: 2600 !important;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown .monaco-tokenized-source {
+	white-space: pre;
 }
 
-.automation-form {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	padding: 2px 2px 4px;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown blockquote {
+	margin: 0 0 var(--vscode-spacing-size120) 0;
+	padding: var(--vscode-spacing-size80) var(--vscode-spacing-size120) var(--vscode-spacing-size40);
+	color: var(--vscode-foreground);
+	background: var(--vscode-textBlockQuote-background);
+	border-left: 5px solid var(--vscode-textBlockQuote-border);
+	border-radius: var(--vscode-cornerRadius-small);
 }
 
-/*
- * Host for the embedded ChatInputPart. The composer brings its own
- * background, border, and rounded corners (see chat.css
- * `.interactive-input-part`), so we just give it room to breathe and let
- * it fill the dialog's column width. `min-height` is sized for ~5 lines
- * of body text + the toolbar row so the editor doesn't feel cramped on
- * first open; the editor itself grows as the user types.
- */
-.automation-form-prompt-host {
-	display: flex;
-	flex-direction: column;
-	min-height: 140px;
-	/*
-	 * The host carries the `.interactive-session` class so the shared
-	 * chat input CSS (chip colors, focus borders, etc.) matches what
-	 * users see in a real chat session. That class also sets
-	 * `max-width: 950px; margin: auto; height: 100%` (chat.css), which
-	 * is meant for the full chat panel. In our flex column it makes
-	 * the host take its content's min-content width and center,
-	 * collapsing the chat input to ~chip-bar width. Re-assert
-	 * full-width sizing so the host fills the dialog's form column.
-	 */
-	width: auto;
-	max-width: 100%;
-	margin: 0;
-	height: auto;
-	align-self: stretch;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown blockquote > :first-child {
+	margin-top: 0;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown blockquote > :last-child {
+	margin-bottom: 0;
+}
+
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown table {
+	width: 100%;
+	margin: 0 0 var(--vscode-spacing-size120) 0;
+	border-collapse: collapse;
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
 }
 
-.automation-form-prompt-host .interactive-input-part {
-	/*
-	 * `.interactive-input-part` in chat.css has `margin: 0 12px`, which
-	 * (combined with the default `width: auto`) is designed to inset the
-	 * composer inside a wider chat panel. In our dialog the prompt host
-	 * is already the form column, so the margin pushes the composer 12px
-	 * past the host on each side. Its right border ends up sitting
-	 * outside the dialog. Zero out the margin so the composer aligns
-	 * with the other form fields.
-	 */
-	margin: 0;
-	/* Don't let long custom-mode names or model identifiers push the
-	 * modal wider than its declared max-width. */
-	max-width: 100%;
-	min-width: 0;
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown th,
+.ai-customization-management-editor .ai-customization-embedded-detail .plugin-detail-readme-content .rendered-markdown td {
+	padding: var(--vscode-spacing-size40) var(--vscode-spacing-size60);
+	border: var(--vscode-strokeThickness) solid var(--vscode-widget-border);
+	text-align: left;
 }
 
-.automation-form-prompt-host .interactive-input-editor,
-.automation-form-prompt-host .monaco-editor,
-.automation-form-prompt-host .monaco-editor-background,
-.automation-form-prompt-host .monaco-editor .margin {
-	background-color: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
+.ai-customization-management-editor .editor-item-path {
+	font-size: var(--vscode-fontSize-body2);
+	color: var(--vscode-descriptionForeground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-family: var(--monaco-monospace-font);
 }
 
-.automation-form-prompt-host .interactive-input-and-side-toolbar {
-	/* Allow the input column to shrink below its content's preferred
-	 * width so flex children (chips, custom-mode names) don't push the
-	 * modal wider than its declared max-width. */
-	min-width: 0;
+.ai-customization-management-editor .editor-save-indicator {
+	flex-shrink: 0;
+	width: 16px;
+	height: 16px;
+	font-size: 16px;
+	line-height: 16px;
+	text-align: center;
+	color: var(--vscode-descriptionForeground);
+	opacity: 0;
+	transition: opacity 0.2s ease;
+	margin-right: 4px;
 }
 
-/*
- * Hide chips from the embedded chat input that don't fit the automation
- * dialog's reduced surface:
- *  - "Configure Tools" (`workbench.action.chat.configureTools`,
- *    `.codicon-settings`). Tool selection is not relevant for a
- *    scheduled prompt.
- *  - "Attach context" (`workbench.action.chat.attachContext`,
- *    `.codicon-add`, the `+`). The dialog doesn't support attachments.
- *    the prompt is the only payload sent at run time.
- *  - "List MCP Servers" (`workbench.mcp.listServer`, `.codicon-server`)
- *    MCP server management belongs in the live chat surface, not in
- *    a one-off prompt definition. The action view item is custom
- *    (`MenuEntryActionViewItem`) but still renders the standard
- *    `.action-label.codicon-server` icon, so the same selector pattern
- *    matches.
- * Other chips in this toolbar use either custom action view items
- * (Model / Mode / Session pickers) or different codicons, so codicon
- * selectors are unique to the chips we want to remove. The descendant
- * selector (not `>`) matches even when the action-view-item wraps the
- * `.action-label` in an extra container (e.g. dropdown variants), which
- * keeps the rule resilient to view-item refactors. Hiding the
- * `.action-item` (not just the `.action-label`) removes the slot from
- * keyboard tab order too.
- */
-.automation-form-prompt-host .chat-input-toolbar .action-item:has(.action-label.codicon-settings),
-.automation-form-prompt-host .chat-input-toolbar .action-item:has(.action-label.codicon-add),
-.automation-form-prompt-host .chat-input-toolbar .action-item:has(.action-label.codicon-server) {
-	display: none;
+.ai-customization-management-editor .editor-save-indicator.visible {
+	opacity: 0.7;
 }
 
-/*
- * Suppress every inter-chip divider drawn by chat.css
- * (`.chat-input-toolbar ... .action-item + .action-item::before`) inside
- * the dialog. CSS `+` matches by DOM order regardless of `display:none`,
- * so the divider would otherwise appear as an orphan vertical line on
- * whichever visible chip follows our hidden `+`/settings items. The
- * remaining visible chips (Agent, model, mode) already have enough
- * intrinsic padding to read as separate without the divider. Dropping
- * dividers entirely is simpler and more resilient than per-pair
- * suppression rules that depend on DOM order.
- */
-.automation-form-prompt-host .chat-input-toolbar .monaco-action-bar .actions-container > .action-item + .action-item::before {
-	display: none;
+.ai-customization-management-editor .editor-save-indicator.saved {
+	color: var(--vscode-testing-iconPassed, #73c991);
+	opacity: 1;
 }
 
-/*
- * Cancel the dialog's `<ul>` indent for the chat input toolbars.
- *
- * `dialog.css:120` applies `padding-inline-start: 20px` to every `<ul>`
- * inside `.dialog-message-container` (meant to reduce the excessive
- * default indent on bulleted lists in dialog body text). The
- * `monaco-action-bar`'s `.actions-container` is rendered as a `<ul>`, so
- * the chat input's primary and secondary toolbars inherit that 20px
- * left indent. This pushes the Agent / Copilot CLI chips ~20px right of
- * the chat input's bottom-left corner.
- *
- * `actionbar.css` sets `.actions-container { padding: 0 }`, but the
- * dialog rule uses a logical property (`padding-inline-start`), which
- * cascades-after the physical shorthand and wins regardless of selector
- * specificity. Override the logical property explicitly here.
- *
- * Scoped to `.automation-form-prompt-host` so the regular chat panel
- * (which isn't inside a dialog) is unaffected. Any `<ul>`
- * elements in the dialog's actual message body text retain the
- * intended 20px indent.
- */
-.automation-form-prompt-host .chat-input-toolbar .monaco-action-bar .actions-container,
-.automation-form-prompt-host .chat-secondary-toolbar .monaco-action-bar .actions-container {
-	padding-inline-start: 0;
-	margin-left: 0;
+.ai-customization-management-editor .editor-mode-button {
+	flex-shrink: 0;
+	height: 26px;
+	padding: 0 10px;
+	border-radius: 4px;
+	border: 1px solid var(--vscode-widget-border);
+	background: var(--vscode-button-secondaryBackground);
+	color: var(--vscode-button-secondaryForeground);
+	cursor: pointer;
+	font-size: 12px;
+	line-height: 24px;
+	transition: background-color 0.1s ease, border-color 0.1s ease;
 }
 
-/*
- * Sessions-layer workspace picker visual override.
- *
- * Two cascading sources need to be defeated to match Mode/Model:
- *
- * 1. `.sessions-chat-picker-slot.sessions-chat-workspace-picker
- *    .action-label` (sessions-layer `chatWidget.css:244-269`) sets a
- *    welcome-flow visual: label 18px, inner span 18px, icons 16px,
- *    chevron, generous padding, `color: var(--vscode-foreground)`.
- *
- * 2. `.monaco-action-bar .action-label` (actionbar.css:48) sets the
- *    base toolbar font-size to **11px**. This is what Mode/Model
- *    inherit. They don't set font-size themselves. The action bar
- *    base rule wins for their `.action-label`. The workspace picker's
- *    own sessions-layer rule (source 1) overrides that base, so we
- *    need to put the 11px back explicitly. `font-size: inherit`
- *    does NOT work because none of `.sessions-chat-picker-slot`'s
- *    ancestors carry an 11px font-size. The 11px lives on sibling
- *    `.action-label` elements via `.monaco-action-bar .action-label`,
- *    not on an ancestor we can inherit from.
- *
- * Result: match the 11px base, neutralize the welcome-flow oversizing,
- * keep the Mode/Model color (`var(--vscode-icon-foreground)`), match
- * the chip metrics from `.chat-input-toolbar .chat-input-picker-item
- * .action-label` (chat.css:1822), and hide the chevron (Mode/Model
- * don't render one).
- *
- * Scoped to `.automation-form-prompt-host` so the welcome view's
- * standalone workspace picker keeps its larger sizing.
- */
-.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label {
-	height: 16px;
-	padding: 3px 6px;
-	font-size: 11px;
-	line-height: normal;
-	color: var(--vscode-icon-foreground);
+.ai-customization-management-editor .editor-mode-button:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
 }
 
-.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label .sessions-chat-dropdown-label {
-	font-size: inherit;
-	line-height: inherit;
+.ai-customization-management-editor .editor-mode-button:focus-visible {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: 1px;
 }
 
-.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label > .codicon:not(.sessions-chat-dropdown-chevron) {
-	font-size: 12px;
+.ai-customization-management-editor .editor-preview-container,
+.ai-customization-management-editor .embedded-editor-container {
+	flex: 1;
+	margin-top: 8px;
+	min-height: 0;
+	overflow: hidden;
 }
 
-/*
- * Mode and Model pickers in this toolbar don't render a dropdown
- * chevron. They are recognized as chips by their padding + hover. Hide
- * the chevron that `_renderTriggerLabel` always appends so the
- * workspace chip reads the same way.
- */
-.automation-form-prompt-host .chat-input-toolbar .sessions-chat-picker-slot.sessions-chat-workspace-picker .action-label .sessions-chat-dropdown-chevron {
-	display: none;
+.ai-customization-management-editor .editor-preview-container {
+	background: var(--vscode-editor-background);
+	overflow: hidden;
+}
+
+.ai-customization-management-editor .editor-preview-scroll-container {
+	height: 100%;
+	overflow: auto;
+	padding: 16px;
+	box-sizing: border-box;
+	outline: none;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 }
 
-.automation-form-row {
+.ai-customization-management-editor .editor-preview-section {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: 10px;
 }
 
-.automation-form-row.automation-form-checkbox-row {
-	flex-direction: row;
-	align-items: center;
-	gap: 8px;
-	margin-top: 2px;
-	padding-top: 10px;
-	border-top: 1px solid var(--vscode-widget-border, transparent);
-}
-
-/*
- * Lay the Schedule / Time / Day controls along a single horizontal axis.
- * Each control lives in its own `.automation-form-schedule-group`
- * (label-above-control flex column). Time and Day join the row only
- * when the interval is daily or weekly; flex-wrap keeps the layout
- * stable if a translation pushes the row past the dialog width.
- */
-.automation-form-row.automation-form-schedule-row {
-	flex-direction: row;
-	align-items: flex-end;
-	flex-wrap: wrap;
-	gap: 12px;
+.ai-customization-management-editor .editor-preview-frontmatter-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
 }
 
-.automation-form-schedule-group {
+.ai-customization-management-editor .editor-preview-row {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
-	/*
-	 * Each visible group splits the schedule row equally. Hidden
-	 * groups (`display: none` from `applyIntervalVisibility`) drop out
-	 * of flex distribution, so:
-	 *   - manual / hourly → Schedule fills 100% of the row
-	 *   - daily          → Schedule + Time split 50/50
-	 *   - weekly         → Schedule + Time + Day split 33/33/33
-	 * `min-width: 0` lets the contained SelectBox shrink past its
-	 * intrinsic content width when the row is narrow, before the
-	 * row's `flex-wrap: wrap` kicks in as a final safety net.
-	 */
-	flex: 1 1 0;
-	min-width: 0;
+	gap: 6px;
+	padding: 10px 12px;
+	background: var(--vscode-editorWidget-background);
+	border: 1px solid var(--vscode-widget-border);
+	border-radius: 6px;
 }
 
-/* SelectBox container sizing. Give Schedule / Time / Day the full
- * width of their parent group (which itself flex-shares the row).
- *
- * `.monaco-select-box` ships with no intrinsic padding or height (the
- * only baked-in metrics live in the `.monaco-action-bar .action-item`
- * selector, which we're not inside of). Mirror the standalone-form
- * pattern used by the settings editor (`settingsEditor2.css:689-694`).
- * It uses `height: 26px` and `padding: 2px 6px`. This makes the dropdowns match the
- * Name InputBox above them instead of reading as toolbar widgets
- * crammed into a form. */
-.automation-form-schedule-select-container {
+.ai-customization-management-editor .editor-preview-row-header {
 	display: flex;
-	min-width: 0;
-	width: 100%;
+	align-items: center;
+	gap: 8px;
 }
 
-.automation-form-schedule-select-container .monaco-select-box {
-	height: 26px;
-	padding: 2px 8px;
-}
-
-/*
- * Form-row labels read as section titles ("Name", "Schedule", "Time",
- * "Day of week", "Prompt"). Mirror the established agents
- * design-system section-label pattern (see `.overview-section
- * .section-label` at line ~734: label1 / fontWeight-medium /
- * foreground) so the labels carry visual weight as section headings
- * and clearly out-rank their controls.
- *
- * `margin-bottom` adds breathing room between the title text and
- * its control so each form row reads as a discrete section.
- */
-.automation-form-label {
-	font-size: var(--vscode-agents-fontSize-label1);
-	font-weight: var(--vscode-agents-fontWeight-semiBold);
+.ai-customization-management-editor .editor-preview-row-key {
+	font-size: 12px;
+	font-weight: 600;
 	color: var(--vscode-foreground);
-	line-height: 1.4;
-	margin-bottom: 2px;
-	cursor: default;
+	font-family: var(--monaco-monospace-font);
 }
 
-.automation-form-hint {
-	font-size: var(--vscode-agents-fontSize-body2, 11px);
+.ai-customization-management-editor .editor-preview-row-help {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	border: none;
+	border-radius: 999px;
+	background: transparent;
 	color: var(--vscode-descriptionForeground);
-	line-height: 1.4;
-	min-height: 1em;
-}
-
-.automation-form-checkbox-label {
-	font-size: var(--vscode-agents-fontSize-body1, 13px);
-	color: var(--vscode-foreground);
 	cursor: pointer;
 }
 
-/*
- * Host for the native `InputBox` widget. The widget owns its own
- * `<input>` and styling (border, padding, focus ring); the host just
- * lets it grow to the row width.
- */
-.automation-form-input-host {
-	display: flex;
-	width: 100%;
+.ai-customization-management-editor .editor-preview-row-help:hover {
+	background: var(--vscode-toolbar-hoverBackground);
+	color: var(--vscode-foreground);
 }
 
-.automation-form-input-host > .monaco-inputbox {
-	flex: 1 1 auto;
-	min-width: 0;
+.ai-customization-management-editor .editor-preview-row-help:focus-visible {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: 1px;
 }
 
-.automation-form-input,
-.automation-form-select,
-.automation-form-textarea {
-	font-family: inherit;
-	font-size: var(--vscode-agents-fontSize-body1, 13px);
-	color: var(--vscode-settings-textInputForeground, var(--vscode-input-foreground));
-	background-color: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
-	border: 1px solid var(--vscode-settings-textInputBorder, var(--vscode-input-border, var(--vscode-contrastBorder, transparent)));
-	border-radius: 2px;
-	padding: 4px 6px;
-	box-sizing: border-box;
-	width: 100%;
-	min-height: 26px;
+.ai-customization-management-editor .editor-preview-row-help-icon {
+	font-size: 14px;
+	line-height: 14px;
 }
 
-.automation-form-select {
-	color: var(--vscode-settings-dropdownForeground, var(--vscode-dropdown-foreground));
-	background-color: var(--vscode-settings-dropdownBackground, var(--vscode-dropdown-background));
-	border-color: var(--vscode-settings-dropdownBorder, var(--vscode-dropdown-border, var(--vscode-contrastBorder, transparent)));
+.ai-customization-management-editor .editor-preview-row-value {
+	font-size: var(--vscode-fontSize-body1);
+	line-height: 1.5;
+	color: var(--vscode-foreground);
+	white-space: pre-wrap;
+	word-break: break-word;
 }
 
-.automation-form-textarea {
-	resize: vertical;
-	min-height: 60px;
-	line-height: 1.4;
+.ai-customization-management-editor .editor-preview-row-value.multiline {
+	font-family: var(--monaco-monospace-font);
+	font-size: 12px;
 }
 
-.automation-form-input:focus,
-.automation-form-select:focus,
-.automation-form-textarea:focus {
-	outline: 1px solid var(--vscode-focusBorder);
-	outline-offset: -1px;
-	border-color: var(--vscode-focusBorder);
+.ai-customization-management-editor .editor-preview-body-content {
+	padding: 12px 14px;
+	background: var(--vscode-editorWidget-background);
+	border: 1px solid var(--vscode-widget-border);
+	border-radius: 6px;
 }
 
-.automation-form-empty {
-	font-size: 12px;
-	color: var(--vscode-errorForeground);
-	padding: 6px 0;
-}
-
-/*
- * Folder picker. This uses the shared `WorkspacePicker` from the sessions
- * layer (see `sessionWorkspacePicker.ts`). The picker renders an
- * `<a.action-label>` chip trigger inside
- * `.sessions-chat-picker-slot.sessions-chat-workspace-picker`. We restyle
- * it to fit the dialog's compact, 13px form scale. The upstream styling
- * lives in `sessions/contrib/chat/browser/media/chatWidget.css` and is
- * sized for the new-session "hero" UI (18px font, larger chip) which is
- * too large for our modal.
- *
- * The dropdown content itself renders through `IActionWidgetService`,
- * which has its own global CSS. No overrides needed here.
- */
-/*
- * Isolation + branch group: parented into the chat input's
- * `.chat-secondary-toolbar` so it sits at the bottom-right of the chat
- * input, sharing a row with `Copilot CLI | Default Approvals`.
- * `margin-left: auto` pushes the group to the right edge within that
- * flex row.
- *
- * Visual styling mirrors the new-session view's
- * `.new-chat-bottom-container` chip vocabulary (see
- * `sessions/contrib/chat/browser/media/chatWidget.css` lines 178-209):
- * 16px tall, 11px font, 12px codicons, icon-foreground color, no
- * border. The `|` divider between the Folder chip and the branch slot
- * uses the same `box-shadow: -5px 0 0 -4px var(--vscode-editorWidget-border)`
- * trick the new-session row uses to draw a 1px vertical separator
- * without adding a DOM element.
- *
- * Communicates *where* the automation will run. It is presentational only (no
- * click handler, no keyboard target).
- */
-.automation-form-prompt-host .chat-secondary-toolbar .automation-form-isolation-group {
-	display: inline-flex;
-	align-items: center;
-	margin-left: auto;
-	min-width: 0;
-	gap: 5px;
+.ai-customization-management-editor .editor-preview-body-content > :first-child {
+	margin-top: 0;
 }
 
-.automation-form-prompt-host .automation-form-isolation-chip,
-.automation-form-prompt-host .automation-form-branch-slot {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	height: 16px;
-	padding: 3px 6px;
-	font-size: 11px;
-	color: var(--vscode-icon-foreground);
-	background: transparent;
-	border: none;
-	min-width: 0;
+.ai-customization-management-editor .editor-preview-body-content > :last-child {
+	margin-bottom: 0;
 }
 
-.automation-form-prompt-host .automation-form-isolation-chip > .codicon,
-.automation-form-prompt-host .automation-form-branch-slot > .codicon {
+.ai-customization-management-editor .editor-preview-empty-state {
+	padding: 12px 14px;
+	background: var(--vscode-editorWidget-background);
+	border: 1px dashed var(--vscode-widget-border);
+	border-radius: 6px;
+	color: var(--vscode-descriptionForeground);
 	font-size: 12px;
-	color: var(--vscode-icon-foreground);
-	flex-shrink: 0;
 }
 
-.automation-form-prompt-host .automation-form-isolation-chip {
-	cursor: pointer;
-	border-radius: var(--vscode-cornerRadius-small);
+.ai-customization-management-editor .editor-preview-issues-box {
+	padding: 12px 14px;
+	background: var(--vscode-inputValidation-warningBackground);
+	border: 1px solid var(--vscode-inputValidation-warningBorder);
+	border-radius: 6px;
+	color: var(--vscode-inputValidation-warningForeground);
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 }
 
-.automation-form-prompt-host .automation-form-isolation-chip:not(.automation-form-isolation-chip-disabled):hover {
-	background-color: var(--vscode-toolbar-hoverBackground);
-	color: var(--vscode-foreground);
+.ai-customization-management-editor .editor-preview-issues-title {
+	font-size: 12px;
+	font-weight: 600;
 }
 
-.automation-form-prompt-host .automation-form-isolation-chip-disabled {
-	cursor: default;
+.ai-customization-management-editor .editor-preview-issues-description,
+.ai-customization-management-editor .editor-preview-issues-list {
+	font-size: 12px;
+	line-height: 1.4;
 }
 
-.automation-form-prompt-host .automation-form-isolation-label,
-.automation-form-prompt-host .automation-form-branch-name {
-	font-size: 11px;
+.ai-customization-management-editor .editor-preview-issues-list {
+	margin: 0;
+	padding-left: 18px;
 }
 
-.automation-form-prompt-host .automation-form-branch-name {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.ai-customization-management-editor .embedded-editor-container .monaco-editor {
+	border-radius: 4px;
 }
 
-/* Mirror the new-session `|` divider between repo-config chips:
- * `box-shadow: -5px 0 0 -4px var(--vscode-editorWidget-border)` paints
- * a 1px-wide bar in the gap to the chip's left. */
-.automation-form-prompt-host .automation-form-isolation-group > .automation-form-branch-slot {
-	box-shadow: -5px 0 0 -4px var(--vscode-editorWidget-border);
+/* Initial open transition: a subtle fade + lift plays once when the editor
+pane is first mounted. View switches inside the modal are not animated. */
+.ai-customization-management-editor {
+	animation: ai-customization-view-enter 160ms ease-out;
 }
 
-.automation-form-prompt-host .chat-secondary-toolbar .automation-form-harness-chip {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	height: 16px;
-	padding: 3px 6px;
-	font-size: 11px;
-	color: var(--vscode-icon-foreground);
-	background: transparent;
-	border: none;
-	opacity: 0.6;
-	cursor: default;
+@keyframes ai-customization-view-enter {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }
 
-.automation-form-prompt-host .automation-form-harness-chip > .codicon {
-	font-size: 12px;
-	flex-shrink: 0;
+@media (prefers-reduced-motion: reduce) {
+	.ai-customization-management-editor {
+		animation: none;
+	}
 }
 
-.automation-form-prompt-host .automation-form-harness-label {
-	font-size: 11px;
-}
+/* Welcome page styles live in the welcome page variant stylesheets. */
 
-/* Missing-branch state (no folder / no git repo / detached / empty): use
- * description-foreground + italic so it visually reads as "informational
- * placeholder, not a real ref name". */
-.automation-form-prompt-host .automation-form-branch-slot.automation-form-branch-missing,
-.automation-form-prompt-host .automation-form-branch-slot.automation-form-branch-missing > .codicon {
-	color: var(--vscode-descriptionForeground);
+/* Migrations dashboard scroll container */
+.ai-customization-management-editor .prompt-migration-content-container.showing-dashboard {
+	padding: 0;
 }
 
-.automation-form-prompt-host .automation-form-branch-slot.automation-form-branch-missing .automation-form-branch-name {
-	font-style: italic;
+.ai-customization-management-editor .customization-migration-dashboard-scrollable {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+	width: 100%;
 }
 
-.automations-list-widget .automations-row-folder {
-	color: var(--vscode-descriptionForeground);
-	white-space: nowrap;
+.ai-customization-management-editor .customization-migration-dashboard-container {
+	position: absolute;
+	inset: 0;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	max-width: 240px;
+	box-sizing: border-box;
+	padding: 0 var(--vscode-spacing-size160) 0 0;
 }