Agentic UI: Application Settings

[shaunandrews]

Related issues

• Related to STU-1882

How AI was used in this PR

Codex helped port the existing Studio application preferences into the new agentic UI, iterate on visual polish with repeated light/dark checks, add focused tests, and run code review passes with a subagent and Claude. I reviewed the resulting behavior and asked for targeted revisions throughout the implementation.

Proposed Changes

This PR brings the app-level Studio preferences into the new agentic UI and makes the user menu/settings entry point behave like a first-class part of the product instead of a temporary menu surface.

Settings

• Adds a dedicated app settings route with tabbed sections for Settings, Usage, Keyboard, Skills, and MCP.
• Renames the first tab from Preferences to Settings and the main section heading from General settings to General.
• Ports the general preferences UI into the agentic settings screen, including appearance, language, preferred editor, preferred terminal, default site directory, and Studio CLI preferences.
• Uses WordPress UI/Base UI-style controls where possible, including select controls, switch treatment, segmented controls, button treatment, and input-like directory picking.
• Aligns the settings controls with the current agentic UI design language, including dark-mode border, fill, hover, focus, and selected states.
• Hides desktop-only controls in hosted/browser mode so users do not see native app settings that cannot work there.
• Adds an Account section below General, with circular avatar treatment, Docs and Report an issue actions, and a normal bordered Log out button.
• Adds unsaved-change protection when users navigate away from settings after editing preferences.

Usage

• Adds a Usage tab for preview-site usage and future AI usage.
• Adds an AI credits section that explains beta credits are free and unlimited while Studio Code is in beta.
• Adds a full-width beta credit meter treatment that matches the preview usage meter height.
• Shows preview-site usage in a full-width meter, keyed to the active WordPress.com user where available.
• Guards destructive preview-site actions while offline.

Keyboard

• Adds a Keyboard tab with a contained Keyboard shortcuts panel.
• Documents shortcuts for opening settings, composer actions, stopping responses, and site-preview navigation.
• Removes the incorrect Command-N shortcut from the keyboard shortcut list.

Skills

• Adds a Skills tab with a proper settings container, heading, and explanatory copy.
• Adds installed and available skill sections.
• Wires skill install, remove, and install-all actions through the new UI data layer.
• Adds documentation linking for skills.

MCP

• Adds an MCP tab with a proper settings container, heading, and explanatory copy.
• Displays the Studio MCP configuration in a selectable code block.
• Adds a copy button for the MCP configuration, using the shared copy connector plumbing.
• Adds documentation linking for MCP.

Sidebar And Navigation

• Removes the prominent theme toggle from the sidebar footer.
• Makes clicking the username/user-menu area open Settings directly.
• Highlights the user row when the user is in Settings and aligns its active height with selected chat rows.
• Keeps the logged-out settings affordance available.
• Fixes the collapsed-sidebar toggle accessibility/z-index issue.
• Prevents opening Settings from toggling the first site group in the sidebar.
• Moves the global settings keyboard/menu listener to the root layout so it works outside the dashboard route.
• Keeps settings tab state in the URL with human-readable tab names.

Data And Infrastructure

• Adds app-global query plumbing so the UI can distinguish hosted/browser mode from the desktop app.
• Adds WordPress skills query/mutation plumbing.
• Adds shared copy-text support to hosted and IPC connectors.
• Updates snapshot usage query behavior so user-specific quota data does not bleed between accounts.
• Adds an offline hook for UI guards.
• Uses app-appropriate --wpds-* tokens in apps/ui for light/dark-safe colors.

Tests

• Adds settings-view tests for save behavior, unsaved navigation blocking, tab rendering, hosted-mode native-control hiding, usage behavior, skills, MCP copy, and account actions.
• Adds preference helper tests.
• Adds user-menu tests for settings navigation/highlight behavior.
• Extends site-list tests for settings-route expansion behavior.

Screenshots

The hosted UI screenshots below cover the high-level settings surfaces in both light and dark mode, captured at 900px wide with seeded sites in the sidebar. Native-only desktop controls are hidden in hosted mode and are covered by tests.

Settings

Usage

Keyboard

Skills

MCP

Testing Instructions

1. Open the app and click the sidebar user row. Confirm it opens Settings directly and the row highlights while in Settings.
2. In Settings, switch through Settings, Usage, Keyboard, Skills, and MCP. Confirm tab alignment, focus rings, selected states, and panel spacing in light and dark mode.
3. Edit a preference, then navigate away without saving. Confirm the unsaved changes dialog appears.
4. Confirm dropdowns, segmented controls, the directory picker field, and the Studio CLI switch match the WordPress UI-style input treatment in both themes.
5. Confirm the Usage tab shows AI credits and preview-site usage with full-width meters.
6. Confirm the Keyboard tab lists only currently supported shortcuts.
7. Confirm the MCP copy button copies the configuration.

