Redesign global app settings: two tabs, a shared design system, and an account sidebar

[shaunandrews]

Related issues

• Related to STU-2105 — Redesign global app settings (parent), and its sub-issues STU-2106–STU-2111.
• Builds on STU-1882 (Application Preferences parity) and adopts STU-2097 (agentic-features toggle fix, merged from trunk).

How AI was used in this PR

Built with Claude Code as a design exploration, driven interactively from sketches and screenshots. AI wrote the components, the settings design-system CSS, and the unit tests, and merged trunk in mid-branch to adopt the STU-2097 toggle fix. Visual/dark-mode correctness was not verified by AI — it needs a human pass.

Proposed Changes

The settings surface that grew out of STU-1882 shipped as six tabs (Settings, AI, Usage, Keyboard, Skills, MCP), each styled a little differently. This reworks it into a coherent, scannable surface:

• Two tabs — Settings and Agent — built from one shared design system. Usage folds into the account area; Keyboard, Skills, and MCP become cards instead of tabs.
• A persistent account sidebar (identity, AI-credits + preview-sites usage, help, log out) shown on both tabs, sticky on wide windows with Help pinned to the bottom.
• Redesigned usage meters — thin bar with the figure inline at the end (37%, 1/10), rounded-up percentage.
• Instructions editor behind an enable switch with a 3-row auto-growing textarea.
• Signed-out states on the Agent tab: the agentic-features and instructions controls disable and read off, with a short "you must log in" notice.

User impact: fewer places to hunt for a setting, one consistent visual language, and your account/usage always in view without switching tabs.

⚠️ Visual change: needs human review in light + dark mode.

This is a Proof of Concept / directional reference, not merge-ready. Notable follow-ups before it could land:

• The dev-only "Preview scenarios" panel (settings-view/settings-preview.tsx + the usePreview* hooks) is design scaffolding and must be removed. It's hidden in production/tests already; removal steps are in the file header.
• Placement of the Studio experience / Switch to classic card is a guess.
• Copy ("You must log in for agentic features / agent instructions") needs a confirm.
• Suggested PR split lives on the STU-2105 sub-issues.

Testing Instructions

1. Run the agentic UI and open Settings.
2. Settings tab: confirm the two-column layout (Account sidebar + main). Scroll the main column — the Account sidebar stays put and Help pins to the bottom of the viewport. Cards: General → Studio experience → Studio CLI → MCP → Keyboard.
3. Agent tab: Agentic features, Instructions, Skills cards. Toggle Instructions on — the editor starts at ~3 rows and grows as you type; toggle off clears it.
4. Signed-out (use the dev "Preview scenarios" panel → Account → Signed out, or actually log out): the account sidebar shows the sign-in pitch; the Agent tab's Agentic features + Instructions cards mute, their toggles disable, and each shows the sign-in notice.
5. Usage meters: AI credits + Preview sites show a thin bar with the figure at the end; percentage is a whole number; the Preview-sites Reset confirms before deleting.
6. Resize below ~900px — everything collapses to a single stacked column.
7. Check both light and dark color schemes.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?
• Removed the dev-only Preview scenarios panel (settings-preview.tsx)
• Human visual review in light + dark