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

package/src/browser/ai-configuration/skills-configuration-widget.spec.ts

@@ -1,248 +0,0 @@
-// *****************************************************************************
-// 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
-// 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, enableReactActEnvironment } from '@theia/core/lib/browser/test/jsdom';
-let disableJSDOM = enableJSDOM();
-let disableReactActEnvironment = enableReactActEnvironment();
-
-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 { MessageLoop } from '@theia/core/shared/@lumino/messaging';
-
-import { Emitter, URI } from '@theia/core';
-
-import { OpenHandler, OpenerService } from '@theia/core/lib/browser';
-import { Skill } from '@theia/ai-core/lib/common/skill';
-import { SkillService } from '@theia/ai-core/lib/browser/skill-service';
-import { PromptFragment, PromptService } from '@theia/ai-core/lib/common/prompt-service';
-import { Agent, AgentService } from '@theia/ai-core';
-
-import { AISkillsConfigurationWidget } from './skills-configuration-widget';
-
-disableReactActEnvironment();
-disableJSDOM();
-
-describe('AISkillsConfigurationWidget', () => {
-    let host: HTMLElement;
-    let widgets: AISkillsConfigurationWidget[];
-
-    before(() => {
-        disableJSDOM = enableJSDOM();
-        disableReactActEnvironment = enableReactActEnvironment();
-    });
-
-    after(() => {
-        disableReactActEnvironment();
-        disableJSDOM();
-    });
-
-    beforeEach(() => {
-        host = document.createElement('div');
-        document.body.appendChild(host);
-        widgets = [];
-    });
-
-    afterEach(() => {
-        React.act(() => {
-            for (const widget of widgets) {
-                widget.dispose();
-            }
-        });
-        host.remove();
-    });
-
-    function renderWidget(widget: AISkillsConfigurationWidget): void {
-        React.act(() => {
-            widget.update();
-            MessageLoop.flush();
-        });
-    }
-
-    function createMockSkillService(skills: Skill[] = []): Partial<SkillService> {
-        const onSkillsChangedEmitter = new Emitter<void>();
-        return {
-            getSkills: () => skills,
-            onSkillsChanged: onSkillsChangedEmitter.event
-        };
-    }
-
-    function createMockPromptService(commands: PromptFragment[] = []): Partial<PromptService> {
-        const onPromptsChangeEmitter = new Emitter<void>();
-        return {
-            getCommands: () => commands,
-            onPromptsChange: onPromptsChangeEmitter.event
-        };
-    }
-
-    function createMockAgentService(agents: Agent[] = []): Partial<AgentService> {
-        const onDidChangeAgentsEmitter = new Emitter<void>();
-        return {
-            getAllAgents: () => agents,
-            onDidChangeAgents: onDidChangeAgentsEmitter.event
-        };
-    }
-
-    function createWidget(
-        skills: Skill[] = [],
-        commands: PromptFragment[] = [],
-        agents: Agent[] = [],
-        openerService?: Partial<OpenerService>
-    ): AISkillsConfigurationWidget {
-        const widget = new AISkillsConfigurationWidget();
-        (widget as unknown as { skillService: SkillService }).skillService = createMockSkillService(skills) as SkillService;
-        (widget as unknown as { promptService: PromptService }).promptService = createMockPromptService(commands) as PromptService;
-        (widget as unknown as { agentService: AgentService }).agentService = createMockAgentService(agents) as AgentService;
-        (widget as unknown as { openerService: OpenerService }).openerService = (openerService ?? {}) as OpenerService;
-        (widget as unknown as { init: () => void }).init();
-        host.appendChild(widget.node);
-        widgets.push(widget);
-        return widget;
-    }
-
-    // --- Skills section tests ---
-
-    it('renders empty state when no skills are available', () => {
-        const widget = createWidget();
-        renderWidget(widget);
-
-        const skillsSection = host.querySelector('.ai-skills-section');
-        expect(skillsSection).to.not.be.null;
-
-        const emptyState = skillsSection!.querySelector('.ai-empty-state-content');
-        expect(emptyState).to.not.be.null;
-    });
-
-    it('renders multiple skills with correct name/description/location', () => {
-        const skills: Skill[] = [
-            { name: 'Skill A', description: 'Desc A', location: '/path/a' } as Skill,
-            { name: 'Skill B', description: 'Desc B', location: '/path/b' } as Skill
-        ];
-
-        const widget = createWidget(skills);
-        renderWidget(widget);
-
-        const skillsSection = host.querySelector('.ai-skills-section');
-        expect(skillsSection).to.not.be.null;
-
-        const rows = Array.from(skillsSection!.querySelectorAll('tbody tr'));
-        expect(rows.length).to.equal(2);
-
-        expect(rows[0].querySelector('.skill-name-column')?.textContent).to.contain('Skill A');
-        expect(rows[0].querySelector('.skill-description-column')?.textContent).to.contain('Desc A');
-        expect(rows[0].querySelector('.skill-location-column')?.textContent).to.contain('/path/a');
-
-        expect(rows[1].querySelector('.skill-name-column')?.textContent).to.contain('Skill B');
-        expect(rows[1].querySelector('.skill-description-column')?.textContent).to.contain('Desc B');
-        expect(rows[1].querySelector('.skill-location-column')?.textContent).to.contain('/path/b');
-    });
-
-    it('clicking "Open" calls opener with URI.fromFilePath(skill.location)', async () => {
-        const skills: Skill[] = [
-            { name: 'Skill A', description: 'Desc A', location: '/path/a' } as Skill
-        ];
-
-        let openedUri: URI | undefined;
-        const opener: OpenHandler = {
-            id: 'test-opener',
-            canHandle: async () => 1,
-            open: async (uri: URI) => { openedUri = uri; }
-        };
-        const openerService: Partial<OpenerService> = {
-            getOpener: async () => opener,
-            getOpeners: async () => [opener]
-        };
-
-        const widget = createWidget(skills, [], [], openerService);
-        renderWidget(widget);
-
-        const button = host.querySelector('button[title="Open"]');
-        expect(button).to.not.be.null;
-
-        (button as HTMLButtonElement).click();
-        await Promise.resolve();
-
-        expect(openedUri?.toString()).to.equal(URI.fromFilePath('/path/a').toString());
-    });
-
-    // --- Slash commands section tests ---
-
-    it('renders slash commands section when commands are available', () => {
-        const commands: PromptFragment[] = [
-            { id: 'cmd1', template: '', isCommand: true, commandName: 'test', commandDescription: 'Test command' },
-            { id: 'cmd2', template: '', isCommand: true, commandName: 'help', commandDescription: 'Help command' }
-        ];
-
-        const widget = createWidget([], commands);
-        renderWidget(widget);
-
-        const slashCommandsSection = host.querySelector('.ai-slash-commands-section');
-        expect(slashCommandsSection).to.not.be.null;
-
-        const rows = Array.from(slashCommandsSection!.querySelectorAll('tbody tr'));
-        expect(rows.length).to.equal(2);
-
-        // Commands are sorted alphabetically by name: 'help' comes before 'test'
-        expect(rows[0].querySelector('.slash-command-name-column')?.textContent).to.contain('/help');
-        expect(rows[0].querySelector('.slash-command-description-column')?.textContent).to.contain('Help command');
-
-        expect(rows[1].querySelector('.slash-command-name-column')?.textContent).to.contain('/test');
-        expect(rows[1].querySelector('.slash-command-description-column')?.textContent).to.contain('Test command');
-    });
-
-    it('renders empty state for slash commands when none are available', () => {
-        const widget = createWidget();
-        renderWidget(widget);
-
-        const slashCommandsSection = host.querySelector('.ai-slash-commands-section');
-        expect(slashCommandsSection).to.not.be.null;
-
-        const emptyState = slashCommandsSection!.querySelector('.ai-empty-state-content');
-        expect(emptyState).to.not.be.null;
-    });
-
-    it('shows "All agents" when command has no specific agents', () => {
-        const commands: PromptFragment[] = [
-            { id: 'cmd1', template: '', isCommand: true, commandName: 'global', commandDescription: 'Global command' }
-        ];
-
-        const widget = createWidget([], commands);
-        renderWidget(widget);
-
-        const allAgentsText = host.querySelector('.slash-command-all-agents');
-        expect(allAgentsText).to.not.be.null;
-    });
-
-    it('shows agent chips when command is restricted to specific agents', () => {
-        const agents: Agent[] = [
-            { id: 'agent1', name: 'Agent One', description: 'Test agent 1', variables: [], functions: [], prompts: [], agentSpecificVariables: [], languageModelRequirements: [] },
-            { id: 'agent2', name: 'Agent Two', description: 'Test agent 2', variables: [], functions: [], prompts: [], agentSpecificVariables: [], languageModelRequirements: [] }
-        ];
-
-        const commands: PromptFragment[] = [
-            { id: 'cmd1', template: '', isCommand: true, commandName: 'specific', commandDescription: 'Agent-specific command', commandAgents: ['agent1'] }
-        ];
-
-        const widget = createWidget([], commands, agents);
-        renderWidget(widget);
-
-        const agentChips = host.querySelectorAll('.agent-chip');
-        expect(agentChips.length).to.equal(1);
-        expect(agentChips[0].textContent).to.contain('Agent One');
-    });
-});

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

