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

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

@@ -0,0 +1,237 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import { nls, PreferenceService } from '@theia/core';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { codicon, Message, ReactWidget } from '@theia/core/lib/browser';
+import { AiConfigurationService } from '@theia/ai-core';
+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 { AiConfigurationItemDetailHeader } from '@theia/ai-core-ui/lib/browser/ai-configuration/components/ai-configuration-primitives';
+import {
+    AiConfigurationCategory, AiConfigurationRenderContext, AiConfigurationScope, AiConfigurationSelection
+} from '@theia/ai-core-ui/lib/browser/ai-configuration/ai-configuration-category';
+
+@injectable()
+export class AiConfigurationDetailWidget extends ReactWidget {
+
+    static readonly ID = 'ai-configuration-detail';
+
+    /** Frames a pending search highlight waits for its target row to be mounted before it is dropped. */
+    static readonly HIGHLIGHT_RETRY_FRAMES = 10;
+
+    @inject(AiConfigurationCategoryRegistry)
+    protected readonly registry: AiConfigurationCategoryRegistry;
+
+    @inject(AiConfigurationSelectionModel)
+    protected readonly selectionModel: AiConfigurationSelectionModel;
+
+    @inject(AiConfigurationService)
+    protected readonly aiConfigurationService: AiConfigurationService;
+
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
+    /** Scope every row on the page reads from and writes to; per-scope editing is not wired up yet. */
+    protected scope: AiConfigurationScope = 'user';
+
+    protected resetScroll = false;
+    protected pendingHighlight?: AiConfigurationSelection['highlight'];
+    /** Frames a pending highlight has already waited for its target row; see {@link applyScrollAndHighlight}. */
+    protected pendingHighlightFrames = 0;
+
+    @postConstruct()
+    protected init(): void {
+        this.id = AiConfigurationDetailWidget.ID;
+        this.addClass('ai-configuration-detail-widget');
+        // The page scrolls in its own inner `.ai-configuration-detail-body` (driven by
+        // `applyScrollAndHighlight`). Clear the default `ReactWidget` scroll options so that
+        // `BaseWidget` does not attach a PerfectScrollbar to the outer node, whose forced
+        // `overflow: hidden` and wheel handling would otherwise swallow the inner body's scroll.
+        this.scrollOptions = undefined;
+        this.toDispose.push(this.selectionModel.onDidChangeSelection(() => this.onSelectionChanged()));
+        this.toDispose.push(this.registry.onDidChange(() => this.update()));
+        // Also covers the workspace-trust transitions this service reports, which are not preference changes.
+        this.toDispose.push(this.aiConfigurationService.onDidChange(() => this.update()));
+        // Reflect preference changes made outside the current render pass — most notably the gear menu's
+        // Reset command, which runs as a command and so never calls `ctx.update()`. Listening here rather
+        // than only to `AiConfigurationService.onDidChange` (scoped to `ai-features.*`) keeps contributed
+        // categories up to date too: their preferences carry no AI prefix, so a reset of one used to leave
+        // the row's `modified` state stale until the page was re-rendered for some other reason.
+        this.toDispose.push(this.preferenceService.onPreferenceChanged(() => this.update()));
+        this.update();
+    }
+
+    protected onSelectionChanged(): void {
+        this.resetScroll = true;
+        this.pendingHighlight = this.selectionModel.getSelection()?.highlight;
+        this.pendingHighlightFrames = 0;
+        this.update();
+    }
+
+    protected createRenderContext(): AiConfigurationRenderContext {
+        return {
+            scope: this.scope,
+            navigate: selection => this.selectionModel.select(selection),
+            update: () => this.update()
+        };
+    }
+
+    protected render(): React.ReactNode {
+        const selection = this.selectionModel.getSelection();
+        const category = selection && this.registry.getCategory(selection.categoryId);
+        if (!selection || !category) {
+            return this.renderPlaceholder();
+        }
+        const ctx = this.createRenderContext();
+        // The category/item path is shown as real Theia breadcrumbs in the shell tab bar
+        // (see AiConfigurationBreadcrumbsContribution), so no in-pane breadcrumb is rendered here.
+        return <div className='ai-configuration-detail-container'>
+            {this.scope !== 'user' && this.renderScopeBanner()}
+            <div className='ai-configuration-detail-body'>
+                {this.renderBody(category, selection, ctx)}
+            </div>
+        </div>;
+    }
+
+    /**
+     * Selects the category whose item just disappeared. Deferred to a microtask: this runs during render, and
+     * selecting synchronously would re-enter the widget's update while React is still committing this one.
+     */
+    protected selectCategoryAfterItemLoss(category: AiConfigurationCategory): void {
+        queueMicrotask(() => {
+            const selection = this.selectionModel.getSelection();
+            if (selection?.categoryId === category.id && selection.itemId) {
+                this.selectionModel.select({ categoryId: category.id });
+            }
+        });
+    }
+
+    protected renderScopeBanner(): React.ReactNode {
+        return <div className='ai-configuration-detail-scope-banner'>
+            <span className={codicon('info')}></span>
+            <span>{nls.localize('theia/ai/core/aiConfiguration/scopeBanner', 'Editing the {0} scope.', this.scope)}</span>
+        </div>;
+    }
+
+    protected renderBody(category: AiConfigurationCategory, selection: AiConfigurationSelection, ctx: AiConfigurationRenderContext): React.ReactNode {
+        const renderer = category.renderer;
+        // Item detail pages render their own header (id/status/actions), so they are returned as-is.
+        if (selection.itemId && renderer.renderItemDetail) {
+            const detail = renderer.renderItemDetail(selection.itemId, ctx);
+            if (detail) {
+                return detail;
+            }
+            // The item is gone (deleted while its page was open, e.g. an MCP server) and the renderer has
+            // nothing to show, which would leave a blank pane. Fall back to the category, and move the
+            // selection there so the tree and breadcrumbs agree with what is displayed.
+            this.selectCategoryAfterItemLoss(category);
+        }
+        // Category-level pages/overviews get a shared header showing the category name, so the page is
+        // titled in-pane (not only in the breadcrumb tab bar).
+        let content: React.ReactNode;
+        if (category.kind === 'collection' && renderer.renderOverview) {
+            content = renderer.renderOverview(ctx);
+        } else if (renderer.renderPage) {
+            content = renderer.renderPage(ctx);
+        } else {
+            content = this.renderComingSoon(category);
+        }
+        return <>
+            {this.renderCategoryHeader(category)}
+            {content}
+        </>;
+    }
+
+    /** Shared in-pane header for a category-level page: the category icon, name and optional description. */
+    protected renderCategoryHeader(category: AiConfigurationCategory): React.ReactNode {
+        return <div className='ai-configuration-category-header'>
+            <AiConfigurationItemDetailHeader title={category.label} iconClass={category.iconClass} subtitle={category.description} />
+        </div>;
+    }
+
+    protected renderComingSoon(category: AiConfigurationCategory): React.ReactNode {
+        return <div className='ai-configuration-detail-placeholder'>
+            {nls.localize('theia/ai/core/aiConfiguration/categoryComingSoon', '{0} configuration is not available yet.', category.label)}
+        </div>;
+    }
+
+    protected renderPlaceholder(): React.ReactNode {
+        return <div className='ai-configuration-detail-placeholder'>
+            {nls.localize('theia/ai/core/aiConfiguration/selectCategory', 'Select a category to configure.')}
+        </div>;
+    }
+
+    protected override onUpdateRequest(msg: Message): void {
+        super.onUpdateRequest(msg);
+        this.applyScrollAndHighlight();
+    }
+
+    protected applyScrollAndHighlight(): void {
+        if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') {
+            return;
+        }
+        window.requestAnimationFrame(() => {
+            const body = this.node.querySelector<HTMLElement>('.ai-configuration-detail-body');
+            if (!body) {
+                return;
+            }
+            if (this.resetScroll && !this.pendingHighlight) {
+                body.scrollTop = 0;
+            }
+            this.resetScroll = false;
+            const highlight = this.pendingHighlight;
+            if (!highlight) {
+                return;
+            }
+            const element = body.querySelector<HTMLElement>(`[data-ai-config-row-id="${highlight.rowId}"]`);
+            if (element) {
+                this.pendingHighlight = undefined;
+                this.centerInBody(body, element);
+                element.classList.add('ai-configuration-row-flash');
+                window.setTimeout(() => element.classList.remove('ai-configuration-row-flash'), 1200);
+            } else if (this.pendingHighlightFrames < AiConfigurationDetailWidget.HIGHLIGHT_RETRY_FRAMES) {
+                // Cross-category navigation renders the new page and the highlight target in the same pass,
+                // but categories that resolve their rows asynchronously (agents, providers) are still empty on
+                // this frame. Keep the highlight pending and look again rather than dropping it, which made
+                // scroll-and-flash fire only when the row happened to be mounted already.
+                this.pendingHighlightFrames++;
+                this.applyScrollAndHighlight();
+            } else {
+                this.pendingHighlight = undefined;
+            }
+        });
+    }
+
+    /**
+     * Vertically centers `element` within `body` by scrolling that container and nothing else.
+     *
+     * Deliberately not `Element.scrollIntoView`: that scrolls *every* scrollable ancestor to satisfy the
+     * requested alignment, and `overflow: hidden` does not prevent programmatic scrolling. When a row cannot
+     * be centered inside the body alone, it therefore nudges the `overflow: hidden` containers above this
+     * widget, which have no scrollbar for the user to scroll back — shifting the whole shell, pushing the menu
+     * bar out of view and leaving a gap below the status bar.
+     */
+    protected centerInBody(body: HTMLElement, element: HTMLElement): void {
+        const bodyRect = body.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const current = elementRect.top - bodyRect.top;
+        const centered = (body.clientHeight - elementRect.height) / 2;
+        // Assigning `scrollTop` clamps to the scrollable range, so short pages simply do not scroll.
+        body.scrollTop += current - centered;
+    }
+}

