@theia/ai-ide 1.75.0-next.8 → 1.75.0

package/src/browser/ai-configuration/ai-configuration-widget.tsx

@@ -14,42 +14,66 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { BaseWidget, BoxLayout, codicon, DockPanel, WidgetManager } from '@theia/core/lib/browser';
-import { TheiaDockPanel } from '@theia/core/lib/browser/shell/theia-dock-panel';
+import { nls } from '@theia/core';
+import URI from '@theia/core/lib/common/uri';
+import { BaseWidget, BoxLayout, codicon, Message, NavigatableWidget, Panel, SplitPanel } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import { AIAgentConfigurationWidget } from './agent-configuration-widget';
-import { AIVariableConfigurationWidget } from './variable-configuration-widget';
-import { AIToolsConfigurationWidget } from './tools-configuration-widget';
-import { AISkillsConfigurationWidget } from './skills-configuration-widget';
+import { AI_CONFIGURATION_RESOURCE_URI } from './ai-configuration-resource';
+import { AiConfigurationCategoryId } from '@theia/ai-core-ui/lib/browser/ai-configuration/ai-configuration-category';
+import { AiConfigurationCategoryRegistry } from '@theia/ai-core-ui/lib/browser/ai-configuration/ai-configuration-category-registry';
+import { AiConfigurationSelectionModel } from '@theia/ai-core-ui/lib/browser/ai-configuration/ai-configuration-selection-model';
 import { AIConfigurationSelectionService } from './ai-configuration-service';
-import { nls } from '@theia/core';
-import { AIMCPConfigurationWidget } from '@theia/ai-mcp/lib/browser/mcp-configuration-widget';
-import { AITokenUsageConfigurationWidget } from './token-usage-configuration-widget';
-import { AIPromptFragmentsConfigurationWidget } from './prompt-fragments-configuration-widget';
-import { ModelAliasesConfigurationWidget } from './model-aliases-configuration-widget';
+import { AiConfigurationTreeWidget } from './ai-configuration-tree-widget';
+import { AiConfigurationDetailWidget } from './ai-configuration-detail-widget';
+import { AiConfigurationSearchWidget } from './ai-configuration-search-widget';
+
+/**
+ * Maps the legacy per-tab widget ids (still accepted by the `OPEN_AI_CONFIG_VIEW`
+ * command and the chat toolbar button) onto the new category ids, so those entry
+ * points keep working with the master–detail shell.
+ */
+const LEGACY_WIDGET_TO_CATEGORY_ID: Record<string, string> = {
+    'ai-agent-configuration-container-widget': AiConfigurationCategoryId.AGENTS,
+    'ai-variable-configuration-container-widget': AiConfigurationCategoryId.VARIABLES,
+    'ai-mcp-configuration-container-widget': AiConfigurationCategoryId.MCP_SERVERS,
+    'ai-token-usage-configuration-container-widget': AiConfigurationCategoryId.TOKEN_USAGE,
+    // The former prompt fragments tab listed every fragment; its variant sets are now part of the agent
+    // detail, so Prompt Snippets is the closest equivalent for a link that predates the rework.
+    'ai-prompt-fragments-configuration': AiConfigurationCategoryId.PROMPT_SNIPPETS,
+    'ai-tools-configuration-widget': AiConfigurationCategoryId.TOOLS,
+    'ai-skills-configuration-widget': AiConfigurationCategoryId.PROMPTS_AND_SKILLS,
+    'ai-model-aliases-configuration-widget': AiConfigurationCategoryId.MODEL_ALIASES
+};
 
 @injectable()
