@theia/ai-ide 1.64.0-next.35 → 1.64.1

package/src/browser/ai-configuration/language-model-renderer.tsx

@@ -14,7 +14,8 @@
 // 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 { Agent, AISettingsService, LanguageModel, LanguageModelRegistry, LanguageModelRequirement } from '@theia/ai-core/lib/common';
+import { Agent, AISettingsService, FrontendLanguageModelRegistry, LanguageModel, LanguageModelRequirement } from '@theia/ai-core/lib/common';
+import { LanguageModelAlias } from '@theia/ai-core/lib/common/language-model-alias';
 import { Mutable } from '@theia/core';
 import { nls } from '@theia/core/lib/common/nls';
 
@@ -22,11 +23,12 @@ export interface LanguageModelSettingsProps {
     agent: Agent;
     languageModels?: LanguageModel[];
     aiSettingsService: AISettingsService;
-    languageModelRegistry: LanguageModelRegistry;
+    languageModelRegistry: FrontendLanguageModelRegistry;
+    languageModelAliases: LanguageModelAlias[];
 }
 
 export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
-    { agent, languageModels, aiSettingsService, languageModelRegistry }) => {
+    { agent, languageModels, aiSettingsService, languageModelRegistry, languageModelAliases: aliases }) => {
 
     const findLanguageModelRequirement = async (purpose: string): Promise<LanguageModelRequirement | undefined> => {
         const requirementSetting = await aiSettingsService.getAgentSettings(agent.id);
@@ -34,6 +36,7 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
     };
 
     const [lmRequirementMap, setLmRequirementMap] = React.useState<Record<string, LanguageModelRequirement>>({});
+    const [resolvedAliasModels, setResolvedAliasModels] = React.useState<Record<string, LanguageModel | undefined>>({});
 
     React.useEffect(() => {
         const computeLmRequirementMap = async () => {
@@ -54,32 +57,20 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
         computeLmRequirementMap();
     }, []);
 
-    const renderLanguageModelMetadata = (requirement: LanguageModelRequirement, index: number) => {
-        const languageModel = languageModels?.find(model => model.id === requirement.identifier);
-        if (!languageModel) {
-            return <div></div>;
-        }
-
-        return <>
-            <div>{requirement.purpose}</div>
-            <div key={index}>
-                {languageModel.id && <p><strong>{nls.localizeByDefault('Identifier')}: </strong> {languageModel.id}</p>}
-                {languageModel.name && <p><strong>{nls.localizeByDefault('Name')}: </strong> {languageModel.name}</p>}
-                {languageModel.vendor && <p><strong>{nls.localize('theia/ai/core/languageModelRenderer/vendor', 'Vendor')}: </strong> {languageModel.vendor}</p>}
-                {languageModel.version && <p><strong>{nls.localizeByDefault('Version')}: </strong> {languageModel.version}</p>}
-                {languageModel.family && <p><strong>{nls.localize('theia/ai/core/languageModelRenderer/family', 'Family')}: </strong> {languageModel.family}</p>}
-                {languageModel.maxInputTokens &&
-                    <p><strong>
-                        {nls.localize('theia/ai/core/languageModelRenderer/minInputTokens', 'Min Input Tokens')}:
-                    </strong> {languageModel.maxInputTokens}</p>}
-                {languageModel.maxOutputTokens &&
-                    <p><strong>
-                        {nls.localize('theia/ai/core/languageModelRenderer/maxOutputTokens', 'Max Output Tokens')}:
-                    </strong> {languageModel.maxOutputTokens}</p>}
-            </div>
-        </>;
-
-    };
+    // Effect to resolve alias to model whenever requirements.identifier or aliases change
+    React.useEffect(() => {
+        const resolveAliases = async () => {
+            const newResolved: Record<string, LanguageModel | undefined> = {};
+            await Promise.all(Object.values(lmRequirementMap).map(async requirements => {
+                const id = requirements.identifier;
+                if (id && aliases.some(a => a.id === id)) {
+                    newResolved[id] = await languageModelRegistry.getReadyLanguageModel(id);
+                }
+            }));
+            setResolvedAliasModels(newResolved);
+        };
+        resolveAliases();
+    }, [lmRequirementMap, aliases]);
 
     const onSelectedModelChange = (purpose: string, event: React.ChangeEvent<HTMLSelectElement>): void => {
         const newLmRequirementMap = { ...lmRequirementMap, [purpose]: { purpose, identifier: event.target.value } };
@@ -88,35 +79,72 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
     };
 
     return <div className='language-model-container'>
-        {Object.values(lmRequirementMap).map((requirements, index) => (
-            <React.Fragment key={index}>
-                <div><strong>{nls.localize('theia/ai/core/languageModelRenderer/purpose', 'Purpose')}:</strong></div>
-                <div>
-                    {/* language model metadata */}
-                    {renderLanguageModelMetadata(requirements, index)}
-                    {/* language model selector */}
-                    <>
-                        <label
-                            className="theia-header no-select"
-                            htmlFor={`model-select-${agent.id}`}>
-                            {nls.localize('theia/ai/core/languageModelRenderer/languageModel', 'Language Model')}:
-                        </label>
-                        <select
-                            className="theia-select"
-                            id={`model-select-${agent.id}`}
-                            value={requirements.identifier}
-                            onChange={event => onSelectedModelChange(requirements.purpose, event)}
-                        >
-                            <option value=""></option>
-                            {languageModels?.sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)).map(model => (
-                                <option key={model.id} value={model.id}>{model.name ?? model.id}</option>
-                            ))}
-                        </select>
-                    </>
-                    <hr />
-                </div>
-            </React.Fragment>
-        ))}
-
+        {Object.values(lmRequirementMap).map((requirement, index) => {
+            const isAlias = requirement.identifier && aliases.some(a => a.id === requirement.identifier);
+            const resolvedModel = isAlias ? resolvedAliasModels[requirement.identifier] : undefined;
+            return (
+                <React.Fragment key={index}>
+                    <div className="ai-alias-evaluates-to-container">
+                        <strong>{nls.localize('theia/ai/core/languageModelRenderer/purpose', 'Purpose')}:</strong> {requirement.purpose}
+                    </div>
+                    <div>
+                        <div className="ai-alias-evaluates-to-container">
+                            <label
+                                className="theia-header no-select"
+                                htmlFor={`model-select-${agent.id}`}>
+                                {nls.localize('theia/ai/core/languageModelRenderer/languageModel', 'Language Model') + ': '}
+                            </label>
+                            <select
+                                className="theia-select"
+                                id={`model-select-${agent.id}-${requirement.purpose}`}
+                                value={requirement.identifier}
+                                onChange={event => onSelectedModelChange(requirement.purpose, event)}
+                            >
+                                <option value=""></option>
+                                {/* Aliases first, then languange models */}
+                                {aliases?.sort((a, b) => a.id.localeCompare(b.id)).map(alias => (
+                                    <option key={`alias/${alias.id}`} value={alias.id} className='ai-language-model-item-ready'>{`[alias] ${alias.id}`}</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>
+                        {/* If alias is selected, show what it currently evaluates to */}
+                        {isAlias && (
+                            <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 className="ai-model-status-not-ready" title={'No model ready'}>✗</span>
+                                    </span>
+                                )}
+                            </div>
+                        )}
+                        <hr />
+                    </div>
+                </React.Fragment>
+            );
+        })}
     </div>;
 };

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);