package/src/browser/ai-configuration/ai-configuration-label-provider-contribution.ts

@@ -0,0 +1,47 @@
+// *****************************************************************************
+// 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 { nls } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
+import { LabelProviderContribution } from '@theia/core/lib/browser/label-provider';
+import URI from '@theia/core/lib/common/uri';
+import { injectable } from '@theia/core/shared/inversify';
+import { AI_CONFIGURATION_RESOURCE_SCHEME } from './ai-configuration-resource';
+
+/**
+ * Labels the AI Configuration view's constant resource URI (see {@link AI_CONFIGURATION_RESOURCE_URI}).
+ * The view is a {@link NavigatableWidget} so the shell renders breadcrumbs for it; without this, the
+ * window title updater would fall back to the URI's (empty) path and show `/` instead of a readable name.
+ */
+@injectable()
+export class AiConfigurationLabelProviderContribution implements LabelProviderContribution {
+
+    canHandle(element: object): number {
+        return element instanceof URI && element.scheme === AI_CONFIGURATION_RESOURCE_SCHEME ? 200 : 0;
+    }
+
+    getName(): string {
+        return nls.localize('theia/ai/ide/aiConfiguration/breadcrumbRoot', 'AI Configuration');
+    }
+
+    getLongName(): string {
+        return this.getName();
+    }
+
+    getIcon(): string {
+        return codicon('settings-gear');
+    }
+}

