feat(chat): show checkboxes on multi-select question options

[1000i100]

What Changed

• Multi-select question options now render a leading checkbox that reflects their selected state.
• Their number shortcut stays on screen while the answer is being assembled, instead of being swapped for a trailing check on the last option touched.
• Single-select options are untouched: no box, still a trailing check.
• Web option buttons expose role="checkbox" with aria-checked; the mobile pills get the matching accessibilityRole / accessibilityState.

Why

A multi-select question looked exactly like a single-select one — the same row of options, the same trailing check on whatever was picked last. Nothing on screen said "you may pick several", so the affordance had to be discovered by trying.

In practice it was not discovered. Across ~40 questions answered locally, every one of the 7 that carried multiSelect: true was answered in free text ("1, 2 and 4") rather than by selecting options, and no answer was ever submitted as an array.

A leading box is the conventional signal for "additive choice", and keeping the number shortcuts visible keeps the whole list reachable from the keyboard while several options are being picked. The two modes now differ at a glance rather than after a click.

The empty box borrows the shortcut key's ink (border-secondary-label/70) rather than the hairline border token: --border resolves to white/6% in dark mode, so a box drawn with it faded to roughly 4% white and vanished, while the <kbd> beside it stayed readable on the strength of its digit.

This is the interface half of the problem. #6443 is the mechanism half: it fixes multi-select questions auto-advancing after a selection (a stale useEffectEvent read plus an uncancelled single-select timer), which made picking a second option impossible in a [single] [multi] [multi] questionnaire. That PR makes multi-select behave; this one makes it look like what it is. They touch the same file but different parts of it — #6443 the handler and its effects, this one the option markup — and neither needs the other to land first.

UI Changes

Each shot stacks a multiSelect: true prompt over a multiSelect: false one, with two options picked in the first and one in the second. Before, the two prompts are indistinguishable.

	Before	After
Dark
Light

Validation

• vp test run --dir apps/web src/components/chat/ComposerPendingUserInputPanel.test.tsx (4 tests, 2 new)
• vp test run --dir apps/mobile src/lib/threadActivity.test.ts (14 tests)
• vp run --filter @t3tools/web typecheck, vp run --filter @t3tools/mobile typecheck
• vp lint and vp fmt --check on the three touched files

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes — n/a, no motion or timing change

---

Written by Claude Opus 5 (1M context) in T3 Code.

---

Note

Low Risk
UI and accessibility-only change to option markup; selection behavior is unchanged. Low risk of visual/a11y regressions on pending-input prompts.

Overview
Makes multi-select pending-input options look and announce as additive choices, so they no longer match single-select rows.

On web and mobile, multiSelect options get a leading checkbox and checkbox a11y (role="checkbox" / accessibilityRole). Selected multi-select items keep their number shortcuts instead of swapping them for a trailing check. Single-select is unchanged (trailing check, no box).

Web tests cover checkbox markup, aria-checked, shortcut persistence, and that single-select stays a plain button.

^{Reviewed by Cursor Bugbot for commit 2c66fff. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Show checkboxes on multi-select question options in chat

• Adds a leading checkbox with checkmark to multi-select option pills in both mobile (PendingUserInputCard) and web (ComposerPendingUserInputPanel), tinted via theme colors
• Sets accessibilityRole="checkbox" and aria-checked on multi-select options; single-select pills keep button semantics and trailing checkmark behavior unchanged
• Web multi-select options retain numeric shortcut keys on all options; single-select shows trailing checkmark only when selected
• Adds test fixtures and assertions covering checkbox roles, aria-checked states, numeric shortcuts, and guidance text for both multi-select and single-select modes

^{Macroscope summarized 2c66fff.}

Summary by CodeRabbit

• New Features

  • Multi-select options now display clear checked and unchecked checkbox states.
  • Keyboard shortcuts remain visible for multi-select choices, including selected options.
  • Improved accessibility semantics for multi-select controls.

• Bug Fixes

  • Single-select options retain their standard selection behavior and indicators.
  • Improved alignment and visual consistency for option controls.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0958f3c4-129c-45d6-a5e7-7b4b6f660187

📥 Commits

Reviewing files that changed from the base of the PR and between be7d35a and 2c66fff.

⛔ Files ignored due to path filters (4)

• .github/pr-assets/7803-after-dark.svg is excluded by !**/*.svg
• .github/pr-assets/7803-after-light.svg is excluded by !**/*.svg
• .github/pr-assets/7803-before-dark.svg is excluded by !**/*.svg
• .github/pr-assets/7803-before-light.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• apps/mobile/src/features/threads/PendingUserInputCard.tsx
• apps/web/src/components/chat/ComposerPendingUserInputPanel.test.tsx
• apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

Multi-select pending-input options now show checked state and checkbox accessibility semantics on web and mobile. Single-select options retain button semantics and their existing selection indicators. Web tests cover both selection modes and keyboard shortcut behavior.

Changes

Multi-select checkbox UI

Layer / File(s)	Summary
Web checkbox behavior and validation apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx, apps/web/src/components/chat/ComposerPendingUserInputPanel.test.tsx	The web panel renders checkbox indicators for multi-select options and exposes role="checkbox" with aria-checked. Tests cover selected and unselected options, keyboard shortcuts, and single-select semantics.
Mobile checkbox rendering apps/mobile/src/features/threads/PendingUserInputCard.tsx	The mobile card renders themed, checked or unchecked checkbox indicators for multi-select options. Single-select options retain their existing rendering and semantics.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 2c66f

This localized UI and accessibility change makes multi-select options visibly distinct while preserving existing selection behavior. No actionable merge-blocking risk remains beyond normal checks and review.

Suggested reviewers: juliusmarminge

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding checkboxes to multi-select chat question options.
Description check	✅ Passed	The description includes the required What Changed, Why, UI Changes, and Checklist sections with clear details, screenshots, and validation results.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 2

⚔️ Resolve merge conflicts 💡

• Resolve merge conflict in branch agent/multi-select-checkboxes

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

Warning

⚠️ This pull request shows signs of AI-generated slop (redundant_comments). It has been flagged by CodeRabbit slop detection and should be reviewed carefully.

[macroscopeapp]

One minor consistency note on the new multi-select indicator; the rest of the change (role/aria-checked only in multi-select mode, keeping the number shortcuts, single-select untouched) looks consistent with the panel's existing patterns.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Approved at 2c66fff

Macroscope's review found this PR approvable — This PR adds visual checkboxes and accessibility attributes to multi-select question options - a self-contained UI enhancement with no business logic changes. The multiSelect property already exists and is only being read for conditional rendering. Tests are included.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 2c66fff

[1000i100]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.