feat(oauth): browser-initiated dynamic client registration (DCR)

Adds an OAuth 2.1 public client registration flow so MCP clients can self-register via a user-facing consent page instead of requiring manual setup in Settings. Server: - DB migration adds `is_public` and `created_via` columns to oauth_clients - New GET /api/oauth/register/validate — validates DCR params, returns requested scopes; unauthenticated callers get loginRequired flag - New POST /api/oauth/register — creates a public client, saves consent, and redirects with client_id (cookie auth required) - `authenticateClient` / `refreshTokens` skip secret check for public clients (PKCE provides the security guarantee) - `createOAuthClient` accepts options for isPublic/createdVia; public clients store an opaque secret hash instead of a usable secret - `rotateOAuthClientSecret` blocked on public clients - `isValidRedirectUri` extracted as a shared helper - Discovery metadata now advertises registration_endpoint and auth method `none`; token/revoke endpoints no longer require client_secret for public clients Client: - New OAuthRegisterPage (/oauth/register) — loading → optional login-required gate → scope selection → done states - New ScopeGroupPicker component — collapsible groups, indeterminate checkboxes, select-all per group or globally - oauthApi.register.{validate,submit} added to api/client.ts - apiClient exported so it can be reused outside api/client.ts - IntegrationsTab tests fixed for new collapsible section structure - collab_notes fallback changed from undefined to [] in MCP trip tools
2026-06-19 13:21:46 +00:00 · 2026-04-10 05:20:38 +02:00
parent 81a360f9a7
commit 9b1baaf7b8
25 changed files with 739 additions and 235 deletions
@@ -13,6 +13,7 @@ import AtlasPage from './pages/AtlasPage'
 import SharedTripPage from './pages/SharedTripPage'
 import InAppNotificationsPage from './pages/InAppNotificationsPage.tsx'
 import OAuthAuthorizePage from './pages/OAuthAuthorizePage'
+import OAuthRegisterPage from './pages/OAuthRegisterPage'
 import { ToastContainer } from './components/shared/Toast'
 import { TranslationProvider, useTranslation } from './i18n'
 import { authApi } from './api/client'