package/src/browser/ai-configuration/ai-configuration-open-preference-renderer.ts

@@ -0,0 +1,64 @@
+// *****************************************************************************
+// 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 { inject, injectable, interfaces } from '@theia/core/shared/inversify';
+import { CommandService, nls } from '@theia/core';
+import { AI_CONFIGURATION_OPEN_PREFERENCE_ID } from '@theia/ai-core/lib/browser';
+import { PreferenceLeafNodeRenderer, PreferenceNodeRenderer } from '@theia/preferences/lib/browser/views/components/preference-node-renderer';
+import { PreferenceLeafNodeRendererContribution } from '@theia/preferences/lib/browser/views/components/preference-node-renderer-creator';
+import { Preference } from '@theia/preferences/lib/browser/util/preference-types';
+import { OPEN_AI_CONFIG_VIEW } from './ai-configuration-view-contribution';
+
+/**
+ * Renders the {@link AI_CONFIGURATION_OPEN_PREFERENCE_ID} placeholder (shown where the AI
+ * preferences used to live in the Settings UI) as a button that opens the AI Configuration view.
+ */
+@injectable()
+export class AiConfigurationOpenPreferenceRenderer extends PreferenceLeafNodeRenderer<null, HTMLElement> {
+
+    @inject(CommandService)
+    protected readonly commandService: CommandService;
+
+    protected createInteractable(container: HTMLElement): void {
+        const button = document.createElement('button');
+        button.classList.add('theia-button', 'main');
+        button.textContent = nls.localize('theia/ai/ide/aiConfiguration/openButton', 'Open AI Configuration');
+        button.onclick = () => this.commandService.executeCommand(OPEN_AI_CONFIG_VIEW.id);
+        this.interactable = button;
+        container.appendChild(button);
+    }
+
+    protected getFallbackValue(): null {
+        // eslint-disable-next-line no-null/no-null
+        return null;
+    }
+
+    protected doHandleValueChange(): void { }
+}
+
+@injectable()
+export class AiConfigurationOpenPreferenceRendererContribution extends PreferenceLeafNodeRendererContribution {
+    static ID = 'ai-configuration-open-preference-renderer';
+    id = AiConfigurationOpenPreferenceRendererContribution.ID;
+
+    canHandleLeafNode(node: Preference.LeafNode): number {
+        return node.preferenceId === AI_CONFIGURATION_OPEN_PREFERENCE_ID ? 100 : 0;
+    }
+
+    createLeafNodeRenderer(container: interfaces.Container): PreferenceNodeRenderer {
+        return container.get(AiConfigurationOpenPreferenceRenderer);
+    }
+}

