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

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

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

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

@@ -0,0 +1,173 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import * as React from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
+import { codicon } from '@theia/core/lib/browser';
+import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+
+/**
+ * States the tool confirmation component can be in
+ */
+export type ToolConfirmationState = 'waiting' | 'approved' | 'denied';
+
+export interface ToolConfirmationProps {
+    response: ToolCallChatResponseContent;
+    onApprove: (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 }) => {
+    const [state, setState] = React.useState<ToolConfirmationState>('waiting');
+    // Track selected mode for each action
+    const [approveMode, setApproveMode] = 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 handleApprove = React.useCallback(() => {
+        setState('approved');
+        onApprove(approveMode);
+    }, [onApprove, approveMode]);
+
+    const handleDeny = React.useCallback(() => {
+        setState('denied');
+        onDeny(denyMode);
+    }, [onDeny, denyMode]);
+
+    if (state === 'approved') {
+        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>
+        );
+    }
+
+    if (state === 'denied') {
+        return (
+            <div className="theia-tool-confirmation-status denied">
+                <span className={codicon('close')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/denied', 'Tool execution denied')}
+            </div>
+        );
+    }
+
+    // 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') {
+            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');
+            }
+        } else {
+            switch (mode) {
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny', 'Deny');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-session', 'Deny for this Chat');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-forever', 'Always Deny');
+            }
+        }
+    };
+    // Main button label is always the same as the dropdown label for the selected mode
+    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') {
+            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');
+            }
+        } else {
+            switch (mode) {
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-tooltip', 'Deny this tool call once');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-session-tooltip', 'Deny all calls of this tool for this chat session');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-forever-tooltip', 'Always deny this tool');
+            }
+        }
+    };
+
+    // 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 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`}
+                    onClick={handleMain}
+                >
+                    {mainButtonLabel(type, selectedMode)}
+                </button>
+                <button
+                    className={`theia-button ${type === 'approve' ? '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'}
+                >
+                    <span className={codicon('chevron-down')}></span>
+                </button>
+                {dropdownOpen === type && (
+                    <ul
+                        className="theia-tool-confirmation-dropdown-menu"
+                        onMouseLeave={() => setDropdownOpen(undefined)}
+                    >
+                        {otherModes.map(mode => (
+                            <li
+                                key={mode}
+                                className="theia-tool-confirmation-dropdown-item"
+                                onClick={() => {
+                                    setMode(mode);
+                                    setDropdownOpen(undefined);
+                                }}
+                                title={modeTooltip(type, mode)}
+                            >
+                                {modeLabel(type, mode)}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        );
+    };
+
+    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">
+                <div className="theia-tool-confirmation-name">
+                    <span className="label">{nls.localize('theia/ai/chat-ui/toolconfirmation/tool', 'Tool')}:</span>
+                    <span className="value">{response.name}</span>
+                </div>
+            </div>
+            <div className="theia-tool-confirmation-actions">
+                {renderSplitButton('deny')}
+                {renderSplitButton('approve')}
+            </div>
+        </div>
+    );
+};

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

@@ -15,15 +15,22 @@
 // *****************************************************************************
 
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
-import { injectable } from '@theia/core/shared/inversify';
+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 } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
+import { ToolConfirmation, ToolConfirmationState } from './tool-confirmation';
+import { ToolConfirmationManager, ToolConfirmationMode } from '@theia/ai-chat/lib/browser/chat-tool-preferences';
+import { ResponseNode } from '../chat-tree-view';
 
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
 
+    @inject(ToolConfirmationManager)
+    protected toolConfirmationManager: ToolConfirmationManager;
+
     canHandle(response: ChatResponseContent): number {
         if (ToolCallChatResponseContent.is(response)) {
             return 10;
@@ -31,23 +38,20 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         return -1;
     }
 
-    render(response: ToolCallChatResponseContent): ReactNode {
-        return (
-            <h4 className='theia-toolCall'>
-                {response.finished ? (
-                    <details>
-                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
-                            ({this.renderCollapsibleArguments(response.arguments)})
-                        </summary>
-                        <pre>{this.tryPrettyPrintJson(response)}</pre>
-                    </details>
-                ) : (
-                    <span>
-                        <Spinner /> {nls.localizeByDefault('Running')} {response.name}({this.renderCollapsibleArguments(response.arguments)})
-                    </span>
-                )}
-            </h4>
-        );
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        const chatId = parentNode.sessionId;
+        const confirmationMode = response.name ? this.getToolConfirmationSettings(response.name, chatId) : ToolConfirmationMode.DISABLED;
+        return <ToolCallContent
+            response={response}
+            confirmationMode={confirmationMode}
+            toolConfirmationManager={this.toolConfirmationManager}
+            chatId={chatId}
+            renderCollapsibleArguments={this.renderCollapsibleArguments.bind(this)}
+            tryPrettyPrintJson={this.tryPrettyPrintJson.bind(this)} />;
+    }
+
+    protected getToolConfirmationSettings(responseId: string, chatId: string): ToolConfirmationMode {
+        return this.toolConfirmationManager.getConfirmationMode(responseId, chatId);
     }
 
     protected renderCollapsibleArguments(args: string | undefined): ReactNode {
@@ -97,5 +101,97 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
 }
 
 const Spinner = () => (
-    <i className="fa fa-spinner fa-spin"></i>
+    <span className={codicon('loading')}></span>
 );
+
+interface ToolCallContentProps {
+    response: ToolCallChatResponseContent;
+    confirmationMode: ToolConfirmationMode;
+    toolConfirmationManager: ToolConfirmationManager;
+    chatId: string;
+    renderCollapsibleArguments: (args: string | undefined) => ReactNode;
+    tryPrettyPrintJson: (response: ToolCallChatResponseContent) => string | undefined;
+}
+
+/**
+ * A function component to handle tool call rendering and confirmation
+ */
+const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmationMode, toolConfirmationManager, chatId, tryPrettyPrintJson, renderCollapsibleArguments }) => {
+    const [confirmationState, setConfirmationState] = React.useState<ToolConfirmationState>('waiting');
+
+    React.useEffect(() => {
+        if (confirmationMode === ToolConfirmationMode.YOLO) {
+            response.confirm();
+            setConfirmationState('approved');
+            return;
+        } else if (confirmationMode === ToolConfirmationMode.DISABLED) {
+            response.deny();
+            setConfirmationState('denied');
+            return;
+        }
+        response.confirmed.then(
+            confirmed => {
+                if (confirmed === true) {
+                    setConfirmationState('approved');
+                } else {
+                    setConfirmationState('denied');
+                }
+            }
+        )
+            .catch(() => {
+                setConfirmationState('denied');
+            });
+    }, [response, confirmationMode]);
+
+    const handleApprove = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
+        if (mode === 'forever' && response.name) {
+            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.YOLO);
+        } else if (mode === 'session' && response.name) {
+            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.YOLO, chatId);
+        }
+        response.confirm();
+    }, [response, toolConfirmationManager, chatId]);
+
+    const handleDeny = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
+        if (mode === 'forever' && response.name) {
+            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.DISABLED);
+        } else if (mode === 'session' && response.name) {
+            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.DISABLED, chatId);
+        }
+        response.deny();
+    }, [response, toolConfirmationManager, chatId]);
+
+    return (
+        <div className='theia-toolCall'>
+            <h4>
+                {confirmationState === 'denied' ? (
+                    <span className="theia-tool-denied">
+                        <span className={codicon('error')}></span> {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/denied', 'Execution denied')}: {response.name}
+                    </span>
+                ) : response.finished ? (
+                    <details>
+                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
+                            ({renderCollapsibleArguments(response.arguments)})
+                        </summary>
+                        <pre>{tryPrettyPrintJson(response)}</pre>
+                    </details>
+                ) : (
+                    confirmationState === 'approved' && (
+                        <span>
+                            <Spinner /> {nls.localizeByDefault('Running')} {response.name}
+                        </span>
+                    )
+                )}
+            </h4>
+
+            {/* Show confirmation UI when waiting for approval */}
+            {confirmationState === 'waiting' && (
+                <ToolConfirmation
+                    response={response}
+                    onApprove={handleApprove}
+                    onDeny={handleDeny}
+                />
+            )}
+        </div>
+    );
+};

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

@@ -19,7 +19,7 @@ import { AIChatInputWidget, type AIChatInputConfiguration } from '../chat-input-
 import type { EditableRequestNode } from './chat-view-tree-widget';
 import { URI } from '@theia/core';
 import { CHAT_VIEW_LANGUAGE_EXTENSION } from '../chat-view-language-contribution';
-import type { ChatRequestModel, EditableChatRequestModel } from '@theia/ai-chat';
+import type { ChatRequestModel, EditableChatRequestModel, ChatHierarchyBranch } from '@theia/ai-chat';
 import type { AIVariableResolutionRequest } from '@theia/ai-core';
 import { Key } from '@theia/core/lib/browser';
 
@@ -29,6 +29,10 @@ export interface AIChatTreeInputConfiguration extends AIChatInputConfiguration {
 export const AIChatTreeInputArgs = Symbol('AIChatTreeInputArgs');
 export interface AIChatTreeInputArgs {
     node: EditableRequestNode;
+    /**
+     * The branch of the chat tree for this request node (used by the input widget for state tracking).
+     */
+    branch?: ChatHierarchyBranch;
     initialValue?: string;
     onQuery: (query: string) => Promise<void>;
     onUnpin?: () => void;
@@ -60,6 +64,13 @@ export class AIChatTreeInputWidget extends AIChatInputWidget {
     @postConstruct()
     protected override init(): void {
         super.init();
+        this.updateBranch();
+
+        const request = this.requestNode.request;
+        this.toDispose.push(request.session.onDidChange(() => {
+            this.updateBranch();
+        }));
+
         this.addKeyListener(this.node, Key.ESCAPE, () => {
             this.request.cancelEdit();
         });
@@ -71,6 +82,10 @@ export class AIChatTreeInputWidget extends AIChatInputWidget {
         });
     }
 
+    protected updateBranch(): void {
+        this.branch = this.args.branch ?? this.requestNode.branch;
+    }
+
     protected override getResourceUri(): URI {
         return new URI(`ai-chat:/${this.requestNode.id}-input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
     }

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

