Auto-save agentic UI settings and redesign the preferences layout by bcotrim · Pull Request #4219 · Automattic/studio

bcotrim · 2026-07-15T20:22:13Z

Related issues

Related to STU-1882

How AI was used in this PR

Implemented with Claude Code (design ported from the settings redesign explorations in #3975/#3979, adapted to auto-save). All changes were reviewed, and behavior was verified manually in the app plus unit tests.

Proposed Changes

First PR of the application-settings series for the new Studio experience.

Settings now save instantly. Changing any option persists it immediately — no more Save button, dirty-state tracking, or losing changes when navigating away. Per the settings design post: "options are saved when changed."
Redesigned settings screen. A title-bar-height header with a centered tab list replaces the in-content title and tabs, and the preferences are grouped into cards: a General section (Appearance as a System/Light/Dark segmented control, Language, Preferred editor, Preferred terminal, When quitting with running sites) and a Studio experience section with the "Switch to classic" action. Save errors surface inline in the affected section.
Settings no longer show stale values. The screen previously trusted a forever-fresh persisted cache, so preferences changed elsewhere (or fields added since) could show wrong/empty values until the cache expired. It now reconciles with the main process on mount/focus.
Editor/terminal selections match the classic UI's behavior. Only installed apps are offered and the effective (fallback-resolved) app is always shown, so a brand-new user sees a working "open in" option rather than nothing. The site actions menu now names the apps ("Open in Cursor", "Open in Terminal") and hides an action only when no supported app is available.
"Stop, restart on next launch" now works in the new Studio experience. The relaunch half of that behavior only lived in the classic UI; the new shell now restarts the flagged sites on boot too.

Dark	Light

Note: Some settings are intentionally left out and will be addressed in follow-up PRs

Testing Instructions

Enable the new Studio experience (beta feature flag) and open Settings.
Change each preference (appearance, language, editor, terminal, quit behavior) — each should apply immediately with no Save button. Language reloads the app in the new locale.
Navigate away and back, and restart the app — values should persist and match what the classic UI's settings dialog shows.
Right-click a site in the sidebar — the menu should read "Open in " / "Open in " and both should open.
Set "When quitting with running sites" to "Stop, restart on next launch", start a site, quit Studio, relaunch — the site should start again automatically.
Verify the settings screen in both light and dark mode.

Pre-merge Checklist

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

🤖 Generated with Claude Code

wpmobilebot · 2026-07-15T20:39:07Z

📊 Performance Test Results

Comparing 421adc0 vs trunk

app-size

Metric	trunk	`421adc0`	Diff	Change
App Size (Mac)	1355.58 MB	1353.94 MB	1.65 MB	🟢 -0.1%

site-editor

Metric	trunk	`421adc0`	Diff	Change
load	1074 ms	1077 ms	+3 ms	⚪ 0.0%

site-startup

Metric	trunk	`421adc0`	Diff	Change
siteCreation	7056 ms	7003 ms	53 ms	🟢 -0.8%
siteStartup	2354 ms	2366 ms	+12 ms	⚪ 0.0%

Results are median values from multiple test runs.

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

…osave-preferences # Conflicts: # apps/ui/src/components/site-list/index.tsx

…osave-preferences # Conflicts: # apps/ui/src/data/queries/use-sites.ts

katinthehatsite · 2026-07-17T09:08:25Z

 ];

