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

package/src/browser/ai-configuration/template-settings-renderer.tsx

@@ -63,16 +63,11 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
     };
 
     return (
-        <div className="template-renderer">
-            <div className="settings-section-title template-header">
-                <strong>{promptVariantSet.id}</strong>
-            </div>
-            <div className="template-controls">
-                {(variantIds.length > 1 || isInvalidVariant) && (
-                    <>
-                        <label htmlFor={`variant-selector-${promptVariantSet.id}`} className="template-select-label">
-                            {nls.localize('theia/ai/core/templateSettings/selectVariant', 'Select Variant:')}
-                        </label>
+        <>
+            <tr>
+                <td className="template-name-cell">{promptVariantSet.id}</td>
+                <td className="template-variant-cell">
+                    {(variantIds.length > 1 || isInvalidVariant) && (
                         <select
                             id={`variant-selector-${promptVariantSet.id}`}
                             className={`theia-select template-variant-selector ${isInvalidVariant ? 'error' : ''}`}
@@ -81,7 +76,7 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
                         >
                             {isInvalidVariant && (
                                 <option value="invalid" disabled>
-                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'Selected variant not available, default will be used')}
+                                    {nls.localize('theia/ai/core/templateSettings/unavailableVariant', 'Unavailable')}
                                 </option>
                             )}
                             {variantIds.map(variantId => (
@@ -90,23 +85,24 @@ export const PromptVariantRenderer: React.FC<PromptVariantRendererProps> = ({
                                 </option>
                             ))}
                         </select>
-                    </>
-                )}
-                <button
-                    className="theia-button main"
-                    onClick={openTemplate}
-                    disabled={isInvalidVariant}
-                >
-                    {nls.localizeByDefault('Edit')}
-                </button>
-                <button
-                    className="theia-button secondary"
-                    onClick={resetTemplate}
-                    disabled={isInvalidVariant}
-                >
-                    {nls.localizeByDefault('Reset')}
-                </button>
-            </div>
-        </div>
+                    )}
+                    {variantIds.length === 1 && !isInvalidVariant && <span>{selectedVariant}</span>}
+                </td>
+                <td className="template-actions-cell">
+                    <button
+                        className="template-action-icon-button codicon codicon-edit"
+                        onClick={openTemplate}
+                        disabled={isInvalidVariant}
+                        title={nls.localizeByDefault('Edit')}
+                    />
+                    <button
+                        className="template-action-icon-button codicon codicon-discard"
+                        onClick={resetTemplate}
+                        disabled={isInvalidVariant}
+                        title={nls.localizeByDefault('Reset')}
+                    />
+                </td>
+            </tr>
+        </>
     );
 };

package/src/browser/ai-configuration/token-usage-configuration-widget.tsx

@@ -14,24 +14,19 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ReactWidget } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { MessageService, nls } from '@theia/core';
 import { TokenUsageFrontendService, ModelTokenUsageData } from '@theia/ai-core/lib/browser/token-usage-frontend-service';
 import { formatDistanceToNow } from 'date-fns';
-
-// Using the interface from the token usage service
+import { AITableConfigurationWidget, TableColumn } from './base/ai-table-configuration-widget';
 
 @injectable()
