Add a density preference to the agentic UI

[youknowriad]

Related issues

• Related to Agentic UI: Foundation #3646

How AI was used in this PR

Built with Claude Code in an interactive session: the feature shape, density semantics, and each visual adjustment were human-directed, with the implementation, cascade/specificity analysis, and verification done by the agent. All code was reviewed iteratively during the session.

Proposed Changes

#3646 increased the base UI font size (13px → 14px) as part of the agentic UI redesign, but that sizing suited some users and not others. This PR turns it into a choice: a Density picker (Compact / Comfortable) in Settings → Preferences, persisted like the other preferences.

• Compact (default) keeps today's sizing.
• Comfortable bumps the base font size to 14px, raises size="small" buttons from 24px to 28px, and steps icons up from 16px to 18px — so the UI reads larger without changing layout.

Notably, the preference deliberately does not change the ThemeProvider's density prop: the design system's density only swaps padding/gap tokens (it never scales type), and the classic UI's global icon sizing is keyed to compact density — switching it would re-inflate every icon to 24px and shift all spacing far beyond the intended effect.

Independent of the preference, two small preview-header improvements apply in both densities: roomier header padding, the refresh icon redrawn ~10% smaller to sit proportionally with its neighbors, and a small gap separating refresh from the back/forward cluster.

Testing Instructions

1. Build and run the app, enable the Agentic UI via the Electron → Beta Features menu.
2. Open Settings → Preferences: a Density field appears next to Appearance.
3. Switch to Comfortable and save: body text, small buttons, and icons grow immediately (sidebar, site list, preview toolbar, dropdown menus).
4. Check the site list: the running/stopped status dots stay small (8px) in both densities.
5. Restart the app: the preference persists (stored in ~/.studio/app.json).
6. Switch back to Compact and save: sizing returns to today's defaults; the preview header keeps its larger padding and the refresh button keeps its small gap in both modes.
7. Verify in both light and dark mode (no color tokens were touched, so no differences expected).

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing 8490969 vs trunk

app-size

Metric	trunk	8490969	Diff	Change
App Size (Mac)	1354.74 MB	1354.74 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	8490969	Diff	Change
load	1657 ms	1663 ms	+6 ms	⚪ 0.0%

site-startup

Metric	trunk	8490969	Diff	Change
siteCreation	9072 ms	9035 ms	37 ms	⚪ 0.0%
siteStartup	4414 ms	4424 ms	+10 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)