package/src/browser/ai-configuration/ai-configuration-preference-ownership.spec.ts

@@ -0,0 +1,135 @@
+// *****************************************************************************
+// 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();
+
+// @lumino/dragdrop (pulled in transitively by the categories) extends the DragEvent DOM global at
+// module load, which JSDOM does not provide; stub it so the imports succeed.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+if (!(global as any).DragEvent) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (global as any).DragEvent = class DragEvent extends (global as any).Event { };
+}
+
+import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
+// Mocha loads every spec into one process and `set` throws if called twice, so guard it.
+try {
+    FrontendApplicationConfigProvider.get();
+} catch {
+    FrontendApplicationConfigProvider.set({});
+}
+
+import { expect } from 'chai';
+import { PreferenceSchema } from '@theia/core';
+import { aiCorePreferenceSchema } from '@theia/ai-core/lib/common/ai-core-preferences';
+import { AgentSettingsPreferenceSchema } from '@theia/ai-core/lib/common/agent-preferences';
+import { aiChatPreferences } from '@theia/ai-chat/lib/common/ai-chat-preferences';
+import { chatToolPreferences } from '@theia/ai-chat/lib/common/chat-tool-preferences';
+import { shellCommandPreferences } from '@theia/ai-terminal/lib/common/shell-command-preferences';
+import { aiIdePreferenceSchema } from '../../common/ai-ide-preferences';
+import { GeneralConfigurationCategory } from './categories/general-configuration-category';
+import { AgentsConfigurationCategory } from './categories/agents-configuration-category';
+import { ToolsConfigurationCategory } from './categories/tools-configuration-category';
+import { ModelAliasesConfigurationCategory } from './categories/model-aliases-configuration-category';
+import { PromptsAndSkillsConfigurationCategory } from './categories/prompts-and-skills-configuration-category';
+
+disableJSDOM();
+
+/**
+ * The schemas that declare the `ai-features.*` preferences the categories below claim. Kept explicit
+ * rather than read from a live `PreferenceSchemaService`, so the check does not depend on DI.
+ */
+const SCHEMAS: PreferenceSchema[] = [
+    aiCorePreferenceSchema,
+    AgentSettingsPreferenceSchema,
+    aiChatPreferences,
+    chatToolPreferences,
+    shellCommandPreferences,
+    aiIdePreferenceSchema
+];
+
+/**
+ * Categories with a statically declared ownership list. `ModelsConfigurationCategory` derives its ids
+ * from the registered schema at runtime and `McpServersConfigurationCategory` lives in `@theia/ai-mcp`
+ * (not a dependency of this package), so neither is covered here.
+ */
+function ownershipByCategory(): Map<string, string[]> {
+    const categories = [
+        new GeneralConfigurationCategory(),
+        new AgentsConfigurationCategory(),
+        new ToolsConfigurationCategory(),
+        new ModelAliasesConfigurationCategory(),
+        new PromptsAndSkillsConfigurationCategory()
+    ];
+    return new Map(categories.map(category => [category.id, category.getOwnedPreferenceIds()]));
+}
+
+describe('AI configuration preference ownership', () => {
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    it('reads a non-empty schema and ownership set (guards the checks below against passing vacuously)', () => {
+        const declared = SCHEMAS.flatMap(schema => Object.keys(schema.properties ?? {}));
+        expect(declared).to.include('ai-features.AiEnable.enableAI');
+        for (const [categoryId, ownedIds] of ownershipByCategory()) {
+            expect(ownedIds, `${categoryId} declares no owned preference ids`).to.not.be.empty;
+        }
+    });
+
+    it('claims only preference ids that a schema actually declares', () => {
+        const declared = new Set(SCHEMAS.flatMap(schema => Object.keys(schema.properties ?? {})));
+        const unknown: string[] = [];
+        for (const [categoryId, ownedIds] of ownershipByCategory()) {
+            for (const preferenceId of ownedIds) {
+                if (!declared.has(preferenceId)) {
+                    unknown.push(`${categoryId} -> ${preferenceId}`);
+                }
+            }
+        }
+        // A typo or a renamed preference makes the id unclaimed, so General's catch-all silently renders it
+        // a second time. Nothing else fails, which is why this is worth asserting.
+        expect(unknown, `categories claim preference ids that no schema declares: ${unknown.join(', ')}`).to.be.empty;
+    });
+
+    it('never lets two categories claim the same preference id', () => {
+        const owners = new Map<string, string[]>();
+        for (const [categoryId, ownedIds] of ownershipByCategory()) {
+            for (const preferenceId of ownedIds) {
+                owners.set(preferenceId, [...(owners.get(preferenceId) ?? []), categoryId]);
+            }
+        }
+        const contested = [...owners.entries()]
+            .filter(([, categoryIds]) => categoryIds.length > 1)
+            .map(([preferenceId, categoryIds]) => `${preferenceId} (${categoryIds.join(', ')})`);
+        expect(contested, `preference ids claimed more than once: ${contested.join(', ')}`).to.be.empty;
+    });
+
+    it('claims every id it renders as a row, so the General catch-all does not duplicate it', () => {
+        // The ownership contract only holds if a category claims what it renders. Spot-check the two
+        // categories whose rows are hand-authored (rather than derived from their ownership list).
+        const general = new GeneralConfigurationCategory();
+        const agents = new AgentsConfigurationCategory();
+        const generalOwned = new Set(general.getOwnedPreferenceIds());
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const generalRendered = ((general as any).getSectionRefs() as { preferenceId: string }[]).map(ref => ref.preferenceId);
+        const missing = generalRendered.filter(preferenceId => !generalOwned.has(preferenceId));
+        expect(missing, `General renders rows it does not claim: ${missing.join(', ')}`).to.be.empty;
+        // The agent page's own rows are covered by its ownership list too.
+        expect(agents.getOwnedPreferenceIds()).to.include('ai-features.agentSettings');
+    });
+});

