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

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

@@ -14,24 +14,29 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ReactWidget, ConfirmDialog } from '@theia/core/lib/browser';
+import { ConfirmDialog } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { ToolInvocationRegistry } from '@theia/ai-core';
 import { nls, PreferenceService } from '@theia/core';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
 import { ToolConfirmationMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
+import { AITableConfigurationWidget, TableColumn } from './base/ai-table-configuration-widget';
 
 const TOOL_OPTIONS: { value: ToolConfirmationMode, label: string, icon: string }[] = [
     { value: ToolConfirmationMode.DISABLED, label: nls.localizeByDefault('Disabled'), icon: 'close' },
     { value: ToolConfirmationMode.CONFIRM, label: nls.localize('theia/ai/ide/toolsConfiguration/toolOptions/confirm/label', 'Confirm'), icon: 'question' },
-    { value: ToolConfirmationMode.ALWAYS_ALLOW, label: nls.localize('theia/ai/ide/toolsConfiguration/toolOptions/alwaysAllow/label', 'Always Allow'), icon: 'thumbsup' },
+    { value: ToolConfirmationMode.ALWAYS_ALLOW, label: nls.localizeByDefault('Always Allow'), icon: 'thumbsup' },
 ];
 
+interface ToolItem {
+    name: string;
+}
+
 @injectable()
-export class AIToolsConfigurationWidget extends ReactWidget {
+export class AIToolsConfigurationWidget extends AITableConfigurationWidget<ToolItem> {
     static readonly ID = 'ai-tools-configuration-widget';
-    static readonly LABEL = nls.localize('theia/ai/ide/toolsConfiguration/label', 'Tools');
+    static readonly LABEL = nls.localizeByDefault('Tools');
 
     @inject(ToolConfirmationManager)
     protected readonly confirmationManager: ToolConfirmationManager;
@@ -42,19 +47,17 @@ export class AIToolsConfigurationWidget extends ReactWidget {
     @inject(ToolInvocationRegistry)
     protected readonly toolInvocationRegistry: ToolInvocationRegistry;
 
-    // Mocked tool list and state
-    protected tools: string[] = [];
     protected toolConfirmationModes: Record<string, ToolConfirmationMode> = {};
     protected defaultState: ToolConfirmationMode;
-    protected loading = true;
 
     @postConstruct()
     protected init(): void {
         this.id = AIToolsConfigurationWidget.ID;
         this.title.label = AIToolsConfigurationWidget.LABEL;
         this.title.closable = false;
-        this.loadData();
-        this.update();
+        this.addClass('ai-configuration-widget');
+
+        this.loadData().then(() => this.update());
         this.toDispose.pushAll([
             this.preferenceService.onPreferenceChanged(async e => {
                 if (e.preferenceName === 'ai-features.chat.toolConfirmation') {
@@ -64,23 +67,25 @@ export class AIToolsConfigurationWidget extends ReactWidget {
                 }
             }),
             this.toolInvocationRegistry.onDidChange(async () => {
-                this.tools = await this.loadTools();
+                await this.loadItems();
                 this.update();
             })
         ]);
     }
 
     protected async loadData(): Promise<void> {
-        // Replace with real service calls
-        this.tools = await this.loadTools();
+        await this.loadItems();
         this.defaultState = await this.loadDefaultConfirmation();
         this.toolConfirmationModes = await this.loadToolConfigurationModes();
-        this.loading = false;
-        this.update();
     }
 
-    protected async loadTools(): Promise<string[]> {
-        return this.toolInvocationRegistry.getAllFunctions().map(func => func.name);
+    protected async loadItems(): Promise<void> {
+        const toolNames = this.toolInvocationRegistry.getAllFunctions().map(func => func.name);
+        this.items = toolNames.map(name => ({ name }));
+    }
+
+    protected getItemId(item: ToolItem): string {
+        return item.name;
     }
     protected async loadDefaultConfirmation(): Promise<ToolConfirmationMode> {
         return this.confirmationManager.getConfirmationMode('*', 'doesNotMatter');
@@ -95,9 +100,9 @@ export class AIToolsConfigurationWidget extends ReactWidget {
         await this.confirmationManager.setConfirmationMode('*', state);
     }
 
-    protected handleToolConfirmationModeChange = async (tool: string, event: React.ChangeEvent<HTMLSelectElement>) => {
+    protected handleToolConfirmationModeChange = async (toolName: string, event: React.ChangeEvent<HTMLSelectElement>) => {
         const newState = event.target.value as ToolConfirmationMode;
-        await this.updateToolConfirmationMode(tool, newState);
+        await this.updateToolConfirmationMode(toolName, newState);
     };
     protected handleDefaultStateChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
         const newState = event.target.value as ToolConfirmationMode;
@@ -118,25 +123,23 @@ export class AIToolsConfigurationWidget extends ReactWidget {
         }
     }
 
-    protected render(): React.ReactNode {
-        if (this.loading) {
-            return <div>{nls.localize('theia/ai/ide/toolsConfiguration/loading', 'Loading tools...')}</div>;
-        }
-        return <div className='ai-tools-configuration-container'>
-            <div className='ai-tools-configuration-default-section' style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <div className='ai-tools-configuration-default-label'>{nls.localize('theia/ai/ide/toolsConfiguration/default/label', 'Default Tool Confirmation Mode:')}</div>
+    protected override renderHeader(): React.ReactNode {
+        return (
+            <div className="ai-tools-configuration-header">
+                <div style={{ fontWeight: 500 }}>
+                    {nls.localize('theia/ai/ide/toolsConfiguration/default/label', 'Default Tool Confirmation Mode:')}
+                </div>
                 <select
-                    className="ai-tools-configuration-default-select"
+                    className="theia-select"
                     value={this.defaultState}
                     onChange={this.handleDefaultStateChange}
-                    style={{ marginLeft: 8 }}
                 >
                     {TOOL_OPTIONS.map(opt => (
                         <option key={opt.value} value={opt.value}>{opt.label}</option>
                     ))}
                 </select>
                 <button
-                    className='ai-tools-configuration-reset-btn'
+                    className='theia-button secondary ai-tools-reset-button'
                     style={{ marginLeft: 'auto' }}
                     title={nls.localize('theia/ai/ide/toolsConfiguration/resetAllTooltip', 'Reset all tools to default')}
                     onClick={() => this.resetAllToolsToDefault()}
@@ -144,38 +147,44 @@ export class AIToolsConfigurationWidget extends ReactWidget {
                     {nls.localize('theia/ai/ide/toolsConfiguration/resetAll', 'Reset All')}
                 </button>
             </div>
-            <div className='ai-tools-configuration-tools-section'>
-                <div className='ai-tools-configuration-tools-label'>{nls.localize('theia/ai/ide/toolsConfiguration/tools/label', 'Tools')}</div>
-                <ul className='ai-tools-configuration-tools-list'>
-                    {this.tools.map(tool => {
-                        const state = this.toolConfirmationModes[tool] || this.defaultState;
-                        const isDefault = state === this.defaultState;
-                        const selectClass = 'ai-tools-configuration-tool-select';
-                        return (
-                            <li
-                                key={tool}
-                                className={
-                                    'ai-tools-configuration-tool-item ' +
-                                    (isDefault ? 'default' : 'custom')
-                                }
-                            >
-                                <span className='ai-tools-configuration-tool-name'>{tool}</span>
-                                <select
-                                    className={selectClass}
-                                    value={state}
-                                    onChange={e => this.handleToolConfirmationModeChange(tool, e)}
-                                >
-                                    {TOOL_OPTIONS.map(opt => (
-                                        <option key={opt.value} value={opt.value}>
-                                            {opt.label}
-                                        </option>
-                                    ))}
-                                </select>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </div>
-        </div>;
+        );
+    }
+
+    protected getColumns(): TableColumn<ToolItem>[] {
+        return [
+            {
+                id: 'tool-name',
+                label: nls.localizeByDefault('Tool'),
+                className: 'tool-name-column',
+                renderCell: (item: ToolItem) => <span>{item.name}</span>
+            },
+            {
+                id: 'confirmation-mode',
+                label: nls.localize('theia/ai/ide/toolsConfiguration/confirmationMode/label', 'Confirmation Mode'),
+                className: 'confirmation-mode-column',
+                renderCell: (item: ToolItem) => {
+                    const state = this.toolConfirmationModes[item.name] || this.defaultState;
+                    return (
+                        <select
+                            className="theia-select"
+                            value={state}
+                            onChange={e => this.handleToolConfirmationModeChange(item.name, e)}
+                        >
+                            {TOOL_OPTIONS.map(opt => (
+                                <option key={opt.value} value={opt.value}>
+                                    {opt.label}
+                                </option>
+                            ))}
+                        </select>
+                    );
+                }
+            }
+        ];
+    }
+
+    protected override getRowClassName(item: ToolItem): string {
+        const state = this.toolConfirmationModes[item.name] || this.defaultState;
+        const isDefault = state === this.defaultState;
+        return isDefault ? 'default-mode' : 'custom-mode';
     }
 }

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

@@ -15,15 +15,16 @@
 // *****************************************************************************
 
 import { Agent, AgentService, AIVariable, AIVariableService } from '@theia/ai-core/lib/common';
-import { codicon, ReactWidget } from '@theia/core/lib/browser';
+import { codicon } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { AIAgentConfigurationWidget } from './agent-configuration-widget';
 import { AIConfigurationSelectionService } from './ai-configuration-service';
 import { nls } from '@theia/core';
+import { AIListDetailConfigurationWidget } from './base/ai-list-detail-configuration-widget';
 
 @injectable()
-export class AIVariableConfigurationWidget extends ReactWidget {
+export class AIVariableConfigurationWidget extends AIListDetailConfigurationWidget<AIVariable> {
 
     static readonly ID = 'ai-variable-configuration-container-widget';
     static readonly LABEL = nls.localizeByDefault('Variables');
@@ -42,60 +43,109 @@ export class AIVariableConfigurationWidget extends ReactWidget {
         this.id = AIVariableConfigurationWidget.ID;
         this.title.label = AIVariableConfigurationWidget.LABEL;
         this.title.closable = false;
-        this.update();
-        this.toDispose.push(this.variableService.onDidChangeVariables(() => this.update()));
-    }
+        this.addClass('ai-configuration-widget');
 
-    protected render(): React.ReactNode {
-        return <div className='configuration-variables-list'>
-            <ul>
-                {this.variableService.getVariables().map(variable =>
-                    <li key={variable.id} className='variable-item' >
-                        <div className='settings-section-title settings-section-category-title' style={{ paddingLeft: 0, paddingBottom: 10 }}>{variable.name}</div>
-                        <small>{variable.id}</small>
-                        <small>{variable.description}</small>
-                        {this.renderReferencedVariables(variable)}
-                        {this.renderArgs(variable)}
-                    </li>
-                )}
-            </ul>
-        </div>;
+        this.loadItems().then(() => this.update());
+        this.toDispose.push(this.variableService.onDidChangeVariables(async () => {
+            await this.loadItems();
+            this.update();
+        }));
     }
 
-    protected renderReferencedVariables(variable: AIVariable): React.ReactNode | undefined {
-        const agents = this.getAgentsForVariable(variable);
-        if (agents.length === 0) {
-            return;
+    protected async loadItems(): Promise<void> {
+        this.items = this.variableService.getVariables();
+        if (this.items.length > 0 && !this.selectedItem) {
+            this.selectedItem = this.items[0];
         }
+    }
 
-        return <div>
-            <h3>{nls.localize('theia/ai/ide/variableConfiguration/agents', 'Agents')}</h3>
-            <ul className='variable-references'>
-                {agents.map(agent => <li key={agent.id} className='theia-TreeNode theia-CompositeTreeNode theia-ExpandableTreeNode theia-mod-selected'>
-                    <div onClick={() => { this.showAgentConfiguration(agent); }} className='variable-reference'>
-                        <span>{agent.name}</span>
-                        <i className={codicon('chevron-right')}></i>
-                    </div></li>)}
-            </ul>
-        </div>;
+    protected getItemId(variable: AIVariable): string {
+        return variable.id;
+    }
+
+    protected getItemLabel(variable: AIVariable): string {
+        return variable.name;
+    }
+
+    protected override getEmptySelectionMessage(): string {
+        return nls.localize('theia/ai/ide/variableConfiguration/selectVariable', 'Please select a Variable.');
+    }
+
+    protected renderItemDetail(variable: AIVariable): React.ReactNode {
+        return (
+            <div>
+                <div className="settings-section-title settings-section-category-title">
+                    {variable.name}
+                    <pre className='ai-id-label'>Id: {variable.id}</pre>
+                </div>
+
+                {variable.description && (
+                    <div style={{
+                        marginBottom: 'calc(var(--theia-ui-padding) * 2)',
+                        color: 'var(--theia-descriptionForeground)',
+                        lineHeight: '1.5'
+                    }}>
+                        {variable.description}
+                    </div>
+                )}
+
+                {this.renderArgs(variable)}
+                {this.renderReferencedVariables(variable)}
+            </div>
+        );
     }
 
     protected renderArgs(variable: AIVariable): React.ReactNode | undefined {
         if (variable.args === undefined || variable.args.length === 0) {
-            return;
+            return undefined;
         }
 
-        return <div className='variable-args-container'>
-            <h3>{nls.localize('theia/ai/ide/variableConfiguration/variableArgs', 'Variable Arguments')}</h3>
-            <div className='variable-args'>
-                {variable.args.map(arg =>
-                    <React.Fragment key={arg.name}>
-                        <span>{arg.name}</span>
-                        <small>{arg.description}</small>
-                    </React.Fragment>
-                )}
-            </div>
-        </div>;
+        return (
+            <>
+                <div className="settings-section-subcategory-title">
+                    {nls.localize('theia/ai/ide/variableConfiguration/variableArgs', 'Arguments')}
+                </div>
+                <div style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'auto 1fr',
+                    gap: 'calc(var(--theia-ui-padding) / 2) var(--theia-ui-padding)',
+                    alignItems: 'start',
+                    marginBottom: 'calc(var(--theia-ui-padding) * 2)'
+                }}>
+                    {variable.args.map(arg => (
+                        <React.Fragment key={arg.name}>
+                            <span style={{ fontWeight: 500 }}>{arg.name}:</span>
+                            <span style={{ color: 'var(--theia-descriptionForeground)' }}>
+                                {arg.description}
+                            </span>
+                        </React.Fragment>
+                    ))}
+                </div>
+            </>
+        );
+    }
+
+    protected renderReferencedVariables(variable: AIVariable): React.ReactNode | undefined {
+        const agents = this.getAgentsForVariable(variable);
+        if (agents.length === 0) {
+            return undefined;
+        }
+
+        return (
+            <>
+                <div className="settings-section-subcategory-title">
+                    {nls.localize('theia/ai/ide/variableConfiguration/usedByAgents', 'Used by Agents')}
+                </div>
+                <ul className="variable-agent-list">
+                    {agents.map(agent => (
+                        <li key={agent.id} className="variable-agent-item" onClick={() => this.showAgentConfiguration(agent)}>
+                            <span>{agent.name}</span>
+                            <i className={codicon('chevron-right')}></i>
+                        </li>
+                    ))}
+                </ul>
+            </>
+        );
     }
 
     protected showAgentConfiguration(agent: Agent): void {

package/src/browser/analyze-gh-ticket-command-contribution.ts

@@ -0,0 +1,176 @@
+// *****************************************************************************
+// 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 { FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { PromptService } from '@theia/ai-core/lib/common';
+import { nls } from '@theia/core';
+import { AGENT_DELEGATION_FUNCTION_ID } from '@theia/ai-chat/lib/browser/agent-delegation-tool';
+import { GitHubChatAgentId } from './github-chat-agent';
+
+@injectable()
+export class AnalyzesGhTicketCommandContribution implements FrontendApplicationContribution {
+
+    @inject(PromptService)
+    protected readonly promptService: PromptService;
+
+    onStart(): void {
+        this.registerGitHubTicketCommand();
+    }
+
+    protected registerGitHubTicketCommand(): void {
+        const commandTemplate = this.buildCommandTemplate();
+
+        this.promptService.addBuiltInPromptFragment({
+            id: 'analyze-gh-ticket',
+            template: commandTemplate,
+            isCommand: true,
+            commandName: 'analyze-gh-ticket',
+            commandDescription: nls.localize(
+                'theia/ai-ide/ticketCommand/description',
+                'Analyze a GitHub ticket and create an implementation plan'
+            ),
+            commandArgumentHint: nls.localize(
+                'theia/ai-ide/ticketCommand/argumentHint',
+                '<ticket-number>'
+            ),
+            commandAgents: ['Architect']
+        });
+    }
+
+    protected buildCommandTemplate(): string {
+        return `You have been asked to analyze a GitHub ticket and create an implementation plan.
+
+## Ticket Number
+$ARGUMENTS
+
+## Task Overview
+You need to retrieve details about the specified GitHub ticket and analyze whether it can be implemented by an AI coding agent.
+
+## Step 1: Retrieve Ticket Information
+Use the ~{${AGENT_DELEGATION_FUNCTION_ID}} tool to delegate to the GitHub agent and retrieve comprehensive information about the ticket.
+
+**Agent ID:** '${GitHubChatAgentId}'
+**Prompt:** Ask the GitHub agent to retrieve ALL details about issue/ticket #$ARGUMENTS, specifically requesting:
+- The complete issue title and description/body
+- All comments on the issue (this is critical for understanding the full context)
+- Labels and assignees
+- Issue state (open/closed)
+- Any referenced issues or pull requests mentioned in the description or comments
+- If other issues are referenced, retrieve their details as well
+
+Example delegation prompt:
+\`\`\`
+Please retrieve comprehensive information about issue #$ARGUMENTS. I need:
+1. The complete issue title, body/description, labels, state, and assignees
+2. ALL comments on this issue - every single comment is important for understanding the context
+3. Any issues or PRs that are referenced or linked in the description or comments
+4. For any referenced issues, please also retrieve their titles and descriptions
+
+This is for analyzing whether the issue can be implemented, so completeness is crucial.
+\`\`\`
+
+## Step 2: Analyze AI Solvability
+After receiving the ticket information, analyze whether this ticket can be solved by an AI coding agent. Consider:
+
+### Criteria for AI-Solvable Tickets:
+- **Clear requirements**: The ticket clearly describes what needs to be done
+- **Defined scope**: The scope of changes is well-defined and bounded
+- **Technical feasibility**: The task involves code changes that can be reasoned about
+- **Sufficient context**: Enough information is provided to understand the problem and solution
+- **Reproducible**: For bugs, there's enough information to understand and reproduce the issue
+
+### Criteria for Non-AI-Solvable Tickets:
+- **Ambiguous requirements**: The ticket is vague or open to multiple interpretations
+- **Missing context**: Critical information is missing (e.g., environment details, reproduction steps)
+- **External dependencies**: Requires access to external systems, credentials, or human interaction
+- **Design decisions needed**: Requires architectural decisions that need human judgment
+- **Insufficient information**: Cannot determine what success looks like
+
+## Step 3: Respond Based on Analysis
+
+### If the ticket CANNOT be solved by AI:
+Provide a clear explanation:
+1. **Reason**: Explain specifically why this ticket cannot be solved by AI
+2. **Missing Information**: List what information is missing or unclear
+3. **Questions for Clarification**: Ask specific questions that, if answered, might make the ticket solvable
+
+Example response format:
+\`\`\`
+## Analysis Result: Cannot Be Solved by AI
+
+### Reason
+[Explain why]
+
+### Missing Information
+- [Item 1]
+- [Item 2]
+
+### Questions for Clarification
+1. [Question 1]
+2. [Question 2]
+\`\`\`
+
+### If the ticket CAN be solved by AI:
+Create a detailed implementation plan:
+
+1. **Summary**: Brief summary of what the ticket requests
+2. **Analysis**: Your understanding of the problem and the proposed solution approach
+3. **Implementation Plan**: A step-by-step plan that a coding agent can follow, including:
+   - Files that likely need to be modified or created
+   - Specific changes to be made in each file
+   - Order of operations
+   - Testing considerations
+4. **Potential Challenges**: Any challenges or edge cases to be aware of
+5. **Success Criteria**: How to verify the implementation is correct
+
+Example response format:
+\`\`\`
+## Analysis Result: Can Be Solved by AI
+
+### Summary
+[Brief summary of the ticket]
+
+### Analysis
+[Your understanding of the problem and solution approach]
+
+### Implementation Plan
+
+#### Step 1: [First step]
+- File: \`path/to/file\`
+- Changes: [Description of changes]
+
+#### Step 2: [Second step]
+- File: \`path/to/file\`
+- Changes: [Description of changes]
+
+[Continue with additional steps...]
+
+### Potential Challenges
+- [Challenge 1]
+- [Challenge 2]
+
+### Success Criteria
+- [Criterion 1]
+- [Criterion 2]
+
+### Next Steps
+To implement this plan, you can ask @Coder to execute it.
+\`\`\`
+
+Remember: Be thorough in your analysis. It's better to ask for clarification than to create an incomplete or incorrect implementation plan.`;
+    }
+}

package/src/browser/default-chat-agent-recommendation-service.ts

@@ -0,0 +1,43 @@
+// *****************************************************************************
+// 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 { injectable } from '@theia/core/shared/inversify';
+import { ChatAgentRecommendationService, RecommendedAgent } from '@theia/ai-chat/lib/common';
+import { nls } from '@theia/core/lib/common/nls';
+
+@injectable()
+export class DefaultChatAgentRecommendationService implements ChatAgentRecommendationService {
+
+    getRecommendedAgents(): RecommendedAgent[] {
+        return [
+            {
+                id: 'Coder',
+                label: nls.localize('theia/ai/chat/agent/coder', 'Coder'),
+                description: nls.localize('theia/ai/chat/agent/coder/description', 'Code generation and modification')
+            },
+            {
+                id: 'Architect',
+                label: nls.localize('theia/ai/chat/agent/architect', 'Architect'),
+                description: nls.localize('theia/ai/chat/agent/architect/description', 'High-level design and architecture')
+            },
+            {
+                id: 'Universal',
+                label: nls.localize('theia/ai/chat/agent/universal', 'Universal'),
+                description: nls.localize('theia/ai/chat/agent/universal/description', 'General-purpose assistant')
+            }
+        ];
+    }
+}