@theia/ai-core-ui 1.75.0-next.8 → 1.75.0

package/src/browser/ai-configuration/renderers/collection-category-renderer.spec.ts

@@ -0,0 +1,126 @@
+// *****************************************************************************
+// 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 { AiConfigurationRenderContext, AiConfigurationTreeItem } from '../ai-configuration-category';
+import { CollectionCategoryRenderer } from './collection-category-renderer';
+
+disableJSDOM();
+
+describe('CollectionCategoryRenderer', () => {
+
+    before(() => disableJSDOM = enableJSDOM());
+    after(() => disableJSDOM());
+
+    class TestCollection extends CollectionCategoryRenderer {
+        constructor(protected readonly items: AiConfigurationTreeItem[]) {
+            super();
+        }
+        protected get categoryId(): string {
+            return 'agents';
+        }
+        getTreeChildren(): AiConfigurationTreeItem[] {
+            return this.items;
+        }
+        protected renderItemSections(): React.ReactNode {
+            return undefined;
+        }
+        protected override getEmptyMessage(): string {
+            return 'No agents';
+        }
+    }
+
+    function renderOverview(items: AiConfigurationTreeItem[]): { container: HTMLElement; warnings: string[]; dispose: () => void } {
+        // React reports duplicate keys through console.error; capture it so the test can assert on it, and
+        // capture console.warn too so the renderer's expected duplicate-id warning stays out of the output.
+        const warnings: string[] = [];
+        const originalError = console.error;
+        const originalWarn = console.warn;
+        console.error = (...args: unknown[]) => { warnings.push(String(args[0])); };
+        console.warn = (...args: unknown[]) => { warnings.push(String(args[0])); };
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        const ctx: AiConfigurationRenderContext = { scope: 'user', navigate: () => { }, update: () => { } };
+        try {
+            flushSync(() => root.render(new TestCollection(items).renderOverview(ctx) as React.ReactElement));
+        } finally {
+            console.error = originalError;
+            console.warn = originalWarn;
+        }
+        return { container, warnings, dispose: () => { flushSync(() => root.unmount()); container.remove(); } };
+    }
+
+    it('shows one row per id, dropping an entry that repeats one', () => {
+        const { container, warnings, dispose } = renderOverview([
+            { id: 'code-reviewer', label: 'Code Reviewer' },
+            { id: 'code-reviewer', label: 'Code Reviewer (copy)' },
+            { id: 'coder', label: 'Coder' }
+        ]);
+        try {
+            const labels = Array.from(container.querySelectorAll('.ai-configuration-item-row-label')).map(label => label.textContent);
+            // The first wins: a repeated id is not addressable, so showing it would be a row that opens another.
+            expect(labels).to.deep.equal(['Code Reviewer', 'Coder']);
+            // And no React duplicate-key warnings, which is what a rendered duplicate produced.
+            expect(warnings.filter(warning => warning.includes('same key'))).to.be.empty;
+        } finally {
+            dispose();
+        }
+    });
+
+    it('logs the dropped id once, however often the overview re-renders', () => {
+        const items: AiConfigurationTreeItem[] = [
+            { id: 'code-reviewer', label: 'Code Reviewer' },
+            { id: 'code-reviewer', label: 'Code Reviewer (copy)' }
+        ];
+        const collection = new TestCollection(items);
+        const ctx: AiConfigurationRenderContext = { scope: 'user', navigate: () => { }, update: () => { } };
+        const logged: string[] = [];
+        const originalWarn = console.warn;
+        console.warn = (...args: unknown[]) => { logged.push(String(args[0])); };
+        try {
+            collection.renderOverview(ctx);
+            collection.renderOverview(ctx);
+        } finally {
+            console.warn = originalWarn;
+        }
+
+        expect(logged).to.have.lengthOf(1);
+        expect(logged[0]).to.include('code-reviewer').and.to.include('agents');
+    });
+
+    it('leaves items with unique ids untouched, reporting their own status', () => {
+        const { container, dispose } = renderOverview([
+            { id: 'coder', label: 'Coder', status: { kind: 'on', label: 'Enabled' } },
+            { id: 'architect', label: 'Architect', status: { kind: 'off', label: 'Disabled' } }
+        ]);
+        try {
+            const badges = Array.from(container.querySelectorAll('.ai-configuration-status-badge-label')).map(badge => badge.textContent);
+            expect(badges).to.deep.equal(['Enabled', 'Disabled']);
+        } finally {
+            dispose();
+        }
+    });
+});

package/src/browser/ai-configuration/renderers/collection-category-renderer.tsx

