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

package/lib/browser/address-pr-review-command-contribution.d.ts

@@ -0,0 +1,9 @@
+import { FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { PromptService } from '@theia/ai-core/lib/common';
+export declare class AddressGhReviewCommandContribution implements FrontendApplicationContribution {
+    protected readonly promptService: PromptService;
+    onStart(): void;
+    protected registerAddressGhReviewCommand(): void;
+    protected buildCommandTemplate(): string;
+}
+//# sourceMappingURL=address-pr-review-command-contribution.d.ts.map

package/lib/browser/address-pr-review-command-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-pr-review-command-contribution.d.ts","sourceRoot":"","sources":["../../src/browser/address-pr-review-command-contribution.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK1D,qBACa,kCAAmC,YAAW,+BAA+B;IAGtF,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC;IAEhD,OAAO,IAAI,IAAI;IAIf,SAAS,CAAC,8BAA8B,IAAI,IAAI;IAoBhD,SAAS,CAAC,oBAAoB,IAAI,MAAM;CA8H3C"}

package/lib/browser/address-pr-review-command-contribution.js

@@ -0,0 +1,176 @@
+"use strict";
+// *****************************************************************************
+// 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
+// *****************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddressGhReviewCommandContribution = void 0;
+const tslib_1 = require("tslib");
+const inversify_1 = require("@theia/core/shared/inversify");
+const common_1 = require("@theia/ai-core/lib/common");
+const core_1 = require("@theia/core");
+const agent_delegation_tool_1 = require("@theia/ai-chat/lib/browser/agent-delegation-tool");
+const github_chat_agent_1 = require("./github-chat-agent");
+let AddressGhReviewCommandContribution = class AddressGhReviewCommandContribution {
+    onStart() {
+        this.registerAddressGhReviewCommand();
+    }
+    registerAddressGhReviewCommand() {
+        const commandTemplate = this.buildCommandTemplate();
+        this.promptService.addBuiltInPromptFragment({
+            id: 'address-gh-review',
+            template: commandTemplate,
+            isCommand: true,
+            commandName: 'address-gh-review',
+            commandDescription: core_1.nls.localize('theia/ai-ide/addressGhReviewCommand/description', 'Address review comments on a GitHub pull request'),
+            commandArgumentHint: core_1.nls.localize('theia/ai-ide/addressGhReviewCommand/argumentHint', '<pr-number>'),
+            commandAgents: ['Coder']
+        });
+    }
+    buildCommandTemplate() {
+        return `You have been asked to address review comments on a GitHub pull request.
+
+## Pull Request Number
+$ARGUMENTS
+
+## Task Overview
+You need to retrieve all details about the specified pull request, especially the review comments, assess whether you can safely address all comments, and if so, 
+implement the requested changes.
+
+## Step 1: Retrieve Pull Request Information
+Use the ~{${agent_delegation_tool_1.AGENT_DELEGATION_FUNCTION_ID}} tool to delegate to the GitHub agent and retrieve comprehensive information about the pull request.
+
+**Agent ID:** '${github_chat_agent_1.GitHubChatAgentId}'
+**Prompt:** Ask the GitHub agent to retrieve ALL details about PR #$ARGUMENTS, specifically requesting:
+- The PR title and description
+- The current state of the PR (open, closed, merged)
+- ALL review comments - this is critical, every single review comment must be retrieved
+- General PR comments (conversation)
+- The list of files changed in the PR
+- Any referenced issues
+- Review status (approved, changes requested, etc.)
+
+Example delegation prompt:
+\`\`\`
+Please retrieve comprehensive information about pull request #$ARGUMENTS. I need:
+1. The PR title, description, and current state
+2. ALL review comments on this PR - every single inline review comment is critical
+3. ALL general conversation comments on the PR
+4. The list of files changed in this PR
+5. The current review status (approved, changes requested, pending)
+6. Any linked or referenced issues
+
+This is for addressing the review comments, so completeness is absolutely crucial. Make sure to get every review comment.
+\`\`\`
+
+## Step 2: Analyze and Categorize Review Comments
+After receiving the PR information, analyze each review comment and categorize them:
+
+### Categories of Review Comments:
+1. **Clear code changes**: Comments requesting specific, unambiguous code modifications (e.g., "rename this variable", "add null check here", "fix this typo")
+2. **Style/formatting fixes**: Comments about code style, formatting, or conventions
+3. **Bug fixes**: Comments pointing out bugs or issues that need to be fixed
+4. **Clarification questions**: Reviewers asking questions that need answers, not code changes
+5. **Design discussions**: Comments about architectural or design decisions that require human judgment
+6. **Ambiguous requests**: Comments that are unclear or could be interpreted multiple ways
+
+### Criteria for Safely Addressable Comments:
+- The requested change is clearly specified
+- The change is localized and well-scoped
+- No architectural or design decisions are required
+- The change doesn't conflict with other review comments
+- You have enough context to make the change correctly
+
+### Criteria for Comments Requiring Clarification:
+- The comment is ambiguous or vague
+- Multiple valid interpretations exist
+- The comment requires design decisions
+- Comments conflict with each other
+- The reviewer is asking a question rather than requesting a change
+
+## Step 3: Respond Based on Analysis
+
+### If ANY comments cannot be safely addressed:
+List all comments and their status, then ask for clarification on the problematic ones:
+
+Example response format:
+\`\`\`
+## PR Review Analysis
+
+### Comments I Can Address:
+1. [File: path/to/file.ts, Line X] - "[Comment summary]" - Will [action]
+2. [File: path/to/file.ts, Line Y] - "[Comment summary]" - Will [action]
+
+### Comments Requiring Clarification:
+1. [File: path/to/file.ts, Line Z] - "[Comment summary]"
+   - **Issue**: [Why this needs clarification]
+   - **Question**: [Specific question to resolve ambiguity]
+
+2. [File: path/to/other.ts, Line W] - "[Comment summary]"
+   - **Issue**: [Why this needs clarification]
+   - **Question**: [Specific question to resolve ambiguity]
+
+### Conflicting Comments:
+- [Describe any conflicts between review comments]
+
+Please provide clarification on the above items. Once clarified, I can proceed to address all review comments.
+
+Alternatively, if you'd like me to proceed with just the comments I can safely address, please confirm.
+\`\`\`
+
+### If ALL comments can be safely addressed:
+Proceed with implementing all the requested changes:
+
+1. **List all comments** and what you will do to address each one
+2. **Implement the changes** file by file, addressing each review comment
+3. **Explain each change** as you make it, referencing the original review comment
+4. **Summarize** all changes made at the end
+
+Example response format:
+\`\`\`
+## PR Review Analysis
+
+All review comments can be safely addressed. Proceeding with implementation.
+
+### Review Comments to Address:
+1. [File: path/to/file.ts, Line X] - "[Comment summary]" - Will [action]
+2. [File: path/to/file.ts, Line Y] - "[Comment summary]" - Will [action]
+...
+
+### Implementation
+[Proceed to make changes, explaining each one]
+
+### Summary
+[List all changes made and which review comments they address]
+\`\`\`
+
+## Important Guidelines
+- Always preserve the intent of the original code while addressing review comments
+- If a review comment conflicts with the existing code style, follow the project's conventions
+- Make minimal changes - only change what's necessary to address each comment
+- If you discover issues beyond the review comments, mention them but don't fix them unless asked
+- After implementation, provide a summary that maps each change to the review comment it addresses
+
+Remember: It's better to ask for clarification than to make assumptions that could introduce bugs or go against the reviewer's intent.`;
+    }
+};
+exports.AddressGhReviewCommandContribution = AddressGhReviewCommandContribution;
+tslib_1.__decorate([
+    (0, inversify_1.inject)(common_1.PromptService),
+    tslib_1.__metadata("design:type", Object)
+], AddressGhReviewCommandContribution.prototype, "promptService", void 0);
+exports.AddressGhReviewCommandContribution = AddressGhReviewCommandContribution = tslib_1.__decorate([
+    (0, inversify_1.injectable)()
+], AddressGhReviewCommandContribution);
+//# sourceMappingURL=address-pr-review-command-contribution.js.map

package/lib/browser/address-pr-review-command-contribution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-pr-review-command-contribution.js","sourceRoot":"","sources":["../../src/browser/address-pr-review-command-contribution.ts"],"names":[],"mappings":";AAAA,gFAAgF;AAChF,yCAAyC;AACzC,EAAE;AACF,2EAA2E;AAC3E,mEAAmE;AACnE,wCAAwC;AACxC,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,6EAA6E;AAC7E,yDAAyD;AACzD,uDAAuD;AACvD,EAAE;AACF,gFAAgF;AAChF,gFAAgF;;;;AAGhF,4DAAkE;AAClE,sDAA0D;AAC1D,sCAAkC;AAClC,4FAAgG;AAChG,2DAAwD;AAGjD,IAAM,kCAAkC,GAAxC,MAAM,kCAAkC;IAK3C,OAAO;QACH,IAAI,CAAC,8BAA8B,EAAE,CAAC;IAC1C,CAAC;IAES,8BAA8B;QACpC,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAEpD,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC;YACxC,EAAE,EAAE,mBAAmB;YACvB,QAAQ,EAAE,eAAe;YACzB,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,mBAAmB;YAChC,kBAAkB,EAAE,UAAG,CAAC,QAAQ,CAC5B,iDAAiD,EACjD,kDAAkD,CACrD;YACD,mBAAmB,EAAE,UAAG,CAAC,QAAQ,CAC7B,kDAAkD,EAClD,aAAa,CAChB;YACD,aAAa,EAAE,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;IACP,CAAC;IAES,oBAAoB;QAC1B,OAAO;;;;;;;;;;YAUH,oDAA4B;;iBAEvB,qCAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uIA+GqG,CAAC;IACpI,CAAC;CACJ,CAAA;AA3JY,gFAAkC;AAGxB;IADlB,IAAA,kBAAM,EAAC,sBAAa,CAAC;;yEAC0B;6CAHvC,kCAAkC;IAD9C,IAAA,sBAAU,GAAE;GACA,kCAAkC,CA2J9C"}

package/lib/browser/ai-configuration/agent-configuration-widget.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { Agent, AgentService, AISettingsService, AIVariableService, FrontendLanguageModelRegistry, LanguageModel, PromptFragmentCustomizationService, PromptService } from '@theia/ai-core/lib/common';
-import { QuickInputService, ReactWidget } from '@theia/core/lib/browser';
+import { QuickInputService } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
 import { AIConfigurationSelectionService } from './ai-configuration-service';
 import { LanguageModelAliasRegistry, LanguageModelAlias } from '@theia/ai-core/lib/common/language-model-alias';
+import { AIListDetailConfigurationWidget } from './base/ai-list-detail-configuration-widget';
 interface ParsedPrompt {
     functions: string[];
     globalVariables: string[];
     agentSpecificVariables: string[];
 }
-export declare class AIAgentConfigurationWidget extends ReactWidget {
+export declare class AIAgentConfigurationWidget extends AIListDetailConfigurationWidget<Agent> {
     static readonly ID = "ai-agent-configuration-container-widget";
     static readonly LABEL: string;
     protected readonly agentService: AgentService;
@@ -26,15 +27,20 @@ export declare class AIAgentConfigurationWidget extends ReactWidget {
     protected parsedPromptParts: ParsedPrompt | undefined;
     protected isLoadingDetails: boolean;
     protected init(): void;
+    protected loadItems(): Promise<void>;
+    protected getItemId(agent: Agent): string;
+    protected getItemLabel(agent: Agent): string;
+    protected getEmptySelectionMessage(): string;
+    protected handleItemSelect: (agent: Agent) => void;
+    protected renderItemPrefix(agent: Agent): React.ReactNode;
+    protected renderItemSuffix(agent: Agent): React.ReactNode;
+    protected renderList(): React.ReactNode;
     protected updateParsedPromptParts(): Promise<void>;
-    protected render(): React.ReactNode;
-    protected renderAgentName(agent: Agent): React.ReactNode;
-    protected renderAgentDetails(): React.ReactNode;
+    protected renderItemDetail(agent: Agent): React.ReactNode;
     protected parsePromptFragmentsForVariableAndFunction(agent: Agent): Promise<ParsedPrompt>;
     protected extractVariablesAndFunctions(promptContent: string, result: ParsedPrompt, agent: Agent): void;
     protected showVariableConfigurationTab(): void;
     protected addCustomAgent(): Promise<void>;
-    protected setActiveAgent(agent: Agent): void;
     private toggleAgentEnabled;
 }
 export {};

package/lib/browser/ai-configuration/agent-configuration-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-configuration-widget.d.ts","sourceRoot":"","sources":["../../../src/browser/ai-configuration/agent-configuration-widget.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACH,KAAK,EACL,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,6BAA6B,EAC7B,aAAa,EAIb,kCAAkC,EAClC,aAAa,EAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAW,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGlF,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAKhH,UAAU,YAAY;IAClB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,sBAAsB,EAAE,MAAM,EAAE,CAAC;CACpC;AAED,qBACa,0BAA2B,SAAQ,WAAW;IAEvD,MAAM,CAAC,QAAQ,CAAC,EAAE,6CAA6C;IAC/D,MAAM,CAAC,QAAQ,CAAC,KAAK,SAAoE;IAGzF,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAG9C,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,6BAA6B,CAAC;IAGxE,SAAS,CAAC,QAAQ,CAAC,kCAAkC,EAAE,kCAAkC,CAAC;IAG1F,SAAS,CAAC,QAAQ,CAAC,0BAA0B,EAAE,0BAA0B,CAAC;IAG1E,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAGxD,SAAS,CAAC,QAAQ,CAAC,+BAA+B,EAAE,+BAA+B,CAAC;IAGpF,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,iBAAiB,CAAC;IAGtD,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IAGvC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAExD,SAAS,CAAC,cAAc,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,CAAM;IAC1D,SAAS,CAAC,iBAAiB,EAAE,YAAY,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,gBAAgB,UAAS;IAGnC,SAAS,CAAC,IAAI,IAAI,IAAI;cA0CN,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC;IAYxD,SAAS,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS;IA2BnC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS;IAKxD,SAAS,CAAC,kBAAkB,IAAI,KAAK,CAAC,SAAS;cA0F/B,0CAA0C,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC;IAmB/F,SAAS,CAAC,4BAA4B,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IA2BvG,SAAS,CAAC,4BAA4B,IAAI,IAAI;cAI9B,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAiC/C,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK5C,OAAO,CAAC,kBAAkB,CAYxB;CACL"}
+{"version":3,"file":"agent-configuration-widget.d.ts","sourceRoot":"","sources":["../../../src/browser/ai-configuration/agent-configuration-widget.tsx"],"names":[],"mappings":";AAgBA,OAAO,EACH,KAAK,EACL,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,6BAA6B,EAC7B,aAAa,EAIb,kCAAkC,EAClC,aAAa,EAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAW,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGrE,OAAO,KAAK,KAAK,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAIhH,OAAO,EAAE,+BAA+B,EAAE,MAAM,4CAA4C,CAAC;AAE7F,UAAU,YAAY;IAClB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,sBAAsB,EAAE,MAAM,EAAE,CAAC;CACpC;AAED,qBACa,0BAA2B,SAAQ,+BAA+B,CAAC,KAAK,CAAC;IAElF,MAAM,CAAC,QAAQ,CAAC,EAAE,6CAA6C;IAC/D,MAAM,CAAC,QAAQ,CAAC,KAAK,SAAoE;IAGzF,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAG9C,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,6BAA6B,CAAC;IAGxE,SAAS,CAAC,QAAQ,CAAC,kCAAkC,EAAE,kCAAkC,CAAC;IAG1F,SAAS,CAAC,QAAQ,CAAC,0BAA0B,EAAE,0BAA0B,CAAC;IAG1E,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAGxD,SAAS,CAAC,QAAQ,CAAC,+BAA+B,EAAE,+BAA+B,CAAC;IAGpF,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,iBAAiB,CAAC;IAGtD,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IAGvC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAExD,SAAS,CAAC,cAAc,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,CAAM;IAC1D,SAAS,CAAC,iBAAiB,EAAE,YAAY,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,gBAAgB,UAAS;IAGnC,SAAS,CAAC,IAAI,IAAI,IAAI;cA8CN,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAW1C,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAIzC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;cAIzB,wBAAwB,IAAI,MAAM;IAIrD,UAAmB,gBAAgB,UAAW,KAAK,KAAG,IAAI,CAIxD;cAEiB,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS;cAa/C,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS;cAO/C,UAAU,IAAI,KAAK,CAAC,SAAS;cA+BhC,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC;IAYxD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS;cAqHzC,0CAA0C,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC;IAmB/F,SAAS,CAAC,4BAA4B,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAyBvG,SAAS,CAAC,4BAA4B,IAAI,IAAI;cAI9B,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAiC/C,OAAO,CAAC,kBAAkB,CAYxB;CACL"}

package/lib/browser/ai-configuration/agent-configuration-widget.js

@@ -28,12 +28,18 @@ const language_model_alias_1 = require("@theia/ai-core/lib/common/language-model
 const variable_configuration_widget_1 = require("./variable-configuration-widget");
 const core_1 = require("@theia/core");
 const template_settings_renderer_1 = require("./template-settings-renderer");
+const ai_list_detail_configuration_widget_1 = require("./base/ai-list-detail-configuration-widget");
 ;
-let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentConfigurationWidget extends browser_1.ReactWidget {
+let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentConfigurationWidget extends ai_list_detail_configuration_widget_1.AIListDetailConfigurationWidget {
     constructor() {
         super(...arguments);
         this.languageModelAliases = [];
         this.isLoadingDetails = false;
+        this.handleItemSelect = (agent) => {
+            this.selectedItem = agent;
+            this.aiConfigurationSelectionService.setActiveAgent(agent);
+            this.updateParsedPromptParts();
+        };
         this.toggleAgentEnabled = async () => {
             const agent = this.aiConfigurationSelectionService.getActiveAgent();
             if (!agent) {
@@ -53,10 +59,12 @@ let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentCon
         this.id = AIAgentConfigurationWidget_1.ID;
         this.title.label = AIAgentConfigurationWidget_1.LABEL;
         this.title.closable = false;
-        this.languageModelRegistry.getLanguageModels().then(models => {
-            this.languageModels = models !== null && models !== void 0 ? models : [];
-            this.update();
-        });
+        Promise.all([
+            this.loadItems(),
+            this.languageModelRegistry.getLanguageModels().then(models => {
+                this.languageModels = models !== null && models !== void 0 ? models : [];
+            })
+        ]).then(() => this.update());
         this.languageModelAliasRegistry.ready.then(() => {
             this.languageModelAliases = this.languageModelAliasRegistry.getAliases();
             this.toDispose.push(this.languageModelAliasRegistry.onDidChange(() => {
@@ -64,27 +72,74 @@ let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentCon
                 this.update();
             }));
         });
-        this.toDispose.push(this.languageModelRegistry.onChange(({ models }) => {
-            this.languageModelAliases = this.languageModelAliasRegistry.getAliases();
-            this.languageModels = models;
-            this.update();
-        }));
-        this.toDispose.push(this.promptService.onPromptsChange(() => this.updateParsedPromptParts()));
-        // Only call updateParsedPromptParts() as it already calls this.update() internally
-        this.toDispose.push(this.promptFragmentCustomizationService.onDidChangePromptFragmentCustomization(() => {
-            this.updateParsedPromptParts();
-        }));
-        // Only call updateParsedPromptParts() as it already calls this.update() internally
-        this.toDispose.push(this.aiSettingsService.onDidChange(() => {
-            this.updateParsedPromptParts();
-        }));
-        // Only call updateParsedPromptParts() as it already calls this.update() internally
-        this.toDispose.push(this.aiConfigurationSelectionService.onDidAgentChange(() => {
-            this.updateParsedPromptParts();
-        }));
-        this.agentService.onDidChangeAgents(() => this.update());
+        this.toDispose.pushAll([
+            this.languageModelRegistry.onChange(({ models }) => {
+                this.languageModelAliases = this.languageModelAliasRegistry.getAliases();
+                this.languageModels = models;
+                this.update();
+            }),
+            this.promptService.onPromptsChange(() => this.updateParsedPromptParts()),
+            this.promptFragmentCustomizationService.onDidChangePromptFragmentCustomization(() => {
+                this.updateParsedPromptParts();
+            }),
+            this.aiSettingsService.onDidChange(() => {
+                this.updateParsedPromptParts();
+            }),
+            this.aiConfigurationSelectionService.onDidAgentChange(() => {
+                this.selectedItem = this.aiConfigurationSelectionService.getActiveAgent();
+                this.updateParsedPromptParts();
+            }),
+            this.agentService.onDidChangeAgents(async () => {
+                await this.loadItems();
+                this.update();
+            })
+        ]);
         this.updateParsedPromptParts();
     }
+    async loadItems() {
+        this.items = this.agentService.getAllAgents();
+        const activeAgent = this.aiConfigurationSelectionService.getActiveAgent();
+        if (activeAgent) {
+            this.selectedItem = activeAgent;
+        }
+        else if (this.items.length > 0 && !this.selectedItem) {
+            this.selectedItem = this.items[0];
+            this.aiConfigurationSelectionService.setActiveAgent(this.items[0]);
+        }
+    }
+    getItemId(agent) {
+        return agent.id;
+    }
+    getItemLabel(agent) {
+        return agent.name;
+    }
+    getEmptySelectionMessage() {
+        return core_1.nls.localize('theia/ai/core/agentConfiguration/selectAgentMessage', 'Please select an Agent first!');
+    }
+    renderItemPrefix(agent) {
+        const enabled = this.agentService.isEnabled(agent.id);
+        return (React.createElement("span", { className: `agent-status-indicator ${enabled ? `agent-enabled ${(0, browser_1.codicon)('circle-filled')}` : `agent-disabled ${(0, browser_1.codicon)('circle')}`}`, title: enabled ? 'Enabled' : 'Disabled' }));
+    }
+    renderItemSuffix(agent) {
+        var _a;
+        if (!((_a = agent.tags) === null || _a === void 0 ? void 0 : _a.length)) {
+            return undefined;
+        }
+        return React.createElement("span", null, agent.tags.map(tag => React.createElement("span", { key: tag, className: 'agent-tag' }, tag)));
+    }
+    renderList() {
+        return (React.createElement("div", { className: "ai-configuration-list preferences-tree-widget theia-TreeContainer" },
+            React.createElement("ul", null, this.items.map(agent => {
+                const agentId = this.getItemId(agent);
+                const isSelected = this.selectedItem && this.getItemId(this.selectedItem) === agentId;
+                return (React.createElement("li", { key: agentId, className: `theia-TreeNode theia-CompositeTreeNode${isSelected ? ' theia-mod-selected' : ''} ${this.getItemClassName(agent)}`, onClick: () => this.handleItemSelect(agent) },
+                    this.renderItemPrefix(agent),
+                    React.createElement("span", { className: "ai-configuration-list-item-label" }, this.getItemLabel(agent)),
+                    this.renderItemSuffix(agent)));
+            })),
+            React.createElement("div", { className: 'configuration-agents-add' },
+                React.createElement("button", { className: 'theia-button main', onClick: () => this.addCustomAgent() }, core_1.nls.localize('theia/ai/core/agentConfiguration/addCustomAgent', 'Add Custom Agent')))));
+    }
     async updateParsedPromptParts() {
         this.isLoadingDetails = true;
         const agent = this.aiConfigurationSelectionService.getActiveAgent();
@@ -97,73 +152,56 @@ let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentCon
         this.isLoadingDetails = false;
         this.update();
     }
-    render() {
-        return React.createElement("div", { className: 'ai-agent-configuration-main' },
-            React.createElement("div", { className: 'configuration-agents-list theia-Tree theia-TreeContainer', style: { width: '25%' } },
-                React.createElement("ul", null, this.agentService.getAllAgents().map(agent => {
-                    var _a;
-                    const isActive = ((_a = this.aiConfigurationSelectionService.getActiveAgent()) === null || _a === void 0 ? void 0 : _a.id) === agent.id;
-                    const className = `theia-TreeNode theia-CompositeTreeNode theia-ExpandableTreeNode${isActive ? ' theia-mod-selected' : ''}`;
-                    return React.createElement("li", { key: agent.id, className: className, onClick: () => this.setActiveAgent(agent) }, this.renderAgentName(agent));
-                })),
-                React.createElement("div", { className: 'configuration-agents-add' },
-                    React.createElement("button", { style: { marginLeft: 0 }, className: 'theia-button main', onClick: () => this.addCustomAgent() }, core_1.nls.localize('theia/ai/core/agentConfiguration/addCustomAgent', 'Add Custom Agent')))),
-            React.createElement("div", { className: 'configuration-agent-panel preferences-editor-widget' }, this.renderAgentDetails()));
-    }
-    renderAgentName(agent) {
+    renderItemDetail(agent) {
         var _a;
-        const tagsSuffix = ((_a = agent.tags) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement("span", null, agent.tags.map(tag => React.createElement("span", { key: tag, className: 'agent-tag' }, tag))) : '';
-        return React.createElement("span", null,
-            agent.name,
-            " ",
-            tagsSuffix);
-    }
-    renderAgentDetails() {
         if (this.isLoadingDetails) {
-            return React.createElement("div", null, core_1.nls.localize('theia/ai/core/agentConfiguration/loading', 'Loading...'));
-        }
-        const agent = this.aiConfigurationSelectionService.getActiveAgent();
-        if (!agent) {
-            return React.createElement("div", null, core_1.nls.localize('theia/ai/core/agentConfiguration/selectAgentMessage', 'Please select an Agent first!'));
+            return React.createElement("div", null, core_1.nls.localizeByDefault('Loading...'));
         }
         const enabled = this.agentService.isEnabled(agent.id);
         if (!this.parsedPromptParts) {
             this.updateParsedPromptParts();
-            return React.createElement("div", null, core_1.nls.localize('theia/ai/core/agentConfiguration/loading', 'Loading...'));
+            return React.createElement("div", null, core_1.nls.localizeByDefault('Loading...'));
         }
         const globalVariables = Array.from(new Set([...this.parsedPromptParts.globalVariables, ...agent.variables]));
         const functions = Array.from(new Set([...this.parsedPromptParts.functions, ...agent.functions]));
-        return React.createElement("div", { key: agent.id, style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' } },
-            React.createElement("div", { className: 'settings-section-title settings-section-category-title', style: { paddingLeft: 0, paddingBottom: 10 } },
-                this.renderAgentName(agent),
-                React.createElement("pre", { style: { fontSize: 'small', margin: 0 } },
-                    "Id: ",
-                    agent.id)),
-            React.createElement("div", { style: { paddingBottom: 10 } }, agent.description),
-            React.createElement("div", { style: { paddingBottom: 10 } },
-                React.createElement("label", null,
-                    React.createElement("input", { type: "checkbox", checked: enabled, onChange: this.toggleAgentEnabled }),
-                    core_1.nls.localize('theia/ai/core/agentConfiguration/enableAgent', 'Enable Agent'))),
-            React.createElement("div", { className: "settings-section-subcategory-title ai-settings-section-subcategory-title" }, core_1.nls.localize('theia/ai/core/agentConfiguration/promptTemplates', 'Prompt Templates')),
-            React.createElement("div", { className: "ai-templates" }, (() => {
-                const prompts = agent.prompts;
-                return prompts.length > 0 ? (prompts.map(prompt => (React.createElement("div", { key: agent.id + '.' + prompt.id },
-                    React.createElement(template_settings_renderer_1.PromptVariantRenderer, { key: agent.id + '.' + prompt.id, agentId: agent.id, promptVariantSet: prompt, promptService: this.promptService }))))) : (React.createElement("div", null, core_1.nls.localize('theia/ai/core/agentConfiguration/noDefaultTemplate', 'No default template available')));
-            })()),
+        const agentNameWithTags = React.createElement(React.Fragment, null,
+            agent.name,
+            ((_a = agent.tags) === null || _a === void 0 ? void 0 : _a.length) && React.createElement("span", null, agent.tags.map(tag => React.createElement("span", { key: tag, className: 'agent-tag' }, tag))));
+        return React.createElement("div", { key: agent.id },
+            React.createElement("div", { className: 'settings-section-title settings-section-category-title agent-title-with-toggle' },
+                React.createElement("div", { className: 'agent-title-content' },
+                    React.createElement("div", null,
+                        agentNameWithTags,
+                        React.createElement("pre", { className: 'ai-id-label' },
+                            "Id: ",
+                            agent.id)),
+                    React.createElement("label", { className: 'agent-enable-toggle', title: core_1.nls.localize('theia/ai/core/agentConfiguration/enableAgent', 'Enable Agent') },
+                        React.createElement("div", { className: 'toggle-switch', onClick: this.toggleAgentEnabled },
+                            React.createElement("input", { type: "checkbox", checked: enabled, onChange: this.toggleAgentEnabled }),
+                            React.createElement("span", { className: 'toggle-slider' }))))),
+            agent.description && (React.createElement("div", { className: "ai-agent-description" }, agent.description)),
+            agent.prompts.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "settings-section-subcategory-title ai-settings-section-subcategory-title" }, core_1.nls.localize('theia/ai/core/agentConfiguration/promptTemplates', 'Prompt Templates')),
+                React.createElement("table", { className: "ai-templates-table" },
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", null, core_1.nls.localize('theia/ai/core/agentConfiguration/templateName', 'Template')),
+                            React.createElement("th", null, core_1.nls.localize('theia/ai/core/agentConfiguration/variant', 'Variant')),
+                            React.createElement("th", { className: "template-actions-header" }, core_1.nls.localize('theia/ai/core/agentConfiguration/actions', 'Actions')))),
+                    React.createElement("tbody", null, agent.prompts.map(prompt => (React.createElement(template_settings_renderer_1.PromptVariantRenderer, { key: agent.id + '.' + prompt.id, agentId: agent.id, promptVariantSet: prompt, promptService: this.promptService }))))))),
             React.createElement("div", { className: 'ai-lm-requirements' },
                 React.createElement(language_model_renderer_1.LanguageModelRenderer, { agent: agent, languageModels: this.languageModels, aiSettingsService: this.aiSettingsService, languageModelRegistry: this.languageModelRegistry, languageModelAliases: this.languageModelAliases })),
-            React.createElement("div", null,
-                React.createElement("span", null, "Used Global Variables:"),
-                React.createElement("ul", { className: 'variable-references' },
-                    React.createElement(AgentGlobalVariables, { variables: globalVariables, showVariableConfigurationTab: this.showVariableConfigurationTab.bind(this) }))),
-            React.createElement("div", null,
-                React.createElement("span", null, "Used agent-specific Variables:"),
+            globalVariables.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "settings-section-subcategory-title" }, core_1.nls.localize('theia/ai/core/agentConfiguration/usedGlobalVariables', 'Used Global Variables')),
+                React.createElement(AgentGlobalVariables, { variables: globalVariables, variableService: this.variableService }))),
+            this.parsedPromptParts.agentSpecificVariables.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "settings-section-subcategory-title" }, core_1.nls.localize('theia/ai/core/agentConfiguration/usedAgentSpecificVariables', 'Used Agent-Specific Variables')),
                 React.createElement("ul", { className: 'variable-references' },
-                    React.createElement(AgentSpecificVariables, { promptVariables: this.parsedPromptParts.agentSpecificVariables, agent: agent }))),
-            React.createElement("div", null,
-                React.createElement("span", null, "Used Functions:"),
+                    React.createElement(AgentSpecificVariables, { promptVariables: this.parsedPromptParts.agentSpecificVariables, agent: agent })))),
+            functions.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "settings-section-subcategory-title" }, core_1.nls.localize('theia/ai/core/agentConfiguration/usedFunctions', 'Used Functions')),
                 React.createElement("ul", { className: 'function-references' },
-                    React.createElement(AgentFunctions, { functions: functions }))));
+                    React.createElement(AgentFunctions, { functions: functions })))));
     }
     async parsePromptFragmentsForVariableAndFunction(agent) {
         var _a, _b, _c, _d;
@@ -184,11 +222,9 @@ let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentCon
         const variableMatches = (0, common_1.matchVariablesRegEx)(promptContent);
         variableMatches.forEach(match => {
             const variableId = match[1];
-            // skip comments
             if (variableId.startsWith('!--')) {
                 return;
             }
-            // Extract base variable ID without arguments
             const baseVariableId = variableId.split(':')[0];
             if (this.variableService.hasVariable(baseVariableId) &&
                 agent.agentSpecificVariables.find(v => v.name === baseVariableId) === undefined) {
@@ -234,10 +270,6 @@ let AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = class AIAgentCon
         });
         quickPick.show();
     }
-    setActiveAgent(agent) {
-        this.aiConfigurationSelectionService.setActiveAgent(agent);
-        this.updateParsedPromptParts();
-    }
 };
 exports.AIAgentConfigurationWidget = AIAgentConfigurationWidget;
 AIAgentConfigurationWidget.ID = 'ai-agent-configuration-container-widget';
