@theia/ai-ide 1.64.0-next.28 → 1.64.0

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

@@ -0,0 +1,279 @@
+// *****************************************************************************
+// Copyright (C) 2025 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 * as React from '@theia/core/shared/react';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
+import { LanguageModelAliasRegistry, LanguageModelAlias } from '@theia/ai-core/lib/common/language-model-alias';
+import { FrontendLanguageModelRegistry, LanguageModel, LanguageModelRegistry, LanguageModelRequirement } from '@theia/ai-core/lib/common/language-model';
+import { nls } from '@theia/core/lib/common/nls';
+import { AIConfigurationSelectionService } from './ai-configuration-service';
+import { AgentService, AISettingsService } from '@theia/ai-core';
+
+export interface ModelAliasesConfigurationProps {
+    languageModelAliasRegistry: LanguageModelAliasRegistry;
+    languageModelRegistry: LanguageModelRegistry;
+}
+
+@injectable()
+export class ModelAliasesConfigurationWidget extends ReactWidget {
+    static readonly ID = 'ai-model-aliases-configuration-widget';
+    static readonly LABEL = nls.localize('theia/ai/core/modelAliasesConfiguration/label', 'Model Aliases');
+
+    @inject(LanguageModelAliasRegistry)
+    protected readonly languageModelAliasRegistry: LanguageModelAliasRegistry;
+    @inject(LanguageModelRegistry)
+    protected readonly languageModelRegistry: FrontendLanguageModelRegistry;
+    @inject(AIConfigurationSelectionService)
+    protected readonly aiConfigurationSelectionService: AIConfigurationSelectionService;
+    @inject(AISettingsService)
+    protected readonly aiSettingsService: AISettingsService;
+    @inject(AgentService)
+    protected readonly agentService: AgentService;
+
+    protected aliases: LanguageModelAlias[] = [];
+    protected languageModels: LanguageModel[] = [];
+    /**
+     * Map from alias ID to a list of agent IDs that have a language model requirement for that alias.
+     */
+    protected matchingAgentIdsForAliasMap: Map<string, string[]> = new Map();
+    /**
+     * Map from alias ID to the resolved LanguageModel (what the alias currently evaluates to).
+     */
+    protected resolvedModelForAlias: Map<string, LanguageModel | undefined> = new Map();
+
+    @postConstruct()
+    protected init(): void {
+        this.id = ModelAliasesConfigurationWidget.ID;
+        this.title.label = ModelAliasesConfigurationWidget.LABEL;
+        this.title.closable = false;
+
+        const aliasesPromise = this.loadAliases();
+        const languageModelsPromise = this.loadLanguageModels();
+        const matchingAgentsPromise = this.loadMatchingAgentIdsForAllAliases();
+        Promise.all([aliasesPromise, languageModelsPromise, matchingAgentsPromise]).then(() => this.update());
+
+        this.languageModelAliasRegistry.ready.then(() =>
+            this.toDispose.push(this.languageModelAliasRegistry.onDidChange(async () => {
+                await this.loadAliases();
+                this.update();
+            }))
+        );
+
+        this.toDispose.pushAll([
+            this.languageModelRegistry.onChange(async () => {
+                await this.loadAliases();
+                await this.loadLanguageModels();
+                this.update();
+            }),
+            this.aiSettingsService.onDidChange(async () => {
+                await this.loadMatchingAgentIdsForAllAliases();
+                this.update();
+            }),
+            this.aiConfigurationSelectionService.onDidAliasChange(() => this.update())
+        ]);
+    }
+
+    protected async loadAliases(): Promise<void> {
+        await this.languageModelAliasRegistry.ready;
+        this.aliases = this.languageModelAliasRegistry.getAliases();
+        // Set the initial selection if not set
+        if (this.aliases.length > 0 && !this.aiConfigurationSelectionService.getSelectedAliasId()) {
+            this.aiConfigurationSelectionService.setSelectedAliasId(this.aliases[0].id);
+        }
+        await this.loadMatchingAgentIdsForAllAliases();
+        // Resolve evaluated models for each alias
+        this.resolvedModelForAlias = new Map();
+        for (const alias of this.aliases) {
+            const model = await this.languageModelRegistry.getReadyLanguageModel(alias.id);
+            this.resolvedModelForAlias.set(alias.id, model);
+        }
+    }
+
+    protected async loadLanguageModels(): Promise<void> {
+        this.languageModels = await this.languageModelRegistry.getLanguageModels();
+    }
+
+    /**
+     * Loads a map from alias ID to a list of agent IDs that have a language model requirement for that alias.
+     */
+    protected async loadMatchingAgentIdsForAllAliases(): Promise<void> {
+        const agents = this.agentService.getAllAgents();
+        const aliasMap: Map<string, string[]> = new Map();
+        for (const alias of this.aliases) {
+            const matchingAgentIds: string[] = [];
+            for (const agent of agents) {
+                const requirementSetting = await this.aiSettingsService.getAgentSettings(agent.id);
+                if (requirementSetting?.languageModelRequirements) {
+                    // requirement is set via settings, check if it is this alias
+                    if (requirementSetting?.languageModelRequirements?.find(e => e.identifier === alias.id)) {
+                        matchingAgentIds.push(agent.id);
+                    }
+                } else {
+                    // requirement is NOT set via settings, check if this alias is the default for this agent
+                    if (agent.languageModelRequirements.some((req: LanguageModelRequirement) => req.identifier === alias.id)) {
+                        matchingAgentIds.push(agent.id);
+                    }
+                }
+            }
+            aliasMap.set(alias.id, matchingAgentIds);
+        }
+        this.matchingAgentIdsForAliasMap = aliasMap;
+    }
+
+    protected handleAliasSelectedModelIdChange = (alias: LanguageModelAlias, event: React.ChangeEvent<HTMLSelectElement>): void => {
+        const newModelId = event.target.value || undefined;
+        const updatedAlias: LanguageModelAlias = {
+            ...alias,
+            selectedModelId: newModelId
+        };
+        this.languageModelAliasRegistry.ready.then(() => {
+            this.languageModelAliasRegistry.addAlias(updatedAlias);
+        });
+    };
+
+    render(): React.ReactNode {
+        const selectedAliasId = this.aiConfigurationSelectionService.getSelectedAliasId();
+        const selectedAlias = this.aliases.find(alias => alias.id === selectedAliasId);
+        return (
+            <div className="model-alias-configuration-main">
+                <div className="model-alias-configuration-list preferences-tree-widget theia-TreeContainer ai-model-alias-list">
+                    <ul>
+                        {this.aliases.map(alias => (
+                            <li
+                                key={alias.id}
+                                className={`theia-TreeNode theia-CompositeTreeNode${alias.id === selectedAliasId ? ' theia-mod-selected' : ''}`}
+                                onClick={() => this.aiConfigurationSelectionService.setSelectedAliasId(alias.id)}
+                            >
+                                <span>{alias.id}</span>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className="model-alias-configuration-panel preferences-editor-widget">
+                    {selectedAlias ? this.renderAliasDetail(selectedAlias, this.languageModels) : (
+                        <div>
+                            {nls.localize('theia/ai/core/modelAliasesConfiguration/selectAlias', 'Please select a Model Alias.')}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    protected renderAliasDetail(alias: LanguageModelAlias, languageModels: LanguageModel[]): React.ReactNode {
+        const availableModelIds = languageModels.map(m => m.id);
+        const selectedModelId = alias.selectedModelId ?? '';
+        const isInvalidModel = !!selectedModelId && !availableModelIds.includes(alias.selectedModelId ?? '');
+        const agentIds = this.matchingAgentIdsForAliasMap.get(alias.id) || [];
+        const agents = this.agentService.getAllAgents().filter(agent => agentIds.includes(agent.id));
+        const resolvedModel = this.resolvedModelForAlias.get(alias.id);
+        return (
+            <div>
+                <div className="settings-section-title settings-section-category-title ai-alias-detail-title">
+                    <span>{alias.id}</span>
+                </div>
+                {alias.description && <div className="ai-alias-detail-description">{alias.description}</div>}
+                <div className="ai-alias-detail-selected-model">
+                    <label>{nls.localize('theia/ai/core/modelAliasesConfiguration/selectedModelId', 'Selected Model')}: </label>
+                    <select
+                        className={`theia-select template-variant-selector ${isInvalidModel ? 'error' : ''}`}
+                        value={isInvalidModel ? 'invalid' : selectedModelId}
+                        onChange={event => this.handleAliasSelectedModelIdChange(alias, event)}
+                    >
+                        {isInvalidModel && (
+                            <option value="invalid" disabled>
+                                {nls.localize('theia/ai/core/modelAliasesConfiguration/unavailableModel', 'Selected model is no longer available')}
+                            </option>
+                        )}
+                        <option value="" className='ai-language-model-item-ready'>
+                            {nls.localize('theia/ai/core/modelAliasesConfiguration/defaultList', '[Default list]')}
+                        </option>
+                        {[...languageModels]
+                            .sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id))
+                            .map(model => {
+                                const isNotReady = model.status.status !== 'ready';
+                                return (
+                                    <option
+                                        key={model.id}
+                                        value={model.id}
+                                        className={isNotReady ? 'ai-language-model-item-not-ready' : 'ai-language-model-item-ready'}
+                                        title={isNotReady && model.status.message ? model.status.message : undefined}
+                                    >
+                                        {model.name ?? model.id} {isNotReady ? '✗' : '✓'}
+                                    </option>
+                                );
+                            }
+                            )}
+                    </select>
+                </div>
+                {alias.selectedModelId === undefined &&
+                    <><div className="ai-alias-detail-defaults">
+                        <ol>
+                            {alias.defaultModelIds.map(modelId => {
+                                const model = this.languageModels.find(m => m.id === modelId);
+                                const isReady = model?.status.status === 'ready';
+                                return (
+                                    <li key={modelId}>
+                                        {isReady ? (
+                                            <span className={modelId === resolvedModel?.id ? 'ai-alias-priority-item-resolved' : 'ai-alias-priority-item-ready'}>
+                                                {modelId} <span className="ai-model-status-ready" title="Ready">✓</span>
+                                            </span>
+                                        ) : (
+                                            <span className="ai-model-default-not-ready">
+                                                {modelId} <span className="ai-model-status-not-ready" title="Not ready">✗</span>
+                                            </span>
+                                        )}
+                                    </li>
+                                );
+                            })}
+                        </ol>
+                    </div><div className="ai-alias-evaluates-to-container">
+                            <label className="ai-alias-evaluates-to-label">{nls.localize('theia/ai/core/modelAliasesConfiguration/evaluatesTo', 'Evaluates to')}:</label>
+                            {resolvedModel ? (
+                                <span className="ai-alias-evaluates-to-value">
+                                    {resolvedModel.name ?? resolvedModel.id}
+                                    {resolvedModel.status.status === 'ready' ? (
+                                        <span className="ai-model-status-ready" title="Ready">✓</span>
+                                    ) : (
+                                        <span className="ai-model-status-not-ready" title={resolvedModel.status.message || 'Not ready'}>✗</span>
+                                    )}
+                                </span>
+                            ) : (
+                                <span className="ai-alias-evaluates-to-unresolved">
+                                    {nls.localize('theia/ai/core/modelAliasesConfiguration/noResolvedModel', 'No model ready for this alias.')}
+                                </span>
+                            )}
+                        </div></>
+                }
+                <div className="ai-alias-detail-agents">
+                    <label>{nls.localize('theia/ai/core/modelAliasesConfiguration/agents', 'Agents using this Alias')}:</label>
+                    <ul>
+                        {agents.length > 0 ? (
+                            agents.map(agent => (
+                                <li key={agent.id}>
+                                    <span>{agent.name}</span>
+                                    {agent.id !== agent.name && <span className="ai-alias-agent-id">({agent.id})</span>}
+                                </li>
+                            ))
+                        ) : (
+                            <span>{nls.localize('theia/ai/core/modelAliasesConfiguration/noAgents', 'No agents use this alias.')}</span>
+                        )}
+                    </ul>
+                </div>
+            </div >
+        );
+    }
+}

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

@@ -77,15 +77,20 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
     protected availableAgents: Agent[] = [];
 
     /**
-     * Maps prompt variant set IDs to their currently selected variant IDs
+     * Maps prompt variant set IDs to their resolved variant IDs
      */
-    protected selectedVariantIds: Map<string, string | undefined> = new Map();
+    protected effectiveVariantIds: Map<string, string | undefined> = new Map();
 
     /**
      * Maps prompt variant set IDs to their default variant IDs
      */
     protected defaultVariantIds: Map<string, string | undefined> = new Map();
 
+    /**
+     * Maps prompt variant set IDs to their user selected variant IDs
+     */
+    protected userSelectedVariantIds: Map<string, string | undefined> = new Map();
+
     @inject(PromptService) protected promptService: PromptService;
     @inject(AgentService) protected agentService: AgentService;
 
@@ -103,10 +108,6 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
             this.promptService.onPromptsChange(() => {
                 this.loadPromptFragments();
             }),
-            this.promptService.onSelectedVariantChange(notification => {
-                this.selectedVariantIds.set(notification.promptVariantSetId, notification.variantId);
-                this.update();
-            }),
             this.agentService.onDidChangeAgents(() => {
                 this.loadAgents();
             })
@@ -117,7 +118,7 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
      * Loads all prompt fragments and prompt variant sets from the prompt service.
      * Preserves UI expansion states and updates variant information.
      */
-    protected async loadPromptFragments(): Promise<void> {
+    protected loadPromptFragments(): void {
         this.promptFragmentMap = this.promptService.getAllPromptFragments();
         this.promptVariantsMap = this.promptService.getPromptVariantSets();
         this.activePromptFragments = this.promptService.getActivePromptFragments();
@@ -154,11 +155,13 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
             })
         );
 
-        // Update variant information (selected/default) for prompt variant sets
+        // Update variant information (selected/default/effective) for prompt variant sets
         for (const promptVariantSetId of this.promptVariantsMap.keys()) {
-            const selectedId = await this.promptService.getSelectedVariantId(promptVariantSetId);
-            const defaultId = await this.promptService.getDefaultVariantId(promptVariantSetId);
-            this.selectedVariantIds.set(promptVariantSetId, selectedId);
+            const effectiveId = this.promptService.getEffectiveVariantId(promptVariantSetId);
+            const defaultId = this.promptService.getDefaultVariantId(promptVariantSetId);
+            const selectedId = this.promptService.getSelectedVariantId(promptVariantSetId) ?? defaultId;
+            this.userSelectedVariantIds.set(promptVariantSetId, selectedId);
+            this.effectiveVariantIds.set(promptVariantSetId, effectiveId);
             this.defaultVariantIds.set(promptVariantSetId, defaultId);
         }
 
@@ -405,8 +408,9 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
     protected renderPromptVariantSet(promptVariantSetId: string, variantIds: string[]): React.ReactNode {
         const isSectionExpanded = this.expandedPromptVariantSetIds.has(promptVariantSetId);
 
-        // Get selected and default variant IDs from our class properties
-        const selectedVariantId = this.selectedVariantIds.get(promptVariantSetId);
+        // Get selected, effective, and default variant IDs from our class properties
+        const selectedVariantId = this.userSelectedVariantIds.get(promptVariantSetId);
+        const effectiveVariantId = this.effectiveVariantIds.get(promptVariantSetId);
         const defaultVariantId = this.defaultVariantIds.get(promptVariantSetId);
 
         // Get variant fragments grouped by ID
@@ -421,6 +425,31 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
 
         const relatedAgents = this.getAgentsUsingPromptVariantId(promptVariantSetId);
 
+        // Determine warning/error state
+        let variantSetMessage: React.ReactNode | undefined = undefined;
+        if (effectiveVariantId === undefined) {
+            // Error: effectiveId is undefined, so nothing works
+            variantSetMessage = (
+                <div className="prompt-variant-error">
+                    <span className="codicon codicon-error"></span>
+                    {nls.localize('theia/ai/core/promptFragmentsConfiguration/variantSetError',
+                        'The selected variant does not exist and no default could be found. Please check your configuration.')}
+                </div>
+            );
+        } else {
+            const needsWarning = selectedVariantId ? effectiveVariantId !== selectedVariantId : effectiveVariantId !== defaultVariantId;
+            if (needsWarning) {
+                // Warning: selectedId is set but does not exist, so default is used
+                variantSetMessage = (
+                    <div className="prompt-variant-warning">
+                        <span className="codicon codicon-warning"></span>
+                        {nls.localize('theia/ai/core/promptFragmentsConfiguration/variantSetWarning',
+                            'The selected variant does not exist. The default variant is being used instead.')}
+                    </div>
+                );
+            }
+        }
+
         return (
             <div className="prompt-fragment-section" key={`variant-${promptVariantSetId}`}>
                 <div
@@ -446,6 +475,7 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
                 </div>
                 {isSectionExpanded && (
                     <div className="prompt-fragment-body">
+                        {variantSetMessage}
                         <div className="prompt-fragment-description">
                             <p>{nls.localize('theia/ai/core/promptFragmentsConfiguration/variantsOfSystemPrompt', 'Variants of this prompt variant set:')}</p>
                         </div>

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

@@ -33,14 +33,18 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
     const [selectedVariant, setSelectedVariant] = React.useState<string>(defaultVariantId!);
 
     React.useEffect(() => {
-        (async () => {
-            const currentVariant =
-                await promptService.getSelectedVariantId(promptVariantSet.id);
-            if (currentVariant) {
-                setSelectedVariant(currentVariant);
+        const currentVariant = promptService.getSelectedVariantId(promptVariantSet.id);
+        setSelectedVariant(currentVariant ?? defaultVariantId!);
+
+        const disposable = promptService.onSelectedVariantChange(notification => {
+            if (notification.promptVariantSetId === promptVariantSet.id) {
+                setSelectedVariant(notification.variantId ?? defaultVariantId!);
             }
-        })();
-    }, [promptVariantSet.id, agentId]);
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [promptVariantSet.id, promptService, defaultVariantId]);
 
     const isInvalidVariant = !variantIds.includes(selectedVariant);
 

package/src/browser/ai-ide-activation-service.ts

@@ -0,0 +1,65 @@
+// *****************************************************************************
+// Copyright (C) 2025 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 { inject, injectable } from '@theia/core/shared/inversify';
+import { FrontendApplicationContribution, PreferenceService } from '@theia/core/lib/browser';
+import { Emitter, MaybePromise, Event, } from '@theia/core';
+import { ContextKeyService, ContextKey } from '@theia/core/lib/browser/context-key-service';
+import { AIActivationService, ENABLE_AI_CONTEXT_KEY } from '@theia/ai-core/lib/browser/ai-activation-service';
+import { PREFERENCE_NAME_ENABLE_AI } from './ai-ide-preferences';
+
+/**
+ * Implements AI Activation Service based on preferences.
+ */
+@injectable()
+export class AIIdeActivationServiceImpl implements AIActivationService, FrontendApplicationContribution {
+    @inject(ContextKeyService)
+    protected readonly contextKeyService: ContextKeyService;
+
+    @inject(PreferenceService)
+    protected preferenceService: PreferenceService;
+
+    protected isAiEnabledKey: ContextKey<boolean>;
+
+    protected onDidChangeAIEnabled = new Emitter<boolean>();
+    get onDidChangeActiveStatus(): Event<boolean> {
+        return this.onDidChangeAIEnabled.event;
+    }
+
+    get isActive(): boolean {
+        return this.isAiEnabledKey.get() ?? false;
+    }
+
+    protected updateEnableValue(value: boolean): void {
+        if (value !== this.isAiEnabledKey.get()) {
+            this.isAiEnabledKey.set(value);
+            this.onDidChangeAIEnabled.fire(value);
+        }
+    }
+
+    initialize(): MaybePromise<void> {
+        this.isAiEnabledKey = this.contextKeyService.createKey(ENABLE_AI_CONTEXT_KEY, false);
+        // make sure we don't miss once preferences are ready
+        this.preferenceService.ready.then(() => {
+            const enableValue = this.preferenceService.get<boolean>(PREFERENCE_NAME_ENABLE_AI, false);
+            this.updateEnableValue(enableValue);
+        });
+        this.preferenceService.onPreferenceChanged(e => {
+            if (e.preferenceName === PREFERENCE_NAME_ENABLE_AI) {
+                this.updateEnableValue(e.newValue);
+            }
+        });
+    }
+}

package/src/browser/ai-ide-preferences.ts

@@ -0,0 +1,44 @@
+// *****************************************************************************
+// Copyright (C) 2025 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 { AI_CORE_PREFERENCES_TITLE, ENABLE_AI_CONTEXT_KEY } from '@theia/ai-core/lib/browser';
+import { nls } from '@theia/core';
+import { PreferenceSchema } from '@theia/core/lib/browser';
+
+// We reuse the context key for the preference name
+export const PREFERENCE_NAME_ENABLE_AI = ENABLE_AI_CONTEXT_KEY;
+
+export const aiIdePreferenceSchema: PreferenceSchema = {
+    type: 'object',
+    properties: {
+        [PREFERENCE_NAME_ENABLE_AI]: {
+            title: AI_CORE_PREFERENCES_TITLE,
+            markdownDescription: nls.localize('theia/ai/ide/enableAI/mdDescription',
+                '❗ This setting allows you to access the latest AI capabilities (Beta version).\
+            \n\
+            Please note that these features are in a beta phase, which means they may \
+            undergo changes and will be further improved. It is important to be aware that these features may generate\
+            continuous requests to the language models (LLMs) you provide access to. This might incur costs that you\
+            need to monitor closely. By enabling this option, you acknowledge these risks.\
+            \n\
+            **Please note! The settings below in this section will only take effect\n\
+            once the main feature setting is enabled. After enabling the feature, you need to configure at least one\
+            LLM provider below. Also see [the documentation](https://theia-ide.org/docs/user_ai/)**.'),
+            type: 'boolean',
+            default: false,
+        }
+    }
+};

package/src/browser/app-tester-chat-agent.ts

@@ -16,83 +16,15 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { CHAT_CONTEXT_DETAILS_VARIABLE_ID } from '@theia/ai-chat';
 import { AbstractStreamParsingChatAgent } from '@theia/ai-chat/lib/common/chat-agents';
 import { ErrorChatResponseContentImpl, MarkdownChatResponseContentImpl, MutableChatRequestModel, QuestionResponseContentImpl } from '@theia/ai-chat/lib/common/chat-model';
-import { BasePromptFragment, LanguageModelRequirement } from '@theia/ai-core/lib/common';
+import { LanguageModelRequirement } from '@theia/ai-core/lib/common';
 import { MCPFrontendService, MCPServerDescription } from '@theia/ai-mcp/lib/common/mcp-server-manager';
 import { nls } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { MCP_SERVERS_PREF } from '@theia/ai-mcp/lib/browser/mcp-preferences';
 import { PreferenceScope, PreferenceService } from '@theia/core/lib/browser';
-import { QUERY_DOM_FUNCTION_ID, LAUNCH_BROWSER_FUNCTION_ID, CLOSE_BROWSER_FUNCTION_ID, IS_BROWSER_RUNNING_FUNCTION_ID } from '../common/app-tester-chat-functions';
-
-export const REQUIRED_MCP_SERVERS: MCPServerDescription[] = [
-    {
-        name: 'playwright',
-        command: 'npx',
-        args: ['-y', '@playwright/mcp@latest',
-            '--cdp-endpoint',
-            'http://localhost:9222/'],
-        autostart: false,
-        env: {},
-    },
-    {
-        name: 'playwright-visual',
-        command: 'npx',
-        args: ['-y', '@playwright/mcp@latest', '--vision',
-            '--cdp-endpoint',
-            'http://localhost:9222/'],
-        autostart: false,
-        env: {},
-    }
-];
-
-// Prompt templates
-export const appTesterTemplate: BasePromptFragment = {
-    id: 'app-tester-system-default',
-    template: `{{!-- This prompt is licensed under the MIT License (https://opensource.org/license/mit).
-Made improvements or adaptations to this prompt template? We'd love for you to share it with the community! Contribute back here:
-https://github.com/eclipse-theia/theia/discussions/new?category=prompt-template-contribution --}}
-
-You are AppTester, an AI assistant integrated into Theia IDE specifically designed to help developers test running applications using Playwright.
-Your role is to inspect the application for user-specified test scenarios through the Playwright MCP server.
-
-## Your Workflow
-1. Help the user build and launch their application
-2. Use Playwright browser automation to validate test scenarios
-3. Report results and provide actionable feedback 
-4. Help fix issues when needed
-
-## Available Playwright Testing Tools
-You have access to these powerful automation tools:
-${REQUIRED_MCP_SERVERS.map(server => `{{prompt:mcp_${server.name}_tools}}`)}
-
-- **~{${LAUNCH_BROWSER_FUNCTION_ID}}**: Launch the browser. This is required before performing any browser interactions. Always launch a new browser when starting a test session.
-- **~{${IS_BROWSER_RUNNING_FUNCTION_ID}}**: Check if the browser is running. If a tool fails by saying that the connection failed, you can verify the connection by using this tool.
-- **~{${CLOSE_BROWSER_FUNCTION_ID}}**: Close the browser.
-- **~{${QUERY_DOM_FUNCTION_ID}}**: Query the DOM for specific elements and their properties. Only use when explicitly requested by the user.
-- **browser_snapshot**: Capture the current state of the page for verification or debugging purposes.
-
-Prefer snapshots for investigating the page.
-
-## Workflow Approach
-1. **Understand Requirements**: Ask the user to clearly define what needs to be tested
-2. **Launch Browser**: Start a fresh browser instance for testing
-3. **Navigate and Test**: Execute the test scenario methodically
-4. **Document Results**: Provide detailed results with screenshots when helpful
-5. **Clean Up**: Always close the browser when testing is complete
-
-## Current Context
-Some files and other pieces of data may have been added by the user to the context of the chat. If any have, the details can be found below.
-{{${CHAT_CONTEXT_DETAILS_VARIABLE_ID}}}
-`
-};
-
-export const appTesterTemplateVariant: BasePromptFragment = {
-    id: 'app-tester-system-empty',
-    template: '',
-};
+import { appTesterTemplate, appTesterTemplateVariant, REQUIRED_MCP_SERVERS } from './app-tester-prompt-template';
 
 export const AppTesterChatAgentId = 'AppTester';
 @injectable()
@@ -108,15 +40,15 @@ export class AppTesterChatAgent extends AbstractStreamParsingChatAgent {
     name = AppTesterChatAgentId;
     languageModelRequirements: LanguageModelRequirement[] = [{
         purpose: 'chat',
-        identifier: 'openai/gpt-4o',
+        identifier: 'default/code',
     }];
     protected defaultLanguageModelPurpose: string = 'chat';
     override description = nls.localize('theia/ai/chat/app-tester/description', 'This agent tests your application user interface to verify user-specified test scenarios through the Playwright MCP server. '
         + 'It can automate testing workflows and provide detailed feedback on application functionality.');
 
     override iconClass: string = 'codicon codicon-beaker';
-   protected override systemPromptId: string = 'app-tester-system';
-   override prompts = [{ id: 'app-tester-system', defaultVariant: appTesterTemplate, variants: [appTesterTemplateVariant] }];
+    protected override systemPromptId: string = 'app-tester-system';
+    override prompts = [{ id: 'app-tester-system', defaultVariant: appTesterTemplate, variants: [appTesterTemplateVariant] }];
 
     /**
      * Override invoke to check if the Playwright MCP server is running, and if not, ask the user if it should be started.