@@ -64,7 +64,8 @@ import { AIChatTreeInputFactory, type AIChatTreeInputWidget } from './chat-view-
 // TODO Instead of directly operating on the ChatRequestModel we could use an intermediate view model
 export interface RequestNode extends TreeNode {
     request: ChatRequestModel,
-    branch: ChatHierarchyBranch
+    branch: ChatHierarchyBranch,
+    sessionId: string
 }
 export const isRequestNode = (node: TreeNode): node is RequestNode => 'request' in node;
 
@@ -75,7 +76,8 @@ export const isEditableRequestNode = (node: TreeNode): node is EditableRequestNo
 
 // TODO Instead of directly operating on the ChatResponseModel we could use an intermediate view model
 export interface ResponseNode extends TreeNode {
-    response: ChatResponseModel
+    response: ChatResponseModel,
+    sessionId: string
 }
 export const isResponseNode = (node: TreeNode): node is ResponseNode => 'response' in node;
 
@@ -136,6 +138,10 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     protected isEnabled = false;
 
+    protected chatModelId: string;
+
+    onScrollLockChange?: (temporaryLocked: boolean) => void;
+
     set shouldScrollToEnd(shouldScrollToEnd: boolean) {
         this._shouldScrollToEnd = shouldScrollToEnd;
         this.shouldScrollToRow = this._shouldScrollToEnd;
@@ -178,6 +184,9 @@ export class ChatViewTreeWidget extends TreeWidget {
                     widget.setEnabled(change);
                 });
                 this.update();