package/src/browser/ai-configuration/{components/configuration-section.tsx → ai-configuration-resource.ts}

@@ -1,5 +1,5 @@
 // *****************************************************************************
-// Copyright (C) 2025 EclipseSource GmbH.
+// Copyright (C) 2026 EclipseSource GmbH.
 //
 // This program and the accompanying materials are made available under the
 // terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,25 +13,15 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import * as React from '@theia/core/shared/react';
 
-export interface ConfigurationSectionProps {
-    title: string;
-    children: React.ReactNode;
-    className?: string;
-}
+import URI from '@theia/core/lib/common/uri';
+
+/** URI scheme identifying the AI Configuration view for Theia's breadcrumbs infrastructure. */
+export const AI_CONFIGURATION_RESOURCE_SCHEME = 'ai-configuration';
 
 /**
- * A reusable section component with a title and content area.
- * Follows the Theia settings section styling.
+ * The stable resource URI of the AI Configuration view. It is constant (the current
+ * category/item is read from the selection model), mirroring how an editor keeps its file URI
+ * while its breadcrumb content changes with the cursor.
  */
-export const ConfigurationSection: React.FC<ConfigurationSectionProps> = ({ title, children, className }) => (
-    <div className={`ai-configuration-section ${className || ''}`}>
-        <div className='settings-section-title settings-section-category-title'>
-            {title}
-        </div>
-        <div className='ai-configuration-section-content'>
-            {children}
-        </div>
-    </div>
-);
+export const AI_CONFIGURATION_RESOURCE_URI = new URI(`${AI_CONFIGURATION_RESOURCE_SCHEME}:/`);

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

