Restore model picker layout and retain iterative test state

[juliusmarminge]

What changed

• Restores the model picker’s previous visual hierarchy: sidebar dividers, muted list surface, and underlined search field.
• Clips the Base UI popover viewport to the picker’s rounded boundary so scrolled content cannot expose sharp bottom corners.
• Preserves the glass tint and backdrop blur instead of making the picker opaque or see-through.
• Updates test-t3-app guidance to retain authenticated dev environments across human iteration and tear them down only when review is actually finished.

Why

The picker restyle changed more than the intended glass surface, and its rectangular popover viewport clipped the rounded inner surface at the bottom. During follow-up testing, eagerly tearing down the dev environment also discarded useful browser and application state between review turns.

User impact

The model picker again matches the prior layout while keeping the glass treatment, its lower corners render correctly in light mode, and iterative UI verification can retain server and browser state until explicitly completed.

Validation

• vp fmt --check .agents/skills/test-t3-app/SKILL.md .agents/skills/test-t3-app/agents/openai.yaml apps/web/src/components/chat/ModelPickerContent.tsx apps/web/src/components/chat/ModelPickerSidebar.tsx apps/web/src/components/chat/ProviderModelPicker.tsx
• vp lint apps/web/src/components/chat/ModelPickerContent.tsx apps/web/src/components/chat/ModelPickerSidebar.tsx apps/web/src/components/chat/ProviderModelPicker.tsx
• vp run --filter @t3tools/web typecheck
• vp test run src/components/chat/modelPickerSearch.test.ts --project unit (7 tests)
• React Doctor: 91/100; only existing maintainability warnings
• Integrated light-mode browser verification: search, model selection, restored composer layout, glass blur, and rounded lower corners

Note

Restore model picker layout and retain iterative test state across turns

• Restores model picker popup styling: rounded corners (lg radius), left border on main content when sidebar is visible, and search bar underline focus state in ModelPickerContent.tsx
• Updates ModelPickerSidebar.tsx to show a right border and section divider under favorites with a lighter background tint
• Clips the popover viewport to lg radius in ProviderModelPicker.tsx
• Updates the T3 app testing skill in SKILL.md to preserve dev server, ports, and browser sessions across turns rather than tearing down between each turn

^{Macroscope summarized 02f531b.}

---

Note

Low Risk
Cosmetic chat UI class changes and agent documentation only; no runtime logic, auth, or data paths.

Overview
Model picker styling is adjusted to bring back the prior hierarchy while keeping the glass surface: sidebar right border and lighter tint, muted list panel with a left divider when the rail is visible, and an underlined search field (replacing the accent search block) with subtler icon contrast. Corner radius moves to rounded-lg, and the popover viewport is clipped to that radius so scrolled list content no longer shows sharp bottom corners.

The test-t3-app skill now tells agents to keep dev servers, ports, auth, and fixtures alive across review turns, reuse healthy environments on follow-ups, and tear down only when the user confirms the loop is done—not after each assistant response.

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e9c7ce25-0fda-42bb-a9bb-b5a319be3c52

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/restore-model-picker-glass

---

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

[macroscopeapp]

Approvability

Verdict: Approved

Pure CSS/styling changes to the model picker components - adjusting borders, background colors, and border radius. No logic or runtime behavior modifications, only visual layout adjustments.

^{You can customize Macroscope's approvability policy. Learn more.}