refactor(web): simplify global styling

[t3-code]

problem

shared controls and global styles had drifted away from the project’s component and tailwind conventions. component-owned geometry lived in index.css, dark token overrides used separate selectors, and repeated compact, glass, and search controls rebuilt primitive behavior with large call-site class strings.

fix

control consistency

• compose icon-bearing searches with InputGroup or Input
• add shared compact geometry to Button, Input, SelectTrigger, and Toggle
• add reusable micro icon, muted ghost, and glass button variants
• migrate keybinding editor controls to those shared sizes
• replace raw PR search, reviewer search, panel add, banner dismiss, scroll-to-end, and review controls with core UI primitives
• remove repeated control height, radius, focus, cursor, and color overrides from call sites
• use the semantic --control-radius in InputGroup

canonical tailwind cleanup

• nest equivalent dark token overrides with @variant dark
• move simple component-owned topbar, subheader, sidebar brand, composer inset, and terminal chrome styles to static tailwind classes at their call sites
• consolidate reusable complex glass surfaces plus topbar and virtualized-list scroll fades as @utility
• retain browser, vendor, runtime-theme, generated-content, mask, pseudo-element, and custom-theme selector behavior in css where global ownership is intentional
• remove stale one-use and page-specific classes, including .sidebar-brand* and duplicated chat/settings/pull-request scroll-fade selectors
• remove exact dark-token repeats, dead terminal-scrollbar aliases, duplicate document/sidebar paint, and owner-duplicated composer positioning
• share the virtualized model and branch picker fade contract while preserving the model picker’s native scrollbar lane; keep ScrollArea scrollFade for base-ui-owned viewports
• preserve keyboard focus rings, pointer cursors, dropdown saturation, and composable elevation
• add a Macroscope UI consistency check that carries these ownership, primitive, theme, emitted-CSS, virtualizer, and verification rules into future web PRs

apps/web/src/index.css is 397 lines and 11,229 bytes smaller than the latest merged main.

verification

• git diff --check passed
• formatting verified for all changed css/typescript files through oxfmt stdin mode
• focused unit suite passed: 24 tests across 5 files
• final merged-tree focused rerun passed: 119 tests across 7 files
• web typecheck passed
• production web build passed
• emitted production css contains all three exact virtualized fade masks, preserves the 6px native scrollbar lane, and emits no malformed empty selector
• real app verified in light and dark across chat, settings, keybindings, pull-request shells, and a scrolled model picker using the final shared utility
• compact keybinding input/select/button geometry remained aligned without clipping in light and dark
• independent reviews were run for the stylesheet and primitive-variant passes; actionable findings were fixed before publishing
• the new Macroscope agent frontmatter, include scope, formatting, and clean-response contract were validated
• pull-request content could not load on the borrowed test backend because its GitHub CLI is unavailable; the migrated PR chrome, topbar, split layout, error state, and theme styling rendered correctly

screenshots

theme search before, light

theme search after, light

theme search after, dark

chat shell after cleanup, light

chat shell after cleanup, dark

settings after cleanup, light

settings after cleanup, dark

pull-request shell after cleanup, light

pull-request shell after cleanup, dark

shared model-picker scroll fade, light

shared model-picker scroll fade, dark

agent

gpt-5.6-sol via hermes agent

request provenance

• requested by: @juliusmarminge

---

Note

^{Cursor Bugbot is generating a summary for commit 148b0fb. Configure here.}

Note

Simplify global styling by replacing legacy CSS classes with utility-based variants and shared Button primitives

• Replaces .dark-scoped CSS blocks with @variant dark/@variant light blocks in index.css, and adds new utility classes (surface-glass, dialog-glass, dropdown-glass, topbar-scroll-fade, virtualized-scroll-fade) that supersede several legacy class-based rules.
• Adds compact and icon-micro sizes plus ghost-muted and glass variants to the shared Button, Input, Select, and Toggle components; dozens of components are updated to use these new tokens instead of ad-hoc inline classes.
• Replaces native <button> elements across settings panels, sidebars, diff views, chat composer, and pull request UIs with the shared Button component.
• Introduces getVirtualizedScrollFadeClassName utility for scroll fade styling and COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME constant for decorator spans.
• Risk: components still referencing removed legacy classes (e.g. workspace-topbar, surface-subheader, chat-timeline-scroll-fade, pull-requests-scroll-fade, settings-page-scroll-fade) will lose those styles; they must adopt the new utilities or data attributes.

^{Macroscope summarized 190dde8.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	11.3 KiB	11.3 KiB	−8 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	5.5 KiB	5.5 KiB	−2 B (−0.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−6 B (−0.1%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	49.7 KiB	49.7 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	11.3 KiB	11.3 KiB	+5 B (+0.0%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	5.5 KiB	+7 B (+0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−2 B (−0.0%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	50.6 KiB	50.6 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 196c8ea · PR result: 190dde8 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 94.6 KiB
• Claude decoded thread snapshot: 95.4 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR adds a Macroscope configuration file (.macroscope/check-run-agents/ui-consistency.md), which requires human review per policy. Additionally, this is a major refactor that restructures shared UI primitives and consolidates global CSS into new utilities across 60+ files.

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

Dismissing prior approval to re-evaluate de22137

Dismissing prior approval to re-evaluate a44720b

Dismissing prior approval to re-evaluate 8e3066e

Dismissing prior approval to re-evaluate 8925f19

Dismissing prior approval to re-evaluate d471299

Dismissing prior approval to re-evaluate 578bf5b