@@ -0,0 +1,135 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import { Emitter, Event, nls } from '@theia/core';
+import { injectable, postConstruct } from '@theia/core/shared/inversify';
+import { codicon, ReactWidget } from '@theia/core/lib/browser';
+
+/**
+ * The search box above the category tree. It emits {@link onDidChangeFilter} so the tree can
+ * live-filter its nodes; filtering the tree is the only search affordance.
+ */
+@injectable()
+export class AiConfigurationSearchWidget extends ReactWidget {
+
+    static readonly ID = 'ai-configuration-search';
+
+    protected readonly onDidChangeFilterEmitter = new Emitter<string>();
+    readonly onDidChangeFilter: Event<string> = this.onDidChangeFilterEmitter.event;
+
+    protected readonly onDidRequestExpandAllEmitter = new Emitter<void>();
+    /** Fired by the "Expand All" toolbar button below the search input. */
+    readonly onDidRequestExpandAll: Event<void> = this.onDidRequestExpandAllEmitter.event;
+
+    protected readonly onDidRequestCollapseAllEmitter = new Emitter<void>();
+    /** Fired by the "Collapse All" toolbar button below the search input. */
+    readonly onDidRequestCollapseAll: Event<void> = this.onDidRequestCollapseAllEmitter.event;
+
+    /** Whether the tree has any expandable category, and whether all of them are currently expanded. */
+    protected hasExpandable = false;
+    protected allExpanded = false;
+
+    @postConstruct()
+    protected init(): void {
+        this.id = AiConfigurationSearchWidget.ID;
+        this.addClass('ai-configuration-search');
+        this.toDispose.push(this.onDidChangeFilterEmitter);
+        this.toDispose.push(this.onDidRequestExpandAllEmitter);
+        this.toDispose.push(this.onDidRequestCollapseAllEmitter);
+        this.update();
+    }
+
+    /** Updates the expand/collapse-all toggle to reflect the tree's current expansion. */
+    setTreeExpansion(hasExpandable: boolean, allExpanded: boolean): void {
+        if (this.hasExpandable !== hasExpandable || this.allExpanded !== allExpanded) {
+            this.hasExpandable = hasExpandable;
+            this.allExpanded = allExpanded;
+            this.update();
+        }
+    }
+
+    protected onExpandAll = (): void => this.onDidRequestExpandAllEmitter.fire();
+    protected onCollapseAll = (): void => this.onDidRequestCollapseAllEmitter.fire();
+    protected onQueryChange = (query: string): void => this.onDidChangeFilterEmitter.fire(query);
+
+    protected render(): React.ReactNode {
+        return <React.Fragment>
+            {/* The input owns its value via React state so the caret is preserved while typing; a
+                ReactWidget re-render (e.g. the toolbar toggle below) would otherwise reset the caret. */}
+            <AiConfigurationSearchInput onQueryChange={this.onQueryChange} />
+            {this.hasExpandable && <div className='ai-configuration-tree-toolbar'>
+                {/* A single contextual toggle: Collapse All while everything is expanded, Expand All otherwise. */}
+                {this.allExpanded
+                    ? <button
+                        type='button'
+                        className={`ai-configuration-tree-toolbar-button ${codicon('collapse-all')}`}
+                        title={nls.localizeByDefault('Collapse All')}
+                        onClick={this.onCollapseAll}
+                    ></button>
+                    : <button
+                        type='button'
+                        className={`ai-configuration-tree-toolbar-button ${codicon('expand-all')}`}
+                        title={nls.localizeByDefault('Expand All')}
+                        onClick={this.onExpandAll}
+                    ></button>}
+            </div>}
+        </React.Fragment>;
+    }
+}
+
+/**
+ * The search box, as a functional component so its value lives in React state. Typing therefore preserves
+ * the caret position (editing mid-string no longer jumps to the end, which happened when the enclosing
+ * ReactWidget re-rendered the controlled input out of band). Notifies the owner via {@link onQueryChange}.
+ */
+const AiConfigurationSearchInput: React.FC<{ onQueryChange: (query: string) => void }> = ({ onQueryChange }) => {
+    const [query, setQuery] = React.useState('');
+    const change = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setQuery(event.target.value);
+        onQueryChange(event.target.value);
+    }, [onQueryChange]);
+    const clear = React.useCallback(() => {
+        setQuery('');
+        onQueryChange('');
+    }, [onQueryChange]);
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Escape' && query.length > 0) {
+            event.preventDefault();
+            clear();
+        }
+    }, [query, clear]);
+    const clearLabel = nls.localizeByDefault('Clear');
+    return <div className='ai-configuration-search-wrap'>
+        <span className={`ai-configuration-search-icon ${codicon('search')}`}></span>
+        <input
+            className='theia-input ai-configuration-search-input'
+            type='text'
+            spellCheck={false}
+            placeholder={nls.localize('theia/ai/core/aiConfiguration/searchPlaceholder', 'Search AI settings')}
+            value={query}
+            onChange={change}
+            onKeyDown={onKeyDown}
+        />
+        {query.length > 0 && <button
+            type='button'
+            className={`ai-configuration-search-clear ${codicon('close')}`}
+            title={clearLabel}
+            aria-label={clearLabel}
+            onClick={clear}
+        ></button>}
+    </div>;
+};