diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 6e832fb..2173eae 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -58,3 +58,16 @@ jobs:
         with:
           args: >
             -Dsonar.qualitygate.wait=false
+
+      - name: Notify OpenClaw for Review
+        if: success()
+        run: |
+          curl -s -X POST "https://openclaw.soludev.tech/hooks/agent" \
+            -H "Authorization: Bearer ${{ secrets.OPENCLAW_WEBHOOK_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            -d '{
+              "message": "CI terminée pour PR \"${{ github.event.pull_request.title }}\" - ${{ github.event.pull_request.html_url }}. Fais une review du code de la PR. Analyse les changements, ensuite poste un commentaire de review sur la PR. Donne un score de 1 à 10 pour la qualité du code, et suggère des améliorations si nécessaire.",
+              "deliver": true,
+              "channel": "telegram",
+              "to": "1988394825"
+            }'
diff --git a/bun.lock b/bun.lock
index a2ec038..1d78c36 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@microsoft/fetch-event-source": "^2.0.1",
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -16,6 +17,7 @@
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-toggle": "^1.1.10",
         "@radix-ui/react-toggle-group": "^1.1.11",
@@ -26,10 +28,11 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "framer-motion": "^12.38.0",
+        "js-yaml": "^4.1.1",
         "lucide-react": "^1.7.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
-        "react-hook-form": "^7.72.1",
+        "react-hook-form": "^7.73.1",
         "react-markdown": "^10.1.0",
         "react-router-dom": "^7.14.0",
         "remark-gfm": "^4.0.1",
@@ -45,6 +48,7 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
+        "@types/js-yaml": "^4.0.9",
         "@types/node": "^25.5.2",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -182,12 +186,16 @@
 
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
+    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
+
     "@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw=="],
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
 
     "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.11", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q=="],
 
+    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
+
     "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
 
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
@@ -232,6 +240,8 @@
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
+
     "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
 
     "@radix-ui/react-toggle": ["@radix-ui/react-toggle@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ=="],
@@ -388,6 +398,8 @@
 
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
+    "@types/js-yaml": ["@types/js-yaml@4.0.9", "", {}, "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg=="],
+
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
@@ -456,6 +468,8 @@
 
     "ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
     "aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
@@ -700,6 +714,8 @@
 
     "js-tokens": ["js-tokens@10.0.0", "", {}, "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q=="],
 
