fix(web): allow copying pending question option text

apps/web/src/components/chat/ComposerPendingUserInputPanel.navigation.browser.test.tsx

@@ -20,6 +20,7 @@ import { act, fakeTimers, render } from "../../../test/render";
 import { useComposerDraftStore } from "../../composerDraftStore";
 import { makeThreadProjectionFixture } from "../../test-fixtures";
 import { toastManager } from "../ui/toast";
+import { ComposerPendingUserInputPanel } from "./ComposerPendingUserInputPanel";
 import { usePendingThreadRequests } from "./usePendingThreadRequests";
 
 const threadRef = { environmentId: EnvironmentId.make("env"), threadId: ThreadId.make("thread") };
@@ -265,3 +266,90 @@ it("isolates drafts by environment, thread and request and discards only resolve
     );
   }
 });
+
+it("answers an option with Space on keyup, once per press, and not after focus leaves", async () => {
+  const onToggleOption = vi.fn();
+  await using screen = await render(
+    <ComposerPendingUserInputPanel
+      pendingUserInputs={[
+        { ...prompt, questions: [{ ...prompt.questions[0]!, multiSelect: true }] },
+      ]}
+      cwd={undefined}
+      threadRef={threadRef}
+      respondingRequestIds={[]}
+      answers={{}}
+      questionIndex={0}
+      onToggleOption={onToggleOption}
+      onAdvance={() => {}}
+      onDismiss={() => {}}
+    />,
+  );
+  const option = screen.getByRole("button", { name: /Incremental/ }).element() as HTMLElement;
+  const key = (type: "keydown" | "keyup", key: string, repeat = false) =>
+    act(() => {
+      option.dispatchEvent(new KeyboardEvent(type, { key, repeat, bubbles: true }));
+    });
+
+  option.focus();
+  await key("keydown", " ");
+  await key("keydown", " ", true);
+  await key("keydown", " ", true);
+  expect(onToggleOption).not.toHaveBeenCalled();
+  await key("keyup", " ");
+  expect(onToggleOption).toHaveBeenCalledTimes(1);
+
+  await key("keydown", " ");
+  await act(() => option.blur());
+  option.focus();
+  await key("keyup", " ");
+  expect(onToggleOption).toHaveBeenCalledTimes(1);
+
+  await key("keydown", "Enter");
+  expect(onToggleOption).toHaveBeenCalledTimes(2);
+
+  const modifiedEnter = new KeyboardEvent("keydown", {
+    key: "Enter",
+    metaKey: true,
+    shiftKey: true,
+    bubbles: true,
+    cancelable: true,
+  });
+  await act(() => {
+    option.dispatchEvent(modifiedEnter);
+  });
+  expect(modifiedEnter.defaultPrevented).toBe(false);
+  expect(onToggleOption).toHaveBeenCalledTimes(2);
+});
+
+it("ignores a pointer click that ends a text selection but still answers assistive activation", async () => {
+  const onToggleOption = vi.fn();
+  await using screen = await render(
+    <ComposerPendingUserInputPanel
+      pendingUserInputs={[
+        { ...prompt, questions: [{ ...prompt.questions[0]!, multiSelect: true }] },
+      ]}
+      cwd={undefined}
+      threadRef={threadRef}
+      respondingRequestIds={[]}
+      answers={{}}
+      questionIndex={0}
+      onToggleOption={onToggleOption}
+      onAdvance={() => {}}
+      onDismiss={() => {}}
+    />,
+  );
+  const option = screen.getByRole("button", { name: /Incremental/ }).element() as HTMLElement;
+  const range = document.createRange();
+  range.selectNodeContents(option);
+  window.getSelection()!.removeAllRanges();
+  window.getSelection()!.addRange(range);
+  const click = (detail: number) =>
+    act(() => {
+      option.dispatchEvent(new MouseEvent("click", { detail, bubbles: true }));
+    });
+
+  await click(1);
+  expect(onToggleOption).not.toHaveBeenCalled();
+  await click(0);
+  expect(onToggleOption).toHaveBeenCalledTimes(1);
+});

apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx

@@ -87,6 +87,7 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
   const canRespond = prompt.responseCapability !== "not_resumable";
   const responseDisabled = disabled || isResponding || !canRespond;
   const autoAdvanceTimerRef = useRef<number | null>(null);
+  const spacePressedOptionRef = useRef<HTMLElement | null>(null);
   const advance = useStableCallback(onAdvance);
   const [optimisticSingleSelect, setOptimisticSingleSelect] = useState<{
     questionId: string;
@@ -275,7 +276,7 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
                   isOptimisticallySelected || draftSelectedOptions?.[index] === true;
                 const className = cn(
                   questionTextAlign,
-                  "group flex w-full items-start gap-2.5 rounded-md bg-transparent py-1.5 ps-2 sm:ps-1.5 outline-none transition-colors duration-150 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/25",
+                  "group flex w-full select-text items-start gap-2.5 rounded-md bg-transparent py-1.5 ps-2 sm:ps-1.5 outline-none transition-colors duration-150 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/25",
                   isSelected ? "text-foreground" : "text-foreground/70 hover:bg-muted/30",
                   (disabled || isResponding) && "opacity-50 cursor-not-allowed",
                   !disabled && !isResponding && "cursor-pointer",
@@ -310,19 +311,56 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
                     ) : null}
                   </>
                 );
+                // Chromium cannot start a text selection inside a native <button>, so the
+                // option is a button-role div whose label and description stay copyable.
                 return (
-                  <button
+                  <div
                     key={`${activeQuestion.id}:${optionValue}`}
-                    type="button"
+                    role="button"
                     aria-pressed={isSelected}
-                    disabled={disabled || isResponding}
-                    onClick={() => {
+                    tabIndex={disabled || isResponding ? -1 : 0}
+                    aria-disabled={disabled || isResponding}
+                    onClick={(event) => {
+                      // A drag that selected text in the option ends in a click; it must not answer.
+                      // Assistive technology activates with detail 0 and still answers.
+                      const selection = window.getSelection();
+                      if (
+                        event.detail > 0 &&
+                        selection &&
+                        !selection.isCollapsed &&
+                        selection.containsNode(event.currentTarget, true)
+                      ) {
+                        return;
+                      }
                       handleOptionSelection(activeQuestion.id, optionValue);
                     }}
+                    // Native button keys: Enter answers on keydown, Space on keyup, and
+                    // blurring while Space is held cancels it. Modified keys stay with global
+                    // shortcuts such as Mod+Shift+Enter.
+                    onKeyDown={(event) => {
+                      if (event.metaKey || event.ctrlKey || event.altKey) return;
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        handleOptionSelection(activeQuestion.id, optionValue);
+                      } else if (event.key === " ") {
+                        event.preventDefault();
+                        if (!event.repeat) spacePressedOptionRef.current = event.currentTarget;
+                      }
+                    }}
+                    onKeyUp={(event) => {
+                      if (event.key !== " ") return;
+                      const pressed = spacePressedOptionRef.current === event.currentTarget;
+                      spacePressedOptionRef.current = null;
+                      if (event.metaKey || event.ctrlKey || event.altKey) return;
+                      if (pressed) handleOptionSelection(activeQuestion.id, optionValue);
+                    }}
+                    onBlur={() => {
+                      spacePressedOptionRef.current = null;
+                    }}
                     className={className}
                   >
                     {content}
-                  </button>
+                  </div>
                 );
               })}
             </div>