@theia/ai-chat-ui 1.63.0-next.24 → 1.63.0-next.52

package/src/browser/chat-input-widget.tsx

@@ -14,24 +14,25 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import {
-    ChangeSet, ChangeSetElement, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel,
-    ChatService, ChatSuggestion, EditableChatRequestModel, ChatHierarchyBranch
+    ChangeSet, ChangeSetElement, ChatAgent, ChatChangeEvent, ChatHierarchyBranch,
+    ChatModel, ChatRequestModel, ChatService, ChatSuggestion, EditableChatRequestModel
 } from '@theia/ai-chat';
+import { ChangeSetDecoratorService } from '@theia/ai-chat/lib/browser/change-set-decorator-service';
+import { ImageContextVariable } from '@theia/ai-chat/lib/common/image-context-variable';
+import { AIVariableResolutionRequest } from '@theia/ai-core';
+import { FrontendVariableService } from '@theia/ai-core/lib/browser';
 import { DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
 import { ContextMenuRenderer, LabelProvider, Message, OpenerService, ReactWidget } from '@theia/core/lib/browser';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable, optional, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { IMouseEvent } from '@theia/monaco-editor-core';
-import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
-import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
-import { AIVariableResolutionRequest } from '@theia/ai-core';
-import { FrontendVariableService } from '@theia/ai-core/lib/browser';
-import { ContextVariablePicker } from './context-variable-picker';
+import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { ChangeSetActionRenderer, ChangeSetActionService } from './change-set-actions/change-set-action-service';
-import { ChangeSetDecoratorService } from '@theia/ai-chat/lib/browser/change-set-decorator-service';
 import { ChatInputAgentSuggestions } from './chat-input-agent-suggestions';
+import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
+import { ContextVariablePicker } from './context-variable-picker';
 
 type Query = (query: string) => Promise<void>;
 type Unpin = () => void;
@@ -185,6 +186,7 @@ export class AIChatInputWidget extends ReactWidget {
                 onCancel={this._onCancel.bind(this)}
                 onDragOver={this.onDragOver.bind(this)}
                 onDrop={this.onDrop.bind(this)}
+                onPaste={this.onPaste.bind(this)}
                 onDeleteChangeSet={this._onDeleteChangeSet.bind(this)}
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
                 onAddContextElement={this.addContextElement.bind(this)}
@@ -257,6 +259,26 @@ export class AIChatInputWidget extends ReactWidget {
         });
     }
 
+    protected onPaste(event: ClipboardEvent): void {
+        this.variableService.getPasteResult(event, { type: 'ai-chat-input-widget' }).then(result => {
+            result.variables.forEach(variable => this.addContext(variable));
+            if (result.text) {
+                const position = this.editorRef?.getControl().getPosition();
+                if (position && result.text) {
+                    this.editorRef?.getControl().executeEdits('paste', [{
+                        range: {
+                            startLineNumber: position.lineNumber,
+                            startColumn: position.column,
+                            endLineNumber: position.lineNumber,
+                            endColumn: position.column
+                        },
+                        text: result.text
+                    }]);
+                }
+            }
+        });
+    }
+
     protected async openContextElement(request: AIVariableResolutionRequest): Promise<void> {
         const session = this.chatService.getSessions().find(candidate => candidate.model.id === this._chatModel.id);
         const context = { session };
@@ -306,6 +328,7 @@ interface ChatInputProperties {
     onUnpin: () => void;
     onDragOver: (event: React.DragEvent) => void;
     onDrop: (event: React.DragEvent) => void;
+    onPaste: (event: ClipboardEvent) => void;
     onDeleteChangeSet: (sessionId: string) => void;
     onDeleteChangeSetElement: (sessionId: string, uri: URI) => void;
     onAddContextElement: () => void;
@@ -355,6 +378,25 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     // eslint-disable-next-line no-null/no-null
     const placeholderRef = React.useRef<HTMLDivElement | null>(null);
     const editorRef = React.useRef<SimpleMonacoEditor | undefined>(undefined);
+    // eslint-disable-next-line no-null/no-null
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // Handle paste events on the container
+    const handlePaste = React.useCallback((event: ClipboardEvent) => {
+        props.onPaste(event);
+    }, [props.onPaste]);
+
+    // Set up paste handler on the container div
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('paste', handlePaste, true);
+            return () => {
+                container.removeEventListener('paste', handlePaste, true);
+            };
+        }
+        return undefined;
+    }, [handlePaste]);
 
     React.useEffect(() => {
         const uri = props.uri;
@@ -472,7 +514,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             setChangeSetUI(current => !current ? current : { ...current, actions: newActions });
         });
         return () => disposable.dispose();