@@ -166,6 +167,7 @@ export default function App() {
        <Route path="/register" element={<LoginPage />} />
        {/* OAuth 2.1 consent page — intentionally outside ProtectedRoute */}
        <Route path="/oauth/authorize" element={<OAuthAuthorizePage />} />
+        <Route path="/oauth/register" element={<OAuthRegisterPage />} />
        <Route
          path="/dashboard"
          element={
@@ -1,7 +1,7 @@
 import axios, { AxiosInstance } from 'axios'
 import { getSocketId } from './websocket'

-const apiClient: AxiosInstance = axios.create({
+export const apiClient: AxiosInstance = axios.create({
  baseURL: '/api',
  withCredentials: true,
  headers: {
@@ -95,6 +95,15 @@ export const oauthApi = {
    approved: boolean
  }) => apiClient.post('/oauth/authorize', body).then(r => r.data),

+  register: {
+    /** Validate DCR params — called by registration page on load */
+    validate: (params: { redirect_uri: string; client_name?: string; scope?: string; state?: string }) =>
+      apiClient.get('/oauth/register/validate', { params }).then(r => r.data),
+    /** Submit registration approval or cancellation */
+    submit: (body: { client_name: string; redirect_uri: string; scopes: string[]; state?: string; approved: boolean }) =>
+      apiClient.post('/oauth/register', body).then(r => r.data),
+  },
+
  clients: {
    list: () => apiClient.get('/oauth/clients').then(r => r.data),
    create: (data: { name: string; redirect_uris: string[]; allowed_scopes: string[] }) =>
@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { getScopesByGroup } from '../../api/oauthScopes'
+
+interface Props {
+  selected: string[]
+  onChange: (scopes: string[]) => void
+}
+
+const scopesByGroup = getScopesByGroup()
+
+export default function ScopeGroupPicker({ selected, onChange }: Props): React.ReactElement {
+  const [open, setOpen] = useState<Record<string, boolean>>({})
+
+  const allScopeKeys = Object.values(scopesByGroup).flat().map(s => s.scope)
+  const allSelected  = allScopeKeys.every(s => selected.includes(s))
+
+  return (
+    <div className="space-y-1">
+      <div className="flex justify-end mb-2">
+        <button
+          type="button"
+          onClick={() => onChange(allSelected ? [] : allScopeKeys)}
+          className="text-xs px-2 py-0.5 rounded border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+          {allSelected ? 'Deselect all' : 'Select all'}
+        </button>
+      </div>
+      <div className="space-y-1 max-h-96 overflow-y-auto pr-1">
+        {Object.entries(scopesByGroup).map(([group, groupScopes]) => {
+          const groupScopeKeys   = groupScopes.map(s => s.scope)
+          const allGroupSelected = groupScopeKeys.every(s => selected.includes(s))
+          const someGroupSelected = groupScopeKeys.some(s => selected.includes(s))
+          return (
+            <div key={group} className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+              <div className="flex items-center gap-1 px-3 py-2" style={{ background: 'var(--bg-secondary)' }}>
+                <button
+                  type="button"
+                  onClick={() => setOpen(prev => ({ ...prev, [group]: !prev[group] }))}
+                  className="flex items-center gap-1 flex-1 text-xs font-semibold hover:opacity-70 transition-opacity text-left"
+                  style={{ color: 'var(--text-secondary)' }}>
+                  {open[group]
+                    ? <ChevronDown className="w-3 h-3 flex-shrink-0" />
+                    : <ChevronRight className="w-3 h-3 flex-shrink-0" />}
+                  {group}
+                  {someGroupSelected && (
+                    <span className="ml-1.5 text-xs font-normal" style={{ color: 'var(--text-tertiary)' }}>
+                      ({groupScopeKeys.filter(s => selected.includes(s)).length}/{groupScopeKeys.length})
+                    </span>
+                  )}
+                </button>
+                <input
+                  type="checkbox"
+                  checked={allGroupSelected}
+                  ref={el => { if (el) el.indeterminate = someGroupSelected && !allGroupSelected }}
+                  onChange={e => onChange(
+                    e.target.checked
+                      ? [...new Set([...selected, ...groupScopeKeys])]
+                      : selected.filter(s => !groupScopeKeys.includes(s))
+                  )}
+                  className="rounded"
+                  title={allGroupSelected ? `Deselect all ${group}` : `Select all ${group}`}
+                />
+              </div>
+              {open[group] && (
+                <div className="divide-y" style={{ borderColor: 'var(--border-primary)' }}>
+                  {groupScopes.map(({ scope, label, description }) => (
+                    <label
+                      key={scope}
+                      className="flex items-start gap-2.5 px-3 py-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+                      <input
+                        type="checkbox"
+                        checked={selected.includes(scope)}
+                        onChange={e => onChange(
+                          e.target.checked
+                            ? [...selected, scope]
+                            : selected.filter(s => s !== scope)
+                        )}
+                        className="mt-0.5 rounded flex-shrink-0"
+                      />
+                      <div>
+                        <p className="text-xs font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+                        <p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{description}</p>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
@@ -69,18 +69,26 @@ describe('IntegrationsTab', () => {
    expect(codeEl!.textContent).toContain('/mcp');
  });

-  it('FE-COMP-INTEGRATIONS-005: JSON config block is rendered', async () => {
+  it('FE-COMP-INTEGRATIONS-005: JSON config block is rendered when expanded', async () => {
+    const user = userEvent.setup();
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    // Config is collapsed by default — no <pre> yet
+    expect(document.querySelector('pre')).toBeNull();
+    // Expand by clicking the "Client Configuration" toggle
+    await user.click(screen.getByRole('button', { name: /Client Configuration/i }));
    const preEl = document.querySelector('pre');
    expect(preEl).not.toBeNull();
    expect(preEl!.textContent).toContain('mcpServers');
  });

  it('FE-COMP-INTEGRATIONS-006: "no tokens" message shown when token list is empty', async () => {
+    const user = userEvent.setup();
    enableMcp();
    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await screen.findByText('No tokens yet. Create one to connect MCP clients.');
  });

@@ -95,8 +103,11 @@ describe('IntegrationsTab', () => {
        }),
      ),
    );
+    const user = userEvent.setup();
    enableMcp();
    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await screen.findByText('My Token');
    await screen.findByText('Other Token');
  });
@@ -106,6 +117,7 @@ describe('IntegrationsTab', () => {
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    const createBtn = screen.getByRole('button', { name: /Create New Token/i });
    await user.click(createBtn);
    await screen.findByText('Create API Token');
@@ -116,6 +128,7 @@ describe('IntegrationsTab', () => {
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await user.click(screen.getByRole('button', { name: /Create New Token/i }));
    await screen.findByText('Create API Token');
    const modalCreateBtn = screen.getByRole('button', { name: /^Create Token$/i });
@@ -127,6 +140,7 @@ describe('IntegrationsTab', () => {
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await user.click(screen.getByRole('button', { name: /Create New Token/i }));
    await screen.findByText('Create API Token');
    const input = screen.getByPlaceholderText(/Claude Desktop/i);
@@ -153,6 +167,7 @@ describe('IntegrationsTab', () => {
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await user.click(screen.getByRole('button', { name: /Create New Token/i }));
    await screen.findByText('Create API Token');
    const input = screen.getByPlaceholderText(/Claude Desktop/i);
@@ -182,6 +197,7 @@ describe('IntegrationsTab', () => {
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await user.click(screen.getByRole('button', { name: /Create New Token/i }));
    await screen.findByText('Create API Token');
    await user.type(screen.getByPlaceholderText(/Claude Desktop/i), 'test');
@@ -206,6 +222,8 @@ describe('IntegrationsTab', () => {
    const user = userEvent.setup();
    enableMcp();
    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await screen.findByText('Delete Me');
    await user.click(screen.getByTitle('Delete Token'));
    await screen.findByText('This token will stop working immediately. Any MCP client using it will lose access.');
@@ -230,6 +248,8 @@ describe('IntegrationsTab', () => {
    const user = userEvent.setup();
    enableMcp();
    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await screen.findByText('Delete Me');
    await user.click(screen.getByTitle('Delete Token'));
    // There are two "Delete Token" buttons: the trash icon (title) and the confirm button in modal
@@ -289,6 +309,8 @@ describe('IntegrationsTab', () => {
    const user = userEvent.setup();
    enableMcp();
    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await screen.findByText('Cancel Token');
    await user.click(screen.getByTitle('Delete Token'));
    await screen.findByRole('button', { name: /^Cancel$/i });
@@ -319,6 +341,7 @@ describe('IntegrationsTab', () => {
    enableMcp();
    render(<IntegrationsTab />);
    await screen.findByText('MCP Configuration');
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
    await user.click(screen.getByRole('button', { name: /Create New Token/i }));
    await screen.findByText('Create API Token');
    const input = screen.getByPlaceholderText(/Claude Desktop/i);
@@ -328,4 +351,32 @@ describe('IntegrationsTab', () => {
      expect(postCalled).toBe(true);
    });
  });
+
+  it('FE-COMP-INTEGRATIONS-019: default tab is OAuth 2.1 Clients — OAuth hint visible, token list hidden', async () => {
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    // OAuth hint is visible on the default tab
+    expect(screen.getByText(/Register OAuth 2\.1 clients/i)).toBeInTheDocument();
+    // API Tokens "no tokens" message is not rendered
+    expect(screen.queryByText('No tokens yet. Create one to connect MCP clients.')).toBeNull();
+  });
+
+  it('FE-COMP-INTEGRATIONS-020: switching tabs toggles content visibility', async () => {
+    const user = userEvent.setup();
+    enableMcp();
+    render(<IntegrationsTab />);
+    await screen.findByText('MCP Configuration');
+    // Default: OAuth hint visible, token list absent
+    expect(screen.getByText(/Register OAuth 2\.1 clients/i)).toBeInTheDocument();
+    expect(screen.queryByText('No tokens yet. Create one to connect MCP clients.')).toBeNull();
+    // Switch to API Tokens tab
+    await user.click(screen.getByRole('button', { name: /API Tokens/i }));
+    await screen.findByText('No tokens yet. Create one to connect MCP clients.');
+    expect(screen.queryByText(/Register OAuth 2\.1 clients/i)).toBeNull();
+    // Switch back to OAuth tab
+    await user.click(screen.getByRole('button', { name: /OAuth 2\.1 Clients/i }));
+    await screen.findByText(/Register OAuth 2\.1 clients/i);
+    expect(screen.queryByText('No tokens yet. Create one to connect MCP clients.')).toBeNull();
+  });
 });
@@ -2,11 +2,12 @@ import Section from './Section'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
-import { Trash2, Copy, Terminal, Plus, Check, KeyRound, ShieldCheck, ChevronDown, ChevronRight, RefreshCw } from 'lucide-react'
+import { Trash2, Copy, Terminal, Plus, Check, KeyRound, ChevronDown, ChevronRight, RefreshCw } from 'lucide-react'
 import { authApi, oauthApi } from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import PhotoProvidersSection from './PhotoProvidersSection'
-import { getScopesByGroup, ALL_SCOPES } from '../../api/oauthScopes'
+import { ALL_SCOPES } from '../../api/oauthScopes'
+import ScopeGroupPicker from '../OAuth/ScopeGroupPicker'

 interface OAuthPreset {
  id: string
@@ -114,9 +115,14 @@ export default function IntegrationsTab(): React.ReactElement {
  const [oauthRotateId, setOauthRotateId] = useState<string | null>(null)
  const [oauthRotatedSecret, setOauthRotatedSecret] = useState<string | null>(null)
  const [oauthRotating, setOauthRotating] = useState(false)
-  const [oauthScopesOpen, setOauthScopesOpen] = useState<Record<string, boolean>>({})
+  // oauthScopesOpen is managed internally by ScopeGroupPicker
  const [oauthScopesExpanded, setOauthScopesExpanded] = useState<Record<string, boolean>>({})

+  // MCP sub-tab state
+  const [activeMcpTab, setActiveMcpTab] = useState<'oauth' | 'apitokens'>('oauth')
+  const [configOpenOAuth, setConfigOpenOAuth] = useState(false)
+  const [configOpenToken, setConfigOpenToken] = useState(false)
+
  // MCP state
  const [mcpTokens, setMcpTokens] = useState<McpToken[]>([])
  const [mcpModalOpen, setMcpModalOpen] = useState(false)
@@ -127,6 +133,19 @@ export default function IntegrationsTab(): React.ReactElement {
  const [copiedKey, setCopiedKey] = useState<string | null>(null)

  const mcpEndpoint = `${window.location.origin}/mcp`
+  const mcpJsonConfigOAuth = `{
+  "mcpServers": {
+    "trek": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${mcpEndpoint}",
+        "--static-oauth-client-info",
+        "{\\"client_id\\": \\"<your_client_id>\\", \\"client_secret\\": \\"<your_client_secret>\\"}"
+      ]
+    }
+  }
+}`
  const mcpJsonConfig = `{
  "mcpServers": {
    "trek": {
@@ -241,8 +260,6 @@ export default function IntegrationsTab(): React.ReactElement {
    }
  }

-  const scopesByGroup = getScopesByGroup()
-
  return (
    <>
      <PhotoProvidersSection />
@@ -263,113 +280,193 @@ export default function IntegrationsTab(): React.ReactElement {
            </div>
          </div>

-          {/* JSON config box */}
-          <div>
-            <div className="flex items-center justify-between mb-1.5">
-              <label className="block text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</label>
-              <button onClick={() => handleCopy(mcpJsonConfig, 'json')}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
-                style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                {copiedKey === 'json' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
-                {copiedKey === 'json' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
-              </button>
-            </div>
-            <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
-              {mcpJsonConfig}
-            </pre>
-            <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHint')}</p>
+          {/* Sub-tab bar */}
+          <div className="flex gap-1 rounded-lg p-1" style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)' }}>
+            <button
+              onClick={() => setActiveMcpTab('oauth')}
+              className={`flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                activeMcpTab === 'oauth' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
+              }`}>
+              {t('settings.oauth.clients')}
+            </button>
+            <button
+              onClick={() => setActiveMcpTab('apitokens')}
+              className={`flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center justify-center gap-2 ${
+                activeMcpTab === 'apitokens' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
+              }`}>
+              {t('settings.mcp.apiTokens')}
+              <span className="px-1.5 py-0.5 rounded text-[10px] font-medium"
+                style={{ background: 'rgba(245,158,11,0.15)', color: '#b45309', border: '1px solid rgba(245,158,11,0.4)' }}>
+                Deprecated
+              </span>
+            </button>
          </div>

-          {/* OAuth Clients */}
-          <div>
-            <div className="flex items-center gap-2 mb-3">
-              <ShieldCheck className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
-              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.clients')}</label>
-            </div>
-            <p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.clientsHint')}</p>
-
-            <div className="flex justify-end mb-2">
-              <button onClick={() => { setOauthCreateOpen(true); setOauthCreatedClient(null); setOauthNewName(''); setOauthNewUris(''); setOauthNewScopes([]) }}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
-                style={{ background: 'var(--accent-primary, #4f46e5)', color: '#fff' }}>
-                <Plus className="w-3.5 h-3.5" /> {t('settings.oauth.createClient')}
-              </button>
-            </div>
-
-            {oauthClients.length === 0 ? (
-              <p className="text-sm py-3 text-center rounded-lg border" style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)' }}>
-                {t('settings.oauth.noClients')}
-              </p>
-            ) : (
+          {/* OAuth 2.1 Clients tab */}
+          {activeMcpTab === 'oauth' && (
+            <>
+              {/* JSON config — OAuth (collapsible) */}
              <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
-                {oauthClients.map((client, i) => (
-                  <div key={client.id} className="px-4 py-3"
-                    style={{ borderBottom: i < oauthClients.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
-                    <div className="flex items-center gap-3">
-                      <KeyRound className="w-4 h-4 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{client.name}</p>
-                        <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                          {t('settings.oauth.clientId')}: {client.client_id}
-                          <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(client.created_at).toLocaleDateString(locale)}</span>
-                        </p>
-                        <div className="flex flex-wrap gap-1 mt-1.5">
-                          {(oauthScopesExpanded[client.id] ? client.allowed_scopes : client.allowed_scopes.slice(0, 5)).map(s => (
-                            <span key={s} className="px-1.5 py-0.5 rounded text-xs" style={{ background: 'var(--bg-secondary)', color: 'var(--text-tertiary)', border: '1px solid var(--border-primary)' }}>{s}</span>
-                          ))}
-                          {client.allowed_scopes.length > 5 && (
-                            <button
-                              onClick={() => setOauthScopesExpanded(prev => ({ ...prev, [client.id]: !prev[client.id] }))}
-                              className="px-1.5 py-0.5 rounded text-xs transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
-                              style={{ color: 'var(--text-tertiary)', border: '1px solid var(--border-primary)' }}>
-                              {oauthScopesExpanded[client.id] ? '−' : `+${client.allowed_scopes.length - 5}`}
-                            </button>
-                          )}
-                        </div>
-                      </div>
-                      <button onClick={() => setOauthRotateId(client.id)}
-                        className="p-1.5 rounded-lg transition-colors hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20"
-                        style={{ color: 'var(--text-tertiary)' }} title={t('settings.oauth.rotateSecret')}>
-                        <RefreshCw className="w-4 h-4" />
-                      </button>
-                      <button onClick={() => setOauthDeleteId(client.id)}
-                        className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
-                        style={{ color: 'var(--text-tertiary)' }} title={t('settings.oauth.deleteClient')}>
-                        <Trash2 className="w-4 h-4" />
+                <button
+                  onClick={() => setConfigOpenOAuth(o => !o)}
+                  className="w-full flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800"
+                  style={{ background: 'var(--bg-secondary)' }}>
+                  <span className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</span>
+                  {configOpenOAuth ? <ChevronDown className="w-4 h-4" style={{ color: 'var(--text-tertiary)' }} /> : <ChevronRight className="w-4 h-4" style={{ color: 'var(--text-tertiary)' }} />}
+                </button>
+                {configOpenOAuth && (
+                  <div className="p-3 border-t" style={{ borderColor: 'var(--border-primary)' }}>
+                    <div className="flex justify-end mb-1.5">
+                      <button onClick={() => handleCopy(mcpJsonConfigOAuth, 'json-oauth')}
+                        className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                        style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        {copiedKey === 'json-oauth' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+                        {copiedKey === 'json-oauth' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
                      </button>
                    </div>
+                    <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                      {mcpJsonConfigOAuth}
+                    </pre>
+                    <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHintOAuth')}</p>
                  </div>
-                ))}
+                )}
              </div>
-            )}
-          </div>

-          {/* Token list — deprecated */}
-          <div className="rounded-lg border" style={{ borderColor: 'var(--border-primary)' }}>
-            <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: 'var(--border-primary)', background: 'rgba(245,158,11,0.06)' }}>
-              <div className="flex items-center gap-2">
-                <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.apiTokens')}</label>
-                <span className="px-1.5 py-0.5 rounded text-xs font-medium" style={{ background: 'rgba(245,158,11,0.15)', color: '#b45309', border: '1px solid rgba(245,158,11,0.4)' }}>
-                  Deprecated
-                </span>
+              <div>
+                <p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.clientsHint')}</p>
+
+                <div className="flex justify-end mb-2">
+                  <button onClick={() => { setOauthCreateOpen(true); setOauthCreatedClient(null); setOauthNewName(''); setOauthNewUris(''); setOauthNewScopes([]) }}
+                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors bg-slate-900 text-white hover:bg-slate-700">
+                    <Plus className="w-3.5 h-3.5" /> {t('settings.oauth.createClient')}
+                  </button>
+                </div>
+
+                {oauthClients.length === 0 ? (
+                  <p className="text-sm py-3 text-center rounded-lg border" style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)' }}>
+                    {t('settings.oauth.noClients')}
+                  </p>
+                ) : (
+                  <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                    {oauthClients.map((client, i) => (
+                      <div key={client.id} className="px-4 py-3"
+                        style={{ borderBottom: i < oauthClients.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                        <div className="flex items-center gap-3">
+                          <KeyRound className="w-4 h-4 flex-shrink-0" style={{ color: 'var(--text-tertiary)' }} />
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{client.name}</p>
+                            <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                              {t('settings.oauth.clientId')}: {client.client_id}
+                              <span className="ml-3 font-sans">{t('settings.mcp.tokenCreatedAt')} {new Date(client.created_at).toLocaleDateString(locale)}</span>
+                            </p>
+                            <div className="flex flex-wrap gap-1 mt-1.5">
+                              {(oauthScopesExpanded[client.id] ? client.allowed_scopes : client.allowed_scopes.slice(0, 5)).map(s => (
+                                <span key={s} className="px-1.5 py-0.5 rounded text-xs" style={{ background: 'var(--bg-secondary)', color: 'var(--text-tertiary)', border: '1px solid var(--border-primary)' }}>{s}</span>
+                              ))}
+                              {client.allowed_scopes.length > 5 && (
+                                <button
+                                  onClick={() => setOauthScopesExpanded(prev => ({ ...prev, [client.id]: !prev[client.id] }))}
+                                  className="px-1.5 py-0.5 rounded text-xs transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                                  style={{ color: 'var(--text-tertiary)', border: '1px solid var(--border-primary)' }}>
+                                  {oauthScopesExpanded[client.id] ? '−' : `+${client.allowed_scopes.length - 5}`}
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                          <button onClick={() => setOauthRotateId(client.id)}
+                            className="p-1.5 rounded-lg transition-colors hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20"
+                            style={{ color: 'var(--text-tertiary)' }} title={t('settings.oauth.rotateSecret')}>
+                            <RefreshCw className="w-4 h-4" />
+                          </button>
+                          <button onClick={() => setOauthDeleteId(client.id)}
+                            className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                            style={{ color: 'var(--text-tertiary)' }} title={t('settings.oauth.deleteClient')}>
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
              </div>
-              <button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors opacity-60"
-                style={{ background: 'var(--bg-tertiary, #e5e7eb)', color: 'var(--text-secondary)' }}>
-                <Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
-              </button>
-            </div>
-            <div className="px-4 py-2.5 flex items-start gap-2 border-b" style={{ borderColor: 'var(--border-primary)', background: 'rgba(245,158,11,0.06)' }}>
-              <span className="text-amber-500 mt-0.5 flex-shrink-0">⚠</span>
-              <p className="text-xs" style={{ color: '#92400e' }}>{t('settings.mcp.apiTokensDeprecated')}</p>
-            </div>
-            <div className="p-4">
+
+              {/* Active OAuth Sessions */}
+              {oauthSessions.length > 0 && (
+                <div>
+                  <label className="text-sm font-medium block mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.activeSessions')}</label>
+                  <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                    {oauthSessions.map((session, i) => (
+                      <div key={session.id} className="flex items-center gap-3 px-4 py-3"
+                        style={{ borderBottom: i < oauthSessions.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{session.client_name}</p>
+                          <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                            {t('settings.oauth.sessionScopes')}: {session.scopes.join(', ')}
+                            <span className="ml-3">{t('settings.oauth.sessionExpires')} {new Date(session.access_token_expires_at).toLocaleDateString(locale)}</span>
+                          </p>
+                        </div>
+                        <button onClick={() => setOauthRevokeId(session.id)}
+                          className="px-2.5 py-1 rounded text-xs border transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-tertiary)' }}>
+                          {t('settings.oauth.revoke')}
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* API Tokens tab (deprecated) */}
+          {activeMcpTab === 'apitokens' && (
+            <>
+              <div className="flex items-baseline gap-2 px-3 py-2.5 rounded-lg" style={{ background: 'rgba(245,158,11,0.06)', border: '1px solid rgba(245,158,11,0.3)' }}>
+                <span className="text-amber-500 flex-shrink-0 leading-none">⚠</span>
+                <p className="text-xs" style={{ color: '#92400e' }}>{t('settings.mcp.apiTokensDeprecated')}</p>
+              </div>
+
+              {/* JSON config — API Token (collapsible) */}
+              <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                <button
+                  onClick={() => setConfigOpenToken(o => !o)}
+                  className="w-full flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800"
+                  style={{ background: 'var(--bg-secondary)' }}>
+                  <span className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.mcp.clientConfig')}</span>
+                  {configOpenToken ? <ChevronDown className="w-4 h-4" style={{ color: 'var(--text-tertiary)' }} /> : <ChevronRight className="w-4 h-4" style={{ color: 'var(--text-tertiary)' }} />}
+                </button>
+                {configOpenToken && (
+                  <div className="p-3 border-t" style={{ borderColor: 'var(--border-primary)' }}>
+                    <div className="flex justify-end mb-1.5">
+                      <button onClick={() => handleCopy(mcpJsonConfig, 'json-token')}
+                        className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+                        style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                        {copiedKey === 'json-token' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+                        {copiedKey === 'json-token' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
+                      </button>
+                    </div>
+                    <pre className="p-3 rounded-lg text-xs font-mono overflow-x-auto border" style={{ background: 'var(--bg-secondary)', borderColor: 'var(--border-primary)', color: 'var(--text-primary)' }}>
+                      {mcpJsonConfig}
+                    </pre>
+                    <p className="mt-1.5 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.mcp.clientConfigHint')}</p>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex justify-end">
+                <button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors opacity-60"
+                  style={{ background: 'var(--bg-tertiary, #e5e7eb)', color: 'var(--text-secondary)' }}>
+                  <Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
+                </button>
+              </div>
+
              {mcpTokens.length === 0 ? (
                <p className="text-sm py-2 text-center" style={{ color: 'var(--text-tertiary)' }}>
                  {t('settings.mcp.noTokens')}
                </p>
              ) : (
-                <div className="space-y-0 rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+                <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
                  {mcpTokens.map((token, i) => (
                    <div key={token.id} className="flex items-center gap-3 px-4 py-3"
                      style={{ borderBottom: i < mcpTokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
@@ -392,33 +489,7 @@ export default function IntegrationsTab(): React.ReactElement {
                  ))}
                </div>
              )}
-            </div>
-          </div>
-
-          {/* Active OAuth Sessions */}
-          {oauthSessions.length > 0 && (
-            <div>
-              <label className="text-sm font-medium block mb-2" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.activeSessions')}</label>
-              <div className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
-                {oauthSessions.map((session, i) => (
-                  <div key={session.id} className="flex items-center gap-3 px-4 py-3"
-                    style={{ borderBottom: i < oauthSessions.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{session.client_name}</p>
-                      <p className="text-xs mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                        {t('settings.oauth.sessionScopes')}: {session.scopes.join(', ')}
-                        <span className="ml-3">{t('settings.oauth.sessionExpires')} {new Date(session.access_token_expires_at).toLocaleDateString(locale)}</span>
-                      </p>
-                    </div>
-                    <button onClick={() => setOauthRevokeId(session.id)}
-                      className="px-2.5 py-1 rounded text-xs border transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
-                      style={{ borderColor: 'var(--border-primary)', color: 'var(--text-tertiary)' }}>
-                      {t('settings.oauth.revoke')}
-                    </button>
-                  </div>
-                ))}
-              </div>
-            </div>
+            </>
          )}
        </Section>
      )}
@@ -436,7 +507,7 @@ export default function IntegrationsTab(): React.ReactElement {
                  <input type="text" value={mcpNewName} onChange={e => setMcpNewName(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && handleCreateMcpToken()}
                    placeholder={t('settings.mcp.modal.tokenNamePlaceholder')}
-                    className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+                    className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-400"
                    style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
                    autoFocus />
                </div>
@@ -446,8 +517,7 @@ export default function IntegrationsTab(): React.ReactElement {
                    {t('common.cancel')}
                  </button>
                  <button onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
-                    className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
-                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
                    {mcpCreating ? t('settings.mcp.modal.creating') : t('settings.mcp.modal.create')}
                  </button>
                </div>
@@ -471,8 +541,7 @@ export default function IntegrationsTab(): React.ReactElement {
                </div>
                <div className="flex justify-end">
                  <button onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
-                    className="px-4 py-2 rounded-lg text-sm font-medium text-white"
-                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">
                    {t('settings.mcp.modal.done')}
                  </button>
                </div>
@@ -536,7 +605,7 @@ export default function IntegrationsTab(): React.ReactElement {
                  <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.clientName')}</label>
                  <input type="text" value={oauthNewName} onChange={e => setOauthNewName(e.target.value)}
                    placeholder={t('settings.oauth.modal.clientNamePlaceholder')}
-                    className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+                    className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-400"
                    style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
                    autoFocus />
                </div>
@@ -546,78 +615,15 @@ export default function IntegrationsTab(): React.ReactElement {
                  <textarea value={oauthNewUris} onChange={e => setOauthNewUris(e.target.value)}
                    placeholder={t('settings.oauth.modal.redirectUrisPlaceholder')}
                    rows={3}
-                    className="w-full px-3 py-2.5 border rounded-lg text-sm font-mono resize-none focus:outline-none focus:ring-2 focus:ring-indigo-300"
+                    className="w-full px-3 py-2.5 border rounded-lg text-sm font-mono resize-none focus:outline-none focus:ring-2 focus:ring-slate-400"
                    style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)', color: 'var(--text-primary)' }} />
                  <p className="mt-1 text-xs" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.modal.redirectUrisHint')}</p>
                </div>

                <div>
-                  <div className="flex items-center justify-between mb-1">
-                    <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.scopes')}</label>
-                    <button type="button"
-                      onClick={() => {
-                        const allScopes = Object.values(scopesByGroup).flat().map(s => s.scope)
-                        const allSelected = allScopes.every(s => oauthNewScopes.includes(s))
-                        setOauthNewScopes(allSelected ? [] : allScopes)
-                      }}
-                      className="text-xs px-2 py-0.5 rounded border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
-                      style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
-                      {Object.values(scopesByGroup).flat().every(s => oauthNewScopes.includes(s.scope))
-                        ? t('settings.oauth.modal.deselectAll')
-                        : t('settings.oauth.modal.selectAll')}
-                    </button>
-                  </div>
+                  <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>{t('settings.oauth.modal.scopes')}</label>
                  <p className="text-xs mb-2" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.modal.scopesHint')}</p>
-                  <div className="space-y-1 max-h-56 overflow-y-auto pr-1">
-                    {Object.entries(scopesByGroup).map(([group, groupScopes]) => {
-                      const groupScopeKeys = groupScopes.map(s => s.scope)
-                      const allGroupSelected = groupScopeKeys.every(s => oauthNewScopes.includes(s))
-                      const someGroupSelected = groupScopeKeys.some(s => oauthNewScopes.includes(s))
-                      return (
-                        <div key={group} className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
-                          <div className="flex items-center gap-1 px-3 py-2" style={{ background: 'var(--bg-secondary)' }}>
-                            <button type="button"
-                              onClick={() => setOauthScopesOpen(prev => ({ ...prev, [group]: !prev[group] }))}
-                              className="flex items-center gap-1 flex-1 text-xs font-semibold hover:opacity-70 transition-opacity text-left"
-                              style={{ color: 'var(--text-secondary)' }}>
-                              {oauthScopesOpen[group] ? <ChevronDown className="w-3 h-3 flex-shrink-0" /> : <ChevronRight className="w-3 h-3 flex-shrink-0" />}
-                              {group}
-                              {someGroupSelected && (
-                                <span className="ml-1.5 text-xs font-normal" style={{ color: 'var(--text-tertiary)' }}>
-                                  ({groupScopeKeys.filter(s => oauthNewScopes.includes(s)).length}/{groupScopeKeys.length})
-                                </span>
-                              )}
-                            </button>
-                            <input type="checkbox"
-                              checked={allGroupSelected}
-                              ref={el => { if (el) el.indeterminate = someGroupSelected && !allGroupSelected }}
-                              onChange={e => setOauthNewScopes(prev =>
-                                e.target.checked
-                                  ? [...new Set([...prev, ...groupScopeKeys])]
-                                  : prev.filter(s => !groupScopeKeys.includes(s))
-                              )}
-                              className="rounded" title={allGroupSelected ? `Deselect all ${group}` : `Select all ${group}`} />
-                          </div>
-                          {oauthScopesOpen[group] && (
-                            <div className="divide-y" style={{ borderColor: 'var(--border-primary)' }}>
-                              {groupScopes.map(({ scope, label, description }) => (
-                                <label key={scope} className="flex items-start gap-2.5 px-3 py-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
-                                  <input type="checkbox"
-                                    checked={oauthNewScopes.includes(scope)}
-                                    onChange={e => setOauthNewScopes(prev => e.target.checked ? [...prev, scope] : prev.filter(s => s !== scope))}
-                                    className="mt-0.5 rounded flex-shrink-0" />
-                                  <div>
-                                    <p className="text-xs font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
-                                    <p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{description}</p>
-                                  </div>
-                                </label>
-                              ))}
-                            </div>
-                          )}
-                        </div>
-                      )
-                    })}
-                  </div>
+                  <ScopeGroupPicker selected={oauthNewScopes} onChange={setOauthNewScopes} />
                </div>

                <div className="flex gap-2 justify-end pt-1">
@@ -627,8 +633,7 @@ export default function IntegrationsTab(): React.ReactElement {
                  </button>
                  <button onClick={handleCreateOAuthClient}
                    disabled={!oauthNewName.trim() || !oauthNewUris.trim() || oauthCreating}
-                    className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
-                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
                    {oauthCreating ? t('settings.oauth.modal.creating') : t('settings.oauth.modal.create')}
                  </button>
                </div>
@@ -672,8 +677,7 @@ export default function IntegrationsTab(): React.ReactElement {

                <div className="flex justify-end">
                  <button onClick={() => { setOauthCreateOpen(false); setOauthCreatedClient(null) }}
-                    className="px-4 py-2 rounded-lg text-sm font-medium text-white"
-                    style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                    className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">
                    {t('settings.mcp.modal.done')}
                  </button>
                </div>
@@ -717,8 +721,7 @@ export default function IntegrationsTab(): React.ReactElement {
                {t('common.cancel')}
              </button>
              <button onClick={() => handleRotateSecret(oauthRotateId)} disabled={oauthRotating}
-                className="px-4 py-2 rounded-lg text-sm font-medium text-white disabled:opacity-50"
-                style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
                {oauthRotating ? t('settings.oauth.rotateSecretConfirming') : t('settings.oauth.rotateSecretConfirm')}
              </button>
            </div>
@@ -750,8 +753,7 @@ export default function IntegrationsTab(): React.ReactElement {
            </div>
            <div className="flex justify-end">
              <button onClick={() => setOauthRotatedSecret(null)}
-                className="px-4 py-2 rounded-lg text-sm font-medium text-white"
-                style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">
                {t('settings.mcp.modal.done')}
              </button>
            </div>
@@ -233,6 +233,7 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'نقطة نهاية MCP',
  'settings.mcp.clientConfig': 'إعداد العميل',
  'settings.mcp.clientConfigHint': 'استبدل <your_token> برمز API من القائمة أدناه. قد يحتاج مسار npx إلى ضبط وفق نظامك (مثلاً C:\\PROGRA~1\\nodejs\\npx.cmd على Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'نسخ',
  'settings.mcp.copied': 'تم النسخ!',
  'settings.mcp.apiTokens': 'رموز API',
@@ -295,6 +295,7 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'Endpoint MCP',
  'settings.mcp.clientConfig': 'Configuração do cliente',
  'settings.mcp.clientConfigHint': 'Substitua <your_token> por um token de API da lista abaixo. O caminho para o npx pode precisar ser ajustado para o seu sistema (ex.: C:\\PROGRA~1\\nodejs\\npx.cmd no Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Copiar',
  'settings.mcp.copied': 'Copiado!',
  'settings.mcp.apiTokens': 'Tokens de API',
@@ -181,6 +181,7 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'MCP endpoint',
  'settings.mcp.clientConfig': 'Konfigurace klienta',
  'settings.mcp.clientConfigHint': 'Nahraďte <your_token> API tokenem ze seznamu níže. Cestu k npx může být nutné upravit pro váš systém (např. C:\\PROGRA~1\\nodejs\\npx.cmd ve Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Kopírovat',
  'settings.mcp.copied': 'Zkopírováno!',
  'settings.mcp.apiTokens': 'API tokeny',
@@ -228,6 +228,7 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'MCP-Endpunkt',
  'settings.mcp.clientConfig': 'Client-Konfiguration',
  'settings.mcp.clientConfigHint': 'Ersetze <your_token> durch ein API-Token aus der Liste unten. Der Pfad zu npx muss ggf. für dein System angepasst werden (z. B. C:\\PROGRA~1\\nodejs\\npx.cmd unter Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Kopieren',
  'settings.mcp.copied': 'Kopiert!',
  'settings.mcp.apiTokens': 'API-Tokens',
@@ -249,6 +249,7 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'MCP Endpoint',
  'settings.mcp.clientConfig': 'Client Configuration',
  'settings.mcp.clientConfigHint': 'Replace <your_token> with an API token from the list below. The path to npx may need to be adjusted for your system (e.g. C:\\PROGRA~1\\nodejs\\npx.cmd on Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Copy',
  'settings.mcp.copied': 'Copied!',
  'settings.mcp.apiTokens': 'API Tokens',
@@ -229,6 +229,7 @@ const es: Record<string, string> = {
  'settings.mcp.endpoint': 'Endpoint MCP',
  'settings.mcp.clientConfig': 'Configuración del cliente',
  'settings.mcp.clientConfigHint': 'Reemplaza <your_token> con un token de la lista de abajo. Es posible que debas ajustar la ruta de npx según tu sistema (p. ej. C:\\PROGRA~1\\nodejs\\npx.cmd en Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Copiar',
  'settings.mcp.copied': '¡Copiado!',
  'settings.mcp.apiTokens': 'Tokens de API',
@@ -228,6 +228,7 @@ const fr: Record<string, string> = {
  'settings.mcp.endpoint': 'Point de terminaison MCP',
  'settings.mcp.clientConfig': 'Configuration du client',
  'settings.mcp.clientConfigHint': 'Remplacez <your_token> par un token API de la liste ci-dessous. Le chemin vers npx devra peut-être être ajusté selon votre système (ex. C:\\PROGRA~1\\nodejs\\npx.cmd sous Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Copier',
  'settings.mcp.copied': 'Copié !',
  'settings.mcp.apiTokens': 'Tokens API',
@@ -180,6 +180,7 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'MCP végpont',
  'settings.mcp.clientConfig': 'Kliens konfiguráció',
  'settings.mcp.clientConfigHint': 'Cserélje ki a <your_token> részt egy API tokenre az alábbi listából. Az npx elérési útját szükség lehet módosítani a rendszeréhez (pl. C:\\PROGRA~1\\nodejs\\npx.cmd Windows-on).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Másolás',
  'settings.mcp.copied': 'Másolva!',
  'settings.mcp.apiTokens': 'API tokenek',
@@ -180,6 +180,7 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'Endpoint MCP',
  'settings.mcp.clientConfig': 'Configurazione client',
  'settings.mcp.clientConfigHint': 'Sostituisci <your_token> con un token API dalla lista sottostante. Il percorso di npx potrebbe dover essere adattato per il tuo sistema (es. C:\\PROGRA~1\\nodejs\\npx.cmd su Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Copia',
  'settings.mcp.copied': 'Copiato!',
  'settings.mcp.apiTokens': 'Token API',
@@ -228,6 +228,7 @@ const nl: Record<string, string> = {
  'settings.mcp.endpoint': 'MCP-eindpunt',
  'settings.mcp.clientConfig': 'Clientconfiguratie',
  'settings.mcp.clientConfigHint': 'Vervang <your_token> door een API-token uit de onderstaande lijst. Het pad naar npx moet mogelijk worden aangepast voor jouw systeem (bijv. C:\\PROGRA~1\\nodejs\\npx.cmd op Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Kopiëren',
  'settings.mcp.copied': 'Gekopieerd!',
  'settings.mcp.apiTokens': 'API-tokens',
@@ -198,6 +198,7 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'settings.mcp.endpoint': 'Endpoint MCP',
  'settings.mcp.clientConfig': 'Konfiguracja klienta',
  'settings.mcp.clientConfigHint': 'Zastąp <your_token> tokenem API z listy poniżej. Ścieżka do npx może wymagać dostosowania do Twojego systemu (np. C:\\PROGRA~1\\nodejs\\npx.cmd w systemie Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Kopiuj',
  'settings.mcp.copied': 'Skopiowano!',
  'settings.mcp.apiTokens': 'Tokeny API',
@@ -228,6 +228,7 @@ const ru: Record<string, string> = {
  'settings.mcp.endpoint': 'MCP-эндпоинт',
  'settings.mcp.clientConfig': 'Конфигурация клиента',
  'settings.mcp.clientConfigHint': 'Замените <your_token> на API-токен из списка ниже. Путь к npx может потребовать настройки для вашей системы (например, C:\\PROGRA~1\\nodejs\\npx.cmd в Windows).',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': 'Копировать',
  'settings.mcp.copied': 'Скопировано!',
  'settings.mcp.apiTokens': 'API-токены',
@@ -228,6 +228,7 @@ const zh: Record<string, string> = {
  'settings.mcp.endpoint': 'MCP 端点',
  'settings.mcp.clientConfig': '客户端配置',
  'settings.mcp.clientConfigHint': '将 <your_token> 替换为下方列表中的 API 令牌。npx 的路径可能需要根据您的系统进行调整（例如 Windows 上为 C:\\PROGRA~1\\nodejs\\npx.cmd）。',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': '复制',
  'settings.mcp.copied': '已复制！',
  'settings.mcp.apiTokens': 'API 令牌',
@@ -220,6 +220,7 @@ const zhTw: Record<string, string> = {
  'settings.mcp.endpoint': 'MCP 端點',
  'settings.mcp.clientConfig': '客戶端配置',
  'settings.mcp.clientConfigHint': '將 <your_token> 替換為下方列表中的 API 令牌。npx 的路徑可能需要根據您的系統進行調整（例如 Windows 上為 C:\\PROGRA~1\\nodejs\\npx.cmd）。',
+  'settings.mcp.clientConfigHintOAuth': 'Replace <your_client_id> and <your_client_secret> with the credentials shown in the OAuth 2.1 client you created above. mcp-remote will open your browser to complete the authorization the first time you connect. The path to npx may need to be adjusted for your system (e.g. C:\PROGRA~1\nodejs\npx.cmd on Windows).',
  'settings.mcp.copy': '複製',
  'settings.mcp.copied': '已複製！',
  'settings.mcp.apiTokens': 'API 令牌',
@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react'
+import { useAuthStore } from '../store/authStore'
+import { oauthApi } from '../api/client'
+import { ALL_SCOPES } from '../api/oauthScopes'
+import ScopeGroupPicker from '../components/OAuth/ScopeGroupPicker'
+import { Lock, ShieldCheck, AlertTriangle, Loader2, LogIn } from 'lucide-react'
+
+interface ValidateResult {
+  valid: boolean
+  error?: string
+  error_description?: string
+  client_name?: string
+  requested_scopes?: string[]
+  loginRequired?: boolean
+}
+
+type PageState = 'loading' | 'login_required' | 'ready' | 'error' | 'done'
+
+export default function OAuthRegisterPage(): React.ReactElement {
+  const { isLoading: authLoading, loadUser } = useAuthStore()
+  const [pageState, setPageState]       = useState<PageState>('loading')
+  const [validation, setValidation]     = useState<ValidateResult | null>(null)
+  const [selectedScopes, setSelectedScopes] = useState<string[]>([])
+  const [submitting, setSubmitting]     = useState(false)
+  const [errorMsg, setErrorMsg]         = useState<string | null>(null)
+
+  const params     = new URLSearchParams(window.location.search)
+  const redirectUri = params.get('redirect_uri') || ''
+  const clientName  = params.get('client_name') || ''
+  const scope       = params.get('scope') || ''
+  const state       = params.get('state') || ''
+
+  useEffect(() => {
+    loadUser({ silent: true }).catch(() => {})
+  }, [loadUser])
+
+  useEffect(() => {
+    if (authLoading) return
+    validateRequest()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authLoading])
+
+  async function validateRequest() {
+    setPageState('loading')
+    try {
+      const result: ValidateResult = await oauthApi.register.validate({
+        redirect_uri: redirectUri,
+        client_name:  clientName,
+        scope,
+        state,
+      })
+      setValidation(result)
+
+      if (!result.valid) {
+        setPageState('error')
+        setErrorMsg(result.error_description || result.error || 'Invalid registration request')
+        return
+      }
+
+      if (result.loginRequired) {
+        setPageState('login_required')
+        return
+      }
+
+      // Pre-check the scopes the client requested; fall back to read-only defaults
+      const requested = result.requested_scopes ?? []
+      setSelectedScopes(
+        requested.length > 0
+          ? requested
+          : ALL_SCOPES.filter(s => s.endsWith(':read')),
+      )
+      setPageState('ready')
+    } catch {
+      setPageState('error')
+      setErrorMsg('Failed to validate registration request. Please try again.')
+    }
+  }
+
+  function handleLoginRedirect() {
+    const next = '/oauth/register?' + params.toString()
+    window.location.href = '/login?redirect=' + encodeURIComponent(next)
+  }
+
+  async function submitRegistration(approved: boolean) {
+    setSubmitting(true)
+    try {
+      const result = await oauthApi.register.submit({
+        client_name:  validation?.client_name || clientName || 'MCP Client',
+        redirect_uri: redirectUri,
+        scopes:       approved ? selectedScopes : [],
+        state,
+        approved,
+      })
+      setPageState('done')
+      window.location.href = result.redirect
+    } catch {
+      setPageState('error')
+      setErrorMsg('Registration failed. Please try again.')
+      setSubmitting(false)
+    }
+  }
+
+  // ---- Render states ----
+
+  if (pageState === 'loading' || pageState === 'done') {
+    return (
+      <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg-primary)' }}>
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="w-8 h-8 animate-spin" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>Loading…</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (pageState === 'error') {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
+        <div className="w-full max-w-sm rounded-xl shadow-lg p-8 space-y-4 text-center" style={{ background: 'var(--bg-card)' }}>
+          <AlertTriangle className="w-10 h-10 mx-auto text-red-500" />
+          <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>Registration Error</h1>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{errorMsg}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (pageState === 'login_required') {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
+        <div className="w-full max-w-sm rounded-xl shadow-lg p-8 space-y-5" style={{ background: 'var(--bg-card)' }}>
+          <div className="text-center space-y-2">
+            <Lock className="w-10 h-10 mx-auto" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
+            <h1 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>Sign in to continue</h1>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+              <strong>{clientName || 'This application'}</strong> wants to register for access to your TREK account. Please sign in first.
+            </p>
+          </div>
+          <button
+            onClick={handleLoginRedirect}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-white"
+            style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+            <LogIn className="w-4 h-4" />
+            Sign in to TREK
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  // pageState === 'ready'
+  const displayName = validation?.client_name || clientName || 'MCP Client'
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--bg-primary)' }}>
+      <div className="w-full max-w-2xl rounded-xl shadow-lg overflow-hidden flex flex-col sm:flex-row" style={{ background: 'var(--bg-card)' }}>
+
+        {/* Left panel — identity + actions */}
+        <div className="sm:w-64 sm:flex-shrink-0 flex flex-col px-8 py-8 sm:border-r" style={{ borderColor: 'var(--border-primary)' }}>
+          <div className="flex-1 space-y-4">
+            <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
+              <ShieldCheck className="w-6 h-6" style={{ color: 'var(--accent-primary, #4f46e5)' }} />
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide mb-1" style={{ color: 'var(--text-tertiary)' }}>Client Registration</p>
+              <h1 className="text-lg font-semibold leading-snug" style={{ color: 'var(--text-primary)' }}>
+                {displayName}
+              </h1>
+              <p className="text-sm mt-2" style={{ color: 'var(--text-secondary)' }}>
+                This application wants to access your TREK account. Choose which permissions to grant.
+              </p>
+            </div>
+
+            <div className="text-xs rounded-lg p-2.5 border" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)' }}>
+              <p className="font-medium mb-0.5" style={{ color: 'var(--text-secondary)' }}>Will redirect to</p>
+              <p className="font-mono break-all" style={{ color: 'var(--text-tertiary)' }}>{redirectUri}</p>
+            </div>
+          </div>
+
+          <div className="mt-8 space-y-2">
+            <p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>
+              Only grant access to applications you trust. You can revoke this at any time in Settings.
+            </p>
+            <button
+              onClick={() => submitRegistration(true)}
+              disabled={submitting || selectedScopes.length === 0}
+              className="w-full px-4 py-2.5 rounded-lg text-sm font-medium text-white disabled:opacity-60 transition-opacity"
+              style={{ background: 'var(--accent-primary, #4f46e5)' }}>
+              {submitting ? 'Registering…' : 'Register & Authorize'}
+            </button>
+            <button
+              onClick={() => submitRegistration(false)}
+              disabled={submitting}
+              className="w-full px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-60"
+              style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+              Cancel
+            </button>
+          </div>
+        </div>
+
+        {/* Right panel — scope picker */}
+        <div className="flex-1 px-6 py-8 overflow-y-auto max-h-[80vh] sm:max-h-[600px]">
+          <div className="space-y-4">
+            <p className="text-xs font-medium uppercase tracking-wide" style={{ color: 'var(--text-tertiary)' }}>
+              Select permissions
+            </p>
+            <ScopeGroupPicker selected={selectedScopes} onChange={setSelectedScopes} />
+          </div>
+        </div>
+
+      </div>
+    </div>
+  )
+}