Simplify Settings navigation

[shaunandrews]

Related issues

• Related to Design Exploration: Redesign global app settings: two tabs, a shared design system, and an account sidebar #4316
• Stacked on Add persistent Settings account sidebar #4544

How AI was used in this PR

AI helped extract this independently reviewable slice from the settings redesign, update the composition and tests, and run the verification steps. I reviewed the resulting code and the rendered Settings UI in both color schemes and at responsive widths.

Proposed Changes

• Reduce the Settings header to two clear destinations: Settings for app preferences and Agent for agent-related controls.
• Keep usage visible alongside either destination so people can check AI credits and preview-site limits without navigating away.\n- Present account, usage, and help as an unframed sidebar rail, preserving the hierarchy from the original Design Exploration: Redesign global app settings: two tabs, a shared design system, and an account sidebar #4316 exploration.
• Group keyboard shortcuts and MCP configuration with general settings, and group skills with the controls that shape agent behavior.
• Preserve the existing individual settings and actions while making the overall information architecture easier to scan.

Screenshots

Settings · Light	Agent · Dark

Testing Instructions

• Run npm test -- apps/ui/src/components/settings-view/index.test.tsx apps/ui/src/components/settings-view/account-section.test.tsx apps/ui/src/components/settings-view/ai-panel.test.tsx apps/ui/src/components/settings-view/mcp-panel.test.tsx apps/ui/src/components/settings-view/skills-panel.test.tsx apps/ui/src/components/settings-view/usage-panel.test.tsx.
• Run npm run typecheck.
• Run npm run cli:build:ui, then node apps/cli/dist/cli/main.mjs ui --no-open and open Settings.
• Confirm the Settings tab contains General, Keyboard, CLI, MCP, and Studio experience controls.
• Confirm the Agent tab contains Agentic features, API-key controls when supported, Instructions, and Skills.
• Confirm Account, Usage, and Help remain visible on both tabs.
• Check the layout in light and dark color schemes at desktop, tablet, and narrow widths.

Pre-merge Checklist

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