Skip to content

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

Open
1000i100 wants to merge 3 commits into
pingdotgg:mainfrom
1000i100:agent/multi-select-checkboxes
Open

1000i100 wants to merge 3 commits into
pingdotgg:mainfrom
1000i100:agent/multi-select-checkboxes

fix(chat): mount the multi-select check only when the option is picked

2c66fff
Select commit
Loading
Failed to load commit list.
MacroscopeApp / Macroscope - UI Consistency succeeded Aug 21, 2026 in 1m 35s

UI Consistency: No issues found

All clear

Details

Note

Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.

Reviewed apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx and its test. The multi-select checkbox indicator now mounts the glyph only when checked, matching the shared Checkbox primitive's data-unchecked:hidden contract and the mobile pill, so the earlier forced-colors regression is resolved. Checked/unchecked colors (border-primary bg-primary text-primary-foreground) mirror the shared indicator, and the documented border-secondary-label/70 deviation for the empty box is a valid theme token with a stated dark-mode rationale. role="checkbox" / aria-checked are applied only in multi-select, matching the existing raw-button role="radio" precedent in ConnectionsSettings.tsx; the decorative box is aria-hidden, so no nested interactive primitive is required. Number shortcuts remain rendered for multi-select while the box carries state, and single-select keeps its trailing check. No Tailwind ownership, theme-variant, scroll, or layout regressions found in the changed web scope.


🔍 Agent activity — 9 tool calls

💭 I'm checking the current state of the changed files, and it looks like the previously flagged text-transparent issue has been resolved with a conditional check icon render.

1. browse_code — apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx

2. browse_code — apps/web/src/components/ui/checkbox.tsx

💭 With that fixed, I'm moving to new concerns: the raw button with checkbox role was already pre-existing in the file, so that's not a new issue. The checkbox indicator is a locally built visual rather than the shared Checkbox primitive, but since it's decorative inside a button that already carries the checkbox semantics, using the interactive primitive there would likely be redundant or conflicting. I'm noting a minor sizing difference between the local indicator and the shared component's dimensions, but that seems acceptable given it's nested and decorative. I'm also confirming the button's native keyboard behavior satisfies the role=checkbox interaction pattern, and that no group role is needed here. Now I'm checking whether secondary-label is actually defined as a theme color token so that border-secondary-label/70 resolves correctly, similar to how bg-background/35 is used elsewhere in the codebase.

3. git_tools — secondary-label

4. git_tools — border-secondary-label

💭 I'm confirming the Tailwind color token is valid, and that the mobile file changes are out of scope for this review. Then I'm checking the test file to verify it correctly counts checkbox-role buttons via regex matching against the rendered markup. Now I want to verify the renderPanel helper's return type and confirm the test's answer typing lines up with the component's prop signature.

5. browse_code — apps/web/src/components/chat/ComposerPendingUserInputPanel.test.tsx

6. browse_code — apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx

💭 With that resolved, I'm checking the checkbox's checked and unchecked color states against the shared component pattern—the checked styling matches, and the unchecked styling intentionally deviates with a documented reason for using a more visible border. Now I'm moving on to look at forced-colors mode handling. Checking that the checkmark only renders when selected, the aria-hidden attribute on the span, and how multi-select buttons display both the checkbox and shortcut key together—all seem intentional and properly handled. I'm also confirming that role="checkbox" on a disabled button maps correctly for assistive tech, and noting that missing group/fieldset semantics and minor size/radius differences from the shared Checkbox component aren't blocking issues since this is a decorative indicator. The CheckIcon's currentColor stroke picks up the wrapper's text-primary-foreground correctly, and hover/disabled states look fine since opacity and border styles are scoped appropriately. I'm noting that single-select options lack role="radio" or aria-pressed, but that's pre-existing behavior, not something this change introduces, so it's not a regression to flag. I'm also considering whether similar checkbox patterns exist elsewhere in the codebase worth cross-referencing.

7. git_tools — multiSelect

💭 Good, only one web rendering. The mobile pill's missing accessibilityLabel is out of scope. I'm wondering if the shared Checkbox primitive is reused elsewhere for a similar decorative pattern, like in MenuCheckboxItem, so I want to grep for repeated rounded border styling to see if there's duplication worth consolidating.

8. git_tools — size-4 shrink-0 items-center justify-center rounded-[.25rem]

9. git_tools — aria-checked

💭 I'm checking ConnectionsSettings for precedent, and it seems the role="checkbox" pattern on a raw button matches existing repo conventions, so there's no issue here. I'm also verifying the arbitrary Tailwind values like rounded-[.25rem], bg-primary/8, and border-secondary-label/70 are already used elsewhere in the codebase, so they're valid. Everything checks out clean, so I'll finalize the response as "All clear" within the required JSON structure.


Agent Credits: 220 credits