feat(app): add MCP OAuth authentication UI to settings

[aaranmcguire]

Summary

This PR introduces a complete OAuth authentication interface for MCP (Model Context Protocol) servers in the OpenCode settings dialog, allowing users to manage OAuth credentials for their MCP servers through a dedicated settings tab.

Closes #11478

Features

New MCP Settings Tab

• Added dedicated MCP tab to settings dialog for managing server authentication
• Displays all configured MCP servers with their authentication status
• Shows "Authenticated" badge for servers with stored OAuth credentials
• Manual refresh button to update server status on demand

OAuth Authentication Flow

• Authenticate button: Initiates OAuth flow in browser for unauthenticated servers
• Re-authenticate button: Allows re-authentication for already authenticated servers
• Logout button: Removes stored OAuth credentials and disconnects server
• Handles OAuth state transitions (needs_auth, connected, disabled, failed)
• Proper error handling for auth failures and client registration issues

User Experience

• Loading states during authentication and logout operations
• Success/error toast notifications with descriptive messages
• Displays non-auth error messages inline (e.g., connection failures)
• Gracefully handles servers that don't support OAuth
• Empty state message when no MCP servers are configured

Implementation Details

Architecture

• Component: SettingsMcp in packages/app/src/components/settings-mcp.tsx
• State Management: Uses createStore for loading state (per style guide)
• Data Fetching: createResource for MCP status and config with automatic refetch
• SDK: Uses global SDK context (auth credentials are per-server, not per-directory)

Code Quality

• Type-safe with proper McpStatus types from SDK
• DRY helper function isAuthError() for auth error detection
• Awaits refetch operations to prevent race conditions
• No debug logging or credential exposure
• Explicit error variants in all toast notifications

Translation Support

• Added 16 translation keys to packages/app/src/i18n/en.ts
• Covers all UI elements, buttons, toasts, and error messages
• Consistent naming pattern: settings.mcp.*
• Only includes keys that are actively used in the component

Files Changed

• packages/app/src/components/settings-mcp.tsx - Main MCP settings component (288 lines)
• packages/app/src/components/dialog-settings.tsx - Added MCP tab
• packages/app/src/i18n/en.ts - Added translations

Stats: 3 files changed, 301 insertions(+), 10 deletions(-)

Design Decisions

1. Auth-only interface: Removed toggle switches for enable/disable functionality since that context exists in the status popover (per-directory). Settings page focuses exclusively on OAuth credential management (global).

2. Minimal status display: Only shows "Authenticated" badge, no connection status tags (connected/disabled/failed) to avoid confusion between per-directory connection state and global auth state.

3. Smart logout flow: When logging out, the component handles both connected and disabled servers differently to ensure status updates correctly to "needs_auth".

4. Automatic server enabling: Before authentication, if server is disabled, it's automatically enabled so OAuth can connect it successfully.

5. No automatic polling: Relies on existing global sync mechanism and manual refresh. Updates occur after user actions (authenticate/logout) rather than polling.

Testing

• ✅ TypeScript compilation passes with no errors
• ✅ All pre-commit hooks passed (turbo typecheck on 12 packages)
• ✅ Follows OpenCode style guide (createStore, await patterns, no let statements)
• ✅ All critical code review issues addressed
• ✅ Manual testing completed with OAuth flow

Related Issues

Closes #11478

[github-actions]

Hey! Your PR title Add MCP OAuth authentication UI to settings doesn't follow conventional commit format.

Please update it to start with one of:

• feat: or feat(scope): new feature
• fix: or fix(scope): bug fix
• docs: or docs(scope): documentation changes
• chore: or chore(scope): maintenance tasks
• refactor: or refactor(scope): code refactoring
• test: or test(scope): adding or updating tests

Where scope is the package name (e.g., app, desktop, opencode).

See CONTRIBUTING.md for details.

[github-actions]

The following comment was made by an LLM, it may be inaccurate:

Based on my search, I found potentially related PRs:

Related PRs Found

1. Fix MCP OAuth auth commands to recognize remote servers by default (Fix MCP OAuth auth commands to recognize remote servers by default #5537)

   • Likely addresses OAuth authentication for MCP servers

2. fix: enable MCP server after OAuth completion (fix: enable MCP server after OAuth completion #6960)

   • Directly related - handles auto-enabling servers after OAuth flow (mentioned in PR feat(app): add MCP OAuth authentication UI to settings #11477's design decisions)

3. feat(mcp): add OAuth redirect URI configuration for MCP servers (feat(mcp): add OAuth redirect URI configuration for MCP servers #9034)

   • Related to MCP OAuth infrastructure and configuration

These are related PRs that touch on MCP OAuth functionality, but they appear to be addressing different aspects (command-line auth, server enabling, redirect URI config) rather than being duplicates of the UI settings component being added in PR #11477.

No duplicate PRs found

[github-actions]

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

1. Open an issue describing the bug/feature (if one doesn't exist)
2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.