@theia/ai-chat-ui 1.72.1 → 1.72.3

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

@@ -18,15 +18,20 @@ import { inject, injectable, named } from '@theia/core/shared/inversify';
 import { ChatRequestInvocation, ChatResponseContent, ChatResponseModel, InteractiveContent, ToolCallChatResponseContent } from '@theia/ai-chat';
 import { ChatAgentService } from '@theia/ai-chat/lib/common/chat-agent-service';
 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 { AGENT_DELEGATION_FUNCTION_ID } from '@theia/ai-core/lib/common/tool-constants';
 import { ToolInvocationRegistry } from '@theia/ai-core';
 import { AgentDelegationTool } from '@theia/ai-chat/lib/browser/agent-delegation-tool';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { ResponseNode } from '../chat-tree-view';
 import { SubChatWidgetFactory } from '../chat-tree-view/sub-chat-widget';
-import { withToolCallConfirmation } from './tool-confirmation';
+import { ToolConfirmationKeybindingHints, withToolCallConfirmation } from './tool-confirmation';
+import {
+    APPROVE_LATEST_TOOL_CONFIRMATION_COMMAND,
+    DENY_LATEST_TOOL_CONFIRMATION_COMMAND
+} from '../tool-confirmation-keybinding-contribution';
 import { extractJsonStringField } from './toolcall-utils';
