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

package/src/browser/ai-configuration/base/ai-hierarchical-configuration-widget.tsx

@@ -0,0 +1,51 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+import { injectable } from '@theia/core/shared/inversify';
+import { AIConfigurationBaseWidget } from './ai-configuration-base-widget';
+
+/**
+ * Base class for AI configuration widgets that display hierarchical or expandable content.
+ * This pattern is used by the prompt fragments and tools configuration widgets.
+ *
+ * This base class provides minimal structure - subclasses implement their own
+ * hierarchical rendering logic using the shared ExpandableSection component.
+ */
+@injectable()
+export abstract class AIHierarchicalConfigurationWidget extends AIConfigurationBaseWidget {
+    /**
+     * Track expansion state for sections.
+     */
+    protected expandedSections: Set<string> = new Set();
+
+    /**
+     * Toggle expansion state for a section.
+     */
+    protected toggleSection = (sectionId: string): void => {
+        if (this.expandedSections.has(sectionId)) {
+            this.expandedSections.delete(sectionId);
+        } else {
+            this.expandedSections.add(sectionId);
+        }
+        this.update();
+    };
+
+    /**
+     * Check if a section is expanded.
+     */
+    protected isSectionExpanded(sectionId: string): boolean {
+        return this.expandedSections.has(sectionId);
+    }
+}

package/src/browser/ai-configuration/base/ai-list-detail-configuration-widget.tsx