+function isColorScheme( value: unknown ): value is ColorScheme {
+	return value === 'system' || value === 'light' || value === 'dark';


Should the font sizes in these boxes be aligned and use the same size? it seems to be the system options are slightly smaller than the other preference choices:

katinthehatsite

The changes look good to me 👍

I noticed one small thing - there seems to be a slight lagging while I am switching languages while the dropdown is going away. I tried to capture it in the screencast below:

Screen.Recording.2026-07-17.at.11.08.56.AM.mov

…change reload

bcotrim · 2026-07-17T09:49:01Z

@katinthehatsite I've addressed the feedback in 0a17304

…osave-preferences # Conflicts: # apps/ui/src/index.css

…tomattic/studio into agentic-settings-autosave-preferences

sejas

Code looks good. I tested all the settings, and they worked well, with the exception of RTL selected in Appearance, where the selected box moves the other way. Otherwise the PR is ready to be merged.

rtl-settings-move-different-selection.mp4

Before	After

bcotrim · 2026-07-20T15:47:59Z

Nice catch @sejas fixed in 421adc0

sejas

Confirmed RTL is fixed! Thanks!

## Related issues - Related to [STU-1882](https://linear.app/a8c/issue/STU-1882) ## How AI was used in this PR Implemented with Claude Code following the auto-save settings patterns from #4219, using the Save-button-era exploration in #3979 as a reference. All code reviewed, linted, typechecked, and unit-tested locally. ## Proposed Changes - A new **Default site directory** row in Settings shows the current folder and opens the native folder picker; picking a folder saves immediately, matching the auto-save behavior of the other preferences. The value is shared with the classic UI, so changes made in either stay in sync. | Light | Dark | |--------|--------| | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/4e22e5f9-3232-4b93-9514-de67bf116d7d" /> | <img width="3248" height="2122" alt="image" src="https://github.com/user-attachments/assets/1de28d2a-c9b8-4f91-b181-c8a10e94ac1c" /> | ## Testing Instructions 1. Enable the new Studio experience and open **Settings**. 2. Verify the **Default site directory** row shows your current default (or "Choose a folder…" if unset). 3. Click it, pick a folder — the choice should persist immediately (no Save button), and survive an app restart. 4. Cancel the picker — nothing should change or save. 5. Switch to the classic UI → Preferences: the same directory should appear there (and vice versa). 6. Create a new site in the agentic UI: the proposed path should live under the chosen directory. 8. Check the settings screen in both light and dark mode. ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? 🤖 Generated with [Claude Code](https://claude.com/claude-code)

Auto-save agentic UI settings and redesign the preferences layout

e93c703

github-actions Bot assigned bcotrim Jul 15, 2026

bcotrim requested review from a team and katinthehatsite July 15, 2026 21:00

bcotrim added 2 commits July 16, 2026 10:57

Merge remote-tracking branch 'origin/trunk' into agentic-settings-aut…

dc930a0

…osave-preferences # Conflicts: # apps/ui/src/components/site-list/index.tsx

Merge remote-tracking branch 'origin/trunk' into agentic-settings-aut…

ecd8058

…osave-preferences # Conflicts: # apps/ui/src/data/queries/use-sites.ts

katinthehatsite reviewed Jul 17, 2026

View reviewed changes

bcotrim and others added 2 commits July 17, 2026 10:44

Align appearance picker text size with selects and smooth the locale-…

0a17304

…change reload

Merge branch 'trunk' into agentic-settings-autosave-preferences

bd6918c

bcotrim requested a review from katinthehatsite July 17, 2026 09:49

bcotrim added 2 commits July 17, 2026 14:07

Merge remote-tracking branch 'origin/trunk' into agentic-settings-aut…

bdb9fb3

…osave-preferences # Conflicts: # apps/ui/src/index.css

Merge branch 'agentic-settings-autosave-preferences' of github.com:Au…

5c244b2

…tomattic/studio into agentic-settings-autosave-preferences

bcotrim requested review from nightnei and sejas July 20, 2026 14:04

sejas reviewed Jul 20, 2026

View reviewed changes

Fix appearance picker indicator direction in RTL

421adc0

bcotrim requested a review from sejas July 20, 2026 15:48

sejas approved these changes Jul 20, 2026

View reviewed changes

bcotrim enabled auto-merge (squash) July 20, 2026 16:11

bcotrim merged commit 4b809d4 into trunk Jul 20, 2026
13 checks passed

bcotrim deleted the agentic-settings-autosave-preferences branch July 20, 2026 16:13

bcotrim mentioned this pull request Jul 21, 2026

Agentic UI: Add default site directory preference to settings #4275

Merged

1 task

bcotrim mentioned this pull request Jul 24, 2026

Agentic UI: Application Settings #3979

Closed

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Auto-save agentic UI settings and redesign the preferences layout - #4219

Auto-save agentic UI settings and redesign the preferences layout#4219
bcotrim merged 8 commits into
trunkfrom
agentic-settings-autosave-preferences

bcotrim commented Jul 15, 2026 •

edited

Loading

wpmobilebot commented Jul 15, 2026 •

edited

Loading

katinthehatsite Jul 17, 2026

katinthehatsite left a comment

bcotrim commented Jul 17, 2026

sejas left a comment

bcotrim commented Jul 20, 2026

sejas left a comment

Uh oh!

Labels

4 participants

Uh oh!

Conversation

bcotrim commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

wpmobilebot commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

katinthehatsite Jul 17, 2026

Choose a reason for hiding this comment

katinthehatsite left a comment

Choose a reason for hiding this comment

bcotrim commented Jul 17, 2026

sejas left a comment

Choose a reason for hiding this comment

bcotrim commented Jul 20, 2026

sejas left a comment

Choose a reason for hiding this comment

Uh oh!

Labels

4 participants

bcotrim commented Jul 15, 2026 •

edited

Loading

wpmobilebot commented Jul 15, 2026 •

edited

Loading