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

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
• 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

Low Risk
Broad but presentation-only: styling and component API extensions with tests updated; no auth, data, or business-logic changes.

Overview
Aligns the web app with shared UI primitives and Tailwind-first styling instead of one-off CSS and ad hoc control classes.

Shared control contract — Button gains compact, icon-micro, ghost-muted, and glass variants; Input, SelectTrigger, and Toggle gain compact. Dozens of raw <button>/<input> usages across chat, settings, PR flows, sidebars, and toasts are switched to these primitives, trimming repeated height, radius, and hover/focus strings.

Global CSS → components — Workspace topbars, subheaders, composer insets, and chat markdown chrome move from index.css classes (e.g. workspace-topbar, surface-subheader, chat-markdown-*) to static Tailwind at call sites. Scroll fades consolidate on topbar-scroll-fade and a new getVirtualizedScrollFadeClassName for branch/model pickers. Glass surfaces use surface-glass / variant="glass" instead of chat-composer-glass.

Polish — Dropdowns/comboboxes/menus get consistent shadow tokens; InputGroup uses --control-radius; sidebar brand visibility is driven from SidebarChrome (md:flex); diff code view sets --code-background; skeleton respects motion-reduce.

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

Note

Simplify global styling with new utility classes and shared Button variants across the web app

• Adds compact, icon-micro sizes and ghost-muted, glass variants to button.tsx, and compact size to input.tsx, select.tsx, and toggle.tsx, giving components a consistent small-control geometry token.
• Replaces dozens of native <button> elements across settings panels, sidebars, chat, diffs, and PR views with the shared Button component using the new size/variant props, removing bespoke inline sizing classes.
• Refactors index.css to use @variant dark / @variant light blocks instead of .dark class selectors, and introduces @utility definitions for surface-glass, dialog-glass, dropdown-glass, topbar-scroll-fade, and virtualized-scroll-fade, replacing the legacy class-based equivalents.
• Adds getVirtualizedScrollFadeClassName utility to scroll-area.tsx and migrates scroll-fade class references from chat-timeline-scroll-fade / settings-page-scroll-fade to topbar-scroll-fade / [data-settings-page-scroll].
• Risk: components still referencing removed legacy classes (e.g. workspace-topbar, pull-requests-scroll-fade, surface-subheader, chat-composer-glass) will lose those styles and must adopt the new utilities or variant blocks.

^{Macroscope summarized ed080cc.}

[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	+6 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	+8 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	+14 B (+0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	5.5 KiB	−3 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	5.9 KiB	+17 B (+0.3%)	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: 038560e · PR result: ed080cc · 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: Approved ed080cc

Mechanical CSS refactoring that moves global styles into component-level Tailwind utilities and standardizes Button component usage. Same visual behavior, reorganized code structure. Tests verify the new component contracts.

^{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

Dismissing prior approval to re-evaluate 56dfc6f

Dismissing prior approval to re-evaluate 69ea104

Dismissing prior approval to re-evaluate 583affc

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 583affc. Configure here.}

Dismissing prior approval to re-evaluate 5f81f7a

Dismissing prior approval to re-evaluate e0cd878

Dismissing prior approval to re-evaluate 1170852

Dismissing prior approval to re-evaluate 3482c11

Dismissing prior approval to re-evaluate ed080cc