@@ -0,0 +1,140 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import { injectable } from '@theia/core/shared/inversify';
+import { nls } from '@theia/core/lib/common/nls';
+import { AIConfigurationBaseWidget } from './ai-configuration-base-widget';
+
+/**
+ * Base class for AI configuration widgets that follow the list-detail pattern:
+ * - Left panel: Tree list of items
+ * - Right panel: Detail view of selected item
+ *
+ * This pattern is used by agents, variables, and model aliases widgets.
+ */
+@injectable()
+export abstract class AIListDetailConfigurationWidget<T> extends AIConfigurationBaseWidget {
+    protected selectedItem: T | undefined;
+    protected items: T[] = [];
+
+    /**
+     * Get unique identifier for an item. Used for selection tracking.
+     */
+    protected abstract getItemId(item: T): string;
+
+    /**
+     * Get display label for an item in the list.
+     */
+    protected abstract getItemLabel(item: T): string;
+
+    /**
+     * Render the detail panel for the selected item.
+     */
+    protected abstract renderItemDetail(item: T): React.ReactNode;
+
+    /**
+     * Load items to display in the list. Called during initialization.
+     */
+    protected abstract loadItems(): Promise<void>;
+
+    /**
+     * Get the message to display when no item is selected.
+     */
+    protected getEmptySelectionMessage(): string {
+        return nls.localize('theia/ai/configuration/selectItem', 'Please select an item.');
+    }
+
+    /**
+     * Optional: Additional CSS classes for list items.
+     */
+    protected getItemClassName(item: T): string {
+        return '';
+    }
+
+    /**
+     * Optional: Render additional content before the item label.
+     */
+    protected renderItemPrefix(item: T): React.ReactNode {
+        return undefined;
+    }
+
+    /**
+     * Optional: Render additional content after the item label.
+     */
+    protected renderItemSuffix(item: T): React.ReactNode {
+        return undefined;
+    }
+
+    protected handleItemSelect = (item: T): void => {
+        this.selectedItem = item;
+        this.update();
+    };
+
+    /**
+     * Public method to programmatically select an item.
+     * Useful for navigation from other widgets.
+     */
+    public selectItem(item: T): void {
+        this.handleItemSelect(item);
+    }
+
+    protected renderContent(): React.ReactNode {
+        return (
+            <div className="ai-list-detail-configuration-main">
+                {this.renderList()}
+                {this.renderDetail()}
+            </div>
+        );
+    }
+
+    protected renderList(): React.ReactNode {
+        return (
+            <div className="ai-configuration-list preferences-tree-widget theia-TreeContainer">
+                <ul>
+                    {this.items.map(item => {
+                        const itemId = this.getItemId(item);
+                        const isSelected = this.selectedItem && this.getItemId(this.selectedItem) === itemId;
+                        return (
+                            <li
+                                key={itemId}
+                                className={`theia-TreeNode theia-CompositeTreeNode${isSelected ? ' theia-mod-selected' : ''} ${this.getItemClassName(item)}`}
+                                onClick={() => this.handleItemSelect(item)}
+                            >
+                                {this.renderItemPrefix(item)}
+                                <span className="ai-configuration-list-item-label">{this.getItemLabel(item)}</span>
+                                {this.renderItemSuffix(item)}
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+        );
+    }
+
+    protected renderDetail(): React.ReactNode {
+        return (
+            <div className="ai-configuration-detail preferences-editor-widget">
+                {this.selectedItem ? (
+                    this.renderItemDetail(this.selectedItem)
+                ) : (
+                    <div className="ai-configuration-empty-state">
+                        <span className="ai-empty-state-message">{this.getEmptySelectionMessage()}</span>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}

package/src/browser/ai-configuration/base/ai-table-configuration-widget.tsx

@@ -0,0 +1,107 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import { injectable } from '@theia/core/shared/inversify';
+import { AIConfigurationBaseWidget } from './ai-configuration-base-widget';
+
+/**
+ * Column definition for table configuration widgets.
+ */
+export interface TableColumn<T> {
+    id: string;
+    label: string;
+    className?: string;
+    renderCell: (item: T) => React.ReactNode;
+}
+
+/**
+ * Base class for AI configuration widgets that display data in a table format.
+ * This pattern is used by the token usage configuration widget.
+ */
+@injectable()
+export abstract class AITableConfigurationWidget<T> extends AIConfigurationBaseWidget {
+    protected items: T[] = [];
+
+    /**
+     * Get unique identifier for a row item.
+     */
+    protected abstract getItemId(item: T): string;
+
+    /**
+     * Define the columns for the table.
+     */
+    protected abstract getColumns(): TableColumn<T>[];
+
+    /**
+     * Load items to display in the table. Called during initialization.
+     */
+    protected abstract loadItems(): Promise<void>;
+
+    /**
+     * Optional: Render content before the table (e.g., header, filters, controls).
+     */
+    protected renderHeader(): React.ReactNode {
+        return undefined;
+    }
+
+    /**
+     * Optional: Render content after the table (e.g., summary, footer).
+     */
+    protected renderFooter(): React.ReactNode {
+        return undefined;
+    }
+
+    /**
+     * Optional: Additional CSS class for a specific row.
+     */
+    protected getRowClassName(item: T): string {
+        return '';
+    }
+
+    protected renderContent(): React.ReactNode {
+        const columns = this.getColumns();
+        return (
+            <div className="ai-table-configuration-main">
+                {this.renderHeader()}
+                <div className="ai-configuration-table-container">
+                    <table className="ai-configuration-table">
+                        <thead>
+                            <tr>
+                                {columns.map(column => (
+                                    <th key={column.id} className={column.className}>
+                                        {column.label}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {this.items.map(item => (
+                                <tr key={this.getItemId(item)} className={this.getRowClassName(item)}>
+                                    {columns.map(column => (
+                                        <td key={column.id} className={column.className}>
+                                            {column.renderCell(item)}
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+                {this.renderFooter()}
+            </div>
+        );
+    }
+}

package/src/browser/ai-configuration/components/configuration-section.tsx

@@ -0,0 +1,37 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+
+export interface ConfigurationSectionProps {
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+/**
+ * A reusable section component with a title and content area.
+ * Follows the Theia settings section styling.
+ */
+export const ConfigurationSection: React.FC<ConfigurationSectionProps> = ({ title, children, className }) => (
+    <div className={`ai-configuration-section ${className || ''}`}>
+        <div className='settings-section-title settings-section-category-title'>
+            {title}
+        </div>
+        <div className='ai-configuration-section-content'>
+            {children}
+        </div>
+    </div>
+);

package/src/browser/ai-configuration/components/empty-state.tsx

@@ -0,0 +1,30 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+
+export interface EmptyStateProps {
+    message: string;
+    className?: string;
+}
+
+/**
+ * A component to display an empty state message (e.g., "Please select an item").
+ */
+export const EmptyState: React.FC<EmptyStateProps> = ({ message, className }) => (
+    <div className={`ai-configuration-empty-state ${className || ''}`}>
+        <span className='ai-empty-state-message'>{message}</span>
+    </div>
+);

package/src/browser/ai-configuration/components/expandable-section.tsx

@@ -0,0 +1,51 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
+
+export interface ExpandableSectionProps {
+    title: React.ReactNode;
+    isExpanded: boolean;
+    onToggle: () => void;
+    children: React.ReactNode;
+    className?: string;
+}
+
+/**
+ * A collapsible section with a chevron icon and expandable content.
+ */
+export const ExpandableSection: React.FC<ExpandableSectionProps> = ({
+    title,
+    isExpanded,
+    onToggle,
+    children,
+    className
+}) => (
+    <div className={`ai-expandable-section ${className || ''}`}>
+        <div
+            className={`ai-expandable-section-header ${isExpanded ? 'expanded' : ''}`}
+            onClick={onToggle}
+        >
+            <span className='ai-expandable-section-icon'>
+                <i className={codicon(isExpanded ? 'chevron-down' : 'chevron-right')} />
+            </span>
+            <div className='ai-expandable-section-title'>{title}</div>
+        </div>
+        {isExpanded && (
+            <div className='ai-expandable-section-content'>{children}</div>
+        )}
+    </div>
+);

package/src/browser/ai-configuration/language-model-renderer.tsx

@@ -79,76 +79,81 @@ export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
     };
 
     return <div className='language-model-container'>
+        {lmRequirementMap && Object.keys(lmRequirementMap).length > 0 ? (
+            <div className="settings-section-subcategory-title ai-settings-section-subcategory-title">
+                {nls.localize('theia/ai/core/agentConfiguration/llmRequirements', 'LLM Requirements')}
+            </div>
+        ) : undefined}
         {Object.values(lmRequirementMap).map((requirement, index) => {
             const isAlias = requirement.identifier && aliases.some(a => a.id === requirement.identifier);
             const resolvedModel = isAlias ? resolvedAliasModels[requirement.identifier] : undefined;
             return (
-                <React.Fragment key={index}>
-                    <div className="ai-alias-evaluates-to-container">
-                        <strong>{nls.localize('theia/ai/core/languageModelRenderer/purpose', 'Purpose')}:</strong> {requirement.purpose}
+                <div key={index} className="ai-llm-requirement-item">
+                    <div className="ai-configuration-value-row">
+                        <span className="ai-configuration-value-row-label">{nls.localize('theia/ai/core/languageModelRenderer/purpose', 'Purpose')}:</span>
+                        <span className="ai-configuration-value-row-value">{requirement.purpose}</span>
                     </div>
-                    <div>
-                        <div className="ai-alias-evaluates-to-container">
-                            <label
-                                className="theia-header no-select"
-                                htmlFor={`model-select-${agent.id}`}>
-                                {nls.localize('theia/ai/core/languageModelRenderer/languageModel', 'Language Model') + ': '}
-                            </label>
-                            <select
-                                className="theia-select"
-                                id={`model-select-${agent.id}-${requirement.purpose}`}
-                                value={requirement.identifier}
-                                onChange={event => onSelectedModelChange(requirement.purpose, event)}
-                            >
-                                <option value=""></option>
-                                {/* Aliases first, then languange models */}
-                                {aliases?.sort((a, b) => a.id.localeCompare(b.id)).map(alias => (
-                                    <option key={`alias/${alias.id}`} value={alias.id} className='ai-language-model-item-ready'>
-                                        {nls.localize('theia/ai/core/languageModelRenderer/alias', '[alias] {0}', alias.id)}
+                    <div className="ai-configuration-value-row">
+                        <label
+                            className="ai-configuration-value-row-label"
+                            style={{ lineHeight: '1.4' }}
+                            htmlFor={`model-select-${agent.id}-${requirement.purpose}`}>
+                            {nls.localize('theia/ai/core/languageModelRenderer/languageModel', 'Language Model')}:
+                        </label>
+                        <select
+                            className="theia-select ai-configuration-value-row-value"
+                            id={`model-select-${agent.id}-${requirement.purpose}`}
+                            style={{ maxWidth: '400px' }}
+                            value={requirement.identifier}
+                            onChange={event => onSelectedModelChange(requirement.purpose, event)}
+                        >
+                            <option value=""></option>
+                            {/* Aliases first, then languange models */}
+                            {aliases?.sort((a, b) => a.id.localeCompare(b.id)).map(alias => (
+                                <option key={`alias/${alias.id}`} value={alias.id} className='ai-language-model-item-ready'>
+                                    {nls.localize('theia/ai/core/languageModelRenderer/alias', '[alias] {0}', alias.id)}
+                                </option>
+                            ))}
+                            {languageModels?.sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)).map(model => {
+                                const isNotReady = model.status.status !== 'ready';
+                                return (
+                                    <option
+                                        key={model.id}
+                                        value={model.id}
+                                        className={isNotReady ? 'ai-language-model-item-not-ready' : 'ai-language-model-item-ready'}
+                                        title={isNotReady && model.status.message ? model.status.message : undefined}
+                                    >
+                                        {model.name ?? model.id} {isNotReady ? '✗' : '✓'}
                                     </option>
-                                ))}
-                                {languageModels?.sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)).map(model => {
-                                    const isNotReady = model.status.status !== 'ready';
-                                    return (
-                                        <option
-                                            key={model.id}
-                                            value={model.id}
-                                            className={isNotReady ? 'ai-language-model-item-not-ready' : 'ai-language-model-item-ready'}
-                                            title={isNotReady && model.status.message ? model.status.message : undefined}
-                                        >
-                                            {model.name ?? model.id} {isNotReady ? '✗' : '✓'}
-                                        </option>
-                                    );
-                                })}
-                            </select>
-                        </div>
-                        {/* If alias is selected, show what it currently evaluates to */}
-                        {isAlias && (
-                            <div className="ai-alias-evaluates-to-container">
-                                <label className="ai-alias-evaluates-to-label">{nls.localize('theia/ai/core/modelAliasesConfiguration/evaluatesTo', 'Evaluates to')}:</label>
-                                {resolvedModel ? (
-                                    <span className="ai-alias-evaluates-to-value">
-                                        {resolvedModel.name ?? resolvedModel.id}
-                                        {resolvedModel.status.status === 'ready' ? (
-                                            <span className="ai-model-status-ready"
-                                                title={nls.localize('theia/ai/core/modelAliasesConfiguration/modelReadyTooltip', 'Ready')}>✓</span>
-                                        ) : (
-                                            <span className="ai-model-status-not-ready" title={resolvedModel.status.message
-                                                || nls.localize('theia/ai/core/modelAliasesConfiguration/modelNotReadyTooltip', 'Not ready')}>✗</span>
-                                        )}
-                                    </span>
-                                ) : (
-                                    <span className="ai-alias-evaluates-to-unresolved">
-                                        {nls.localize('theia/ai/core/modelAliasesConfiguration/noResolvedModel', 'No model ready for this alias.')}
-                                        <span className="ai-model-status-not-ready"
-                                            title={nls.localize('theia/ai/core/modelAliasesConfiguration/noModelReadyTooltip', 'No model ready')}>✗</span>
-                                    </span>
-                                )}
-                            </div>
-                        )}
-                        <hr />
+                                );
+                            })}
+                        </select>
                     </div>
-                </React.Fragment>
+                    {/* If alias is selected, show what it currently evaluates to */}
+                    {isAlias && (
+                        <div className="ai-configuration-value-row">
+                            <span className="ai-configuration-value-row-label">{nls.localize('theia/ai/core/modelAliasesConfiguration/evaluatesTo', 'Evaluates to')}:</span>
+                            {resolvedModel ? (
+                                <span className="ai-configuration-value-row-value">
+                                    {resolvedModel.name ?? resolvedModel.id}
+                                    {resolvedModel.status.status === 'ready' ? (
+                                        <span className="ai-model-status-ready"
+                                            title={nls.localize('theia/ai/core/modelAliasesConfiguration/modelReadyTooltip', 'Ready')}>✓</span>
+                                    ) : (
+                                        <span className="ai-model-status-not-ready" title={resolvedModel.status.message
+                                            || nls.localize('theia/ai/core/modelAliasesConfiguration/modelNotReadyTooltip', 'Not ready')}>✗</span>
+                                    )}
+                                </span>
+                            ) : (
+                                <span className="ai-configuration-value-row-value ai-alias-evaluates-to-unresolved">
+                                    {nls.localize('theia/ai/core/modelAliasesConfiguration/noResolvedModel', 'No model ready for this alias.')}
+                                    <span className="ai-model-status-not-ready"
+                                        title={nls.localize('theia/ai/core/modelAliasesConfiguration/noModelReadyTooltip', 'No model ready')}>✗</span>
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </div>
             );
         })}
     </div>;