fix(toolcard): preserve AskUserQuestion draft state

- Keep unsubmitted answers, custom input, and submission state scoped by
  device surface, session, and tool call across chat switches.
- Clear drafts when pending mailboxes, sessions, or device surfaces are
  removed to prevent stale interaction state.
- Deselect blank Other answers and filter empty custom values before
  submission so models receive only meaningful selections.
- Add regression coverage for remount restoration, cleanup, isolation,
  and multi-select payloads.

Author: wsp1911

src/web-ui/src/flow_chat/store/FlowChatStore.test.ts

@@ -11,6 +11,10 @@ import { startupTrace } from '@/shared/utils/startupTrace';
 import { projectEffectiveToolItem } from '../utils/toolInvocationIdentity';
 import { dispatchJobStore } from '@/features/dispatch/dispatchJobStore';
 import { resetLiveSessionInteractionStoreForTest } from '../services/liveSessionInteractionStore';
+import {
+  askUserQuestionDraftKey,
+  askUserQuestionDraftStore,
+} from './askUserQuestionDraftStore';
 
 const apiMocks = vi.hoisted(() => ({
   listSessions: vi.fn(),
@@ -164,6 +168,7 @@ const resetStore = () => {
     activeSessionId: null,
   }));
   dispatchJobStore.getState().clear();
+  askUserQuestionDraftStore.setState({ drafts: {} });
   resetLiveSessionInteractionStoreForTest();
   flowChatStore.registerPersistUnreadCompletionCallback(() => {});
 };
@@ -1969,6 +1974,56 @@ describe('FlowChatStore historical session hydration state', () => {
     ).toEqual([]);
   });
 
