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

package/src/browser/frontend-module.ts

@@ -17,7 +17,7 @@
 import '../../src/browser/style/index.css';
 
 import { ContainerModule } from '@theia/core/shared/inversify';
-import { ChatAgent, DefaultChatAgentId, FallbackChatAgentId } from '@theia/ai-chat/lib/common';
+import { ChatAgent, ChatAgentRecommendationService } from '@theia/ai-chat/lib/common';
 import { Agent, AIVariableContribution, bindToolProvider } from '@theia/ai-core/lib/common';
 import { ArchitectAgent } from './architect-agent';
 import { CoderAgent } from './coder-agent';
@@ -60,8 +60,8 @@ import {
     DefaultFileChangeSetTitleProvider,
     ReplaceContentInFileFunctionHelperV2
 } from './file-changeset-functions';
-import { OrchestratorChatAgent, OrchestratorChatAgentId } from '../common/orchestrator-chat-agent';
-import { UniversalChatAgent, UniversalChatAgentId } from '../common/universal-chat-agent';
+import { OrchestratorChatAgent } from '../common/orchestrator-chat-agent';
+import { UniversalChatAgent } from '../common/universal-chat-agent';
 import { AppTesterChatAgent } from './app-tester-chat-agent';
 import { GitHubChatAgent } from './github-chat-agent';
 import { CommandChatAgent } from '../common/command-chat-agents';
@@ -78,6 +78,7 @@ import { TemplatePreferenceContribution } from './template-preference-contributi
 import { AIMCPConfigurationWidget } from './ai-configuration/mcp-configuration-widget';
 import { ChatWelcomeMessageProvider } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
 import { IdeChatWelcomeMessageProvider } from './ide-chat-welcome-message-provider';
+import { DefaultChatAgentRecommendationService } from './default-chat-agent-recommendation-service';
 import { AITokenUsageConfigurationWidget } from './ai-configuration/token-usage-configuration-widget';
 import { TaskContextSummaryVariableContribution } from './task-background-summary-variable';
 import { GitHubRepoVariableContribution } from './github-repo-variable-contribution';
@@ -99,6 +100,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 });
@@ -146,10 +150,8 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(Agent).toService(CommandChatAgent);
     bind(ChatAgent).toService(CommandChatAgent);
 
-    bind(DefaultChatAgentId).toConstantValue({ id: OrchestratorChatAgentId });
-    bind(FallbackChatAgentId).toConstantValue({ id: UniversalChatAgentId });
-
-    bind(ChatWelcomeMessageProvider).to(IdeChatWelcomeMessageProvider);
+    bind(ChatWelcomeMessageProvider).to(IdeChatWelcomeMessageProvider).inSingletonScope();
+    bind(ChatAgentRecommendationService).to(DefaultChatAgentRecommendationService).inSingletonScope();
 
     bindToolProvider(GetWorkspaceFileList, bind);
     bindToolProvider(FileContentFunction, bind);
@@ -278,4 +280,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/ide-chat-welcome-message-provider.tsx

@@ -17,9 +17,15 @@
 import { ChatWelcomeMessageProvider } from '@theia/ai-chat-ui/lib/browser/chat-tree-view';
 import * as React from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { inject, injectable } from '@theia/core/shared/inversify';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { CommonCommands, LocalizedMarkdown, MarkdownRenderer } from '@theia/core/lib/browser';
+import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
 import { OPEN_AI_CONFIG_VIEW } from './ai-configuration/ai-configuration-view-contribution';
+import { CommandRegistry, DisposableCollection, Emitter, Event, PreferenceScope } from '@theia/core';
+import { AgentService, FrontendLanguageModelRegistry } from '@theia/ai-core/lib/common';
+import { PreferenceService } from '@theia/core/lib/common';
+import { DEFAULT_CHAT_AGENT_PREF, BYPASS_MODEL_REQUIREMENT_PREF } from '@theia/ai-chat/lib/common/ai-chat-preferences';
+import { ChatAgentRecommendationService, ChatAgentService } from '@theia/ai-chat/lib/common';
 
 const TheiaIdeAiLogo = ({ width = 200, height = 200, className = '' }) =>
     <svg
