@theia/ai-ide 1.63.0-next.24 → 1.63.0

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

@@ -18,7 +18,14 @@ import { ReactWidget } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { HoverService } from '@theia/core/lib/browser/hover-service';
-import { MCPFrontendNotificationService, MCPFrontendService, MCPServerDescription, MCPServerStatus } from '@theia/ai-mcp/lib/common/mcp-server-manager';
+import {
+    isLocalMCPServerDescription,
+    isRemoteMCPServerDescription,
+    MCPFrontendNotificationService,
+    MCPFrontendService,
+    MCPServerDescription,
+    MCPServerStatus
+} from '@theia/ai-mcp/lib/common/mcp-server-manager';
 import { MessageService, nls } from '@theia/core';
 import { PROMPT_VARIABLE } from '@theia/ai-core/lib/common/prompt-variable-contribution';
 
@@ -67,12 +74,15 @@ export class AIMCPConfigurationWidget extends ReactWidget {
         }
         switch (status) {
             case MCPServerStatus.Running:
+            case MCPServerStatus.Connected:
                 return { bg: 'var(--theia-successBackground)', fg: 'var(--theia-successForeground)' };
             case MCPServerStatus.Starting:
+            case MCPServerStatus.Connecting:
                 return { bg: 'var(--theia-warningBackground)', fg: 'var(--theia-warningForeground)' };
             case MCPServerStatus.Errored:
                 return { bg: 'var(--theia-errorBackground)', fg: 'var(--theia-errorForeground)' };
             case MCPServerStatus.NotRunning:
+            case MCPServerStatus.NotConnected:
             default:
                 return { bg: 'var(--theia-inputValidation-infoBackground)', fg: 'var(--theia-inputValidation-infoForeground)' };
         }
@@ -106,10 +116,14 @@ export class AIMCPConfigurationWidget extends ReactWidget {
         );
     }
 
