= {
+ connected: 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20',
+ 'needs-auth': 'bg-amber-500/10 text-amber-600 border-amber-500/20',
+ failed: 'bg-rose-500/10 text-rose-600 border-rose-500/20',
+ disabled: 'bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)] border-[var(--color-border)]',
+}
+
+function createId() {
+ if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID()
+ return `${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+function createStringRow(value = ''): StringRow {
+ return { id: createId(), value }
+}
+
+function createKeyValueRow(key = '', value = ''): KeyValueRow {
+ return { id: createId(), key, value }
+}
+
+function createEmptyDraft(): McpDraft {
+ return {
+ name: '',
+ transport: 'stdio',
+ command: '',
+ args: [createStringRow('')],
+ env: [createKeyValueRow()],
+ url: '',
+ headers: [createKeyValueRow()],
+ headersHelper: '',
+ oauthClientId: '',
+ oauthCallbackPort: '',
+ }
+}
+
+function isStdioConfig(config: McpServerRecord['config']): config is Extract
{
+ return config.type === 'stdio'
+}
+
+function isRemoteConfig(config: McpServerRecord['config']): config is Extract {
+ return config.type === 'http' || config.type === 'sse'
+}
+
+function draftFromServer(server: McpServerRecord): McpDraft {
+ const base = createEmptyDraft()
+ base.name = server.name
+
+ if (isStdioConfig(server.config)) {
+ return {
+ ...base,
+ transport: 'stdio',
+ command: server.config.command,
+ args: (server.config.args.length ? server.config.args : ['']).map((value) => createStringRow(value)),
+ env: Object.entries(server.config.env ?? {}).map(([key, value]) => createKeyValueRow(key, value)).concat(
+ Object.keys(server.config.env ?? {}).length === 0 ? [createKeyValueRow()] : [],
+ ),
+ }
+ }
+
+ if (isRemoteConfig(server.config)) {
+ return {
+ ...base,
+ transport: server.config.type,
+ url: server.config.url,
+ headers: Object.entries(server.config.headers ?? {}).map(([key, value]) => createKeyValueRow(key, value)).concat(
+ Object.keys(server.config.headers ?? {}).length === 0 ? [createKeyValueRow()] : [],
+ ),
+ headersHelper: server.config.headersHelper ?? '',
+ oauthClientId: server.config.oauth?.clientId ?? '',
+ oauthCallbackPort: server.config.oauth?.callbackPort ? String(server.config.oauth.callbackPort) : '',
+ }
+ }
+
+ return base
+}
+
+function rowsToRecord(rows: KeyValueRow[]) {
+ const entries: Array<[string, string]> = []
+ for (const row of rows) {
+ const key = row.key.trim()
+ if (!key) continue
+ entries.push([key, row.value])
+ }
+ return Object.fromEntries(entries)
+}
+
+function rowsToList(rows: StringRow[]) {
+ return rows.map((row) => row.value.trim()).filter(Boolean)
+}
+
+function buildPayload(draft: McpDraft): McpUpsertPayload {
+ if (draft.transport === 'stdio') {
+ return {
+ scope: 'user',
+ config: {
+ type: 'stdio',
+ command: draft.command.trim(),
+ args: rowsToList(draft.args),
+ env: rowsToRecord(draft.env),
+ },
+ }
+ }
+
+ const oauthCallbackPort = draft.oauthCallbackPort.trim()
+ const callbackPortNumber = oauthCallbackPort ? Number(oauthCallbackPort) : undefined
+ const oauthClientId = draft.oauthClientId.trim()
+
+ return {
+ scope: 'user',
+ config: {
+ type: draft.transport,
+ url: draft.url.trim(),
+ headers: rowsToRecord(draft.headers),
+ ...(draft.headersHelper.trim() ? { headersHelper: draft.headersHelper.trim() } : {}),
+ ...(oauthClientId || callbackPortNumber
+ ? {
+ oauth: {
+ ...(oauthClientId ? { clientId: oauthClientId } : {}),
+ ...(callbackPortNumber ? { callbackPort: callbackPortNumber } : {}),
+ },
+ }
+ : {}),
+ },
+ }
+}
+
+function isDraftValid(draft: McpDraft) {
+ if (!draft.name.trim()) return false
+ if (draft.transport === 'stdio') return draft.command.trim().length > 0
+ return draft.url.trim().length > 0
+}
+
+function transportLabel(transport: string, t: ReturnType) {
+ switch (transport) {
+ case 'stdio':
+ return 'STDIO'
+ case 'http':
+ return t('settings.mcp.transport.http')
+ case 'sse':
+ return 'SSE'
+ default:
+ return transport
+ }
+}
+
+function ToggleSwitch({
+ checked,
+ disabled,
+ onChange,
+}: {
+ checked: boolean
+ disabled?: boolean
+ onChange: () => void
+}) {
+ return (
+
+ )
+}
+
+function ArraySection({
+ title,
+ rows,
+ onChange,
+ onAdd,
+ onRemove,
+ keyPlaceholder,
+ valuePlaceholder,
+ singleValue = false,
+ addLabel,
+}: {
+ title: string
+ rows: KeyValueRow[] | StringRow[]
+ onChange: (id: string, field: 'key' | 'value', value: string) => void
+ onAdd: () => void
+ onRemove: (id: string) => void
+ keyPlaceholder?: string
+ valuePlaceholder: string
+ singleValue?: boolean
+ addLabel: string
+}) {
+ return (
+
+ )
+}
+
+function StatCard({ label, value, icon }: { label: string; value: number; icon: string }) {
+ return (
+
+
+ {icon}
+ {label}
+
+
{value}
+
+
+
+
{server.name}
+
+ {server.statusLabel}
+
+
+
+
+ {transportLabel(server.transport, t)}
+
+
+ {t('settings.mcp.scope.user')}
+
+ {server.summary}
+
+ {server.statusDetail && (
+
{server.statusDetail}
+ )}
+
+
+
+
+
+
+
+
+
+
+
{server.name}
+
{server.summary}
+
+ {server.canReconnect && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
{t('settings.mcp.form.rawConfig')}
+
+ {JSON.stringify(server.config, null, 2)}
+
+
+
+
+
+
+
+
+ {editing ? t('settings.mcp.form.editTitle', { name: targetServer!.name }) : t('settings.mcp.form.createTitle')}
+
+
+ {editing ? t('settings.mcp.form.editHint') : t('settings.mcp.form.createHint')}
+
+
+
+
+ {editing && targetServer?.canReconnect && (
+
+ )}
+ {editing && targetServer?.canRemove && (
+
+ )}
+
+
+
+
+
+
+
+
+ {t('settings.mcp.form.scope')}
+
+
+ {t('settings.mcp.globalOnlyHint')}
+
+
+
+
+
+ {(['stdio', 'http', 'sse'] as TransportKind[]).map((transport) => {
+ const active = draft.transport === transport
+ return (
+
+ )
+ })}
+
+
+
+ {editing && (
+
+ {t('settings.mcp.form.transportLocked')}
+
+ )}
+
+ {draft.transport === 'stdio' ? (
+ <>
+
+
+
updateStringRows('args', id, value)}
+ onAdd={() => addRow('args')}
+ onRemove={(id) => removeRow('args', id)}
+ singleValue
+ valuePlaceholder={t('settings.mcp.form.argumentPlaceholder')}
+ addLabel={t('settings.mcp.form.addArgument')}
+ />
+
+ updateKeyValueRows('env', id, field, value)}
+ onAdd={() => addRow('env')}
+ onRemove={(id) => removeRow('env', id)}
+ keyPlaceholder={t('settings.mcp.form.keyPlaceholder')}
+ valuePlaceholder={t('settings.mcp.form.valuePlaceholder')}
+ addLabel={t('settings.mcp.form.addEnv')}
+ />
+
+ ) : (
+ <>
+
+
+ updateKeyValueRows('headers', id, field, value)}
+ onAdd={() => addRow('headers')}
+ onRemove={(id) => removeRow('headers', id)}
+ keyPlaceholder={t('settings.mcp.form.keyPlaceholder')}
+ valuePlaceholder={t('settings.mcp.form.valuePlaceholder')}
+ addLabel={t('settings.mcp.form.addHeader')}
+ />
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {t('settings.mcp.title')}
+
+
+ {t('settings.mcp.description')}
+
+
+ {t('settings.mcp.globalOnlyHint')}
+
+
+
+
+
+
+
+
+
+
+
+ {isLoading && globalServers.length === 0 ? (
+
+ ) : error ? (
+
+
error
+
{error}
+
+
+ ) : globalServers.length === 0 ? (
+
+
dns
+
{t('settings.mcp.empty')}
+
{t('settings.mcp.emptyHint')}
+
+ ) : (
+
+
+
+ {t('settings.mcp.scope.user')}
+
+
{globalServers.length}
+
+ {globalServers.map((server) => (
+ beginEdit(server)}
+ onToggle={() => void handleToggle(server)}
+ t={t}
+ />
+ ))}
+
+
+ )}
+
+
{
+ if (isDeleting) return
+ setPendingDeleteServer(null)
+ }}
+ title={t('settings.mcp.form.deleteTitle')}
+ footer={(
+ <>
+
+
+
+ )}
+ >
+
+ {pendingDeleteServer ? t('settings.mcp.form.deleteConfirmBody', { name: pendingDeleteServer.name }) : ''}
+
+
+