@@ -0,0 +1,164 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import {
+    AiConfigurationAddDescriptor,
+    AiConfigurationCategoryRenderer,
+    AiConfigurationRenderContext,
+    AiConfigurationTreeItem
+} from '../ai-configuration-category';
+
+// The descriptor moved to the contribution point (the tree renders the action too); re-exported so the
+// categories that build one keep importing it from the base class they extend.
+export { AiConfigurationAddDescriptor };
+import {
+    AiConfigurationAddAction,
+    AiConfigurationEmptyState,
+    AiConfigurationItemDetailHeader,
+    AiConfigurationSection
+} from '../components/ai-configuration-primitives';
+import { AiConfigurationItemRow } from '../components/ai-configuration-item-row';
+
+/** Describes the overview's "Add …" affordance. */
+/**
+ * Convenience base for `collection` categories. Renders the overview (category
+ * settings slot + item card grid + add action + empty state) and the per-item
+ * detail frame (header + sections). Subclasses provide the items, the item
+ * sections, and optionally category-level settings and an add action.
+ */
+export abstract class CollectionCategoryRenderer implements AiConfigurationCategoryRenderer {
+
+    /** The owning category id, used to build navigation targets for the cards. */
+    protected abstract get categoryId(): string;
+
+    /** Ids already reported as duplicated, so the warning is logged once rather than on every render. */
+    protected readonly reportedDuplicateIds = new Set<string>();
+
+    abstract getTreeChildren(): AiConfigurationTreeItem[];
+
+    renderOverview(ctx: AiConfigurationRenderContext): React.ReactNode {
+        const items = this.addressableItems(this.getTreeChildren());
+        const add = this.getAddAction(ctx);
+        const addAction = add && <AiConfigurationAddAction label={add.label} iconClass={add.iconClass} onClick={() => add.run()} />;
+        const body = items.length === 0
+            ? <AiConfigurationEmptyState message={this.getEmptyMessage()} action={addAction} />
+            : <>
+                <div className='ai-configuration-item-list'>
+                    {items.map(item => <AiConfigurationItemRow
+                        key={item.id}
+                        label={item.label}
+                        iconClass={item.iconClass}
+                        description={item.description}
+                        tags={item.tags}
+                        origins={item.origins}
+                        status={item.status}
+                        onSelect={() => ctx.navigate({ categoryId: this.categoryId, itemId: item.id })}
+                    />)}
+                </div>
+                {addAction && <div className='ai-configuration-overview-actions'>{addAction}</div>}
+            </>;
+        const listTitle = this.overviewListTitle;
+        return <div className='ai-configuration-page'>
+            {this.renderCategorySettings(ctx)}
+            {listTitle !== undefined
+                // Foldable with its size on the header once there is a list to fold; an empty state stays plain.
+                ? <AiConfigurationSection
+                    title={listTitle}
+                    count={items.length > 0 ? items.length : undefined}
+                    collapsible={items.length > 0}
+                >{body}</AiConfigurationSection>
+                : body}
+        </div>;
+    }
+
+    /**
+     * The items this page can actually address, i.e. one per id. Everything downstream keys on the id — the
+     * tree node, the navigation target, the detail lookup and the per-item settings — so an item repeating an
+     * id could neither be opened nor configured on its own; it is dropped here and logged once. Representing
+     * such a clash properly is a separate concern from this view (it starts where the items are registered).
+     */
+    protected addressableItems(items: AiConfigurationTreeItem[]): AiConfigurationTreeItem[] {
+        const byId = new Map<string, AiConfigurationTreeItem>();
+        for (const item of items) {
+            if (byId.has(item.id)) {
+                this.warnAboutDuplicateId(item.id);
+                continue;
+            }
+            byId.set(item.id, item);
+        }
+        return [...byId.values()];
+    }
+
+    /**
+     * Warns once per id, since the overview re-renders and would otherwise repeat itself indefinitely.
+     * `console` rather than an `ILogger`: this base class is not injectable, so it has no injection context
+     * of its own; subclasses that want their named logger can override this.
+     */
+    protected warnAboutDuplicateId(id: string): void {
+        if (this.reportedDuplicateIds.has(id)) {
+            return;
+        }
+        this.reportedDuplicateIds.add(id);
+        console.warn(`More than one entry of the AI configuration category "${this.categoryId}" declares the id "${id}". `
+            + 'Only the first is shown, since everything (navigation, settings) is keyed by that id. Give each entry a unique id.');
+    }
+
+    /** Optional heading shown above the item list (e.g. "Agents"), like the Providers page. None by default. */
+    protected get overviewListTitle(): string | undefined {
+        return undefined;
+    }
+
+    renderItemDetail(itemId: string, ctx: AiConfigurationRenderContext): React.ReactNode {
+        const item = this.getTreeChildren().find(child => child.id === itemId);
+        if (!item) {
+            return undefined;
+        }
+        return <div className='ai-configuration-page'>
+            {this.renderItemHeader(item, ctx)}
+            {this.renderItemSections(item, ctx)}
+        </div>;
+    }
+
+    /** Category-level settings shown above the card grid; nothing by default. */
+    protected renderCategorySettings(ctx: AiConfigurationRenderContext): React.ReactNode {
+        return undefined;
+    }
+
+    /** Header of an item detail page; icon/title/subtitle/origins from the item by default. */
+    protected renderItemHeader(item: AiConfigurationTreeItem, ctx: AiConfigurationRenderContext): React.ReactNode {
+        return <AiConfigurationItemDetailHeader
+            title={item.label}
+            iconClass={item.iconClass}
+            subtitle={item.description}
+            status={item.status}
+            origins={item.origins}
+        />;
+    }
+
+    /** Body of an item detail page: typically {@link AiConfigurationSection}s of rows. */
+    protected abstract renderItemSections(item: AiConfigurationTreeItem, ctx: AiConfigurationRenderContext): React.ReactNode;
+
+    /** The overview "Add …" affordance; none by default. */
+    getAddAction(ctx: AiConfigurationRenderContext): AiConfigurationAddDescriptor | undefined {
+        return undefined;
+    }
+
+    protected getEmptyMessage(): string {
+        return nls.localize('theia/ai/core/aiConfiguration/collectionEmpty', 'No items to configure yet.');
+    }
+}