-    protected renderStatusBadge(status?: MCPServerStatus, error?: string): React.ReactNode {
-        const colors = this.getStatusColor(status);
-        const displayStatus = status || MCPServerStatus.NotRunning;
+    protected renderStatusBadge(server: MCPServerDescription): React.ReactNode {
+        const colors = this.getStatusColor(server.status);
+        let displayStatus = server.status;
+        if (!displayStatus) {
+            displayStatus = isRemoteMCPServerDescription(server) ? MCPServerStatus.NotConnected : MCPServerStatus.NotRunning;
+        }
         const spanRef = React.createRef<HTMLSpanElement>();
+        const error = server.error;
         return (
             <div className="mcp-status-container">
                 <span className="mcp-status-badge" style={{
@@ -136,12 +150,15 @@ export class AIMCPConfigurationWidget extends ReactWidget {
         return (
             <div className="mcp-server-header">
                 <div className="mcp-server-name">{server.name}</div>
-                {this.renderStatusBadge(server.status, server.error)}
+                {this.renderStatusBadge(server)}
             </div>
         );
     }
 
     protected renderCommandSection(server: MCPServerDescription): React.ReactNode {
+        if (!isLocalMCPServerDescription(server)) {
+            return;
+        }
         return (
             <div className="mcp-server-section">
                 <span className="mcp-section-label">{nls.localize('theia/ai/mcpConfiguration/command', 'Command: ')}</span>
@@ -151,7 +168,7 @@ export class AIMCPConfigurationWidget extends ReactWidget {
     }
 
     protected renderArgumentsSection(server: MCPServerDescription): React.ReactNode {
-        if (!server.args || server.args.length === 0) {
+        if (!isLocalMCPServerDescription(server) || !server.args || server.args.length === 0) {
             return;
         }
         return (
@@ -163,7 +180,7 @@ export class AIMCPConfigurationWidget extends ReactWidget {
     }
 
     protected renderEnvironmentSection(server: MCPServerDescription): React.ReactNode {
-        if (!server.env || Object.keys(server.env).length === 0) {
+        if (!isLocalMCPServerDescription(server) || !server.env || Object.keys(server.env).length === 0) {
             return;
         }
         return (
@@ -172,7 +189,7 @@ export class AIMCPConfigurationWidget extends ReactWidget {
                 <div className="mcp-env-block">
                     {Object.entries(server.env).map(([key, value]) => (
                         <div key={key}>
-                            {key}={key.toLowerCase().includes('token') ? '******' : value}
+                            {key}={key.toLowerCase().includes('token') ? '******' : String(value)}
                         </div>
                     ))}
                 </div>
@@ -180,6 +197,42 @@ export class AIMCPConfigurationWidget extends ReactWidget {
         );
     }
 
+    protected renderServerUrlSection(server: MCPServerDescription): React.ReactNode {
+        if (!isRemoteMCPServerDescription(server)) {
+            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>
+        );
+    }
+
+    protected renderServerAuthTokenHeaderSection(server: MCPServerDescription): React.ReactNode {
+        if (!isRemoteMCPServerDescription(server) || !server.serverAuthTokenHeader) {
+            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>
+        );
+    }
+
+    protected renderServerAuthTokenSection(server: MCPServerDescription): React.ReactNode {
+        if (!isRemoteMCPServerDescription(server) || !server.serverAuthToken) {
+            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>
+        );
+    }
+
     protected renderAutostartSection(server: MCPServerDescription): React.ReactNode {
         return (
             <div className="mcp-server-section">
@@ -286,19 +339,31 @@ export class AIMCPConfigurationWidget extends ReactWidget {
     }
 
     protected renderServerControls(server: MCPServerDescription): React.ReactNode {
-        const isStoppable = server.status === MCPServerStatus.Running || server.status === MCPServerStatus.Starting;
-        const isStartable = server.status === MCPServerStatus.NotRunning || server.status === MCPServerStatus.Errored;
+        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> {nls.localize('theia/ai/mcpConfiguration/startServer', 'Start Server')}</>,
-                    nls.localize('theia/ai/mcpConfiguration/startServer', 'Start Server'),
+                    <><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> {nls.localize('theia/ai/mcpConfiguration/stopServer', 'Stop Server')}</>,
-                    nls.localize('theia/ai/mcpConfiguration/stopServer', 'Stop Server'),
+                    <><i className="codicon codicon-close"></i> {stopLabel}</>,
+                    stopLabel,
                     () => this.handleStopServer(server.name),
                     'mcp-server-button stop-button'
                 )}
@@ -313,6 +378,9 @@ export class AIMCPConfigurationWidget extends ReactWidget {
                 {this.renderCommandSection(server)}
                 {this.renderArgumentsSection(server)}
                 {this.renderEnvironmentSection(server)}
+                {this.renderServerUrlSection(server)}
+                {this.renderServerAuthTokenHeaderSection(server)}
+                {this.renderServerAuthTokenSection(server)}
                 {this.renderAutostartSection(server)}
                 {this.renderToolsSection(server)}
                 {this.renderServerControls(server)}

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

@@ -26,7 +26,6 @@ import {
     BasePromptFragment
 } from '@theia/ai-core/lib/common/prompt-service';
 import * as React from '@theia/core/shared/react';
-import '../../../src/browser/style/index.css';
 import { AgentService } from '@theia/ai-core/lib/common/agent-service';
 import { Agent } from '@theia/ai-core/lib/common/agent';
 import { CustomizationSource } from '@theia/ai-core/lib/browser/frontend-prompt-customization-service';
@@ -347,9 +346,7 @@ export class AIPromptFragmentsConfigurationWidget extends ReactWidget {
 
         const shouldReset = await dialog.open();
         if (shouldReset) {
-            this.promptFragmentMap.forEach(fragments => {
-                this.promptService.resetToBuiltIn(fragments[0].id);
-            });
+            this.promptService.resetAllToBuiltIn();
         }
     };
 

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

@@ -77,7 +77,7 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
                         >
                             {isInvalidVariant && (
                                 <option value="invalid" disabled>
-                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'The selected variant is no longer available')}
+                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'Selected variant not available, default will be used')}
                                 </option>
                             )}
                             {variantIds.map(variantId => (

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

@@ -20,10 +20,10 @@ import * as React from '@theia/core/shared/react';
 import { ToolConfirmationManager, ToolConfirmationMode } from '@theia/ai-chat/lib/browser/chat-tool-preferences';
 import { ToolInvocationRegistry } from '@theia/ai-core';
 
-const TOOL_OPTIONS: { value: ToolConfirmationMode, label: string, icon: string, color: string }[] = [
-    { value: ToolConfirmationMode.DISABLED, label: 'Disabled', icon: 'close', color: 'var(--theia-errorForeground)' },
-    { value: ToolConfirmationMode.CONFIRM, label: 'Confirm', icon: 'question', color: 'var(--theia-descriptionForeground)' },
-    { value: ToolConfirmationMode.YOLO, label: 'Yolo', icon: 'thumbsup', color: 'var(--theia-successForeground)' },
+const TOOL_OPTIONS: { value: ToolConfirmationMode, label: string, icon: string }[] = [
+    { value: ToolConfirmationMode.DISABLED, label: 'Disabled', icon: 'close' },
+    { value: ToolConfirmationMode.CONFIRM, label: 'Confirm', icon: 'question' },
+    { value: ToolConfirmationMode.ALWAYS_ALLOW, label: 'Always Allow', icon: 'thumbsup' },
 ];
 
 @injectable()
@@ -102,18 +102,6 @@ export class AIToolsConfigurationWidget extends ReactWidget {
         await this.updateDefaultConfirmation(newState);
     };
 
-    protected getColoring(mode: ToolConfirmationMode, renderDefault = false): string {
-        if (!renderDefault && mode === this.defaultState) {
-            return '';
-        }
-        if (mode === ToolConfirmationMode.YOLO) {
-            return ' ai-tools-configuration-tool-select--yolo';
-        } else if (mode === ToolConfirmationMode.DISABLED) {
-            return ' ai-tools-configuration-tool-select--disabled';
-        }
-        return ' ai-tools-configuration-tool-select--confirm';
-    }
-
     protected async resetAllToolsToDefault(): Promise<void> {
         const dialog = new ConfirmDialog({
             title: 'Reset All Tool Confirmation Modes',
@@ -135,13 +123,13 @@ export class AIToolsConfigurationWidget extends ReactWidget {
             <div className='ai-tools-configuration-default-section' style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                 <div className='ai-tools-configuration-default-label'>Default Tool Confirmation Mode:</div>
                 <select
-                    className={`ai-tools-configuration-default-select ${this.getColoring(this.defaultState, true)}`}
+                    className="ai-tools-configuration-default-select"
                     value={this.defaultState}
                     onChange={this.handleDefaultStateChange}
                     style={{ marginLeft: 8 }}
                 >
                     {TOOL_OPTIONS.map(opt => (
-                        <option className={this.getColoring(opt.value, true)} key={opt.value} value={opt.value}>{opt.label}</option>
+                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                     ))}
                 </select>
                 <button
@@ -159,10 +147,7 @@ export class AIToolsConfigurationWidget extends ReactWidget {
                     {this.tools.map(tool => {
                         const state = this.toolConfirmationModes[tool] || this.defaultState;
                         const isDefault = state === this.defaultState;
-                        let selectClass = 'ai-tools-configuration-tool-select';
-                        if (!isDefault) {
-                            selectClass += `${this.getColoring(state)}`;
-                        }
+                        const selectClass = 'ai-tools-configuration-tool-select';
                         return (
                             <li
                                 key={tool}
@@ -178,7 +163,7 @@ export class AIToolsConfigurationWidget extends ReactWidget {
                                     onChange={e => this.handleToolConfirmationModeChange(tool, e)}
                                 >
                                     {TOOL_OPTIONS.map(opt => (
-                                        <option className={this.getColoring(opt.value, true)} key={opt.value} value={opt.value}>
+                                        <option key={opt.value} value={opt.value}>
                                             {opt.label}
                                         </option>
                                     ))}

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

@@ -26,7 +26,22 @@ 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';
 
-export const EXPECTED_MCP_SERVER_NAME = 'playwright';
+export const REQUIRED_MCP_SERVERS: MCPServerDescription[] = [
+   {
+      name: 'playwright',
+      command: 'npx',
+      args: ['-y', '@playwright/mcp@latest'],
+      autostart: false,
+      env: {},
+   },
+   {
+      name: 'playwright-visual',
+      command: 'npx',
+      args: ['-y', '@playwright/mcp@latest', '--vision'],
+      autostart: false,
+      env: {},
+   }
+];
 
 // Prompt templates
 export const appTesterTemplate: BasePromptFragment = {
@@ -45,7 +60,8 @@ Your role is to inspect the application for user-specified test scenarios throug
 4. Help fix issues when needed
 
 ## Available Playwright Testing Tools
-You have access to these powerful automation tools: {{prompt:mcp_${EXPECTED_MCP_SERVER_NAME}_tools}}
+You have access to these powerful automation tools:
+${REQUIRED_MCP_SERVERS.map(server => `{{prompt:mcp_${server.name}_tools}}`)}
 
 ## Workflow Approach
 1. **Understand Requirements**: Ask the user to clearly define what needs to be tested
@@ -86,30 +102,29 @@ export class AppTesterChatAgent extends AbstractStreamParsingChatAgent {
       + 'It can automate testing workflows and provide detailed feedback on application functionality.');
 
    override iconClass: string = 'codicon codicon-beaker';
-   protected override systemPromptId: string = 'app-tester-prompt';
-   override prompts = [{ id: 'app-tester-prompt', 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.
     */
    override async invoke(request: MutableChatRequestModel): Promise<void> {
       try {
-         const startedServers = await this.mcpService.getStartedServers();
-         if (!startedServers.includes(EXPECTED_MCP_SERVER_NAME)) {
+         if (await this.requiresStartingServers()) {
             // Ask the user if they want to start the server
             request.response.response.addContent(new QuestionResponseContentImpl(
-               'The Playwright MCP server is not running. Would you like to start it now? This may install the Playwright MCP server.',
+               'The Playwright MCP servers are not running. Would you like to start them now? This may install the Playwright MCP servers.',
                [
-                  { text: 'Yes, start the server', value: 'yes' },
+                  { text: 'Yes, start the servers', value: 'yes' },
                   { text: 'No, cancel', value: 'no' }
                ],
                request,
                async selectedOption => {
                   if (selectedOption.value === 'yes') {
                      // Show progress
-                     const progress = request.response.addProgressMessage({ content: 'Starting Playwright MCP server.', show: 'whileIncomplete' });
+                     const progress = request.response.addProgressMessage({ content: 'Starting Playwright MCP servers.', show: 'whileIncomplete' });
                      try {
-                        await this.startPlaywrightMCPServer();
+                        await this.startServers();
                         // Remove progress, continue with normal flow
                         request.response.updateProgressMessage({ ...progress, show: 'whileIncomplete', status: 'completed' });
                         await super.invoke(request);
@@ -121,7 +136,7 @@ export class AppTesterChatAgent extends AbstractStreamParsingChatAgent {
                      }
                   } else {
                      // Continue without starting the server
-                     request.response.response.addContent(new MarkdownChatResponseContentImpl('Please setup the MCP server.'));
+                     request.response.response.addContent(new MarkdownChatResponseContentImpl('Please setup the MCP servers.'));
                      request.response.complete();
                   }
                }
@@ -139,39 +154,34 @@ export class AppTesterChatAgent extends AbstractStreamParsingChatAgent {
       }
    }
 
+   protected async requiresStartingServers(): Promise<boolean> {
+      const allStarted = await Promise.all(REQUIRED_MCP_SERVERS.map(server => this.mcpService.isServerStarted(server.name)));
+      return allStarted.some(started => !started);
+   }
+
+   protected async startServers(): Promise<void> {
+      await Promise.all(REQUIRED_MCP_SERVERS.map(server => this.ensureServerStarted(server)));
+
+   }
+
    /**
     * Starts the Playwright MCP server if it doesn't exist or isn't running.
     *
     * @returns A promise that resolves when the server is started
     */
-   async startPlaywrightMCPServer(): Promise<void> {
+   async ensureServerStarted(server: MCPServerDescription): Promise<void> {
       try {
-         const startedServers = await this.mcpService.getStartedServers();
-         if (startedServers.includes(EXPECTED_MCP_SERVER_NAME)) {
+         if ((await this.mcpService.isServerStarted(server.name))) {
             return;
          }
-
-         const mcpServer: MCPServerDescription = {
-            name: EXPECTED_MCP_SERVER_NAME,
-            command: 'npx',
-            args: ['-y', '@playwright/mcp@latest'],
-            autostart: false,
-            env: {},
-         };
-
-         const availableServers = await this.mcpService.getServerNames();
-         if (!availableServers.includes(EXPECTED_MCP_SERVER_NAME)) {
+         if (!(await this.mcpService.hasServer(server.name))) {
             const currentServers = this.preferenceService.get<Record<string, MCPServerDescription>>(MCP_SERVERS_PREF, {});
-            await this.preferenceService.set(MCP_SERVERS_PREF, {
-               ...currentServers,
-               mcpServer
-            }, PreferenceScope.User);
-
-            await this.mcpService.addOrUpdateServer(mcpServer);
+            await this.preferenceService.set(MCP_SERVERS_PREF, { ...currentServers, server }, PreferenceScope.User);
+            await this.mcpService.addOrUpdateServer(server);
          }
-         await this.mcpService.startServer(EXPECTED_MCP_SERVER_NAME);
+         await this.mcpService.startServer(server.name);
       } catch (error) {
-         this.logger.error(`Error starting Playwright MCP server: ${error}`);
+         this.logger.error(`Error starting MCP server ${server.name}: ${error}`);
          throw error;
       }
    }

package/src/browser/architect-agent.ts

@@ -16,11 +16,11 @@
 import { AbstractStreamParsingChatAgent, ChatRequestModel, ChatService, ChatSession, MutableChatModel, MutableChatRequestModel } from '@theia/ai-chat/lib/common';
 import { LanguageModelRequirement } from '@theia/ai-core';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { architectVariants } from '../common/architect-prompt-template';
+import { architectSystemVariants, architectTaskSummaryVariants } from '../common/architect-prompt-template';
 import { FILE_CONTENT_FUNCTION_ID, GET_WORKSPACE_FILE_LIST_FUNCTION_ID } from '../common/workspace-functions';
 import { nls } from '@theia/core';
 import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering';
-import { AI_SUMMARIZE_SESSION_AS_TASK_FOR_CODER } from '../common/summarize-session-commands';
+import { AI_SUMMARIZE_SESSION_AS_TASK_FOR_CODER, AI_UPDATE_TASK_CONTEXT_COMMAND } from '../common/summarize-session-commands';
 
 @injectable()
 export class ArchitectAgent extends AbstractStreamParsingChatAgent {
@@ -38,9 +38,9 @@ export class ArchitectAgent extends AbstractStreamParsingChatAgent {
         'An AI assistant integrated into Theia IDE, designed to assist software developers. This agent can access the users workspace, it can get a list of all available files \
          and folders and retrieve their content. It cannot modify files. It can therefore answer questions about the current project, project files and source code in the \
          workspace, such as how to build the project, where to put source code, where to find specific code or configurations, etc.');
-    override prompts = [architectVariants];
+    override prompts = [architectSystemVariants, architectTaskSummaryVariants];
     override functions = [GET_WORKSPACE_FILE_LIST_FUNCTION_ID, FILE_CONTENT_FUNCTION_ID];
-    protected override systemPromptId: string | undefined = architectVariants.id;
+    protected override systemPromptId: string | undefined = architectSystemVariants.id;
 
     override async invoke(request: MutableChatRequestModel): Promise<void> {
         await super.invoke(request);
@@ -52,7 +52,10 @@ export class ArchitectAgent extends AbstractStreamParsingChatAgent {
         const session = this.chatService.getSessions().find(candidate => candidate.model.id === model.id);
         if (!(model instanceof MutableChatModel) || !session) { return; }
         if (!model.isEmpty()) {
-            model.setSuggestions([new MarkdownStringImpl(`[Summarize this session as a task for Coder](command:${AI_SUMMARIZE_SESSION_AS_TASK_FOR_CODER.id}).`)]);
+            model.setSuggestions([
+                new MarkdownStringImpl(`[Summarize this session as a task for Coder](command:${AI_SUMMARIZE_SESSION_AS_TASK_FOR_CODER.id}).`),
+                new MarkdownStringImpl(`[Update current task context](command:${AI_UPDATE_TASK_CONTEXT_COMMAND.id}).`)
+            ]);
         }
     }
 }

package/src/browser/frontend-module.ts

@@ -14,6 +14,8 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
+import '../../src/browser/style/index.css';
+
 import { ContainerModule } from '@theia/core/shared/inversify';
 import { ChatAgent, DefaultChatAgentId, FallbackChatAgentId } from '@theia/ai-chat/lib/common';
 import { Agent, AIVariableContribution, bindToolProvider } from '@theia/ai-core/lib/common';

package/src/browser/style/index.css

@@ -2,6 +2,14 @@
   padding: var(--theia-ui-padding);
 }
 
+.ai-configuration-widget [role="tablist"] {
+  overflow: scroll;
+}
+
+.ai-configuration-widget [role="tablist"]::-webkit-scrollbar {
+  height: 4px;
+}
+
 .theia-ai-settings-container {
   padding: var(--theia-ui-padding);
 }
@@ -90,8 +98,15 @@
   flex-direction: row;
 }
 
-.configuration-agents-list {
-  width: 128px;
+#ai-agent-configuration-container-widget
+  .ai-agent-configuration-main
+  .configuration-agents-list {
+  min-width: 160px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-left: 0;
+  padding: var(--theia-ui-padding);
 }
 
 .configuration-agent-panel {
@@ -128,9 +143,12 @@
 }
 
 /* Prompt Fragments Configuration Styles */
+.configuration-variables-list,
+.token-usage-configuration-container,
+.ai-tools-configuration-container,
 .ai-prompt-fragments-configuration {
   padding: var(--theia-ui-padding);
-  max-width: 1200px;
+  max-width: 600px;
   margin: 0 auto;
 }
 
@@ -422,7 +440,8 @@
   gap: 8px;
 }
 
-.prompt-fragment-title h2, h4 {
+.prompt-fragment-title h2,
+h4 {
   margin-right: 8px;
   margin: 0;
 }
@@ -448,10 +467,6 @@
 }
 
 /* MCP Configuration Styles */
-.mcp-configuration-container {
-  padding: 16px;
-}
-
 .mcp-configuration-title {
   margin: 0 0 16px 0;
   border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
@@ -673,11 +688,6 @@
  * AI Tools Configuration Widget Styles
  * Only touch styles in this section for the tools configuration widget
  */
-.ai-tools-configuration-container {
-  padding: 16px;
-  max-width: 600px;
-}
-
 .ai-tools-configuration-default-section {
   margin-bottom: 24px;
 }
@@ -688,7 +698,6 @@
 }
 
 .ai-tools-configuration-default-select {
-  font-weight: bold;
   font-size: 14px;
   padding: 4px;
 }
@@ -728,7 +737,6 @@
 }
 
 .ai-tools-configuration-tool-select {
-  font-weight: bold;
   margin-right: 8px;
 }
 
@@ -736,22 +744,9 @@
   font-size: 18px;
 }
 
-.ai-tools-configuration-tool-select--yolo {
-  color: green !important;
-}
-.ai-tools-configuration-tool-select--disabled {
-  color: red !important;
-}
-.ai-tools-configuration-tool-select--confirm {
-  color: orange !important;
-}
 /* End AI Tools Configuration Widget Styles */
 
 /* Token Usage Configuration Styles */
-.token-usage-configuration-container {
-  padding: 16px;
-}
-
 .token-usage-configuration-title {
   margin: 0 0 16px 0;
   border-bottom: 1px solid var(--theia-widget-border);