@@ -60,8 +66,138 @@ export class IdeChatWelcomeMessageProvider implements ChatWelcomeMessageProvider
     @inject(MarkdownRenderer)
     protected readonly markdownRenderer: MarkdownRenderer;
 
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
+
+    @inject(FrontendLanguageModelRegistry)
+    protected languageModelRegistry: FrontendLanguageModelRegistry;
+
+    @inject(PreferenceService)
+    protected preferenceService: PreferenceService;
+
+    @inject(ChatAgentRecommendationService)
+    protected recommendationService: ChatAgentRecommendationService;
+
+    @inject(ChatAgentService)
+    protected chatAgentService: ChatAgentService;
+
+    @inject(AgentService)
+    protected agentService: AgentService;
+
+    protected readonly toDispose = new DisposableCollection();
+    protected _hasReadyModels = false;
+    protected _modelRequirementBypassed = false;
+    protected _defaultAgent = '';
+    protected modelConfig: { hasModels: boolean; errorMessages: string[] } | undefined;
+
+    protected readonly onStateChangedEmitter = new Emitter<void>();
+
+    get onStateChanged(): Event<void> {
+        return this.onStateChangedEmitter.event;
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.checkLanguageModelStatus();
+        this.toDispose.push(
+            this.languageModelRegistry.onChange(() => {
+                this.checkLanguageModelStatus();
+            })
+        );
+        this.toDispose.push(
+            this.preferenceService.onPreferenceChanged(e => {
+                if (e.preferenceName === DEFAULT_CHAT_AGENT_PREF) {
+                    const effectiveValue = this.preferenceService.get<string>(DEFAULT_CHAT_AGENT_PREF, '');
+                    if (this._defaultAgent !== effectiveValue) {
+                        this._defaultAgent = effectiveValue;
+                        this.notifyStateChanged();
+                    }
+                } else if (e.preferenceName === BYPASS_MODEL_REQUIREMENT_PREF) {
+                    const effectiveValue = this.preferenceService.get<boolean>(BYPASS_MODEL_REQUIREMENT_PREF, false);
+                    if (this._modelRequirementBypassed !== effectiveValue) {
+                        this._modelRequirementBypassed = effectiveValue;
+                        this.notifyStateChanged();
+                    }
+                }
+            })
+        );
+        this.toDispose.push(
+            this.agentService.onDidChangeAgents(() => {
+                this.notifyStateChanged();
+            })
+        );
+        this.analyzeModelConfiguration().then(config => {
+            this.modelConfig = config;
+            this.notifyStateChanged();
+        });
+        this.preferenceService.ready.then(() => {
+            const defaultAgentValue = this.preferenceService.get(DEFAULT_CHAT_AGENT_PREF, '');
+            const bypassValue = this.preferenceService.get(BYPASS_MODEL_REQUIREMENT_PREF, false);
+            this._defaultAgent = defaultAgentValue;
+            this._modelRequirementBypassed = bypassValue;
+            this.notifyStateChanged();
+        });
+    }
+
+    protected async checkLanguageModelStatus(): Promise<void> {
+        const models = await this.languageModelRegistry.getLanguageModels();
+        this._hasReadyModels = models.some(model => model.status.status === 'ready');
+        this.modelConfig = await this.analyzeModelConfiguration();
+        this.notifyStateChanged();
+    }
+
+    protected async analyzeModelConfiguration(): Promise<{ hasModels: boolean; errorMessages: string[] }> {
+        const models = await this.languageModelRegistry.getLanguageModels();
+        const hasModels = models.length > 0;
+        const unavailableModels = models.filter(model => model.status.status === 'unavailable');
+        const errorMessages = unavailableModels
+            .map(model => model.status.message)
+            .filter((msg): msg is string => !!msg);
+        const uniqueErrorMessages = [...new Set(errorMessages)];
+        return { hasModels, errorMessages: uniqueErrorMessages };
+    }
+
+    protected notifyStateChanged(): void {
+        this.onStateChangedEmitter.fire();
+    }
+
+    get hasReadyModels(): boolean {
+        return this._hasReadyModels;
+    }
+
+    get modelRequirementBypassed(): boolean {
+        return this._modelRequirementBypassed;
+    }
+
+    get defaultAgent(): string {
+        return this._defaultAgent;
+    }
+
+    protected setModelRequirementBypassed(bypassed: boolean): void {
+        this.preferenceService.set(BYPASS_MODEL_REQUIREMENT_PREF, bypassed, PreferenceScope.User);
+    }
+
+    protected setDefaultAgent(agentId: string): void {
+        this.preferenceService.set(DEFAULT_CHAT_AGENT_PREF, agentId, PreferenceScope.User);
+    }
+
+    dispose(): void {
+        this.toDispose.dispose();
+        this.onStateChangedEmitter.dispose();
+    }
+
     renderWelcomeMessage(): React.ReactNode {
-        return <div className={'theia-WelcomeMessage'}>
+        if (!this._hasReadyModels && !this._modelRequirementBypassed) {
+            return this.renderModelConfigurationScreen();
+        }
+        if (!this._defaultAgent) {
+            return this.renderAgentSelectionScreen();
+        }
+        return this.renderWelcomeScreen();
+    }
+
+    protected renderWelcomeScreen(): React.ReactNode {
+        return <div className={'theia-WelcomeMessage'} key="normal-welcome">
             <TheiaIdeAiLogo width={200} height={200} className="theia-WelcomeMessage-Logo" />
             <LocalizedMarkdown
                 localizationKey="theia/ai/ide/chatWelcomeMessage"
@@ -82,6 +218,168 @@ Lean more in the [documentation](https://theia-ide.org/docs/user_ai/#chat).
         </div>;
     }
 
+    protected renderModelConfigurationScreen(): React.ReactNode {
+        const config = this.modelConfig ?? { hasModels: false, errorMessages: [] };
+        const { hasModels, errorMessages } = config;
+
+        if (!hasModels) {
+            return <div className={'theia-WelcomeMessage'} key="setup-state">
+                <div className="theia-WelcomeMessage-ErrorIcon">⚠️</div>
+                <LocalizedMarkdown
+                    localizationKey="theia/ai/ide/noLanguageModelProviders"
+                    defaultMarkdown={`
+## No Language Model Providers Available
+
+No language model provider packages are installed in this IDE.
+
+This typically happens in custom IDE distributions where Theia AI language model packages have been omitted.
+
+**To resolve this:**
+
+- Install one or more language model provider packages (e.g., '@theia/ai-openai', '@theia/ai-anthropic', '@theia/ai-ollama')
+- Or use agents that don't require Theia Language Models (e.g., Claude Code)
+                `}
+                    markdownRenderer={this.markdownRenderer}
+                    className="theia-WelcomeMessage-Content"
+                />
+                <div className="theia-WelcomeMessage-Actions">
+                    <button
+                        className="theia-button main"
+                        onClick={() => this.setModelRequirementBypassed(true)}>
+                        {nls.localize('theia/ai/ide/continueAnyway', 'Continue Anyway')}
+                    </button>
+                </div>
+                <small className="theia-WelcomeMessage-Hint">
+                    {nls.localize('theia/ai/ide/bypassHint', 'Some agents like Claude Code don\'t require Theia Language Models')}
+                </small>
+            </div>;
+        }
+
+        return <div className={'theia-WelcomeMessage'} key="setup-state">
+            <TheiaIdeAiLogo width={150} height={150} className="theia-WelcomeMessage-Logo" />
+            <LocalizedMarkdown
+                key="configure-provider-hasmodels"
+                localizationKey="theia/ai/ide/configureProvider"
+                defaultMarkdown={`
+# Please configure at least one language model provider
+
+If you want to use [OpenAI]({0}), [Anthropic]({1}) or [GoogleAI]({2}) hosted models, please enter an API key in the settings.
+
+If you want to use another provider such as Ollama, please configure it in the settings and adapt agents or a model alias to use your custom model.
+
+**Note:** Some agents, such as Claude Code do not need a provider to be configured, just continue in this case.
+
+See the [documentation](https://theia-ide.org/docs/user_ai/) for more details.
+            `}
+                args={[
+                    `command:${CommonCommands.OPEN_PREFERENCES.id}?ai-features.languageModels.openai`,
+                    `command:${CommonCommands.OPEN_PREFERENCES.id}?ai-features.languageModels.anthropic`,
+                    `command:${CommonCommands.OPEN_PREFERENCES.id}?ai-features.languageModels.googleai`
+                ]}
+                markdownRenderer={this.markdownRenderer}
+                className="theia-WelcomeMessage-Content"
+                markdownOptions={{
+                    supportHtml: true,
+                    isTrusted: { enabledCommands: [CommonCommands.OPEN_PREFERENCES.id] }
+                }}
+            />
+            {errorMessages.length > 0 && (
+                <>
+                    <LocalizedMarkdown
+                        key="configuration-state"
+                        localizationKey="theia/ai/ide/configurationState"
+                        defaultMarkdown="# Current Configuration State"
+                        markdownRenderer={this.markdownRenderer}
+                        className="theia-WelcomeMessage-Content"
+                    />
+                    <div className="theia-WelcomeMessage-Content">
+                        <ul className="theia-WelcomeMessage-IssuesList">
+                            {errorMessages.map((msg, idx) => <li key={idx}>{msg}</li>)}
+                        </ul>
+                    </div>
+                </>
+            )}
+            <div className="theia-WelcomeMessage-Actions">
+                <button
+                    className="theia-button main"
+                    onClick={() => this.commandRegistry.executeCommand(CommonCommands.OPEN_PREFERENCES.id, 'ai-features')}>
+                    {nls.localize('theia/ai/ide/openSettings', 'Open AI Settings')}
+                </button>
+                <button
+                    className="theia-button secondary"
+                    onClick={() => this.setModelRequirementBypassed(true)}>
+                    {nls.localize('theia/ai/ide/continueAnyway', 'Continue Anyway')}
+                </button>
+            </div>
+            <small className="theia-WelcomeMessage-Hint">
+                {nls.localize('theia/ai/ide/bypassHint', 'Some agents like Claude Code don\'t require Theia Language Models')}
+            </small>
+        </div>;
+    }
+
+    protected renderAgentSelectionScreen(): React.ReactNode {
+        const recommendedAgents = this.recommendationService.getRecommendedAgents()
+            .filter(agent => this.chatAgentService.getAgent(agent.id) !== undefined);
+
+        return <div className={'theia-WelcomeMessage theia-WelcomeMessage-AgentSelection'} key="agent-selection">
+            <TheiaIdeAiLogo width={200} height={200} className="theia-WelcomeMessage-Logo" />
+            <LocalizedMarkdown
+                localizationKey="theia/ai/ide/selectDefaultAgent"
+                defaultMarkdown={`
+## Select a Default Chat Agent
+
+Choose the agent to use by default. You can always override this by mentioning @AgentName in your message.
+`}
+                markdownRenderer={this.markdownRenderer}
+                className="theia-WelcomeMessage-Content"
+            />
+            {recommendedAgents.length > 0 && (
+                <p className="theia-WelcomeMessage-RecommendedNote">
+                    {nls.localize('theia/ai/ide/recommendedAgents', 'Recommended agents:')}
+                </p>
+            )}
+            {recommendedAgents.length > 0 ? (
+                <>
+                    <div className="theia-WelcomeMessage-AgentButtons">
+                        {recommendedAgents.map(agent => (
+                            <button
+                                key={agent.id}
+                                className="theia-WelcomeMessage-AgentButton"
+                                onClick={() => this.setDefaultAgent(agent.id)}
+                                title={agent.description}>
+                                <span className="theia-WelcomeMessage-AgentButton-Icon">@</span>
+                                <span className="theia-WelcomeMessage-AgentButton-Label">{agent.label}</span>
+                            </button>
+                        ))}
+                    </div>
+                    <div className="theia-WelcomeMessage-AlternativeOptions">
+                        <p className="theia-WelcomeMessage-OrDivider">
+                            {nls.localize('theia/ai/ide/or', 'or')}
+                        </p>
+                    </div>
+                </>
+            ) : (
+                <AlertMessage
+                    type='WARNING'
+                    header={nls.localize('theia/ai/ide/noRecommendedAgents', 'No recommended agents are available.')}
+                />
+            )}
+            <AlertMessage
+                type='INFO'
+                header={recommendedAgents.length > 0
+                    ? nls.localize('theia/ai/ide/moreAgentsAvailable/header', 'More agents are available')
+                    : nls.localize('theia/ai/ide/configureAgent/header', 'Configure a default agent')}>
+                <LocalizedMarkdown
+                    localizationKey="theia/ai/ide/moreAgentsAvailable"
+                    defaultMarkdown='Use @AgentName to try others or configure a different default in [preferences]({0}).'
+                    args={[`command:${CommonCommands.OPEN_PREFERENCES.id}?ai-features.chat`]}
+                    markdownRenderer={this.markdownRenderer}
+                    markdownOptions={{ isTrusted: { enabledCommands: [CommonCommands.OPEN_PREFERENCES.id] } }}
+                />
+            </AlertMessage>
+        </div>;
+    }
+
     renderDisabledMessage(): React.ReactNode {
         const openAiHistory = 'aiHistory:open';
 

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