@theia/ai-ide 1.67.0-next.59 → 1.67.0

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

@@ -33,7 +33,7 @@ import { PROMPT_VARIABLE } from '@theia/ai-core/lib/common/prompt-variable-contr
 export class AIMCPConfigurationWidget extends ReactWidget {
 
     static readonly ID = 'ai-mcp-configuration-container-widget';
-    static readonly LABEL = nls.localize('theia/ai/mcpConfiguration/widgetLabel', 'MCP Servers');
+    static readonly LABEL = nls.localizeByDefault('MCP Servers');
 
     protected servers: MCPServerDescription[] = [];
     protected expandedTools: Record<string, boolean> = {};
@@ -147,10 +147,44 @@ export class AIMCPConfigurationWidget extends ReactWidget {
     }
 
     protected renderServerHeader(server: MCPServerDescription): React.ReactNode {
+        const isStoppable = server.status === MCPServerStatus.Running
+            || server.status === MCPServerStatus.Connected
+            || server.status === MCPServerStatus.Starting
+            || server.status === MCPServerStatus.Connecting;
+        const isStartable = server.status === MCPServerStatus.NotRunning
+            || server.status === MCPServerStatus.NotConnected
+            || server.status === MCPServerStatus.Errored;
+
+        const isRemote = isRemoteMCPServerDescription(server);
+        const startIcon = isRemote ? 'plug' : 'play';
+        const stopIcon = isRemote ? 'debug-disconnect' : 'close';
+        const startLabel = isRemote
+            ? nls.localize('theia/ai/mcpConfiguration/connectServer', 'Connect')
+            : nls.localizeByDefault('Start Server');
+        const stopLabel = isRemote
+            ? nls.localizeByDefault('Disconnect')
+            : nls.localizeByDefault('Stop Server');
+
         return (
             <div className="mcp-server-header">
                 <div className="mcp-server-name">{server.name}</div>
-                {this.renderStatusBadge(server)}
+                <div className="mcp-server-header-controls">
+                    {this.renderStatusBadge(server)}
+                    {isStartable && (
+                        <button
+                            className={`mcp-action-button codicon codicon-${startIcon}`}
+                            onClick={() => this.handleStartServer(server.name)}
+                            title={startLabel}
+                        />
+                    )}
+                    {isStoppable && (
+                        <button
+                            className={`mcp-action-button codicon codicon-${stopIcon}`}
+                            onClick={() => this.handleStopServer(server.name)}
+                            title={stopLabel}
+                        />
+                    )}
+                </div>
             </div>
         );
     }
@@ -160,9 +194,9 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/command', 'Command: ')}</span>
-                <code className="mcp-code-block">{server.command}</code>
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localizeByDefault('Command')}:</span>
+                <code className="mcp-property-value">{server.command}</code>
             </div>
         );
     }
@@ -172,9 +206,9 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/arguments', 'Arguments: ')}</span>
-                <code className="mcp-code-block">{server.args.join(' ')}</code>
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/arguments', 'Arguments')}:</span>
+                <code className="mcp-property-value">{server.args.join(' ')}</code>
             </div>
         );
     }
@@ -184,12 +218,12 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/environmentVariables', 'Environment Variables: ')}</span>
-                <div className="mcp-env-block">
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/environmentVariables', 'Environment Variables')}:</span>
+                <div className="mcp-property-value">
                     {Object.entries(server.env).map(([key, value]) => (
-                        <div key={key}>
-                            {key}={key.toLowerCase().includes('token') ? '******' : String(value)}
+                        <div key={key} className="mcp-env-entry">
+                            <code>{key}={key.toLowerCase().includes('token') ? '******' : String(value)}</code>
                         </div>
                     ))}
                 </div>
@@ -202,9 +236,9 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/serverUrl', 'Server URL: ')}</span>
-                <code className="mcp-code-block">{server.serverUrl}</code>
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/serverUrl', 'Server URL')}:</span>
+                <code className="mcp-property-value">{server.serverUrl}</code>
             </div>
         );
     }
@@ -214,9 +248,9 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/serverAuthTokenHeader', 'Authentication Header Name: ')}</span>
-                <code className="mcp-code-block">{server.serverAuthTokenHeader}</code>
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/serverAuthTokenHeader', 'Auth Header Name')}:</span>
+                <code className="mcp-property-value">{server.serverAuthTokenHeader}</code>
             </div>
         );
     }
@@ -226,9 +260,9 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/serverAuthToken', 'Authentication Token: ')}</span>
-                <code className="mcp-code-block">******</code>
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/serverAuthToken', 'Auth Token')}:</span>
+                <code className="mcp-property-value">******</code>
             </div>
         );
     }