+    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+
     "jsdom": ["jsdom@25.0.1", "", { "dependencies": { "cssstyle": "^4.1.0", "data-urls": "^5.0.0", "decimal.js": "^10.4.3", "form-data": "^4.0.0", "html-encoding-sniffer": "^4.0.0", "http-proxy-agent": "^7.0.2", "https-proxy-agent": "^7.0.5", "is-potential-custom-element-name": "^1.0.1", "nwsapi": "^2.2.12", "parse5": "^7.1.2", "rrweb-cssom": "^0.7.1", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^5.0.0", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^7.0.0", "whatwg-encoding": "^3.1.1", "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.0.0", "ws": "^8.18.0", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^2.11.2" }, "optionalPeers": ["canvas"] }, "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw=="],
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
@@ -912,7 +928,7 @@
 
     "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
 
-    "react-hook-form": ["react-hook-form@7.72.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-RhwBoy2ygeVZje+C+bwJ8g0NjTdBmDlJvAUHTxRjTmSUKPYsKfMphkS2sgEMotsY03bP358yEYlnUeZy//D9Ig=="],
+    "react-hook-form": ["react-hook-form@7.73.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-VAfVYOPcx3piiEVQy95vyFmBwbVUsP/AUIN+mpFG8h11yshDd444nn0VyfaGWSRnhOLVgiDu7HIuBtAIzxn9dA=="],
 
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
diff --git a/package.json b/package.json
index 0c427c3..ad3ec99 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -29,6 +30,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
@@ -39,10 +41,11 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "framer-motion": "^12.38.0",
+    "js-yaml": "^4.1.1",
     "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.73.1",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.14.0",
     "remark-gfm": "^4.0.1",
@@ -58,6 +61,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
diff --git a/src/application/components/agent/AgentCard.tsx b/src/application/components/agent/AgentCard.tsx
index f673b52..fd318a3 100644
--- a/src/application/components/agent/AgentCard.tsx
+++ b/src/application/components/agent/AgentCard.tsx
@@ -2,8 +2,8 @@ import type { AgentConfigMetadata } from "@/domain/entities/agent/agentConfigMet
 import StatusBadge from "@/application/components/shared/StatusBadge";
 
 interface AgentCardProps {
-  agent: AgentConfigMetadata;
-  onConfigure: (name: string) => void;
+  readonly agent: AgentConfigMetadata;
+  readonly onConfigure: (name: string) => void;
 }
 
 const AGENT_ICONS: Record<string, string> = {
diff --git a/src/application/components/agent/AgentConfigForm.tsx b/src/application/components/agent/AgentConfigForm.tsx
new file mode 100644
index 0000000..bb24f65
--- /dev/null
+++ b/src/application/components/agent/AgentConfigForm.tsx
@@ -0,0 +1,519 @@
+import { useForm, useFieldArray } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { AgentConfig, SubAgentConfig } from "@/domain/entities/agent/agentConfig";
+import { BackendType, MiddlewareType } from "@/domain/entities/agent/agentConfig";
+import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
+import type { McpServerConfig } from "@/domain/entities/agent/mcpServerConfig";
+import {
+  agentConfigSchema,
+  type AgentConfigFormData,
+} from "@/domain/entities/agent/agentConfigSchema";
+import { Button } from "@/application/components/ui/button";
+import { Input } from "@/application/components/ui/input";
+import { Label } from "@/application/components/ui/label";
+import { Switch } from "@/application/components/ui/switch";
+import { Textarea } from "@/application/components/ui/textarea";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/application/components/ui/accordion";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/application/components/ui/select";
+import { Separator } from "@/application/components/ui/separator";
+import StringListEditor from "./StringListEditor";
+import McpServerEditor from "./McpServerEditor";
+import SubAgentEditor from "./SubAgentEditor";
+import HITLEditor from "./HITLEditor";
+import ResponseFormatEditor from "./ResponseFormatEditor";
+
+// ─── Constants ──────────────────────────────────────────────────────────────
+
+const ACCORDION_SECTIONS = [
+  "general",
+  "system-prompt",
+  "tools-middleware",
+  "backend",
+  "hitl",
+  "memory-skills",
+  "mcp-servers",
+  "subagents",
+  "response-format",
+] as const;
+
+const MIDDLEWARE_OPTIONS: { label: string; value: MiddlewareType }[] = [
+  { value: MiddlewareType.TODO_LIST, label: "todo_list" },
+  { value: MiddlewareType.FILESYSTEM, label: "filesystem" },
+  { value: MiddlewareType.SUB_AGENT, label: "sub_agent" },
+];
+
+const BACKEND_OPTIONS: { label: string; value: BackendType }[] = [
+  { value: BackendType.STATE, label: "state" },
+  { value: BackendType.STORE, label: "store" },
+  { value: BackendType.FILESYSTEM, label: "filesystem" },
+  { value: BackendType.COMPOSITE, label: "composite" },
+];
+
+const EMPTY_MCP_SERVER: McpServerConfig = {
+  name: "",
+  transport: McpTransportType.STDIO,
+  command: undefined,
+  args: [],
+  url: undefined,
+  headers: {},
+  env: {},
+  auth_token: undefined,
+};
+
+const EMPTY_SUBAGENT: SubAgentConfig = {
+  name: "",
+  description: "",
+  instructions: undefined,
+  model: undefined,
+  tools: [],
+  skills: [],
+  mcp_servers: [],
+  response_format: undefined,
+};
+
+const DEFAULT_FORM_VALUES: AgentConfigFormData = {
+  name: "",
+  model: "",
+  system_prompt: "",
+  system_prompt_file: "",
+  tools: [],
+  middleware: [],
+  backend: { type: BackendType.STATE },
+  hitl: { rules: {} },
+  memory: [],
+  skills: [],
+  subagents: [],
+  mcp_servers: [],
+  response_format: undefined,
+  debug: false,
+};
+
+function getDefaultValues(
+  mode: "create" | "edit",
+  initialData?: AgentConfig,
+): AgentConfigFormData {
+  if (mode === "edit" && initialData) {
+    return {
+      ...DEFAULT_FORM_VALUES,
+      ...initialData,
+      system_prompt: initialData.system_prompt ?? "",
+      system_prompt_file: initialData.system_prompt_file ?? "",
+      response_format: initialData.response_format ?? undefined,
+    };
+  }
+  return { ...DEFAULT_FORM_VALUES };
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function cn(...classes: (string | false | undefined)[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+function buildAccordionTriggerClass(active?: boolean): string {
+  return cn(
+    "text-xs font-bold font-headline uppercase tracking-widest hover:no-underline",
+    active
+      ? "text-secondary-brand"
+      : "text-on-surface-variant",
+  );
+}
+
+// ─── Props ──────────────────────────────────────────────────────────────────
+
+interface AgentConfigFormProps {
+  mode: "create" | "edit";
+  initialData?: AgentConfig;
+  onSubmit: (data: AgentConfigFormData) => void;
+  onCancel: () => void;
+  isPending?: boolean;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────
+
+export default function AgentConfigForm({
+  mode,
+  initialData,
+  onSubmit,
+  onCancel,
+  isPending = false,
+}: Readonly<AgentConfigFormProps>) {
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors },
+  } = useForm<AgentConfigFormData>({
+    resolver: zodResolver(agentConfigSchema),
+    defaultValues: getDefaultValues(mode, initialData),
+  });
+
+  const mcpServersArray = useFieldArray({ control, name: "mcp_servers" });
+  const subagentsArray = useFieldArray({ control, name: "subagents" });
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const backendType = watch("backend.type");
+  const middlewareValues = watch("middleware");
+
+  function handleFormSubmit(data: AgentConfigFormData) {
+    const cleaned: AgentConfigFormData = {
+      ...data,
+      system_prompt: data.system_prompt || undefined,
+      system_prompt_file: data.system_prompt_file || undefined,
+      response_format: data.response_format ?? undefined,
+    };
+    onSubmit(cleaned);
+  }
+
+  function addMcpServer() {
+    mcpServersArray.append({ ...EMPTY_MCP_SERVER });
+  }
+
+  function addSubagent() {
+    subagentsArray.append({ ...EMPTY_SUBAGENT });
+  }
+
+  function toggleMiddleware(mw: MiddlewareType, isChecked: boolean) {
+    const current = getValues("middleware");
+    if (isChecked) {
+      setValue("middleware", [...current, mw]);
+    } else {
+      setValue(
+        "middleware",
+        current.filter((m) => m !== mw),
+      );
+    }
+  }
+
+  function renderSubmitLabel(): string {
+    if (isPending) return "Saving...";
+    return mode === "create" ? "Create" : "Update";
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleFormSubmit)}
+      className="flex flex-col max-h-[70vh]"
+    >
+      <div className="flex-1 overflow-y-auto pr-4">
+        <div className="space-y-2">
+          <Accordion type="multiple" defaultValue={[...ACCORDION_SECTIONS]}>
+            {/* General */}
+            <AccordionItem value="general">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                General
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <FormField
+                  id="agent-name"
+                  label="Agent Name"
+                  error={errors.name?.message}
+                >
+                  <Input
+                    id="agent-name"
+                    {...register("name")}
+                    disabled={mode === "edit"}
+                    placeholder="my-agent"
+                    aria-invalid={!!errors.name}
+                  />
+                </FormField>
+                <FormField
+                  id="model"
+                  label="Model"
+                  error={errors.model?.message}
+                >
+                  <Input
+                    id="model"
+                    {...register("model")}
+                    placeholder="openai:anthropic/claude-haiku-4.5:nitro"
+                    aria-invalid={!!errors.model}
+                  />
+                </FormField>
+                <div className="flex items-center gap-3">
+                  <Label htmlFor="debug" className="text-on-surface">
+                    Debug
+                  </Label>
+                  <Switch
+                    id="debug"
+                    checked={watch("debug")}
+                    onCheckedChange={(v) => setValue("debug", v)}
+                  />
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* System Prompt */}
+            <AccordionItem value="system-prompt">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                System Prompt
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <FormField id="system-prompt" label="System Prompt">
+                  <Textarea
+                    id="system-prompt"
+                    {...register("system_prompt")}
+                    placeholder="You are a helpful assistant..."
+                    rows={6}
+                  />
+                </FormField>
+                <FormField
+                  id="system-prompt-file"
+                  label="System Prompt File"
+                >
+                  <Input
+                    id="system-prompt-file"
+                    {...register("system_prompt_file")}
+                    placeholder="/prompts/system.txt (optional)"
+                  />
+                </FormField>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* Tools & Middleware */}
+            <AccordionItem value="tools-middleware">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                Tools &amp; Middleware
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <StringListEditor
+                  label="Tools"
+                  value={watch("tools")}
+                  onChange={(tools) => setValue("tools", tools)}
+                  placeholder="Add tool..."
+                />
+                <div>
+                  <Label className="text-on-surface">Middleware</Label>
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {MIDDLEWARE_OPTIONS.map((opt) => {
+                      const isActive = middlewareValues.includes(opt.value);
+                      return (
+                        <button
+                          key={opt.value}
+                          type="button"
+                          onClick={() =>
+                            toggleMiddleware(opt.value, !isActive)
+                          }
+                          aria-pressed={isActive}
+                          className={cn(
+                            "px-3 py-1.5 rounded-full text-xs font-bold font-headline uppercase tracking-widest border transition-colors",
+                            isActive
+                              ? "bg-secondary-brand text-white border-secondary-brand"
+                              : "bg-surface-container-low text-on-surface-variant border-outline-variant/30 hover:bg-surface-container-high",
+                          )}
+                        >
+                          {opt.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* Backend */}
+            <AccordionItem value="backend">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                Backend
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <div>
+                  <Label className="text-on-surface">Type</Label>
+                  <Select
+                    value={backendType}
+                    onValueChange={(v) =>
+                      setValue("backend.type", v as BackendType)
+                    }
+                  >
+                    <SelectTrigger className="mt-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {BACKEND_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                {showRootDir(backendType) && (
+                  <FormField
+                    id="backend-root-dir"
+                    label="Root Directory"
+                  >
+                    <Input
+                      id="backend-root-dir"
+                      {...register("backend.root_dir")}
+                      placeholder="/data/agents"
+                    />
+                  </FormField>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* HITL */}
+            <AccordionItem value="hitl">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                HITL
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <HITLEditor
+                  value={watch("hitl.rules")}
+                  onChange={(rules) => setValue("hitl.rules", rules)}
+                />
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* Memory & Skills */}
+            <AccordionItem value="memory-skills">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                Memory &amp; Skills
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <StringListEditor
+                  label="Memory"
+                  value={watch("memory")}
+                  onChange={(memory) => setValue("memory", memory)}
+                  placeholder="Add memory path..."
+                />
+                <StringListEditor
+                  label="Skills"
+                  value={watch("skills")}
+                  onChange={(skills) => setValue("skills", skills)}
+                  placeholder="Add skill..."
+                />
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* MCP Servers */}
+            <AccordionItem value="mcp-servers">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                MCP Servers
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                {mcpServersArray.fields.map((field, index) => (
+                  <McpServerEditor
+                    key={field.id}
+                    value={field as unknown as McpServerConfig}
+                    onChange={(v) => mcpServersArray.update(index, v)}
+                    onRemove={() => mcpServersArray.remove(index)}
+                  />
+                ))}
+                <AddButton onClick={addMcpServer} label="Add MCP Server" />
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* Subagents */}
+            <AccordionItem value="subagents">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                Subagents
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                {subagentsArray.fields.map((field, index) => (
+                  <SubAgentEditor
+                    key={field.id}
+                    index={index}
+                    value={field as unknown as SubAgentConfig}
+                    onChange={(v) => subagentsArray.update(index, v)}
+                    onRemove={() => subagentsArray.remove(index)}
+                  />
+                ))}
+                <AddButton onClick={addSubagent} label="Add Subagent" />
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* Response Format */}
+            <AccordionItem value="response-format">
+              <AccordionTrigger className={buildAccordionTriggerClass()}>
+                Response Format
+              </AccordionTrigger>
+              <AccordionContent className="space-y-4 pt-2">
+                <ResponseFormatEditor
+                  value={watch("response_format")}
+                  onChange={(v) => setValue("response_format", v)}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex justify-end gap-3">
+        <Button type="button" variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isPending}>
+          {renderSubmitLabel()}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+// ─── Small helpers ─────────────────────────────────────────────────────────
+
+function showRootDir(type: BackendType): boolean {
+  return type === BackendType.FILESYSTEM || type === BackendType.COMPOSITE;
+}
+
+interface FormFieldProps {
+  id: string;
+  label: string;
+  error?: string;
+  children: React.ReactNode;
+}
+
+function FormField({ id, label, error, children }: Readonly<FormFieldProps>) {
+  const errorId = error ? `${id}-error` : undefined;
+  return (
+    <div>
+      <Label htmlFor={id} className="text-on-surface">
+        {label}
+      </Label>
+      <div aria-invalid={!!error} aria-describedby={errorId}>
+        {children}
+      </div>
+      {error && (
+        <p id={errorId} role="alert" className="text-destructive text-xs mt-1">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+interface AddButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+function AddButton({ onClick, label }: Readonly<AddButtonProps>) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      onClick={onClick}
+      className="w-full"
+    >
+      <span className="material-symbols-outlined text-sm mr-1">add</span>
+      {label}
+    </Button>
+  );
+}
diff --git a/src/application/components/agent/AgentConfigViewer.tsx b/src/application/components/agent/AgentConfigViewer.tsx
index a96e8be..a26bd3e 100644
--- a/src/application/components/agent/AgentConfigViewer.tsx
+++ b/src/application/components/agent/AgentConfigViewer.tsx
@@ -1,14 +1,29 @@
 import { useState } from "react";
 import { toast } from "sonner";
 import { useAgentConfig } from "@/application/hooks/agent/useAgentConfig";
+import { useUpdateAgent } from "@/application/hooks/agent/useUpdateAgent";
 import { useDeleteAgent } from "@/application/hooks/agent/useDeleteAgent";
+import { serializeAgentConfig, agentConfigToYamlFile } from "@/application/lib/yaml";
+import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
+import type { AgentConfigFormData } from "@/domain/entities/agent/agentConfigSchema";
 import StatusBadge from "@/application/components/shared/StatusBadge";
 import ToolTag from "@/application/components/shared/ToolTag";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/application/components/ui/dialog";
+import { Button } from "@/application/components/ui/button";
+import { ScrollArea } from "@/application/components/ui/scroll-area";
+import { Separator } from "@/application/components/ui/separator";
+import AgentConfigForm from "./AgentConfigForm";
 
 interface AgentConfigViewerProps {
-  agentName: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
+  readonly agentName: string;
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
 }
 
 export default function AgentConfigViewer({
@@ -16,10 +31,16 @@ export default function AgentConfigViewer({
   open,
   onOpenChange,
 }: Readonly<AgentConfigViewerProps>) {
-  const { data: config, isLoading } = useAgentConfig(open ? agentName : null);
+  const {
+    data: config,
+    isLoading,
+    error,
+  } = useAgentConfig(open ? agentName : null);
+  const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
   const [promptExpanded, setPromptExpanded] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [mode, setMode] = useState<"view" | "edit">("view");
 
   if (!open) return null;
 
@@ -28,7 +49,6 @@ export default function AgentConfigViewer({
       setConfirmDelete(true);
       return;
     }
-
     deleteAgent.mutate(agentName, {
       onSuccess: () => {
         toast.success(`Agent "${agentName}" deleted`);
@@ -42,228 +62,283 @@ export default function AgentConfigViewer({
     });
   }
 
-  function handleBackdropClick(e: React.MouseEvent) {
-    if (e.target === e.currentTarget) {
-      onOpenChange(false);
-    }
+  function handleEditSubmit(data: AgentConfigFormData) {
+    const configToUpdate: AgentConfig = {
+      ...data,
+      system_prompt: data.system_prompt || undefined,
+      system_prompt_file: data.system_prompt_file || undefined,
+      response_format: data.response_format || undefined,
+    };
+
+    const file = agentConfigToYamlFile(configToUpdate, `${agentName}.yaml`);
+    updateAgent.mutate(
+      { name: agentName, yamlFile: file },
+      {
+        onSuccess: () => {
+          toast.success("Agent updated successfully");
+          setMode("view");
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        },
+      },
+    );
+  }
+
+  function handleExportYaml() {
+    if (!config) return;
+    const yamlContent = serializeAgentConfig(config);
+    const blob = new Blob([yamlContent], { type: "application/x-yaml" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${agentName}.yaml`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+  }
+
+  function handleClose() {
+    setMode("view");
+    setConfirmDelete(false);
+    onOpenChange(false);
   }
 
   return (
-    <div
-      className="fixed inset-0 z-50 overflow-y-auto flex items-start justify-center pt-[10vh] bg-black/30 backdrop-blur-sm"
-      onClick={handleBackdropClick}
-      onKeyDown={(e) => {
-        if (e.key === "Escape") onOpenChange(false);
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) handleClose();
       }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="agent-viewer-title"
     >
-      <div
-        role="document"
-        className="w-full max-w-2xl my-8"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="bg-surface-container-lowest rounded-2xl p-8 w-full max-h-[80vh] overflow-y-auto ambient-shadow">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-8">
-            <h2
-              id="agent-viewer-title"
-              className="font-headline text-2xl font-bold text-on-surface"
-            >
+        <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col overflow-hidden">
+          <DialogHeader>
+            <DialogTitle className="font-headline text-2xl font-bold text-on-surface">
               {agentName}
-            </h2>
-            <button
-              type="button"
-              onClick={() => onOpenChange(false)}
-              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors"
-            >
-              <span className="material-symbols-outlined text-on-surface-variant">
-                close
-              </span>
-            </button>
-          </div>
+            </DialogTitle>
+            <DialogDescription className="sr-only">
+              Agent configuration for {agentName}
+            </DialogDescription>
+          </DialogHeader>
 
-          {isLoading && (
-            <p className="text-on-surface-variant text-sm py-8 text-center">
-              Loading configuration...
-            </p>
-          )}
+        {mode === "edit" && config ? (
+          <AgentConfigForm
+            mode="edit"
+            initialData={config}
+            onSubmit={handleEditSubmit}
+            onCancel={() => setMode("view")}
+            isPending={updateAgent.isPending}
+          />
+        ) : (
+          <ScrollArea className="max-h-[70vh]">
+            {isLoading && (
+              <p className="text-on-surface-variant text-sm py-8 text-center">
+                Loading configuration...
+              </p>
+            )}
 
-          {config && (
-            <div className="space-y-6">
-              {/* Model & Debug */}
-              <div className="flex items-center gap-4">
-                <div className="flex-1">
-                  <SectionLabel>Model</SectionLabel>
-                  <p className="text-on-surface text-sm">{config.model}</p>
-                </div>
-                <div>
-                  <SectionLabel>Debug</SectionLabel>
-                  <StatusBadge status={config.debug ? "Active" : "Off"} />
-                </div>
-              </div>
+            {error && (
+              <p className="text-destructive text-sm py-8 text-center">
+                Failed to load configuration: {error.message}
+              </p>
+            )}
 
-              {/* System Prompt */}
-              {config.system_prompt && (
-                <div>
-                  <SectionLabel>System Prompt</SectionLabel>
-                  <div className="bg-surface-container-low rounded-xl p-4 text-xs text-on-surface font-mono leading-relaxed">
-                    {promptExpanded
-                      ? config.system_prompt
-                      : config.system_prompt.slice(0, 200)}
-                    {config.system_prompt.length > 200 && (
-                      <button
-                        type="button"
-                        onClick={() => setPromptExpanded(!promptExpanded)}
-                        className="ml-1 text-secondary-brand font-bold"
-                      >
-                        {promptExpanded ? "Show less" : "...Show more"}
-                      </button>
-                    )}
+            {config && (
+              <div className="space-y-6">
+                {/* Model & Debug */}
+                <div className="flex items-center gap-4">
+                  <div className="flex-1">
+                    <SectionLabel>Model</SectionLabel>
+                    <p className="text-on-surface text-sm">{config.model}</p>
+                  </div>
+                  <div>
+                    <SectionLabel>Debug</SectionLabel>
+                    <StatusBadge status={config.debug ? "Active" : "Off"} />
                   </div>
                 </div>
-              )}
 
-              {/* Tools */}
-              {config.tools.length > 0 && (
-                <div>
-                  <SectionLabel>Tools ({config.tools.length})</SectionLabel>
-                  <div className="flex flex-wrap gap-2">
-                    {config.tools.map((tool) => (
-                      <ToolTag key={tool} label={tool} />
-                    ))}
+                {/* System Prompt */}
+                {config.system_prompt && (
+                  <div>
+                    <SectionLabel>System Prompt</SectionLabel>
+                    <div className="bg-surface-container-low rounded-xl p-4 text-xs text-on-surface font-mono leading-relaxed">
+                      {promptExpanded
+                        ? config.system_prompt
+                        : config.system_prompt.slice(0, 200)}
+                      {config.system_prompt.length > 200 && (
+                        <button
+                          type="button"
+                          onClick={() => setPromptExpanded(!promptExpanded)}
+                          className="ml-1 text-secondary-brand font-bold"
+                        >
+                          {promptExpanded ? "Show less" : "...Show more"}
+                        </button>
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
 
-              {/* Middleware */}
-              {config.middleware.length > 0 && (
-                <div>
-                  <SectionLabel>
-                    Middleware ({config.middleware.length})
-                  </SectionLabel>
-                  <div className="flex flex-wrap gap-2">
-                    {config.middleware.map((mw) => (
-                      <ToolTag key={mw} label={mw} />
-                    ))}
+                {/* Tools */}
+                {config.tools.length > 0 && (
+                  <div>
+                    <SectionLabel>Tools ({config.tools.length})</SectionLabel>
+                    <div className="flex flex-wrap gap-2">
+                      {config.tools.map((tool) => (
+                        <ToolTag key={tool} label={tool} />
+                      ))}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
 
-              {/* Backend */}
-              <div>
-                <SectionLabel>Backend</SectionLabel>
-                <p className="text-on-surface text-sm">
-                  Type: <span className="font-mono">{config.backend.type}</span>
-                  {config.backend.root_dir && (
-                    <>
-                      {" "}
-                      &middot; Root:{" "}
-                      <span className="font-mono">
-                        {config.backend.root_dir}
-                      </span>
-                    </>
-                  )}
-                </p>
-              </div>
+                {/* Middleware */}
+                {config.middleware.length > 0 && (
+                  <div>
+                    <SectionLabel>
+                      Middleware ({config.middleware.length})
+                    </SectionLabel>
+                    <div className="flex flex-wrap gap-2">
+                      {config.middleware.map((mw) => (
+                        <ToolTag key={mw} label={mw} />
+                      ))}
+                    </div>
+                  </div>
+                )}
 
-              {/* HITL Rules */}
-              {Object.keys(config.hitl.rules).length > 0 && (
+                {/* Backend */}
                 <div>
-                  <SectionLabel>HITL Rules</SectionLabel>
-                  <div className="bg-surface-container-low rounded-xl p-4 space-y-1">
-                    {Object.entries(config.hitl.rules).map(([key, value]) => (
-                      <div
-                        key={key}
-                        className="flex items-center justify-between text-xs"
-                      >
-                        <span className="font-mono text-on-surface">{key}</span>
-                        <span className="text-on-surface-variant">
-                          {(() => {
-                            if (typeof value === "boolean")
-                              return value ? "Enabled" : "Disabled";
-                            return JSON.stringify(value);
-                          })()}
+                  <SectionLabel>Backend</SectionLabel>
+                  <p className="text-on-surface text-sm">
+                    Type:{" "}
+                    <span className="font-mono">{config.backend.type}</span>
+                    {config.backend.root_dir && (
+                      <>
+                        {" "}
+                        &middot; Root:{" "}
+                        <span className="font-mono">
+                          {config.backend.root_dir}
                         </span>
-                      </div>
-                    ))}
-                  </div>
+                      </>
+                    )}
+                  </p>
                 </div>
-              )}
 
-              {/* MCP Servers */}
-              {config.mcp_servers.length > 0 && (
-                <div>
-                  <SectionLabel>
-                    MCP Servers ({config.mcp_servers.length})
-                  </SectionLabel>
-                  <div className="space-y-2">
-                    {config.mcp_servers.map((server) => (
-                      <div
-                        key={server.name}
-                        className="bg-surface-container-low rounded-xl p-3 flex items-center justify-between"
-                      >
-                        <span className="text-sm font-medium text-on-surface">
-                          {server.name}
-                        </span>
-                        <ToolTag label={server.transport} />
-                      </div>
-                    ))}
+                {/* HITL Rules */}
+                {Object.keys(config.hitl.rules).length > 0 && (
+                  <div>
+                    <SectionLabel>HITL Rules</SectionLabel>
+                    <div className="bg-surface-container-low rounded-xl p-4 space-y-1">
+                      {Object.entries(config.hitl.rules).map(([key, value]) => (
+                        <div
+                          key={key}
+                          className="flex items-center justify-between text-xs"
+                        >
+                          <span className="font-mono text-on-surface">
+                            {key}
+                          </span>
+                          <span className="text-on-surface-variant">
+                            {(() => {
+                              if (typeof value === "boolean")
+                                return value ? "Enabled" : "Disabled";
+                              return JSON.stringify(value);
+                            })()}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
 
-              {/* Subagents */}
-              {config.subagents.length > 0 && (
-                <div>
-                  <SectionLabel>
-                    Subagents ({config.subagents.length})
-                  </SectionLabel>
-                  <div className="space-y-2">
-                    {config.subagents.map((sub) => (
-                      <div
-                        key={sub.name}
-                        className="bg-surface-container-low rounded-xl p-3"
-                      >
-                        <p className="text-sm font-medium text-on-surface">
-                          {sub.name}
-                        </p>
-                        <p className="text-xs text-on-surface-variant mt-1">
-                          {sub.description}
-                        </p>
-                      </div>
-                    ))}
+                {/* MCP Servers */}
+                {config.mcp_servers.length > 0 && (
+                  <div>
+                    <SectionLabel>
+                      MCP Servers ({config.mcp_servers.length})
+                    </SectionLabel>
+                    <div className="space-y-2">
+                      {config.mcp_servers.map((server) => (
+                        <div
+                          key={server.name}
+                          className="bg-surface-container-low rounded-xl p-3 flex items-center justify-between"
+                        >
+                          <span className="text-sm font-medium text-on-surface">
+                            {server.name}
+                          </span>
+                          <ToolTag label={server.transport} />
+                        </div>
+                      ))}
+                    </div>
                   </div>
-                </div>
-              )}
-            </div>
-          )}
+                )}
 
-          {/* Actions */}
-          <div className="flex items-center gap-3 mt-8 pt-6 border-t border-outline-variant/30">
-            <button
-              type="button"
-              onClick={handleDelete}
-              disabled={deleteAgent.isPending}
-              className="px-6 py-3 rounded-full bg-red-600 text-white font-headline text-xs font-bold uppercase tracking-widest hover:bg-red-700 transition-colors disabled:opacity-50"
-            >
-              {confirmDelete ? "Confirm Delete?" : "Delete"}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                onOpenChange(false);
-                setConfirmDelete(false);
-              }}
-              className="px-6 py-3 rounded-full border border-outline-variant/30 text-on-surface-variant font-headline text-xs font-bold uppercase tracking-widest hover:bg-surface-container transition-colors"
-            >
-              Close
-            </button>
-          </div>
+                {/* Subagents */}
+                {config.subagents.length > 0 && (
+                  <div>
+                    <SectionLabel>
+                      Subagents ({config.subagents.length})
+                    </SectionLabel>
+                    <div className="space-y-2">
+                      {config.subagents.map((sub) => (
+                        <div
+                          key={sub.name}
+                          className="bg-surface-container-low rounded-xl p-3"
+                        >
+                          <p className="text-sm font-medium text-on-surface">
+                            {sub.name}
+                          </p>
+                          <p className="text-xs text-on-surface-variant mt-1">
+                            {sub.description}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </ScrollArea>
+        )}
+
+        {/* Actions */}
+        <Separator />
+        <div className="flex items-center gap-3">
+          {mode === "view" && (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleExportYaml}
+                disabled={!config}
+                className="px-6 py-3 rounded-full font-headline text-xs font-bold uppercase tracking-widest"
+              >
+                <span className="material-symbols-outlined text-sm mr-1">download</span>{" "}
+                Export YAML
+              </Button>
+              <Button
+                type="button"
+                onClick={() => {
+                  setMode("edit");
+                }}
+                disabled={!config}
+                className="px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity"
+              >
+                <span className="material-symbols-outlined text-sm mr-1">edit</span>{" "}
+                Edit
+              </Button>
+              <div className="flex-1" />
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={deleteAgent.isPending}
+                className="px-6 py-3 rounded-full bg-red-600 text-white font-headline text-xs font-bold uppercase tracking-widest hover:bg-red-700 transition-colors disabled:opacity-50"
+              >
+                {confirmDelete ? "Confirm Delete?" : "Delete"}
+              </button>
+            </>
+          )}
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
 
diff --git a/src/application/components/agent/CreateAgentDialog.tsx b/src/application/components/agent/CreateAgentDialog.tsx
index ce3ccc7..35063c5 100644
--- a/src/application/components/agent/CreateAgentDialog.tsx
+++ b/src/application/components/agent/CreateAgentDialog.tsx
@@ -1,25 +1,70 @@
 import { useState, useRef } from "react";
 import { toast } from "sonner";
 import { useCreateAgent } from "@/application/hooks/agent/useCreateAgent";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/application/components/ui/tabs";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/application/components/ui/dialog";
+import AgentConfigForm from "./AgentConfigForm";
+import type { AgentConfigFormData } from "@/domain/entities/agent/agentConfigSchema";
+import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
+import { agentConfigToYamlFile } from "@/application/lib/yaml";
 
 interface CreateAgentDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
 }
 
 export default function CreateAgentDialog({
   open,
   onOpenChange,
 }: Readonly<CreateAgentDialogProps>) {
+  const [tab, setTab] = useState("form");
   const [name, setName] = useState("");
   const fileInputRef = useRef<HTMLInputElement>(null);
   const createAgent = useCreateAgent();
 
-  if (!open) return null;
+  function handleClose() {
+    setTab("form");
+    setName("");
+    if (fileInputRef.current) fileInputRef.current.value = "";
+    onOpenChange(false);
+  }
 
-  function handleSubmit(e: { preventDefault: () => void }) {
-    e.preventDefault();
+  function handleFormSubmit(data: AgentConfigFormData) {
+    const config: AgentConfig = {
+      ...data,
+      system_prompt: data.system_prompt || undefined,
+      system_prompt_file: data.system_prompt_file || undefined,
+      response_format: data.response_format || undefined,
+    };
+
+    const file = agentConfigToYamlFile(config, `${config.name}.yaml`);
+    createAgent.mutate(
+      { name: config.name, yamlFile: file },
+      {
+        onSuccess: () => {
+          toast.success("Agent created successfully");
+          onOpenChange(false);
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        },
+      },
+    );
+  }
 
+  function handleYamlSubmit(e: { preventDefault: () => void }) {
+    e.preventDefault();
     const file = fileInputRef.current?.files?.[0];
     if (!name.trim()) {
       toast.error("Agent name is required");
@@ -29,7 +74,6 @@ export default function CreateAgentDialog({
       toast.error("YAML configuration file is required");
       return;
     }
-
     createAgent.mutate(
       { name: name.trim(), yamlFile: file },
       {
@@ -46,102 +90,92 @@ export default function CreateAgentDialog({
     );
   }
 
-  function handleBackdropClick(e: React.MouseEvent) {
-    if (e.target === e.currentTarget) {
-      onOpenChange(false);
-    }
-  }
-
   return (
-    <div
-      className="fixed inset-0 z-50 overflow-y-auto flex items-start justify-center pt-[10vh] bg-black/30 backdrop-blur-sm"
-      onClick={handleBackdropClick}
-      onKeyDown={(e) => {
-        if (e.key === "Escape") onOpenChange(false);
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="create-agent-title"
-    >
-      <div
-        role="document"
-        className="w-full max-w-md my-8"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="bg-surface-container-lowest rounded-2xl p-8 w-full ambient-shadow">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-8">
-            <h2
-              id="create-agent-title"
-              className="font-headline text-2xl font-bold text-on-surface"
-            >
-              Create Agent
-            </h2>
-            <button
-              type="button"
-              onClick={() => onOpenChange(false)}
-              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors"
-            >
-              <span className="material-symbols-outlined text-on-surface-variant">
-                close
-              </span>
-            </button>
-          </div>
+    <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="font-headline text-2xl font-bold text-on-surface">
+            Create Agent
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            Create a new agent via form or YAML upload
+          </DialogDescription>
+        </DialogHeader>
+
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList className="w-full">
+            <TabsTrigger value="form" className="flex-1">
+              Form
+            </TabsTrigger>
+            <TabsTrigger value="yaml" className="flex-1">
+              Upload YAML
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="form" className="mt-4">
+            <AgentConfigForm
+              mode="create"
+              onSubmit={handleFormSubmit}
+              onCancel={handleClose}
+              isPending={createAgent.isPending}
+            />
+          </TabsContent>
 
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div>
-              <label
-                htmlFor="agent-name"
-                className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2"
-              >
-                Agent Name
-              </label>
-              <input
-                id="agent-name"
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="my-agent"
-                className="w-full px-4 py-3 rounded-xl bg-surface-container-low border border-outline-variant/30 text-on-surface text-sm focus:outline-none focus:ring-2 focus:ring-secondary-brand/40 transition-shadow"
-              />
-            </div>
+          <TabsContent value="yaml" className="mt-4">
+            <form onSubmit={handleYamlSubmit} className="space-y-6">
+              <div>
+                <label
+                  htmlFor="agent-name"
+                  className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2"
+                >
+                  Agent Name
+                </label>
+                <input
+                  id="agent-name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="my-agent"
+                  className="w-full px-4 py-3 rounded-xl bg-surface-container-low border border-outline-variant/30 text-on-surface text-sm focus:outline-none focus:ring-2 focus:ring-secondary-brand/40 transition-shadow"
+                />
+              </div>
 
-            <div>
-              <label
-                htmlFor="agent-yaml"
-                className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2"
-              >
-                YAML Configuration
-              </label>
-              <input
-                id="agent-yaml"
-                ref={fileInputRef}
-                type="file"
-                accept=".yaml,.yml"
-                className="w-full text-sm text-on-surface-variant file:mr-4 file:px-4 file:py-2 file:rounded-full file:border-0 file:text-xs file:font-bold file:uppercase file:tracking-widest file:bg-surface-container file:text-on-surface-variant hover:file:bg-surface-container-high file:transition-colors file:cursor-pointer"
-              />
-            </div>
+              <div>
+                <label
+                  htmlFor="agent-yaml"
+                  className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2"
+                >
+                  YAML Configuration
+                </label>
+                <input
+                  id="agent-yaml"
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".yaml,.yml"
+                  className="w-full text-sm text-on-surface-variant file:mr-4 file:px-4 file:py-2 file:rounded-full file:border-0 file:text-xs file:font-bold file:uppercase file:tracking-widest file:bg-surface-container file:text-on-surface-variant hover:file:bg-surface-container-high file:transition-colors file:cursor-pointer"
+                />
+              </div>
 
-            <div className="flex items-center gap-3 pt-2">
-              <button
-                type="button"
-                onClick={() => onOpenChange(false)}
-                className="flex-1 px-6 py-3 rounded-full border border-outline-variant/30 text-on-surface-variant font-headline text-xs font-bold uppercase tracking-widest hover:bg-surface-container transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                disabled={createAgent.isPending}
-                className="flex-1 px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50"
-              >
-                {createAgent.isPending ? "Creating..." : "Create"}
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
+              <div className="flex items-center gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  className="flex-1 px-6 py-3 rounded-full border border-outline-variant/30 text-on-surface-variant font-headline text-xs font-bold uppercase tracking-widest hover:bg-surface-container transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={createAgent.isPending}
+                  className="flex-1 px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50"
+                >
+                  {createAgent.isPending ? "Creating..." : "Create"}
+                </button>
+              </div>
+            </form>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/application/components/agent/HITLEditor.tsx b/src/application/components/agent/HITLEditor.tsx
new file mode 100644
index 0000000..30f3d57
--- /dev/null
+++ b/src/application/components/agent/HITLEditor.tsx
@@ -0,0 +1,116 @@
+import { useState, useId } from "react";
+import { Button } from "@/application/components/ui/button";
+import { Input } from "@/application/components/ui/input";
+import { Label } from "@/application/components/ui/label";
+import { Switch } from "@/application/components/ui/switch";
+
+type RuleValue = boolean | { before?: boolean; after?: boolean };
+
+interface HITLEditorProps {
+  value: Record<string, RuleValue>;
+  onChange: (value: Record<string, RuleValue>) => void;
+}
+
+export default function HITLEditor({
+  value,
+  onChange,
+}: Readonly<HITLEditorProps>) {
+  const [ruleName, setRuleName] = useState("");
+  const inputId = useId();
+  const entries = Object.entries(value);
+
+  function addRule() {
+    const trimmed = ruleName.trim();
+    if (!trimmed) return;
+    onChange({ ...value, [trimmed]: true });
+    setRuleName("");
+  }
+
+  function removeRule(key: string) {
+    const next = { ...value };
+    delete next[key];
+    onChange(next);
+  }
+
+  function updateRule(key: string, val: RuleValue) {
+    onChange({ ...value, [key]: val });
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-2">
+        <Input
+          id={inputId}
+          value={ruleName}
+          onChange={(e) => setRuleName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              addRule();
+            }
+          }}
+          placeholder="Rule name (e.g. create_file)"
+          className="flex-1"
+          name="hitl-rule-name"
+        />
+        <Button type="button" variant="outline" size="sm" onClick={addRule}>
+          Add
+        </Button>
+      </div>
+      {entries.map(([key, val]) => (
+        <div
+          key={key}
+          className="flex items-center gap-3 bg-surface-container-low rounded-lg px-3 py-2"
+        >
+          <span className="font-mono text-xs text-on-surface">{key}</span>
+          <div className="flex-1" />
+          {typeof val === "boolean" ? (
+            <div className="flex items-center gap-2">
+              <Label className="text-xs text-on-surface-variant">Enabled</Label>
+              <Switch
+                checked={val}
+                onCheckedChange={(v) => updateRule(key, v)}
+              />
+            </div>
+          ) : (
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1">
+                <Label className="text-xs text-on-surface-variant">
+                  Before
+                </Label>
+                <Switch
+                  checked={val.before ?? false}
+                  onCheckedChange={(v) =>
+                    updateRule(key, { ...val, before: v })
+                  }
+                />
+              </div>
+              <div className="flex items-center gap-1">
+                <Label className="text-xs text-on-surface-variant">After</Label>
+                <Switch
+                  checked={val.after ?? false}
+                  onCheckedChange={(v) =>
+                    updateRule(key, { ...val, after: v })
+                  }
+                />
+              </div>
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={() => removeRule(key)}
+            className="rounded-full hover:bg-destructive/20 p-0.5"
+            aria-label={`Remove ${key}`}
+          >
+            <span className="material-symbols-outlined text-xs">close</span>
+          </button>
+        </div>
+      ))}
+      {entries.length === 0 && (
+        <p className="text-xs text-on-surface-variant italic">
+          No HITL rules configured
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/application/components/agent/KeyValueEditor.tsx b/src/application/components/agent/KeyValueEditor.tsx
new file mode 100644
index 0000000..63e41a7
--- /dev/null
+++ b/src/application/components/agent/KeyValueEditor.tsx
@@ -0,0 +1,95 @@
+import { useState, useId } from "react";
+import { Button } from "@/application/components/ui/button";
+import { Input } from "@/application/components/ui/input";
+import { Label } from "@/application/components/ui/label";
+
+interface KeyValueEditorProps {
+  label: string;
+  value: Record<string, string>;
+  onChange: (value: Record<string, string>) => void;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+}
+
+export default function KeyValueEditor({
+  label,
+  value,
+  onChange,
+  keyPlaceholder = "Key",
+  valuePlaceholder = "Value",
+}: Readonly<KeyValueEditorProps>) {
+  const [keyInput, setKeyInput] = useState("");
+  const [valueInput, setValueInput] = useState("");
+  const keyId = useId();
+  const valId = useId();
+
+  function addEntry() {
+    const trimmedKey = keyInput.trim();
+    const trimmedValue = valueInput.trim();
+    if (!trimmedKey) return;
+    onChange({ ...value, [trimmedKey]: trimmedValue });
+    setKeyInput("");
+    setValueInput("");
+  }
+
+  function removeEntry(key: string) {
+    const next = { ...value };
+    delete next[key];
+    onChange(next);
+  }
+
+  const entries = Object.entries(value);
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={keyId} className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
+        {label}
+      </Label>
+      <div className="flex gap-2">
+        <Input
+          id={keyId}
+          value={keyInput}
+          onChange={(e) => setKeyInput(e.target.value)}
+          placeholder={keyPlaceholder}
+          className="flex-1"
+          aria-label={`${label} key`}
+        />
+        <Input
+          id={valId}
+          value={valueInput}
+          onChange={(e) => setValueInput(e.target.value)}
+          placeholder={valuePlaceholder}
+          className="flex-1"
+          aria-label={`${label} value`}
+        />
+        <Button type="button" variant="outline" size="sm" onClick={addEntry}>
+          Add
+        </Button>
+      </div>
+      {entries.length > 0 && (
+        <div className="space-y-1">
+          {entries.map(([k, v]) => (
+            <div
+              key={k}
+              className="flex items-center gap-2 bg-surface-container-low rounded-lg px-3 py-1.5"
+            >
+              <span className="font-mono text-xs text-on-surface">{k}</span>
+              <span className="text-on-surface-variant text-xs">=</span>
+              <span className="font-mono text-xs text-on-surface-variant flex-1 truncate">
+                {v}
+              </span>
+              <button
+                type="button"
+                onClick={() => removeEntry(k)}
+                className="shrink-0 rounded-full hover:bg-destructive/20 p-0.5"
+                aria-label={`Remove ${k}`}
+              >
+                <span className="material-symbols-outlined text-xs">close</span>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/application/components/agent/McpServerEditor.tsx b/src/application/components/agent/McpServerEditor.tsx
new file mode 100644
index 0000000..49c1484
--- /dev/null
+++ b/src/application/components/agent/McpServerEditor.tsx
@@ -0,0 +1,149 @@
+import type { McpServerConfig } from "@/domain/entities/agent/mcpServerConfig";
+import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
+import { Button } from "@/application/components/ui/button";
+import { Input } from "@/application/components/ui/input";
+import { Label } from "@/application/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/application/components/ui/select";
+import { Separator } from "@/application/components/ui/separator";
+import StringListEditor from "./StringListEditor";
+import KeyValueEditor from "./KeyValueEditor";
+
+interface McpServerEditorProps {
+  value: McpServerConfig;
+  onChange: (value: McpServerConfig) => void;
+  onRemove: () => void;
+}
+
+export default function McpServerEditor({
+  value,
+  onChange,
+  onRemove,
+}: Readonly<McpServerEditorProps>) {
+  function update(patch: Partial<McpServerConfig>) {
+    onChange({ ...value, ...patch });
+  }
+
+  const isStdio = value.transport === McpTransportType.STDIO;
+  const idBase = `mcp-${value.name || "new"}`;
+
+  return (
+    <div className="bg-surface-container-low rounded-xl p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-xs font-bold font-headline uppercase tracking-widest text-on-surface-variant">
+          {value.name || "MCP Server"}
+        </h4>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onRemove}
+          aria-label="Remove server"
+        >
+          <span className="material-symbols-outlined text-sm">delete</span>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label htmlFor={`${idBase}-name`}>Name</Label>
+          <Input
+            id={`${idBase}-name`}
+            value={value.name}
+            onChange={(e) => update({ name: e.target.value })}
+            placeholder="my-server"
+          />
+        </div>
+        <div>
+          <Label htmlFor={`${idBase}-transport`}>Transport</Label>
+          <Select
+            value={value.transport}
+            onValueChange={(v) =>
+              update({ transport: v as McpTransportType })
+            }
+          >
+            <SelectTrigger id={`${idBase}-transport`}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={McpTransportType.STDIO}>stdio</SelectItem>
+              <SelectItem value={McpTransportType.HTTP}>http</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {isStdio && (
+        <>
+          <Separator />
+          <div>
+            <Label htmlFor={`${idBase}-command`}>Command</Label>
+            <Input
+              id={`${idBase}-command`}
+              value={value.command ?? ""}
+              onChange={(e) =>
+                update({ command: e.target.value || undefined })
+              }
+              placeholder="npx"
+            />
+          </div>
+          <StringListEditor
+            label="Args"
+            value={value.args}
+            onChange={(args) => update({ args })}
+            placeholder="Add argument..."
+          />
+        </>
+      )}
+
+      {!isStdio && (
+        <>
+          <Separator />
+          <div>
+            <Label htmlFor={`${idBase}-url`}>URL</Label>
+            <Input
+              id={`${idBase}-url`}
+              value={value.url ?? ""}
+              onChange={(e) => update({ url: e.target.value || undefined })}
+              placeholder="http://localhost:3000/mcp"
+            />
+          </div>
+          <KeyValueEditor
+            label="Headers"
+            value={value.headers}
+            onChange={(headers) => update({ headers })}
+            keyPlaceholder="Header name"
+            valuePlaceholder="Header value"
+          />
+        </>
+      )}
+
+      <Separator />
+      <KeyValueEditor
+        label="Env"
+        value={value.env}
+        onChange={(env) => update({ env })}
+        keyPlaceholder="Variable name"
+        valuePlaceholder="Variable value"
+      />
+
+      <div>
+        <Label htmlFor={`${idBase}-auth`}>Auth Token</Label>
+        <Input
+          id={`${idBase}-auth`}
+          type="password"
+          value={value.auth_token ?? ""}
+          onChange={(e) =>
+            update({ auth_token: e.target.value || undefined })
+          }
+          placeholder="Optional auth token"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/application/components/agent/ResponseFormatEditor.tsx b/src/application/components/agent/ResponseFormatEditor.tsx
new file mode 100644
index 0000000..5ed0518
--- /dev/null
+++ b/src/application/components/agent/ResponseFormatEditor.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { Label } from "@/application/components/ui/label";
+import { Textarea } from "@/application/components/ui/textarea";
+
+interface ResponseFormatEditorProps {
+  value: Record<string, unknown> | undefined;
+  onChange: (value: Record<string, unknown> | undefined) => void;
+}
+
+export default function ResponseFormatEditor({
+  value,
+  onChange,
+}: Readonly<ResponseFormatEditorProps>) {
+  const [text, setText] = useState(() =>
+    value ? JSON.stringify(value, null, 2) : "",
+  );
+  const [parseError, setParseError] = useState<string | null>(null);
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const val = e.target.value;
+    setText(val);
+    if (!val.trim()) {
+      onChange(undefined);
+      setParseError(null);
+      return;
+    }
+    try {
+      onChange(JSON.parse(val));
+      setParseError(null);
+    } catch {
+      setParseError("Invalid JSON");
+    }
+  }
+
+  return (
+    <div>
+      <Label htmlFor="response-format" className="text-on-surface">
+        JSON Schema
+      </Label>
+      <Textarea
+        id="response-format"
+        name="response-format"
+        placeholder='{"type": "object", "properties": {...}}'
+        rows={6}
+        value={text}
+        onChange={handleChange}
+        className="font-mono text-xs"
+        aria-invalid={!!parseError}
+        aria-describedby={parseError ? "response-format-error" : undefined}
+      />
+      {parseError && (
+        <p
+          id="response-format-error"
+          role="alert"
+          className="text-destructive text-xs mt-1"
+        >
+          {parseError}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/application/components/agent/StringListEditor.tsx b/src/application/components/agent/StringListEditor.tsx
new file mode 100644
index 0000000..f535734
--- /dev/null
+++ b/src/application/components/agent/StringListEditor.tsx
@@ -0,0 +1,83 @@
+import { useState, useId, type KeyboardEvent } from "react";
+import { Badge } from "@/application/components/ui/badge";
+import { Button } from "@/application/components/ui/button";
+import { Input } from "@/application/components/ui/input";
+import { Label } from "@/application/components/ui/label";
+
+interface StringListEditorProps {
+  label: string;
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+}
+
+export default function StringListEditor({
+  label,
+  value,
+  onChange,
+  placeholder = "Add item...",
+}: Readonly<StringListEditorProps>) {
+  const [inputValue, setInputValue] = useState("");
+  const inputId = useId();
+
+  function addItem() {
+    const trimmed = inputValue.trim();
+    if (!trimmed || value.includes(trimmed)) return;
+    onChange([...value, trimmed]);
+    setInputValue("");
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addItem();
+    }
+  }
+
+  function removeItem(index: number) {
+    onChange(value.filter((_, i) => i !== index));
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={inputId} className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
+        {label}
+      </Label>
+      <div className="flex gap-2">
+        <Input
+          id={inputId}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="flex-1"
+          name={`${label.toLowerCase().replace(/\s+/g, '-')}-input`}
+        />
+        <Button type="button" variant="outline" size="sm" onClick={addItem}>
+          Add
+        </Button>
+      </div>
+      {value.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {value.map((item, index) => (
+            <Badge
+              key={item}
+              variant="secondary"
+              className="gap-1 pr-1 font-mono text-xs"
+            >
+              {item}
+              <button
+                type="button"
+                onClick={() => removeItem(index)}
+                className="ml-0.5 rounded-full hover:bg-destructive/20 p-0.5"
+                aria-label={`Remove ${item}`}
+              >
+                <span className="material-symbols-outlined text-xs">close</span>
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/application/components/agent/SubAgentEditor.tsx b/src/application/components/agent/SubAgentEditor.tsx
new file mode 100644
index 0000000..467d12d
--- /dev/null
+++ b/src/application/components/agent/SubAgentEditor.tsx
@@ -0,0 +1,112 @@
+import type { SubAgentConfig } from "@/domain/entities/agent/agentConfig";
+import { Button } from "@/application/components/ui/button";
+import { Input } from "@/application/components/ui/input";
+import { Label } from "@/application/components/ui/label";
+import { Textarea } from "@/application/components/ui/textarea";
+import { Separator } from "@/application/components/ui/separator";
+import StringListEditor from "./StringListEditor";
+
+interface SubAgentEditorProps {
+  value: SubAgentConfig;
+  onChange: (value: SubAgentConfig) => void;
+  onRemove: () => void;
+  index: number;
+}
+
+export default function SubAgentEditor({
+  value,
+  onChange,
+  onRemove,
+  index,
+}: Readonly<SubAgentEditorProps>) {
+  function update(patch: Partial<SubAgentConfig>) {
+    onChange({ ...value, ...patch });
+  }
+
+  return (
+    <div className="bg-surface-container-low rounded-xl p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-xs font-bold font-headline uppercase tracking-widest text-on-surface-variant">
+          {value.name || `Subagent ${index + 1}`}
+        </h4>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onRemove}
+          aria-label="Remove subagent"
+        >
+          <span className="material-symbols-outlined text-sm">delete</span>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label htmlFor={`sub-name-${index}`} className="text-on-surface">
+            Name
+          </Label>
+          <Input
+            id={`sub-name-${index}`}
+            value={value.name}
+            onChange={(e) => update({ name: e.target.value })}
+            placeholder="researcher"
+          />
+        </div>
+        <div>
+          <Label htmlFor={`sub-model-${index}`} className="text-on-surface">
+            Model
+          </Label>
+          <Input
+            id={`sub-model-${index}`}
+            value={value.model ?? ""}
+            onChange={(e) => update({ model: e.target.value || undefined })}
+            placeholder="openai:gpt-4o (optional)"
+          />
+        </div>
+      </div>
+
+      <div>
+        <Label htmlFor={`sub-desc-${index}`} className="text-on-surface">
+          Description
+        </Label>
+        <Input
+          id={`sub-desc-${index}`}
+          value={value.description}
+          onChange={(e) => update({ description: e.target.value })}
+          placeholder="Describe what this subagent does"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor={`sub-instr-${index}`} className="text-on-surface">
+          Instructions
+        </Label>
+        <Textarea
+          id={`sub-instr-${index}`}
+          value={value.instructions ?? ""}
+          onChange={(e) =>
+            update({ instructions: e.target.value || undefined })
+          }
+          placeholder="Specific instructions for this subagent (optional)"
+          rows={3}
+        />
+      </div>
+
+      <Separator />
+
+      <StringListEditor
+        label="Tools"
+        value={value.tools}
+        onChange={(tools) => update({ tools })}
+        placeholder="Add tool..."
+      />
+
+      <StringListEditor
+        label="Skills"
+        value={value.skills}
+        onChange={(skills) => update({ skills })}
+        placeholder="Add skill..."
+      />
+    </div>
+  );
+}
diff --git a/src/application/components/ui/accordion.tsx b/src/application/components/ui/accordion.tsx
new file mode 100644
index 0000000..c10e6ed
--- /dev/null
+++ b/src/application/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/application/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/application/components/ui/badge.tsx b/src/application/components/ui/badge.tsx
new file mode 100644
index 0000000..16fc8e3
--- /dev/null
+++ b/src/application/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/application/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/application/components/ui/button.tsx b/src/application/components/ui/button.tsx
new file mode 100644
index 0000000..d9dd2de
--- /dev/null
+++ b/src/application/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/application/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/application/components/ui/dialog.tsx b/src/application/components/ui/dialog.tsx
new file mode 100644
index 0000000..22a0a83
--- /dev/null
+++ b/src/application/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/application/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/application/components/ui/form.tsx b/src/application/components/ui/form.tsx
new file mode 100644
index 0000000..3914d1d
--- /dev/null
+++ b/src/application/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/application/lib/utils"
+import { Label } from "@/application/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/application/components/ui/input.tsx b/src/application/components/ui/input.tsx
new file mode 100644
index 0000000..96b642d
--- /dev/null
+++ b/src/application/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/application/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/application/components/ui/label.tsx b/src/application/components/ui/label.tsx
new file mode 100644
index 0000000..9c3c451
--- /dev/null
+++ b/src/application/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/application/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/application/components/ui/scroll-area.tsx b/src/application/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..a8b0094
--- /dev/null
+++ b/src/application/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/application/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/application/components/ui/select.tsx b/src/application/components/ui/select.tsx
new file mode 100644
index 0000000..722b2a7
--- /dev/null
+++ b/src/application/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/application/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/src/application/components/ui/separator.tsx b/src/application/components/ui/separator.tsx
new file mode 100644
index 0000000..344f1dd
--- /dev/null
+++ b/src/application/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/application/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/application/components/ui/switch.tsx b/src/application/components/ui/switch.tsx
new file mode 100644
index 0000000..4754b66
--- /dev/null
+++ b/src/application/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/application/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/application/components/ui/tabs.tsx b/src/application/components/ui/tabs.tsx
new file mode 100644
index 0000000..b180c2a
--- /dev/null
+++ b/src/application/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/application/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/application/components/ui/textarea.tsx b/src/application/components/ui/textarea.tsx
new file mode 100644
index 0000000..0e15103
--- /dev/null
+++ b/src/application/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/application/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/application/lib/yaml.ts b/src/application/lib/yaml.ts
new file mode 100644
index 0000000..b606a2e
--- /dev/null
+++ b/src/application/lib/yaml.ts
@@ -0,0 +1,102 @@
+import yaml from "js-yaml";
+import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
+import { agentConfigSchema } from "@/domain/entities/agent/agentConfigSchema";
+
+type PlainRecord = Record<string, unknown>;
+
+function cleanSubagent(sub: AgentConfig["subagents"][number]): PlainRecord {
+  const result: PlainRecord = {
+    name: sub.name,
+    description: sub.description,
+    tools: sub.tools,
+    skills: sub.skills,
+    mcp_servers: sub.mcp_servers,
+  };
+
+  if (sub.instructions) result.instructions = sub.instructions;
+  if (sub.model) result.model = sub.model;
+  if (sub.response_format && Object.keys(sub.response_format).length > 0) {
+    result.response_format = sub.response_format;
+  }
+
+  return result;
+}
+
+function cleanMcpServer(
+  server: AgentConfig["mcp_servers"][number],
+): PlainRecord {
+  const result: PlainRecord = {
+    name: server.name,
+    transport: server.transport,
+    args: server.args,
+    headers: server.headers,
+    env: server.env,
+  };
+
+  if (server.command) result.command = server.command;
+  if (server.url) result.url = server.url;
+  if (server.auth_token) result.auth_token = server.auth_token;
+
+  return result;
+}
+
+export function serializeAgentConfig(config: AgentConfig): string {
+  const clean: PlainRecord = {
+    name: config.name,
+    model: config.model,
+    tools: config.tools,
+    middleware: config.middleware,
+    backend: config.backend,
+    hitl: config.hitl,
+    memory: config.memory,
+    skills: config.skills,
+    subagents: config.subagents.map(cleanSubagent),
+    mcp_servers: config.mcp_servers.map(cleanMcpServer),
+    debug: config.debug,
+  };
+
+  if (config.system_prompt) {
+    clean.system_prompt = config.system_prompt;
+  }
+  if (config.system_prompt_file) {
+    clean.system_prompt_file = config.system_prompt_file;
+  }
+  if (
+    config.response_format &&
+    Object.keys(config.response_format).length > 0
+  ) {
+    clean.response_format = config.response_format;
+  }
+
+  return yaml.dump(clean, {
+    lineWidth: -1,
+    noRefs: true,
+    sortKeys: false,
+  });
+}
+
+export function parseAgentConfig(yamlString: string): AgentConfig {
+  let raw: unknown;
+  try {
+    raw = yaml.load(yamlString);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    throw new Error(`Failed to parse YAML: ${message}`, { cause: err });
+  }
+
+  if (typeof raw !== "object" || raw === null) {
+    throw new Error("Invalid YAML: expected an object");
+  }
+
+  return agentConfigSchema.parse(raw);
+}
+
+export function agentConfigToYamlFile(
+  config: AgentConfig,
+  filename?: string,
+): File {
+  const yamlContent = serializeAgentConfig(config);
+  const safeName = config.name.replaceAll(/[^a-z0-9_-]/gi, "_");
+  const name = filename ?? `${safeName}.yaml`;
+  return new File([yamlContent], name, { type: "application/x-yaml" });
+}
diff --git a/src/application/pages/AgentsPage.tsx b/src/application/pages/AgentsPage.tsx
index 793a02f..2e803c1 100644
--- a/src/application/pages/AgentsPage.tsx
+++ b/src/application/pages/AgentsPage.tsx
@@ -28,10 +28,8 @@ export default function AgentsPage() {
               onClick={() => setCreateDialogOpen(true)}
               className="flex items-center gap-3 bg-primary-container text-white rounded-full px-8 py-4 font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity shrink-0"
             >
-              <span className="material-symbols-outlined text-lg">
-                add_circle
-              </span>{" "}
-              Create Agent (YAML)
+              <span className="material-symbols-outlined text-lg">add_circle</span>{" "}
+              Create Agent
             </button>
           </div>
 
diff --git a/src/domain/entities/agent/agentConfigSchema.ts b/src/domain/entities/agent/agentConfigSchema.ts
new file mode 100644
index 0000000..f512724
--- /dev/null
+++ b/src/domain/entities/agent/agentConfigSchema.ts
@@ -0,0 +1,64 @@
+import { z } from "zod";
+import { BackendType, MiddlewareType } from "./agentConfig";
+import { McpTransportType } from "./mcpServerConfig";
+
+export const interruptRuleSchema = z.object({
+  before: z.boolean().optional(),
+  after: z.boolean().optional(),
+});
+
+export const hitlConfigSchema = z.object({
+  rules: z.record(z.string(), z.union([z.boolean(), interruptRuleSchema])),
+});
+
+export const backendConfigSchema = z.object({
+  type: z.enum([BackendType.STATE, BackendType.STORE, BackendType.FILESYSTEM, BackendType.COMPOSITE]),
+  root_dir: z.string().nullable().optional(),
+});
+
+export const mcpServerConfigSchema = z.object({
+  name: z.string().min(1, "MCP server name is required"),
+  transport: z.enum([McpTransportType.STDIO, McpTransportType.HTTP]),
+  command: z.string().nullable().optional(),
+  args: z.array(z.string()),
+  url: z.string().nullable().optional(),
+  headers: z.record(z.string(), z.string()),
+  env: z.record(z.string(), z.string()),
+  auth_token: z.string().nullable().optional(),
+});
+
+export const subAgentConfigSchema = z.object({
+  name: z.string().min(1, "Subagent name is required"),
+  description: z.string().min(1, "Subagent description is required"),
+  instructions: z.string().nullable().optional(),
+  model: z.string().nullable().optional(),
+  tools: z.array(z.string()),
+  skills: z.array(z.string()),
+  mcp_servers: z.array(mcpServerConfigSchema),
+  response_format: z.record(z.string(), z.unknown()).nullable().optional(),
+});
+
+export const agentConfigSchema = z.object({
+  name: z.string().min(1, "Agent name is required").max(100, "Agent name must be 100 characters or less").regex(/^[a-zA-Z0-9._-]+$/, "Agent name must contain only alphanumeric characters, dots, hyphens, and underscores"),
+  model: z.string().min(1, "Model is required"),
+  system_prompt: z.string().nullable().optional(),
+  system_prompt_file: z.string().nullable().optional(),
+  tools: z.array(z.string()),
+  middleware: z
+    .enum([
+      MiddlewareType.TODO_LIST,
+      MiddlewareType.FILESYSTEM,
+      MiddlewareType.SUB_AGENT,
+    ])
+    .array(),
+  backend: backendConfigSchema,
+  hitl: hitlConfigSchema,
+  memory: z.array(z.string()),
+  skills: z.array(z.string()),
+  subagents: z.array(subAgentConfigSchema),
+  mcp_servers: z.array(mcpServerConfigSchema),
+  response_format: z.record(z.string(), z.unknown()).nullable().optional(),
+  debug: z.boolean(),
+});
+
+export type AgentConfigFormData = z.infer<typeof agentConfigSchema>;
diff --git a/tests/fixtures/external.ts b/tests/fixtures/external.ts
index bdbfe01..7a96aa0 100644
--- a/tests/fixtures/external.ts
+++ b/tests/fixtures/external.ts
@@ -1,4 +1,8 @@
-import { AgentConfigMetadata } from "@/domain/entities/agent/agentConfigMetadata";
+import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
+import { BackendType } from "@/domain/entities/agent/agentConfig";
+import type { AgentConfigMetadata } from "@/domain/entities/agent/agentConfigMetadata";
+import type { McpServerConfig } from "@/domain/entities/agent/mcpServerConfig";
+import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
 import { Thread } from "@/domain/entities/chat/thread";
 import {
   Message,
@@ -31,6 +35,40 @@ export function createThread(overrides: Partial<Thread> = {}): Thread {
   };
 }
 
+export function createAgentConfig(
+  overrides: Partial<AgentConfig> = {},
+): AgentConfig {
+  return {
+    name: "test-agent",
+    model: "openai:anthropic/claude-haiku-4.5:nitro",
+    system_prompt: "You are a helpful assistant.",
+    tools: ["search", "calculator"],
+    middleware: [],
+    backend: { type: BackendType.STATE },
+    hitl: { rules: {} },
+    memory: [],
+    skills: [],
+    subagents: [],
+    mcp_servers: [],
+    debug: false,
+    ...overrides,
+  };
+}
+
+export function createMcpServerConfig(
+  overrides: Partial<McpServerConfig> = {},
+): McpServerConfig {
+  return {
+    name: "fs-server",
+    transport: McpTransportType.STDIO,
+    command: "npx",
+    args: ["-y", "@mcp/filesystem"],
+    headers: {},
+    env: {},
+    ...overrides,
+  };
+}
+
 export function createMessage(overrides: Partial<Message> = {}): Message {
   return {
     role: MessageRole.AI,
diff --git a/tests/setup.ts b/tests/setup.ts
index a01459d..9040b15 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -32,6 +32,14 @@ globalThis.ResizeObserver = class ResizeObserver {
   disconnect() {}
 };
 
+// Mock pointer capture (needed for Radix Select/Dialog)
+HTMLElement.prototype.hasPointerCapture = vi.fn();
+HTMLElement.prototype.setPointerCapture = vi.fn();
+HTMLElement.prototype.releasePointerCapture = vi.fn();
+
+// Mock scrollIntoView (needed for Radix)
+HTMLElement.prototype.scrollIntoView = vi.fn();
+
 // Mock window.matchMedia
 Object.defineProperty(window, "matchMedia", {
   writable: true,
diff --git a/tests/unit/application/lib/yaml.test.ts b/tests/unit/application/lib/yaml.test.ts
new file mode 100644
index 0000000..f17cf33
--- /dev/null
+++ b/tests/unit/application/lib/yaml.test.ts
@@ -0,0 +1,188 @@
+import { describe, it, expect } from "vitest";
+import {
+  serializeAgentConfig,
+  parseAgentConfig,
+  agentConfigToYamlFile,
+} from "@/application/lib/yaml";
+import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
+import {
+  BackendType,
+  MiddlewareType,
+} from "@/domain/entities/agent/agentConfig";
+import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
+
+const fullConfig: AgentConfig = {
+  name: "test-agent",
+  model: "openai:gpt-4o",
+  system_prompt: "You are a helpful assistant",
+  tools: ["search", "calculator"],
+  middleware: [MiddlewareType.TODO_LIST],
+  backend: { type: BackendType.STATE },
+  hitl: { rules: { create_file: true } },
+  memory: ["/mem/shared"],
+  skills: ["web-search"],
+  subagents: [
+    {
+      name: "researcher",
+      description: "Research sub-agent",
+      tools: ["search"],
+      skills: [],
+      mcp_servers: [],
+    },
+  ],
+  mcp_servers: [
+    {
+      name: "fs-server",
+      transport: McpTransportType.STDIO,
+      command: "npx",
+      args: ["-y", "@mcp/filesystem"],
+      headers: {},
+      env: {},
+    },
+  ],
+  debug: false,
+};
+
+describe("serializeAgentConfig", () => {
+  it("serializes a full config to YAML string", () => {
+    const yaml = serializeAgentConfig(fullConfig);
+    expect(yaml).toContain("name: test-agent");
+    expect(yaml).toContain("model: openai:gpt-4o");
+    expect(yaml).toContain("system_prompt:");
+    expect(yaml).toContain("tools:");
+  });
+
+  it("serializes empty arrays", () => {
+    const minimalConfig: AgentConfig = {
+      name: "minimal",
+      model: "gpt-4",
+      tools: [],
+      middleware: [],
+      backend: { type: BackendType.STATE },
+      hitl: { rules: {} },
+      memory: [],
+      skills: [],
+      subagents: [],
+      mcp_servers: [],
+      debug: false,
+    };
+    const yaml = serializeAgentConfig(minimalConfig);
+    expect(yaml).toContain("name: minimal");
+  });
+
+  it("serializes nested structures correctly", () => {
+    const yaml = serializeAgentConfig(fullConfig);
+    expect(yaml).toContain("name: fs-server");
+    expect(yaml).toContain("transport: stdio");
+    expect(yaml).toContain("name: researcher");
+  });
+});
+
+describe("parseAgentConfig", () => {
+  it("parses valid YAML into AgentConfig", () => {
+    const yaml = `
+name: parsed-agent
+model: openai:gpt-4o
+system_prompt: You are helpful
+tools:
+  - search
+  - calculator
+middleware:
+  - todo_list
+backend:
+  type: state
+hitl:
+  rules:
+    create_file: true
+memory: []
+skills: []
+subagents: []
+mcp_servers: []
+debug: true
+`;
+    const config = parseAgentConfig(yaml);
+    expect(config.name).toBe("parsed-agent");
+    expect(config.model).toBe("openai:gpt-4o");
+    expect(config.tools).toEqual(["search", "calculator"]);
+    expect(config.debug).toBe(true);
+  });
+
+  it("parses YAML with nested structures", () => {
+    const yaml = `
+name: nested-agent
+model: gpt-4
+tools: []
+middleware: []
+backend:
+  type: filesystem
+  root_dir: /data
+hitl:
+  rules:
+    delete_file:
+      before: true
+      after: false
+memory: []
+skills: []
+subagents:
+  - name: sub-1
+    description: Sub agent 1
+    tools: []
+    skills: []
+    mcp_servers: []
+mcp_servers:
+  - name: http-mcp
+    transport: http
+    url: http://localhost:8080/mcp
+    args: []
+    headers:
+      Authorization: Bearer token
+    env: {}
+debug: false
+`;
+    const config = parseAgentConfig(yaml);
+    expect(config.backend.type).toBe(BackendType.FILESYSTEM);
+    expect(config.backend.root_dir).toBe("/data");
+    expect(config.hitl.rules.delete_file).toEqual({
+      before: true,
+      after: false,
+    });
+    expect(config.subagents).toHaveLength(1);
+    expect(config.mcp_servers[0].url).toBe("http://localhost:8080/mcp");
+  });
+
+  it("throws on invalid YAML", () => {
+    expect(() => parseAgentConfig("not: valid: yaml: :::")).toThrow();
+  });
+
+  it("throws on valid YAML but invalid schema", () => {
+    const yaml = `
+name: missing-fields
+`;
+    expect(() => parseAgentConfig(yaml)).toThrow();
+  });
+});
+
+describe("agentConfigToYamlFile", () => {
+  it("creates a File with the YAML content", () => {
+    const file = agentConfigToYamlFile(fullConfig);
+    expect(file).toBeInstanceOf(File);
+    expect(file.name).toBe("test-agent.yaml");
+    expect(file.type).toBe("application/x-yaml");
+  });
+
+  it("uses custom filename when provided", () => {
+    const file = agentConfigToYamlFile(fullConfig, "custom.yaml");
+    expect(file.name).toBe("custom.yaml");
+  });
+
+  it("file content can be read back as valid YAML", () => {
+    const yamlContent = serializeAgentConfig(fullConfig);
+    const file = agentConfigToYamlFile(fullConfig);
+    expect(file).toBeInstanceOf(File);
+    expect(file.name).toBe("test-agent.yaml");
+    expect(file.type).toBe("application/x-yaml");
+    const parsed = parseAgentConfig(yamlContent);
+    expect(parsed.name).toBe(fullConfig.name);
+    expect(parsed.model).toBe(fullConfig.model);
+  });
+});
diff --git a/tests/unit/components/agent/AgentConfigForm.test.tsx b/tests/unit/components/agent/AgentConfigForm.test.tsx
new file mode 100644
index 0000000..1f0815b
--- /dev/null
+++ b/tests/unit/components/agent/AgentConfigForm.test.tsx
@@ -0,0 +1,167 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../../utils/render";
+import AgentConfigForm from "@/application/components/agent/AgentConfigForm";
+import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
+import { BackendType } from "@/domain/entities/agent/agentConfig";
+
+const mockSubmit = vi.fn();
+const mockCancel = vi.fn();
+
+describe("AgentConfigForm", () => {
+  describe("create mode", () => {
+    it("renders form with sections", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="create"
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      expect(screen.getByText("General")).toBeInTheDocument();
+      expect(screen.getByText("Tools & Middleware")).toBeInTheDocument();
+      expect(screen.getByText("Backend")).toBeInTheDocument();
+    });
+
+    it("renders name field enabled in create mode", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="create"
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      const nameInput = screen.getByLabelText(/agent name/i);
+      expect(nameInput).toBeInTheDocument();
+      expect(nameInput).not.toBeDisabled();
+    });
+
+    it("renders model and debug fields", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="create"
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      expect(screen.getByLabelText(/model/i)).toBeInTheDocument();
+    });
+
+    it("renders cancel button", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="create"
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      expect(
+        screen.getByRole("button", { name: /cancel/i }),
+      ).toBeInTheDocument();
+    });
+
+    it("calls onCancel when cancel button is clicked", async () => {
+      const user = userEvent.setup();
+
+      renderWithProviders(
+        <AgentConfigForm
+          mode="create"
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /cancel/i }));
+      expect(mockCancel).toHaveBeenCalled();
+    });
+
+    it("shows create button in create mode", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="create"
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      expect(
+        screen.getByRole("button", { name: /create/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("edit mode", () => {
+    const existingConfig: AgentConfig = {
+      name: "existing-agent",
+      model: "openai:gpt-4o",
+      system_prompt: "You are helpful",
+      tools: ["search"],
+      middleware: [],
+      backend: { type: BackendType.STATE },
+      hitl: { rules: {} },
+      memory: [],
+      skills: [],
+      subagents: [],
+      mcp_servers: [],
+      debug: false,
+    };
+
+    it("renders name field disabled in edit mode", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="edit"
+          initialData={existingConfig}
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      const nameInput = screen.getByLabelText(
+        /agent name/i,
+      ) as HTMLInputElement;
+      expect(nameInput).toBeDisabled();
+    });
+
+    it("pre-fills form with existing data", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="edit"
+          initialData={existingConfig}
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      const nameInput = screen.getByLabelText(
+        /agent name/i,
+      ) as HTMLInputElement;
+      expect(nameInput.value).toBe("existing-agent");
+
+      const modelInput = screen.getByLabelText(/model/i) as HTMLInputElement;
+      expect(modelInput.value).toBe("openai:gpt-4o");
+    });
+
+    it("renders update button instead of create in edit mode", () => {
+      renderWithProviders(
+        <AgentConfigForm
+          mode="edit"
+          initialData={existingConfig}
+          onSubmit={mockSubmit}
+          onCancel={mockCancel}
+        />,
+      );
+
+      expect(
+        screen.getByRole("button", { name: /update/i }),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: /create/i }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/tests/unit/components/agent/AgentConfigViewer.test.tsx b/tests/unit/components/agent/AgentConfigViewer.test.tsx
index b5e659a..5ba181d 100644
--- a/tests/unit/components/agent/AgentConfigViewer.test.tsx
+++ b/tests/unit/components/agent/AgentConfigViewer.test.tsx
@@ -9,15 +9,18 @@ import {
   MiddlewareType,
 } from "@/domain/entities/agent/agentConfig";
 
-const { mockAgentConfigData, mockDeleteMutate } = vi.hoisted(() => {
-  return {
-    mockAgentConfigData: {
-      data: undefined as AgentConfig | undefined,
-      isLoading: false,
-    },
-    mockDeleteMutate: vi.fn(),
-  };
-});
+const { mockAgentConfigData, mockDeleteMutate, mockUpdateMutate } = vi.hoisted(
+  () => {
+    return {
+      mockAgentConfigData: {
+        data: undefined as AgentConfig | undefined,
+        isLoading: false,
+      },
+      mockDeleteMutate: vi.fn(),
+      mockUpdateMutate: vi.fn(),
+    };
+  },
+);
 
 vi.mock("@/application/hooks/agent/useAgentConfig", () => ({
   useAgentConfig: () => mockAgentConfigData,
@@ -30,6 +33,13 @@ vi.mock("@/application/hooks/agent/useDeleteAgent", () => ({
   }),
 }));
 
+vi.mock("@/application/hooks/agent/useUpdateAgent", () => ({
+  useUpdateAgent: () => ({
+    mutate: mockUpdateMutate,
+    isPending: false,
+  }),
+}));
+
 vi.mock("sonner", () => ({
   toast: {
     success: vi.fn(),
@@ -37,6 +47,11 @@ vi.mock("sonner", () => ({
   },
 }));
 
+vi.mock("@/application/lib/yaml", () => ({
+  serializeAgentConfig: vi.fn(() => "name: test"),
+  agentConfigToYamlFile: vi.fn(() => new File(["yaml"], "test.yaml")),
+}));
+
 const fullConfig: AgentConfig = {
   name: "test-agent",
   model: "openai:gpt-4o",
@@ -58,6 +73,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = undefined;
     mockAgentConfigData.isLoading = false;
     mockDeleteMutate.mockClear();
+    mockUpdateMutate.mockClear();
   });
 
   it("returns null when open is false", () => {
@@ -144,31 +160,6 @@ describe("AgentConfigViewer", () => {
     expect(screen.getByText(/state/)).toBeInTheDocument();
   });
 
-  it("calls onOpenChange when close button is clicked", async () => {
-    mockAgentConfigData.data = fullConfig;
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-
-    renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={onOpenChange}
-      />,
-    );
-
-    // The close button contains the "close" text in a span
-    const closeButtons = screen.getAllByRole("button");
-    // First button in header is the close (X) button
-    const closeButton = closeButtons.find((btn) =>
-      btn.textContent?.includes("close"),
-    );
-    expect(closeButton).toBeDefined();
-    await user.click(closeButton!);
-
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
   it("shows delete button and requires confirmation", async () => {
     mockAgentConfigData.data = fullConfig;
     const user = userEvent.setup();
@@ -186,7 +177,6 @@ describe("AgentConfigViewer", () => {
 
     await user.click(deleteButton);
 
-    // After first click, button should show confirm text
     expect(
       screen.getByRole("button", { name: /confirm delete/i }),
     ).toBeInTheDocument();
@@ -333,12 +323,10 @@ describe("AgentConfigViewer", () => {
       />,
     );
 
-    // Initially shows truncated (200 chars) with "Show more"
     expect(screen.getByText(/\.\.\.Show more/)).toBeInTheDocument();
 
     await user.click(screen.getByText(/\.\.\.Show more/));
 
-    // After click, shows "Show less"
     expect(screen.getByText("Show less")).toBeInTheDocument();
   });
 
@@ -354,9 +342,7 @@ describe("AgentConfigViewer", () => {
       />,
     );
 
-    // First click sets confirmDelete
     await user.click(screen.getByRole("button", { name: /^delete$/i }));
-    // Second click triggers actual delete
     await user.click(screen.getByRole("button", { name: /confirm delete/i }));
 
     expect(mockDeleteMutate).toHaveBeenCalledWith(
@@ -368,54 +354,36 @@ describe("AgentConfigViewer", () => {
     );
   });
 
-  it("closes dialog via Close button in header", async () => {
-    mockAgentConfigData.data = fullConfig;
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
+  it("shows Active badge when debug is true", () => {
+    mockAgentConfigData.data = { ...fullConfig, debug: true };
 
     renderWithProviders(
       <AgentConfigViewer
         agentName="test-agent"
         open={true}
-        onOpenChange={onOpenChange}
+        onOpenChange={vi.fn()}
       />,
     );
 
-    // Header close (X) button contains "close" icon text
-    const allButtons = screen.getAllByRole("button");
-    const headerClose = allButtons.find(
-      (btn) => btn.textContent?.trim() === "close",
-    );
-    expect(headerClose).toBeDefined();
-    await user.click(headerClose!);
-
-    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(screen.getByText("Active")).toBeInTheDocument();
   });
 
-  it("closes via Close button in footer", async () => {
+  it("has an Edit button", () => {
     mockAgentConfigData.data = fullConfig;
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
 
     renderWithProviders(
       <AgentConfigViewer
         agentName="test-agent"
         open={true}
-        onOpenChange={onOpenChange}
+        onOpenChange={vi.fn()}
       />,
     );
 
-    // The footer "Close" button
-    const closeButtons = screen.getAllByRole("button");
-    const footerClose = closeButtons.find((btn) => btn.textContent === "Close");
-    expect(footerClose).toBeDefined();
-    await user.click(footerClose!);
-
-    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(screen.getByRole("button", { name: /edit/i })).toBeInTheDocument();
   });
 
-  it("shows Active badge when debug is true", () => {
-    mockAgentConfigData.data = { ...fullConfig, debug: true };
+  it("has an Export YAML button", () => {
+    mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
       <AgentConfigViewer
@@ -425,6 +393,8 @@ describe("AgentConfigViewer", () => {
       />,
     );
 
-    expect(screen.getByText("Active")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /export yaml/i }),
+    ).toBeInTheDocument();
   });
 });
diff --git a/tests/unit/components/agent/CreateAgentDialog.test.tsx b/tests/unit/components/agent/CreateAgentDialog.test.tsx
index ea1ae39..0a11fa4 100644
--- a/tests/unit/components/agent/CreateAgentDialog.test.tsx
+++ b/tests/unit/components/agent/CreateAgentDialog.test.tsx
@@ -2,7 +2,6 @@ import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { renderWithProviders } from "../../../utils/render";
-import CreateAgentDialog from "@/application/components/agent/CreateAgentDialog";
 
 const { mockCreateAgentMutate } = vi.hoisted(() => {
   return {
@@ -24,6 +23,16 @@ vi.mock("sonner", () => ({
   },
 }));
 
+vi.mock("@/application/lib/yaml", () => ({
+  agentConfigToYamlFile: vi.fn(
+    () => new File(["yaml"], "test.yaml", { type: "application/x-yaml" }),
+  ),
+  serializeAgentConfig: vi.fn(() => "name: test"),
+  parseAgentConfig: vi.fn(),
+}));
+
+import CreateAgentDialog from "@/application/components/agent/CreateAgentDialog";
+
 describe("CreateAgentDialog", () => {
   beforeEach(() => {
     mockCreateAgentMutate.mockClear();
@@ -37,7 +46,7 @@ describe("CreateAgentDialog", () => {
     expect(container.innerHTML).toBe("");
   });
 
-  it("renders form with title when open", () => {
+  it("renders dialog title when open", () => {
     renderWithProviders(
       <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
     );
@@ -45,120 +54,36 @@ describe("CreateAgentDialog", () => {
     expect(screen.getByText("Create Agent")).toBeInTheDocument();
   });
 
-  it("has name input with label", () => {
+  it("has form and yaml tabs", () => {
     renderWithProviders(
       <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
     );
 
-    expect(screen.getByLabelText(/agent name/i)).toBeInTheDocument();
+    expect(screen.getByText("Form")).toBeInTheDocument();
+    expect(screen.getByText("Upload YAML")).toBeInTheDocument();
   });
 
-  it("has YAML file input", () => {
+  it("defaults to form tab", () => {
     renderWithProviders(
       <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
     );
 
-    expect(screen.getByLabelText(/yaml configuration/i)).toBeInTheDocument();
-  });
-
-  it("has Create and Cancel buttons", () => {
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
-
-    expect(screen.getByRole("button", { name: /create/i })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
-  });
-
-  it("calls onOpenChange when Cancel is clicked", async () => {
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={onOpenChange} />,
-    );
-
-    await user.click(screen.getByRole("button", { name: /cancel/i }));
-
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-
-  it("allows typing in the name input", async () => {
-    const user = userEvent.setup();
-
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
-
-    const input = screen.getByLabelText(/agent name/i);
-    await user.type(input, "my-new-agent");
-
-    expect(input).toHaveValue("my-new-agent");
-  });
-
-  it("calls createAgent.mutate when form is submitted with name and file", async () => {
-    const user = userEvent.setup();
-
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
-
-    // Type agent name
-    await user.type(screen.getByLabelText(/agent name/i), "my-agent");
-
-    // Upload a file
-    const file = new File(["model: gpt-4o"], "config.yaml", {
-      type: "application/x-yaml",
-    });
-    const fileInput = screen.getByLabelText(/yaml configuration/i);
-    await user.upload(fileInput, file);
-
-    // Submit
-    await user.click(screen.getByRole("button", { name: /^create$/i }));
-
-    expect(mockCreateAgentMutate).toHaveBeenCalledWith(
-      { name: "my-agent", yamlFile: file },
-      expect.objectContaining({
-        onSuccess: expect.any(Function),
-        onError: expect.any(Function),
-      }),
-    );
-  });
-
-  it("shows error toast when name is empty on submit", async () => {
-    const { toast } = await import("sonner");
-    const user = userEvent.setup();
-
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
-
-    // Submit without name
-    await user.click(screen.getByRole("button", { name: /^create$/i }));
-
-    expect(toast.error).toHaveBeenCalledWith("Agent name is required");
-    expect(mockCreateAgentMutate).not.toHaveBeenCalled();
+    expect(screen.getByLabelText(/agent name/i)).toBeInTheDocument();
   });
 
-  it("shows error toast when file is not selected on submit", async () => {
-    const { toast } = await import("sonner");
+  it("switches to yaml tab and shows file input", async () => {
     const user = userEvent.setup();
 
     renderWithProviders(
       <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
     );
 
-    // Type name but don't upload file
-    await user.type(screen.getByLabelText(/agent name/i), "my-agent");
-    await user.click(screen.getByRole("button", { name: /^create$/i }));
+    await user.click(screen.getByText("Upload YAML"));
 
-    expect(toast.error).toHaveBeenCalledWith(
-      "YAML configuration file is required",
-    );
-    expect(mockCreateAgentMutate).not.toHaveBeenCalled();
+    expect(screen.getByLabelText(/yaml configuration/i)).toBeInTheDocument();
   });
 
-  it("closes dialog via header close button", async () => {
+  it("shows cancel button in yaml tab", async () => {
     const user = userEvent.setup();
     const onOpenChange = vi.fn();
 
@@ -166,12 +91,8 @@ describe("CreateAgentDialog", () => {
       <CreateAgentDialog open={true} onOpenChange={onOpenChange} />,
     );
 
-    const allButtons = screen.getAllByRole("button");
-    const headerClose = allButtons.find(
-      (btn) => btn.textContent?.trim() === "close",
-    );
-    expect(headerClose).toBeDefined();
-    await user.click(headerClose!);
+    await user.click(screen.getByText("Upload YAML"));
+    await user.click(screen.getByRole("button", { name: /cancel/i }));
 
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
diff --git a/tests/unit/components/agent/KeyValueEditor.test.tsx b/tests/unit/components/agent/KeyValueEditor.test.tsx
new file mode 100644
index 0000000..a37a6b4
--- /dev/null
+++ b/tests/unit/components/agent/KeyValueEditor.test.tsx
@@ -0,0 +1,100 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../../utils/render";
+import KeyValueEditor from "@/application/components/agent/KeyValueEditor";
+
+describe("KeyValueEditor", () => {
+  it("renders with label and existing entries", () => {
+    renderWithProviders(
+      <KeyValueEditor
+        label="Headers"
+        value={{ Authorization: "Bearer token", "X-Custom": "value" }}
+        onChange={vi.fn()}
+        keyPlaceholder="Header name"
+        valuePlaceholder="Header value"
+      />,
+    );
+
+    expect(screen.getByText("Headers")).toBeInTheDocument();
+    expect(screen.getByText("Authorization")).toBeInTheDocument();
+    expect(screen.getByText("X-Custom")).toBeInTheDocument();
+  });
+
+  it("renders key and value inputs", () => {
+    renderWithProviders(
+      <KeyValueEditor
+        label="Env"
+        value={{}}
+        onChange={vi.fn()}
+        keyPlaceholder="Variable name"
+        valuePlaceholder="Variable value"
+      />,
+    );
+
+    expect(screen.getByPlaceholderText("Variable name")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Variable value")).toBeInTheDocument();
+  });
+
+  it("calls onChange when adding a new entry", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <KeyValueEditor
+        label="Headers"
+        value={{}}
+        onChange={onChange}
+        keyPlaceholder="Key"
+        valuePlaceholder="Value"
+      />,
+    );
+
+    await user.type(screen.getByPlaceholderText("Key"), "API_KEY");
+    await user.type(screen.getByPlaceholderText("Value"), "12345");
+    await user.click(screen.getByRole("button", { name: /add/i }));
+
+    expect(onChange).toHaveBeenCalledWith({ API_KEY: "12345" });
+  });
+
+  it("calls onChange when removing an entry", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <KeyValueEditor
+        label="Headers"
+        value={{ Authorization: "Bearer token" }}
+        onChange={onChange}
+        keyPlaceholder="Key"
+        valuePlaceholder="Value"
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /remove authorization/i }),
+    );
+
+    expect(onChange).toHaveBeenCalledWith({});
+  });
+
+  it("does not add entry with empty key", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <KeyValueEditor
+        label="Headers"
+        value={{}}
+        onChange={onChange}
+        keyPlaceholder="Key"
+        valuePlaceholder="Value"
+      />,
+    );
+
+    await user.type(screen.getByPlaceholderText("Value"), "some value");
+    await user.click(screen.getByRole("button", { name: /add/i }));
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/components/agent/McpServerEditor.test.tsx b/tests/unit/components/agent/McpServerEditor.test.tsx
new file mode 100644
index 0000000..66f972b
--- /dev/null
+++ b/tests/unit/components/agent/McpServerEditor.test.tsx
@@ -0,0 +1,82 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../../utils/render";
+import McpServerEditor from "@/application/components/agent/McpServerEditor";
+import type { McpServerConfig } from "@/domain/entities/agent/mcpServerConfig";
+import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
+
+const stdioServer: McpServerConfig = {
+  name: "fs-server",
+  transport: McpTransportType.STDIO,
+  command: "npx",
+  args: ["-y", "@mcp/filesystem"],
+  headers: {},
+  env: {},
+};
+
+const httpServer: McpServerConfig = {
+  name: "http-server",
+  transport: McpTransportType.HTTP,
+  url: "http://localhost:3000/mcp",
+  args: [],
+  headers: { Authorization: "Bearer token" },
+  env: {},
+};
+
+describe("McpServerEditor", () => {
+  it("renders server name field", () => {
+    renderWithProviders(
+      <McpServerEditor
+        value={stdioServer}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
+    expect(screen.getByDisplayValue("fs-server")).toBeInTheDocument();
+  });
+
+  it("shows command field for stdio transport", () => {
+    renderWithProviders(
+      <McpServerEditor
+        value={stdioServer}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText(/command/i)).toBeInTheDocument();
+    expect(screen.getByText("Args")).toBeInTheDocument();
+  });
+
+  it("shows url field for http transport", () => {
+    renderWithProviders(
+      <McpServerEditor
+        value={httpServer}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText(/url/i)).toBeInTheDocument();
+    expect(screen.getByText("Headers")).toBeInTheDocument();
+  });
+
+  it("calls onRemove when remove button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+
+    renderWithProviders(
+      <McpServerEditor
+        value={stdioServer}
+        onChange={vi.fn()}
+        onRemove={onRemove}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /remove server/i }));
+    expect(onRemove).toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/components/agent/StringListEditor.test.tsx b/tests/unit/components/agent/StringListEditor.test.tsx
new file mode 100644
index 0000000..b2109b0
--- /dev/null
+++ b/tests/unit/components/agent/StringListEditor.test.tsx
@@ -0,0 +1,100 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../../utils/render";
+import StringListEditor from "@/application/components/agent/StringListEditor";
+
+describe("StringListEditor", () => {
+  it("renders with label and existing items", () => {
+    renderWithProviders(
+      <StringListEditor
+        label="Tools"
+        value={["search", "calculator"]}
+        onChange={vi.fn()}
+        placeholder="Add tool..."
+      />,
+    );
+
+    expect(screen.getByText("Tools")).toBeInTheDocument();
+    expect(screen.getByText("search")).toBeInTheDocument();
+    expect(screen.getByText("calculator")).toBeInTheDocument();
+  });
+
+  it("renders input with placeholder", () => {
+    renderWithProviders(
+      <StringListEditor
+        label="Skills"
+        value={[]}
+        onChange={vi.fn()}
+        placeholder="Add skill..."
+      />,
+    );
+
+    expect(screen.getByPlaceholderText("Add skill...")).toBeInTheDocument();
+  });
+
+  it("calls onChange when adding an item", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <StringListEditor
+        label="Tools"
+        value={["search"]}
+        onChange={onChange}
+        placeholder="Add tool..."
+      />,
+    );
+
+    const input = screen.getByPlaceholderText("Add tool...");
+    await user.type(input, "calculator");
+    await user.keyboard("{Enter}");
+
+    expect(onChange).toHaveBeenCalledWith(["search", "calculator"]);
+  });
+
+  it("calls onChange when removing an item", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <StringListEditor
+        label="Tools"
+        value={["search", "calculator"]}
+        onChange={onChange}
+        placeholder="Add tool..."
+      />,
+    );
+
+    const removeButtons = screen.getAllByRole("button", { name: /remove/i });
+    await user.click(removeButtons[0]);
+
+    expect(onChange).toHaveBeenCalledWith(["calculator"]);
+  });
+
+  it("does not add empty or duplicate items", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <StringListEditor
+        label="Tools"
+        value={["search"]}
+        onChange={onChange}
+        placeholder="Add tool..."
+      />,
+    );
+
+    const input = screen.getByPlaceholderText("Add tool...");
+    await user.type(input, "search");
+    await user.keyboard("{Enter}");
+
+    expect(onChange).not.toHaveBeenCalled();
+
+    onChange.mockClear();
+    await user.clear(input);
+    await user.keyboard("{Enter}");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/components/agent/SubAgentEditor.test.tsx b/tests/unit/components/agent/SubAgentEditor.test.tsx
new file mode 100644
index 0000000..ee7078b
--- /dev/null
+++ b/tests/unit/components/agent/SubAgentEditor.test.tsx
@@ -0,0 +1,75 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../../utils/render";
+import SubAgentEditor from "@/application/components/agent/SubAgentEditor";
+import type { SubAgentConfig } from "@/domain/entities/agent/agentConfig";
+
+const minimalSubAgent: SubAgentConfig = {
+  name: "researcher",
+  description: "Research sub-agent",
+  tools: ["search"],
+  skills: ["web-search"],
+  mcp_servers: [],
+};
+
+describe("SubAgentEditor", () => {
+  it("renders name and description fields", () => {
+    renderWithProviders(
+      <SubAgentEditor
+        value={minimalSubAgent}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
+  });
+
+  it("calls onRemove when remove button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+
+    renderWithProviders(
+      <SubAgentEditor
+        value={minimalSubAgent}
+        onChange={vi.fn()}
+        onRemove={onRemove}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /remove subagent/i }));
+    expect(onRemove).toHaveBeenCalled();
+  });
+
+  it("renders tools and skills sections", () => {
+    renderWithProviders(
+      <SubAgentEditor
+        value={minimalSubAgent}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Tools")).toBeInTheDocument();
+    expect(screen.getByText("Skills")).toBeInTheDocument();
+  });
+
+  it("renders instructions field when present", () => {
+    const withInstructions: SubAgentConfig = {
+      ...minimalSubAgent,
+      instructions: "Do deep research",
+    };
+
+    renderWithProviders(
+      <SubAgentEditor
+        value={withInstructions}
+        onChange={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText(/instructions/i)).toBeInTheDocument();
+  });
+});
diff --git a/tests/unit/domain/entities/agentConfigSchema.test.ts b/tests/unit/domain/entities/agentConfigSchema.test.ts
new file mode 100644
index 0000000..56d1d8e
--- /dev/null
+++ b/tests/unit/domain/entities/agentConfigSchema.test.ts
@@ -0,0 +1,312 @@
+import { describe, it, expect } from "vitest";
+import {
+  agentConfigSchema,
+  backendConfigSchema,
+  hitlConfigSchema,
+  interruptRuleSchema,
+  mcpServerConfigSchema,
+  subAgentConfigSchema,
+} from "@/domain/entities/agent/agentConfigSchema";
+import {
+  BackendType,
+  MiddlewareType,
+} from "@/domain/entities/agent/agentConfig";
+import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
+
+describe("interruptRuleSchema", () => {
+  it("accepts { before: true, after: false }", () => {
+    expect(interruptRuleSchema.parse({ before: true, after: false })).toEqual({
+      before: true,
+      after: false,
+    });
+  });
+
+  it("accepts empty object", () => {
+    expect(interruptRuleSchema.parse({})).toEqual({});
+  });
+
+  it("accepts { before: true }", () => {
+    expect(interruptRuleSchema.parse({ before: true })).toEqual({
+      before: true,
+    });
+  });
+});
+
+describe("hitlConfigSchema", () => {
+  it("accepts empty rules", () => {
+    expect(hitlConfigSchema.parse({ rules: {} })).toEqual({ rules: {} });
+  });
+
+  it("accepts boolean rules", () => {
+    expect(hitlConfigSchema.parse({ rules: { create_file: true } })).toEqual({
+      rules: { create_file: true },
+    });
+  });
+
+  it("accepts interrupt rules", () => {
+    const result = hitlConfigSchema.parse({
+      rules: { delete_file: { before: true, after: false } },
+    });
+    expect(result.rules.delete_file).toEqual({ before: true, after: false });
+  });
+});
+
+describe("backendConfigSchema", () => {
+  it("accepts state type without root_dir", () => {
+    expect(backendConfigSchema.parse({ type: BackendType.STATE })).toEqual({
+      type: BackendType.STATE,
+    });
+  });
+
+  it("accepts filesystem type with root_dir", () => {
+    expect(
+      backendConfigSchema.parse({
+        type: BackendType.FILESYSTEM,
+        root_dir: "/data",
+      }),
+    ).toEqual({ type: BackendType.FILESYSTEM, root_dir: "/data" });
+  });
+
+  it("rejects invalid backend type", () => {
+    expect(() => backendConfigSchema.parse({ type: "invalid" })).toThrow();
+  });
+
+  it("accepts null root_dir", () => {
+    const result = backendConfigSchema.parse({
+      type: BackendType.STATE,
+      root_dir: null,
+    });
+    expect(result.root_dir).toBeNull();
+  });
+});
+
+describe("mcpServerConfigSchema", () => {
+  it("accepts stdio transport with command", () => {
+    const result = mcpServerConfigSchema.parse({
+      name: "my-server",
+      transport: McpTransportType.STDIO,
+      command: "npx",
+      args: ["-y", "mcp-server"],
+      headers: {},
+      env: {},
+    });
+    expect(result.name).toBe("my-server");
+    expect(result.transport).toBe("stdio");
+  });
+
+  it("accepts http transport with url", () => {
+    const result = mcpServerConfigSchema.parse({
+      name: "http-server",
+      transport: McpTransportType.HTTP,
+      url: "http://localhost:3000/mcp",
+      args: [],
+      headers: { Authorization: "Bearer token" },
+      env: {},
+    });
+    expect(result.url).toBe("http://localhost:3000/mcp");
+  });
+
+  it("rejects missing name", () => {
+    expect(() =>
+      mcpServerConfigSchema.parse({
+        transport: McpTransportType.STDIO,
+        args: [],
+        headers: {},
+        env: {},
+      }),
+    ).toThrow();
+  });
+});
+
+describe("subAgentConfigSchema", () => {
+  it("accepts minimal subagent", () => {
+    const result = subAgentConfigSchema.parse({
+      name: "researcher",
+      description: "Research agent",
+      tools: [],
+      skills: [],
+      mcp_servers: [],
+    });
+    expect(result.name).toBe("researcher");
+  });
+
+  it("accepts full subagent", () => {
+    const result = subAgentConfigSchema.parse({
+      name: "researcher",
+      description: "Research agent",
+      instructions: "Do research",
+      model: "openai:gpt-4o",
+      tools: ["search"],
+      skills: ["web-search"],
+      mcp_servers: [],
+      response_format: { type: "json" },
+    });
+    expect(result.tools).toEqual(["search"]);
+  });
+
+  it("rejects missing description", () => {
+    expect(() =>
+      subAgentConfigSchema.parse({
+        name: "researcher",
+        tools: [],
+        skills: [],
+        mcp_servers: [],
+      }),
+    ).toThrow();
+  });
+});
+
+describe("agentConfigSchema", () => {
+  it("accepts minimal valid config", () => {
+    const result = agentConfigSchema.parse({
+      name: "test-agent",
+      model: "openai:gpt-4o",
+      tools: [],
+      middleware: [],
+      backend: { type: BackendType.STATE },
+      hitl: { rules: {} },
+      memory: [],
+      skills: [],
+      subagents: [],
+      mcp_servers: [],
+      debug: false,
+    });
+    expect(result.name).toBe("test-agent");
+  });
+
+  it("accepts full valid config", () => {
+    const config = {
+      name: "full-agent",
+      model: "openai:claude-haiku-4.5",
+      system_prompt: "You are helpful",
+      tools: ["search", "calculator"],
+      middleware: [MiddlewareType.TODO_LIST, MiddlewareType.FILESYSTEM],
+      backend: { type: BackendType.FILESYSTEM, root_dir: "/data" },
+      hitl: {
+        rules: {
+          create_file: true,
+          delete_file: { before: true, after: false },
+        },
+      },
+      memory: ["/mem/1"],
+      skills: ["web-search"],
+      subagents: [
+        {
+          name: "sub",
+          description: "Sub agent",
+          tools: [],
+          skills: [],
+          mcp_servers: [],
+        },
+      ],
+      mcp_servers: [
+        {
+          name: "mcp",
+          transport: McpTransportType.STDIO,
+          command: "npx",
+          args: ["mcp"],
+          headers: {},
+          env: {},
+        },
+      ],
+      debug: true,
+    };
+    const result = agentConfigSchema.parse(config);
+    expect(result.name).toBe("full-agent");
+    expect(result.debug).toBe(true);
+  });
+
+  it("rejects missing required fields", () => {
+    expect(() => agentConfigSchema.parse({})).toThrow();
+  });
+
+  it("rejects whitespace-only name", () => {
+    expect(() =>
+      agentConfigSchema.parse({
+        name: "   ",
+        model: "gpt-4",
+        tools: [],
+        middleware: [],
+        backend: { type: BackendType.STATE },
+        hitl: { rules: {} },
+        memory: [],
+        skills: [],
+        subagents: [],
+        mcp_servers: [],
+        debug: false,
+      }),
+    ).toThrow();
+  });
+
+  it("rejects name over 100 characters", () => {
+    expect(() =>
+      agentConfigSchema.parse({
+        name: "a".repeat(101),
+        model: "gpt-4",
+        tools: [],
+        middleware: [],
+        backend: { type: BackendType.STATE },
+        hitl: { rules: {} },
+        memory: [],
+        skills: [],
+        subagents: [],
+        mcp_servers: [],
+        debug: false,
+      }),
+    ).toThrow();
+  });
+
+  it("rejects name with special characters", () => {
+    expect(() =>
+      agentConfigSchema.parse({
+        name: "my agent!",
+        model: "gpt-4",
+        tools: [],
+        middleware: [],
+        backend: { type: BackendType.STATE },
+        hitl: { rules: {} },
+        memory: [],
+        skills: [],
+        subagents: [],
+        mcp_servers: [],
+        debug: false,
+      }),
+    ).toThrow();
+  });
+
+  it("rejects invalid middleware value", () => {
+    expect(() =>
+      agentConfigSchema.parse({
+        name: "bad",
+        model: "gpt-4",
+        tools: [],
+        middleware: ["invalid"],
+        backend: { type: BackendType.STATE },
+        hitl: { rules: {} },
+        memory: [],
+        skills: [],
+        subagents: [],
+        mcp_servers: [],
+        debug: false,
+      }),
+    ).toThrow();
+  });
+
+  it("accepts optional system_prompt_file", () => {
+    const result = agentConfigSchema.parse({
+      name: "agent",
+      model: "gpt-4",
+      system_prompt_file: "/prompts/system.txt",
+      tools: [],
+      middleware: [],
+      backend: { type: BackendType.STATE },
+      hitl: { rules: {} },
+      memory: [],
+      skills: [],
+      subagents: [],
+      mcp_servers: [],
+      debug: false,
+    });
+    expect(result.system_prompt_file).toBe("/prompts/system.txt");
+  });
+});
diff --git a/tests/unit/infrastructure/api/chat/chatApi.test.ts b/tests/unit/infrastructure/api/chat/chatApi.test.ts
index f183b62..d6cb071 100644
--- a/tests/unit/infrastructure/api/chat/chatApi.test.ts
+++ b/tests/unit/infrastructure/api/chat/chatApi.test.ts
@@ -95,7 +95,7 @@ describe("chatApi", () => {
 
       expect(apiClient.post).toHaveBeenCalledWith("/api/v1/chat/thread-123", {
         message: "Hello",
-      });
+      }, { timeout: 300000 });
       expect(result).toEqual(message);
     });
   });
diff --git a/tests/unit/pages/AgentsPage.test.tsx b/tests/unit/pages/AgentsPage.test.tsx
index a2c55c1..29f02e2 100644
--- a/tests/unit/pages/AgentsPage.test.tsx
+++ b/tests/unit/pages/AgentsPage.test.tsx
@@ -34,6 +34,13 @@ vi.mock("@/application/hooks/agent/useDeleteAgent", () => ({
   }),
 }));
 
+vi.mock("@/application/hooks/agent/useUpdateAgent", () => ({
+  useUpdateAgent: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+}));
+
 vi.mock("sonner", () => ({
   toast: {
     success: vi.fn(),
@@ -71,8 +78,10 @@ describe("AgentsPage", () => {
 
     await user.click(screen.getByRole("button", { name: /create agent/i }));
 
-    expect(screen.getByText("Create Agent")).toBeInTheDocument();
-    expect(screen.getByLabelText(/agent name/i)).toBeInTheDocument();
+    // Dialog should have a title matching "Create Agent"
+    expect(
+      screen.getByRole("heading", { name: /create agent/i }),
+    ).toBeInTheDocument();
   });
 
   it("opens AgentConfigViewer when Configure button is clicked", async () => {
@@ -82,12 +91,8 @@ describe("AgentsPage", () => {
 
     await user.click(screen.getByRole("button", { name: /configure/i }));
 
-    // The AgentConfigViewer should be rendered with Delete button (unique to viewer)
-    expect(
-      screen.getByRole("button", { name: /^delete$/i }),
-    ).toBeInTheDocument();
-    // The dialog should be present
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    // The AgentConfigViewer dialog should show the agent name (appears in grid + dialog)
+    expect(screen.getAllByText("my-agent").length).toBeGreaterThanOrEqual(2);
   });
 
   it("renders description text", () => {
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 2f5abd6..be35d88 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2021",
     "useDefineForClassFields": true,
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "ES2022.Error", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "composite": true,