+  it('clears an unsubmitted question draft when an authoritative mailbox removes the tool', () => {
+    flowChatStore.setState(() => ({
+      sessions: new Map([[
+        'history-1',
+        createSession({
+          sessionId: 'history-1',
+          dialogTurns: [{
+            id: 'turn-live',
+            sessionId: 'history-1',
+            userMessage: { id: 'user-live', content: 'ask me', timestamp: 1 },
+            modelRounds: [],
+            status: 'processing',
+            startTime: 1,
+          }],
+        }),
+      ]]),
+      activeSessionId: 'history-1',
+    }));
+
+    const pendingQuestion = {
+      toolId: 'ask-tool-1',
+      sessionId: 'history-1',
+      dialogTurnId: 'turn-live',
+      modelRoundId: 'round-question',
+      questions: {
+        questions: [{
+          question: 'Which verification should run?',
+          header: 'Verification',
+          options: [{ label: 'Focused', description: 'Run focused checks.' }],
+        }],
+      },
+      registeredAtMs: 3,
+    };
+
+    expect(flowChatStore.reconcilePendingUserQuestions('history-1', {
+      revision: 1,
+      questions: [pendingQuestion],
+    })).toBe(true);
+
+    const draftKey = askUserQuestionDraftKey('history-1', 'ask-tool-1');
+    askUserQuestionDraftStore.getState().setSingleAnswer(draftKey, 0, 'Focused');
+    expect(askUserQuestionDraftStore.getState().drafts[draftKey]).toBeDefined();
+
+    expect(flowChatStore.reconcilePendingUserQuestions('history-1', {
+      revision: 2,
+      questions: [],
+    })).toBe(true);
+    expect(askUserQuestionDraftStore.getState().drafts[draftKey]).toBeUndefined();
+  });
+
   it('acquires an empty current-Turn base for Runtime event replay before applying interactions', async () => {
     peerModeFlagMock.active = true;
     const pendingQuestion = {

src/web-ui/src/flow_chat/store/FlowChatStore.ts

@@ -96,6 +96,7 @@ import { sessionMatchesWorkspace } from '../utils/workspaceScope';
 import { resolveThreadGoalUserMessageDisplay } from '../utils/threadGoalDisplay';
 import { cleanRemoteUserInput } from '../utils/userInputText';
 import { useBackgroundSubagentActivityStore } from './backgroundSubagentActivityStore';
+import { askUserQuestionDraftStore } from './askUserQuestionDraftStore';
 import { sessionComposerStore } from './sessionComposerStore';
 import { completeSessionMutationReconciliation } from './sessionMutationStore';
 import { recordHistorySessionDiagnosticEvent } from '../services/historySessionDiagnostics';
@@ -5084,6 +5085,7 @@ export class FlowChatStore {
 
     const removedSessionIds = this.removeSession(sessionId, options);
     sessionComposerStore.getState().removeDrafts(removedSessionIds);
+    askUserQuestionDraftStore.getState().removeSessionDrafts(removedSessionIds);
     this.pendingRemoveSessionOptions.delete(sessionId);
   }
 
@@ -5315,6 +5317,7 @@ export class FlowChatStore {
       : [];
     this.surfaceContainers.delete(surfaceId);
     sessionComposerStore.getState().removeSurfaceDrafts(surfaceId);
+    askUserQuestionDraftStore.getState().removeSurfaceDrafts(surfaceId);
     this.forgetSurfaceMetadataRequests(surfaceId);
 
     for (const [requestKey, request] of this.fullHistoryHydrationRequests) {
@@ -7472,6 +7475,7 @@ export class FlowChatStore {
         ? restored.interactionSnapshot.userQuestions
         : undefined;
     let applied = false;
+    let pendingQuestionSnapshotApplied = false;
 
     this.setState(prev => {
       if (
@@ -7565,6 +7569,7 @@ export class FlowChatStore {
           turnsChanged = true;
         }
         if (questionReconciliation.revisionApplied && pendingUserQuestions) {
+          pendingQuestionSnapshotApplied = true;
           this.userQuestionSnapshotRevisions.set(
             sessionId,
             pendingUserQuestions.revision,
@@ -7634,6 +7639,14 @@ export class FlowChatStore {
       };
     });
 
+    if (pendingQuestionSnapshotApplied && pendingUserQuestions) {
+      askUserQuestionDraftStore.getState().reconcilePendingTools(
+        scope.surfaceId,
+        sessionId,
+        pendingUserQuestions.questions.map(question => question.toolId),
+      );
+    }
+
     if (applied) {
       this.seedSessionHistoryLoadedRanges(sessionId, 'initial-tail');
     }
@@ -7789,7 +7802,9 @@ export class FlowChatStore {
     sessionId: string,
     pendingUserQuestions: PendingUserQuestionSnapshot | undefined,
   ): boolean {
+    const surfaceId = getActiveSurfaceId();
     let applied = false;
+    let pendingQuestionSnapshotApplied = false;
     this.setState(prev => {
       const session = prev.sessions.get(sessionId);
       if (!session) {
@@ -7802,6 +7817,7 @@ export class FlowChatStore {
         previousRevision,
       );
       if (reconciliation.revisionApplied && pendingUserQuestions) {
+        pendingQuestionSnapshotApplied = true;
         this.userQuestionSnapshotRevisions.set(sessionId, pendingUserQuestions.revision);
       }
       if (!reconciliation.changed) {
@@ -7816,6 +7832,13 @@ export class FlowChatStore {
       applied = true;
       return { ...prev, sessions };
     });
+    if (pendingQuestionSnapshotApplied && pendingUserQuestions) {
+      askUserQuestionDraftStore.getState().reconcilePendingTools(
+        surfaceId,
+        sessionId,
+        pendingUserQuestions.questions.map(question => question.toolId),
+      );
+    }
     return applied;
   }
 

src/web-ui/src/flow_chat/store/askUserQuestionDraftStore.test.ts

@@ -0,0 +1,129 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  LOCAL_SURFACE_ID,
+  activateSurface,
+} from '@/infrastructure/peer-device/deviceSurface';
+import {
+  askUserQuestionDraftKey,
+  askUserQuestionDraftStore,
+} from './askUserQuestionDraftStore';
+
+describe('askUserQuestionDraftStore', () => {
+  beforeEach(() => {
+    activateSurface(LOCAL_SURFACE_ID);
+    askUserQuestionDraftStore.setState({ drafts: {} });
+  });
+
+  it('keeps answers and custom input isolated by session and tool call', () => {
+    const sessionATool1 = askUserQuestionDraftKey('session-a', 'tool-1');
+    const sessionATool2 = askUserQuestionDraftKey('session-a', 'tool-2');
+    const sessionBTool1 = askUserQuestionDraftKey('session-b', 'tool-1');
+    const store = askUserQuestionDraftStore.getState();
+
+    store.setSingleAnswer(sessionATool1, 0, 'PostgreSQL');
+    store.setMultiAnswer(sessionATool1, 1, 'TypeScript', true);
+    store.setMultiAnswer(sessionATool1, 1, 'Rust', true);
+    store.setOtherInput(sessionATool1, 2, 'Custom answer');
+    store.setSingleAnswer(sessionATool2, 0, 'SQLite');
+    store.setSingleAnswer(sessionBTool1, 0, 'MySQL');
+
+    expect(askUserQuestionDraftStore.getState().drafts[sessionATool1]).toMatchObject({
+      answers: {
+        0: 'PostgreSQL',
+        1: ['TypeScript', 'Rust'],
+      },
+      otherInputs: { 2: 'Custom answer' },
+    });
+    expect(askUserQuestionDraftStore.getState().drafts[sessionATool2].answers[0]).toBe('SQLite');
+    expect(askUserQuestionDraftStore.getState().drafts[sessionBTool1].answers[0]).toBe('MySQL');
+  });
+
+  it('keeps equal session and tool ids isolated across device surfaces', () => {
+    const localKey = askUserQuestionDraftKey('same-session', 'same-tool');
+    askUserQuestionDraftStore.getState().setSingleAnswer(localKey, 0, 'Local answer');
+
+    activateSurface('peer-b');
+    const peerKey = askUserQuestionDraftKey('same-session', 'same-tool');
+    askUserQuestionDraftStore.getState().setSingleAnswer(peerKey, 0, 'Peer answer');
+
+    expect(peerKey).not.toBe(localKey);
+    expect(askUserQuestionDraftStore.getState().drafts[localKey].answers[0]).toBe('Local answer');
+    expect(askUserQuestionDraftStore.getState().drafts[peerKey].answers[0]).toBe('Peer answer');
+  });
+
+  it('preserves pending drafts and removes tools absent from an authoritative mailbox', () => {
+    const retainedKey = askUserQuestionDraftKey('session-a', 'tool-retained');
+    const removedKey = askUserQuestionDraftKey('session-a', 'tool-removed');
+    const otherSessionKey = askUserQuestionDraftKey('session-b', 'tool-removed');
+    const store = askUserQuestionDraftStore.getState();
+    store.setSingleAnswer(retainedKey, 0, 'Keep');
+    store.setSingleAnswer(removedKey, 0, 'Remove');
+    store.setSingleAnswer(otherSessionKey, 0, 'Other session');
+
+    store.reconcilePendingTools(LOCAL_SURFACE_ID, 'session-a', ['tool-retained']);
+
+    expect(askUserQuestionDraftStore.getState().drafts[retainedKey]).toBeDefined();
+    expect(askUserQuestionDraftStore.getState().drafts[removedKey]).toBeUndefined();
+    expect(askUserQuestionDraftStore.getState().drafts[otherSessionKey]).toBeDefined();
+  });
+
+  it('keeps submission phase across remounts without recreating a cleared draft', () => {
+    const key = askUserQuestionDraftKey('session-a', 'tool-1');
+    const store = askUserQuestionDraftStore.getState();
+    store.setSingleAnswer(key, 0, 'PostgreSQL');
+    store.setSubmissionPhase(key, 'submitting');
+    expect(askUserQuestionDraftStore.getState().drafts[key].submissionPhase).toBe('submitting');
+
+    store.clearDraft(key);
+    store.setSubmissionPhase(key, 'submitted');
+    expect(askUserQuestionDraftStore.getState().drafts[key]).toBeUndefined();
+  });
+
+  it('removes the Other marker when custom input becomes blank', () => {
+    const multiKey = askUserQuestionDraftKey('session-a', 'tool-multi');
+    const singleKey = askUserQuestionDraftKey('session-a', 'tool-single');
+    const store = askUserQuestionDraftStore.getState();
+
+    store.setMultiAnswer(multiKey, 0, 'PostgreSQL', true);
+    store.setMultiAnswer(multiKey, 0, 'Other', true);
+    store.setOtherInput(multiKey, 0, 'Custom database');
+    store.setOtherInput(multiKey, 0, '   ');
+
+    store.setSingleAnswer(singleKey, 0, 'Other');
+    store.setOtherInput(singleKey, 0, 'Custom database');
+    store.setOtherInput(singleKey, 0, '');
+
+    expect(askUserQuestionDraftStore.getState().drafts[multiKey]).toMatchObject({
+      answers: { 0: ['PostgreSQL'] },
+      otherInputs: { 0: '' },
+    });
+    expect(askUserQuestionDraftStore.getState().drafts[singleKey]).toMatchObject({
+      answers: {},
+      otherInputs: { 0: '' },
+    });
+  });
+
+  it('cleans up deleted sessions and discarded surfaces without disturbing others', () => {
+    const removedSessionKey = askUserQuestionDraftKey('session-a', 'tool-a');
+    const retainedSessionKey = askUserQuestionDraftKey('session-b', 'tool-b');
+    let store = askUserQuestionDraftStore.getState();
+    store.setSingleAnswer(removedSessionKey, 0, 'Remove session');
+    store.setSingleAnswer(retainedSessionKey, 0, 'Keep session');
+
+    activateSurface('peer-b');
+    const peerKey = askUserQuestionDraftKey('session-a', 'tool-a');
+    askUserQuestionDraftStore.getState().setSingleAnswer(peerKey, 0, 'Remove peer');
+
+    activateSurface(LOCAL_SURFACE_ID);
+    store = askUserQuestionDraftStore.getState();
+    store.removeSessionDrafts(['session-a']);
+    expect(askUserQuestionDraftStore.getState().drafts[removedSessionKey]).toBeUndefined();
+    expect(askUserQuestionDraftStore.getState().drafts[retainedSessionKey]).toBeDefined();
+    expect(askUserQuestionDraftStore.getState().drafts[peerKey]).toBeDefined();
+
+    store.removeSurfaceDrafts('peer-b');
+    expect(askUserQuestionDraftStore.getState().drafts[peerKey]).toBeUndefined();
+    expect(askUserQuestionDraftStore.getState().drafts[retainedSessionKey]).toBeDefined();
+  });
+});