From 3c719f05a178e162e2ffc0e5e5643f42a89dbe45 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Sun, 28 Dec 2025 17:07:57 +0100
Subject: [PATCH] refactor: split mcp-servers-section into modular components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactored 1348-line monolithic file into proper folder structure
following folder-pattern.md conventions:

Structure:
- components/ - UI components (card, header, settings, warning)
- dialogs/ - 5 dialog components (add/edit, delete, import, json edit)
- hooks/use-mcp-servers.ts - all state management & handlers
- types.ts, constants.ts, utils.tsx - shared code

Main file reduced from 1348 to 192 lines (composition only).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../mcp-servers/components/index.ts           |    4 +
 .../components/mcp-permission-settings.tsx    |   62 +
 .../components/mcp-server-card.tsx            |  169 ++
 .../components/mcp-server-header.tsx          |   87 +
 .../components/mcp-tools-warning.tsx          |   25 +
 .../settings-view/mcp-servers/constants.ts    |   14 +
 .../dialogs/add-edit-server-dialog.tsx        |  161 ++
 .../dialogs/delete-server-dialog.tsx          |   42 +
 .../dialogs/global-json-edit-dialog.tsx       |   82 +
 .../dialogs/import-json-dialog.tsx            |   69 +
 .../mcp-servers/dialogs/index.ts              |    5 +
 .../mcp-servers/dialogs/json-edit-dialog.tsx  |   77 +
 .../settings-view/mcp-servers/hooks/index.ts  |    1 +
 .../mcp-servers/hooks/use-mcp-servers.ts      |  678 ++++++++
 .../views/settings-view/mcp-servers/index.ts  |    1 +
 .../mcp-servers/mcp-servers-section.tsx       | 1438 ++---------------
 .../mcp-servers/mcp-tools-list.tsx            |    4 +-
 .../views/settings-view/mcp-servers/types.ts  |   32 +
 .../views/settings-view/mcp-servers/utils.tsx |   51 +
 19 files changed, 1703 insertions(+), 1299 deletions(-)
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-permission-settings.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/constants.ts
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/types.ts
 create mode 100644 apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx

diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts b/apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts
new file mode 100644
index 00000000..db49d81d
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts
@@ -0,0 +1,4 @@
+export { MCPServerHeader } from './mcp-server-header';
+export { MCPPermissionSettings } from './mcp-permission-settings';
+export { MCPToolsWarning } from './mcp-tools-warning';
+export { MCPServerCard } from './mcp-server-card';
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-permission-settings.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-permission-settings.tsx
new file mode 100644
index 00000000..b7db14a4
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-permission-settings.tsx
@@ -0,0 +1,62 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { syncSettingsToServer } from '@/hooks/use-settings-migration';
+
+interface MCPPermissionSettingsProps {
+  mcpAutoApproveTools: boolean;
+  mcpUnrestrictedTools: boolean;
+  onAutoApproveChange: (checked: boolean) => void;
+  onUnrestrictedChange: (checked: boolean) => void;
+}
+
+export function MCPPermissionSettings({
+  mcpAutoApproveTools,
+  mcpUnrestrictedTools,
+  onAutoApproveChange,
+  onUnrestrictedChange,
+}: MCPPermissionSettingsProps) {
+  return (
+    <div className="px-6 py-4 border-b border-border/50 bg-muted/20">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="mcp-auto-approve" className="text-sm font-medium">
+              Auto-approve MCP tools
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              Allow MCP tool calls without permission prompts (recommended)
+            </p>
+          </div>
+          <Switch
+            id="mcp-auto-approve"
+            checked={mcpAutoApproveTools}
+            onCheckedChange={async (checked) => {
+              onAutoApproveChange(checked);
+              await syncSettingsToServer();
+            }}
+            data-testid="mcp-auto-approve-toggle"
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label htmlFor="mcp-unrestricted" className="text-sm font-medium">
+              Unrestricted tools
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              Allow all tools when MCP is enabled (don't filter to default set)
+            </p>
+          </div>
+          <Switch
+            id="mcp-unrestricted"
+            checked={mcpUnrestrictedTools}
+            onCheckedChange={async (checked) => {
+              onUnrestrictedChange(checked);
+              await syncSettingsToServer();
+            }}
+            data-testid="mcp-unrestricted-toggle"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx
new file mode 100644
index 00000000..babf4bda
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx
@@ -0,0 +1,169 @@
+import { ChevronDown, ChevronRight, Code, Pencil, Trash2, PlayCircle, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import type { MCPServerConfig } from '@automaker/types';
+import type { ServerTestState } from '../types';
+import { getServerIcon, getTestStatusIcon, maskSensitiveUrl } from '../utils';
+import { MCPToolsList } from '../mcp-tools-list';
+
+interface MCPServerCardProps {
+  server: MCPServerConfig;
+  testState?: ServerTestState;
+  isExpanded: boolean;
+  onToggleExpanded: () => void;
+  onTest: () => void;
+  onToggleEnabled: () => void;
+  onEditJson: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function MCPServerCard({
+  server,
+  testState,
+  isExpanded,
+  onToggleExpanded,
+  onTest,
+  onToggleEnabled,
+  onEditJson,
+  onEdit,
+  onDelete,
+}: MCPServerCardProps) {
+  const Icon = getServerIcon(server.type);
+  const hasTools = testState?.tools && testState.tools.length > 0;
+
+  return (
+    <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
+      <div
+        className={cn(
+          'rounded-xl border',
+          server.enabled !== false
+            ? 'border-border/50 bg-accent/20'
+            : 'border-border/30 bg-muted/30 opacity-60'
+        )}
+        data-testid={`mcp-server-${server.id}`}
+      >
+        <div className="flex items-center justify-between p-4 gap-2">
+          <div className="flex items-center gap-3 min-w-0 flex-1 overflow-hidden">
+            <CollapsibleTrigger asChild>
+              <button
+                className={cn(
+                  'flex items-center gap-3 text-left min-w-0 flex-1',
+                  hasTools && 'cursor-pointer hover:opacity-80'
+                )}
+                disabled={!hasTools}
+              >
+                {hasTools ? (
+                  isExpanded ? (
+                    <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+                  )
+                ) : (
+                  <div className="w-4 shrink-0" />
+                )}
+                <div
+                  className={cn(
+                    'w-8 h-8 rounded-lg flex items-center justify-center shrink-0',
+                    server.enabled !== false ? 'bg-brand-500/20' : 'bg-muted'
+                  )}
+                >
+                  <Icon className="w-4 h-4 text-brand-500" />
+                </div>
+                <div className="min-w-0 flex-1 overflow-hidden">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="font-medium text-sm truncate">{server.name}</span>
+                    {testState && getTestStatusIcon(testState.status)}
+                    {testState?.status === 'success' && testState.tools && (
+                      <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded whitespace-nowrap">
+                        {testState.tools.length} tool{testState.tools.length !== 1 ? 's' : ''}
+                      </span>
+                    )}
+                  </div>
+                  {server.description && (
+                    <div className="text-xs text-muted-foreground truncate">
+                      {server.description}
+                    </div>
+                  )}
+                  <div className="text-xs text-muted-foreground/60 mt-0.5 truncate">
+                    {server.type === 'stdio'
+                      ? `${server.command}${server.args?.length ? ' ' + server.args.join(' ') : ''}`
+                      : maskSensitiveUrl(server.url || '')}
+                  </div>
+                  {testState?.status === 'error' && testState.error && (
+                    <div className="text-xs text-destructive mt-1 line-clamp-2 break-words">
+                      {testState.error}
+                    </div>
+                  )}
+                </div>
+              </button>
+            </CollapsibleTrigger>
+          </div>
+          <div className="flex items-center gap-2 shrink-0 ml-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onTest}
+              disabled={testState?.status === 'testing' || server.enabled === false}
+              data-testid={`mcp-server-test-${server.id}`}
+              className="h-8 px-2"
+            >
+              {testState?.status === 'testing' ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <PlayCircle className="w-4 h-4" />
+              )}
+              <span className="ml-1.5 text-xs">Test</span>
+            </Button>
+            <Switch
+              checked={server.enabled !== false}
+              onCheckedChange={onToggleEnabled}
+              data-testid={`mcp-server-toggle-${server.id}`}
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onEditJson}
+              title="Edit JSON"
+              data-testid={`mcp-server-json-${server.id}`}
+            >
+              <Code className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onEdit}
+              data-testid={`mcp-server-edit-${server.id}`}
+            >
+              <Pencil className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              onClick={onDelete}
+              data-testid={`mcp-server-delete-${server.id}`}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+        {hasTools && (
+          <CollapsibleContent>
+            <div className="px-4 pb-4 pt-0 ml-7 overflow-hidden">
+              <div className="text-xs font-medium text-muted-foreground mb-2">Available Tools</div>
+              <MCPToolsList
+                tools={testState.tools!}
+                isLoading={testState.status === 'testing'}
+                error={testState.error}
+                className="max-w-full"
+              />
+            </div>
+          </CollapsibleContent>
+        )}
+      </div>
+    </Collapsible>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx
new file mode 100644
index 00000000..a85fc305
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx
@@ -0,0 +1,87 @@
+import { Plug, RefreshCw, Download, Code, FileJson, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface MCPServerHeaderProps {
+  isRefreshing: boolean;
+  hasServers: boolean;
+  onRefresh: () => void;
+  onExport: () => void;
+  onEditAllJson: () => void;
+  onImport: () => void;
+  onAdd: () => void;
+}
+
+export function MCPServerHeader({
+  isRefreshing,
+  hasServers,
+  onRefresh,
+  onExport,
+  onEditAllJson,
+  onImport,
+  onAdd,
+}: MCPServerHeaderProps) {
+  return (
+    <div className="p-6 border-b border-border/50 bg-linear-to-r from-transparent via-accent/5 to-transparent">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-linear-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Plug className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">MCP Servers</h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Configure Model Context Protocol servers to extend agent capabilities.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onRefresh}
+            disabled={isRefreshing}
+            data-testid="refresh-mcp-servers-button"
+          >
+            <RefreshCw className={cn('w-4 h-4', isRefreshing && 'animate-spin')} />
+          </Button>
+          {hasServers && (
+            <>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onExport}
+                data-testid="export-mcp-servers-button"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Export
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onEditAllJson}
+                data-testid="edit-all-json-button"
+              >
+                <Code className="w-4 h-4 mr-2" />
+                Edit JSON
+              </Button>
+            </>
+          )}
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={onImport}
+            data-testid="import-mcp-servers-button"
+          >
+            <FileJson className="w-4 h-4 mr-2" />
+            Import JSON
+          </Button>
+          <Button size="sm" onClick={onAdd} data-testid="add-mcp-server-button">
+            <Plus className="w-4 h-4 mr-2" />
+            Add Server
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx
new file mode 100644
index 00000000..019a0bbb
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx
@@ -0,0 +1,25 @@
+import { AlertTriangle } from 'lucide-react';
+import { MAX_RECOMMENDED_TOOLS } from '../constants';
+
+interface MCPToolsWarningProps {
+  totalTools: number;
+}
+
+export function MCPToolsWarning({ totalTools }: MCPToolsWarningProps) {
+  return (
+    <div className="mx-6 mt-4 p-3 rounded-lg border border-yellow-500/50 bg-yellow-500/10">
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="w-5 h-5 text-yellow-500 shrink-0 mt-0.5" />
+        <div className="text-sm">
+          <p className="font-medium text-yellow-600 dark:text-yellow-400">
+            High tool count detected ({totalTools} tools)
+          </p>
+          <p className="text-muted-foreground mt-1">
+            Having more than {MAX_RECOMMENDED_TOOLS} MCP tools may degrade AI model performance.
+            Consider disabling unused servers or removing unnecessary tools.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/constants.ts b/apps/ui/src/components/views/settings-view/mcp-servers/constants.ts
new file mode 100644
index 00000000..8a41cd8b
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/constants.ts
@@ -0,0 +1,14 @@
+// Patterns that indicate sensitive values in URLs or config
+export const SENSITIVE_PARAM_PATTERNS = [
+  /api[-_]?key/i,
+  /api[-_]?token/i,
+  /auth/i,
+  /token/i,
+  /secret/i,
+  /password/i,
+  /credential/i,
+  /bearer/i,
+];
+
+// Maximum recommended MCP tools before performance degradation
+export const MAX_RECOMMENDED_TOOLS = 80;
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx
new file mode 100644
index 00000000..5671ab60
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx
@@ -0,0 +1,161 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { MCPServerConfig } from '@automaker/types';
+import type { ServerFormData, ServerType } from '../types';
+
+interface AddEditServerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingServer: MCPServerConfig | null;
+  formData: ServerFormData;
+  onFormDataChange: (data: ServerFormData) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function AddEditServerDialog({
+  open,
+  onOpenChange,
+  editingServer,
+  formData,
+  onFormDataChange,
+  onSave,
+  onCancel,
+}: AddEditServerDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="mcp-server-dialog">
+        <DialogHeader>
+          <DialogTitle>{editingServer ? 'Edit MCP Server' : 'Add MCP Server'}</DialogTitle>
+          <DialogDescription>
+            Configure an MCP server to extend agent capabilities with custom tools.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="server-name">Name</Label>
+            <Input
+              id="server-name"
+              value={formData.name}
+              onChange={(e) => onFormDataChange({ ...formData, name: e.target.value })}
+              placeholder="my-mcp-server"
+              data-testid="mcp-server-name-input"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="server-description">Description (optional)</Label>
+            <Input
+              id="server-description"
+              value={formData.description}
+              onChange={(e) => onFormDataChange({ ...formData, description: e.target.value })}
+              placeholder="What this server provides..."
+              data-testid="mcp-server-description-input"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="server-type">Transport Type</Label>
+            <Select
+              value={formData.type}
+              onValueChange={(value: ServerType) => onFormDataChange({ ...formData, type: value })}
+            >
+              <SelectTrigger id="server-type" data-testid="mcp-server-type-select">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="stdio">Stdio (subprocess)</SelectItem>
+                <SelectItem value="sse">SSE (Server-Sent Events)</SelectItem>
+                <SelectItem value="http">HTTP</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {formData.type === 'stdio' ? (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="server-command">Command</Label>
+                <Input
+                  id="server-command"
+                  value={formData.command}
+                  onChange={(e) => onFormDataChange({ ...formData, command: e.target.value })}
+                  placeholder="npx, node, python, etc."
+                  data-testid="mcp-server-command-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="server-args">Arguments (space-separated)</Label>
+                <Input
+                  id="server-args"
+                  value={formData.args}
+                  onChange={(e) => onFormDataChange({ ...formData, args: e.target.value })}
+                  placeholder="-y @modelcontextprotocol/server-filesystem"
+                  data-testid="mcp-server-args-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="server-env">Environment Variables (JSON, optional)</Label>
+                <Textarea
+                  id="server-env"
+                  value={formData.env}
+                  onChange={(e) => onFormDataChange({ ...formData, env: e.target.value })}
+                  placeholder={'{\n  "API_KEY": "your-key"\n}'}
+                  className="font-mono text-sm h-24"
+                  data-testid="mcp-server-env-input"
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="server-url">URL</Label>
+                <Input
+                  id="server-url"
+                  value={formData.url}
+                  onChange={(e) => onFormDataChange({ ...formData, url: e.target.value })}
+                  placeholder="https://example.com/mcp"
+                  data-testid="mcp-server-url-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="server-headers">Headers (JSON, optional)</Label>
+                <Textarea
+                  id="server-headers"
+                  value={formData.headers}
+                  onChange={(e) => onFormDataChange({ ...formData, headers: e.target.value })}
+                  placeholder={
+                    '{\n  "x-api-key": "your-api-key",\n  "Authorization": "Bearer token"\n}'
+                  }
+                  className="font-mono text-sm h-24"
+                  data-testid="mcp-server-headers-input"
+                />
+              </div>
+            </>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={onSave} data-testid="mcp-server-save-button">
+            {editingServer ? 'Save Changes' : 'Add Server'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx
new file mode 100644
index 00000000..a49e520f
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx
@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface DeleteServerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+}
+
+export function DeleteServerDialog({ open, onOpenChange, onConfirm }: DeleteServerDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="mcp-server-delete-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete MCP Server</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this MCP server? This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="mcp-server-confirm-delete-button"
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx
new file mode 100644
index 00000000..e5e20c3d
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx
@@ -0,0 +1,82 @@
+import { Code } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface GlobalJsonEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  jsonValue: string;
+  onJsonValueChange: (value: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function GlobalJsonEditDialog({
+  open,
+  onOpenChange,
+  jsonValue,
+  onJsonValueChange,
+  onSave,
+  onCancel,
+}: GlobalJsonEditDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onCancel();
+        } else {
+          onOpenChange(open);
+        }
+      }}
+    >
+      <DialogContent className="max-w-3xl max-h-[90vh]" data-testid="mcp-global-json-edit-dialog">
+        <DialogHeader>
+          <DialogTitle>Edit All MCP Servers</DialogTitle>
+          <DialogDescription>
+            Edit the full MCP servers configuration. Add, modify, or remove servers directly in
+            JSON. Servers removed from JSON will be deleted.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Textarea
+            value={jsonValue}
+            onChange={(e) => onJsonValueChange(e.target.value)}
+            placeholder={`{
+  "mcpServers": {
+    "server-name": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-name"]
+    }
+  }
+}`}
+            className="font-mono text-sm h-[50vh] min-h-[300px]"
+            data-testid="mcp-global-json-edit-textarea"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            onClick={onSave}
+            disabled={!jsonValue.trim()}
+            data-testid="mcp-global-json-edit-save-button"
+          >
+            <Code className="w-4 h-4 mr-2" />
+            Save All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx
new file mode 100644
index 00000000..70057dfc
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx
@@ -0,0 +1,69 @@
+import { FileJson } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface ImportJsonDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  importJson: string;
+  onImportJsonChange: (value: string) => void;
+  onImport: () => void;
+  onCancel: () => void;
+}
+
+export function ImportJsonDialog({
+  open,
+  onOpenChange,
+  importJson,
+  onImportJsonChange,
+  onImport,
+  onCancel,
+}: ImportJsonDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl" data-testid="mcp-import-dialog">
+        <DialogHeader>
+          <DialogTitle>Import MCP Servers</DialogTitle>
+          <DialogDescription>
+            Paste JSON configuration in Claude Code format. Servers with duplicate names will be
+            skipped.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Textarea
+            value={importJson}
+            onChange={(e) => onImportJsonChange(e.target.value)}
+            placeholder={`{
+  "mcpServers": {
+    "server-name": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-name"],
+      "type": "stdio"
+    }
+  }
+}`}
+            className="font-mono text-sm h-64"
+            data-testid="mcp-import-textarea"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={onImport} disabled={!importJson.trim()} data-testid="mcp-import-button">
+            <FileJson className="w-4 h-4 mr-2" />
+            Import
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts
new file mode 100644
index 00000000..e5f063d4
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts
@@ -0,0 +1,5 @@
+export { AddEditServerDialog } from './add-edit-server-dialog';
+export { DeleteServerDialog } from './delete-server-dialog';
+export { ImportJsonDialog } from './import-json-dialog';
+export { JsonEditDialog } from './json-edit-dialog';
+export { GlobalJsonEditDialog } from './global-json-edit-dialog';
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx
new file mode 100644
index 00000000..605837c8
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx
@@ -0,0 +1,77 @@
+import { Code } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import type { MCPServerConfig } from '@automaker/types';
+
+interface JsonEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  server: MCPServerConfig | null;
+  jsonValue: string;
+  onJsonValueChange: (value: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function JsonEditDialog({
+  open,
+  onOpenChange,
+  server,
+  jsonValue,
+  onJsonValueChange,
+  onSave,
+  onCancel,
+}: JsonEditDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onCancel();
+        } else {
+          onOpenChange(open);
+        }
+      }}
+    >
+      <DialogContent className="max-w-2xl" data-testid="mcp-json-edit-dialog">
+        <DialogHeader>
+          <DialogTitle>Edit Server Configuration</DialogTitle>
+          <DialogDescription>
+            Edit the raw JSON configuration for "{server?.name}". Changes will be validated before
+            saving.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Textarea
+            value={jsonValue}
+            onChange={(e) => onJsonValueChange(e.target.value)}
+            placeholder="Server configuration JSON..."
+            className="font-mono text-sm h-80"
+            data-testid="mcp-json-edit-textarea"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            onClick={onSave}
+            disabled={!jsonValue.trim()}
+            data-testid="mcp-json-edit-save-button"
+          >
+            <Code className="w-4 h-4 mr-2" />
+            Save JSON
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts b/apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts
new file mode 100644
index 00000000..abc63400
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts
@@ -0,0 +1 @@
+export { useMCPServers } from './use-mcp-servers';
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts b/apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts
new file mode 100644
index 00000000..2e689e68
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts
@@ -0,0 +1,678 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import type { MCPServerConfig } from '@automaker/types';
+import { syncSettingsToServer, loadMCPServersFromServer } from '@/hooks/use-settings-migration';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { ServerFormData, ServerTestState } from '../types';
+import { defaultFormData } from '../types';
+import { MAX_RECOMMENDED_TOOLS } from '../constants';
+import type { ServerType } from '../types';
+
+export function useMCPServers() {
+  const {
+    mcpServers,
+    addMCPServer,
+    updateMCPServer,
+    removeMCPServer,
+    mcpAutoApproveTools,
+    mcpUnrestrictedTools,
+    setMcpAutoApproveTools,
+    setMcpUnrestrictedTools,
+  } = useAppStore();
+
+  // State
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [editingServer, setEditingServer] = useState<MCPServerConfig | null>(null);
+  const [formData, setFormData] = useState<ServerFormData>(defaultFormData);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
+  const [importJson, setImportJson] = useState('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [serverTestStates, setServerTestStates] = useState<Record<string, ServerTestState>>({});
+  const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
+  const [jsonEditServer, setJsonEditServer] = useState<MCPServerConfig | null>(null);
+  const [jsonEditValue, setJsonEditValue] = useState('');
+  const [isGlobalJsonEditOpen, setIsGlobalJsonEditOpen] = useState(false);
+  const [globalJsonValue, setGlobalJsonValue] = useState('');
+  const autoTestedServersRef = useRef<Set<string>>(new Set());
+
+  // Computed values
+  const totalToolsCount = useMemo(() => {
+    let count = 0;
+    for (const server of mcpServers) {
+      if (server.enabled !== false) {
+        const testState = serverTestStates[server.id];
+        if (testState?.status === 'success' && testState.tools) {
+          count += testState.tools.length;
+        }
+      }
+    }
+    return count;
+  }, [mcpServers, serverTestStates]);
+
+  const showToolsWarning = totalToolsCount > MAX_RECOMMENDED_TOOLS;
+
+  // Auto-load MCP servers from settings file on mount
+  useEffect(() => {
+    loadMCPServersFromServer().catch((error) => {
+      console.error('Failed to load MCP servers on mount:', error);
+    });
+  }, []);
+
+  // Test a single server (extracted for reuse)
+  const testServer = useCallback(async (server: MCPServerConfig, silent = false) => {
+    setServerTestStates((prev) => ({
+      ...prev,
+      [server.id]: { status: 'testing' },
+    }));
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.mcp.testServer(server.id);
+
+      if (result.success) {
+        setServerTestStates((prev) => ({
+          ...prev,
+          [server.id]: {
+            status: 'success',
+            tools: result.tools,
+            connectionTime: result.connectionTime,
+          },
+        }));
+        // Only auto-expand on manual test, not on auto-test (silent)
+        if (!silent) {
+          setExpandedServers((prev) => new Set([...prev, server.id]));
+          toast.success(
+            `Connected to ${server.name} (${result.tools?.length || 0} tools, ${result.connectionTime}ms)`
+          );
+        }
+      } else {
+        setServerTestStates((prev) => ({
+          ...prev,
+          [server.id]: {
+            status: 'error',
+            error: result.error,
+            connectionTime: result.connectionTime,
+          },
+        }));
+        if (!silent) {
+          toast.error(`Failed to connect: ${result.error}`);
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      setServerTestStates((prev) => ({
+        ...prev,
+        [server.id]: {
+          status: 'error',
+          error: errorMessage,
+        },
+      }));
+      if (!silent) {
+        toast.error(`Test failed: ${errorMessage}`);
+      }
+    }
+  }, []);
+
+  // Auto-test all enabled servers on mount
+  useEffect(() => {
+    const enabledServers = mcpServers.filter((s) => s.enabled !== false);
+    const serversToTest = enabledServers.filter((s) => !autoTestedServersRef.current.has(s.id));
+
+    if (serversToTest.length > 0) {
+      // Mark all as being tested
+      serversToTest.forEach((s) => autoTestedServersRef.current.add(s.id));
+
+      // Test all servers in parallel (silently - no toast spam)
+      serversToTest.forEach((server) => {
+        testServer(server, true);
+      });
+    }
+  }, [mcpServers, testServer]);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      const success = await loadMCPServersFromServer();
+      if (success) {
+        toast.success('MCP servers refreshed from settings');
+      } else {
+        toast.error('Failed to refresh MCP servers');
+      }
+    } catch (error) {
+      toast.error('Error refreshing MCP servers');
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleTestServer = (server: MCPServerConfig) => {
+    testServer(server, false); // false = show toast notifications
+  };
+
+  const toggleServerExpanded = (serverId: string) => {
+    setExpandedServers((prev) => {
+      const next = new Set(prev);
+      if (next.has(serverId)) {
+        next.delete(serverId);
+      } else {
+        next.add(serverId);
+      }
+      return next;
+    });
+  };
+
+  const handleOpenAddDialog = () => {
+    setFormData(defaultFormData);
+    setEditingServer(null);
+    setIsAddDialogOpen(true);
+  };
+
+  const handleOpenEditDialog = (server: MCPServerConfig) => {
+    setFormData({
+      name: server.name,
+      description: server.description || '',
+      type: server.type || 'stdio',
+      command: server.command || '',
+      args: server.args?.join(' ') || '',
+      url: server.url || '',
+      headers: server.headers ? JSON.stringify(server.headers, null, 2) : '',
+      env: server.env ? JSON.stringify(server.env, null, 2) : '',
+    });
+    setEditingServer(server);
+    setIsAddDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsAddDialogOpen(false);
+    setEditingServer(null);
+    setFormData(defaultFormData);
+  };
+
+  const handleSave = async () => {
+    if (!formData.name.trim()) {
+      toast.error('Server name is required');
+      return;
+    }
+
+    if (formData.type === 'stdio' && !formData.command.trim()) {
+      toast.error('Command is required for stdio servers');
+      return;
+    }
+
+    if ((formData.type === 'sse' || formData.type === 'http') && !formData.url.trim()) {
+      toast.error('URL is required for SSE/HTTP servers');
+      return;
+    }
+
+    // Parse headers if provided
+    let parsedHeaders: Record<string, string> | undefined;
+    if (formData.headers.trim()) {
+      try {
+        parsedHeaders = JSON.parse(formData.headers.trim());
+        if (typeof parsedHeaders !== 'object' || Array.isArray(parsedHeaders)) {
+          toast.error('Headers must be a JSON object');
+          return;
+        }
+      } catch {
+        toast.error('Invalid JSON for headers');
+        return;
+      }
+    }
+
+    // Parse env if provided
+    let parsedEnv: Record<string, string> | undefined;
+    if (formData.env.trim()) {
+      try {
+        parsedEnv = JSON.parse(formData.env.trim());
+        if (typeof parsedEnv !== 'object' || Array.isArray(parsedEnv)) {
+          toast.error('Environment variables must be a JSON object');
+          return;
+        }
+      } catch {
+        toast.error('Invalid JSON for environment variables');
+        return;
+      }
+    }
+
+    const serverData: Omit<MCPServerConfig, 'id'> = {
+      name: formData.name.trim(),
+      description: formData.description.trim() || undefined,
+      type: formData.type,
+      enabled: editingServer?.enabled ?? true,
+    };
+
+    if (formData.type === 'stdio') {
+      serverData.command = formData.command.trim();
+      if (formData.args.trim()) {
+        serverData.args = formData.args.trim().split(/\s+/);
+      }
+      if (parsedEnv) {
+        serverData.env = parsedEnv;
+      }
+    } else {
+      serverData.url = formData.url.trim();
+      if (parsedHeaders) {
+        serverData.headers = parsedHeaders;
+      }
+    }
+
+    if (editingServer) {
+      updateMCPServer(editingServer.id, serverData);
+      toast.success('MCP server updated');
+    } else {
+      addMCPServer(serverData);
+      toast.success('MCP server added');
+    }
+
+    await syncSettingsToServer();
+    handleCloseDialog();
+  };
+
+  const handleToggleEnabled = async (server: MCPServerConfig) => {
+    updateMCPServer(server.id, { enabled: !server.enabled });
+    await syncSettingsToServer();
+    toast.success(server.enabled ? 'Server disabled' : 'Server enabled');
+  };
+
+  const handleDelete = async (id: string) => {
+    removeMCPServer(id);
+    await syncSettingsToServer();
+    setDeleteConfirmId(null);
+    toast.success('MCP server removed');
+  };
+
+  const handleImportJson = async () => {
+    try {
+      const parsed = JSON.parse(importJson);
+
+      // Support both formats:
+      // 1. Claude Code format: { "mcpServers": { "name": { command, args, ... } } }
+      // 2. Direct format: { "name": { command, args, ... } }
+      const servers = parsed.mcpServers || parsed;
+
+      if (typeof servers !== 'object' || Array.isArray(servers)) {
+        toast.error('Invalid format: expected object with server configurations');
+        return;
+      }
+
+      let addedCount = 0;
+      let skippedCount = 0;
+
+      for (const [name, config] of Object.entries(servers)) {
+        if (typeof config !== 'object' || config === null) continue;
+
+        const serverConfig = config as Record<string, unknown>;
+
+        // Check if server with this name already exists
+        if (mcpServers.some((s) => s.name === name)) {
+          skippedCount++;
+          continue;
+        }
+
+        const serverData: Omit<MCPServerConfig, 'id'> = {
+          name,
+          type: (serverConfig.type as ServerType) || 'stdio',
+          enabled: true,
+        };
+
+        if (serverData.type === 'stdio') {
+          if (!serverConfig.command) {
+            console.warn(`Skipping ${name}: no command specified`);
+            skippedCount++;
+            continue;
+          }
+          serverData.command = serverConfig.command as string;
+          if (Array.isArray(serverConfig.args)) {
+            serverData.args = serverConfig.args as string[];
+          }
+          if (typeof serverConfig.env === 'object' && serverConfig.env !== null) {
+            serverData.env = serverConfig.env as Record<string, string>;
+          }
+        } else {
+          if (!serverConfig.url) {
+            console.warn(`Skipping ${name}: no url specified`);
+            skippedCount++;
+            continue;
+          }
+          serverData.url = serverConfig.url as string;
+          if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) {
+            serverData.headers = serverConfig.headers as Record<string, string>;
+          }
+        }
+
+        addMCPServer(serverData);
+        addedCount++;
+      }
+
+      await syncSettingsToServer();
+
+      if (addedCount > 0) {
+        toast.success(`Imported ${addedCount} MCP server${addedCount > 1 ? 's' : ''}`);
+      }
+      if (skippedCount > 0) {
+        toast.info(
+          `Skipped ${skippedCount} server${skippedCount > 1 ? 's' : ''} (already exist or invalid)`
+        );
+      }
+      if (addedCount === 0 && skippedCount === 0) {
+        toast.warning('No servers found in JSON');
+      }
+
+      setIsImportDialogOpen(false);
+      setImportJson('');
+    } catch (error) {
+      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
+    }
+  };
+
+  const handleExportJson = () => {
+    const exportData: Record<string, Record<string, unknown>> = {};
+
+    for (const server of mcpServers) {
+      const serverConfig: Record<string, unknown> = {
+        type: server.type || 'stdio',
+      };
+
+      if (server.type === 'stdio' || !server.type) {
+        serverConfig.command = server.command;
+        if (server.args?.length) serverConfig.args = server.args;
+        if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env;
+      } else {
+        serverConfig.url = server.url;
+        if (server.headers && Object.keys(server.headers).length > 0)
+          serverConfig.headers = server.headers;
+      }
+
+      exportData[server.name] = serverConfig;
+    }
+
+    const json = JSON.stringify({ mcpServers: exportData }, null, 2);
+    navigator.clipboard.writeText(json);
+    toast.success('Copied to clipboard');
+  };
+
+  const handleOpenJsonEdit = (server: MCPServerConfig) => {
+    // Build a clean config object for editing (excluding internal fields like id)
+    const editableConfig: Record<string, unknown> = {
+      name: server.name,
+      type: server.type || 'stdio',
+    };
+
+    if (server.description) {
+      editableConfig.description = server.description;
+    }
+
+    if (server.type === 'stdio' || !server.type) {
+      if (server.command) editableConfig.command = server.command;
+      if (server.args?.length) editableConfig.args = server.args;
+      if (server.env && Object.keys(server.env).length > 0) editableConfig.env = server.env;
+    } else {
+      if (server.url) editableConfig.url = server.url;
+      if (server.headers && Object.keys(server.headers).length > 0) {
+        editableConfig.headers = server.headers;
+      }
+    }
+
+    if (server.enabled === false) {
+      editableConfig.enabled = false;
+    }
+
+    setJsonEditValue(JSON.stringify(editableConfig, null, 2));
+    setJsonEditServer(server);
+  };
+
+  const handleSaveJsonEdit = async () => {
+    if (!jsonEditServer) return;
+
+    try {
+      const parsed = JSON.parse(jsonEditValue);
+
+      if (typeof parsed !== 'object' || Array.isArray(parsed)) {
+        toast.error('Config must be a JSON object');
+        return;
+      }
+
+      // Validate required fields based on type
+      const serverType = parsed.type || 'stdio';
+
+      if (!parsed.name || typeof parsed.name !== 'string') {
+        toast.error('Name is required');
+        return;
+      }
+
+      if (serverType === 'stdio') {
+        if (!parsed.command || typeof parsed.command !== 'string') {
+          toast.error('Command is required for stdio servers');
+          return;
+        }
+      } else if (serverType === 'sse' || serverType === 'http') {
+        if (!parsed.url || typeof parsed.url !== 'string') {
+          toast.error('URL is required for SSE/HTTP servers');
+          return;
+        }
+      }
+
+      // Build update object
+      const updateData: Partial<MCPServerConfig> = {
+        name: parsed.name,
+        type: serverType,
+        description: parsed.description || undefined,
+        enabled: parsed.enabled !== false,
+      };
+
+      if (serverType === 'stdio') {
+        updateData.command = parsed.command;
+        updateData.args = Array.isArray(parsed.args) ? parsed.args : undefined;
+        updateData.env =
+          typeof parsed.env === 'object' && !Array.isArray(parsed.env) ? parsed.env : undefined;
+        // Clear HTTP fields
+        updateData.url = undefined;
+        updateData.headers = undefined;
+      } else {
+        updateData.url = parsed.url;
+        updateData.headers =
+          typeof parsed.headers === 'object' && !Array.isArray(parsed.headers)
+            ? parsed.headers
+            : undefined;
+        // Clear stdio fields
+        updateData.command = undefined;
+        updateData.args = undefined;
+        updateData.env = undefined;
+      }
+
+      updateMCPServer(jsonEditServer.id, updateData);
+      await syncSettingsToServer();
+
+      toast.success('Server configuration updated');
+      setJsonEditServer(null);
+      setJsonEditValue('');
+    } catch (error) {
+      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
+    }
+  };
+
+  const handleOpenGlobalJsonEdit = () => {
+    // Build the full mcpServers config object
+    const exportData: Record<string, Record<string, unknown>> = {};
+
+    for (const server of mcpServers) {
+      const serverConfig: Record<string, unknown> = {
+        type: server.type || 'stdio',
+      };
+
+      if (server.description) {
+        serverConfig.description = server.description;
+      }
+
+      if (server.enabled === false) {
+        serverConfig.enabled = false;
+      }
+
+      if (server.type === 'stdio' || !server.type) {
+        serverConfig.command = server.command;
+        if (server.args?.length) serverConfig.args = server.args;
+        if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env;
+      } else {
+        serverConfig.url = server.url;
+        if (server.headers && Object.keys(server.headers).length > 0) {
+          serverConfig.headers = server.headers;
+        }
+      }
+
+      exportData[server.name] = serverConfig;
+    }
+
+    setGlobalJsonValue(JSON.stringify({ mcpServers: exportData }, null, 2));
+    setIsGlobalJsonEditOpen(true);
+  };
+
+  const handleSaveGlobalJsonEdit = async () => {
+    try {
+      const parsed = JSON.parse(globalJsonValue);
+
+      // Support both formats
+      const servers = parsed.mcpServers || parsed;
+
+      if (typeof servers !== 'object' || Array.isArray(servers)) {
+        toast.error('Invalid format: expected object with server configurations');
+        return;
+      }
+
+      // Validate all servers first
+      for (const [name, config] of Object.entries(servers)) {
+        if (typeof config !== 'object' || config === null) {
+          toast.error(`Invalid config for "${name}"`);
+          return;
+        }
+
+        const serverConfig = config as Record<string, unknown>;
+        const serverType = (serverConfig.type as string) || 'stdio';
+
+        if (serverType === 'stdio') {
+          if (!serverConfig.command || typeof serverConfig.command !== 'string') {
+            toast.error(`Command is required for "${name}" (stdio)`);
+            return;
+          }
+        } else if (serverType === 'sse' || serverType === 'http') {
+          if (!serverConfig.url || typeof serverConfig.url !== 'string') {
+            toast.error(`URL is required for "${name}" (${serverType})`);
+            return;
+          }
+        }
+      }
+
+      // Create a map of existing servers by name for updating
+      const existingByName = new Map(mcpServers.map((s) => [s.name, s]));
+      const processedNames = new Set<string>();
+
+      // Update or add servers
+      for (const [name, config] of Object.entries(servers)) {
+        const serverConfig = config as Record<string, unknown>;
+        const serverType = (serverConfig.type as ServerType) || 'stdio';
+
+        const serverData: Omit<MCPServerConfig, 'id'> = {
+          name,
+          type: serverType,
+          description: (serverConfig.description as string) || undefined,
+          enabled: serverConfig.enabled !== false,
+        };
+
+        if (serverType === 'stdio') {
+          serverData.command = serverConfig.command as string;
+          if (Array.isArray(serverConfig.args)) {
+            serverData.args = serverConfig.args as string[];
+          }
+          if (typeof serverConfig.env === 'object' && serverConfig.env !== null) {
+            serverData.env = serverConfig.env as Record<string, string>;
+          }
+        } else {
+          serverData.url = serverConfig.url as string;
+          if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) {
+            serverData.headers = serverConfig.headers as Record<string, string>;
+          }
+        }
+
+        const existing = existingByName.get(name);
+        if (existing) {
+          updateMCPServer(existing.id, serverData);
+        } else {
+          addMCPServer(serverData);
+        }
+        processedNames.add(name);
+      }
+
+      // Remove servers that are no longer in the JSON
+      for (const server of mcpServers) {
+        if (!processedNames.has(server.name)) {
+          removeMCPServer(server.id);
+        }
+      }
+
+      await syncSettingsToServer();
+
+      toast.success('MCP servers configuration updated');
+      setIsGlobalJsonEditOpen(false);
+      setGlobalJsonValue('');
+    } catch (error) {
+      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
+    }
+  };
+
+  return {
+    // Store state
+    mcpServers,
+    mcpAutoApproveTools,
+    mcpUnrestrictedTools,
+    setMcpAutoApproveTools,
+    setMcpUnrestrictedTools,
+
+    // Dialog state
+    isAddDialogOpen,
+    setIsAddDialogOpen,
+    editingServer,
+    formData,
+    setFormData,
+    deleteConfirmId,
+    setDeleteConfirmId,
+    isImportDialogOpen,
+    setIsImportDialogOpen,
+    importJson,
+    setImportJson,
+    jsonEditServer,
+    setJsonEditServer,
+    jsonEditValue,
+    setJsonEditValue,
+    isGlobalJsonEditOpen,
+    setIsGlobalJsonEditOpen,
+    globalJsonValue,
+    setGlobalJsonValue,
+
+    // UI state
+    isRefreshing,
+    serverTestStates,
+    expandedServers,
+
+    // Computed
+    totalToolsCount,
+    showToolsWarning,
+
+    // Handlers
+    handleRefresh,
+    handleTestServer,
+    toggleServerExpanded,
+    handleOpenAddDialog,
+    handleOpenEditDialog,
+    handleCloseDialog,
+    handleSave,
+    handleToggleEnabled,
+    handleDelete,
+    handleImportJson,
+    handleExportJson,
+    handleOpenJsonEdit,
+    handleSaveJsonEdit,
+    handleOpenGlobalJsonEdit,
+    handleSaveGlobalJsonEdit,
+  };
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/index.ts b/apps/ui/src/components/views/settings-view/mcp-servers/index.ts
index bd267fe2..abaff1a6 100644
--- a/apps/ui/src/components/views/settings-view/mcp-servers/index.ts
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/index.ts
@@ -1 +1,2 @@
 export { MCPServersSection } from './mcp-servers-section';
+export { MCPToolsList, type MCPToolDisplay } from './mcp-tools-list';
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx
index d4c3d3c9..d18b7ed4 100644
--- a/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx
@@ -1,892 +1,107 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useAppStore } from '@/store/app-store';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import {
-  Plug,
-  Plus,
-  Pencil,
-  Trash2,
-  Terminal,
-  Globe,
-  FileJson,
-  Download,
-  RefreshCw,
-  PlayCircle,
-  CheckCircle2,
-  XCircle,
-  Loader2,
-  ChevronDown,
-  ChevronRight,
-  Code,
-  AlertTriangle,
-} from 'lucide-react';
-import { Textarea } from '@/components/ui/textarea';
+import { Plug } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { toast } from 'sonner';
-import type { MCPServerConfig } from '@automaker/types';
-import { syncSettingsToServer, loadMCPServersFromServer } from '@/hooks/use-settings-migration';
-import { getHttpApiClient } from '@/lib/http-api-client';
-import { MCPToolsList, type MCPToolDisplay } from './mcp-tools-list';
-
-type ServerType = 'stdio' | 'sse' | 'http';
-
-interface ServerFormData {
-  name: string;
-  description: string;
-  type: ServerType;
-  command: string;
-  args: string;
-  url: string;
-  headers: string; // JSON string for headers
-  env: string; // JSON string for env vars
-}
-
-const defaultFormData: ServerFormData = {
-  name: '',
-  description: '',
-  type: 'stdio',
-  command: '',
-  args: '',
-  url: '',
-  headers: '',
-  env: '',
-};
-
-interface ServerTestState {
-  status: 'idle' | 'testing' | 'success' | 'error';
-  tools?: MCPToolDisplay[];
-  error?: string;
-  connectionTime?: number;
-}
-
-// Patterns that indicate sensitive values in URLs or config
-const SENSITIVE_PARAM_PATTERNS = [
-  /api[-_]?key/i,
-  /api[-_]?token/i,
-  /auth/i,
-  /token/i,
-  /secret/i,
-  /password/i,
-  /credential/i,
-  /bearer/i,
-];
-
-/**
- * Mask sensitive values in URLs (query params with key-like names)
- */
-function maskSensitiveUrl(url: string): string {
-  try {
-    const urlObj = new URL(url);
-    const params = new URLSearchParams(urlObj.search);
-    let hasSensitive = false;
-
-    for (const [key] of params.entries()) {
-      if (SENSITIVE_PARAM_PATTERNS.some((pattern) => pattern.test(key))) {
-        params.set(key, '***');
-        hasSensitive = true;
-      }
-    }
-
-    if (hasSensitive) {
-      urlObj.search = params.toString();
-      return urlObj.toString();
-    }
-    return url;
-  } catch {
-    // If URL parsing fails, try simple regex replacement for common patterns
-    return url.replace(
-      /([?&])(api[-_]?key|auth|token|secret|password|credential)=([^&]*)/gi,
-      '$1$2=***'
-    );
-  }
-}
-
-// Maximum recommended MCP tools before performance degradation
-const MAX_RECOMMENDED_TOOLS = 80;
+import { useMCPServers } from './hooks';
+import {
+  MCPServerHeader,
+  MCPPermissionSettings,
+  MCPToolsWarning,
+  MCPServerCard,
+} from './components';
+import {
+  AddEditServerDialog,
+  DeleteServerDialog,
+  ImportJsonDialog,
+  JsonEditDialog,
+  GlobalJsonEditDialog,
+} from './dialogs';
 
 export function MCPServersSection() {
   const {
+    // Store state
     mcpServers,
-    addMCPServer,
-    updateMCPServer,
-    removeMCPServer,
     mcpAutoApproveTools,
     mcpUnrestrictedTools,
     setMcpAutoApproveTools,
     setMcpUnrestrictedTools,
-  } = useAppStore();
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
-  const [editingServer, setEditingServer] = useState<MCPServerConfig | null>(null);
-  const [formData, setFormData] = useState<ServerFormData>(defaultFormData);
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
-  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
-  const [importJson, setImportJson] = useState('');
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [serverTestStates, setServerTestStates] = useState<Record<string, ServerTestState>>({});
-  const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
-  const [jsonEditServer, setJsonEditServer] = useState<MCPServerConfig | null>(null);
-  const [jsonEditValue, setJsonEditValue] = useState('');
-  const [isGlobalJsonEditOpen, setIsGlobalJsonEditOpen] = useState(false);
-  const [globalJsonValue, setGlobalJsonValue] = useState('');
-  const autoTestedServersRef = useRef<Set<string>>(new Set());
 
-  // Calculate total tools across all enabled servers
-  const totalToolsCount = useMemo(() => {
-    let count = 0;
-    for (const server of mcpServers) {
-      if (server.enabled !== false) {
-        const testState = serverTestStates[server.id];
-        if (testState?.status === 'success' && testState.tools) {
-          count += testState.tools.length;
-        }
-      }
-    }
-    return count;
-  }, [mcpServers, serverTestStates]);
-
-  const showToolsWarning = totalToolsCount > MAX_RECOMMENDED_TOOLS;
-
-  // Auto-load MCP servers from settings file on mount
-  useEffect(() => {
-    loadMCPServersFromServer().catch((error) => {
-      console.error('Failed to load MCP servers on mount:', error);
-    });
-  }, []);
-
-  // Test a single server (extracted for reuse)
-  const testServer = useCallback(async (server: MCPServerConfig, silent = false) => {
-    setServerTestStates((prev) => ({
-      ...prev,
-      [server.id]: { status: 'testing' },
-    }));
-
-    try {
-      const api = getHttpApiClient();
-      const result = await api.mcp.testServer(server.id);
-
-      if (result.success) {
-        setServerTestStates((prev) => ({
-          ...prev,
-          [server.id]: {
-            status: 'success',
-            tools: result.tools,
-            connectionTime: result.connectionTime,
-          },
-        }));
-        // Only auto-expand on manual test, not on auto-test (silent)
-        if (!silent) {
-          setExpandedServers((prev) => new Set([...prev, server.id]));
-          toast.success(
-            `Connected to ${server.name} (${result.tools?.length || 0} tools, ${result.connectionTime}ms)`
-          );
-        }
-      } else {
-        setServerTestStates((prev) => ({
-          ...prev,
-          [server.id]: {
-            status: 'error',
-            error: result.error,
-            connectionTime: result.connectionTime,
-          },
-        }));
-        if (!silent) {
-          toast.error(`Failed to connect: ${result.error}`);
-        }
-      }
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      setServerTestStates((prev) => ({
-        ...prev,
-        [server.id]: {
-          status: 'error',
-          error: errorMessage,
-        },
-      }));
-      if (!silent) {
-        toast.error(`Test failed: ${errorMessage}`);
-      }
-    }
-  }, []);
-
-  // Auto-test all enabled servers on mount
-  useEffect(() => {
-    const enabledServers = mcpServers.filter((s) => s.enabled !== false);
-    const serversToTest = enabledServers.filter((s) => !autoTestedServersRef.current.has(s.id));
-
-    if (serversToTest.length > 0) {
-      // Mark all as being tested
-      serversToTest.forEach((s) => autoTestedServersRef.current.add(s.id));
-
-      // Test all servers in parallel (silently - no toast spam)
-      serversToTest.forEach((server) => {
-        testServer(server, true);
-      });
-    }
-  }, [mcpServers, testServer]);
-
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    try {
-      const success = await loadMCPServersFromServer();
-      if (success) {
-        toast.success('MCP servers refreshed from settings');
-      } else {
-        toast.error('Failed to refresh MCP servers');
-      }
-    } catch (error) {
-      toast.error('Error refreshing MCP servers');
-    } finally {
-      setIsRefreshing(false);
-    }
-  };
-
-  const handleTestServer = (server: MCPServerConfig) => {
-    testServer(server, false); // false = show toast notifications
-  };
-
-  const toggleServerExpanded = (serverId: string) => {
-    setExpandedServers((prev) => {
-      const next = new Set(prev);
-      if (next.has(serverId)) {
-        next.delete(serverId);
-      } else {
-        next.add(serverId);
-      }
-      return next;
-    });
-  };
-
-  const getTestStatusIcon = (status: ServerTestState['status']) => {
-    switch (status) {
-      case 'testing':
-        return <Loader2 className="w-4 h-4 animate-spin text-brand-500" />;
-      case 'success':
-        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
-      case 'error':
-        return <XCircle className="w-4 h-4 text-destructive" />;
-      default:
-        return null;
-    }
-  };
-
-  const handleOpenAddDialog = () => {
-    setFormData(defaultFormData);
-    setEditingServer(null);
-    setIsAddDialogOpen(true);
-  };
-
-  const handleOpenEditDialog = (server: MCPServerConfig) => {
-    setFormData({
-      name: server.name,
-      description: server.description || '',
-      type: server.type || 'stdio',
-      command: server.command || '',
-      args: server.args?.join(' ') || '',
-      url: server.url || '',
-      headers: server.headers ? JSON.stringify(server.headers, null, 2) : '',
-      env: server.env ? JSON.stringify(server.env, null, 2) : '',
-    });
-    setEditingServer(server);
-    setIsAddDialogOpen(true);
-  };
-
-  const handleCloseDialog = () => {
-    setIsAddDialogOpen(false);
-    setEditingServer(null);
-    setFormData(defaultFormData);
-  };
-
-  const handleSave = async () => {
-    if (!formData.name.trim()) {
-      toast.error('Server name is required');
-      return;
-    }
-
-    if (formData.type === 'stdio' && !formData.command.trim()) {
-      toast.error('Command is required for stdio servers');
-      return;
-    }
-
-    if ((formData.type === 'sse' || formData.type === 'http') && !formData.url.trim()) {
-      toast.error('URL is required for SSE/HTTP servers');
-      return;
-    }
-
-    // Parse headers if provided
-    let parsedHeaders: Record<string, string> | undefined;
-    if (formData.headers.trim()) {
-      try {
-        parsedHeaders = JSON.parse(formData.headers.trim());
-        if (typeof parsedHeaders !== 'object' || Array.isArray(parsedHeaders)) {
-          toast.error('Headers must be a JSON object');
-          return;
-        }
-      } catch {
-        toast.error('Invalid JSON for headers');
-        return;
-      }
-    }
-
-    // Parse env if provided
-    let parsedEnv: Record<string, string> | undefined;
-    if (formData.env.trim()) {
-      try {
-        parsedEnv = JSON.parse(formData.env.trim());
-        if (typeof parsedEnv !== 'object' || Array.isArray(parsedEnv)) {
-          toast.error('Environment variables must be a JSON object');
-          return;
-        }
-      } catch {
-        toast.error('Invalid JSON for environment variables');
-        return;
-      }
-    }
-
-    const serverData: Omit<MCPServerConfig, 'id'> = {
-      name: formData.name.trim(),
-      description: formData.description.trim() || undefined,
-      type: formData.type,
-      enabled: editingServer?.enabled ?? true,
-    };
-
-    if (formData.type === 'stdio') {
-      serverData.command = formData.command.trim();
-      if (formData.args.trim()) {
-        serverData.args = formData.args.trim().split(/\s+/);
-      }
-      if (parsedEnv) {
-        serverData.env = parsedEnv;
-      }
-    } else {
-      serverData.url = formData.url.trim();
-      if (parsedHeaders) {
-        serverData.headers = parsedHeaders;
-      }
-    }
-
-    if (editingServer) {
-      updateMCPServer(editingServer.id, serverData);
-      toast.success('MCP server updated');
-    } else {
-      addMCPServer(serverData);
-      toast.success('MCP server added');
-    }
-
-    await syncSettingsToServer();
-    handleCloseDialog();
-  };
-
-  const handleToggleEnabled = async (server: MCPServerConfig) => {
-    updateMCPServer(server.id, { enabled: !server.enabled });
-    await syncSettingsToServer();
-    toast.success(server.enabled ? 'Server disabled' : 'Server enabled');
-  };
-
-  const handleDelete = async (id: string) => {
-    removeMCPServer(id);
-    await syncSettingsToServer();
-    setDeleteConfirmId(null);
-    toast.success('MCP server removed');
-  };
-
-  const getServerIcon = (type: ServerType = 'stdio') => {
-    if (type === 'stdio') return Terminal;
-    return Globe;
-  };
-
-  const handleImportJson = async () => {
-    try {
-      const parsed = JSON.parse(importJson);
-
-      // Support both formats:
-      // 1. Claude Code format: { "mcpServers": { "name": { command, args, ... } } }
-      // 2. Direct format: { "name": { command, args, ... } }
-      const servers = parsed.mcpServers || parsed;
-
-      if (typeof servers !== 'object' || Array.isArray(servers)) {
-        toast.error('Invalid format: expected object with server configurations');
-        return;
-      }
-
-      let addedCount = 0;
-      let skippedCount = 0;
-
-      for (const [name, config] of Object.entries(servers)) {
-        if (typeof config !== 'object' || config === null) continue;
-
-        const serverConfig = config as Record<string, unknown>;
-
-        // Check if server with this name already exists
-        if (mcpServers.some((s) => s.name === name)) {
-          skippedCount++;
-          continue;
-        }
-
-        const serverData: Omit<MCPServerConfig, 'id'> = {
-          name,
-          type: (serverConfig.type as ServerType) || 'stdio',
-          enabled: true,
-        };
-
-        if (serverData.type === 'stdio') {
-          if (!serverConfig.command) {
-            console.warn(`Skipping ${name}: no command specified`);
-            skippedCount++;
-            continue;
-          }
-          serverData.command = serverConfig.command as string;
-          if (Array.isArray(serverConfig.args)) {
-            serverData.args = serverConfig.args as string[];
-          }
-          if (typeof serverConfig.env === 'object' && serverConfig.env !== null) {
-            serverData.env = serverConfig.env as Record<string, string>;
-          }
-        } else {
-          if (!serverConfig.url) {
-            console.warn(`Skipping ${name}: no url specified`);
-            skippedCount++;
-            continue;
-          }
-          serverData.url = serverConfig.url as string;
-          if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) {
-            serverData.headers = serverConfig.headers as Record<string, string>;
-          }
-        }
-
-        addMCPServer(serverData);
-        addedCount++;
-      }
-
-      await syncSettingsToServer();
-
-      if (addedCount > 0) {
-        toast.success(`Imported ${addedCount} MCP server${addedCount > 1 ? 's' : ''}`);
-      }
-      if (skippedCount > 0) {
-        toast.info(
-          `Skipped ${skippedCount} server${skippedCount > 1 ? 's' : ''} (already exist or invalid)`
-        );
-      }
-      if (addedCount === 0 && skippedCount === 0) {
-        toast.warning('No servers found in JSON');
-      }
-
-      setIsImportDialogOpen(false);
-      setImportJson('');
-    } catch (error) {
-      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
-    }
-  };
-
-  const handleExportJson = () => {
-    const exportData: Record<string, Record<string, unknown>> = {};
-
-    for (const server of mcpServers) {
-      const serverConfig: Record<string, unknown> = {
-        type: server.type || 'stdio',
-      };
-
-      if (server.type === 'stdio' || !server.type) {
-        serverConfig.command = server.command;
-        if (server.args?.length) serverConfig.args = server.args;
-        if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env;
-      } else {
-        serverConfig.url = server.url;
-        if (server.headers && Object.keys(server.headers).length > 0)
-          serverConfig.headers = server.headers;
-      }
-
-      exportData[server.name] = serverConfig;
-    }
-
-    const json = JSON.stringify({ mcpServers: exportData }, null, 2);
-    navigator.clipboard.writeText(json);
-    toast.success('Copied to clipboard');
-  };
-
-  const handleOpenJsonEdit = (server: MCPServerConfig) => {
-    // Build a clean config object for editing (excluding internal fields like id)
-    const editableConfig: Record<string, unknown> = {
-      name: server.name,
-      type: server.type || 'stdio',
-    };
-
-    if (server.description) {
-      editableConfig.description = server.description;
-    }
-
-    if (server.type === 'stdio' || !server.type) {
-      if (server.command) editableConfig.command = server.command;
-      if (server.args?.length) editableConfig.args = server.args;
-      if (server.env && Object.keys(server.env).length > 0) editableConfig.env = server.env;
-    } else {
-      if (server.url) editableConfig.url = server.url;
-      if (server.headers && Object.keys(server.headers).length > 0) {
-        editableConfig.headers = server.headers;
-      }
-    }
-
-    if (server.enabled === false) {
-      editableConfig.enabled = false;
-    }
-
-    setJsonEditValue(JSON.stringify(editableConfig, null, 2));
-    setJsonEditServer(server);
-  };
-
-  const handleSaveJsonEdit = async () => {
-    if (!jsonEditServer) return;
-
-    try {
-      const parsed = JSON.parse(jsonEditValue);
-
-      if (typeof parsed !== 'object' || Array.isArray(parsed)) {
-        toast.error('Config must be a JSON object');
-        return;
-      }
-
-      // Validate required fields based on type
-      const serverType = parsed.type || 'stdio';
-
-      if (!parsed.name || typeof parsed.name !== 'string') {
-        toast.error('Name is required');
-        return;
-      }
-
-      if (serverType === 'stdio') {
-        if (!parsed.command || typeof parsed.command !== 'string') {
-          toast.error('Command is required for stdio servers');
-          return;
-        }
-      } else if (serverType === 'sse' || serverType === 'http') {
-        if (!parsed.url || typeof parsed.url !== 'string') {
-          toast.error('URL is required for SSE/HTTP servers');
-          return;
-        }
-      }
-
-      // Build update object
-      const updateData: Partial<MCPServerConfig> = {
-        name: parsed.name,
-        type: serverType,
-        description: parsed.description || undefined,
-        enabled: parsed.enabled !== false,
-      };
-
-      if (serverType === 'stdio') {
-        updateData.command = parsed.command;
-        updateData.args = Array.isArray(parsed.args) ? parsed.args : undefined;
-        updateData.env =
-          typeof parsed.env === 'object' && !Array.isArray(parsed.env) ? parsed.env : undefined;
-        // Clear HTTP fields
-        updateData.url = undefined;
-        updateData.headers = undefined;
-      } else {
-        updateData.url = parsed.url;
-        updateData.headers =
-          typeof parsed.headers === 'object' && !Array.isArray(parsed.headers)
-            ? parsed.headers
-            : undefined;
-        // Clear stdio fields
-        updateData.command = undefined;
-        updateData.args = undefined;
-        updateData.env = undefined;
-      }
-
-      updateMCPServer(jsonEditServer.id, updateData);
-      await syncSettingsToServer();
-
-      toast.success('Server configuration updated');
-      setJsonEditServer(null);
-      setJsonEditValue('');
-    } catch (error) {
-      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
-    }
-  };
-
-  const handleOpenGlobalJsonEdit = () => {
-    // Build the full mcpServers config object
-    const exportData: Record<string, Record<string, unknown>> = {};
-
-    for (const server of mcpServers) {
-      const serverConfig: Record<string, unknown> = {
-        type: server.type || 'stdio',
-      };
-
-      if (server.description) {
-        serverConfig.description = server.description;
-      }
-
-      if (server.enabled === false) {
-        serverConfig.enabled = false;
-      }
-
-      if (server.type === 'stdio' || !server.type) {
-        serverConfig.command = server.command;
-        if (server.args?.length) serverConfig.args = server.args;
-        if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env;
-      } else {
-        serverConfig.url = server.url;
-        if (server.headers && Object.keys(server.headers).length > 0) {
-          serverConfig.headers = server.headers;
-        }
-      }
-
-      exportData[server.name] = serverConfig;
-    }
-
-    setGlobalJsonValue(JSON.stringify({ mcpServers: exportData }, null, 2));
-    setIsGlobalJsonEditOpen(true);
-  };
-
-  const handleSaveGlobalJsonEdit = async () => {
-    try {
-      const parsed = JSON.parse(globalJsonValue);
-
-      // Support both formats
-      const servers = parsed.mcpServers || parsed;
-
-      if (typeof servers !== 'object' || Array.isArray(servers)) {
-        toast.error('Invalid format: expected object with server configurations');
-        return;
-      }
-
-      // Validate all servers first
-      for (const [name, config] of Object.entries(servers)) {
-        if (typeof config !== 'object' || config === null) {
-          toast.error(`Invalid config for "${name}"`);
-          return;
-        }
-
-        const serverConfig = config as Record<string, unknown>;
-        const serverType = (serverConfig.type as string) || 'stdio';
-
-        if (serverType === 'stdio') {
-          if (!serverConfig.command || typeof serverConfig.command !== 'string') {
-            toast.error(`Command is required for "${name}" (stdio)`);
-            return;
-          }
-        } else if (serverType === 'sse' || serverType === 'http') {
-          if (!serverConfig.url || typeof serverConfig.url !== 'string') {
-            toast.error(`URL is required for "${name}" (${serverType})`);
-            return;
-          }
-        }
-      }
-
-      // Create a map of existing servers by name for updating
-      const existingByName = new Map(mcpServers.map((s) => [s.name, s]));
-      const processedNames = new Set<string>();
-
-      // Update or add servers
-      for (const [name, config] of Object.entries(servers)) {
-        const serverConfig = config as Record<string, unknown>;
-        const serverType = (serverConfig.type as ServerType) || 'stdio';
-
-        const serverData: Omit<MCPServerConfig, 'id'> = {
-          name,
-          type: serverType,
-          description: (serverConfig.description as string) || undefined,
-          enabled: serverConfig.enabled !== false,
-        };
-
-        if (serverType === 'stdio') {
-          serverData.command = serverConfig.command as string;
-          if (Array.isArray(serverConfig.args)) {
-            serverData.args = serverConfig.args as string[];
-          }
-          if (typeof serverConfig.env === 'object' && serverConfig.env !== null) {
-            serverData.env = serverConfig.env as Record<string, string>;
-          }
-        } else {
-          serverData.url = serverConfig.url as string;
-          if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) {
-            serverData.headers = serverConfig.headers as Record<string, string>;
-          }
-        }
-
-        const existing = existingByName.get(name);
-        if (existing) {
-          updateMCPServer(existing.id, serverData);
-        } else {
-          addMCPServer(serverData);
-        }
-        processedNames.add(name);
-      }
-
-      // Remove servers that are no longer in the JSON
-      for (const server of mcpServers) {
-        if (!processedNames.has(server.name)) {
-          removeMCPServer(server.id);
-        }
-      }
-
-      await syncSettingsToServer();
-
-      toast.success('MCP servers configuration updated');
-      setIsGlobalJsonEditOpen(false);
-      setGlobalJsonValue('');
-    } catch (error) {
-      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
-    }
-  };
+    // Dialog state
+    isAddDialogOpen,
+    setIsAddDialogOpen,
+    editingServer,
+    formData,
+    setFormData,
+    deleteConfirmId,
+    setDeleteConfirmId,
+    isImportDialogOpen,
+    setIsImportDialogOpen,
+    importJson,
+    setImportJson,
+    jsonEditServer,
+    setJsonEditServer,
+    jsonEditValue,
+    setJsonEditValue,
+    isGlobalJsonEditOpen,
+    setIsGlobalJsonEditOpen,
+    globalJsonValue,
+    setGlobalJsonValue,
+
+    // UI state
+    isRefreshing,
+    serverTestStates,
+    expandedServers,
+
+    // Computed
+    totalToolsCount,
+    showToolsWarning,
+
+    // Handlers
+    handleRefresh,
+    handleTestServer,
+    toggleServerExpanded,
+    handleOpenAddDialog,
+    handleOpenEditDialog,
+    handleCloseDialog,
+    handleSave,
+    handleToggleEnabled,
+    handleDelete,
+    handleImportJson,
+    handleExportJson,
+    handleOpenJsonEdit,
+    handleSaveJsonEdit,
+    handleOpenGlobalJsonEdit,
+    handleSaveGlobalJsonEdit,
+  } = useMCPServers();
 
   return (
     <div
       className={cn(
         'rounded-2xl overflow-hidden',
         'border border-border/50',
-        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'bg-linear-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
         'shadow-sm shadow-black/5'
       )}
     >
-      {/* Header */}
-      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
-        <div className="flex items-center justify-between">
-          <div>
-            <div className="flex items-center gap-3 mb-2">
-              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
-                <Plug className="w-5 h-5 text-brand-500" />
-              </div>
-              <h2 className="text-lg font-semibold text-foreground tracking-tight">MCP Servers</h2>
-            </div>
-            <p className="text-sm text-muted-foreground/80 ml-12">
-              Configure Model Context Protocol servers to extend agent capabilities.
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={handleRefresh}
-              disabled={isRefreshing}
-              data-testid="refresh-mcp-servers-button"
-            >
-              <RefreshCw className={cn('w-4 h-4', isRefreshing && 'animate-spin')} />
-            </Button>
-            {mcpServers.length > 0 && (
-              <>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={handleExportJson}
-                  data-testid="export-mcp-servers-button"
-                >
-                  <Download className="w-4 h-4 mr-2" />
-                  Export
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={handleOpenGlobalJsonEdit}
-                  data-testid="edit-all-json-button"
-                >
-                  <Code className="w-4 h-4 mr-2" />
-                  Edit JSON
-                </Button>
-              </>
-            )}
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => setIsImportDialogOpen(true)}
-              data-testid="import-mcp-servers-button"
-            >
-              <FileJson className="w-4 h-4 mr-2" />
-              Import JSON
-            </Button>
-            <Button size="sm" onClick={handleOpenAddDialog} data-testid="add-mcp-server-button">
-              <Plus className="w-4 h-4 mr-2" />
-              Add Server
-            </Button>
-          </div>
-        </div>
-      </div>
+      <MCPServerHeader
+        isRefreshing={isRefreshing}
+        hasServers={mcpServers.length > 0}
+        onRefresh={handleRefresh}
+        onExport={handleExportJson}
+        onEditAllJson={handleOpenGlobalJsonEdit}
+        onImport={() => setIsImportDialogOpen(true)}
+        onAdd={handleOpenAddDialog}
+      />
 
-      {/* Permission Settings */}
       {mcpServers.length > 0 && (
-        <div className="px-6 py-4 border-b border-border/50 bg-muted/20">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label htmlFor="mcp-auto-approve" className="text-sm font-medium">
-                  Auto-approve MCP tools
-                </Label>
-                <p className="text-xs text-muted-foreground">
-                  Allow MCP tool calls without permission prompts (recommended)
-                </p>
-              </div>
-              <Switch
-                id="mcp-auto-approve"
-                checked={mcpAutoApproveTools}
-                onCheckedChange={async (checked) => {
-                  setMcpAutoApproveTools(checked);
-                  await syncSettingsToServer();
-                }}
-                data-testid="mcp-auto-approve-toggle"
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label htmlFor="mcp-unrestricted" className="text-sm font-medium">
-                  Unrestricted tools
-                </Label>
-                <p className="text-xs text-muted-foreground">
-                  Allow all tools when MCP is enabled (don't filter to default set)
-                </p>
-              </div>
-              <Switch
-                id="mcp-unrestricted"
-                checked={mcpUnrestrictedTools}
-                onCheckedChange={async (checked) => {
-                  setMcpUnrestrictedTools(checked);
-                  await syncSettingsToServer();
-                }}
-                data-testid="mcp-unrestricted-toggle"
-              />
-            </div>
-          </div>
-        </div>
+        <MCPPermissionSettings
+          mcpAutoApproveTools={mcpAutoApproveTools}
+          mcpUnrestrictedTools={mcpUnrestrictedTools}
+          onAutoApproveChange={setMcpAutoApproveTools}
+          onUnrestrictedChange={setMcpUnrestrictedTools}
+        />
       )}
 
-      {/* Tools Count Warning */}
-      {showToolsWarning && (
-        <div className="mx-6 mt-4 p-3 rounded-lg border border-yellow-500/50 bg-yellow-500/10">
-          <div className="flex items-start gap-3">
-            <AlertTriangle className="w-5 h-5 text-yellow-500 shrink-0 mt-0.5" />
-            <div className="text-sm">
-              <p className="font-medium text-yellow-600 dark:text-yellow-400">
-                High tool count detected ({totalToolsCount} tools)
-              </p>
-              <p className="text-muted-foreground mt-1">
-                Having more than {MAX_RECOMMENDED_TOOLS} MCP tools may degrade AI model performance.
-                Consider disabling unused servers or removing unnecessary tools.
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
+      {showToolsWarning && <MCPToolsWarning totalTools={totalToolsCount} />}
 
-      {/* Server List */}
       <div className="p-6">
         {mcpServers.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground">
@@ -896,350 +111,54 @@ export function MCPServersSection() {
           </div>
         ) : (
           <div className="space-y-3">
-            {mcpServers.map((server) => {
-              const Icon = getServerIcon(server.type);
-              const testState = serverTestStates[server.id];
-              const isExpanded = expandedServers.has(server.id);
-              const hasTools = testState?.tools && testState.tools.length > 0;
-
-              return (
-                <Collapsible
-                  key={server.id}
-                  open={isExpanded}
-                  onOpenChange={() => toggleServerExpanded(server.id)}
-                >
-                  <div
-                    className={cn(
-                      'rounded-xl border',
-                      server.enabled !== false
-                        ? 'border-border/50 bg-accent/20'
-                        : 'border-border/30 bg-muted/30 opacity-60'
-                    )}
-                    data-testid={`mcp-server-${server.id}`}
-                  >
-                    <div className="flex items-center justify-between p-4 gap-2">
-                      <div className="flex items-center gap-3 min-w-0 flex-1 overflow-hidden">
-                        <CollapsibleTrigger asChild>
-                          <button
-                            className={cn(
-                              'flex items-center gap-3 text-left min-w-0 flex-1',
-                              hasTools && 'cursor-pointer hover:opacity-80'
-                            )}
-                            disabled={!hasTools}
-                          >
-                            {hasTools ? (
-                              isExpanded ? (
-                                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
-                              ) : (
-                                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
-                              )
-                            ) : (
-                              <div className="w-4 shrink-0" />
-                            )}
-                            <div
-                              className={cn(
-                                'w-8 h-8 rounded-lg flex items-center justify-center shrink-0',
-                                server.enabled !== false ? 'bg-brand-500/20' : 'bg-muted'
-                              )}
-                            >
-                              <Icon className="w-4 h-4 text-brand-500" />
-                            </div>
-                            <div className="min-w-0 flex-1 overflow-hidden">
-                              <div className="flex items-center gap-2 flex-wrap">
-                                <span className="font-medium text-sm truncate">{server.name}</span>
-                                {testState && getTestStatusIcon(testState.status)}
-                                {testState?.status === 'success' && testState.tools && (
-                                  <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded whitespace-nowrap">
-                                    {testState.tools.length} tool
-                                    {testState.tools.length !== 1 ? 's' : ''}
-                                  </span>
-                                )}
-                              </div>
-                              {server.description && (
-                                <div className="text-xs text-muted-foreground truncate">
-                                  {server.description}
-                                </div>
-                              )}
-                              <div className="text-xs text-muted-foreground/60 mt-0.5 truncate">
-                                {server.type === 'stdio'
-                                  ? `${server.command}${server.args?.length ? ' ' + server.args.join(' ') : ''}`
-                                  : maskSensitiveUrl(server.url || '')}
-                              </div>
-                              {testState?.status === 'error' && testState.error && (
-                                <div className="text-xs text-destructive mt-1 line-clamp-2 break-words">
-                                  {testState.error}
-                                </div>
-                              )}
-                            </div>
-                          </button>
-                        </CollapsibleTrigger>
-                      </div>
-                      <div className="flex items-center gap-2 shrink-0 ml-2">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleTestServer(server)}
-                          disabled={testState?.status === 'testing' || server.enabled === false}
-                          data-testid={`mcp-server-test-${server.id}`}
-                          className="h-8 px-2"
-                        >
-                          {testState?.status === 'testing' ? (
-                            <Loader2 className="w-4 h-4 animate-spin" />
-                          ) : (
-                            <PlayCircle className="w-4 h-4" />
-                          )}
-                          <span className="ml-1.5 text-xs">Test</span>
-                        </Button>
-                        <Switch
-                          checked={server.enabled !== false}
-                          onCheckedChange={() => handleToggleEnabled(server)}
-                          data-testid={`mcp-server-toggle-${server.id}`}
-                        />
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => handleOpenJsonEdit(server)}
-                          title="Edit JSON"
-                          data-testid={`mcp-server-json-${server.id}`}
-                        >
-                          <Code className="w-4 h-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => handleOpenEditDialog(server)}
-                          data-testid={`mcp-server-edit-${server.id}`}
-                        >
-                          <Pencil className="w-4 h-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="text-destructive hover:text-destructive"
-                          onClick={() => setDeleteConfirmId(server.id)}
-                          data-testid={`mcp-server-delete-${server.id}`}
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
-                    {hasTools && (
-                      <CollapsibleContent>
-                        <div className="px-4 pb-4 pt-0 ml-7 overflow-hidden">
-                          <div className="text-xs font-medium text-muted-foreground mb-2">
-                            Available Tools
-                          </div>
-                          <MCPToolsList
-                            tools={testState.tools!}
-                            isLoading={testState.status === 'testing'}
-                            error={testState.error}
-                            className="max-w-full"
-                          />
-                        </div>
-                      </CollapsibleContent>
-                    )}
-                  </div>
-                </Collapsible>
-              );
-            })}
+            {mcpServers.map((server) => (
+              <MCPServerCard
+                key={server.id}
+                server={server}
+                testState={serverTestStates[server.id]}
+                isExpanded={expandedServers.has(server.id)}
+                onToggleExpanded={() => toggleServerExpanded(server.id)}
+                onTest={() => handleTestServer(server)}
+                onToggleEnabled={() => handleToggleEnabled(server)}
+                onEditJson={() => handleOpenJsonEdit(server)}
+                onEdit={() => handleOpenEditDialog(server)}
+                onDelete={() => setDeleteConfirmId(server.id)}
+              />
+            ))}
           </div>
         )}
       </div>
 
-      {/* Add/Edit Dialog */}
-      <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-        <DialogContent data-testid="mcp-server-dialog">
-          <DialogHeader>
-            <DialogTitle>{editingServer ? 'Edit MCP Server' : 'Add MCP Server'}</DialogTitle>
-            <DialogDescription>
-              Configure an MCP server to extend agent capabilities with custom tools.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="server-name">Name</Label>
-              <Input
-                id="server-name"
-                value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                placeholder="my-mcp-server"
-                data-testid="mcp-server-name-input"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="server-description">Description (optional)</Label>
-              <Input
-                id="server-description"
-                value={formData.description}
-                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                placeholder="What this server provides..."
-                data-testid="mcp-server-description-input"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="server-type">Transport Type</Label>
-              <Select
-                value={formData.type}
-                onValueChange={(value: ServerType) => setFormData({ ...formData, type: value })}
-              >
-                <SelectTrigger id="server-type" data-testid="mcp-server-type-select">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="stdio">Stdio (subprocess)</SelectItem>
-                  <SelectItem value="sse">SSE (Server-Sent Events)</SelectItem>
-                  <SelectItem value="http">HTTP</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            {formData.type === 'stdio' ? (
-              <>
-                <div className="space-y-2">
-                  <Label htmlFor="server-command">Command</Label>
-                  <Input
-                    id="server-command"
-                    value={formData.command}
-                    onChange={(e) => setFormData({ ...formData, command: e.target.value })}
-                    placeholder="npx, node, python, etc."
-                    data-testid="mcp-server-command-input"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="server-args">Arguments (space-separated)</Label>
-                  <Input
-                    id="server-args"
-                    value={formData.args}
-                    onChange={(e) => setFormData({ ...formData, args: e.target.value })}
-                    placeholder="-y @modelcontextprotocol/server-filesystem"
-                    data-testid="mcp-server-args-input"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="server-env">Environment Variables (JSON, optional)</Label>
-                  <Textarea
-                    id="server-env"
-                    value={formData.env}
-                    onChange={(e) => setFormData({ ...formData, env: e.target.value })}
-                    placeholder={'{\n  "API_KEY": "your-key"\n}'}
-                    className="font-mono text-sm h-24"
-                    data-testid="mcp-server-env-input"
-                  />
-                </div>
-              </>
-            ) : (
-              <>
-                <div className="space-y-2">
-                  <Label htmlFor="server-url">URL</Label>
-                  <Input
-                    id="server-url"
-                    value={formData.url}
-                    onChange={(e) => setFormData({ ...formData, url: e.target.value })}
-                    placeholder="https://example.com/mcp"
-                    data-testid="mcp-server-url-input"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="server-headers">Headers (JSON, optional)</Label>
-                  <Textarea
-                    id="server-headers"
-                    value={formData.headers}
-                    onChange={(e) => setFormData({ ...formData, headers: e.target.value })}
-                    placeholder={
-                      '{\n  "x-api-key": "your-api-key",\n  "Authorization": "Bearer token"\n}'
-                    }
-                    className="font-mono text-sm h-24"
-                    data-testid="mcp-server-headers-input"
-                  />
-                </div>
-              </>
-            )}
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={handleCloseDialog}>
-              Cancel
-            </Button>
-            <Button onClick={handleSave} data-testid="mcp-server-save-button">
-              {editingServer ? 'Save Changes' : 'Add Server'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {/* Dialogs */}
+      <AddEditServerDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        editingServer={editingServer}
+        formData={formData}
+        onFormDataChange={setFormData}
+        onSave={handleSave}
+        onCancel={handleCloseDialog}
+      />
 
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
-        <DialogContent data-testid="mcp-server-delete-dialog">
-          <DialogHeader>
-            <DialogTitle>Delete MCP Server</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete this MCP server? This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteConfirmId(null)}>
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => deleteConfirmId && handleDelete(deleteConfirmId)}
-              data-testid="mcp-server-confirm-delete-button"
-            >
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <DeleteServerDialog
+        open={!!deleteConfirmId}
+        onOpenChange={(open) => setDeleteConfirmId(open ? deleteConfirmId : null)}
+        onConfirm={() => deleteConfirmId && handleDelete(deleteConfirmId)}
+      />
 
-      {/* Import JSON Dialog */}
-      <Dialog open={isImportDialogOpen} onOpenChange={setIsImportDialogOpen}>
-        <DialogContent className="max-w-2xl" data-testid="mcp-import-dialog">
-          <DialogHeader>
-            <DialogTitle>Import MCP Servers</DialogTitle>
-            <DialogDescription>
-              Paste JSON configuration in Claude Code format. Servers with duplicate names will be
-              skipped.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <Textarea
-              value={importJson}
-              onChange={(e) => setImportJson(e.target.value)}
-              placeholder={`{
-  "mcpServers": {
-    "server-name": {
-      "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-name"],
-      "type": "stdio"
-    }
-  }
-}`}
-              className="font-mono text-sm h-64"
-              data-testid="mcp-import-textarea"
-            />
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setIsImportDialogOpen(false);
-                setImportJson('');
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleImportJson}
-              disabled={!importJson.trim()}
-              data-testid="mcp-import-button"
-            >
-              <FileJson className="w-4 h-4 mr-2" />
-              Import
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <ImportJsonDialog
+        open={isImportDialogOpen}
+        onOpenChange={setIsImportDialogOpen}
+        importJson={importJson}
+        onImportJsonChange={setImportJson}
+        onImport={handleImportJson}
+        onCancel={() => {
+          setIsImportDialogOpen(false);
+          setImportJson('');
+        }}
+      />
 
-      {/* JSON Edit Dialog */}
-      <Dialog
+      <JsonEditDialog
         open={!!jsonEditServer}
         onOpenChange={(open) => {
           if (!open) {
@@ -1247,102 +166,27 @@ export function MCPServersSection() {
             setJsonEditValue('');
           }
         }}
-      >
-        <DialogContent className="max-w-2xl" data-testid="mcp-json-edit-dialog">
-          <DialogHeader>
-            <DialogTitle>Edit Server Configuration</DialogTitle>
-            <DialogDescription>
-              Edit the raw JSON configuration for "{jsonEditServer?.name}". Changes will be
-              validated before saving.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <Textarea
-              value={jsonEditValue}
-              onChange={(e) => setJsonEditValue(e.target.value)}
-              placeholder="Server configuration JSON..."
-              className="font-mono text-sm h-80"
-              data-testid="mcp-json-edit-textarea"
-            />
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setJsonEditServer(null);
-                setJsonEditValue('');
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleSaveJsonEdit}
-              disabled={!jsonEditValue.trim()}
-              data-testid="mcp-json-edit-save-button"
-            >
-              <Code className="w-4 h-4 mr-2" />
-              Save JSON
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Global JSON Edit Dialog */}
-      <Dialog
-        open={isGlobalJsonEditOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            setIsGlobalJsonEditOpen(false);
-            setGlobalJsonValue('');
-          }
+        server={jsonEditServer}
+        jsonValue={jsonEditValue}
+        onJsonValueChange={setJsonEditValue}
+        onSave={handleSaveJsonEdit}
+        onCancel={() => {
+          setJsonEditServer(null);
+          setJsonEditValue('');
         }}
-      >
-        <DialogContent className="max-w-3xl max-h-[90vh]" data-testid="mcp-global-json-edit-dialog">
-          <DialogHeader>
-            <DialogTitle>Edit All MCP Servers</DialogTitle>
-            <DialogDescription>
-              Edit the full MCP servers configuration. Add, modify, or remove servers directly in
-              JSON. Servers removed from JSON will be deleted.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <Textarea
-              value={globalJsonValue}
-              onChange={(e) => setGlobalJsonValue(e.target.value)}
-              placeholder={`{
-  "mcpServers": {
-    "server-name": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-name"]
-    }
-  }
-}`}
-              className="font-mono text-sm h-[50vh] min-h-[300px]"
-              data-testid="mcp-global-json-edit-textarea"
-            />
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setIsGlobalJsonEditOpen(false);
-                setGlobalJsonValue('');
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleSaveGlobalJsonEdit}
-              disabled={!globalJsonValue.trim()}
-              data-testid="mcp-global-json-edit-save-button"
-            >
-              <Code className="w-4 h-4 mr-2" />
-              Save All
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      />
+
+      <GlobalJsonEditDialog
+        open={isGlobalJsonEditOpen}
+        onOpenChange={setIsGlobalJsonEditOpen}
+        jsonValue={globalJsonValue}
+        onJsonValueChange={setGlobalJsonValue}
+        onSave={handleSaveGlobalJsonEdit}
+        onCancel={() => {
+          setIsGlobalJsonEditOpen(false);
+          setGlobalJsonValue('');
+        }}
+      />
     </div>
   );
 }
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx
index c37745be..bec1f808 100644
--- a/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx
@@ -42,7 +42,7 @@ export function MCPToolsList({ tools, isLoading, error, className }: MCPToolsLis
   }
 
   if (error) {
-    return <div className={cn('text-sm text-destructive break-words', className)}>{error}</div>;
+    return <div className={cn('text-sm text-destructive wrap-break-word', className)}>{error}</div>;
   }
 
   if (!tools || tools.length === 0) {
@@ -89,7 +89,7 @@ export function MCPToolsList({ tools, isLoading, error, className }: MCPToolsLis
                     <div className="flex flex-col items-start text-left min-w-0 overflow-hidden flex-1">
                       <span className="font-medium text-xs truncate max-w-full">{tool.name}</span>
                       {tool.description && (
-                        <span className="text-xs text-muted-foreground line-clamp-2 break-words w-full">
+                        <span className="text-xs text-muted-foreground line-clamp-2 wrap-break-word w-full">
                           {tool.description}
                         </span>
                       )}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/types.ts b/apps/ui/src/components/views/settings-view/mcp-servers/types.ts
new file mode 100644
index 00000000..35494eb1
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/types.ts
@@ -0,0 +1,32 @@
+import type { MCPToolDisplay } from './mcp-tools-list';
+
+export type ServerType = 'stdio' | 'sse' | 'http';
+
+export interface ServerFormData {
+  name: string;
+  description: string;
+  type: ServerType;
+  command: string;
+  args: string;
+  url: string;
+  headers: string; // JSON string for headers
+  env: string; // JSON string for env vars
+}
+
+export const defaultFormData: ServerFormData = {
+  name: '',
+  description: '',
+  type: 'stdio',
+  command: '',
+  args: '',
+  url: '',
+  headers: '',
+  env: '',
+};
+
+export interface ServerTestState {
+  status: 'idle' | 'testing' | 'success' | 'error';
+  tools?: MCPToolDisplay[];
+  error?: string;
+  connectionTime?: number;
+}
diff --git a/apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx b/apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx
new file mode 100644
index 00000000..25102025
--- /dev/null
+++ b/apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx
@@ -0,0 +1,51 @@
+import { Terminal, Globe, Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import type { ServerType, ServerTestState } from './types';
+import { SENSITIVE_PARAM_PATTERNS } from './constants';
+
+/**
+ * Mask sensitive values in URLs (query params with key-like names)
+ */
+export function maskSensitiveUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    const params = new URLSearchParams(urlObj.search);
+    let hasSensitive = false;
+
+    for (const [key] of params.entries()) {
+      if (SENSITIVE_PARAM_PATTERNS.some((pattern) => pattern.test(key))) {
+        params.set(key, '***');
+        hasSensitive = true;
+      }
+    }
+
+    if (hasSensitive) {
+      urlObj.search = params.toString();
+      return urlObj.toString();
+    }
+    return url;
+  } catch {
+    // If URL parsing fails, try simple regex replacement for common patterns
+    return url.replace(
+      /([?&])(api[-_]?key|auth|token|secret|password|credential)=([^&]*)/gi,
+      '$1$2=***'
+    );
+  }
+}
+
+export function getServerIcon(type: ServerType = 'stdio') {
+  if (type === 'stdio') return Terminal;
+  return Globe;
+}
+
+export function getTestStatusIcon(status: ServerTestState['status']) {
+  switch (status) {
+    case 'testing':
+      return <Loader2 className="w-4 h-4 animate-spin text-brand-500" />;
+    case 'success':
+      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+    case 'error':
+      return <XCircle className="w-4 h-4 text-destructive" />;
+    default:
+      return null;
+  }
+}