+            }),
+            this.onScroll(scrollEvent => {
+                this.handleScrollEvent(scrollEvent);
             })
         ]);
     }
@@ -187,6 +196,27 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.update();
     }
 
+    protected handleScrollEvent(_scrollEvent: unknown): void {
+        // Check if we're at the bottom of the view
+        const isAtBottom = this.isScrolledToBottom();
+
+        // Only handle temporary scroll lock if auto-scroll is currently enabled
+        if (this.shouldScrollToEnd) {
+            if (!isAtBottom) {
+                // User scrolled away from bottom, enable temporary lock
+                this.setTemporaryScrollLock(true);
+            }
+        } else if (isAtBottom) {
+            // User scrolled back to bottom, disable temporary lock
+            this.setTemporaryScrollLock(false);
+        }
+    }
+
+    protected setTemporaryScrollLock(enabled: boolean): void {
+        // Immediately apply scroll lock changes without delay
+        this.onScrollLockChange?.(enabled);
+    }
+
     protected override renderTree(model: TreeModel): React.ReactNode {
         if (!this.isEnabled) {
             return this.renderDisabledMessage();
@@ -214,7 +244,8 @@ export class ChatViewTreeWidget extends TreeWidget {
             get request(): ChatRequestModel {
                 return branch.get();
             },
-            branch
+            branch,
+            sessionId: this.chatModelId
         };
     }
 
@@ -222,7 +253,8 @@ export class ChatViewTreeWidget extends TreeWidget {
         return {
             id: response.id,
             parent: this.model.root as CompositeTreeNode,
-            response
+            response,
+            sessionId: this.chatModelId
         };
     }
 
@@ -292,6 +324,7 @@ export class ChatViewTreeWidget extends TreeWidget {
     protected async recreateModelTree(chatModel: ChatModel): Promise<void> {
         if (CompositeTreeNode.is(this.model.root)) {
             const nodes: TreeNode[] = [];
+            this.chatModelId = chatModel.id;
             chatModel.getBranches().forEach(branch => {
                 const request = branch.get();
                 nodes.push(this.mapRequestToNode(branch));
@@ -426,7 +459,8 @@ export class ChatViewTreeWidget extends TreeWidget {
                             initialValue: editableNode.request.message.request.text,
                             onQuery: async query => {
                                 editableNode.request.submitEdit({ text: query });
-                            }
+                            },
+                            branch: editableNode.branch
                         });
 
                         this.chatInputs.set(editableNode.id, widget);

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

@@ -13,7 +13,7 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { CommandService, deepClone, Emitter, Event, MessageService } from '@theia/core';
+import { CommandService, deepClone, Emitter, Event, MessageService, URI } from '@theia/core';
 import { ChatRequest, ChatRequestModel, ChatService, ChatSession, isActiveSessionChangedEvent, MutableChatModel } from '@theia/ai-chat';
 import { BaseWidget, codicon, ExtractableWidget, Message, PanelLayout, PreferenceService, StatefulWidget } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common/nls';
@@ -28,6 +28,7 @@ import { FrontendVariableService } from '@theia/ai-core/lib/browser';
 export namespace ChatViewWidget {
     export interface State {
         locked?: boolean;
+        temporaryLocked?: boolean;
     }
 }
 
@@ -60,7 +61,7 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
 
     protected chatSession: ChatSession;
 
-    protected _state: ChatViewWidget.State = { locked: false };
+    protected _state: ChatViewWidget.State = { locked: false, temporaryLocked: false };
     protected readonly onStateChangedEmitter = new Emitter<ChatViewWidget.State>();
 
     secondaryWindow: Window | undefined;
@@ -87,7 +88,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
             this.treeWidget,
             this.inputWidget,
             this.onStateChanged(newState => {
-                this.treeWidget.shouldScrollToEnd = !newState.locked;
+                const shouldScrollToEnd = !newState.locked && !newState.temporaryLocked;
+                this.treeWidget.shouldScrollToEnd = shouldScrollToEnd;
                 this.update();
             })
         ]);
@@ -107,6 +109,7 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.inputWidget.onDeleteChangeSet = this.onDeleteChangeSet.bind(this);
         this.inputWidget.onDeleteChangeSetElement = this.onDeleteChangeSetElement.bind(this);
         this.treeWidget.trackChatModel(this.chatSession.model);
+        this.treeWidget.onScrollLockChange = this.onScrollLockChange.bind(this);
 
         this.initListeners();
 
@@ -161,6 +164,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         if (oldState.locked) {
             copy.locked = oldState.locked;
         }
+        // Don't restore temporary lock state as it should reset on restart
+        copy.temporaryLocked = false;
         this.state = copy;
     }
 
@@ -210,16 +215,27 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.chatService.deleteChangeSet(sessionId);
     }
 
-    protected onDeleteChangeSetElement(sessionId: string, index: number): void {
-        this.chatService.deleteChangeSetElement(sessionId, index);
+    protected onDeleteChangeSetElement(sessionId: string, uri: URI): void {
+        this.chatService.deleteChangeSetElement(sessionId, uri);
+    }
+
+    protected onScrollLockChange(temporaryLocked: boolean): void {
+        this.setTemporaryLock(temporaryLocked);
     }
 
     lock(): void {
-        this.state = { ...deepClone(this.state), locked: true };
+        this.state = { ...deepClone(this.state), locked: true, temporaryLocked: false };
     }
 
     unlock(): void {
-        this.state = { ...deepClone(this.state), locked: false };
+        this.state = { ...deepClone(this.state), locked: false, temporaryLocked: false };
+    }
+
+    setTemporaryLock(locked: boolean): void {
+        // Only set temporary lock if not permanently locked
+        if (!this.state.locked) {
+            this.state = { ...deepClone(this.state), temporaryLocked: locked };
+        }
     }
 
     get isLocked(): boolean {