-import { CompositeTreeNode, ContextMenuRenderer, OpenerService } from '@theia/core/lib/browser';
+import { CompositeTreeNode, ContextMenuRenderer, KeybindingRegistry, MarkdownRenderer, OpenerService } from '@theia/core/lib/browser';
 import { ContributionProvider, DisposableCollection, nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
 
@@ -54,6 +59,15 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
     @inject(OpenerService)
     protected openerService: OpenerService;
 
+    @inject(PendingToolConfirmationTracker)
+    protected pendingToolConfirmationTracker: PendingToolConfirmationTracker;
+
+    @inject(KeybindingRegistry)
+    protected keybindingRegistry: KeybindingRegistry;
+
+    @inject(MarkdownRenderer)
+    protected markdownRenderer: MarkdownRenderer;
+
     @inject(ContributionProvider) @named(ChatResponsePartRenderer)
     protected chatResponsePartRenderers: ContributionProvider<ChatResponsePartRenderer<ChatResponseContent>>;
 
@@ -111,10 +125,27 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
                 chatId,
                 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('+');
+    }
 }
 
 interface PendingInteraction {

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.spec.ts

@@ -15,6 +15,10 @@
 // *****************************************************************************
 
 import { expect } from 'chai';
+import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+import { OpenerService } from '@theia/core/lib/browser';
+import { ReactNode } from '@theia/core/shared/react';
+import { ToolCallPartRenderer } from './toolcall-part-renderer';
 import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
 
 describe('condenseArguments', () => {
@@ -274,3 +278,126 @@ describe('formatArgsForTooltip', () => {
     });
 
 });
+
+/**
+ * Test-only subclass that exposes the protected `renderResult` method and
+ * accepts a minimal `OpenerService` stub. `renderResult` only references the
+ * opener service indirectly through `<MarkdownRender>`, and the React tree is
+ * never mounted in these unit tests, so an empty stub is sufficient.
+ */
+class TestableToolCallPartRenderer extends ToolCallPartRenderer {
+    constructor() {
+        super();
+        this.openerService = {} as OpenerService;
+    }
+    callRenderResult(response: ToolCallChatResponseContent): ReactNode {
+        return this.renderResult(response);
+    }
+}
+
+interface RenderedNode {
+    type: string;
+    props: { children?: unknown; className?: string };
+}
+
+describe('ToolCallPartRenderer.renderResult', () => {
+
+    function renderResult(result: unknown): RenderedNode | undefined {
+        const renderer = new TestableToolCallPartRenderer();
+        const response = { kind: 'toolCall', result } as unknown as ToolCallChatResponseContent;
+        return renderer.callRenderResult(response) as RenderedNode | undefined;
+    }
+
+    it('returns undefined for an undefined result', () => {
+        expect(renderResult(undefined)).to.be.undefined;
+    });
+
+    it('returns undefined for an empty-string result (falsy after tryParse)', () => {
+        expect(renderResult('')).to.be.undefined;
+    });
+
+    it('renders primitive numeric result via <pre>{String(result)}</pre>', () => {
+        const node = renderResult(42)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal('42');
+    });
+
+    it('renders unparseable string result via <pre>{String(result)}</pre>', () => {
+        const node = renderResult('not json at all')!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal('not json at all');
+    });
+
+    it('renders proper ToolCallContent (array) via the response-content branch', () => {
+        const node = renderResult({ content: [{ type: 'text', text: 'hello' }] })!;
+        expect(node.type).to.equal('div');
+        expect(node.props.className).to.equal('theia-toolCall-response-content');
+    });
+
+    it('renders ToolCallContent that arrived as a JSON string via the response-content branch', () => {
+        const node = renderResult(JSON.stringify({ content: [{ type: 'text', text: 'hello' }] }))!;
+        expect(node.type).to.equal('div');
+        expect(node.props.className).to.equal('theia-toolCall-response-content');
+    });
+
+    // Regression: an object whose `content` field is not an array must not crash.
+    // This is the exact shape produced by `getWorkspaceFileList` (after multi-root
+    // support landed in v1.72.0) when a workspace entry happens to be literally
+    // named "content" (e.g. Hugo sites).
+    it('falls back to <pre>JSON</pre> when result has a non-array "content" key (regression)', () => {
+        const result = {
+            '.devcontainer': 'directory',
+            'config.yaml': 'file',
+            'content': 'directory',
+            'go.mod': 'file'
+        };
+        const node = renderResult(result)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal(JSON.stringify(result, undefined, 2));
+    });
+
+    it('falls back to <pre>JSON</pre> when content is a string (regression)', () => {
+        const result = { content: 'directory' };
+        const node = renderResult(result)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal(JSON.stringify(result, undefined, 2));
+    });
+
+    it('falls back to <pre>JSON</pre> when content is an object (regression)', () => {
+        const result = { content: { nested: true } };
+        const node = renderResult(result)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal(JSON.stringify(result, undefined, 2));
+    });
+
+    it('falls back to <pre>JSON</pre> when content is a number (regression)', () => {
+        const result = { content: 42 };
+        const node = renderResult(result)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal(JSON.stringify(result, undefined, 2));
+    });
+
+    it('falls back to <pre>JSON</pre> for JSON-string result whose parsed object has a non-array content key (regression)', () => {
+        // Byte-for-byte shape persisted by getWorkspaceFileList for a Hugo workspace.
+        const raw = '{".devcontainer":"directory","config.yaml":"file","content":"directory","go.mod":"file"}';
+        const node = renderResult(raw)!;
+        expect(node.type).to.equal('pre');
+        // The fallback stringifies the *parsed* object, not the original string.
+        expect(node.props.children).to.equal(JSON.stringify(JSON.parse(raw), undefined, 2));
+    });
+
+    it('falls back to <pre>JSON</pre> for plain objects without a content key', () => {
+        const result = { files: [] };
+        const node = renderResult(result)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal(JSON.stringify(result, undefined, 2));
+    });
+
+    it('falls back to <pre>JSON</pre> for top-level array results', () => {
+        const result = [{ file: 'a', matches: [] }];
+        const node = renderResult(result)!;
+        expect(node.type).to.equal('pre');
+        expect(node.props.children).to.equal(JSON.stringify(result, undefined, 2));
+    });
+
+});

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 { ToolCallResult, ToolInvocationRegistry, ToolRequest } from '@theia/ai-core';
+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 {
@@ -98,7 +133,7 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         if (typeof result !== 'object' || result === null) {
             return <pre>{String(result)}</pre>;
         }
-        if ('content' in result) {
+        if (isToolCallContent(result)) {
             return <div className='theia-toolCall-response-content'>
                 {result.content.map((content, idx) => {
                     switch (content.type) {
@@ -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;