@@ -1,229 +0,0 @@
-// *****************************************************************************
-// 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
-// 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, URI } from '@theia/core';
-import { codicon, OpenerService, open, ReactWidget } from '@theia/core/lib/browser';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import * as React from '@theia/core/shared/react';
-import { Skill } from '@theia/ai-core/lib/common/skill';
-import { SkillService } from '@theia/ai-core/lib/browser/skill-service';
-import { PromptFragment, PromptService } from '@theia/ai-core/lib/common/prompt-service';
-import { Agent, AgentService } from '@theia/ai-core';
-import { isChatAgent } from '@theia/ai-chat';
-
-@injectable()
-export class AISkillsConfigurationWidget extends ReactWidget {
-    static readonly ID = 'ai-skills-configuration-widget';
-    static readonly LABEL = nls.localizeByDefault('Skills');
-
-    @inject(SkillService)
-    protected readonly skillService: SkillService;
-
-    @inject(OpenerService)
-    protected readonly openerService: OpenerService;
-
-    @inject(PromptService)
-    protected readonly promptService: PromptService;
-
-    @inject(AgentService)
-    protected readonly agentService: AgentService;
-
-    protected skills: Skill[] = [];
-    protected slashCommands: PromptFragment[] = [];
-    protected agents: Agent[] = [];
-
-    @postConstruct()
-    protected init(): void {
-        this.id = AISkillsConfigurationWidget.ID;
-        this.title.label = AISkillsConfigurationWidget.LABEL;
-        this.title.closable = false;
-        this.addClass('ai-configuration-widget');
-
-        this.loadSkills();
-        this.loadSlashCommands();
-        this.loadAgents();
-        this.update();
-        this.toDispose.pushAll([
-            this.skillService.onSkillsChanged(() => {
-                this.loadSkills();
-                this.update();
-            }),
-            this.promptService.onPromptsChange(() => {
-                this.loadSlashCommands();
-                this.update();
-            }),
-            this.agentService.onDidChangeAgents(() => {
-                this.loadAgents();
-                this.update();
-            })
-        ]);
-    }
-
-    protected loadSkills(): void {
-        this.skills = this.skillService.getSkills().sort((a, b) => a.name.localeCompare(b.name));
-    }
-
-    protected loadSlashCommands(): void {
-        this.slashCommands = this.promptService.getCommands().sort((a, b) => {
-            const nameA = a.commandName ?? a.id;
-            const nameB = b.commandName ?? b.id;
-            return nameA.localeCompare(nameB);
-        });
-    }
-
-    protected loadAgents(): void {
-        this.agents = this.agentService.getAllAgents();
-    }
-
-    protected getAgentsForCommand(command: PromptFragment): Agent[] {
-        if (!command.commandAgents || command.commandAgents.length === 0) {
-            return [];
-        }
-        return this.agents.filter(agent => command.commandAgents!.includes(agent.id));
-    }
-
-    protected openSkill = (skill: Skill): void => {
-        open(this.openerService, URI.fromFilePath(skill.location));
-    };
-
-    protected render(): React.ReactNode {
-        return (
-            <div className="ai-skills-configuration-container">
-                {this.renderSkillsSection()}
-                {this.renderSlashCommandsSection()}
-            </div>
-        );
-    }
-
-    protected renderSkillsSection(): React.ReactNode {
-        return (
-            <div className="ai-skills-section">
-                <h3 className="section-header">
-                    {nls.localizeByDefault('Skills')}
-                </h3>
-                {this.skills.length === 0 ? (
-                    <div className="ai-empty-state-content">
-                        {nls.localize('theia/ai/ide/skillsConfiguration/noSkills', 'No skills available')}
-                    </div>
-                ) : (
-                    <div className="ai-configuration-table-container">
-                        <table className="ai-configuration-table">
-                            <thead>
-                                <tr>
-                                    <th className="skill-name-column">{nls.localizeByDefault('Name')}</th>
-                                    <th className="skill-description-column">{nls.localizeByDefault('Description')}</th>
-                                    <th className="skill-location-column">
-                                        {nls.localizeByDefault('Location')}
-                                    </th>
-                                    <th className="skill-open-column"></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {this.skills.map(skill => this.renderSkillRow(skill))}
-                            </tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    protected renderSkillRow(skill: Skill): React.ReactNode {
-        return (
-            <tr key={skill.name}>
-                <td className="skill-name-column"><span>{skill.name}</span></td>
-                <td className="skill-description-column"><span>{skill.description}</span></td>
-                <td className="skill-location-column"><span>{skill.location}</span></td>
-                <td className="skill-open-column">
-                    <button
-                        className="theia-button secondary"
-                        onClick={() => this.openSkill(skill)}
-                        title={nls.localizeByDefault('Open')}
-                    >
-                        {nls.localizeByDefault('Open')}
-                    </button>
-                </td>
-            </tr>
-        );
-    }
-
-    protected renderSlashCommandsSection(): React.ReactNode {
-        return (
-            <div className="ai-slash-commands-section">
-                <h3 className="section-header">
-                    {nls.localize('theia/ai/ide/skillsConfiguration/slashCommandsSectionHeader', 'Slash Commands')}
-                </h3>
-                {this.slashCommands.length === 0 ? (
-                    <div className="ai-empty-state-content">
-                        {nls.localize('theia/ai/ide/skillsConfiguration/noSlashCommands', 'No slash commands available')}
-                    </div>
-                ) : (
-                    <div className="ai-configuration-table-container">
-                        <table className="ai-configuration-table">
-                            <thead>
-                                <tr>
-                                    <th className="slash-command-name-column">
-                                        {nls.localizeByDefault('Command')}
-                                    </th>
-                                    <th className="slash-command-description-column">{nls.localizeByDefault('Description')}</th>
-                                    <th className="slash-command-agents-column">
-                                        {nls.localizeByDefault('Agents')}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {this.slashCommands.map(command => this.renderSlashCommandRow(command))}
-                            </tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    protected renderSlashCommandRow(command: PromptFragment): React.ReactNode {
-        const agents = this.getAgentsForCommand(command);
-        const isGlobalCommand = !command.commandAgents || command.commandAgents.length === 0;
-
-        return (
-            <tr key={command.id}>
-                <td className="slash-command-name-column">
-                    <span className="slash-command-prefix">/</span>
-                    <span>{command.commandName ?? command.id}</span>
-                </td>
-                <td className="slash-command-description-column">
-                    <span>{command.commandDescription ?? ''}</span>
-                </td>
-                <td className="slash-command-agents-column">
-                    {isGlobalCommand ? (
-                        <span className="slash-command-all-agents">
-                            {nls.localize('theia/ai/ide/skillsConfiguration/slashCommand/allAgents', 'All agents')}
-                        </span>
-                    ) : (
-                        <div className="slash-command-agent-chips">
-                            {agents.map(agent => (
-                                <span key={agent.id} className="agent-chip" title={agent.description}>
-                                    <span className={(isChatAgent(agent) && agent.iconClass) ? agent.iconClass : codicon('copilot')}></span>
-                                    {agent.name}
-                                </span>
-                            ))}
-                        </div>
-                    )}
-                </td>
-            </tr>
-        );
-    }
-}

package/src/browser/ai-configuration/template-settings-renderer.tsx

@@ -1,125 +0,0 @@
-// *****************************************************************************
-// Copyright (C) 2024 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
-// 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 { isCustomizedPromptFragment, PromptService, PromptVariantSet } from '@theia/ai-core/lib/common';
-import * as React from '@theia/core/shared/react';
-import { nls } from '@theia/core/lib/common/nls';
-
-export interface PromptVariantRendererProps {
-    agentId: string;
-    promptVariantSet: PromptVariantSet;
-    promptService: PromptService;
-}
-
-export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
-    agentId,
-    promptVariantSet,
-    promptService,
-}) => {
-    const variantIds = promptService.getVariantIds(promptVariantSet.id);
-    const defaultVariantId = promptService.getDefaultVariantId(promptVariantSet.id);
-    const [selectedVariant, setSelectedVariant] = React.useState<string>(defaultVariantId!);
-
-    const isVariantCustomized = (variantId: string): boolean => {
-        const fragment = promptService.getRawPromptFragment(variantId);
-        return fragment ? isCustomizedPromptFragment(fragment) : false;
-    };
-
-    React.useEffect(() => {
-        const currentVariant = promptService.getSelectedVariantId(promptVariantSet.id);
-        setSelectedVariant(currentVariant ?? defaultVariantId!);
-
-        const disposable = promptService.onSelectedVariantChange(notification => {
-            if (notification.promptVariantSetId === promptVariantSet.id) {
-                setSelectedVariant(notification.variantId ?? defaultVariantId!);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [promptVariantSet.id, promptService, defaultVariantId]);
-
-    const isInvalidVariant = !variantIds.includes(selectedVariant);
-
-    const handleVariantChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const newVariant = event.target.value;
-        setSelectedVariant(newVariant);
-        promptService.updateSelectedVariantId(agentId, promptVariantSet.id, newVariant);
-    };
-
-    const openTemplate = () => {
-        promptService.editBuiltInCustomization(selectedVariant);
-    };
-
-    const resetTemplate = () => {
-        promptService.resetToBuiltIn(selectedVariant);
-    };
-
-    return (
-        <>
-            <tr>
-                <td className="template-name-cell">{promptVariantSet.id}</td>
-                <td className="template-variant-cell">
-                    {(variantIds.length > 1 || isInvalidVariant) && (
-                        <select
-                            id={`variant-selector-${promptVariantSet.id}`}
-                            className={`theia-select template-variant-selector ${isInvalidVariant ? 'error' : ''}`}
-                            value={isInvalidVariant ? 'invalid' : selectedVariant}
-                            onChange={handleVariantChange}
-                        >
-                            {isInvalidVariant && (
-                                <option value="invalid" disabled>
-                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'Unavailable')}
-                                </option>
-                            )}
-                            {variantIds.map(variantId => {
-                                const isEdited = isVariantCustomized(variantId);
-                                const editedPrefix = isEdited ? `[${nls.localize('theia/ai/core/templateSettings/edited', 'edited')}] ` : '';
-                                const defaultSuffix = variantId === defaultVariantId ? ' ' + nls.localizeByDefault('(default)') : '';
-                                return (
-                                    <option key={variantId} value={variantId}>
-                                        {editedPrefix}{variantId}{defaultSuffix}
-                                    </option>
-                                );
-                            })}
-                        </select>
-                    )}
-                    {variantIds.length === 1 && !isInvalidVariant && (
-                        <span>
-                            {isVariantCustomized(selectedVariant)
-                                ? `[${nls.localize('theia/ai/core/templateSettings/edited', 'edited')}] ${selectedVariant}`
-                                : selectedVariant}
-                        </span>
-                    )}
-                </td>
-                <td className="template-actions-cell">
-                    <button
-                        className="template-action-icon-button codicon codicon-edit"
-                        onClick={openTemplate}
-                        disabled={isInvalidVariant}
-                        title={nls.localizeByDefault('Edit')}
-                    />
-                    {isVariantCustomized(selectedVariant) &&
-                        (<button
-                            className="template-action-icon-button codicon codicon-discard"
-                            onClick={resetTemplate}
-                            disabled={isInvalidVariant || !isVariantCustomized(selectedVariant)}
-                            title={nls.localizeByDefault('Reset')}
-                        />)}
-                </td>
-            </tr>
-        </>
-    );
-};