-export class AIConfigurationContainerWidget extends BaseWidget {
+export class AIConfigurationContainerWidget extends BaseWidget implements NavigatableWidget {
 
     static readonly ID = 'ai-configuration';
     static readonly LABEL = nls.localize('theia/ai/core/aiConfiguration/label', 'AI Configuration');
-    protected dockpanel: DockPanel;
 
-    @inject(TheiaDockPanel.Factory)
-    protected readonly dockPanelFactory: TheiaDockPanel.Factory;
-    @inject(WidgetManager)
-    protected readonly widgetManager: WidgetManager;
+    /** Constant resource URI so the shell renders Theia breadcrumbs for this view. */
+    getResourceUri(): URI | undefined {
+        return AI_CONFIGURATION_RESOURCE_URI;
+    }
+
+    createMoveToUri(): URI | undefined {
+        return undefined;
+    }
+
+    @inject(AiConfigurationSearchWidget)
+    protected readonly searchWidget: AiConfigurationSearchWidget;
+    @inject(AiConfigurationTreeWidget)
+    protected readonly treeWidget: AiConfigurationTreeWidget;
+    @inject(AiConfigurationDetailWidget)
+    protected readonly detailWidget: AiConfigurationDetailWidget;
+    @inject(AiConfigurationCategoryRegistry)
+    protected readonly registry: AiConfigurationCategoryRegistry;
+    @inject(AiConfigurationSelectionModel)
+    protected readonly selectionModel: AiConfigurationSelectionModel;
     @inject(AIConfigurationSelectionService)
     protected readonly aiConfigurationSelectionService: AIConfigurationSelectionService;
 
-    protected agentsWidget: AIAgentConfigurationWidget;
-    protected variablesWidget: AIVariableConfigurationWidget;
-    protected mcpWidget: AIMCPConfigurationWidget;
-    protected tokenUsageWidget: AITokenUsageConfigurationWidget;
-    protected promptFragmentsWidget: AIPromptFragmentsConfigurationWidget;
-    protected toolsWidget: AIToolsConfigurationWidget;
-    protected skillsWidget: AISkillsConfigurationWidget;
-    protected modelAliasesWidget: ModelAliasesConfigurationWidget;
+    protected bodyPanel: SplitPanel;
 
     @postConstruct()
     protected init(): void {
@@ -57,62 +81,70 @@ export class AIConfigurationContainerWidget extends BaseWidget {
         this.title.label = AIConfigurationContainerWidget.LABEL;
         this.title.caption = AIConfigurationContainerWidget.LABEL;
         this.title.closable = true;
-        this.addClass('theia-settings-container');
-        this.title.iconClass = codicon('hubot');
-        this.initUI();
+        this.title.iconClass = codicon('settings-gear');
+        this.addClass('ai-configuration-shell');
+        this.initLayout();
         this.initListeners();
     }
 
-    protected async initUI(): Promise<void> {
-        const layout = (this.layout = new BoxLayout({ direction: 'top-to-bottom', spacing: 0 }));
-        this.dockpanel = this.dockPanelFactory({
-            mode: 'multiple-document',
-            spacing: 0
-        });
-        BoxLayout.setStretch(this.dockpanel, 1);
-        layout.addWidget(this.dockpanel);
-        this.dockpanel.addClass('ai-configuration-widget');
-
-        this.agentsWidget = await this.widgetManager.getOrCreateWidget(AIAgentConfigurationWidget.ID);
-        this.variablesWidget = await this.widgetManager.getOrCreateWidget(AIVariableConfigurationWidget.ID);
-        this.mcpWidget = await this.widgetManager.getOrCreateWidget(AIMCPConfigurationWidget.ID);
-        this.tokenUsageWidget = await this.widgetManager.getOrCreateWidget(AITokenUsageConfigurationWidget.ID);
-        this.promptFragmentsWidget = await this.widgetManager.getOrCreateWidget(AIPromptFragmentsConfigurationWidget.ID);
-        this.toolsWidget = await this.widgetManager.getOrCreateWidget(AIToolsConfigurationWidget.ID);
-        this.skillsWidget = await this.widgetManager.getOrCreateWidget(AISkillsConfigurationWidget.ID);
-        this.modelAliasesWidget = await this.widgetManager.getOrCreateWidget(ModelAliasesConfigurationWidget.ID);
-
-        this.dockpanel.addWidget(this.agentsWidget);
-        this.dockpanel.addWidget(this.variablesWidget, { mode: 'tab-after', ref: this.agentsWidget });
-        this.dockpanel.addWidget(this.mcpWidget, { mode: 'tab-after', ref: this.variablesWidget });
-        this.dockpanel.addWidget(this.tokenUsageWidget, { mode: 'tab-after', ref: this.mcpWidget });
-        this.dockpanel.addWidget(this.promptFragmentsWidget, { mode: 'tab-after', ref: this.tokenUsageWidget });
-        this.dockpanel.addWidget(this.toolsWidget, { mode: 'tab-after', ref: this.promptFragmentsWidget });
-        this.dockpanel.addWidget(this.skillsWidget, { mode: 'tab-after', ref: this.toolsWidget });
-        this.dockpanel.addWidget(this.modelAliasesWidget, { mode: 'tab-after', ref: this.skillsWidget });
-
-        this.update();
+    protected initLayout(): void {
+        const layout = this.layout = new BoxLayout({ direction: 'top-to-bottom', spacing: 0 });
+
+        // Tree column: search box above the category tree. A plain Panel (flow layout)
+        // lets CSS flexbox stack the fixed-height search box over the scrollable tree.
+        // A BoxLayout would size the search box from its `fit-content` height, which
+        // Lumino measures as zero, collapsing the search box on top of the tree.
+        const treeColumn = new Panel();
+        treeColumn.addClass('ai-configuration-tree-column');
+        treeColumn.addWidget(this.searchWidget);
+        treeColumn.addWidget(this.treeWidget);
+
+        this.bodyPanel = new SplitPanel({ orientation: 'horizontal', spacing: 1 });
+        this.bodyPanel.addClass('ai-configuration-body');
+        this.bodyPanel.addWidget(treeColumn);
+        this.bodyPanel.addWidget(this.detailWidget);
+        BoxLayout.setStretch(this.bodyPanel, 1);
+        layout.addWidget(this.bodyPanel);
     }
 
     protected initListeners(): void {
-        this.aiConfigurationSelectionService.onDidSelectConfiguration(widgetId => {
-            if (widgetId === AIAgentConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.agentsWidget);
-            } else if (widgetId === AIVariableConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.variablesWidget);
-            } else if (widgetId === AIMCPConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.mcpWidget);
-            } else if (widgetId === AITokenUsageConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.tokenUsageWidget);
-            } else if (widgetId === AIPromptFragmentsConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.promptFragmentsWidget);
-            } else if (widgetId === AIToolsConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.toolsWidget);
-            } else if (widgetId === AISkillsConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.skillsWidget);
-            } else if (widgetId === ModelAliasesConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.modelAliasesWidget);
+        // Bridge the legacy selection service (driven by OPEN_AI_CONFIG_VIEW) onto the new selection model.
+        this.toDispose.push(this.aiConfigurationSelectionService.onDidSelectConfiguration(widgetId => {
+            const categoryId = LEGACY_WIDGET_TO_CATEGORY_ID[widgetId] ?? widgetId;
+            this.selectionModel.select({ categoryId });
+        }));
+        // The search box drives the live tree filter.
+        this.toDispose.push(this.searchWidget.onDidChangeFilter(text => this.treeWidget.setFilter(text)));
+        // The expand/collapse-all buttons below the search box drive the tree.
+        this.toDispose.push(this.searchWidget.onDidRequestExpandAll(() => this.treeWidget.expandAll()));
+        this.toDispose.push(this.searchWidget.onDidRequestCollapseAll(() => this.treeWidget.collapseAll()));
+        // Keep the single expand/collapse-all toggle in sync with the tree's actual expansion state.
+        const syncToolbarToggle = () => {
+            const state = this.treeWidget.getExpansionSummary();
+            this.searchWidget.setTreeExpansion(state !== 'none', state === 'all-expanded');
+        };
+        this.toDispose.push(this.treeWidget.onDidChangeExpansion(syncToolbarToggle));
+        syncToolbarToggle();
+    }
+
+    protected override onAfterAttach(msg: Message): void {
+        super.onAfterAttach(msg);
+        this.bodyPanel.setRelativeSizes([1, 3]);
+        this.selectInitialCategory();
+    }
+
+    protected selectInitialCategory(): void {
+        if (!this.selectionModel.getSelection()) {
+            const first = this.registry.getCategories()[0];
+            if (first) {
+                this.selectionModel.select({ categoryId: first.id });
             }
-        });
+        }
+    }
+
+    protected override onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        this.treeWidget.activate();
     }