@@ -287,14 +319,27 @@ tslib_1.__decorate([
 exports.AIAgentConfigurationWidget = AIAgentConfigurationWidget = AIAgentConfigurationWidget_1 = tslib_1.__decorate([
     (0, inversify_1.injectable)()
 ], AIAgentConfigurationWidget);
-const AgentGlobalVariables = ({ variables: globalVariables, showVariableConfigurationTab }) => {
+const AgentGlobalVariables = ({ variables: globalVariables, variableService }) => {
     if (globalVariables.length === 0) {
-        return React.createElement(React.Fragment, null, core_1.nls.localizeByDefault('None'));
+        return React.createElement("div", { className: "ai-empty-state-content" }, core_1.nls.localizeByDefault('None'));
     }
-    return React.createElement(React.Fragment, null, globalVariables.map(variableId => React.createElement("li", { key: variableId, className: 'theia-TreeNode theia-CompositeTreeNode theia-ExpandableTreeNode theia-mod-selected' },
-        React.createElement("div", { key: variableId, onClick: () => { showVariableConfigurationTab(); }, className: 'variable-reference' },
-            React.createElement("span", null, variableId),
-            React.createElement("i", { className: (0, browser_1.codicon)('chevron-right') })))));
+    const allVariables = variableService.getVariables();
+    const variableData = globalVariables.map(varId => {
+        const variable = allVariables.find(v => v.id === varId);
+        return {
+            id: varId,
+            name: (variable === null || variable === void 0 ? void 0 : variable.name) || varId,
+            description: (variable === null || variable === void 0 ? void 0 : variable.description) || ''
+        };
+    });
+    return (React.createElement("table", { className: "ai-templates-table" },
+        React.createElement("thead", null,
+            React.createElement("tr", null,
+                React.createElement("th", null, core_1.nls.localizeByDefault('Variable')),
+                React.createElement("th", null, core_1.nls.localizeByDefault('Description')))),
+        React.createElement("tbody", null, variableData.map(variable => (React.createElement("tr", { key: variable.id },
+            React.createElement("td", { className: "ai-variable-name-cell" }, variable.name),
+            React.createElement("td", { className: "ai-variable-description-cell" }, variable.description || core_1.nls.localize('theia/ai/ide/agentConfiguration/noDescription', 'No description available'))))))));
 };
 const AgentFunctions = ({ functions }) => {
     if (functions.length === 0) {
@@ -307,27 +352,34 @@ const AgentSpecificVariables = ({ promptVariables, agent }) => {
     const agentDefinedVariablesName = agent.agentSpecificVariables.map(v => v.name);
     const variables = Array.from(new Set([...promptVariables, ...agentDefinedVariablesName]));
     if (variables.length === 0) {
-        return React.createElement(React.Fragment, null, core_1.nls.localizeByDefault('None'));
+        return React.createElement("div", { className: "ai-empty-state-content" }, core_1.nls.localizeByDefault('None'));
     }
-    return React.createElement(React.Fragment, null, variables.map(variableId => React.createElement(AgentSpecificVariable, { key: variableId, variableId: variableId, agent: agent, promptVariables: promptVariables })));
+    return React.createElement("div", null, variables.map(variableId => React.createElement(AgentSpecificVariable, { key: variableId, variableId: variableId, agent: agent, promptVariables: promptVariables })));
 };
 const AgentSpecificVariable = ({ variableId, agent, promptVariables }) => {
     const agentDefinedVariable = agent.agentSpecificVariables.find(v => v.name === variableId);
     const undeclared = agentDefinedVariable === undefined;
     const notUsed = !promptVariables.includes(variableId) && (agentDefinedVariable === null || agentDefinedVariable === void 0 ? void 0 : agentDefinedVariable.usedInPrompt) === true;
-    return React.createElement("li", { key: variableId },
-        React.createElement("div", null,
-            React.createElement("span", null, core_1.nls.localize('theia/ai/core/agentConfiguration/name', 'Name:')),
-            " ",
-            React.createElement("span", null, variableId)),
-        undeclared ? React.createElement("div", null,
-            React.createElement("span", null, core_1.nls.localize('theia/ai/core/agentConfiguration/undeclared', 'Undeclared'))) :
-            (React.createElement(React.Fragment, null,
-                React.createElement("div", null,
-                    React.createElement("span", null, core_1.nls.localize('theia/ai/core/agentConfiguration/description', 'Description:')),
-                    " ",
-                    React.createElement("span", null, agentDefinedVariable.description)),
-                notUsed && React.createElement("div", null, core_1.nls.localize('theia/ai/core/agentConfiguration/notUsedInPrompt', 'Not used in prompt')))),
-        React.createElement("hr", null));
+    return React.createElement("div", { key: variableId, className: "ai-agent-specific-variable-item" },
+        React.createElement("div", { className: "ai-configuration-value-row" },
+            React.createElement("span", { className: "ai-configuration-value-row-label" },
+                core_1.nls.localizeByDefault('Name'),
+                ":"),
+            React.createElement("span", { className: "ai-configuration-value-row-value" }, variableId)),
+        undeclared ? (React.createElement("div", { className: "ai-configuration-value-row" },
+            React.createElement("span", { className: "ai-configuration-value-row-label" },
+                core_1.nls.localizeByDefault('Status'),
+                ":"),
+            React.createElement("span", { className: "ai-configuration-value-row-value ai-configuration-warning-text" }, core_1.nls.localize('theia/ai/core/agentConfiguration/undeclared', 'Undeclared')))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "ai-configuration-value-row" },
+                React.createElement("span", { className: "ai-configuration-value-row-label" },
+                    core_1.nls.localizeByDefault('Description'),
+                    ":"),
+                React.createElement("span", { className: "ai-configuration-value-row-value" }, agentDefinedVariable.description)),
+            notUsed && (React.createElement("div", { className: "ai-configuration-value-row" },
+                React.createElement("span", { className: "ai-configuration-value-row-label" },
+                    core_1.nls.localizeByDefault('Status'),
+                    ":"),
+                React.createElement("span", { className: "ai-configuration-value-row-value ai-configuration-warning-text" }, core_1.nls.localize('theia/ai/core/agentConfiguration/notUsedInPrompt', 'Not used in prompt')))))));
 };
 //# sourceMappingURL=agent-configuration-widget.js.map