@theia/ai-ide 1.67.0-next.56 → 1.67.0-next.86

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/frontend-module.ts

@@ -99,6 +99,9 @@ import { SuggestTerminalCommand } from './ai-terminal-functions';
 import { ContextFileValidationService } from '@theia/ai-chat/lib/browser/context-file-validation-service';
 import { ContextFileValidationServiceImpl } from './context-file-validation-service-impl';
 import { RememberCommandContribution } from './remember-command-contribution';
+import { FixGitHubTicketCommandContribution } from './implement-gh-ticket-command-contribution';
+import { AnalyzesGhTicketCommandContribution } from './analyze-gh-ticket-command-contribution';
+import { AddressGhReviewCommandContribution } from './address-pr-review-command-contribution';
 
 export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(PreferenceContribution).toConstantValue({ schema: aiIdePreferenceSchema });
@@ -278,4 +281,7 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(ContextFileValidationService).toService(ContextFileValidationServiceImpl);
 
     bind(FrontendApplicationContribution).to(RememberCommandContribution);
+    bind(FrontendApplicationContribution).to(FixGitHubTicketCommandContribution);
+    bind(FrontendApplicationContribution).to(AddressGhReviewCommandContribution);
+    bind(FrontendApplicationContribution).to(AnalyzesGhTicketCommandContribution);
 });

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

@@ -0,0 +1,160 @@
+// *****************************************************************************
+// 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 FixGitHubTicketCommandContribution implements FrontendApplicationContribution {
+
+    @inject(PromptService)
+    protected readonly promptService: PromptService;
+
+    onStart(): void {
+        this.registerFixGitHubTicketCommand();
+    }
+
+    protected registerFixGitHubTicketCommand(): void {
+        const commandTemplate = this.buildCommandTemplate();
+
+        this.promptService.addBuiltInPromptFragment({
+            id: 'fix-gh-ticket',
+            template: commandTemplate,
+            isCommand: true,
+            commandName: 'fix-gh-ticket',
+            commandDescription: nls.localize(
+                'theia/ai-ide/fixGhTicketCommand/description',
+                'Analyze a GitHub ticket and implement the solution'
+            ),
+            commandArgumentHint: nls.localize(
+                'theia/ai-ide/fixGhTicketCommand/argumentHint',
+                '<ticket-number>'
+            ),
+            commandAgents: ['Coder']
+        });
+    }
+
+    protected buildCommandTemplate(): string {
+        return `You have been asked to analyze a GitHub ticket and implement the solution.
+
+## Ticket Number
+$ARGUMENTS
+
+## Task Overview
+You need to retrieve details about the specified GitHub ticket, analyze whether it can be implemented, and if so, implement the solution.
+
+## 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 implementing the issue, so completeness is crucial.
+\`\`\`
+
+## Step 2: Analyze AI Solvability
+After receiving the ticket information, analyze whether this ticket can be implemented by you. Consider:
+
+### Criteria for Implementable 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-Implementable 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 implemented:
+Provide a clear explanation:
+1. **Reason**: Explain specifically why this ticket cannot be implemented 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 implementable
+
+Example response format:
+\`\`\`
+## Analysis Result: Cannot Be Implemented
+
+### Reason
+[Explain why]
+
+### Missing Information
+- [Item 1]
+- [Item 2]
+
+### Questions for Clarification
+1. [Question 1]
+2. [Question 2]
+
+Please provide the missing information and I will proceed with the implementation.
+\`\`\`
+
+### If the ticket CAN be implemented:
+Proceed with the implementation:
+
+1. **Briefly summarize** what the ticket requests and your implementation approach
+2. **Explore the codebase** to understand the existing code structure and find relevant files
+3. **Implement the solution** by making the necessary code changes using your file modification tools
+4. **Explain your changes** as you make them
+5. **Consider edge cases** and handle them appropriately
+6. **Suggest testing steps** the user should perform to verify the implementation
+
+Example response format:
+\`\`\`
+## Analysis Result: Can Be Implemented
+
+### Summary
+[Brief summary of the ticket and your approach]
+
+### Implementation
+[Proceed to explore the codebase and implement the changes, explaining as you go]
+\`\`\`
+
+## Important Guidelines for Implementation
+- Always explore the codebase first to understand the existing patterns and conventions
+- Follow the existing code style and patterns in the project
+- Make incremental changes and explain each step
+- If you encounter unexpected issues during implementation, explain them and ask for guidance
+- After implementation, summarize what was changed and suggest how to test the changes
+
+Remember: If at any point during implementation you realize you need more information or the task is more complex than initially assessed, stop and ask for clarification rather 
+than making assumptions.`;
+    }
+}

package/src/browser/style/ai-configuration-base.css

@@ -0,0 +1,90 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+/* Base styles for all AI configuration widgets */
+
+.ai-configuration-widget-content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+/* Empty state styling */
+.ai-configuration-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--theia-ui-padding);
+}
+
+.ai-empty-state-message {
+  color: var(--theia-descriptionForeground);
+  font-style: italic;
+}
+
+/* Configuration section styling */
+.ai-configuration-section {
+  margin-bottom: calc(var(--theia-ui-padding) * 2);
+}
+
+.ai-configuration-section:last-child {
+  margin-bottom: 0;
+}
+
+.ai-configuration-section-content {
+  padding: var(--theia-ui-padding) 0;
+}
+
+.ai-configuration-section-content ul,
+.ai-configuration-section-content ol {
+  padding-left: calc(var(--theia-ui-padding) * 2);
+  margin: 0 var(--theia-ui-padding) 0;
+}
+
+/* Expandable section styling */
+.ai-expandable-section {
+  margin-bottom: var(--theia-ui-padding);
+}
+
+.ai-expandable-section-header {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--theia-ui-padding) / 2) 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ai-expandable-section-header:hover {
+  background-color: var(--theia-list-hoverBackground);
+}
+
+.ai-expandable-section-icon {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--theia-ui-padding) / 2);
+  color: var(--theia-icon-foreground);
+}
+
+.ai-expandable-section-title {
+  flex: 1;
+  font-weight: 500;
+}
+
+.ai-expandable-section-content {
+  padding-left: calc(var(--theia-ui-padding) * 2);
+  padding-top: calc(var(--theia-ui-padding) / 2);
+}

package/src/browser/style/ai-configuration-cards.css

@@ -0,0 +1,60 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+/* Card grid pattern for displaying items in a responsive grid */
+
+.ai-card-grid-configuration-main {
+    padding: var(--theia-ui-padding);
+    height: 100%;
+    overflow: auto;
+}
+
+.ai-configuration-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--theia-ui-padding);
+}
+
+.ai-configuration-card {
+    background-color: var(--theia-sideBar-background);
+    border: var(--theia-border-width) solid var(--theia-widget-border);
+    border-radius: 4px;
+    padding: var(--theia-ui-padding);
+    transition: box-shadow 0.2s ease;
+}
+
+.ai-configuration-card:hover {
+    box-shadow: 0 2px 8px var(--theia-widget-shadow);
+}
+
+/* Responsive grid */
+@media (max-width: 900px) {
+    .ai-configuration-card-grid {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
+}
+
+@media (max-width: 600px) {
+    .ai-configuration-card-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 400px) {
+    .ai-card-grid-configuration-main {
+        padding: calc(var(--theia-ui-padding) / 2);
+    }
+}