@theia/ai-chat-ui 1.72.2 → 1.72.3

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

@@ -16,13 +16,14 @@
 
 import * as React from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { codicon, ContextMenuRenderer, OpenerService } from '@theia/core/lib/browser';
+import { codicon, ContextMenuRenderer, LocalizedMarkdown, MarkdownRenderer, OpenerService } from '@theia/core/lib/browser';
 import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ToolRequest } from '@theia/ai-core';
 import { CommandMenu, ContextExpressionMatcher, MenuPath } from '@theia/core/lib/common/menu';
 import { GroupImpl } from '@theia/core/lib/browser/menu/composite-menu-node';
 import { ToolConfirmationMode as ToolConfirmationPreferenceMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
+import { PendingToolConfirmationTracker } from '@theia/ai-chat/lib/browser/pending-tool-confirmation-tracker';
 import { MarkdownRender } from './markdown-part-renderer';
 import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
 
@@ -160,9 +161,16 @@ export interface ToolConfirmationCallbacks {
     onDeny: (scope: ConfirmationScope, reason?: string) => void;
 }
 
+export interface ToolConfirmationKeybindingHints {
+    allow?: string;
+    deny?: string;
+}
+
 export interface ToolConfirmationActionsProps extends ToolConfirmationCallbacks {
     toolName: string;
     contextMenuRenderer: ContextMenuRenderer;
+    autoFocus?: boolean;
+    keybindingHints?: ToolConfirmationKeybindingHints;
 }
 
 export class InlineActionMenuNode implements CommandMenu {
@@ -196,7 +204,9 @@ export const ToolConfirmationActions: React.FC<ToolConfirmationActionsProps> = (
     toolRequest,
     onAllow,
     onDeny,
-    contextMenuRenderer
+    contextMenuRenderer,
+    autoFocus,
+    keybindingHints
 }) => {
     const [allowScope, setAllowScope] = React.useState<ConfirmationScope>('once');
     const [denyScope, setDenyScope] = React.useState<ConfirmationScope>('once');
@@ -205,6 +215,14 @@ export const ToolConfirmationActions: React.FC<ToolConfirmationActionsProps> = (
     const [denyReason, setDenyReason] = React.useState('');
     // eslint-disable-next-line no-null/no-null
     const denyReasonInputRef = React.useRef<HTMLInputElement>(null);
+    // eslint-disable-next-line no-null/no-null
+    const allowButtonRef = React.useRef<HTMLButtonElement>(null);
+
+    React.useEffect(() => {
+        if (autoFocus && allowButtonRef.current) {
+            allowButtonRef.current.focus();
+        }
+    }, [autoFocus]);
 
     const handleAllow = React.useCallback(() => {
         if ((allowScope === 'forever' || allowScope === 'session') && toolRequest?.confirmAlwaysAllow) {
@@ -334,6 +352,9 @@ export const ToolConfirmationActions: React.FC<ToolConfirmationActionsProps> = (
         const selectedScope = type === 'allow' ? allowScope : denyScope;
         const setScope = type === 'allow' ? setAllowScope : setDenyScope;
         const handleMain = type === 'allow' ? handleAllow : handleDeny;
+        const keybindingHint = type === 'allow' ? keybindingHints?.allow : keybindingHints?.deny;
+        const mainLabel = scopeLabel(type, selectedScope);
+        const mainTitle = keybindingHint && selectedScope === 'once' ? `${mainLabel} (${keybindingHint})` : undefined;
 
         return (
             <div
@@ -341,10 +362,12 @@ export const ToolConfirmationActions: React.FC<ToolConfirmationActionsProps> = (
                 style={{ display: 'inline-flex', position: 'relative' }}
             >
                 <button
+                    ref={type === 'allow' ? allowButtonRef : undefined}
                     className={`theia-button ${type === 'allow' ? 'main' : 'secondary'} theia-tool-confirmation-main-btn`}
                     onClick={handleMain}
+                    title={mainTitle}
                 >
-                    {scopeLabel(type, selectedScope)}
+                    {mainLabel}
                 </button>
                 <button
                     className={`theia-button ${type === 'allow' ? 'main' : 'secondary'} theia-tool-confirmation-chevron-btn`}
@@ -433,10 +456,45 @@ export interface ToolConfirmationProps extends Pick<ToolConfirmationCallbacks, '
     onDeny: (scope?: ConfirmationScope, reason?: string) => void;
     contextMenuRenderer: ContextMenuRenderer;
     openerService: OpenerService;
+    pendingTracker?: PendingToolConfirmationTracker;
+    keybindingHints?: ToolConfirmationKeybindingHints;
+    chatId?: string;
+    markdownRenderer?: MarkdownRenderer;
 }
 
-export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, toolRequest, onAllow, onDeny, contextMenuRenderer, openerService }) => {
+/**
+ * Command that opens the AI Configuration view on the Tools tab; its id is duplicated here as a
+ * string constant to keep ai-chat-ui free of an ai-ide dependency.
+ */
+const OPEN_TOOLS_CONFIGURATION_COMMAND_ID = 'aiConfiguration:openTools';
+
+const ToolConfirmationIntro: React.FC<{ markdownRenderer: MarkdownRenderer }> = ({ markdownRenderer }) => (
+    <div className="theia-tool-confirmation-intro">
+        <LocalizedMarkdown
+            localizationKey="theia/ai/chat-ui/toolconfirmation/intro"
+            defaultMarkdown={
+                'AI agents may want to use tools to act on your workspace. ' +
+                'By default each tool call needs your confirmation. ' +
+                'You can change this default or pre-approve individual tools in the [Tools configuration view]({0}).'
+            }
+            args={[`command:${OPEN_TOOLS_CONFIGURATION_COMMAND_ID}`]}
+            markdownRenderer={markdownRenderer}
+            markdownOptions={{
+                isTrusted: { enabledCommands: [OPEN_TOOLS_CONFIGURATION_COMMAND_ID] }
+            }}
+        />
+    </div>
+);
+
+export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
+    response, toolRequest, onAllow, onDeny, contextMenuRenderer, openerService, pendingTracker, keybindingHints, chatId, markdownRenderer
+}) => {
     const [state, setState] = React.useState<ToolConfirmationState>('waiting');
+    // Pure initializer (no side effects): decide whether the intro should render. Marking the chat
+    // as "intro shown" happens in the effect below to keep the initializer pure for StrictMode.
+    const [showIntro] = React.useState<boolean>(
+        () => !!(pendingTracker && chatId && markdownRenderer && !pendingTracker.hasShownIntro(chatId))
+    );
 
     const handleAllow = React.useCallback((scope: ConfirmationScope) => {
         setState('allowed');
@@ -448,6 +506,25 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, to
         onDeny(scope, reason);
     }, [onDeny]);
 
+    React.useEffect(() => {
+        if (showIntro && pendingTracker && chatId) {
+            pendingTracker.markIntroShown(chatId);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (!pendingTracker || !chatId || state !== 'waiting') {
+            return;
+        }
+        const disposable = pendingTracker.register({
+            chatId,
+            response,
+            allow: () => handleAllow('once'),
+            deny: () => handleDeny('once')
+        });
+        return () => disposable.dispose();
+    }, [pendingTracker, chatId, response, handleAllow, handleDeny, state]);
+
     if (state === 'allowed') {
         return (
             <div className="theia-tool-confirmation-status allowed">
@@ -472,32 +549,37 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, to
     );
 
     return (
-        <div className="theia-tool-confirmation">
-            <div className="theia-tool-confirmation-header">
-                <span className={codicon('shield')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/header', 'Confirm Tool Execution')}
-            </div>
-            <div className="theia-tool-confirmation-info">
-                {toolRequest?.description ? (
-                    <details className="theia-tool-confirmation-name">
-                        <summary>{toolNameContent}</summary>
-                        <div className="theia-tool-confirmation-description">
-                            {toolRequest.description}
-                        </div>
-                    </details>
-                ) : (
-                    <div className="theia-tool-confirmation-name">{toolNameContent}</div>
-                )}
-                <ToolArgsDisplay args={response.arguments} openerService={openerService} />
+        <>
+            {showIntro && markdownRenderer && <ToolConfirmationIntro markdownRenderer={markdownRenderer} />}
+            <div className="theia-tool-confirmation">
+                <div className="theia-tool-confirmation-header">
+                    <span className={codicon('shield')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/header', 'Confirm Tool Execution')}
+                </div>
+                <div className="theia-tool-confirmation-info">
+                    {toolRequest?.description ? (
+                        <details className="theia-tool-confirmation-name">
+                            <summary>{toolNameContent}</summary>
+                            <div className="theia-tool-confirmation-description">
+                                {toolRequest.description}
+                            </div>
+                        </details>
+                    ) : (
+                        <div className="theia-tool-confirmation-name">{toolNameContent}</div>
+                    )}
+                    <ToolArgsDisplay args={response.arguments} openerService={openerService} />
+                </div>
+                <ToolConfirmationActions
+                    toolName={response.name ?? 'unknown'}
+                    toolRequest={toolRequest}
+                    onAllow={handleAllow}
+                    onDeny={handleDeny}
+                    contextMenuRenderer={contextMenuRenderer}
+                    autoFocus={true}
+                    keybindingHints={keybindingHints}
+                />
+                <CountdownTimer response={response} />
             </div>
-            <ToolConfirmationActions
-                toolName={response.name ?? 'unknown'}
-                toolRequest={toolRequest}
-                onAllow={handleAllow}
-                onDeny={handleDeny}
-                contextMenuRenderer={contextMenuRenderer}
-            />
-            <CountdownTimer response={response} />
-        </div>
+        </>
     );
 };
 
@@ -539,6 +621,9 @@ export interface WithToolCallConfirmationProps {
     requestCanceled: boolean;
     contextMenuRenderer: ContextMenuRenderer;
     openerService: OpenerService;
+    pendingTracker?: PendingToolConfirmationTracker;
+    keybindingHints?: ToolConfirmationKeybindingHints;
+    markdownRenderer?: MarkdownRenderer;
 }
 
 export function withToolCallConfirmation<P extends object>(
@@ -559,7 +644,10 @@ export function withToolCallConfirmation<P extends object>(
             showArgsTooltip,
             requestCanceled,
             contextMenuRenderer,
-            openerService
+            openerService,
+            pendingTracker,
+            keybindingHints,
+            markdownRenderer
         } = toolConfirmation;
 
         const { confirmationState } = useToolConfirmationState(response, confirmationMode);
@@ -622,6 +710,10 @@ export function withToolCallConfirmation<P extends object>(
                     onDeny={handleDeny}
                     contextMenuRenderer={contextMenuRenderer}
                     openerService={openerService}
+                    pendingTracker={pendingTracker}
+                    keybindingHints={keybindingHints}
+                    chatId={chatId}
+                    markdownRenderer={markdownRenderer}
                 />
             );
         }

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

@@ -19,14 +19,19 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { codicon, ContextMenuRenderer, HoverService, OpenerService } from '@theia/core/lib/browser';
+import { codicon, ContextMenuRenderer, HoverService, KeybindingRegistry, MarkdownRenderer, OpenerService } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
-import { createConfirmationHandlers, ToolConfirmation, useToolConfirmationState } from './tool-confirmation';
+import { createConfirmationHandlers, ToolConfirmation, ToolConfirmationKeybindingHints, useToolConfirmationState } from './tool-confirmation';
 import { ToolConfirmationMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
 import { ResponseNode } from '../chat-tree-view';
 import { MarkdownRender } from './markdown-part-renderer';
 import { isToolCallContent, ToolCallResult, ToolInvocationRegistry, ToolRequest } from '@theia/ai-core';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
+import { PendingToolConfirmationTracker } from '@theia/ai-chat/lib/browser/pending-tool-confirmation-tracker';
+import {
+    APPROVE_LATEST_TOOL_CONFIRMATION_COMMAND,
+    DENY_LATEST_TOOL_CONFIRMATION_COMMAND
+} from '../tool-confirmation-keybinding-contribution';
 import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
 
 @injectable()
@@ -47,6 +52,15 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
     @inject(ContextMenuRenderer)
     protected contextMenuRenderer: ContextMenuRenderer;
 
+    @inject(PendingToolConfirmationTracker)
+    protected pendingToolConfirmationTracker: PendingToolConfirmationTracker;
+
+    @inject(KeybindingRegistry)
+    protected keybindingRegistry: KeybindingRegistry;
+
+    @inject(MarkdownRenderer)
+    protected markdownRenderer: MarkdownRenderer;
+
     canHandle(response: ChatResponseContent): number {
         if (ToolCallChatResponseContent.is(response)) {
             return 10;
@@ -68,6 +82,10 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             onDeny={handleDeny}
             contextMenuRenderer={this.contextMenuRenderer}
             openerService={this.openerService}
+            pendingTracker={this.pendingToolConfirmationTracker}
+            keybindingHints={this.getKeybindingHints()}
+            chatId={chatId}
+            markdownRenderer={this.markdownRenderer}
         />;
     }
 
@@ -86,7 +104,24 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             responseRenderer={this.renderResult.bind(this)}
             requestCanceled={parentNode.response.isCanceled}
             contextMenuRenderer={this.contextMenuRenderer}
-            openerService={this.openerService} />;
+            openerService={this.openerService}
+            pendingTracker={this.pendingToolConfirmationTracker}
+            keybindingHints={this.getKeybindingHints()}
+            markdownRenderer={this.markdownRenderer} />;
+    }
+
+    protected getKeybindingHints(): ToolConfirmationKeybindingHints {
+        const allow = this.formatKeybinding(APPROVE_LATEST_TOOL_CONFIRMATION_COMMAND.id);
+        const deny = this.formatKeybinding(DENY_LATEST_TOOL_CONFIRMATION_COMMAND.id);
+        return { allow, deny };
+    }
+
+    protected formatKeybinding(commandId: string): string | undefined {
+        const bindings = this.keybindingRegistry.getKeybindingsForCommand(commandId);
+        if (!bindings.length) {
+            return undefined;
+        }
+        return this.keybindingRegistry.acceleratorFor(bindings[0], '+').join('+');
     }
 
     protected renderResult(response: ToolCallChatResponseContent): ReactNode {
@@ -190,6 +225,9 @@ interface ToolCallContentProps {
     requestCanceled: boolean;
     contextMenuRenderer: ContextMenuRenderer;
     openerService: OpenerService;
+    pendingTracker?: PendingToolConfirmationTracker;
+    keybindingHints?: ToolConfirmationKeybindingHints;
+    markdownRenderer?: MarkdownRenderer;
 }
 
 /**
@@ -206,7 +244,10 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
     requestCanceled,
     showArgsTooltip,
     contextMenuRenderer,
-    openerService
+    openerService,
+    pendingTracker,
+    keybindingHints,
+    markdownRenderer
 }) => {
     const { confirmationState, rejectionReason } = useToolConfirmationState(response, confirmationMode);
     const summaryRef = React.useRef<HTMLElement | undefined>(undefined);
@@ -297,6 +338,10 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
                         onDeny={handleDeny}
                         contextMenuRenderer={contextMenuRenderer}
                         openerService={openerService}
+                        pendingTracker={pendingTracker}
+                        keybindingHints={keybindingHints}
+                        chatId={chatId}
+                        markdownRenderer={markdownRenderer}
                     />
                 </span>
             )}

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

@@ -341,6 +341,10 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     getSettings(): ChatSessionSettings | undefined {
         return this.chatSession.model.settings;
     }
+
+    get sessionId(): string {
+        return this.chatSession.id;
+    }
 }
 
 export namespace ChatViewWidget {

package/src/browser/style/index.css

@@ -991,6 +991,15 @@ div:last-child>.theia-ChatNode {
   cursor: default;
 }
 
+.theia-tool-confirmation-intro {
+  margin: calc(var(--theia-ui-padding) * 2) 0;
+  line-height: var(--theia-content-line-height);
+}
+
+.theia-tool-confirmation-intro p {
+  margin: 0;
+}
+
 .theia-tool-confirmation-header {
   font-weight: bold;
   margin-bottom: 8px;

package/src/browser/tool-confirmation-keybinding-contribution.ts

@@ -0,0 +1,104 @@
+// *****************************************************************************
+// Copyright (C) 2026 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 { Command, CommandContribution, CommandRegistry } from '@theia/core';
+import { ApplicationShell, KeybindingContribution, KeybindingRegistry } from '@theia/core/lib/browser';
+import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { PendingToolConfirmation, PendingToolConfirmationTracker } from '@theia/ai-chat/lib/browser/pending-tool-confirmation-tracker';
+import { ChatViewWidget } from './chat-view-widget';
+
+export const HAS_PENDING_TOOL_CONFIRMATION_CONTEXT_KEY = 'theiaAi.hasPendingToolConfirmation';
+
+/**
+ * Only fire the approve/deny shortcuts while the chat view is focused, so e.g. `Ctrl+Enter` in an
+ * editor is never shadowed by a confirmation pending in some background chat.
+ */
+const CHAT_VIEW_FOCUS_WHEN = '(chatInputFocus || chatResponseFocus)';
+
+export const APPROVE_LATEST_TOOL_CONFIRMATION_COMMAND = Command.toLocalizedCommand({
+    id: 'theia.ai.chat.approveLatestToolConfirmation',
+    label: 'Approve Latest Tool Confirmation'
+}, 'theia/ai/chat-ui/toolconfirmation/approveLatest');
+
+export const DENY_LATEST_TOOL_CONFIRMATION_COMMAND = Command.toLocalizedCommand({
+    id: 'theia.ai.chat.denyLatestToolConfirmation',
+    label: 'Deny Latest Tool Confirmation'
+}, 'theia/ai/chat-ui/toolconfirmation/denyLatest');
+
+@injectable()
+export class ToolConfirmationKeybindingContribution implements CommandContribution, KeybindingContribution {
+
+    @inject(PendingToolConfirmationTracker)
+    protected readonly pendingTracker: PendingToolConfirmationTracker;
+
+    @inject(ContextKeyService)
+    protected readonly contextKeyService: ContextKeyService;
+
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
+    protected hasPendingKey: ContextKey<boolean>;
+
+    @postConstruct()
+    protected init(): void {
+        this.hasPendingKey = this.contextKeyService.createKey<boolean>(HAS_PENDING_TOOL_CONFIRMATION_CONTEXT_KEY, false);
+        this.pendingTracker.onChanged(() => this.hasPendingKey.set(this.pendingTracker.hasPending()));
+    }
+
+    registerCommands(commands: CommandRegistry): void {
+        commands.registerCommand(APPROVE_LATEST_TOOL_CONFIRMATION_COMMAND, {
+            isEnabled: () => this.hasPendingInActiveChat(),
+            execute: () => this.getLatestInActiveChat()?.allow()
+        });
+        commands.registerCommand(DENY_LATEST_TOOL_CONFIRMATION_COMMAND, {
+            isEnabled: () => this.hasPendingInActiveChat(),
+            execute: () => this.getLatestInActiveChat()?.deny()
+        });
+    }
+
+    registerKeybindings(keybindings: KeybindingRegistry): void {
+        keybindings.registerKeybinding({
+            command: APPROVE_LATEST_TOOL_CONFIRMATION_COMMAND.id,
+            keybinding: 'ctrlcmd+enter',
+            when: `${HAS_PENDING_TOOL_CONFIRMATION_CONTEXT_KEY} && ${CHAT_VIEW_FOCUS_WHEN}`
+        });
+        keybindings.registerKeybinding({
+            command: DENY_LATEST_TOOL_CONFIRMATION_COMMAND.id,
+            keybinding: 'ctrlcmd+shift+backspace',
+            when: `${HAS_PENDING_TOOL_CONFIRMATION_CONTEXT_KEY} && ${CHAT_VIEW_FOCUS_WHEN}`
+        });
+    }
+
+    /**
+     * The id of the chat the user is currently interacting with, or `undefined` if no chat view is
+     * focused. Used to target the shortcuts at the visible confirmation rather than the globally
+     * newest one.
+     */
+    protected getActiveChatId(): string | undefined {
+        return ChatViewWidget.findActive(this.shell)?.sessionId;
+    }
+
+    protected hasPendingInActiveChat(): boolean {
+        const chatId = this.getActiveChatId();
+        return chatId !== undefined && this.pendingTracker.hasPending(chatId);
+    }
+
+    protected getLatestInActiveChat(): PendingToolConfirmation | undefined {
+        const chatId = this.getActiveChatId();
+        return chatId === undefined ? undefined : this.pendingTracker.getLatest(chatId);
+    }
+}