cmux NEXT picker: animate family tabs with shared indicator

TE
5h ago
+26-6

Batch 6 carries the model picker onto the shared motion layer while preserving Lucas's merged #32980 behavior: family rail, model rows, effort and Fast controls, and the Account avatar/card remain in place. The selected family highlight now uses SlidingIndicator in both the primary columns picker and the compact fallback menu; clicks still update the selection immediately, and search clears the indicator without changing layout.

Leo's direction: “there's just tons of design systems related stuff for spacing gutters icons etc whatever like we don't yet feel designed yet” and “we generally also have disliked how we have like no sense of system at ALL”.

  • The Base UI spike at lane/ui-system-spike (2b86917f3389) is retained as evidence; its old vertical rail, fixed width and standalone effort toggle are not transplanted over #32980.
  • Existing ui/Popover, ui/Menu, ui/DrivenList, shared tokens and account/search behavior remain the production path.
  • Existing gallery before/after states: new-tab.quick-model-menu variants harness-symbols, harness-left, width-fit, width-stable, and the full-picker search and account states.
  • References: claude/live/model-picker-open, claude/live/model-effort-submenu, claude/live/model-more-submenu, t3-code/live/composer-provider-picker, t3-code/live/composer-codex-models, t3-code/live/composer-reasoning-service-tier, t3-code/live/motion-model-picker-frame, t3-code/live/motion-model-picker-end-frame.
  • Motion uses the existing finite Web Animation primitive; it adds no timer or frame loop. The indicator cancels on interruption, observes sizes only while mounted, disconnects on unmount, and honors reduced motion. No new performance timer or observer was added by this change.

Validation: bun test src/agent-session/acpmux/QuickModelColumns.test.tsx src/agent-session/acpmux/QuickModelMenu.test.tsx (64 pass); bun scripts/check-ui-review.ts --shrink-allowlist; bun scripts/check-design-tokens.ts --update-baseline; python3 scripts/cmux-next/prepush-gate.py.

agent-identity footer --repo manaflow-ai/cmux
🤖 Generated with Codex

Agent session: agent session


Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Animates the model picker's family tab highlight with a shared SlidingIndicator in the full columns picker and the compact rail menu. The indicator is a single mounted element that slides between selections instead of each tab rendering its own static highlight.

  • Replaces the selected tab's background and underline states; clicks still apply the selection immediately.
  • Clears the indicator while a search query is active so no tab appears highlighted, without layout shift.
  • Snaps the indicator into place when element.animate isn't available.
  • Honors reduced motion and cancels the animation on interruption.