package/src/browser/ai-configuration/renderers/single-page-category-renderer.tsx

@@ -0,0 +1,41 @@
+// *****************************************************************************
+// 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 { AiConfigurationCategoryRenderer, AiConfigurationRenderContext } from '../ai-configuration-category';
+
+/**
+ * Convenience base for `single-page` categories. Subclasses implement
+ * {@link renderSections} (and optionally {@link renderHeader}); the page frame
+ * and scrolling container are provided.
+ */
+export abstract class SinglePageCategoryRenderer implements AiConfigurationCategoryRenderer {
+
+    renderPage(ctx: AiConfigurationRenderContext): React.ReactNode {
+        return <div className='ai-configuration-page'>
+            {this.renderHeader(ctx)}
+            {this.renderSections(ctx)}
+        </div>;
+    }
+
+    /** Optional page header (title/description); nothing by default. */
+    protected renderHeader(ctx: AiConfigurationRenderContext): React.ReactNode {
+        return undefined;
+    }
+
+    /** The page body: typically one or more {@link AiConfigurationSection}s of rows. */
+    protected abstract renderSections(ctx: AiConfigurationRenderContext): React.ReactNode;
+}

package/src/browser/ai-core-ui-frontend-module.ts

@@ -14,12 +14,25 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
+import '../../src/browser/style/index.css';
+
 import { ContainerModule } from '@theia/core/shared/inversify';
-import { PreferenceContribution } from '@theia/core';
+import { bindRootContributionProvider, PreferenceContribution } from '@theia/core';
 import { AgentSettingsPreferenceSchema } from '@theia/ai-core/lib/common/agent-preferences';
 import { aiCorePreferenceSchema } from '@theia/ai-core/lib/common/ai-core-preferences';
+import { AiConfigurationCategory } from './ai-configuration/ai-configuration-category';
+import { AiConfigurationCategoryRegistry } from './ai-configuration/ai-configuration-category-registry';
+import { AiConfigurationSelectionModel } from './ai-configuration/ai-configuration-selection-model';
+import { AiSettingsRowService } from './ai-configuration/components/ai-settings-row-service';
+import { bindAiConfigurationSettingCommands } from './ai-configuration/ai-configuration-setting-commands';
 
 export default new ContainerModule(bind => {
     bind(PreferenceContribution).toConstantValue({ schema: AgentSettingsPreferenceSchema });
     bind(PreferenceContribution).toConstantValue({ schema: aiCorePreferenceSchema });
+
+    bindRootContributionProvider(bind, AiConfigurationCategory);
+    bind(AiConfigurationCategoryRegistry).toSelf().inSingletonScope();
+    bind(AiConfigurationSelectionModel).toSelf().inSingletonScope();
+    bind(AiSettingsRowService).toSelf().inSingletonScope();
+    bindAiConfigurationSettingCommands(bind);
 });