@theia/ai-chat-ui 1.76.0-next.7 → 1.76.0

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

@@ -28,8 +28,8 @@ import {
 import { mergeReasoningSettings } from '@theia/ai-core/lib/browser/frontend-language-model-service';
 import { ChangeSetDecoratorService } from '@theia/ai-chat/lib/browser/change-set-decorator-service';
 import { ImageContextVariable } from '@theia/ai-chat/lib/common/image-context-variable';
-import { AI_SHOW_SETTINGS_COMMAND, FrontendVariableService, AIActivationService } from '@theia/ai-core/lib/browser';
-import { AISettingsService, PromptService } from '@theia/ai-core/lib/common';
+import { AI_SHOW_SETTINGS_COMMAND, AIActivationService, FavoriteModelsService, FrontendVariableService } from '@theia/ai-core/lib/browser';
+import { AISettingsService, groupModelsByProvider, LanguageModelAliasRegistry, PromptService } from '@theia/ai-core/lib/common';
 import { CommandService, DisposableCollection, Emitter, InMemoryResources, MessageService, URI, nls, Disposable, ILogger } from '@theia/core';
 import { ContextMenuRenderer, HoverService, LabelProvider, Message, OpenerService, ReactWidget } from '@theia/core/lib/browser';
 import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
@@ -39,15 +39,15 @@ import { KeybindingRegistry } from '@theia/core/lib/browser/keybinding';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable, optional, postConstruct, named } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
-import { IMouseEvent, Range } from '@theia/monaco-editor-core';
+import { IMouseEvent, IPosition } from '@theia/monaco-editor-core';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
 import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { ChangeSetActionRenderer, ChangeSetActionService } from './change-set-actions/change-set-action-service';
 import { ChatInputAgentSuggestions } from './chat-input-agent-suggestions';
+import { computeRevealScrollDelta } from './chat-input-scroll-util';
 import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
 import { ContextVariablePicker } from './context-variable-picker';
 import { TASK_CONTEXT_VARIABLE } from '@theia/ai-chat/lib/browser/task-context-variable';
-import { IModelDeltaDecoration } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
 import { EditorOption } from '@theia/monaco-editor-core/esm/vs/editor/common/config/editorOptions';
 import { SuggestController } from '@theia/monaco-editor-core/esm/vs/editor/contrib/suggest/browser/suggestController';
 import { ChatInputHistoryService, ChatInputNavigationState } from './chat-input-history';
@@ -84,6 +84,13 @@ type DeleteChangeSet = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSetElement = (requestModel: ChatRequestModel, index: number) => void;
 type OpenContextElement = (request: AIVariableResolutionRequest) => unknown;
 
