diff --git a/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts b/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts index 3047046e65223..d395911febea4 100644 --- a/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts +++ b/src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationListWidget.ts @@ -49,6 +49,8 @@ import { ICommandService } from '../../../../../platform/commands/common/command import { IAICustomizationListItem } from './aiCustomizationItemSource.js'; import { IAICustomizationItemsModel, ItemsModelSection } from './aiCustomizationItemsModel.js'; import { createCustomizationCardPrimaryAction, CustomizationCardListController } from './customizationCardList.js'; +import { DomScrollableElement } from '../../../../../base/browser/ui/scrollbar/scrollableElement.js'; +import { ScrollbarVisibility } from '../../../../../base/common/scrollable.js'; export { truncateToFirstLine } from './aiCustomizationListWidgetUtils.js'; @@ -615,7 +617,8 @@ export class AICustomizationListWidget extends Disposable { private listContainer!: HTMLElement; private list!: WorkbenchList; private cardContainer!: HTMLElement; - private cardScrollElement: HTMLElement | undefined; + private cardScrollable!: DomScrollableElement; + private cardScrollableNode!: HTMLElement; private firstCardFocusElement: HTMLElement | undefined; private readonly cardRowsByUri = new Map(); private readonly cardRowsById = new Map(); @@ -781,7 +784,23 @@ export class AICustomizationListWidget extends Disposable { this._register(this.addButton.onDidClick(() => this.executePrimaryCreateAction())); this.cardContainer = DOM.append(this.element, $('.plugin-card-container.customization-card-container')); - this.cardContainer.style.display = 'none'; + this.cardScrollable = this._register(new DomScrollableElement(this.cardContainer, { + horizontal: ScrollbarVisibility.Hidden, + vertical: ScrollbarVisibility.Auto, + useShadows: false, + })); + this._register(DOM.addDisposableListener(this.cardContainer, DOM.EventType.SCROLL, () => { + this.cardScrollable.setScrollPosition({ scrollTop: this.cardContainer.scrollTop }); + })); + this.cardScrollableNode = this.cardScrollable.getDomNode(); + this.cardScrollableNode.classList.add('plugin-card-scrollable'); + this.cardScrollableNode.style.display = 'none'; + this.element.appendChild(this.cardScrollableNode); + const cardResizeObserver = this._register(new DOM.DisposableResizeObserver( + 'AICustomizationListWidget.cardScrollable', + () => this.cardScrollable.scanDomNode(), + )); + this._register(cardResizeObserver.observe(this.cardScrollableNode)); // List container this.listContainer = DOM.append(this.element, $('.list-container')); @@ -1572,10 +1591,9 @@ export class AICustomizationListWidget extends Disposable { this.cardRowsByUri.clear(); this.cardRowsById.clear(); this.cardMenuButtonsById.clear(); - this.cardScrollElement = undefined; this.firstCardFocusElement = undefined; DOM.clearNode(this.cardContainer); - this.cardContainer.style.display = 'none'; + this.cardScrollableNode.style.display = 'none'; this.updateEmptyState(); return; } @@ -1594,8 +1612,8 @@ export class AICustomizationListWidget extends Disposable { DOM.clearNode(this.cardContainer); this.listContainer.style.display = 'none'; this.emptyStateContainer.style.display = 'none'; - this.cardContainer.style.display = ''; - const content = this.cardScrollElement = DOM.append(this.cardContainer, $('.plugin-card-scroll.customization-card-scroll')); + this.cardScrollableNode.style.display = ''; + const content = DOM.append(this.cardContainer, $('.plugin-card-scroll.plugin-card-scroll-content.customization-card-scroll')); for (const group of visibleGroups) { const section = DOM.append(content, $('.plugin-card-section.customization-card-section')); @@ -1628,6 +1646,7 @@ export class AICustomizationListWidget extends Disposable { } cardList.finalize(); } + this.cardScrollable.scanDomNode(); if (shouldRestoreFocus) { DOM.getWindow(this.element).requestAnimationFrame(() => { (this.cardMenuButtonsById.get(focusItemId ?? '') ?? this.cardRowsById.get(focusItemId ?? '') ?? this.firstCardFocusElement)?.focus(); @@ -1884,7 +1903,7 @@ export class AICustomizationListWidget extends Disposable { private updateEmptyState(): void { const hasItems = this.displayEntries.length > 0; if (!hasItems) { - this.cardContainer.style.display = 'none'; + this.cardScrollableNode.style.display = 'none'; this.emptyStateContainer.style.display = 'flex'; this.listContainer.style.display = 'none'; @@ -1901,7 +1920,7 @@ export class AICustomizationListWidget extends Disposable { } else { this.emptyStateContainer.style.display = 'none'; this.listContainer.style.display = this.usesCardLayout() ? 'none' : ''; - this.cardContainer.style.display = this.usesCardLayout() ? '' : 'none'; + this.cardScrollableNode.style.display = this.usesCardLayout() ? '' : 'none'; } } @@ -1976,9 +1995,7 @@ export class AICustomizationListWidget extends Disposable { */ revealLastItem(): void { if (this.usesCardLayout()) { - if (this.cardScrollElement) { - this.cardScrollElement.scrollTop = this.cardScrollElement.scrollHeight; - } + this.cardScrollable.setScrollPosition({ scrollTop: this.cardContainer.scrollHeight }); return; } if (this.displayEntries.length > 0) { @@ -2049,9 +2066,11 @@ export class AICustomizationListWidget extends Disposable { const availableHeight = this.element.clientHeight || height; const listHeight = Math.max(0, availableHeight - searchBarHeight - headerHeight); - this.cardContainer.style.height = `${listHeight}px`; + this.cardScrollableNode.style.height = `${listHeight}px`; this.listContainer.style.height = `${listHeight}px`; - if (!this.usesCardLayout()) { + if (this.usesCardLayout()) { + this.cardScrollable.scanDomNode(); + } else { this.list.layout(listHeight, width); } } diff --git a/src/vs/workbench/contrib/chat/browser/aiCustomization/mcpListWidget.ts b/src/vs/workbench/contrib/chat/browser/aiCustomization/mcpListWidget.ts index 889110336982f..5a5ae3ab13eda 100644 --- a/src/vs/workbench/contrib/chat/browser/aiCustomization/mcpListWidget.ts +++ b/src/vs/workbench/contrib/chat/browser/aiCustomization/mcpListWidget.ts @@ -55,6 +55,8 @@ import { Range } from '../../../../../editor/common/core/range.js'; import { IMcpServerConfiguration, McpServerType } from '../../../../../platform/mcp/common/mcpPlatformTypes.js'; import { createWorkbenchMcpServerDetailInput, IMcpServerDetailInput } from './embeddedMcpServerDetail.js'; import { createCustomizationCardPrimaryAction, CustomizationCardListController } from './customizationCardList.js'; +import { DomScrollableElement } from '../../../../../base/browser/ui/scrollbar/scrollableElement.js'; +import { ScrollbarVisibility } from '../../../../../base/common/scrollable.js'; const $ = DOM.$; @@ -1062,6 +1064,8 @@ export class McpListWidget extends Disposable { private searchAndButtonContainer!: HTMLElement; private searchInput!: InputBox; private cardContainer!: HTMLElement; + private cardScrollable!: DomScrollableElement; + private cardScrollableNode!: HTMLElement; private emptyContainer!: HTMLElement; private emptyText!: HTMLElement; private emptySubtext!: HTMLElement; @@ -1084,7 +1088,6 @@ export class McpListWidget extends Disposable { private visible = false; private mcpAccessEnabled = false; private firstCardFocusElement: HTMLElement | undefined; - private cardScrollElement: HTMLElement | undefined; private availableSection: HTMLElement | undefined; private narrowLayout = false; private wideLayout = false; @@ -1251,8 +1254,24 @@ export class McpListWidget extends Disposable { disabledText.textContent = localize('mcpAccessDisabledTitle', "MCP servers are disabled"); this.disabledMessage = DOM.append(this.disabledContainer, $('.empty-subtext')); - this.cardContainer = DOM.append(this.element, $('.plugin-card-container')); - this.cardContainer.style.display = 'none'; + this.cardContainer = $('.plugin-card-container'); + this.cardScrollable = this._register(new DomScrollableElement(this.cardContainer, { + horizontal: ScrollbarVisibility.Hidden, + vertical: ScrollbarVisibility.Auto, + useShadows: false, + })); + this._register(DOM.addDisposableListener(this.cardContainer, DOM.EventType.SCROLL, () => { + this.cardScrollable.setScrollPosition({ scrollTop: this.cardContainer.scrollTop }); + })); + this.cardScrollableNode = this.cardScrollable.getDomNode(); + this.cardScrollableNode.classList.add('plugin-card-scrollable'); + this.cardScrollableNode.style.display = 'none'; + this.element.appendChild(this.cardScrollableNode); + const cardResizeObserver = this._register(new DOM.DisposableResizeObserver( + 'McpListWidget.cardScrollable', + () => this.cardScrollable.scanDomNode(), + )); + this._register(cardResizeObserver.observe(this.cardScrollableNode)); // Listen to MCP service changes this._register(this.mcpWorkbenchService.onChange(() => { @@ -1420,16 +1439,27 @@ export class McpListWidget extends Disposable { private showCardSurface(): void { this.emptyContainer.style.display = 'none'; - this.cardContainer.style.display = ''; + this.cardScrollableNode.style.display = ''; } private showEmptySurface(message: string, detail: string): void { - this.cardContainer.style.display = 'none'; + this.cardScrollableNode.style.display = 'none'; this.emptyContainer.style.display = 'flex'; this.emptyText.textContent = message; this.emptySubtext.textContent = detail; } + private createCardScrollContent(...classNames: string[]): HTMLElement { + const content = DOM.append(this.cardContainer, $('.plugin-card-scroll.plugin-card-scroll-content')); + content.classList.add(...classNames); + const resizeObserver = this.cardDisposables.add(new DOM.DisposableResizeObserver( + 'McpListWidget.cardScrollContent', + () => this.cardScrollable.scanDomNode(), + )); + this.cardDisposables.add(resizeObserver.observe(content)); + return content; + } + private addSurfaceActivation(surface: HTMLElement, label: string, callback: () => void, ...classNames: string[]): HTMLButtonElement { const primaryAction = createCustomizationCardPrimaryAction(surface, label, ...classNames); this.firstCardFocusElement ??= primaryAction; @@ -1471,7 +1501,7 @@ export class McpListWidget extends Disposable { DOM.clearNode(this.cardContainer); this.showCardSurface(); - const content = this.cardScrollElement = DOM.append(this.cardContainer, $('.plugin-card-scroll')); + const content = this.createCardScrollContent(); this.renderFeaturedServers(content); const installedList = this.renderCardSection( @@ -1838,7 +1868,7 @@ export class McpListWidget extends Disposable { this.availableSection = undefined; DOM.clearNode(this.cardContainer); this.showCardSurface(); - const content = this.cardScrollElement = DOM.append(this.cardContainer, $('.plugin-card-scroll.plugin-search-results')); + const content = this.createCardScrollContent('plugin-search-results'); if (this.installedEntries.length > 0) { const installedList = this.renderCardSection(content, localize('installedSearchHeader', "Installed"), undefined, 'installed-mcp-servers-section', this.installedEntries.length); installedList.classList.add('plugin-inventory-list'); @@ -2003,7 +2033,8 @@ export class McpListWidget extends Disposable { this.lastHeaderHeight = headerHeight; const listHeight = Math.max(0, availableHeight - searchBarHeight - headerHeight); - this.cardContainer.style.height = `${listHeight}px`; + this.cardScrollableNode.style.height = `${listHeight}px`; + this.cardScrollable.scanDomNode(); } /** @@ -2017,16 +2048,14 @@ export class McpListWidget extends Disposable { * Scrolls the list so the last item is visible. */ revealLastItem(): void { - if (this.cardScrollElement) { - this.cardScrollElement.scrollTop = this.cardScrollElement.scrollHeight; - } + this.cardScrollable.setScrollPosition({ scrollTop: this.cardContainer.scrollHeight }); } /** * Focuses the list. */ focus(): void { - if (this.cardContainer.style.display !== 'none') { + if (this.cardScrollableNode.style.display !== 'none') { this.firstCardFocusElement?.focus(); } } diff --git a/src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css b/src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css index 18ab773f1e98d..8b5104713385d 100644 --- a/src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css +++ b/src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css @@ -448,7 +448,7 @@ .ai-customization-list-widget .list-container { flex: 1; min-height: 0; - overflow: auto; + overflow: hidden; } .ai-customization-list-widget .list-empty-message { @@ -1336,6 +1336,9 @@ per-word capitalization does not survive translation. */ position: relative; flex: 1; min-height: 0; + width: 100%; + max-width: calc(840px + var(--vscode-spacing-size160)); + margin: 0 auto; } /* The scrolled element: bound it to the wrapper so clientHeight < scrollHeight when content overflows. */ @@ -1346,7 +1349,7 @@ per-word capitalization does not survive translation. */ display: flex; flex-direction: column; gap: var(--vscode-spacing-size240); - padding: 0 max(var(--vscode-spacing-size20), calc((100% - 840px) / 2)) var(--vscode-spacing-size200); + padding: 0 var(--vscode-spacing-size160) var(--vscode-spacing-size200) 0; box-sizing: border-box; } @@ -2769,6 +2772,20 @@ per-word capitalization does not survive translation. */ overflow: hidden; } +.plugin-list-widget .plugin-card-scrollable { + position: relative; + flex: 1; + min-height: 0; + width: 100%; + max-width: calc(840px + var(--vscode-spacing-size160)); + margin: 0 auto; +} + +.plugin-list-widget .plugin-card-scrollable > .plugin-card-container { + position: absolute; + inset: 0; +} + .plugin-list-widget .plugin-card-scroll { height: 100%; overflow: auto; @@ -2776,6 +2793,12 @@ per-word capitalization does not survive translation. */ box-sizing: border-box; } +.plugin-list-widget .plugin-card-scroll-content { + height: auto; + overflow: visible; + padding: 0 var(--vscode-spacing-size160) var(--vscode-spacing-size200) 0; +} + .plugin-list-widget .plugin-marketplace-back-container { flex-shrink: 0; display: flex; diff --git a/src/vs/workbench/contrib/chat/browser/aiCustomization/pluginListWidget.ts b/src/vs/workbench/contrib/chat/browser/aiCustomization/pluginListWidget.ts index 69a83b62e2650..0885ce840f8b4 100644 --- a/src/vs/workbench/contrib/chat/browser/aiCustomization/pluginListWidget.ts +++ b/src/vs/workbench/contrib/chat/browser/aiCustomization/pluginListWidget.ts @@ -47,6 +47,8 @@ import { getErrorMessage } from '../../../../../base/common/errors.js'; import { getPluginInclusionLabel } from './aiCustomizationPresentation.js'; import { status } from '../../../../../base/browser/ui/aria/aria.js'; import { createCustomizationCardPrimaryAction, CustomizationCardListController } from './customizationCardList.js'; +import { DomScrollableElement } from '../../../../../base/browser/ui/scrollbar/scrollableElement.js'; +import { ScrollbarVisibility } from '../../../../../base/common/scrollable.js'; const $ = DOM.$; @@ -634,6 +636,8 @@ export class PluginListWidget extends Disposable { private searchAndButtonContainer!: HTMLElement; private searchInput!: InputBox; private cardContainer!: HTMLElement; + private cardScrollable!: DomScrollableElement; + private cardScrollableNode!: HTMLElement; private listContainer!: HTMLElement; private list!: WorkbenchList; private emptyContainer!: HTMLElement; @@ -858,8 +862,24 @@ export class PluginListWidget extends Disposable { disabledText.textContent = localize('pluginsDisabledTitle', "Plugins are disabled"); this.disabledMessage = DOM.append(this.disabledContainer, $('.empty-subtext')); - this.cardContainer = DOM.append(this.element, $('.plugin-card-container')); - this.cardContainer.style.display = 'none'; + this.cardContainer = $('.plugin-card-container'); + this.cardScrollable = this._register(new DomScrollableElement(this.cardContainer, { + horizontal: ScrollbarVisibility.Hidden, + vertical: ScrollbarVisibility.Auto, + useShadows: false, + })); + this._register(DOM.addDisposableListener(this.cardContainer, DOM.EventType.SCROLL, () => { + this.cardScrollable.setScrollPosition({ scrollTop: this.cardContainer.scrollTop }); + })); + this.cardScrollableNode = this.cardScrollable.getDomNode(); + this.cardScrollableNode.classList.add('plugin-card-scrollable'); + this.cardScrollableNode.style.display = 'none'; + this.element.appendChild(this.cardScrollableNode); + const cardResizeObserver = this._register(new DOM.DisposableResizeObserver( + 'PluginListWidget.cardScrollable', + () => this.cardScrollable.scanDomNode(), + )); + this._register(cardResizeObserver.observe(this.cardScrollableNode)); // List container this.listContainer = DOM.append(this.element, $('.mcp-list-container')); @@ -1180,15 +1200,26 @@ export class PluginListWidget extends Disposable { private showCardSurface(): void { this.emptyContainer.style.display = 'none'; this.listContainer.style.display = 'none'; - this.cardContainer.style.display = ''; + this.cardScrollableNode.style.display = ''; } private showEmptySurface(): void { - this.cardContainer.style.display = 'none'; + this.cardScrollableNode.style.display = 'none'; this.listContainer.style.display = 'none'; this.emptyContainer.style.display = 'flex'; } + private createCardScrollContent(...classNames: string[]): HTMLElement { + const content = DOM.append(this.cardContainer, $('.plugin-card-scroll.plugin-card-scroll-content')); + content.classList.add(...classNames); + const resizeObserver = this.cardDisposables.add(new DOM.DisposableResizeObserver( + 'PluginListWidget.cardScrollContent', + () => this.cardScrollable.scanDomNode(), + )); + this.cardDisposables.add(resizeObserver.observe(content)); + return content; + } + private addSurfaceActivation(surface: HTMLElement, label: string, callback: () => void, ...classNames: string[]): HTMLButtonElement { const primaryAction = createCustomizationCardPrimaryAction(surface, label, ...classNames); this.rememberCardFocusElement(primaryAction); @@ -1231,7 +1262,7 @@ export class PluginListWidget extends Disposable { DOM.clearNode(this.cardContainer); this.showCardSurface(); - const content = DOM.append(this.cardContainer, $('.plugin-card-scroll')); + const content = this.createCardScrollContent(); const installedPlugins = this.installedItems; this.renderDiscoverySnapshot(content); @@ -1587,7 +1618,7 @@ export class PluginListWidget extends Disposable { } this.showCardSurface(); - const content = DOM.append(this.cardContainer, $('.plugin-card-scroll')); + const content = this.createCardScrollContent(); const recommendedKeys = this.pluginMarketplaceService.recommendedPlugins.get(); const recommended = marketplaceItems.filter(item => recommendedKeys.has(getMarketplaceRecommendationKey(item))); const allPlugins = marketplaceItems.filter(item => !recommendedKeys.has(getMarketplaceRecommendationKey(item))); @@ -1905,7 +1936,7 @@ export class PluginListWidget extends Disposable { this.firstCardFocusElement = undefined; DOM.clearNode(this.cardContainer); this.showCardSurface(); - const content = DOM.append(this.cardContainer, $('.plugin-card-scroll.plugin-search-results')); + const content = this.createCardScrollContent('plugin-search-results'); if (installedCount > 0) { const installedList = this.renderCardSection(content, localize('installedSearchHeader', "Installed"), undefined, 'installed-plugins-section', installedCount); installedList.classList.add('plugin-inventory-list'); @@ -2053,9 +2084,10 @@ export class PluginListWidget extends Disposable { const backHeight = this.marketplaceBackContainer.offsetHeight; const listHeight = Math.max(0, height - searchBarHeight - headerHeight - backHeight); - this.cardContainer.style.height = `${listHeight}px`; + this.cardScrollableNode.style.height = `${listHeight}px`; this.listContainer.style.height = `${listHeight}px`; this.list.layout(listHeight, width); + this.cardScrollable.scanDomNode(); } focusSearch(): void { @@ -2063,13 +2095,17 @@ export class PluginListWidget extends Disposable { } revealLastItem(): void { + if (this.cardScrollableNode.style.display !== 'none') { + this.cardScrollable.setScrollPosition({ scrollTop: this.cardContainer.scrollHeight }); + return; + } if (this.list.length > 0) { this.list.reveal(this.list.length - 1); } } focus(): void { - if (this.cardContainer.style.display !== 'none') { + if (this.cardScrollableNode.style.display !== 'none') { this.firstCardFocusElement?.focus(); } else if (this.list.length > 0) { this.list.domFocus(); diff --git a/src/vs/workbench/test/browser/componentFixtures/sessions/aiCustomizationManagementEditor.fixture.ts b/src/vs/workbench/test/browser/componentFixtures/sessions/aiCustomizationManagementEditor.fixture.ts index d4ef84286f36e..bf315b158554a 100644 --- a/src/vs/workbench/test/browser/componentFixtures/sessions/aiCustomizationManagementEditor.fixture.ts +++ b/src/vs/workbench/test/browser/componentFixtures/sessions/aiCustomizationManagementEditor.fixture.ts @@ -1170,6 +1170,8 @@ async function renderEditor(ctx: ComponentFixtureContext, options: IRenderEditor if (options.scrollToBottom) { editor.revealLastItem(); + // Allow the 500ms hide delay and 800ms fade transition to complete. + await new Promise(resolve => setTimeout(resolve, 1400)); } if (options.migrationCategory) { @@ -2136,6 +2138,7 @@ export default defineThemedFixtureGroup({ path: 'chat/aiCustomizations/' }, { // Scrolled-to-bottom variants — verify last items are fully visible above footer PromptsTabScrolled: defineComponentFixture({ labels: { kind: 'screenshot' }, + virtualTime: { durationMs: 1500 }, render: ctx => renderEditor(ctx, { sessionResource: localSessionResource, selectedSection: AICustomizationManagementSection.Prompts, @@ -2145,6 +2148,7 @@ export default defineThemedFixtureGroup({ path: 'chat/aiCustomizations/' }, { McpServersTabScrolled: defineComponentFixture({ labels: { kind: 'screenshot' }, + virtualTime: { durationMs: 1500 }, render: ctx => renderEditor(ctx, { sessionResource: localSessionResource, selectedSection: AICustomizationManagementSection.McpServers, @@ -2154,6 +2158,7 @@ export default defineThemedFixtureGroup({ path: 'chat/aiCustomizations/' }, { PluginsTabScrolled: defineComponentFixture({ labels: { kind: 'screenshot' }, + virtualTime: { durationMs: 1500 }, render: ctx => renderEditor(ctx, { sessionResource: localSessionResource, selectedSection: AICustomizationManagementSection.Plugins, diff --git a/test/componentFixtures/blocks-ci-screenshots.md b/test/componentFixtures/blocks-ci-screenshots.md index b3f6d210a3800..0e7c987b6e402 100644 --- a/test/componentFixtures/blocks-ci-screenshots.md +++ b/test/componentFixtures/blocks-ci-screenshots.md @@ -7,16 +7,16 @@ ![screenshot](https://hediet-screenshots.azurewebsites.net/images/c13f82b9dbe63bd2450bb28f48d66704613bfa02a36b47c6a05a3c9b4d0b81ea) #### chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/6c26540ad074f1bb302f82ce39f5d1cce3478679bd385cc0e5b68c3b7d48c1c7) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/e268b39e5d6e416b04ef4d38c0bd5af7d4c2fbd65fccf525cdd39bb4c0a8b677) #### chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/a90405bc9ec5b34569c77e3d180f79b847afe6daa4668a72d158b9787cfc55bc) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/08799bed239d1dda65f4faf6a038c606dba9c4c24946271440f2c931da42da3d) #### chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/d51c5ae97416ae8983026c9436150ba766b2837d8794c113ab5891665df74561) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/3a83a9d7e75afeb186484f56b4ac280426db67149a9f4678090ed9b9e2a707ea) #### chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/e652f2a9309c421bf0a7c805160521ad2837e320fdec9e00393ff981a2eac014) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/b84b57c9751c608e2add0c47891dfa443036d3b72e8d8e090b51bd7230f1aaae) #### chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailUninstalled/Dark ![screenshot](https://hediet-screenshots.azurewebsites.net/images/a5c4c329b3df33c748b8cd46ba7585490b58b2d42fa71c25a44a7f327b344b1b) @@ -25,58 +25,58 @@ ![screenshot](https://hediet-screenshots.azurewebsites.net/images/b150bed8ecf034a2ac61bc46081007101d109ed98bc176824e045965dfff94da) #### chat/aiCustomizations/aiCustomizationManagementEditor/HooksEmptyWorkspace/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/34ca750e1747a1e89fbeaab3b755d1372ee503e009f4c2a32a4d7205742b3dce) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/bfdfa45f49cf147c63733f42db4f09bc28c5ea17c8f56d39a8e02d1855813be5) #### chat/aiCustomizations/aiCustomizationManagementEditor/HooksEmptyWorkspace/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/0a8c7e47a3dadf698e121c5bca782d5235ba9cfb205bfa1362307d4fea2e56f6) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/35ef986c0f72d6682a4fe7e690aab7e3d5a93409c0f030494b2fc23928b05644) #### chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetailNarrow/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/60660b23153246506d9710d0239c15292079b357def9bbc8d7f92b8184c058c4) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/381816517a26c12e647f06d53e86100e1c67445bb76ea60ee3dcd981ffeaa41d) #### chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetailNarrow/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/3a424b83224188683990741c5a50163601605069c5809ae8e60c01dbee749000) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/b8c214bd7418237091cedd35cb8e5abb117e9b0741c8c108000939306595e0ec) #### chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/818485b76cf89c4cd8951e5819820d764dbcb11505aa0c302cfe757b95981acd) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/74532b70cb20bf39b0b56f444c4bf5edd86cce9ba7716f023cf90f39e9654dd8) #### chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/9733bdf2e83f6c6442db4d1ced4634a93d8a292d78ae101cf263fea76f64053c) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/ca8da65e09bb1c6a09530522e70dd51d18ca870fa13f25506d0608a5505f04a2) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHome/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/52daa14b7b61fd8ea7a28f0db9acaa65dbd403a85078c03cc31c0c135101c236) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/a35248fe00e671dfa1613970c3d5c5c1cd8d898dfee4526f3595367fbb7cca81) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHome/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/94410e4c60912cfa7c8e58096d69c1f3e5d6dde2c5eb4ae17c356d29147c1850) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/bbeff84bd7f12045e3033d3df8b2f6e2d4feb30f1d02b3f92d38425fe6078b63) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHomeNarrow/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/11be24ce9bdb02eaa809b871ba506d469a745e42f8f11250903ddb6084f721db) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/e0b4dd4aafce49b83131fb5fcbc5458052695d5e9382d014edc411464527ca2a) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHomeNarrow/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/d451310e9fce1333215b6be7d258c5fc131a624a41198251d18b75e37d83d23e) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/8ba7ed9a14433d46c8aed5d7a5cc05047d1e9e18c2916be87c02b9a4cd1c73eb) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogSearch/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/84c453d09dae5b3b87205364370e55360812a425dda96123659ac15402c5dcb4) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/a30e32dae4d629b88694f3b482add3269620ad0ffad0c310056390bab3efb604) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogSearch/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/669e7d7c8d96c2076c8a576fa3a7e5c5cecf1f95671a675162eefad7a5ff3e11) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/4353419eb708c0d7ff8fe8a01a8ecb53c231020e7397995f390bca1f172129a0) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/e2d667dd5052de6eca13f0c07f7b4dfa768a4499cdb10885c6e3bb75b636324f) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/a49fc7f166a304ee372ccca3cd6e9e26688b0c80e1ec69fd734361b0221eee16) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/b1001378286b10e85c5ea0d38a2a39b781a2370e07f686182ac0f7f448f7c0b3) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/9fcc38b4e24fdfa58c30408dbdaf6d0054cc173dcf9e123d23112149be4f6ea1) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/e2d667dd5052de6eca13f0c07f7b4dfa768a4499cdb10885c6e3bb75b636324f) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/a49fc7f166a304ee372ccca3cd6e9e26688b0c80e1ec69fd734361b0221eee16) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/b1001378286b10e85c5ea0d38a2a39b781a2370e07f686182ac0f7f448f7c0b3) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/9fcc38b4e24fdfa58c30408dbdaf6d0054cc173dcf9e123d23112149be4f6ea1) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabNarrow/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/71c963b2ea1414b83ed3ad4da0c556197369d23d7f0b63806d0e2bf9f9b04127) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/498dd59bd46769e3ca7393f202f587789c17a2979b87ca378f20e37f333bdfd4) #### chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabNarrow/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/683eab172739819c9bac2d664ded814f40824de289ca4c3570b6d968bb04070c) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/f08f056b5a9843fc413b1105d5ede83a19961aa8d000158779068b94c72135d5) #### chat/aiCustomizations/aiCustomizationManagementEditor/PromptMigration/Dark ![screenshot](https://hediet-screenshots.azurewebsites.net/images/1d6f85fdd57fe38f105b261d64f2b3f54acd3cadf29d05ed216885dc7aadf30d) @@ -85,10 +85,10 @@ ![screenshot](https://hediet-screenshots.azurewebsites.net/images/a8929c0724d59231dc954fda808ef68226a5e78f09b66ea279e6150c3c39650c) #### chat/aiCustomizations/aiCustomizationManagementEditor/ToolsTab/Dark -![screenshot](https://hediet-screenshots.azurewebsites.net/images/1e100b00beb07383f488c73fcc79c855b4098ae24e46db01072f2be1ea954d88) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/afe68d55d548d3234536e2e69147f8c48de5dac0e1eb09b1ff656337c370d664) #### chat/aiCustomizations/aiCustomizationManagementEditor/ToolsTab/Light -![screenshot](https://hediet-screenshots.azurewebsites.net/images/43638fae9595c059725b43c1dd8db047e9f521c1f32e8bb06a7768c6d451ab36) +![screenshot](https://hediet-screenshots.azurewebsites.net/images/4f4bf2ba517c50d456a557fb27ff423cce77e24adf626754af2cb055dd931761) #### chat/aiCustomizations/aiCustomizationManagementEditor/UserDataMigration/Dark ![screenshot](https://hediet-screenshots.azurewebsites.net/images/b6806a0c2bed06ad703fdc1f42eb2ca50d8cc3027d9878f05905b276999f3568)