@@ -238,29 +272,27 @@ export class AIMCPConfigurationWidget extends ReactWidget {
             return;
         }
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/headers', 'Headers: ')}</span>
-                <div className="mcp-env-block">
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/headers', 'Headers')}:</span>
+                <div className="mcp-property-value">
                     {Object.entries(server.headers).map(([key, value]) => (
-                        <div key={key}>
-                            {key}={(key.toLowerCase().includes('token') || key.toLowerCase().includes('authorization')) ? '******' : String(value)}
+                        <div key={key} className="mcp-env-entry">
+                            <code>{key}={(key.toLowerCase().includes('token') || key.toLowerCase().includes('authorization')) ? '******' : String(value)}</code>
                         </div>
                     ))}
                 </div>
-
             </div>
         );
     }
 
     protected renderAutostartSection(server: MCPServerDescription): React.ReactNode {
         return (
-            <div className="mcp-server-section">
-                <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/autostart', 'Autostart: ')}</span>
+            <div className="mcp-property-row">
+                <span className="mcp-property-label">{nls.localize('theia/ai/mcpConfiguration/autostart', 'Autostart')}:</span>
                 <span className="mcp-autostart-badge" style={{
-                    backgroundColor: server.autostart ? 'var(--theia-successBackground)' : 'var(--theia-errorBackground)',
                     color: server.autostart ? 'var(--theia-successForeground)' : 'var(--theia-errorForeground)',
                 }}>
-                    {server.autostart ? nls.localize('theia/ai/mcpConfiguration/enabled', 'Enabled') : nls.localize('theia/ai/mcpConfiguration/disabled', 'Disabled')}
+                    {server.autostart ? nls.localizeByDefault('Enabled') : nls.localizeByDefault('Disabled')}
                 </span>
             </div>
         );
@@ -273,20 +305,16 @@ export class AIMCPConfigurationWidget extends ReactWidget {
         const isToolsExpanded = this.expandedTools[server.name] || false;
         return (
             <div className="mcp-tools-section">
-                <div style={{ display: 'flex', alignItems: 'center' }} onClick={() => this.toggleTools(server.name)}>
-                    <div className="mcp-toggle-indicator" style={{ display: 'flex' }}>
-                        <span style={{
-                            display: 'inline-block',
-                            transition: 'transform 0.2s ease',
-                            fontSize: '12px'
-                        }}>
+                <div className="mcp-tools-header" onClick={() => this.toggleTools(server.name)}>
+                    <div className="mcp-toggle-indicator">
+                        <span className="mcp-toggle-icon">
                             {isToolsExpanded ? '▼' : '►'}
                         </span>
                     </div>
-                    <div style={{ flexGrow: 1 }}>
+                    <div className="mcp-tools-label-container">
                         <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/tools', 'Tools: ')}</span>
                     </div>
-                    <div style={{ display: 'flex', gap: '4px' }}>
+                    <div className="mcp-tools-actions">
                         {this.renderButton(
                             <i className="codicon codicon-versions"></i>,
                             nls.localize('theia/ai/mcpConfiguration/copyAllList', 'Copy all (list of all tools)'),
@@ -327,11 +355,11 @@ export class AIMCPConfigurationWidget extends ReactWidget {
                 {isToolsExpanded && (
                     <div className="mcp-tools-list">
                         {server.tools.map(tool => (
-                            <div key={tool.name} style={{ display: 'flex', alignItems: 'center' }}>
-                                <div style={{ flexGrow: 1 }}>
+                            <div key={tool.name} className="mcp-tool-item">
+                                <div className="mcp-tool-content">
                                     <strong>{tool.name}:</strong> {tool.description}
                                 </div>
-                                <div style={{ display: 'flex', gap: '4px' }}>
+                                <div className="mcp-tool-actions">
                                     {this.renderButton(
                                         <i className="codicon codicon-copy"></i>,
                                         nls.localize('theia/ai/mcpConfiguration/copyForPrompt', 'Copy tool (for chat or prompt template)'),
@@ -357,53 +385,21 @@ export class AIMCPConfigurationWidget extends ReactWidget {
         this.update();
     }
 
-    protected renderServerControls(server: MCPServerDescription): React.ReactNode {
-        const isStoppable = server.status === MCPServerStatus.Running
-            || server.status === MCPServerStatus.Connected
-            || server.status === MCPServerStatus.Starting
-            || server.status === MCPServerStatus.Connecting;
-        const isStartable = server.status === MCPServerStatus.NotRunning
-            || server.status === MCPServerStatus.NotConnected
-            || server.status === MCPServerStatus.Errored;
-
-        const startLabel = isRemoteMCPServerDescription(server)
-            ? nls.localize('theia/ai/mcpConfiguration/connectServer', 'Connnect')
-            : nls.localize('theia/ai/mcpConfiguration/startServer', 'Start Server');
-        const stopLabel = isRemoteMCPServerDescription(server)
-            ? nls.localize('theia/ai/mcpConfiguration/disconnectServer', 'Disconnnect')
-            : nls.localize('theia/ai/mcpConfiguration/stopServer', 'Stop Server');
-        return (
-            <div className="mcp-server-controls">
-                {isStartable && this.renderButton(
-                    <><i className="codicon codicon-play"></i> {startLabel}</>,
-                    startLabel,
-                    () => this.handleStartServer(server.name),
-                    'mcp-server-button play-button'
-                )}
-                {isStoppable && this.renderButton(
-                    <><i className="codicon codicon-close"></i> {stopLabel}</>,
-                    stopLabel,
-                    () => this.handleStopServer(server.name),
-                    'mcp-server-button stop-button'
-                )}
-            </div>
-        );
-    }
-
     protected renderServerCard(server: MCPServerDescription): React.ReactNode {
         return (
             <div key={server.name} className="mcp-server-card">
                 {this.renderServerHeader(server)}
-                {this.renderCommandSection(server)}
-                {this.renderArgumentsSection(server)}
-                {this.renderEnvironmentSection(server)}
-                {this.renderServerUrlSection(server)}
-                {this.renderServerAuthTokenHeaderSection(server)}
-                {this.renderServerAuthTokenSection(server)}
-                {this.renderServerHeadersSection(server)}
-                {this.renderAutostartSection(server)}
+                <div className="mcp-server-content">
+                    {this.renderCommandSection(server)}
+                    {this.renderArgumentsSection(server)}
+                    {this.renderEnvironmentSection(server)}
+                    {this.renderServerUrlSection(server)}
+                    {this.renderServerAuthTokenHeaderSection(server)}
+                    {this.renderServerAuthTokenSection(server)}
+                    {this.renderServerHeadersSection(server)}
+                    {this.renderAutostartSection(server)}
+                </div>
                 {this.renderToolsSection(server)}
-                {this.renderServerControls(server)}
             </div>
         );
     }
@@ -419,7 +415,6 @@ export class AIMCPConfigurationWidget extends ReactWidget {
 
         return (
             <div className="mcp-configuration-container">
-                <h2 className="mcp-configuration-title">{nls.localize('theia/ai/mcpConfiguration/serverConfigurations', 'MCP Server Configurations')}</h2>
                 {this.servers.map(server => this.renderServerCard(server))}
             </div>
         );

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

@@ -15,20 +15,15 @@
 // *****************************************************************************
 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;
-}
+import { AIListDetailConfigurationWidget } from './base/ai-list-detail-configuration-widget';
+import { ConfigurationSection } from './components/configuration-section';
 
 @injectable()
-export class ModelAliasesConfigurationWidget extends ReactWidget {
+export class ModelAliasesConfigurationWidget extends AIListDetailConfigurationWidget<LanguageModelAlias> {
     static readonly ID = 'ai-model-aliases-configuration-widget';
     static readonly LABEL = nls.localize('theia/ai/core/modelAliasesConfiguration/label', 'Model Aliases');
 
@@ -36,22 +31,13 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
     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()
@@ -60,43 +46,45 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
         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());
+        Promise.all([
+            this.loadItems(),
+            this.loadLanguageModels()
+        ]).then(() => this.update());
 
         this.languageModelAliasRegistry.ready.then(() =>
             this.toDispose.push(this.languageModelAliasRegistry.onDidChange(async () => {
-                await this.loadAliases();
+                await this.loadItems();
                 this.update();
             }))
         );
 
         this.toDispose.pushAll([
             this.languageModelRegistry.onChange(async () => {
-                await this.loadAliases();
+                await this.loadItems();
                 await this.loadLanguageModels();
                 this.update();
             }),
             this.aiSettingsService.onDidChange(async () => {
                 await this.loadMatchingAgentIdsForAllAliases();
                 this.update();
-            }),
-            this.aiConfigurationSelectionService.onDidAliasChange(() => this.update())
+            })
         ]);
     }
 
-    protected async loadAliases(): Promise<void> {
+    protected override async loadItems(): 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);
+        this.items = this.languageModelAliasRegistry.getAliases();
+
+        // Set initial selection
+        if (this.items.length > 0 && !this.selectedItem) {
+            this.selectedItem = this.items[0];
         }
+
         await this.loadMatchingAgentIdsForAllAliases();
+
         // Resolve evaluated models for each alias
         this.resolvedModelForAlias = new Map();
-        for (const alias of this.aliases) {
+        for (const alias of this.items) {
             const model = await this.languageModelRegistry.getReadyLanguageModel(alias.id);
             this.resolvedModelForAlias.set(alias.id, model);
         }
@@ -106,23 +94,18 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
         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) {
+        for (const alias of this.items) {
             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);
                     }
@@ -133,6 +116,18 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
         this.matchingAgentIdsForAliasMap = aliasMap;
     }
 
+    protected override getItemId(item: LanguageModelAlias): string {
+        return item.id;
+    }
+
+    protected override getItemLabel(item: LanguageModelAlias): string {
+        return item.id;
+    }
+
+    protected override getEmptySelectionMessage(): string {
+        return nls.localize('theia/ai/core/modelAliasesConfiguration/selectAlias', 'Please select a Model Alias.');
+    }
+
     protected handleAliasSelectedModelIdChange = (alias: LanguageModelAlias, event: React.ChangeEvent<HTMLSelectElement>): void => {
         const newModelId = event.target.value || undefined;
         const updatedAlias: LanguageModelAlias = {
@@ -144,50 +139,28 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
         });
     };
 
-    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);
+    protected override renderItemDetail(alias: LanguageModelAlias): React.ReactNode {
+        const availableModelIds = this.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 className="settings-section-title settings-section-category-title">
+                    {alias.id}
                 </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>
+
+                {alias.description && (
+                    <div className="ai-alias-detail-description">{alias.description}</div>
+                )}
+
+                <ConfigurationSection
+                    title={nls.localize('theia/ai/core/modelAliasesConfiguration/selectedModelId', 'Selected Model')}
+                    className="ai-alias-selected-model-section"
+                >
                     <select
                         className={`theia-select template-variant-selector ${isInvalidModel ? 'error' : ''}`}
                         value={isInvalidModel ? 'invalid' : selectedModelId}
@@ -201,7 +174,7 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
                         <option value="" className='ai-language-model-item-ready'>
                             {nls.localize('theia/ai/core/modelAliasesConfiguration/defaultList', '[Default list]')}
                         </option>
-                        {[...languageModels]
+                        {[...this.languageModels]
                             .sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id))
                             .map(model => {
                                 const isNotReady = model.status.status !== 'ready';
@@ -218,32 +191,41 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
                             }
                             )}
                     </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={nls.localize('theia/ai/core/modelAliasesConfiguration/modelReadyTooltip', 'Ready')}>✓</span>
-                                            </span>
-                                        ) : (
-                                            <span className="ai-model-default-not-ready">
-                                                {modelId} <span className="ai-model-status-not-ready"
-                                                    title={nls.localize('theia/ai/core/modelAliasesConfiguration/modelNotReadyTooltip', '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>
+                </ConfigurationSection>
+
+                {alias.selectedModelId === undefined && (
+                    <>
+                        <ConfigurationSection
+                            title={nls.localize('theia/ai/core/modelAliasesConfiguration/priorityList', 'Priority List')}
+                            className="ai-alias-defaults-section"
+                        >
+                            <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={nls.localize('theia/ai/core/modelAliasesConfiguration/modelReadyTooltip', 'Ready')}>✓</span>
+                                                </span>
+                                            ) : (
+                                                <span className="ai-model-default-not-ready">
+                                                    {modelId} <span className="ai-model-status-not-ready"
+                                                        title={nls.localize('theia/ai/core/modelAliasesConfiguration/modelNotReadyTooltip', 'Not ready')}>✗</span>
+                                                </span>
+                                            )}
+                                        </li>
+                                    );
+                                })}
+                            </ol>
+                        </ConfigurationSection>
+
+                        <ConfigurationSection
+                            title={nls.localize('theia/ai/core/modelAliasesConfiguration/evaluatesTo', 'Evaluates to')}
+                            className="ai-alias-evaluates-to-section"
+                        >
                             {resolvedModel ? (
                                 <span className="ai-alias-evaluates-to-value">
                                     {resolvedModel.name ?? resolvedModel.id}
@@ -260,24 +242,28 @@ export class ModelAliasesConfigurationWidget extends ReactWidget {
                                     {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>
+                        </ConfigurationSection>
+                    </>
+                )}
+
+                <ConfigurationSection
+                    title={nls.localize('theia/ai/core/modelAliasesConfiguration/agents', 'Agents using this Alias')}
+                    className="ai-alias-agents-section"
+                >
                     <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>}
+                                    {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 >
+                </ConfigurationSection>
+            </div>
         );
     }
 }