+/**
+ * Id of the Models category of the AI Configuration view (`AiConfigurationCategoryId.MODELS`), used to
+ * open it from the model selector. Not imported: that id is declared in `@theia/ai-core-ui`, which this
+ * package does not depend on.
+ */
+const AI_CONFIGURATION_MODELS_CATEGORY_ID = 'models';
+
 export const AIChatInputConfiguration = Symbol('AIChatInputConfiguration');
 export interface AIChatInputConfiguration {
     showContext?: boolean;
@@ -182,6 +189,12 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(FrontendLanguageModelRegistry)
     protected readonly languageModelRegistry: FrontendLanguageModelRegistry;
 
+    @inject(FavoriteModelsService)
+    protected readonly favoriteModels: FavoriteModelsService;
+
+    @inject(LanguageModelAliasRegistry)
+    protected readonly aliasRegistry: LanguageModelAliasRegistry;
+
     @inject(PreferenceService) @optional()
     protected readonly preferenceService: PreferenceService | undefined;
 
@@ -313,21 +326,20 @@ export class AIChatInputWidget extends ReactWidget {
      * Resolves the reasoning level to display in the selector. Priority: session override →
      * persisted per-agent selection (from {@link AISettingsService}) →
      * `ai-features.reasoning.defaults` preference entry matching the current model/agent →
-     * model's declared default → `'off'`.
+     * model's declared default → `'off'`. The result is clamped to the model's supported levels, matching
+     * what the frontend language model service sends.
      */
     protected getCurrentReasoningLevel(): ReasoningLevel | undefined {
         if (!this.currentReasoningSupport) {
             return undefined;
         }
         const session = this.chatService.getSessions().find(s => s.model.id === this._chatModel?.id);
-        const sessionLevel = session?.model.settings?.commonSettings?.reasoning?.level;
-        if (sessionLevel) {
-            return sessionLevel;
-        }
-        if (this.savedReasoning?.level) {
-            return this.savedReasoning.level;
-        }
-        return this.resolvePreferenceReasoningLevel() ?? this.currentReasoningSupport.defaultLevel ?? 'off';
+        const level = session?.model.settings?.commonSettings?.reasoning?.level
+            ?? this.savedReasoning?.level
+            ?? this.resolvePreferenceReasoningLevel()
+            ?? this.currentReasoningSupport.defaultLevel
+            ?? 'off';
+        return ReasoningSupport.clampLevel(this.currentReasoningSupport, level);
     }
 
     protected resolvePreferenceReasoningLevel(): ReasoningLevel | undefined {
@@ -586,6 +598,17 @@ export class AIChatInputWidget extends ReactWidget {
         return session?.model.settings?.commonSettings?.modelId;
     }
 
+    /**
+     * Opens the Models page of the AI Configuration view, which is where the models this list shows are
+     * chosen. The target is the id of that view's Models category (`AiConfigurationCategoryId.MODELS`),
+     * passed as a string because this package does not depend on the package that declares it.
+     */
+    protected openModelConfiguration = (): void => {
+        this.commandService.executeCommand(AI_SHOW_SETTINGS_COMMAND.id, AI_CONFIGURATION_MODELS_CATEGORY_ID).catch(error => {
+            this.logger.error(`Failed to execute '${AI_SHOW_SETTINGS_COMMAND.id}' from the model selector`, error);
+        });
+    };
+
     /** Sets (or clears, with `undefined`) the per-session model override for the active session. */
     protected handleSessionModelChange = (modelId: string | undefined): void => {
         const session = this.chatService.getSessions().find(s => s.model.id === this._chatModel?.id);
@@ -609,16 +632,27 @@ export class AIChatInputWidget extends ReactWidget {
         this.update();
     };
 
+    /**
+     * The models the selector offers: the favorites, i.e. the newest models of each provider plus
+     * whatever the user starred, and the session's own model even when it is neither. Discovery
+     * registers every release a provider offers, which is a list far too long to pick from here; the
+     * provider's page in the AI Configuration view is where the rest can be browsed and starred.
+     */
+    protected getSelectableModels(currentModelId: string | undefined): LanguageModel[] {
+        return this.availableModels.filter(model => this.favoriteModels.isFavorite(model.id) || model.id === currentModelId);
+    }
+
     /** Builds the props for the per-session model selector. */
     protected getModelSelectorProps(): ModelSelectorWidgetProps {
         const currentModelId = this.getSessionModelOverride();
         const defaultLabel = this.resolvedDefaultLabel
             ?? nls.localize('theia/ai/chat-ui/agentDefaultModel', 'agent default');
         return {
-            models: this.availableModels,
+            models: this.getSelectableModels(currentModelId),
             currentModelId,
             defaultLabel,
             onModelChange: this.handleSessionModelChange,
+            onConfigure: this.openModelConfiguration,
         };
     }
 
@@ -1113,6 +1147,14 @@ export class AIChatInputWidget extends ReactWidget {
                 this.updateReasoningSupport(this.receivingAgent.agentId);
             }
         }));
+        this.toDispose.push(this.favoriteModels.onDidChange(() => this.update()));
+        // An agent's default is usually an alias, so editing which model the alias points at changes what
+        // "Default" resolves to and with it the model-dependent state. The registry's own change event
+        // does not cover this: the models it holds are the same ones, only the alias moved.
+        this.toDispose.push(this.aliasRegistry.onDidChange(() => {
+            this.updateResolvedDefaultModel();
+            this.updateReasoningSupport(this.receivingAgent?.agentId);
+        }));
         // When the agent's model is changed in the AI configuration, refresh the selector's resolved
         // default and the model-dependent state (reasoning support, context size, server tools, vendor).
         this.toDispose.push(this.aiSettingsService.onDidChange(() => {
@@ -1849,6 +1891,8 @@ interface ModelSelectorWidgetProps {
     defaultLabel: string;
     /** Set the session override (or clear it with `undefined`). */
     onModelChange: (modelId: string | undefined) => void;
+    /** Opens the page that decides which models this list shows. */
+    onConfigure: () => void;
 }
 
 interface ChatInputProperties {
@@ -2074,37 +2118,28 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 props.contextMenuCallback(e.event)
             );
 
-            const updateLineCounts = () => {
-                // We need the line numbers to allow scrolling by using the keyboard
-                const model = editor.getControl().getModel()!;
-                const lineCount = model.getLineCount();
-                const decorations: IModelDeltaDecoration[] = [];
-
-                for (let lineNumber = 1; lineNumber <= lineCount; lineNumber++) {
-                    decorations.push({
-                        range: new Range(lineNumber, 1, lineNumber, 1),
-                        options: {
-                            description: `line-number-${lineNumber}`,
-                            isWholeLine: false,
-                            className: `line-number-${lineNumber}`,
-                        }
-                    });
+            // The editor is laid out at its full content height and the surrounding container
+            // scrolls, so Monaco cannot reveal the cursor itself. Scroll the container to the
+            // visual row of the cursor; for wrapped lines this differs from the start of the model line.
+            // `getTopForPosition` is content-absolute, so subtract the editor's own scroll offset,
+            // which is non-zero while `automaticLayout` has the editor laid out at a clamped height.
+            const revealCursor = (position: IPosition) => {
+                const container = editorContainerRef.current;
+                const control = editor.getControl();
+                const editorNode = control.getDomNode();
+                if (!container || !editorNode) {
+                    return;
+                }
+                const rowTop = editorNode.getBoundingClientRect().top - container.getBoundingClientRect().top
+                    + control.getTopForPosition(position.lineNumber, position.column) - control.getScrollTop();
+                const rowBottom = rowTop + control.getOption(EditorOption.lineHeight);
+                const delta = computeRevealScrollDelta(rowTop, rowBottom, container.clientHeight);
+                if (delta !== 0) {
+                    container.scrollTop += delta;
                 }
-
-                const lineNumbers = model.getAllDecorations().filter(predicate => predicate.options.description?.startsWith('line-number-'));
-                editor.getControl().removeDecorations(lineNumbers.map(d => d.id));
-                editor.getControl().createDecorationsCollection(decorations);
             };
 
-            editor.getControl().getModel()?.onDidChangeContent(() => {
-                updateLineCounts();
-            });
-
-            editor.getControl().onDidChangeCursorPosition(e => {
-                const lineNumber = e.position.lineNumber;
-                const line = editor.getControl().getDomNode()?.querySelector(`.line-number-${lineNumber}`);
-                line?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
-            });
+            editor.getControl().onDidChangeCursorPosition(e => revealCursor(e.position));
 
             editorRef.current = editor;
             props.setEditorRef(editor);
@@ -2112,8 +2147,6 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             if (props.initialValue) {
                 setValue(props.initialValue);
             }
-
-            updateLineCounts();
         };
         createInputElement();
 
@@ -2609,6 +2642,7 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({
                         currentModelId={modelSelectorProps.currentModelId}
                         defaultLabel={modelSelectorProps.defaultLabel}
                         onModelChange={modelSelectorProps.onModelChange}
+                        onConfigure={modelSelectorProps.onConfigure}
                         disabled={!isEnabled}
                         hoverService={hoverService}
                     />
@@ -2777,6 +2811,8 @@ interface ChatModelSelectorProps {
     currentModelId?: string;
     defaultLabel: string;
     onModelChange: (modelId: string | undefined) => void;
+    /** Opens the page that decides which models this list shows. */
+    onConfigure: () => void;
     disabled?: boolean;
     hoverService: HoverService;
 }
@@ -2784,33 +2820,51 @@ interface ChatModelSelectorProps {
 /**
  * Per-session model selector. The first option ("Default") reverts to the agent's configured
  * model that new sessions use; picking any other model overrides it for the current session only.
+ *
+ * It lists the models marked for it rather than every model a provider offers, and ends with the way
+ * to change that, so a list this short is not mistaken for all there is.
  */
 const ChatModelSelector: React.FunctionComponent<ChatModelSelectorProps> = React.memo(({
-    models, currentModelId, defaultLabel, onModelChange, disabled, hoverService
+    models, currentModelId, defaultLabel, onModelChange, onConfigure, disabled, hoverService
 }) => {
     // Sentinel value for the "use the agent default" option (SelectComponent needs a non-empty value).
     const defaultValueId = '__default__';
+    // …and for the entry that opens the configuration instead of selecting anything.
+    const configureValueId = '__configure__';
+    // Picking the configure entry leaves the model as it was, but the select has already taken it as its
+    // selection; remounting it puts the session's own model back in the field.
+    const [selectorGeneration, setSelectorGeneration] = React.useState(0);
     const isOverridden = !!currentModelId;
     // The override points at a model that is no longer ready/available. Guard on a loaded model list so
     // the override is not flagged as unavailable during the initial (still empty) load.
     const isUnavailable = isOverridden && models.length > 0
         && !models.some(model => model.id === currentModelId && model.status.status === 'ready');
     const options: SelectOption[] = React.useMemo(() => {
-        const readyModels = models.filter(model => model.status.status === 'ready')
-            // Stable, predictable order: the registry adds models as their async metadata resolves.
-            .sort((left, right) => left.id.localeCompare(right.id));
         const opts: SelectOption[] = [
             {
                 value: defaultValueId,
                 label: nls.localizeByDefault('Default'),
                 detail: defaultLabel
-            },
-            ...readyModels.map(model => ({
+            }
+        ];
+        // A rule between the providers, their models newest first: the models of one provider belong
+        // together, and the registry adds them in whatever order their metadata resolves. Models whose
+        // provider reports no release date fall back to alphabetical.
+        groupModelsByProvider(models.filter(model => model.status.status === 'ready')).forEach(({ models: providerModels }) => {
+            opts.push({ separator: true });
+            opts.push(...providerModels.map(model => ({
                 value: model.id,
                 label: model.id,
                 detail: model.name && model.name !== model.id ? model.name : undefined
-            }))
-        ];
+            })));
+        });
+        // The list is deliberately short — it holds the models marked for it, not every model a provider
+        // offers — so it says where the rest are rather than leaving the absence to be puzzled over.
+        opts.push({ separator: true });
+        opts.push({
+            value: configureValueId,
+            label: nls.localize('theia/ai/chat-ui/manageModels', 'Manage models…')
+        });
         // Keep the active override visible even if its model is no longer ready/available, so the
         // selector reflects the stored modelId instead of silently falling back to "Default". Once we
         // know it is unavailable, show it as a disabled (struck-through) entry that cannot be reselected.
@@ -2826,8 +2880,15 @@ const ChatModelSelector: React.FunctionComponent<ChatModelSelectorProps> = React
     }, [models, defaultLabel, currentModelId, isUnavailable]);
 
     const handleChange = React.useCallback(
-        (option: SelectOption) => onModelChange(!option.value || option.value === defaultValueId ? undefined : option.value),
-        [onModelChange]
+        (option: SelectOption) => {
+            if (option.value === configureValueId) {
+                setSelectorGeneration(generation => generation + 1);
+                onConfigure();
+                return;
+            }
+            onModelChange(!option.value || option.value === defaultValueId ? undefined : option.value);
+        },
+        [onModelChange, onConfigure]
     );
 
     const title = isUnavailable
@@ -2839,6 +2900,7 @@ const ChatModelSelector: React.FunctionComponent<ChatModelSelectorProps> = React
     return (
         <span className='theia-ChatInput-ModelSelector-container' onMouseEnter={hoverHandler(hoverService, title)}>
             <SelectComponent
+                key={selectorGeneration}
                 className={`theia-ChatInput-ModelSelector${isOverridden ? ' session-override' : ''}${disabled ? ' disabled' : ''}`}
                 options={options}
                 defaultValue={currentModelId ?? defaultValueId}
@@ -2885,7 +2947,7 @@ const ReasoningSelector: React.FunctionComponent<ReasoningSelectorProps> = React
     );
 
     const title = nls.localizeByDefault('Reasoning');
-    const effectiveLevel = currentLevel ?? reasoningSupport.defaultLevel ?? reasoningSupport.supportedLevels[0] ?? 'off';
+    const effectiveLevel = ReasoningSupport.clampLevel(reasoningSupport, currentLevel ?? reasoningSupport.defaultLevel ?? 'off');
 
     return (
         <span onMouseEnter={hoverHandler(hoverService, title)}>
@@ -3030,7 +3092,7 @@ function toUiElement(element: ChangeSetElement,
 }
 
 const ChangeSetElement: React.FC<ChangeSetUIElement> = element => (
-    <li title={nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff')} onClick={() => element.openChange?.()}>
+    <li title={nls.localizeByDefault('Open Diff')} onClick={() => element.openChange?.()}>
         <div className={`theia-ChatInput-ChangeSet-Icon ${element.iconClass}`}>
         </div>
         <div className='theia-ChatInput-ChangeSet-labelParts'>

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

@@ -32,6 +32,7 @@ import { MonacoLanguages } from '@theia/monaco/lib/browser/monaco-languages';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { ChatViewTreeWidget, ResponseNode } from '../chat-tree-view/chat-view-tree-widget';
 import { IMouseEvent } from '@theia/monaco-editor-core';
+import { CodeWrapperEditors } from './code-wrapper-editors';
 
 export const CodePartRendererAction = Symbol('CodePartRendererAction');
 /**
@@ -249,11 +250,18 @@ export const CodeWrapper = (props: {
         editor.document.textEditorModel.setValue(props.content);
         editor.getControl().onContextMenu(e => props.contextMenuCallback(e.event));
         editorRef.current = editor;
+        if (ref.current) {
+            CodeWrapperEditors.set(ref.current, editor);
+        }
     };
 
     React.useEffect(() => {
         createInputElement();
+        const element = ref.current;
         return () => {
+            if (element) {
+                CodeWrapperEditors.remove(element);
+            }
             if (editorRef.current) {
                 editorRef.current.dispose();
             }
@@ -268,5 +276,5 @@ export const CodeWrapper = (props: {
 
     editorRef.current?.resizeToFit();
 
-    return <div className='theia-CodeWrapper' ref={ref}></div>;
+    return <div className={CodeWrapperEditors.CLASS} ref={ref}></div>;
 };

package/src/browser/chat-response-renderer/code-wrapper-editors.ts

@@ -0,0 +1,41 @@
+// *****************************************************************************
+// Copyright (C) 2026 Safi Seid-Ahmad, K2view and others.
+//
+// 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 { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
+
+const editors = new WeakMap<Element, SimpleMonacoEditor>();
+
+/**
+ * The Monaco editors that code parts render into, keyed by their `.theia-CodeWrapper` element, so features that
+ * work on the chat DOM (e.g. find in chat) can reach the editor that renders a code block.
+ */
+export namespace CodeWrapperEditors {
+
+    export const CLASS = 'theia-CodeWrapper';
+
+    /** The editor rendered into `element`, once it has been created. */
+    export function get(element: Element): SimpleMonacoEditor | undefined {
+        return editors.get(element);
+    }
+
+    export function set(element: Element, editor: SimpleMonacoEditor): void {
+        editors.set(element, editor);
+    }
+
+    export function remove(element: Element): void {
+        editors.delete(element);
+    }
+}

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

@@ -148,11 +148,6 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
     }
 }
 
-interface PendingInteraction {
-    contentPart: InteractiveContent & ChatResponseContent;
-    id: string;
-}
-
 interface DelegatedChatProps {
     invocation?: ChatRequestInvocation;
     agentName: string;
@@ -167,20 +162,18 @@ interface DelegatedChatProps {
 interface DelegatedChatState {
     node?: ResponseNode;
     isOpen: boolean;
-    pendingInteractions: PendingInteraction[];
 }
 
 class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatState> {
     private widget: ReturnType<SubChatWidgetFactory>;
     private toDispose = new DisposableCollection();
-    private trackedInteractionIds = new Set<string>();
+    private unmounted = false;
 
     constructor(props: DelegatedChatProps) {
         super(props);
         this.state = {
             node: undefined,
-            isOpen: false,
-            pendingInteractions: []
+            isOpen: false
         };
         this.widget = props.subChatWidgetFactory();
     }
@@ -198,72 +191,64 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
     private subscribeToInvocation(invocation?: ChatRequestInvocation): void {
         this.toDispose.dispose();
         this.toDispose = new DisposableCollection();
-        this.trackedInteractionIds.clear();
         if (!invocation) {
             return;
         }
 
         invocation.responseCreated.then(chatModel => {
+            // Guard against continuations of a superseded invocation or an unmounted
+            // component: they would show the old model's node and register listeners
+            // into an already-disposed collection (which silently keeps them alive).
+            if (this.unmounted || invocation !== this.props.invocation) {
+                return;
+            }
             const node = mapResponseToNode(chatModel, this.props.parentNode);
             this.setState({ node });
 
-            const changeListener = () => {
-                this.removeResolvedInteractions();
-                this.forceUpdate();
-            };
-            this.toDispose.push(chatModel.onDidChange(changeListener));
-
-            // Subscribe to interactionNeeded for push-based interaction tracking
-            this.toDispose.push(chatModel.onInteractionNeeded(contentPart => {
-                const id = contentPart.interactionId;
-                if (id && !this.trackedInteractionIds.has(id)
-                    && this.findConfirmationRenderer(contentPart)) {
-                    this.trackedInteractionIds.add(id);
-                    this.setState(prevState => ({
-                        pendingInteractions: [
-                            ...prevState.pendingInteractions,
-                            { contentPart, id }
-                        ]
-                    }));
-                }
-            }));
+            this.toDispose.push(chatModel.onDidChange(() => this.forceUpdate()));
+            // Pending interactions are derived from chatModel.pendingInteractions in
+            // render(); interactionNeeded does not imply onDidChange, so re-render
+            // explicitly when a new interaction is announced (#17952).
+            this.toDispose.push(chatModel.onInteractionNeeded(() => this.forceUpdate()));
         }).catch(error => {
             console.error('Failed to create delegated chat response:', error);
         });
 
         invocation.responseCompleted.then(() => {
-            this.forceUpdate();
+            if (!this.unmounted) {
+                this.forceUpdate();
+            }
         }).catch(error => {
             console.error('Error in delegated chat response completion:', error);
-            this.forceUpdate();
+            if (!this.unmounted) {
+                this.forceUpdate();
+            }
         });
     }
 
     override componentWillUnmount(): void {
+        this.unmounted = true;
         this.toDispose.dispose();
-        this.trackedInteractionIds.clear();
-    }
-
-    private removeResolvedInteractions(): void {
-        this.setState(prevState => ({
-            pendingInteractions: prevState.pendingInteractions.filter(p => !p.contentPart.isResolved)
-        }));
     }
 
+    /**
+     * The highest-priority renderer that implements renderConfirmation. Unlike plain
+     * rendering, this must not stop at the overall highest-priority renderer: a
+     * specialized renderer without renderConfirmation (e.g. the delegation renderer
+     * itself for nested delegations) would otherwise silently drop the interaction.
+     */
     private findConfirmationRenderer(contentPart: ChatResponseContent): ChatResponsePartRenderer<ChatResponseContent> | undefined {
-        const renderer = this.props.chatResponsePartRenderers.getContributions().reduce<[number, ChatResponsePartRenderer<ChatResponseContent> | undefined]>(
-            (prev, current) => {
-                const prio = current.canHandle(contentPart);
-                if (prio > prev[0]) {
-                    return [prio, current];
-                }
-                return prev;
-            },
-            [-1, undefined])[1];
-        if (renderer && renderer.renderConfirmation) {
-            return renderer;
-        }
-        return undefined;
+        return this.props.chatResponsePartRenderers.getContributions()
+            .filter(renderer => renderer.renderConfirmation)
+            .reduce<[number, ChatResponsePartRenderer<ChatResponseContent> | undefined]>(
+                (prev, current) => {
+                    const prio = current.canHandle(contentPart);
+                    if (prio > prev[0]) {
+                        return [prio, current];
+                    }
+                    return prev;
+                },
+                [-1, undefined])[1];
     }
 
     private handleToggle = (event: React.SyntheticEvent<HTMLDetailsElement>): void => {
@@ -271,10 +256,43 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
         this.setState({ isOpen: details.open });
     };
 
-    private renderInteractionConfirmation(contentPart: ChatResponseContent, id: string): React.ReactNode {
+    /**
+     * Clicking anywhere inside a <summary> toggles the <details> element by default,
+     * which would collapse/expand the block while the user operates the inline
+     * interaction UI. Suppress the toggle for such clicks — but keep nested
+     * <summary> elements working (e.g. the argument expanders of a confirmation
+     * card), whose own toggle is also the click's default action.
+     */
+    private preventSummaryToggle = (event: React.MouseEvent): void => {
+        const target = event.target instanceof HTMLElement ? event.target : undefined;
+        const closestSummary = target?.closest('summary');
+        if (closestSummary && event.currentTarget.contains(closestSummary)) {
+            return;
+        }
+        event.preventDefault();
+    };
+
+    private renderPendingInteractions(pendingInteractions: ReadonlyArray<InteractiveContent & ChatResponseContent>): React.ReactNode[] {
+        // Key by interactionId so a sibling interaction resolving does not remount the
+        // remaining ones (losing in-progress wizard state); disambiguate the rare
+        // duplicate ids (e.g. two pending questions with identical text) by occurrence.
+        const seenIds = new Map<string, number>();
+        return pendingInteractions.map(contentPart => {
+            const baseKey = contentPart.interactionId ?? 'interaction';
+            const occurrence = seenIds.get(baseKey) ?? 0;
+            seenIds.set(baseKey, occurrence + 1);
+            return this.renderInteractionConfirmation(contentPart, occurrence === 0 ? baseKey : `${baseKey}-${occurrence}`);
+        });
+    }
+
+    private renderInteractionConfirmation(contentPart: InteractiveContent & ChatResponseContent, key: string): React.ReactNode {
         const renderer = this.findConfirmationRenderer(contentPart);
         if (renderer && this.state.node) {
-            return <React.Fragment key={id}>{renderer.renderConfirmation!(contentPart, this.state.node)}</React.Fragment>;
+            return (
+                <React.Fragment key={key}>
+                    {renderer.renderConfirmation!(contentPart, this.state.node)}
+                </React.Fragment>
+            );
         }
         return undefined;
     }
@@ -285,6 +303,12 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
         const isComplete = this.state.node?.response.isComplete ?? false;
         const isCanceled = this.state.node?.response.isCanceled ?? false;
         const isError = this.state.node?.response.isError ?? false;
+        // Derived from the model on every render so pending interactions survive
+        // remounts and never outlive their resolution or the response (#17952). The
+        // list also covers interactions bubbled up from nested delegations, whose
+        // waiting state is not reflected in this response's isWaitingForInput.
+        const pendingInteractions = this.state.node?.response.pendingInteractions ?? [];
+        const isWaitingForInput = (this.state.node?.response.isWaitingForInput ?? false) || pendingInteractions.length > 0;
 
         let statusIcon = '';
         let statusText = '';
@@ -292,12 +316,16 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
             if (isCanceled) {
                 statusIcon = 'codicon-close';
                 statusText = nls.localize('theia/ai/chat-ui/delegation-response-renderer/status/canceled', 'canceled');
-            } else if (isComplete) {
-                statusIcon = 'codicon-check';
-                statusText = nls.localizeByDefault('completed');
             } else if (isError) {
+                // error() also marks the response complete, so check isError first
                 statusIcon = 'codicon-error';
                 statusText = nls.localizeByDefault('error');
+            } else if (isComplete) {
+                statusIcon = 'codicon-check';
+                statusText = nls.localizeByDefault('completed');
+            } else if (isWaitingForInput) {
+                statusIcon = 'codicon-loading';
+                statusText = nls.localize('theia/ai/chat-ui/delegation-response-renderer/status/waitingForInput', 'waiting for input');
             } else {
                 statusIcon = 'codicon-loading';
                 statusText = nls.localize('theia/ai/chat-ui/delegation-response-renderer/status/generating', 'generating...');
@@ -310,7 +338,7 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
             statusText = nls.localize('theia/ai/chat-ui/delegation-response-renderer/status/starting', 'starting...');
         }
 
-        const { isOpen, pendingInteractions } = this.state;
+        const { isOpen } = this.state;
         const showInteractionsInSummary = !isOpen && pendingInteractions.length > 0;
 
         return (
@@ -336,10 +364,8 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
                             <span className={`delegation-toggle-arrow${isOpen ? ' open' : ''}`} />
                         </div>
                         {showInteractionsInSummary && (
-                            <div className='delegation-pending-confirmations'>
-                                {pendingInteractions.map(({ contentPart, id }) =>
-                                    this.renderInteractionConfirmation(contentPart, id)
-                                )}
+                            <div className='delegation-pending-confirmations' onClick={this.preventSummaryToggle}>
+                                {this.renderPendingInteractions(pendingInteractions)}
                             </div>
                         )}
                     </summary>