fix(ui): Preserve AskUser selection and focus

Keep selected radio styling on hover and retain the Other selection
and input focus when custom text is cleared. Show selection counts
only for multiple-choice questions.

Cover empty custom input and focus retention for single and multiple
selection with and without session drafts.

Author: wsp1911

design-system/packages/ui/src/components/Radio/Radio.module.css

@@ -71,7 +71,7 @@
     transform: scale(1);
   }
 
-  .input:hover:not(:disabled) + .circle {
+  .input:hover:not(:checked, :disabled) + .circle {
     border-color: var(--openbitfun-color-field-border-hover);
     background-color: var(--openbitfun-color-field-background-hover);
   }

design-system/packages/ui/src/flow-chat/ask-user/AskUser.tsx

@@ -615,7 +615,7 @@ export const AskUser = forwardRef<HTMLDivElement, AskUserProps>(function AskUser
 
       {showFooter && resolvedExpanded && (
         <div className={styles.footer} data-openbitfun-part="footer">
-          {paginated && navigation && activeQuestion && (
+          {paginated && navigation && activeQuestion?.selectionMode === "multiple" && (
             <span aria-live="polite" className={styles.counter} data-openbitfun-part="selection-count">
               {navigation.selectionLabel(
                 selectedCount,

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

@@ -99,7 +99,7 @@ describe('askUserQuestionDraftStore', () => {
     expect(askUserQuestionDraftStore.getState().drafts[key]).toBeUndefined();
   });
 
-  it('removes the Other marker when custom input becomes blank', () => {
+  it('preserves 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();
@@ -114,21 +114,21 @@ describe('askUserQuestionDraftStore', () => {
     store.setOtherInput(singleKey, 0, '');
 
     expect(askUserQuestionDraftStore.getState().drafts[multiKey]).toMatchObject({
-      answers: { 0: ['PostgreSQL'] },
+      answers: { 0: ['PostgreSQL', 'Other'] },
       otherInputs: { 0: '' },
     });
     expect(askUserQuestionDraftStore.getState().drafts[singleKey]).toMatchObject({
-      answers: {},
+      answers: { 0: 'Other' },
       otherInputs: { 0: '' },
     });
   });
 
-  it('preserves the Other marker for transient blank IME composition values', () => {
+  it('preserves the Other marker for an initially empty custom input', () => {
     const key = askUserQuestionDraftKey('session-a', 'tool-ime');
     const store = askUserQuestionDraftStore.getState();
 
     store.setSingleAnswer(key, 0, 'Other');
-    store.setOtherInput(key, 0, '', true);
+    store.setOtherInput(key, 0, '');
 
     expect(askUserQuestionDraftStore.getState().drafts[key]).toMatchObject({
       answers: { 0: 'Other' },

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

@@ -29,7 +29,6 @@ interface AskUserQuestionDraftState {
     key: string,
     questionIndex: number,
     value: string,
-    preserveOtherSelection?: boolean,
   ) => void;
   setSubmissionPhase: (key: string, phase: AskUserQuestionSubmissionPhase) => void;
   clearDraft: (key: string) => void;
@@ -103,28 +102,6 @@ function updateDraft(
   };
 }
 
-function removeOtherAnswer(
-  answers: Record<number, AskUserQuestionAnswer>,
-  questionIndex: number,
-): Record<number, AskUserQuestionAnswer> {
-  const current = answers[questionIndex];
-  if (Array.isArray(current)) {
-    if (!current.includes('Other')) {
-      return answers;
-    }
-    return {
-      ...answers,
-      [questionIndex]: current.filter(value => value !== 'Other'),
-    };
-  }
-  if (current !== 'Other') {
-    return answers;
-  }
-  const nextAnswers = { ...answers };
-  delete nextAnswers[questionIndex];
-  return nextAnswers;
-}
-
 function removeMatchingDrafts(
   state: AskUserQuestionDraftState,
   shouldRemove: (key: string) => boolean,
@@ -170,14 +147,11 @@ export const useAskUserQuestionDraftStore = create<AskUserQuestionDraftState>((s
     }));
   },
 
-  setOtherInput: (key, questionIndex, value, preserveOtherSelection = false) => {
+  setOtherInput: (key, questionIndex, value) => {
     set(state => updateDraft(state, key, draft => {
       const isEmpty = value.trim().length === 0;
       return {
         ...draft,
-        answers: isEmpty && !preserveOtherSelection
-          ? removeOtherAnswer(draft.answers, questionIndex)
-          : draft.answers,
         otherInputs: {
           ...draft.otherInputs,
           [questionIndex]: isEmpty ? '' : value,

src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.test.tsx

@@ -550,7 +550,39 @@ describe('AskUserQuestionCard', () => {
     expect(document.activeElement).toBe(customInput);
   });
 
-  it('deselects a blank multi-select Other answer and omits it from submission', async () => {
+  it.each([
+    { sessionId: 'session-a', multiSelect: false },
+    { sessionId: undefined, multiSelect: false },
+    { sessionId: 'session-a', multiSelect: true },
+    { sessionId: undefined, multiSelect: true },
+  ])('retains Other selection and input focus after clearing text ($sessionId, multiple=$multiSelect)', async ({ sessionId, multiSelect }) => {
+    act(() => root.render(
+      <AskUserQuestionCard
+        toolItem={questionTool('pending_confirmation', multiSelect)}
+        config={config}
+        sessionId={sessionId}
+      />,
+    ));
+    await act(async () => container.querySelector<HTMLInputElement>('input[value="Other"]')!.click());
+    const input = container.querySelector<HTMLInputElement>('[data-openbitfun-part="custom-input"] input')!;
+    expect(document.activeElement).toBe(input);
+    act(() => setInputValue(input, 'Custom database'));
+
+    for (const value of ['', '   ']) {
+      act(() => setInputValue(input, value));
+      expect(container.querySelector('[data-openbitfun-part="custom-input"] input')).toBe(input);
+      expect(document.activeElement).toBe(input);
+      expect(container.querySelector<HTMLInputElement>('input[value="Other"]')?.checked).toBe(true);
+      expect(container.querySelector<HTMLButtonElement>('[data-openbitfun-part="submit"] button')?.disabled).toBe(true);
+    }
+
+    act(() => setInputValue(input, 'New database'));
+    expect(input.value).toBe('New database');
+    expect(document.activeElement).toBe(input);
+    expect(container.querySelector<HTMLButtonElement>('[data-openbitfun-part="submit"] button')?.disabled).toBe(false);
+  });
+
+  it('keeps a blank multi-select Other answer selected and omits it from submission', async () => {
     act(() => {
       root.render(
         <AskUserQuestionCard
@@ -578,7 +610,7 @@ describe('AskUserQuestionCard', () => {
       }
     });
 
-    expect(container.querySelector<HTMLInputElement>('input[value="Other"]')?.checked).toBe(false);
+    expect(container.querySelector<HTMLInputElement>('input[value="Other"]')?.checked).toBe(true);
     expect(container.querySelector<HTMLInputElement>('input[value="PostgreSQL"]')?.checked).toBe(true);
 
     const submitButton = container.querySelector<HTMLButtonElement>('[data-openbitfun-part="submit"] button');

src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.tsx

@@ -367,42 +367,19 @@ export const AskUserQuestionCard: React.FC<ToolCardProps> = ({
   const handleOtherInputChange = useCallback((
     questionIndex: number,
     value: string,
-    preserveOtherSelection = false,
   ) => {
     if (draftKey) {
       askUserQuestionDraftStore.getState().setOtherInput(
         draftKey,
         questionIndex,
         value,
-        preserveOtherSelection,
       );
       return;
     }
     setLocalDraft((current) => {
       const isEmpty = value.trim().length === 0;
-      const currentAnswer = current.answers[questionIndex];
-      let nextAnswers = current.answers;
-      if (
-        isEmpty
-        && !preserveOtherSelection
-        && Array.isArray(currentAnswer)
-        && currentAnswer.includes(OTHER_OPTION_VALUE)
-      ) {
-        nextAnswers = {
-          ...current.answers,
-          [questionIndex]: currentAnswer.filter((answer) => answer !== OTHER_OPTION_VALUE),
-        };
-      } else if (
-        isEmpty
-        && !preserveOtherSelection
-        && currentAnswer === OTHER_OPTION_VALUE
-      ) {
-        nextAnswers = { ...current.answers };
-        delete nextAnswers[questionIndex];
-      }
       return {
         ...current,
-        answers: nextAnswers,
         otherInputs: {
           ...current.otherInputs,
           [questionIndex]: isEmpty ? '' : value,
@@ -707,8 +684,8 @@ export const AskUserQuestionCard: React.FC<ToolCardProps> = ({
       ) : undefined}
       onFocusCapture={handleInteraction}
       onAnswersChange={handleAnswersChange}
-      onCustomAnswerChange={(questionId, value, meta) => {
-        handleOtherInputChange(Number(questionId), value, meta.isComposing);
+      onCustomAnswerChange={(questionId, value) => {
+        handleOtherInputChange(Number(questionId), value);
       }}
       onSubmit={handleSubmit}
       questions={designQuestions}