-    });
+    }, [props.actionService, props.chatModel.changeSet]);
 
     React.useEffect(() => {
         const disposable = props.decoratorService.onDidChangeDecorations(() => {
@@ -498,8 +540,13 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         if (!value || value.trim().length === 0) {
             return;
         }
+
         props.onQuery(value);
         setValue('');
+
+        if (editorRef.current) {
+            editorRef.current.document.textEditorModel.setValue('');
+        }
     }, [props.context, props.onQuery, setValue]);
 
     const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {
@@ -620,21 +667,23 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
 
     const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement, props.onOpenContextElement);
 
-    return <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop}    >
-        {props.showSuggestions !== false && <ChatInputAgentSuggestions suggestions={props.suggestions} opener={props.openerService} />}
-        {props.showChangeSet && changeSetUI?.elements &&
-            <ChangeSetBox changeSet={changeSetUI} />
-        }
-        <div className='theia-ChatInput-Editor-Box'>
-            <div className='theia-ChatInput-Editor' ref={editorContainerRef} onKeyDown={onKeyDown} onFocus={handleInputFocus} onBlur={handleInputBlur}>
-                <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>{nls.localizeByDefault('Ask a question')}</div>
-            </div>
-            {props.context && props.context.length > 0 &&
-                <ChatContext context={contextUI.context} />
+    return (
+        <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop} ref={containerRef}>
+            {props.showSuggestions !== false && <ChatInputAgentSuggestions suggestions={props.suggestions} opener={props.openerService} />}
+            {props.showChangeSet && changeSetUI?.elements &&
+                <ChangeSetBox changeSet={changeSetUI} />
             }
-            <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
+            <div className='theia-ChatInput-Editor-Box'>
+                <div className='theia-ChatInput-Editor' ref={editorContainerRef} onKeyDown={onKeyDown} onFocus={handleInputFocus} onBlur={handleInputBlur}>
+                    <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>{nls.localizeByDefault('Ask a question')}</div>
+                </div>
+                {props.context && props.context.length > 0 &&
+                    <ChatContext context={contextUI.context} />
+                }
+                <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
+            </div>
         </div>
-    </div>;
+    );
 };
 
 const noPropagation = (handler: () => void) => (e: React.MouseEvent) => {
@@ -816,6 +865,7 @@ function buildContextUI(
     }
     return {
         context: context.map((element, index) => ({
+            variable: element,
             name: labelProvider.getName(element),
             iconClass: labelProvider.getIcon(element),
             nameClass: element.variable.name,
@@ -829,6 +879,7 @@ function buildContextUI(
 
 interface ChatContextUI {
     context: {
+        variable: AIVariableResolutionRequest,
         name: string;
         iconClass: string;
         nameClass: string;
@@ -842,20 +893,45 @@ interface ChatContextUI {
 const ChatContext: React.FunctionComponent<ChatContextUI> = ({ context }) => (
     <div className="theia-ChatInput-ChatContext">
         <ul>
-            {context.map((element, index) => (
-                <li key={index} className="theia-ChatInput-ChatContext-Element" title={element.details} onClick={() => element.open?.()}>
-                    <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
-                    <div className="theia-ChatInput-ChatContext-labelParts">
-                        <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
-                            {element.name}
-                        </span>
-                        <span className='theia-ChatInput-ChatContext-additionalInfo'>
-                            {element.additionalInfo}
-                        </span>
+            {context.map((element, index) => {
+                if (ImageContextVariable.isImageContextRequest(element.variable)) {
+                    const variable = ImageContextVariable.parseRequest(element.variable)!;
+                    return <li key={index} className="theia-ChatInput-ChatContext-Element theia-ChatInput-ImageContext-Element"
+                        title={variable.name ?? variable.wsRelativePath} onClick={() => element.open?.()}>
+                        <div className="theia-ChatInput-ChatContext-Row">
+                            <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
+                            <div className="theia-ChatInput-ChatContext-labelParts">
+                                <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
+                                    {variable.name ?? variable.wsRelativePath?.split('/').pop()}
+                                </span>
+                                <span className='theia-ChatInput-ChatContext-additionalInfo'>
+                                    {element.additionalInfo}
+                                </span>
+                            </div>
+                            <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={e => { e.stopPropagation(); element.delete(); }} />
+                        </div>
+                        <div className="theia-ChatInput-ChatContext-ImageRow">
+                            <div className='theia-ChatInput-ImagePreview-Item'>
+                                <img src={`data:${variable.mimeType};base64,${variable.data}`} alt={variable.name} />
+                            </div>
+                        </div>
+                    </li>;
+                }
+                return <li key={index} className="theia-ChatInput-ChatContext-Element" title={element.details} onClick={() => element.open?.()}>
+                    <div className="theia-ChatInput-ChatContext-Row">
+                        <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
+                        <div className="theia-ChatInput-ChatContext-labelParts">
+                            <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
+                                {element.name}
+                            </span>
+                            <span className='theia-ChatInput-ChatContext-additionalInfo'>
+                                {element.additionalInfo}
+                            </span>
+                        </div>
+                        <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={e => { e.stopPropagation(); element.delete(); }} />
                     </div>
-                    <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={e => { e.stopPropagation(); element.delete(); }} />
-                </li>
-            ))}
+                </li>;
+            })}
         </ul>
     </div>
 );

package/src/browser/chat-node-toolbar-action-contribution.ts

@@ -78,6 +78,11 @@ export namespace ChatNodeToolbarCommands {
         id: 'chat:node:toolbar:cancel-request',
         category: CHAT_NODE_TOOLBAR_CATEGORY,
     }, '', CHAT_NODE_TOOLBAR_CATEGORY_KEY);
+
+    export const RETRY = Command.toLocalizedCommand({
+        id: 'chat:node:toolbar:retry-message',
+        category: CHAT_NODE_TOOLBAR_CATEGORY,
+    }, 'Retry', CHAT_NODE_TOOLBAR_CATEGORY_KEY);
 }
 
 export class DefaultChatNodeToolbarActionContribution implements ChatNodeToolbarActionContribution {
@@ -96,6 +101,15 @@ export class DefaultChatNodeToolbarActionContribution implements ChatNodeToolbar
                 tooltip: nls.localize('theia/ai/chat-ui/node/toolbar/edit', 'Edit'),
             }];
         } else {
+            const shouldShowRetry = node.response.isError || node.response.isCanceled;
+            if (shouldShowRetry) {
+                return [{
+                    commandId: ChatNodeToolbarCommands.RETRY.id,
+                    icon: codicon('refresh'),
+                    tooltip: nls.localize('theia/ai/chat-ui/node/toolbar/retry', 'Retry'),
+                    priority: -1 // Higher priority to show it first
+                }];
+            }
             return [];
         }
     }

package/src/browser/chat-response-renderer/delegation-response-renderer.tsx

@@ -0,0 +1,177 @@
+// *****************************************************************************
+// 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 { inject, injectable } from '@theia/core/shared/inversify';
+import { ChatRequestInvocation, ChatResponseContent, ChatResponseModel } from '@theia/ai-chat';
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import * as React from '@theia/core/shared/react';
+import { DelegationResponseContent, isDelegationResponseContent } from '@theia/ai-chat/lib/browser/delegation-response-content';
+import { ResponseNode } from '../chat-tree-view';
+import { CompositeTreeNode } from '@theia/core/lib/browser';
+import { SubChatWidgetFactory } from '../chat-tree-view/sub-chat-widget';
+import { DisposableCollection } from '@theia/core';
+
+@injectable()
+export class DelegationResponseRenderer implements ChatResponsePartRenderer<DelegationResponseContent> {
+
+    @inject(SubChatWidgetFactory)
+    subChatWidgetFactory: SubChatWidgetFactory;
+
+    canHandle(response: ChatResponseContent): number {
+        if (isDelegationResponseContent(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    render(response: DelegationResponseContent, parentNode: ResponseNode): React.ReactNode {
+        return this.renderExpandableNode(response, parentNode);
+    }
+
+    private renderExpandableNode(response: DelegationResponseContent, parentNode: ResponseNode): React.ReactNode {
+        return <DelegatedChat
+            response={response.response}
+            agentId={response.agentId}
+            prompt={response.prompt}
+            parentNode={parentNode}
+            subChatWidgetFactory={this.subChatWidgetFactory} />;
+    }
+}
+
+interface DelegatedChatProps {
+    response: ChatRequestInvocation;
+    agentId: string;
+    prompt: string;
+    parentNode: ResponseNode;
+    subChatWidgetFactory: SubChatWidgetFactory;
+}
+
+interface DelegatedChatState {
+    node?: ResponseNode;
+}
+
+class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatState> {
+    private widget: ReturnType<SubChatWidgetFactory>;
+    private readonly toDispose = new DisposableCollection();
+
+    constructor(props: DelegatedChatProps) {
+        super(props);
+        this.state = {
+            node: undefined
+        };
+        this.widget = props.subChatWidgetFactory();
+    }
+
+    override componentDidMount(): void {
+        // Start rendering as soon as the response is created (streaming mode)
+        this.props.response.responseCreated.then(chatModel => {
+            const node = mapResponseToNode(chatModel, this.props.parentNode);
+            this.setState({ node });
+
+            // Listen for changes to update the rendering as the response streams in
+            const changeListener = () => {
+                // Force re-render when the response content changes
+                this.forceUpdate();
+            };
+            this.toDispose.push(chatModel.onDidChange(changeListener));
+        }).catch(error => {
+            console.error('Failed to create delegated chat response:', error);
+            // Still try to handle completion in case of partial success
+        });
+
+        // Keep the completion handling for final cleanup if needed
+        this.props.response.responseCompleted.then(() => {
+            // Final update when response is complete
+            this.forceUpdate();
+        }).catch(error => {
+            console.error('Error in delegated chat response completion:', error);
+            // Force update anyway to show any partial content or error state
+            this.forceUpdate();
+        });
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        const { agentId, prompt } = this.props;
+        const hasNode = !!this.state.node;
+        const isComplete = this.state.node?.response.isComplete ?? false;
+        const isCanceled = this.state.node?.response.isCanceled ?? false;
+        const isError = this.state.node?.response.isError ?? false;
+
+        let statusIcon = '';
+        let statusText = '';
+        if (hasNode) {
+            if (isComplete) {
+                statusIcon = 'codicon-check';
+                statusText = 'completed';
+            } else if (isCanceled) {
+                statusIcon = 'codicon-cancel';
+                statusText = 'canceled';
+            } else if (isError) {
+                statusIcon = 'codicon-error';
+                statusText = 'error';
+            } else {
+                statusIcon = 'codicon-loading';
+                statusText = 'generating...';
+            }
+        } else {
+            statusIcon = 'codicon-loading';
+            statusText = 'starting...';
+        }
+
+        return (
+            <div className="theia-delegation-container">
+                <details className="delegation-response-details">
+                    <summary className="delegation-summary">
+                        <div className="delegation-header">
+                            <span className="delegation-agent">
+                                <strong>Agent:</strong> {agentId}
+                            </span>
+                            <span className="delegation-status">
+                                <span className={`codicon ${statusIcon} delegation-status-icon`}></span>
+                                <span className="delegation-status-text">{statusText}</span>
+                            </span>
+                        </div>
+                    </summary>
+                    <div className="delegation-content">
+                        <div className="delegation-prompt-section">
+                            <strong>Delegated prompt:</strong>
+                            <div className="delegation-prompt">{prompt}</div>
+                        </div>
+                        <div className="delegation-response-section">
+                            <strong>Response:</strong>
+                            <div className='delegation-response-placeholder'>
+                                {hasNode && this.state.node ? this.widget.renderChatResponse(this.state.node) :
+                                    <div className="theia-ChatContentInProgress">Starting delegation...</div>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </details>
+            </div>
+        );
+    }
+}
+
+function mapResponseToNode(response: ChatResponseModel, parentNode: ResponseNode): ResponseNode {
+    return {
+        id: response.id,
+        parent: parentNode as unknown as CompositeTreeNode,
+        response,
+        sessionId: parentNode.sessionId
+    };
+}

package/src/browser/chat-response-renderer/index.ts

@@ -24,3 +24,4 @@ export * from './toolcall-part-renderer';
 export * from './thinking-part-renderer';
 export * from './progress-part-renderer';
 export * from './tool-confirmation';
+export * from './delegation-response-renderer';

package/src/browser/chat-response-renderer/tool-confirmation.tsx

@@ -22,38 +22,38 @@ import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 /**
  * States the tool confirmation component can be in
  */
-export type ToolConfirmationState = 'waiting' | 'approved' | 'denied';
+export type ToolConfirmationState = 'waiting' | 'allowed' | 'denied';
 
 export interface ToolConfirmationProps {
     response: ToolCallChatResponseContent;
-    onApprove: (mode?: 'once' | 'session' | 'forever') => void;
+    onAllow: (mode?: 'once' | 'session' | 'forever') => void;
     onDeny: (mode?: 'once' | 'session' | 'forever') => void;
 }
 
 /**
  * Component that displays approval/denial buttons for tool execution
  */
-export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, onApprove, onDeny }) => {
+export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, onAllow, onDeny }) => {
     const [state, setState] = React.useState<ToolConfirmationState>('waiting');
     // Track selected mode for each action
-    const [approveMode, setApproveMode] = React.useState<'once' | 'session' | 'forever'>('once');
+    const [allowMode, setAllowMode] = React.useState<'once' | 'session' | 'forever'>('once');
     const [denyMode, setDenyMode] = React.useState<'once' | 'session' | 'forever'>('once');
-    const [dropdownOpen, setDropdownOpen] = React.useState<'approve' | 'deny' | undefined>(undefined);
+    const [dropdownOpen, setDropdownOpen] = React.useState<'allow' | 'deny' | undefined>(undefined);
 
-    const handleApprove = React.useCallback(() => {
-        setState('approved');
-        onApprove(approveMode);
-    }, [onApprove, approveMode]);
+    const handleAllow = React.useCallback(() => {
+        setState('allowed');
+        onAllow(allowMode);
+    }, [onAllow, allowMode]);
 
     const handleDeny = React.useCallback(() => {
         setState('denied');
         onDeny(denyMode);
     }, [onDeny, denyMode]);
 
-    if (state === 'approved') {
+    if (state === 'allowed') {
         return (
-            <div className="theia-tool-confirmation-status approved">
-                <span className={codicon('check')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/approved', 'Tool execution approved')}
+            <div className="theia-tool-confirmation-status allowed">
+                <span className={codicon('check')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/allowed', 'Tool execution allowed')}
             </div>
         );
     }
@@ -69,12 +69,12 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
     // Helper for dropdown options
     const MODES: Array<'once' | 'session' | 'forever'> = ['once', 'session', 'forever'];
     // Unified labels for both main button and dropdown, as requested
-    const modeLabel = (type: 'approve' | 'deny', mode: 'once' | 'session' | 'forever') => {
-        if (type === 'approve') {
+    const modeLabel = (type: 'allow' | 'deny', mode: 'once' | 'session' | 'forever') => {
+        if (type === 'allow') {
             switch (mode) {
-                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve', 'Approve');
-                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-session', 'Approve for this Chat');
-                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-forever', 'Always Approve');
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow', 'Allow');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-session', 'Allow for this Chat');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-forever', 'Always Allow');
             }
         } else {
             switch (mode) {
@@ -88,12 +88,12 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
     const mainButtonLabel = modeLabel; // Use the same function for both
 
     // Tooltips for dropdown options
-    const modeTooltip = (type: 'approve' | 'deny', mode: 'once' | 'session' | 'forever') => {
-        if (type === 'approve') {
+    const modeTooltip = (type: 'allow' | 'deny', mode: 'once' | 'session' | 'forever') => {
+        if (type === 'allow') {
             switch (mode) {
-                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-tooltip', 'Approve this tool call once');
-                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-session-tooltip', 'Approve all calls of this tool for this chat session');
-                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-forever-tooltip', 'Always approve this tool');
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-tooltip', 'Allow this tool call once');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-session-tooltip', 'Allow all calls of this tool for this chat session');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-forever-tooltip', 'Always allow this tool');
             }
         } else {
             switch (mode) {
@@ -105,27 +105,27 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
     };
 
     // Split button for approve/deny
-    const renderSplitButton = (type: 'approve' | 'deny') => {
-        const selectedMode = type === 'approve' ? approveMode : denyMode;
-        const setMode = type === 'approve' ? setApproveMode : setDenyMode;
-        const handleMain = type === 'approve' ? handleApprove : handleDeny;
+    const renderSplitButton = (type: 'allow' | 'deny') => {
+        const selectedMode = type === 'allow' ? allowMode : denyMode;
+        const setMode = type === 'allow' ? setAllowMode : setDenyMode;
+        const handleMain = type === 'allow' ? handleAllow : handleDeny;
         const otherModes = MODES.filter(m => m !== selectedMode);
         return (
             <div className={`theia-tool-confirmation-split-button ${type}`}
                 style={{ display: 'inline-flex', position: 'relative' }}>
                 <button
-                    className={`theia-button ${type === 'approve' ? 'primary' : 'secondary'} theia-tool-confirmation-main-btn`}
+                    className={`theia-button ${type === 'allow' ? 'primary' : 'secondary'} theia-tool-confirmation-main-btn`}
                     onClick={handleMain}
                 >
                     {mainButtonLabel(type, selectedMode)}
                 </button>
                 <button
-                    className={`theia-button ${type === 'approve' ? 'primary' : 'secondary'} theia-tool-confirmation-chevron-btn`}
+                    className={`theia-button ${type === 'allow' ? 'primary' : 'secondary'} theia-tool-confirmation-chevron-btn`}
                     onClick={() => setDropdownOpen(dropdownOpen === type ? undefined : type)}
                     aria-haspopup="true"
                     aria-expanded={dropdownOpen === type}
                     tabIndex={0}
-                    title={type === 'approve' ? 'More Approve Options' : 'More Deny Options'}
+                    title={type === 'allow' ? 'More Allow Options' : 'More Deny Options'}
                 >
                     <span className={codicon('chevron-down')}></span>
                 </button>
@@ -166,7 +166,7 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
             </div>
             <div className="theia-tool-confirmation-actions">
                 {renderSplitButton('deny')}
-                {renderSplitButton('approve')}
+                {renderSplitButton('allow')}
             </div>
         </div>
     );

package/src/browser/chat-response-renderer/toolcall-part-renderer.tsx

@@ -101,7 +101,7 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
 }
 
 const Spinner = () => (
-    <span className={codicon('loading')}></span>
+    <span className={`${codicon('loading')} theia-animation-spin`}></span>
 );
 
 interface ToolCallContentProps {
@@ -120,9 +120,9 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
     const [confirmationState, setConfirmationState] = React.useState<ToolConfirmationState>('waiting');
 
     React.useEffect(() => {
-        if (confirmationMode === ToolConfirmationMode.YOLO) {
+        if (confirmationMode === ToolConfirmationMode.ALWAYS_ALLOW) {
             response.confirm();
-            setConfirmationState('approved');
+            setConfirmationState('allowed');
             return;
         } else if (confirmationMode === ToolConfirmationMode.DISABLED) {
             response.deny();
@@ -132,7 +132,7 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
         response.confirmed.then(
             confirmed => {
                 if (confirmed === true) {
-                    setConfirmationState('approved');
+                    setConfirmationState('allowed');
                 } else {
                     setConfirmationState('denied');
                 }
@@ -143,11 +143,11 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
             });
     }, [response, confirmationMode]);
 
-    const handleApprove = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
+    const handleAllow = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
         if (mode === 'forever' && response.name) {
-            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.YOLO);
+            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.ALWAYS_ALLOW);
         } else if (mode === 'session' && response.name) {
-            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.YOLO, chatId);
+            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.ALWAYS_ALLOW, chatId);
         }
         response.confirm();
     }, [response, toolConfirmationManager, chatId]);
@@ -176,7 +176,7 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
                         <pre>{tryPrettyPrintJson(response)}</pre>
                     </details>
                 ) : (
-                    confirmationState === 'approved' && (
+                    confirmationState === 'allowed' && (
                         <span>
                             <Spinner /> {nls.localizeByDefault('Running')} {response.name}
                         </span>
@@ -184,11 +184,11 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
                 )}
             </h4>
 
-            {/* Show confirmation UI when waiting for approval */}
+            {/* Show confirmation UI when waiting for allow */}
             {confirmationState === 'waiting' && (
                 <ToolConfirmation
                     response={response}
-                    onApprove={handleApprove}
+                    onAllow={handleAllow}
                     onDeny={handleDeny}
                 />
             )}