[Copilot]

Pull request overview

This PR brings Studio’s application-level settings into the new agentic UI (apps/ui) by adding a dedicated /settings route with tabbed sections (Settings/Usage/Keyboard/Skills/MCP), wiring the necessary connector/query plumbing, and updating sidebar navigation so the user row acts as the primary entry point to Settings.

Changes:

• Adds a new Settings route and a redesigned SettingsView with tabs, save UX (including unsaved-change blocking), and keyboard shortcut handling.
• Introduces new data-layer capabilities (app globals, snapshot usage + delete-all, WordPress skills, offline detection) across connectors and queries.
• Updates sidebar/user-menu/site-list behavior and styling to treat Settings as a first-class navigation destination.

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
apps/ui/src/ui-classic/router/route-settings/index.tsx	Updates settings route search param parsing to normalize tab ids.
apps/ui/src/ui-classic/router/layout-root/index.tsx	Adds root-level listener to open Settings from connector events.
apps/ui/src/lib/docs-links.ts	Adds new docs link keys for CLI/MCP/Skills.
apps/ui/src/index.css	Adds select z-index token + tweaks highlighted listbox row styling for dark chrome.
apps/ui/src/hooks/use-offline.ts	Introduces a hook for online/offline guards in UI flows.
apps/ui/src/data/queries/use-wordpress-skills.ts	Adds query + mutations for global WordPress skill status/actions.
apps/ui/src/data/queries/use-snapshots.ts	Adds per-user query keys + snapshot usage query + delete-all mutation helpers.
apps/ui/src/data/queries/use-app-globals.ts	Adds app globals query (platform/app metadata) with infinite staleness.
apps/ui/src/data/core/types.ts	Extends Connector contract + adds new types (AppGlobals, SnapshotUsage, SkillStatus, etc.).
apps/ui/src/data/core/index.ts	Re-exports newly added data-core types.
apps/ui/src/data/core/connectors/ipc/index.ts	Implements new Connector methods in IPC mode (snapshot usage, prefs, skills, settings events, etc.).
apps/ui/src/data/core/connectors/hosted/index.ts	Implements hosted/browser-mode behavior for new Connector methods (mostly no-ops / placeholders).
apps/ui/src/components/user-menu/style.module.css	Restyles user menu row to behave like a first-class selected/active navigation row.
apps/ui/src/components/user-menu/index.tsx	Makes clicking the user row open Settings directly; adds “active” state and removes theme toggle menu.
apps/ui/src/components/user-menu/index.test.tsx	Adds coverage for Settings navigation + active highlighting behavior.
apps/ui/src/components/site-list/style.module.css	Aligns site row hover/active colors with new sidebar tokens.
apps/ui/src/components/site-list/index.tsx	Prevents MRU auto-expansion when not on the dashboard root (e.g., in Settings).
apps/ui/src/components/site-list/index.test.tsx	Adds tests for MRU expansion behavior on / vs /settings.
apps/ui/src/components/sidebar-layout/style.module.css	Adds shared sidebar row background tokens; fixes collapsed toggle interaction via pointer-events.
apps/ui/src/components/sidebar-layout/index.tsx	Adjusts children rendering order to keep overlay/toggle layering correct.
apps/ui/src/components/settings-view/style.module.css	Major styling update for new settings layout (header tabs, panels, rows, meters, code block).
apps/ui/src/components/settings-view/preferences.ts	Extracts preferences form normalization/diff logic into helpers.
apps/ui/src/components/settings-view/preferences.test.ts	Adds focused tests for new preferences helper behavior.
apps/ui/src/components/settings-view/index.tsx	Replaces legacy preferences DataForm with full tabbed settings experience and new panels (Usage/Keyboard/Skills/MCP).
apps/ui/src/components/settings-view/index.test.tsx	Adds broad coverage for settings save/dirty-blocking/tab rendering/hosted hiding/usage/skills/mcp copy/account actions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[wpmobilebot]

📊 Performance Test Results

Comparing 0f64d77 vs trunk

app-size

Metric	trunk	0f64d77	Diff	Change
App Size (Mac)	1315.63 MB	1315.75 MB	+0.12 MB	⚪ 0.0%

site-editor

Metric	trunk	0f64d77	Diff	Change
load	1114 ms	1118 ms	+4 ms	⚪ 0.0%

site-startup

Metric	trunk	0f64d77	Diff	Change
siteCreation	6597 ms	6500 ms	97 ms	🟢 -1.5%
siteStartup	6057 ms	6557 ms	+500 ms	🔴 8.3%

---

Results are median values from multiple test runs.

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