-export class AITokenUsageConfigurationWidget extends ReactWidget {
+export class AITokenUsageConfigurationWidget extends AITableConfigurationWidget<ModelTokenUsageData> {
 
     static readonly ID = 'ai-token-usage-configuration-container-widget';
     static readonly LABEL = nls.localize('theia/ai/tokenUsage/label', 'Token Usage');
 
-    // Data will be fetched from the service
-    protected tokenUsageData: ModelTokenUsageData[] = [];
-
     @inject(MessageService)
     protected readonly messageService: MessageService;
 
@@ -43,24 +38,30 @@ export class AITokenUsageConfigurationWidget extends ReactWidget {
         this.id = AITokenUsageConfigurationWidget.ID;
         this.title.label = AITokenUsageConfigurationWidget.LABEL;
         this.title.closable = false;
+        this.addClass('ai-configuration-widget');
 
-        this.refreshData();
+        this.loadItems().then(() => this.update());
 
-        this.tokenUsageService.onTokenUsageUpdated(data => {
-            this.tokenUsageData = data;
-            this.update();
-        });
+        this.toDispose.push(
+            this.tokenUsageService.onTokenUsageUpdated(data => {
+                this.items = data;
+                this.update();
+            })
+        );
     }
 
-    protected async refreshData(): Promise<void> {
+    protected async loadItems(): Promise<void> {
         try {
-            this.tokenUsageData = await this.tokenUsageService.getTokenUsageData();
-            this.update();
+            this.items = await this.tokenUsageService.getTokenUsageData();
         } catch (error) {
             this.messageService.error(nls.localize('theia/ai/tokenUsage/failedToGetTokenUsageData', 'Failed to fetch token usage data: {0}', error));
         }
     }
 
+    protected getItemId(item: ModelTokenUsageData): string {
+        return item.modelId;
+    }
+
     protected formatNumber(num: number): string {
         return num.toLocaleString();
     }
@@ -73,138 +74,137 @@ export class AITokenUsageConfigurationWidget extends ReactWidget {
     }
 
     protected hasCacheData(): boolean {
-        return this.tokenUsageData.some(model =>
+        return this.items.some(model =>
             model.cachedInputTokens !== undefined ||
             model.readCachedInputTokens !== undefined
         );
     }
 
-    protected renderHeaderRow(): React.ReactNode {
+    protected getColumns(): TableColumn<ModelTokenUsageData>[] {
         const showCacheColumns = this.hasCacheData();
+        const columns: TableColumn<ModelTokenUsageData>[] = [
+            {
+                id: 'model',
+                label: nls.localize('theia/ai/tokenUsage/model', 'Model'),
+                className: 'token-usage-model-column',
+                renderCell: item => <span>{item.modelId}</span>
+            },
+            {
+                id: 'input-tokens',
+                label: nls.localize('theia/ai/tokenUsage/inputTokens', 'Input Tokens'),
+                className: 'token-usage-column',
+                renderCell: item => <span>{this.formatNumber(item.inputTokens)}</span>
+            }
+        ];
+
+        if (showCacheColumns) {
+            columns.push(
+                {
+                    id: 'cached-input-tokens',
+                    label: nls.localize('theia/ai/tokenUsage/cachedInputTokens', 'Input Tokens Written to Cache'),
+                    className: 'token-usage-column',
+                    renderCell: item => (
+                        <span title={nls.localize(
+                            'theia/ai/tokenUsage/cachedInputTokensTooltip',
+                            "Tracked additionally to 'Input Tokens'. Usually more expensive than non-cached tokens."
+                        )}>
+                            {item.cachedInputTokens !== undefined ? this.formatNumber(item.cachedInputTokens) : '-'}
+                        </span>
+                    )
+                },
+                {
+                    id: 'read-cached-input-tokens',
+                    label: nls.localize('theia/ai/tokenUsage/readCachedInputTokens', 'Input Tokens Read From Cache'),
+                    className: 'token-usage-column',
+                    renderCell: item => (
+                        <span title={nls.localize(
+                            'theia/ai/tokenUsage/readCachedInputTokensTooltip',
+                            "Tracked additionally to 'Input Token'. Usually much less expensive than not cached. Usually does not count to rate limits."
+                        )}>
+                            {item.readCachedInputTokens !== undefined ? this.formatNumber(item.readCachedInputTokens) : '-'}
+                        </span>
+                    )
+                }
+            );
+        }
 
-        return (
-            <tr className="token-usage-header">
-                <th className="token-usage-model-column">{nls.localize('theia/ai/tokenUsage/model', 'Model')}</th>
-                <th className="token-usage-column">{nls.localize('theia/ai/tokenUsage/inputTokens', 'Input Tokens')}</th>
-                {showCacheColumns && (
-                    <>
-                        <th
-                            className="token-usage-column"
-                            title={nls.localize(
-                                'theia/ai/tokenUsage/cachedInputTokensTooltip',
-                                "Tracked additionally to 'Input Tokens'. Usually more expensive than non-cached tokens."
-                            )}
-                        >
-                            {nls.localize('theia/ai/tokenUsage/cachedInputTokens', 'Input Tokens Written to Cache')}
-                        </th>
-                        <th
-                            className="token-usage-column"
-                            title={nls.localize(
-                                'theia/ai/tokenUsage/readCachedInputTokensTooltip',
-                                "Tracked additionally to 'Input Token'. Usually much less expensive than not cached. Usually does not count to rate limits."
-                            )}
-                        >
-                            {nls.localize('theia/ai/tokenUsage/readCachedInputTokens', 'Input Tokens Read From Cache')}
-                        </th>
-                    </>
-                )}
-                <th className="token-usage-column">{nls.localize('theia/ai/tokenUsage/outputTokens', 'Output Tokens')}</th>
-                <th
-                    className="token-usage-column"
-                    title={nls.localize('theia/ai/tokenUsage/totalTokensTooltip', "'Input Tokens' + 'Output Tokens'"
-                    )}
-                >
-                    {nls.localize('theia/ai/tokenUsage/totalTokens', 'Total Tokens')}
-                </th>
-                <th className="token-usage-column">{nls.localize('theia/ai/tokenUsage/lastUsed', 'Last Used')}</th>
-            </tr >
+        columns.push(
+            {
+                id: 'output-tokens',
+                label: nls.localize('theia/ai/tokenUsage/outputTokens', 'Output Tokens'),
+                className: 'token-usage-column',
+                renderCell: item => <span>{this.formatNumber(item.outputTokens)}</span>
+            },
+            {
+                id: 'total-tokens',
+                label: nls.localize('theia/ai/tokenUsage/totalTokens', 'Total Tokens'),
+                className: 'token-usage-column',
+                renderCell: item => {
+                    const totalTokens = item.inputTokens + item.outputTokens + (item.cachedInputTokens ?? 0);
+                    return (
+                        <span title={nls.localize('theia/ai/tokenUsage/totalTokensTooltip', "'Input Tokens' + 'Output Tokens'")}>
+                            {this.formatNumber(totalTokens)}
+                        </span>
+                    );
+                }
+            },
+            {
+                id: 'last-used',
+                label: nls.localize('theia/ai/tokenUsage/lastUsed', 'Last Used'),
+                className: 'token-usage-column',
+                renderCell: item => {
+                    const lastUsedDate = item.lastUsed ? new Date(item.lastUsed) : undefined;
+                    const exactDateString = lastUsedDate ? lastUsedDate.toLocaleString() : '';
+                    return <span title={exactDateString}>{this.formatDate(lastUsedDate)}</span>;
+                }
+            }
         );
-    }
 
-    protected renderModelRow(model: ModelTokenUsageData): React.ReactNode {
-        const lastUsedDate = model.lastUsed ? new Date(model.lastUsed) : undefined;
-        const exactDateString = lastUsedDate ? lastUsedDate.toLocaleString() : '';
-        const showCacheColumns = this.hasCacheData();
-        const totalTokens = model.inputTokens + model.outputTokens + (model.cachedInputTokens ?? 0);
+        return columns;
+    }
 
-        return (
-            <tr key={model.modelId} className="token-usage-row">
-                <td className="token-usage-model-cell">{model.modelId}</td>
-                <td className="token-usage-cell">{this.formatNumber(model.inputTokens)}</td>
-                {showCacheColumns && (
-                    <>
-                        <td className="token-usage-cell">{model.cachedInputTokens !== undefined ? this.formatNumber(model.cachedInputTokens) : '-'}</td>
-                        <td className="token-usage-cell">{model.readCachedInputTokens !== undefined ? this.formatNumber(model.readCachedInputTokens) : '-'}</td>
-                    </>
-                )}
-                <td className="token-usage-cell">{this.formatNumber(model.outputTokens)}</td>
-                <td className="token-usage-cell">{this.formatNumber(totalTokens)}</td>
-                <td className="token-usage-cell" title={exactDateString}>{this.formatDate(lastUsedDate)}</td>
-            </tr>
-        );
+    protected override renderHeader(): React.ReactNode {
+        return undefined;
     }
 
-    protected renderSummaryRow(): React.ReactNode {
-        // Only show summary row if there is data
-        if (this.tokenUsageData.length === 0) {
-            return undefined;
+    protected override renderFooter(): React.ReactNode {
+        if (this.items.length === 0) {
+            return (
+                <div className="ai-empty-state-content">
+                    <p>{nls.localize('theia/ai/tokenUsage/noData', 'No token usage data available yet.')}</p>
+                </div>
+            );
         }
 
-        const totalInputTokens = this.tokenUsageData.reduce((sum, model) => sum + model.inputTokens, 0);
-        const totalOutputTokens = this.tokenUsageData.reduce((sum, model) => sum + model.outputTokens, 0);
-        const totalCachedInputTokens = this.tokenUsageData.reduce(
-            (sum, model) => sum + (model.cachedInputTokens || 0), 0
-        );
-        const totalReadCachedInputTokens = this.tokenUsageData.reduce(
-            (sum, model) => sum + (model.readCachedInputTokens || 0), 0
-        );
-        const totalTokens = totalInputTokens + totalCachedInputTokens + totalOutputTokens;
-
         const showCacheColumns = this.hasCacheData();
+        const totalInputTokens = this.items.reduce((sum, model) => sum + model.inputTokens, 0);
+        const totalOutputTokens = this.items.reduce((sum, model) => sum + model.outputTokens, 0);
+        const totalCachedInputTokens = this.items.reduce((sum, model) => sum + (model.cachedInputTokens || 0), 0);
+        const totalReadCachedInputTokens = this.items.reduce((sum, model) => sum + (model.readCachedInputTokens || 0), 0);
+        const totalTokens = totalInputTokens + totalCachedInputTokens + totalOutputTokens;
 
         return (
-            <tr className="token-usage-summary-row">
-                <td className="token-usage-model-cell"><strong>{nls.localize('theia/ai/tokenUsage/total', 'Total')}</strong></td>
-                <td className="token-usage-cell"><strong>{this.formatNumber(totalInputTokens)}</strong></td>
-                {showCacheColumns && (
-                    <>
-                        <td className="token-usage-cell"><strong>{this.formatNumber(totalCachedInputTokens)}</strong></td>
-                        <td className="token-usage-cell"><strong>{this.formatNumber(totalReadCachedInputTokens)}</strong></td>
-                    </>
-                )}
-                <td className="token-usage-cell"><strong>{this.formatNumber(totalOutputTokens)}</strong></td>
-                <td className="token-usage-cell"><strong>{this.formatNumber(totalTokens)}</strong></td>
-                <td className="token-usage-cell"></td>
-            </tr>
-        );
-    }
-
-    protected render(): React.ReactNode {
-        return (
-            <div className="token-usage-configuration-container">
-                <h2 className="token-usage-configuration-title">{nls.localize('theia/ai/tokenUsage/title', 'AI Model Token Usage')}</h2>
-
-                <div className="token-usage-table-container">
-                    {this.tokenUsageData.length > 0 ? (
-                        <table className="token-usage-table">
-                            <thead>
-                                {this.renderHeaderRow()}
-                            </thead>
-                            <tbody>
-                                {this.tokenUsageData.map(model => this.renderModelRow(model))}
-                                {this.renderSummaryRow()}
-                            </tbody>
-                        </table>
-                    ) : (
-                        <div className="token-usage-empty">
-                            <p>{nls.localize('theia/ai/tokenUsage/noData', 'No token usage data available yet.')}</p>
-                        </div>
-                    )}
-                </div>
-
-                <div className="token-usage-notes">
-                    <p className="token-usage-note">
-                        <i className="codicon codicon-info"></i>
+            <div className="ai-configuration-footer-total">
+                <table className="ai-configuration-table">
+                    <tfoot>
+                        <tr className="ai-configuration-footer-total-row">
+                            <td className="token-usage-model-column">{nls.localize('theia/ai/tokenUsage/total', 'Total')}</td>
+                            <td className="token-usage-column">{this.formatNumber(totalInputTokens)}</td>
+                            {showCacheColumns && (
+                                <>
+                                    <td className="token-usage-column">{this.formatNumber(totalCachedInputTokens)}</td>
+                                    <td className="token-usage-column">{this.formatNumber(totalReadCachedInputTokens)}</td>
+                                </>
+                            )}
+                            <td className="token-usage-column">{this.formatNumber(totalOutputTokens)}</td>
+                            <td className="token-usage-column">{this.formatNumber(totalTokens)}</td>
+                            <td className="token-usage-column"></td>
+                        </tr>
+                    </tfoot>
+                </table>
+                <div className="ai-configuration-info-box">
+                    <p className="ai-configuration-info-text">
+                        <i className="codicon codicon-info ai-configuration-info-icon"></i>
                         {nls.localize('theia/ai/tokenUsage/note', 'Token usage is tracked since the start of the application and is not persisted.')}
                     </p>
                 </div>

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

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