+
 }

package/src/browser/ai-configuration/categories/agent-capabilities-settings.spec.ts

@@ -0,0 +1,161 @@
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+let disableJSDOM = enableJSDOM();
+
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
+FrontendApplicationConfigProvider.set({});
+
+import { expect } from 'chai';
+import * as React from '@theia/core/shared/react';
+import { flushSync } from '@theia/core/shared/react-dom';
+import { createRoot } from '@theia/core/shared/react-dom/client';
+import { AISettingsService, ServerToolDescriptor } from '@theia/ai-core/lib/common';
+import { AiSettingsRowService } from '@theia/ai-core-ui/lib/browser/ai-configuration/components/ai-settings-row-service';
+import { AgentServerToolsSettings } from './agent-capabilities-settings';
+
+disableJSDOM();
+
+describe('AgentServerToolsSettings', () => {
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    const tools: ServerToolDescriptor[] = [
+        { id: 'web_search', name: 'Web Search', description: 'Search the web' },
+        { id: 'code_execution', name: 'Code Execution' }
+    ];
+
+    interface Rendered {
+        container: HTMLElement;
+        /** Every `updateAgentSettings` call the section made, in order. */
+        updates: Array<Record<string, unknown>>;
+        /** Reset callbacks the rows handed to their gear menus, in row order. */
+        resets: Array<() => void>;
+        dispose: () => void;
+    }
+
+    function render(savedSelections?: Record<string, string[]>): Rendered {
+        const updates: Array<Record<string, unknown>> = [];
+        const resets: Array<() => void> = [];
+        const aiSettingsService = {
+            updateAgentSettings: async (_agent: string, settings: Record<string, unknown>) => { updates.push(settings); }
+        } as unknown as AISettingsService;
+        const settingsRowService = {
+            openResetMenu: (_gear: HTMLElement, reset: () => void) => { resets.push(reset); }
+        } as unknown as AiSettingsRowService;
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        flushSync(() => root.render(React.createElement(AgentServerToolsSettings, {
+            agentId: 'coder',
+            tools,
+            vendor: 'anthropic',
+            savedSelections,
+            aiSettingsService,
+            settingsRowService
+        })));
+        return { container, updates, resets, dispose: () => { flushSync(() => root.unmount()); container.remove(); } };
+    }
+
+    it('lists one toggle per tool the model offers, checked for the enabled ones', () => {
+        const { container, dispose } = render({ anthropic: ['web_search'] });
+        try {
+            const checkboxes = Array.from(container.querySelectorAll<HTMLInputElement>('input[type=checkbox]'));
+            expect(checkboxes.map(checkbox => checkbox.checked)).to.deep.equal([true, false]);
+            expect(container.textContent).to.include('Web Search');
+            expect(container.textContent).to.include('Search the web');
+        } finally {
+            dispose();
+        }
+    });
+
+    it('marks an enabled tool as modified, since nothing is enabled by default', () => {
+        const { container, dispose } = render({ anthropic: ['web_search'] });
+        try {
+            const rows = Array.from(container.querySelectorAll('.ai-configuration-item-row'));
+            expect(rows.map(row => row.classList.contains('modified'))).to.deep.equal([true, false]);
+        } finally {
+            dispose();
+        }
+    });
+
+    it('stores the enabled ids under the model vendor when a tool is switched on', async () => {
+        const { container, updates, dispose } = render();
+        try {
+            flushSync(() => container.querySelectorAll<HTMLInputElement>('input[type=checkbox]')[0].click());
+            await new Promise(resolve => setTimeout(resolve, 0));
+
+            expect(updates).to.deep.equal([{ serverToolSelections: { anthropic: ['web_search'] } }]);
+        } finally {
+            dispose();
+        }
+    });
+
+    it('drops the vendor entry instead of storing an empty list when the last tool is switched off', async () => {
+        const { container, updates, dispose } = render({ anthropic: ['web_search'] });
+        try {
+            flushSync(() => container.querySelectorAll<HTMLInputElement>('input[type=checkbox]')[0].click());
+            await new Promise(resolve => setTimeout(resolve, 0));
+
+            // The whole setting goes when no vendor has a selection left, so no stale keys accumulate.
+            expect(updates).to.deep.equal([{ serverToolSelections: undefined }]);
+        } finally {
+            dispose();
+        }
+    });
+
+    it('offers a reset on the section header only while something is enabled, and leaves other vendors alone', async () => {
+        const nothingEnabled = render();
+        try {
+            expect(Boolean(nothingEnabled.container.querySelector('.ai-agent-section-header-action'))).to.equal(false);
+        } finally {
+            nothingEnabled.dispose();
+        }
+
+        const { container, updates, dispose } = render({ anthropic: ['web_search'], openai: ['code_execution'] });
+        try {
+            // On the header line, not in a row of its own above the list.
+            const reset = container.querySelector<HTMLButtonElement>('.ai-agent-section-header .ai-agent-section-header-action');
+            flushSync(() => reset!.click());
+            await new Promise(resolve => setTimeout(resolve, 0));
+
+            expect(updates).to.deep.equal([{ serverToolSelections: { openai: ['code_execution'] } }]);
+        } finally {
+            dispose();
+        }
+    });
+
+    it('gives an enabled tool the same gear reset as a capability row, which switches it off', async () => {
+        const { container, updates, resets, dispose } = render({ anthropic: ['web_search'] });
+        try {
+            const gears = Array.from(container.querySelectorAll('.ai-configuration-item-row-actions'));
+            // Only the enabled row deviates from the default, so only it offers a reset.
+            expect(gears).to.have.lengthOf(1);
+
+            const gear = container.querySelector<HTMLElement>('.ai-settings-row-gear');
+            flushSync(() => gear!.click());
+            expect(resets).to.have.lengthOf(1);
+            resets[0]();
+            await new Promise(resolve => setTimeout(resolve, 0));
+
+            expect(updates).to.deep.equal([{ serverToolSelections: undefined }]);
+        } finally {
+            dispose();
+        }
+    });
+});