From f6bca7003ae8a2963f9ddb4900c9fa46d77d44ed Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Fri, 3 Apr 2026 23:26:26 +0700
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20gap=20closure=20=E2=80=94=20ext?=
 =?UTF-8?q?ract=20form=20field=20groups=20from=20bloated=20RHF=20dialogs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split 4 RHF form dialogs that grew after Phase 3 Zod refactoring:
- channel-instance-form-dialog: 445 → 292 (+ form-step 196)
- cli-credential-form-dialog: 417 → 277 (+ binary-fields 151, scope-fields 72)
- mcp-form-dialog: 359 → 209 (+ connection-fields 100, settings-fields 95)
- agent-create-dialog: 351 → 165 (+ identity-model-fields 166, description 90)

Skipped: heartbeat-config (already decomposed), provider-form (no 50+ line boundary).

Files >300 lines: 20 → 16. Build passes.
---
 .../src/pages/agents/agent-create-dialog.tsx  | 244 +++---------------
 .../agents/agent-description-section.tsx      |  90 +++++++
 .../agent-identity-and-model-fields.tsx       | 166 ++++++++++++
 .../channels/channel-instance-form-dialog.tsx | 209 ++-------------
 .../channels/channel-instance-form-step.tsx   | 196 ++++++++++++++
 .../channels/telegram-group-overrides.tsx     |   2 +-
 .../cli-credential-binary-fields.tsx          | 151 +++++++++++
 .../cli-credential-form-dialog.tsx            | 180 ++-----------
 .../cli-credential-scope-fields.tsx           |  72 ++++++
 .../src/pages/mcp/mcp-connection-fields.tsx   | 100 +++++++
 ui/web/src/pages/mcp/mcp-form-dialog.tsx      | 224 +++-------------
 ui/web/src/pages/mcp/mcp-settings-fields.tsx  |  95 +++++++
 12 files changed, 985 insertions(+), 744 deletions(-)
 create mode 100644 ui/web/src/pages/agents/agent-description-section.tsx
 create mode 100644 ui/web/src/pages/agents/agent-identity-and-model-fields.tsx
 create mode 100644 ui/web/src/pages/channels/channel-instance-form-step.tsx
 create mode 100644 ui/web/src/pages/cli-credentials/cli-credential-binary-fields.tsx
 create mode 100644 ui/web/src/pages/cli-credentials/cli-credential-scope-fields.tsx
 create mode 100644 ui/web/src/pages/mcp/mcp-connection-fields.tsx
 create mode 100644 ui/web/src/pages/mcp/mcp-settings-fields.tsx

diff --git a/ui/web/src/pages/agents/agent-create-dialog.tsx b/ui/web/src/pages/agents/agent-create-dialog.tsx
index de74d7d4..235b5a19 100644
--- a/ui/web/src/pages/agents/agent-create-dialog.tsx
+++ b/ui/web/src/pages/agents/agent-create-dialog.tsx
@@ -1,8 +1,7 @@
-import { useMemo, useEffect } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { useMemo, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "react-i18next";
-import { ChevronRight } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -11,26 +10,14 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Switch } from "@/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Combobox } from "@/components/ui/combobox";
 import type { AgentData } from "@/types/agent";
-import { slugify } from "@/lib/slug";
 import { useProviders } from "@/pages/providers/hooks/use-providers";
 import { useProviderModels } from "@/pages/providers/hooks/use-provider-models";
 import { useProviderVerify } from "@/pages/providers/hooks/use-provider-verify";
 import { useAgentPresets } from "./agent-presets";
 import { agentCreateSchema, type AgentCreateFormData } from "@/schemas/agent.schema";
-import { useState } from "react";
+import { AgentIdentityAndModelFields } from "./agent-identity-and-model-fields";
+import { AgentDescriptionSection } from "./agent-description-section";
 
 interface AgentCreateDialogProps {
   open: boolean;
@@ -60,14 +47,15 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
     },
   });
 
-  const { register, control, handleSubmit, watch, setValue, reset, formState: { errors } } = form;
+  const { handleSubmit, watch, setValue, reset, formState: { errors } } = form;
 
   const provider = watch("provider");
   const model = watch("model");
   const agentType = watch("agentType");
+  const agentKey = watch("agentKey");
+  const displayName = watch("displayName");
 
   const enabledProviders = providers.filter((p) => p.enabled);
-
   const selectedProvider = useMemo(
     () => enabledProviders.find((p) => p.name === provider),
     [enabledProviders, provider],
@@ -76,12 +64,8 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
   const { models, loading: modelsLoading } = useProviderModels(selectedProviderId);
   const { verify, verifying, result: verifyResult, reset: resetVerify } = useProviderVerify();
 
-  // Reset verification when provider or model changes
-  useEffect(() => {
-    resetVerify();
-  }, [provider, model, resetVerify]);
+  useEffect(() => { resetVerify(); }, [provider, model, resetVerify]);
 
-  // Reset form when dialog closes
   useEffect(() => {
     if (!open) {
       reset();
@@ -95,12 +79,6 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
     await verify(selectedProviderId, model.trim());
   };
 
-  const handleVerifyAndCreate = async () => {
-    if (!selectedProviderId || !model.trim()) return;
-    const res = await verify(selectedProviderId, model.trim());
-    if (res?.valid) await handleSubmitForm(form.getValues());
-  };
-
   const handleSubmitForm = async (data: AgentCreateFormData) => {
     setLoading(true);
     setSubmitError("");
@@ -125,15 +103,17 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
     }
   };
 
+  const handleVerifyAndCreate = async () => {
+    if (!selectedProviderId || !model.trim()) return;
+    const res = await verify(selectedProviderId, model.trim());
+    if (res?.valid) await handleSubmitForm(form.getValues());
+  };
+
   const handleProviderChange = (value: string) => {
     setValue("provider", value, { shouldValidate: true });
     setValue("model", "", { shouldValidate: false });
   };
 
-  const displayName = watch("displayName");
-  const agentKey = watch("agentKey");
-
-  // Derived submit button state
   const canCreate = !!agentKey && !!displayName && !!provider && !!model &&
     !errors.agentKey && !errors.displayName &&
     (agentType !== "predefined" || !!watch("description")?.trim());
@@ -144,185 +124,22 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
         <DialogHeader>
           <DialogTitle>{t("create.title")}</DialogTitle>
         </DialogHeader>
+
         <div className="space-y-4 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 overflow-y-auto min-h-0">
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor="displayName">{t("create.displayName")}</Label>
-              <div className="flex gap-2">
-                <Input
-                  id="emoji"
-                  {...register("emoji")}
-                  placeholder="🤖"
-                  className="w-14 shrink-0 text-center text-lg"
-                  maxLength={2}
-                  title={t("create.emojiHint")}
-                />
-                <Input
-                  id="displayName"
-                  {...register("displayName")}
-                  onBlur={(e) => {
-                    register("displayName").onBlur(e);
-                    const name = e.target.value.trim();
-                    if (name && !form.getFieldState("agentKey").isDirty) {
-                      setValue("agentKey", slugify(name), { shouldValidate: true });
-                    }
-                  }}
-                  placeholder={t("create.displayNamePlaceholder")}
-                />
-              </div>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="agentKey">{t("create.agentKey")}</Label>
-              <Input
-                id="agentKey"
-                {...register("agentKey")}
-                onBlur={(e) => {
-                  setValue("agentKey", slugify(e.target.value), { shouldValidate: true });
-                }}
-                placeholder={t("create.agentKeyPlaceholder")}
-              />
-              {errors.agentKey ? (
-                <p className="text-xs text-destructive">{errors.agentKey.message}</p>
-              ) : (
-                <p className="text-xs text-muted-foreground">{t("create.agentKeyHint")}</p>
-              )}
-            </div>
-          </div>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="space-y-2">
-              <Label>{t("create.provider")}</Label>
-              {enabledProviders.length > 0 ? (
-                <Controller
-                  control={control}
-                  name="provider"
-                  render={({ field }) => (
-                    <Select value={field.value} onValueChange={handleProviderChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder={t("create.selectProvider")} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {enabledProviders.map((p) => (
-                          <SelectItem key={p.name} value={p.name}>
-                            {p.display_name || p.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-              ) : (
-                <Input
-                  {...register("provider")}
-                  placeholder="openrouter"
-                />
-              )}
-            </div>
-            <div className="space-y-2">
-              <Label>{t("create.model")}</Label>
-              <div className="flex gap-2">
-                <div className="flex-1">
-                  <Controller
-                    control={control}
-                    name="model"
-                    render={({ field }) => (
-                      <Combobox
-                        value={field.value}
-                        onChange={(v) => setValue("model", v, { shouldValidate: true })}
-                        options={models.map((m) => ({ value: m.id, label: m.name }))}
-                        placeholder={modelsLoading ? t("create.loadingModels") : t("create.enterOrSelectModel")}
-                      />
-                    )}
-                  />
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-9 px-3"
-                  disabled={!selectedProviderId || !model.trim() || verifying}
-                  onClick={handleVerify}
-                >
-                  {verifying ? "..." : t("create.check")}
-                </Button>
-              </div>
-              {verifyResult && (
-                <p className={`text-xs ${verifyResult.valid ? "text-success" : "text-destructive"}`}>
-                  {verifyResult.valid ? t("create.modelVerified") : verifyResult.error || t("create.verificationFailed")}
-                </p>
-              )}
-              {!verifyResult && provider && !modelsLoading && models.length === 0 && (
-                <p className="text-xs text-muted-foreground">{t("create.noModelsHint")}</p>
-              )}
-            </div>
-          </div>
-          {agentType === "predefined" ? (
-            <div className="space-y-3">
-              <Label>{t("create.describeAgent")}</Label>
-              <div className="flex flex-wrap gap-1.5">
-                {agentPresets.map((preset) => (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    onClick={() => setValue("description", preset.prompt, { shouldValidate: true })}
-                    className="rounded-full border px-2.5 py-0.5 text-xs transition-colors hover:bg-accent"
-                  >
-                    {preset.label}
-                  </button>
-                ))}
-              </div>
-              <Textarea
-                {...register("description")}
-                placeholder={t("create.descriptionPlaceholder")}
-                className="min-h-[120px]"
-              />
-              <p className="text-xs text-muted-foreground">
-                {t("create.descriptionHint")}
-              </p>
-              <div className="flex items-center justify-between gap-4 rounded-md border px-3 py-2.5">
-                <div className="space-y-0.5">
-                  <Label htmlFor="create-self-evolve" className="text-sm font-normal">{t("create.selfEvolution")}</Label>
-                  <p className="text-xs text-muted-foreground">{t("create.selfEvolutionHint")}</p>
-                </div>
-                <Controller
-                  control={control}
-                  name="selfEvolve"
-                  render={({ field }) => (
-                    <Switch id="create-self-evolve" checked={field.value} onCheckedChange={field.onChange} />
-                  )}
-                />
-              </div>
-            </div>
-          ) : (
-            <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2.5 space-y-2">
-              <p className="text-xs text-amber-700 dark:text-amber-400">
-                {t("create.openWarning")}
-              </p>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-7 text-xs"
-                onClick={() => setValue("agentType", "predefined")}
-              >
-                {t("create.switchToPredefined")}
-              </Button>
-            </div>
-          )}
-
-          {/* Collapsible toggle for Open agent type */}
-          <button
-            type="button"
-            onClick={() => setValue("agentType", agentType === "open" ? "predefined" : "open")}
-            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <ChevronRight className={`h-3 w-3 transition-transform ${agentType === "open" ? "rotate-90" : ""}`} />
-            {t("create.useOpenAgent")}
-          </button>
-
-          {submitError && (
-            <p className="text-sm text-destructive">{submitError}</p>
-          )}
+          <AgentIdentityAndModelFields
+            form={form}
+            enabledProviders={enabledProviders}
+            models={models}
+            modelsLoading={modelsLoading}
+            verifying={verifying}
+            verifyResult={verifyResult}
+            onProviderChange={handleProviderChange}
+            onVerify={handleVerify}
+          />
+          <AgentDescriptionSection form={form} agentPresets={agentPresets} />
+          {submitError && <p className="text-sm text-destructive">{submitError}</p>}
         </div>
+
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
             {t("create.cancel")}
@@ -330,10 +147,7 @@ export function AgentCreateDialog({ open, onOpenChange, onCreate }: AgentCreateD
           {loading ? (
             <Button disabled>{t("create.creating")}</Button>
           ) : !verifyResult?.valid && selectedProviderId && model.trim() ? (
-            <Button
-              onClick={handleVerifyAndCreate}
-              disabled={verifying || !canCreate}
-            >
+            <Button onClick={handleVerifyAndCreate} disabled={verifying || !canCreate}>
               {verifying ? t("create.checking") : t("create.checkAndCreate")}
             </Button>
           ) : (
diff --git a/ui/web/src/pages/agents/agent-description-section.tsx b/ui/web/src/pages/agents/agent-description-section.tsx
new file mode 100644
index 00000000..17fdeafd
--- /dev/null
+++ b/ui/web/src/pages/agents/agent-description-section.tsx
@@ -0,0 +1,90 @@
+import { Controller } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { ChevronRight } from "lucide-react";
+import type { AgentCreateFormData } from "@/schemas/agent.schema";
+import type { AgentPreset } from "./agent-presets";
+
+interface AgentDescriptionSectionProps {
+  form: UseFormReturn<AgentCreateFormData>;
+  agentPresets: AgentPreset[];
+}
+
+/**
+ * Renders the agent type toggle, description textarea with presets,
+ * and self-evolution switch for predefined agents.
+ */
+export function AgentDescriptionSection({ form, agentPresets }: AgentDescriptionSectionProps) {
+  const { t } = useTranslation("agents");
+  const { register, control, watch, setValue } = form;
+  const agentType = watch("agentType");
+
+  return (
+    <>
+      {agentType === "predefined" ? (
+        <div className="space-y-3">
+          <Label>{t("create.describeAgent")}</Label>
+          <div className="flex flex-wrap gap-1.5">
+            {agentPresets.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                onClick={() => setValue("description", preset.prompt, { shouldValidate: true })}
+                className="rounded-full border px-2.5 py-0.5 text-xs transition-colors hover:bg-accent"
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+          <Textarea
+            {...register("description")}
+            placeholder={t("create.descriptionPlaceholder")}
+            className="min-h-[120px]"
+          />
+          <p className="text-xs text-muted-foreground">{t("create.descriptionHint")}</p>
+          <div className="flex items-center justify-between gap-4 rounded-md border px-3 py-2.5">
+            <div className="space-y-0.5">
+              <Label htmlFor="create-self-evolve" className="text-sm font-normal">
+                {t("create.selfEvolution")}
+              </Label>
+              <p className="text-xs text-muted-foreground">{t("create.selfEvolutionHint")}</p>
+            </div>
+            <Controller
+              control={control}
+              name="selfEvolve"
+              render={({ field }) => (
+                <Switch id="create-self-evolve" checked={field.value} onCheckedChange={field.onChange} />
+              )}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2.5 space-y-2">
+          <p className="text-xs text-amber-700 dark:text-amber-400">{t("create.openWarning")}</p>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => setValue("agentType", "predefined")}
+          >
+            {t("create.switchToPredefined")}
+          </Button>
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setValue("agentType", agentType === "open" ? "predefined" : "open")}
+        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ChevronRight className={`h-3 w-3 transition-transform ${agentType === "open" ? "rotate-90" : ""}`} />
+        {t("create.useOpenAgent")}
+      </button>
+    </>
+  );
+}
diff --git a/ui/web/src/pages/agents/agent-identity-and-model-fields.tsx b/ui/web/src/pages/agents/agent-identity-and-model-fields.tsx
new file mode 100644
index 00000000..4373daf8
--- /dev/null
+++ b/ui/web/src/pages/agents/agent-identity-and-model-fields.tsx
@@ -0,0 +1,166 @@
+import { Controller } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Combobox } from "@/components/ui/combobox";
+import { slugify } from "@/lib/slug";
+import type { AgentCreateFormData } from "@/schemas/agent.schema";
+import type { ProviderData } from "@/pages/providers/hooks/use-providers";
+import type { ModelInfo } from "@/pages/providers/hooks/use-provider-models";
+
+interface AgentIdentityAndModelFieldsProps {
+  form: UseFormReturn<AgentCreateFormData>;
+  enabledProviders: ProviderData[];
+  models: ModelInfo[];
+  modelsLoading: boolean;
+  verifying: boolean;
+  verifyResult: { valid: boolean; error?: string } | null;
+  onProviderChange: (value: string) => void;
+  onVerify: () => void;
+}
+
+/**
+ * Renders agent identity fields (emoji, displayName, agentKey) and
+ * provider/model selector with inline verify button.
+ */
+export function AgentIdentityAndModelFields({
+  form,
+  enabledProviders,
+  models,
+  modelsLoading,
+  verifying,
+  verifyResult,
+  onProviderChange,
+  onVerify,
+}: AgentIdentityAndModelFieldsProps) {
+  const { t } = useTranslation("agents");
+  const { register, control, watch, setValue, formState: { errors } } = form;
+  const provider = watch("provider");
+  const model = watch("model");
+
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="displayName">{t("create.displayName")}</Label>
+          <div className="flex gap-2">
+            <Input
+              id="emoji"
+              {...register("emoji")}
+              placeholder="🤖"
+              className="w-14 shrink-0 text-center text-lg"
+              maxLength={2}
+              title={t("create.emojiHint")}
+            />
+            <Input
+              id="displayName"
+              {...register("displayName")}
+              onBlur={(e) => {
+                register("displayName").onBlur(e);
+                const name = e.target.value.trim();
+                if (name && !form.getFieldState("agentKey").isDirty) {
+                  setValue("agentKey", slugify(name), { shouldValidate: true });
+                }
+              }}
+              placeholder={t("create.displayNamePlaceholder")}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="agentKey">{t("create.agentKey")}</Label>
+          <Input
+            id="agentKey"
+            {...register("agentKey")}
+            onBlur={(e) => {
+              setValue("agentKey", slugify(e.target.value), { shouldValidate: true });
+            }}
+            placeholder={t("create.agentKeyPlaceholder")}
+          />
+          {errors.agentKey ? (
+            <p className="text-xs text-destructive">{errors.agentKey.message}</p>
+          ) : (
+            <p className="text-xs text-muted-foreground">{t("create.agentKeyHint")}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <Label>{t("create.provider")}</Label>
+          {enabledProviders.length > 0 ? (
+            <Controller
+              control={control}
+              name="provider"
+              render={({ field }) => (
+                <Select value={field.value} onValueChange={onProviderChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("create.selectProvider")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {enabledProviders.map((p) => (
+                      <SelectItem key={p.name} value={p.name}>
+                        {p.display_name || p.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          ) : (
+            <Input {...register("provider")} placeholder="openrouter" />
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label>{t("create.model")}</Label>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <Controller
+                control={control}
+                name="model"
+                render={({ field }) => (
+                  <Combobox
+                    value={field.value}
+                    onChange={(v) => setValue("model", v, { shouldValidate: true })}
+                    options={models.map((m) => ({ value: m.id, label: m.name ?? m.id }))}
+                    placeholder={modelsLoading ? t("create.loadingModels") : t("create.enterOrSelectModel")}
+                  />
+                )}
+              />
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-9 px-3"
+              disabled={!provider || !model.trim() || verifying}
+              onClick={onVerify}
+            >
+              {verifying ? "..." : t("create.check")}
+            </Button>
+          </div>
+          {verifyResult && (
+            <p className={`text-xs ${verifyResult.valid ? "text-success" : "text-destructive"}`}>
+              {verifyResult.valid
+                ? t("create.modelVerified")
+                : verifyResult.error || t("create.verificationFailed")}
+            </p>
+          )}
+          {!verifyResult && provider && !modelsLoading && models.length === 0 && (
+            <p className="text-xs text-muted-foreground">{t("create.noModelsHint")}</p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/ui/web/src/pages/channels/channel-instance-form-dialog.tsx b/ui/web/src/pages/channels/channel-instance-form-dialog.tsx
index acd70db6..9f53e4b8 100644
--- a/ui/web/src/pages/channels/channel-instance-form-dialog.tsx
+++ b/ui/web/src/pages/channels/channel-instance-form-dialog.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,26 +10,13 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import type { ChannelInstanceData, ChannelInstanceInput } from "./hooks/use-channel-instances";
 import type { AgentData } from "@/types/agent";
-import { slugify } from "@/lib/slug";
 import { credentialsSchema, configSchema, wizardConfig, type FieldDef } from "./channel-schemas";
-import { ChannelFields } from "./channel-fields";
-import { ChannelScopesInfo } from "./channel-scopes-info";
-import { wizardAuthSteps, wizardConfigSteps, wizardEditConfigs } from "./channel-wizard-registry";
-import { TelegramGroupOverrides } from "./telegram-group-overrides";
+import { wizardAuthSteps, wizardConfigSteps } from "./channel-wizard-registry";
 import { CHANNEL_TYPES } from "@/constants/channels";
 import { channelInstanceSchema, type ChannelInstanceFormData } from "@/schemas/channel.schema";
+import { ChannelInstanceFormStep } from "./channel-instance-form-step";
 
 type WizardStep = "form" | "auth" | "config";
 
@@ -52,7 +39,6 @@ export function ChannelInstanceFormDialog({
 }: ChannelInstanceFormDialogProps) {
   const { t } = useTranslation("channels");
 
-  // Non-form state (dynamic maps + wizard flow)
   const [credsValues, setCredsValues] = useState<Record<string, unknown>>({});
   const [configValues, setConfigValues] = useState<Record<string, unknown>>({});
   const [loading, setLoading] = useState(false);
@@ -78,7 +64,6 @@ export function ChannelInstanceFormDialog({
   const hasWizard = !instance && !!wizard;
   const channelLabel = CHANNEL_TYPES.find((ct) => ct.value === channelType)?.label ?? channelType;
 
-  // Step navigation
   const totalSteps = hasWizard ? 1 + wizard!.steps.length : 1;
   const currentStepNum = step === "form" ? 1 : (wizard?.steps.indexOf(step as "auth" | "config") ?? 0) + 2;
 
@@ -100,7 +85,6 @@ export function ChannelInstanceFormDialog({
       });
       setCredsValues({});
 
-      // Merge schema defaults into config so select fields persist their defaults.
       const ct = instance?.channel_type ?? "telegram";
       const schema = configSchema[ct] ?? [];
       const defaults: Record<string, unknown> = {};
@@ -108,9 +92,8 @@ export function ChannelInstanceFormDialog({
         if (f.defaultValue !== undefined) defaults[f.key] = f.defaultValue;
       }
       const merged: Record<string, unknown> = { ...defaults, ...(instance?.config ?? {}) };
-      // Convert boolean values to strings for select fields that use "true"/"false" options
       const boolSelectKeys = new Set(
-        schema.filter((f) => f.type === "select" && f.options?.some((o) => o.value === "true")).map((f) => f.key),
+        schema.filter((f: FieldDef) => f.type === "select" && f.options?.some((o) => o.value === "true")).map((f: FieldDef) => f.key),
       );
       for (const key of boolSelectKeys) {
         if (typeof merged[key] === "boolean") merged[key] = String(merged[key]);
@@ -124,7 +107,6 @@ export function ChannelInstanceFormDialog({
     }
   }, [open, instance, agents, form]);
 
-  // Auto-advance from auth to next step on completion
   useEffect(() => {
     if (step !== "auth" || !authCompleted) return;
     const next = getNextWizardStep("auth");
@@ -143,8 +125,6 @@ export function ChannelInstanceFormDialog({
     setConfigValues((prev) => ({ ...prev, [key]: value }));
   }, []);
 
-  // Convert select fields with "true"/"false"/"inherit" values to proper JSON types.
-  // "inherit" → remove key (nil on Go side), "true"/"false" → boolean.
   const coerceBoolSelects = (cfg: Record<string, unknown>, schema: FieldDef[]) => {
     const boolSelectKeys = new Set(
       schema.filter((f) => f.type === "select" && f.options?.some((o) => o.value === "true")).map((f) => f.key),
@@ -153,16 +133,16 @@ export function ChannelInstanceFormDialog({
       const v = cfg[key];
       if (v === "true") cfg[key] = true;
       else if (v === "false") cfg[key] = false;
-      else delete cfg[key]; // "inherit" or unset
+      else delete cfg[key];
     }
   };
 
   const handleSubmit = form.handleSubmit(async (values) => {
     if (!instance) {
       const schema = credentialsSchema[values.channelType] ?? [];
-      const missing = schema.filter((f) => f.required && !credsValues[f.key]);
+      const missing = schema.filter((f: FieldDef) => f.required && !credsValues[f.key]);
       if (missing.length > 0) {
-        setError(t("form.errors.requiredFields", { fields: missing.map((f) => f.label).join(", ") }));
+        setError(t("form.errors.requiredFields", { fields: missing.map((f: FieldDef) => f.label).join(", ") }));
         return;
       }
     }
@@ -234,15 +214,14 @@ export function ChannelInstanceFormDialog({
   };
 
   const canClose = step !== "auth";
-  const credsFields = credentialsSchema[channelType] ?? [];
-  const excludeSet = new Set(wizard?.excludeConfigFields ?? []);
-  const cfgFields = configSchema[channelType] ?? [];
-  const formCfgFields = excludeSet.size > 0 ? cfgFields.filter((f) => !excludeSet.has(f.key)) : cfgFields;
-
-  // Lookup registered step components for current channel type
   const AuthStep = wizardAuthSteps[channelType];
   const ConfigStep = wizardConfigSteps[channelType];
-  const EditConfig = wizardEditConfigs[channelType];
+
+  const submitLabel = loading
+    ? t("form.saving")
+    : instance
+      ? t("form.update")
+      : (wizard?.createLabel ? t(wizard.createLabel) : t("form.create"));
 
   const dialogTitle = instance
     ? t("form.editTitle")
@@ -252,8 +231,6 @@ export function ChannelInstanceFormDialog({
         ? t("form.authenticate", { label: channelLabel })
         : t("form.configure", { label: channelLabel });
 
-  const { register, control, formState: { errors } } = form;
-
   return (
     <Dialog open={open} onOpenChange={(v) => { if (!loading && canClose) onOpenChange(v); }}>
       <DialogContent className="max-h-[85vh] flex flex-col">
@@ -266,153 +243,24 @@ export function ChannelInstanceFormDialog({
           )}
         </DialogHeader>
 
-        {/* === FORM STEP === */}
         {step === "form" && (
-          <>
-            <div className="grid gap-4 py-2 -mx-4 px-4 sm:-mx-6 sm:px-6 overflow-y-auto min-h-0">
-              <div className="grid gap-1.5">
-                <Label htmlFor="ci-name">{t("form.key")}</Label>
-                <Input
-                  id="ci-name"
-                  {...register("name", {
-                    setValueAs: (v: string) => slugify(v),
-                  })}
-                  onChange={(e) => form.setValue("name", slugify(e.target.value), { shouldValidate: true })}
-                  value={form.watch("name")}
-                  placeholder={t("form.keyPlaceholder")}
-                  disabled={!!instance}
-                />
-                {errors.name && <p className="text-xs text-destructive">{errors.name.message}</p>}
-                <p className="text-xs text-muted-foreground">{t("form.keyHint")}</p>
-              </div>
-
-              <div className="grid gap-1.5">
-                <Label htmlFor="ci-display">{t("form.displayName")}</Label>
-                <Input
-                  id="ci-display"
-                  {...register("displayName")}
-                  placeholder={t("form.displayNamePlaceholder")}
-                />
-              </div>
-
-              <div className="grid gap-1.5">
-                <Label>{t("form.channelType")}</Label>
-                <Controller
-                  control={control}
-                  name="channelType"
-                  render={({ field }) => (
-                    <Select value={field.value} onValueChange={field.onChange} disabled={!!instance}>
-                      <SelectTrigger><SelectValue /></SelectTrigger>
-                      <SelectContent>
-                        {CHANNEL_TYPES.map((ct) => (
-                          <SelectItem key={ct.value} value={ct.value}>{ct.label}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-              </div>
-
-              <div className="grid gap-1.5">
-                <Label>{t("form.agent")}</Label>
-                <Controller
-                  control={control}
-                  name="agentId"
-                  render={({ field }) => (
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger><SelectValue placeholder={t("form.selectAgent")} /></SelectTrigger>
-                      <SelectContent>
-                        {agents.map((a) => (
-                          <SelectItem key={a.id} value={a.id}>{a.display_name || a.agent_key}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                {errors.agentId && <p className="text-xs text-destructive">{errors.agentId.message}</p>}
-              </div>
-
-              {credsFields.length > 0 && (
-                <fieldset className="rounded-md border p-3 space-y-3">
-                  <legend className="px-1 text-sm font-medium">
-                    {t("form.credentials")}
-                    {instance && <span className="text-xs font-normal text-muted-foreground ml-1">{t("form.credentialsHint")}</span>}
-                  </legend>
-                  <ChannelFields fields={credsFields} values={credsValues} onChange={handleCredsChange} idPrefix="ci-cred" isEdit={!!instance} contextValues={configValues} />
-                  <p className="text-xs text-muted-foreground">{t("form.credentialsEncrypted")}</p>
-                </fieldset>
-              )}
-
-              <ChannelScopesInfo channelType={channelType} />
-
-              {/* Auth status indicator (edit mode, channels with auth wizard step) */}
-              {instance && wizard?.steps.includes("auth") && (
-                <div className="rounded-md border border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 p-3">
-                  <div className="flex items-center gap-2">
-                    <span className={`h-2 w-2 rounded-full ${instance.has_credentials ? "bg-green-500" : "bg-amber-500"}`} />
-                    <span className="text-sm">
-                      {instance.has_credentials
-                        ? t("form.authStatus.authenticated")
-                        : t("form.authStatus.notAuthenticated")}
-                    </span>
-                    {!instance.has_credentials && (
-                      <span className="text-xs text-muted-foreground ml-1">{t("form.authStatus.useQrHint")}</span>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {/* Wizard info banner (create mode) */}
-              {hasWizard && wizard?.formBanner && (
-                <div className="rounded-md border border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 p-3">
-                  <p className="text-sm text-muted-foreground">{t(wizard.formBanner)}</p>
-                </div>
-              )}
-
-              {formCfgFields.length > 0 && (
-                <fieldset className="rounded-md border p-3 space-y-3">
-                  <legend className="px-1 text-sm font-medium">{t("form.configuration")}</legend>
-                  <ChannelFields fields={formCfgFields} values={configValues} onChange={handleConfigChange} idPrefix="ci-cfg" />
-                  {instance && EditConfig && <EditConfig instance={instance} configValues={configValues} onConfigChange={handleConfigChange} />}
-                </fieldset>
-              )}
-
-              {/* Telegram group/topic overrides */}
-              {channelType === "telegram" && (
-                <TelegramGroupOverrides
-                  groups={(configValues.groups as Record<string, Record<string, unknown>>) ?? {}}
-                  onChange={(groups) => {
-                    setConfigValues((prev) => ({
-                      ...prev,
-                      groups: Object.keys(groups).length > 0 ? groups : undefined,
-                    }));
-                  }}
-                />
-              )}
-
-              <div className="flex items-center gap-2">
-                <Controller
-                  control={control}
-                  name="enabled"
-                  render={({ field }) => (
-                    <Switch id="ci-enabled" checked={field.value} onCheckedChange={field.onChange} />
-                  )}
-                />
-                <Label htmlFor="ci-enabled">{t("form.enabled")}</Label>
-              </div>
-              {error && <p className="text-sm text-destructive">{error}</p>}
-            </div>
-
-            <DialogFooter>
-              <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>{t("form.cancel")}</Button>
-              <Button onClick={handleSubmit} disabled={loading}>
-                {loading ? t("form.saving") : instance ? t("form.update") : (wizard?.createLabel ? t(wizard.createLabel) : t("form.create"))}
-              </Button>
-            </DialogFooter>
-          </>
+          <ChannelInstanceFormStep
+            form={form}
+            instance={instance}
+            agents={agents}
+            credsValues={credsValues}
+            configValues={configValues}
+            onCredsChange={handleCredsChange}
+            onConfigChange={handleConfigChange}
+            setConfigValues={setConfigValues}
+            error={error}
+            loading={loading}
+            onCancel={() => onOpenChange(false)}
+            onSubmit={handleSubmit}
+            submitLabel={submitLabel}
+          />
         )}
 
-        {/* === AUTH STEP (rendered by registered component) === */}
         {step === "auth" && createdInstanceId && AuthStep && (
           <AuthStep
             instanceId={createdInstanceId}
@@ -421,7 +269,6 @@ export function ChannelInstanceFormDialog({
           />
         )}
 
-        {/* === CONFIG STEP (rendered by registered component) === */}
         {step === "config" && createdInstanceId && ConfigStep && (
           <>
             <div className="py-2 -mx-4 px-4 sm:-mx-6 sm:px-6 overflow-y-auto min-h-0">
diff --git a/ui/web/src/pages/channels/channel-instance-form-step.tsx b/ui/web/src/pages/channels/channel-instance-form-step.tsx
new file mode 100644
index 00000000..8adebc12
--- /dev/null
+++ b/ui/web/src/pages/channels/channel-instance-form-step.tsx
@@ -0,0 +1,196 @@
+import { useCallback } from "react";
+import { Controller } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import type { ChannelInstanceData } from "./hooks/use-channel-instances";
+import type { AgentData } from "@/types/agent";
+import { slugify } from "@/lib/slug";
+import { credentialsSchema, configSchema, wizardConfig, type FieldDef } from "./channel-schemas";
+import { ChannelFields } from "./channel-fields";
+import { ChannelScopesInfo } from "./channel-scopes-info";
+import { wizardEditConfigs } from "./channel-wizard-registry";
+import { TelegramGroupOverrides, type GroupConfigWithTopics } from "./telegram-group-overrides";
+import { CHANNEL_TYPES } from "@/constants/channels";
+import type { ChannelInstanceFormData } from "@/schemas/channel.schema";
+
+interface ChannelInstanceFormStepProps {
+  form: UseFormReturn<ChannelInstanceFormData>;
+  instance?: ChannelInstanceData | null;
+  agents: AgentData[];
+  credsValues: Record<string, unknown>;
+  configValues: Record<string, unknown>;
+  onCredsChange: (key: string, value: unknown) => void;
+  onConfigChange: (key: string, value: unknown) => void;
+  setConfigValues: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+  error: string;
+  loading: boolean;
+  onCancel: () => void;
+  onSubmit: () => void;
+  submitLabel: string;
+}
+
+export function ChannelInstanceFormStep({
+  form, instance, agents, credsValues, configValues,
+  onCredsChange, onConfigChange, setConfigValues,
+  error, loading, onCancel, onSubmit, submitLabel,
+}: ChannelInstanceFormStepProps) {
+  const { t } = useTranslation("channels");
+  const { register, control, formState: { errors } } = form;
+
+  const channelType = form.watch("channelType");
+  const wizard = wizardConfig[channelType];
+  const EditConfig = wizardEditConfigs[channelType];
+  const credsFields = credentialsSchema[channelType] ?? [];
+  const excludeSet = new Set(wizard?.excludeConfigFields ?? []);
+  const cfgFields = configSchema[channelType] ?? [];
+  const formCfgFields = excludeSet.size > 0 ? cfgFields.filter((f: FieldDef) => !excludeSet.has(f.key)) : cfgFields;
+  const hasWizard = !instance && !!wizard;
+
+  const handleTelegramGroupsChange = useCallback((groups: Record<string, GroupConfigWithTopics>) => {
+    setConfigValues((prev) => ({
+      ...prev,
+      groups: Object.keys(groups).length > 0 ? groups : undefined,
+    }));
+  }, [setConfigValues]);
+
+  return (
+    <>
+      <div className="grid gap-4 py-2 -mx-4 px-4 sm:-mx-6 sm:px-6 overflow-y-auto min-h-0">
+        <div className="grid gap-1.5">
+          <Label htmlFor="ci-name">{t("form.key")}</Label>
+          <Input
+            id="ci-name"
+            {...register("name", { setValueAs: (v: string) => slugify(v) })}
+            onChange={(e) => form.setValue("name", slugify(e.target.value), { shouldValidate: true })}
+            value={form.watch("name")}
+            placeholder={t("form.keyPlaceholder")}
+            disabled={!!instance}
+          />
+          {errors.name && <p className="text-xs text-destructive">{errors.name.message}</p>}
+          <p className="text-xs text-muted-foreground">{t("form.keyHint")}</p>
+        </div>
+
+        <div className="grid gap-1.5">
+          <Label htmlFor="ci-display">{t("form.displayName")}</Label>
+          <Input id="ci-display" {...register("displayName")} placeholder={t("form.displayNamePlaceholder")} />
+        </div>
+
+        <div className="grid gap-1.5">
+          <Label>{t("form.channelType")}</Label>
+          <Controller
+            control={control}
+            name="channelType"
+            render={({ field }) => (
+              <Select value={field.value} onValueChange={field.onChange} disabled={!!instance}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {CHANNEL_TYPES.map((ct) => (
+                    <SelectItem key={ct.value} value={ct.value}>{ct.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          />
+        </div>
+
+        <div className="grid gap-1.5">
+          <Label>{t("form.agent")}</Label>
+          <Controller
+            control={control}
+            name="agentId"
+            render={({ field }) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger><SelectValue placeholder={t("form.selectAgent")} /></SelectTrigger>
+                <SelectContent>
+                  {agents.map((a) => (
+                    <SelectItem key={a.id} value={a.id}>{a.display_name || a.agent_key}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          />
+          {errors.agentId && <p className="text-xs text-destructive">{errors.agentId.message}</p>}
+        </div>
+
+        {credsFields.length > 0 && (
+          <fieldset className="rounded-md border p-3 space-y-3">
+            <legend className="px-1 text-sm font-medium">
+              {t("form.credentials")}
+              {instance && <span className="text-xs font-normal text-muted-foreground ml-1">{t("form.credentialsHint")}</span>}
+            </legend>
+            <ChannelFields fields={credsFields} values={credsValues} onChange={onCredsChange} idPrefix="ci-cred" isEdit={!!instance} contextValues={configValues} />
+            <p className="text-xs text-muted-foreground">{t("form.credentialsEncrypted")}</p>
+          </fieldset>
+        )}
+
+        <ChannelScopesInfo channelType={channelType} />
+
+        {instance && wizard?.steps.includes("auth") && (
+          <div className="rounded-md border border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 p-3">
+            <div className="flex items-center gap-2">
+              <span className={`h-2 w-2 rounded-full ${instance.has_credentials ? "bg-green-500" : "bg-amber-500"}`} />
+              <span className="text-sm">
+                {instance.has_credentials ? t("form.authStatus.authenticated") : t("form.authStatus.notAuthenticated")}
+              </span>
+              {!instance.has_credentials && (
+                <span className="text-xs text-muted-foreground ml-1">{t("form.authStatus.useQrHint")}</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {hasWizard && wizard?.formBanner && (
+          <div className="rounded-md border border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 p-3">
+            <p className="text-sm text-muted-foreground">{t(wizard.formBanner)}</p>
+          </div>
+        )}
+
+        {formCfgFields.length > 0 && (
+          <fieldset className="rounded-md border p-3 space-y-3">
+            <legend className="px-1 text-sm font-medium">{t("form.configuration")}</legend>
+            <ChannelFields fields={formCfgFields} values={configValues} onChange={onConfigChange} idPrefix="ci-cfg" />
+            {instance && EditConfig && <EditConfig instance={instance} configValues={configValues} onConfigChange={onConfigChange} />}
+          </fieldset>
+        )}
+
+        {channelType === "telegram" && (
+          <TelegramGroupOverrides
+            groups={(configValues.groups as Record<string, Record<string, unknown>>) ?? {}}
+            onChange={handleTelegramGroupsChange}
+          />
+        )}
+
+        <div className="flex items-center gap-2">
+          <Controller
+            control={control}
+            name="enabled"
+            render={({ field }) => (
+              <Switch id="ci-enabled" checked={field.value} onCheckedChange={field.onChange} />
+            )}
+          />
+          <Label htmlFor="ci-enabled">{t("form.enabled")}</Label>
+        </div>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+
+      <div className="flex justify-end gap-2 pt-2">
+        <Button variant="outline" onClick={onCancel} disabled={loading}>{t("form.cancel")}</Button>
+        <Button onClick={onSubmit} disabled={loading}>
+          {loading ? t("form.saving") : submitLabel}
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/ui/web/src/pages/channels/telegram-group-overrides.tsx b/ui/web/src/pages/channels/telegram-group-overrides.tsx
index 522ece59..b6eda38f 100644
--- a/ui/web/src/pages/channels/telegram-group-overrides.tsx
+++ b/ui/web/src/pages/channels/telegram-group-overrides.tsx
@@ -8,7 +8,7 @@ import { TelegramGroupFields, type TelegramGroupConfigValues } from "./telegram-
 import { TelegramTopicOverrides, type TelegramTopicConfigValues } from "./telegram-topic-overrides";
 import type { GroupManagerGroupInfo } from "./hooks/use-channel-detail";
 
-interface GroupConfigWithTopics extends TelegramGroupConfigValues {
+export interface GroupConfigWithTopics extends TelegramGroupConfigValues {
   topics?: Record<string, TelegramTopicConfigValues>;
 }
 
diff --git a/ui/web/src/pages/cli-credentials/cli-credential-binary-fields.tsx b/ui/web/src/pages/cli-credentials/cli-credential-binary-fields.tsx
new file mode 100644
index 00000000..963b9bfa
--- /dev/null
+++ b/ui/web/src/pages/cli-credentials/cli-credential-binary-fields.tsx
@@ -0,0 +1,151 @@
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Search, Check, AlertCircle } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import type { CliCredentialFormData } from "@/schemas/credential.schema";
+
+interface CheckResult {
+  found: boolean;
+  path?: string;
+  error?: string;
+}
+
+interface CliCredentialBinaryFieldsProps {
+  form: UseFormReturn<CliCredentialFormData>;
+  checking: boolean;
+  checkResult: CheckResult | null;
+  onCheckBinary: () => void;
+}
+
+/**
+ * Renders binary name/path, description, deny-args/deny-verbose,
+ * timeout, and tips fields for the CLI credential form.
+ */
+export function CliCredentialBinaryFields({
+  form,
+  checking,
+  checkResult,
+  onCheckBinary,
+}: CliCredentialBinaryFieldsProps) {
+  const { t } = useTranslation("cli-credentials");
+  const { t: tc } = useTranslation("common");
+  const { register, formState: { errors }, watch } = form;
+  const binaryName = watch("binaryName");
+
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="grid gap-1.5">
+          <Label htmlFor="cc-name">{t("form.binaryName")}</Label>
+          <div className="flex gap-1.5">
+            <Input
+              id="cc-name"
+              {...register("binaryName")}
+              placeholder={t("placeholders.binaryName")}
+              className="text-base md:text-sm"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="shrink-0"
+              disabled={!binaryName.trim() || checking}
+              onClick={onCheckBinary}
+              title={t("form.checkBinary")}
+            >
+              <Search className="h-4 w-4" />
+            </Button>
+          </div>
+          {errors.binaryName && (
+            <p className="text-xs text-destructive">{errors.binaryName.message}</p>
+          )}
+          {checkResult && (
+            <p className={`text-xs flex items-center gap-1 ${checkResult.found ? "text-green-600 dark:text-green-400" : "text-destructive"}`}>
+              {checkResult.found
+                ? <><Check className="h-3 w-3" />{t("form.binaryFound", { path: checkResult.path })}</>
+                : <><AlertCircle className="h-3 w-3" />{checkResult.error || t("form.binaryNotFound")}</>}
+            </p>
+          )}
+          {checking && <p className="text-xs text-muted-foreground">{t("form.checking")}</p>}
+        </div>
+
+        <div className="grid gap-1.5">
+          <Label htmlFor="cc-path">
+            {t("form.binaryPath")}{" "}
+            <span className="text-xs text-muted-foreground">({tc("optional")})</span>
+          </Label>
+          <Input
+            id="cc-path"
+            {...register("binaryPath")}
+            placeholder={t("placeholders.binaryPath")}
+            className="text-base md:text-sm"
+          />
+          <p className="text-xs text-muted-foreground">{t("form.binaryPathHint")}</p>
+        </div>
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="cc-desc">{tc("description")}</Label>
+        <Textarea
+          id="cc-desc"
+          {...register("description")}
+          placeholder={t("placeholders.description")}
+          rows={2}
+          className="text-base md:text-sm"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="grid gap-1.5">
+          <Label htmlFor="cc-deny-args">
+            {t("form.denyArgs")}{" "}
+            <span className="text-xs text-muted-foreground">({t("form.commaSeparated")})</span>
+          </Label>
+          <Input
+            id="cc-deny-args"
+            {...register("denyArgs")}
+            placeholder={t("placeholders.denyArgs")}
+            className="text-base md:text-sm"
+          />
+        </div>
+        <div className="grid gap-1.5">
+          <Label htmlFor="cc-timeout">{t("form.timeout")}</Label>
+          <Input
+            id="cc-timeout"
+            type="number"
+            min={1}
+            {...register("timeout", { valueAsNumber: true })}
+            className="text-base md:text-sm"
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="cc-deny-verbose">
+          {t("form.denyVerbose")}{" "}
+          <span className="text-xs text-muted-foreground">({t("form.commaSeparated")})</span>
+        </Label>
+        <Input
+          id="cc-deny-verbose"
+          {...register("denyVerbose")}
+          placeholder={t("placeholders.denyVerbose")}
+          className="text-base md:text-sm"
+        />
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="cc-tips">{t("form.tips")}</Label>
+        <Textarea
+          id="cc-tips"
+          {...register("tips")}
+          placeholder={t("placeholders.tips")}
+          rows={2}
+          className="text-base md:text-sm"
+        />
+      </div>
+    </>
+  );
+}
diff --git a/ui/web/src/pages/cli-credentials/cli-credential-form-dialog.tsx b/ui/web/src/pages/cli-credentials/cli-credential-form-dialog.tsx
index 590d9f23..73cb6955 100644
--- a/ui/web/src/pages/cli-credentials/cli-credential-form-dialog.tsx
+++ b/ui/web/src/pages/cli-credentials/cli-credential-form-dialog.tsx
@@ -1,27 +1,24 @@
 import type { ManualEnvEntry } from "./cli-credential-env-vars-section";
 import { useState, useEffect } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "react-i18next";
 import {
   Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
-import { Search, Check, AlertCircle } from "lucide-react";
 import { useHttp } from "@/hooks/use-ws";
 import { useAgents } from "@/pages/agents/hooks/use-agents";
 import type { SecureCLIBinary, CLICredentialInput, CLIPreset } from "./hooks/use-cli-credentials";
 import { CliCredentialEnvVarsSection } from "./cli-credential-env-vars-section";
+import { CliCredentialBinaryFields } from "./cli-credential-binary-fields";
+import { CliCredentialScopeFields } from "./cli-credential-scope-fields";
 import { cliCredentialSchema, type CliCredentialFormData } from "@/schemas/credential.schema";
 
-
 interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -31,7 +28,6 @@ interface Props {
 }
 
 const NONE_PRESET = "__none__";
-const GLOBAL_AGENT = "__global__";
 const ENV_KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
 
 export function CliCredentialFormDialog({ open, onOpenChange, credential, presets, onSubmit }: Props) {
@@ -40,7 +36,6 @@ export function CliCredentialFormDialog({ open, onOpenChange, credential, preset
   const http = useHttp();
   const { agents } = useAgents();
 
-  // Non-form state: preset selection, env vars, binary check, loading
   const [selectedPreset, setSelectedPreset] = useState(NONE_PRESET);
   const [envValues, setEnvValues] = useState<Record<string, string>>({});
   const [manualEnvEntries, setManualEnvEntries] = useState<ManualEnvEntry[]>([]);
@@ -73,8 +68,6 @@ export function CliCredentialFormDialog({ open, onOpenChange, credential, preset
     },
   });
 
-  const { register, control, formState: { errors }, setValue, watch } = form;
-  const binaryName = watch("binaryName");
 
   useEffect(() => {
     if (!open) return;
@@ -144,7 +137,7 @@ export function CliCredentialFormDialog({ open, onOpenChange, credential, preset
   };
 
   const handleCheckBinary = async () => {
-    const name = binaryName.trim();
+    const name = form.getValues("binaryName").trim();
     if (!name) return;
     setChecking(true);
     setCheckResult(null);
@@ -154,7 +147,7 @@ export function CliCredentialFormDialog({ open, onOpenChange, credential, preset
         { binary_name: name },
       );
       setCheckResult(res);
-      if (res.found && res.path) setValue("binaryPath", res.path);
+      if (res.found && res.path) form.setValue("binaryPath", res.path);
     } catch {
       setCheckResult({ found: false, error: t("form.binaryNotFound") });
     } finally {
@@ -219,7 +212,6 @@ export function CliCredentialFormDialog({ open, onOpenChange, credential, preset
         </DialogHeader>
 
         <div className="grid gap-4 py-2 -mx-4 px-4 sm:-mx-6 sm:px-6 overflow-y-auto min-h-0">
-          {/* Preset selector — only on create */}
           {!isEdit && presetEntries.length > 0 && (
             <div className="grid gap-1.5">
               <Label>{t("form.preset")}</Label>
@@ -255,160 +247,28 @@ export function CliCredentialFormDialog({ open, onOpenChange, credential, preset
             setManualEnvEntries={setManualEnvEntries}
           />
 
-          {/* Binary name + check button */}
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="grid gap-1.5">
-              <Label htmlFor="cc-name">{t("form.binaryName")}</Label>
-              <div className="flex gap-1.5">
-                <Input
-                  id="cc-name"
-                  {...register("binaryName", {
-                    onChange: () => setCheckResult(null),
-                  })}
-                  placeholder={t("placeholders.binaryName")}
-                  className="text-base md:text-sm"
-                />
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="shrink-0"
-                  disabled={!binaryName.trim() || checking}
-                  onClick={handleCheckBinary}
-                  title={t("form.checkBinary")}
-                >
-                  <Search className="h-4 w-4" />
-                </Button>
-              </div>
-              {errors.binaryName && <p className="text-xs text-destructive">{errors.binaryName.message}</p>}
-              {checkResult && (
-                <p className={`text-xs flex items-center gap-1 ${checkResult.found ? "text-green-600 dark:text-green-400" : "text-destructive"}`}>
-                  {checkResult.found ? <Check className="h-3 w-3" /> : <AlertCircle className="h-3 w-3" />}
-                  {checkResult.found
-                    ? t("form.binaryFound", { path: checkResult.path })
-                    : (checkResult.error || t("form.binaryNotFound"))}
-                </p>
-              )}
-              {checking && <p className="text-xs text-muted-foreground">{t("form.checking")}</p>}
-            </div>
-            <div className="grid gap-1.5">
-              <Label htmlFor="cc-path">
-                {t("form.binaryPath")} <span className="text-xs text-muted-foreground">({tc("optional")})</span>
-              </Label>
-              <Input
-                id="cc-path"
-                {...register("binaryPath")}
-                placeholder={t("placeholders.binaryPath")}
-                className="text-base md:text-sm"
-              />
-              <p className="text-xs text-muted-foreground">{t("form.binaryPathHint")}</p>
-            </div>
-          </div>
+          <CliCredentialBinaryFields
+            form={form}
+            checking={checking}
+            checkResult={checkResult}
+            onCheckBinary={handleCheckBinary}
+          />
 
-          <div className="grid gap-1.5">
-            <Label htmlFor="cc-desc">{tc("description")}</Label>
-            <Textarea
-              id="cc-desc"
-              {...register("description")}
-              placeholder={t("placeholders.description")}
-              rows={2}
-              className="text-base md:text-sm"
-            />
-          </div>
-
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div className="grid gap-1.5">
-              <Label htmlFor="cc-deny-args">
-                {t("form.denyArgs")} <span className="text-xs text-muted-foreground">({t("form.commaSeparated")})</span>
-              </Label>
-              <Input
-                id="cc-deny-args"
-                {...register("denyArgs")}
-                placeholder={t("placeholders.denyArgs")}
-                className="text-base md:text-sm"
-              />
-            </div>
-            <div className="grid gap-1.5">
-              <Label htmlFor="cc-timeout">{t("form.timeout")}</Label>
-              <Input
-                id="cc-timeout"
-                type="number"
-                min={1}
-                {...register("timeout", { valueAsNumber: true })}
-                className="text-base md:text-sm"
-              />
-            </div>
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="cc-deny-verbose">
-              {t("form.denyVerbose")} <span className="text-xs text-muted-foreground">({t("form.commaSeparated")})</span>
-            </Label>
-            <Input
-              id="cc-deny-verbose"
-              {...register("denyVerbose")}
-              placeholder={t("placeholders.denyVerbose")}
-              className="text-base md:text-sm"
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="cc-tips">{t("form.tips")}</Label>
-            <Textarea
-              id="cc-tips"
-              {...register("tips")}
-              placeholder={t("placeholders.tips")}
-              rows={2}
-              className="text-base md:text-sm"
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label>
-              {t("form.agentId")} <span className="text-xs text-muted-foreground">({t("form.agentIdHint")})</span>
-            </Label>
-            <Controller
-              control={control}
-              name="agentId"
-              render={({ field }) => (
-                <Select
-                  value={field.value || GLOBAL_AGENT}
-                  onValueChange={(v) => field.onChange(v === GLOBAL_AGENT ? "" : v)}
-                >
-                  <SelectTrigger className="text-base md:text-sm">
-                    <SelectValue placeholder={t("placeholders.agentId")} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={GLOBAL_AGENT}>{t("placeholders.agentId")}</SelectItem>
-                    {agents.map((a) => (
-                      <SelectItem key={a.id} value={a.id}>
-                        {a.display_name || a.agent_key || a.id}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            />
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Controller
-              control={control}
-              name="enabled"
-              render={({ field }) => (
-                <Switch id="cc-enabled" checked={field.value} onCheckedChange={field.onChange} />
-              )}
-            />
-            <Label htmlFor="cc-enabled">{tc("enabled")}</Label>
-          </div>
+          <CliCredentialScopeFields form={form} agents={agents} />
 
           {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>{tc("cancel")}</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+            {tc("cancel")}
+          </Button>
           <Button onClick={handleSubmit} disabled={loading}>
-            {loading ? tc("saving") : isEdit ? tc("update") : tc("create")}
+            {loading
+              ? tc("saving")
+              : isEdit
+                ? tc("update")
+                : tc("create")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/ui/web/src/pages/cli-credentials/cli-credential-scope-fields.tsx b/ui/web/src/pages/cli-credentials/cli-credential-scope-fields.tsx
new file mode 100644
index 00000000..6168df68
--- /dev/null
+++ b/ui/web/src/pages/cli-credentials/cli-credential-scope-fields.tsx
@@ -0,0 +1,72 @@
+import { Controller } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { AgentData } from "@/types/agent";
+import type { CliCredentialFormData } from "@/schemas/credential.schema";
+
+const GLOBAL_AGENT = "__global__";
+
+interface CliCredentialScopeFieldsProps {
+  form: UseFormReturn<CliCredentialFormData>;
+  agents: AgentData[];
+}
+
+/** Renders agent scope selector and enabled toggle for a CLI credential. */
+export function CliCredentialScopeFields({ form, agents }: CliCredentialScopeFieldsProps) {
+  const { t } = useTranslation("cli-credentials");
+  const { t: tc } = useTranslation("common");
+  const { control } = form;
+
+  return (
+    <>
+      <div className="grid gap-1.5">
+        <Label>
+          {t("form.agentId")}{" "}
+          <span className="text-xs text-muted-foreground">({t("form.agentIdHint")})</span>
+        </Label>
+        <Controller
+          control={control}
+          name="agentId"
+          render={({ field }) => (
+            <Select
+              value={field.value || GLOBAL_AGENT}
+              onValueChange={(v) => field.onChange(v === GLOBAL_AGENT ? "" : v)}
+            >
+              <SelectTrigger className="text-base md:text-sm">
+                <SelectValue placeholder={t("placeholders.agentId")} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={GLOBAL_AGENT}>{t("placeholders.agentId")}</SelectItem>
+                {agents.map((a) => (
+                  <SelectItem key={a.id} value={a.id}>
+                    {a.display_name || a.agent_key || a.id}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Controller
+          control={control}
+          name="enabled"
+          render={({ field }) => (
+            <Switch id="cc-enabled" checked={field.value} onCheckedChange={field.onChange} />
+          )}
+        />
+        <Label htmlFor="cc-enabled">{tc("enabled")}</Label>
+      </div>
+    </>
+  );
+}
diff --git a/ui/web/src/pages/mcp/mcp-connection-fields.tsx b/ui/web/src/pages/mcp/mcp-connection-fields.tsx
new file mode 100644
index 00000000..b6872494
--- /dev/null
+++ b/ui/web/src/pages/mcp/mcp-connection-fields.tsx
@@ -0,0 +1,100 @@
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { KeyValueEditor } from "@/components/shared/key-value-editor";
+import { slugify } from "@/lib/slug";
+import type { MCPFormData } from "@/schemas/mcp.schema";
+
+/** Header keys whose values should be masked in the form. */
+const SENSITIVE_HEADER_RE = /^(authorization|x-api-key|api-key|bearer|token|secret|password|credential)/i;
+export const isSensitiveHeader = (key: string) => SENSITIVE_HEADER_RE.test(key.trim());
+
+const TRANSPORTS = [
+  { value: "stdio", label: "stdio" },
+  { value: "sse", label: "SSE" },
+  { value: "streamable-http", label: "Streamable HTTP" },
+] as const;
+
+interface McpConnectionFieldsProps {
+  form: UseFormReturn<MCPFormData>;
+}
+
+/** Renders transport selector plus stdio command/args or HTTP url/headers fields. */
+export function McpConnectionFields({ form }: McpConnectionFieldsProps) {
+  const { t } = useTranslation("mcp");
+  const { register, watch, setValue } = form;
+  const transport = watch("transport");
+  const name = watch("name");
+  const headers = watch("headers") as Record<string, string>;
+  const isStdio = transport === "stdio";
+
+  return (
+    <>
+      <div className="grid gap-1.5">
+        <Label htmlFor="mcp-name">{t("form.name")}</Label>
+        <Input
+          id="mcp-name"
+          value={name}
+          onChange={(e) => setValue("name", slugify(e.target.value))}
+          placeholder="my-mcp-server"
+        />
+        <p className="text-xs text-muted-foreground">{t("form.nameHint")}</p>
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="mcp-display">{t("form.displayName")}</Label>
+        <Input id="mcp-display" placeholder={t("form.displayNamePlaceholder")} {...register("displayName")} />
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label>{t("form.transport")}</Label>
+        <div className="flex gap-2">
+          {TRANSPORTS.map((tr) => (
+            <Button
+              key={tr.value}
+              type="button"
+              variant={transport === tr.value ? "default" : "outline"}
+              size="sm"
+              onClick={() => setValue("transport", tr.value)}
+            >
+              {tr.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {isStdio ? (
+        <>
+          <div className="grid gap-1.5">
+            <Label htmlFor="mcp-cmd">{t("form.command")}</Label>
+            <Input id="mcp-cmd" placeholder="npx" className="font-mono" {...register("command")} />
+          </div>
+          <div className="grid gap-1.5">
+            <Label htmlFor="mcp-args">{t("form.args")}</Label>
+            <Input id="mcp-args" placeholder={t("form.argsPlaceholder")} className="font-mono" {...register("args")} />
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="grid gap-1.5">
+            <Label htmlFor="mcp-url">{t("form.url")}</Label>
+            <Input id="mcp-url" placeholder="http://localhost:3001/sse" className="font-mono" {...register("url")} />
+          </div>
+          <div className="grid gap-1.5">
+            <Label>{t("form.headers")}</Label>
+            <KeyValueEditor
+              value={headers}
+              onChange={(v) => setValue("headers", v)}
+              keyPlaceholder={t("form.headerKeyPlaceholder")}
+              valuePlaceholder={t("form.headerValuePlaceholder")}
+              addLabel={t("form.addHeader")}
+              maskValue={isSensitiveHeader}
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/ui/web/src/pages/mcp/mcp-form-dialog.tsx b/ui/web/src/pages/mcp/mcp-form-dialog.tsx
index b67bdd81..732a10c6 100644
--- a/ui/web/src/pages/mcp/mcp-form-dialog.tsx
+++ b/ui/web/src/pages/mcp/mcp-form-dialog.tsx
@@ -11,30 +11,11 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { KeyValueEditor } from "@/components/shared/key-value-editor";
 import type { MCPServerData, MCPServerInput } from "./hooks/use-mcp";
-import { slugify, isValidSlug } from "@/lib/slug";
+import { isValidSlug } from "@/lib/slug";
 import { mcpFormSchema, type MCPFormData } from "@/schemas/mcp.schema";
-
-/** Header keys whose values should be masked in the form. */
-const SENSITIVE_HEADER_RE = /^(authorization|x-api-key|api-key|bearer|token|secret|password|credential)/i;
-
-/** Env var keys whose values should be masked in the form. */
-const SENSITIVE_ENV_RE = /^.*(key|secret|token|password|credential).*$/i;
-
-const isSensitiveHeader = (key: string) => SENSITIVE_HEADER_RE.test(key.trim());
-const isSensitiveEnv = (key: string) => SENSITIVE_ENV_RE.test(key.trim());
-
-interface MCPFormDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  server?: MCPServerData | null;
-  onSubmit: (data: MCPServerInput) => Promise<unknown>;
-  onTest: (data: { transport: string; command?: string; args?: string[]; url?: string; headers?: Record<string, string>; env?: Record<string, string> }) => Promise<{ success: boolean; tool_count?: number; error?: string }>;
-}
+import { McpConnectionFields } from "./mcp-connection-fields";
+import { McpSettingsFields } from "./mcp-settings-fields";
 
 /** Split a string into shell-like tokens, treating commas and spaces outside quotes as delimiters. */
 function splitShellTokens(input: string): string[] {
@@ -47,11 +28,20 @@ function splitShellTokens(input: string): string[] {
   return tokens.filter(Boolean);
 }
 
-const TRANSPORTS = [
-  { value: "stdio", label: "stdio" },
-  { value: "sse", label: "SSE" },
-  { value: "streamable-http", label: "Streamable HTTP" },
-] as const;
+interface MCPFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  server?: MCPServerData | null;
+  onSubmit: (data: MCPServerInput) => Promise<unknown>;
+  onTest: (data: {
+    transport: string;
+    command?: string;
+    args?: string[];
+    url?: string;
+    headers?: Record<string, string>;
+    env?: Record<string, string>;
+  }) => Promise<{ success: boolean; tool_count?: number; error?: string }>;
+}
 
 export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest }: MCPFormDialogProps) {
   const { t } = useTranslation("mcp");
@@ -79,19 +69,13 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest }:
     },
   });
 
-  const { register, watch, setValue, reset, handleSubmit: rhfHandleSubmit } = form;
+  const { watch, reset, handleSubmit: rhfHandleSubmit } = form;
   const transport = watch("transport");
-  const name = watch("name");
   const command = watch("command");
   const args = watch("args");
   const url = watch("url");
   const headers = watch("headers") as Record<string, string>;
   const env = watch("env") as Record<string, string>;
-  const enabled = watch("enabled");
-  const requireUserCreds = watch("requireUserCreds");
-  const timeout = watch("timeout");
-  const toolPrefix = watch("toolPrefix");
-
   const isStdio = transport === "stdio";
 
   useEffect(() => {
@@ -131,32 +115,19 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest }:
       }
     }
 
-    const parsedHeaders = !isStdio && Object.keys(headers).length > 0
-      ? (headers as Record<string, string>)
-      : undefined;
-    const parsedEnv = Object.keys(env).length > 0
-      ? (env as Record<string, string>)
-      : undefined;
     return {
       transport,
       command: isStdio ? resolvedCommand : undefined,
       args: parsedArgs,
       url: !isStdio ? url.trim() : undefined,
-      headers: parsedHeaders,
-      env: parsedEnv,
+      headers: !isStdio && Object.keys(headers).length > 0 ? headers : undefined,
+      env: Object.keys(env).length > 0 ? env : undefined,
     };
   };
 
   const handleTest = async () => {
-    if (isStdio && !command.trim()) {
-      setError(t("form.errors.commandRequired"));
-      return;
-    }
-    if (!isStdio && !url.trim()) {
-      setError(t("form.errors.urlRequired"));
-      return;
-    }
-
+    if (isStdio && !command.trim()) { setError(t("form.errors.commandRequired")); return; }
+    if (!isStdio && !url.trim()) { setError(t("form.errors.urlRequired")); return; }
     setTesting(true);
     setError("");
     setTestResult(null);
@@ -171,27 +142,17 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest }:
   };
 
   const handleSubmit = rhfHandleSubmit(async (data) => {
-    if (!isValidSlug(data.name.trim())) {
-      setError(t("form.errors.nameSlug"));
-      return;
-    }
-    if (isStdio && !data.command.trim()) {
-      setError(t("form.errors.commandRequired"));
-      return;
-    }
-    if (!isStdio && !data.url.trim()) {
-      setError(t("form.errors.urlRequired"));
-      return;
-    }
+    if (!isValidSlug(data.name.trim())) { setError(t("form.errors.nameSlug")); return; }
+    if (isStdio && !data.command.trim()) { setError(t("form.errors.commandRequired")); return; }
+    if (!isStdio && !data.url.trim()) { setError(t("form.errors.urlRequired")); return; }
 
     setLoading(true);
     setError("");
     try {
-      const conn = buildConnectionData();
       await onSubmit({
         name: data.name.trim(),
         display_name: data.displayName.trim() || undefined,
-        ...conn,
+        ...buildConnectionData(),
         tool_prefix: data.toolPrefix.trim() || undefined,
         timeout_sec: data.timeout,
         settings: { require_user_credentials: data.requireUserCreds },
@@ -213,141 +174,30 @@ export function MCPFormDialog({ open, onOpenChange, server, onSubmit, onTest }:
         </DialogHeader>
 
         <div className="grid gap-4 py-2 -mx-4 px-4 sm:-mx-6 sm:px-6 overflow-y-auto min-h-0">
-          <div className="grid gap-1.5">
-            <Label htmlFor="mcp-name">{t("form.name")}</Label>
-            <Input
-              id="mcp-name"
-              value={name}
-              onChange={(e) => setValue("name", slugify(e.target.value))}
-              placeholder="my-mcp-server"
-            />
-            <p className="text-xs text-muted-foreground">{t("form.nameHint")}</p>
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="mcp-display">{t("form.displayName")}</Label>
-            <Input id="mcp-display" placeholder={t("form.displayNamePlaceholder")} {...register("displayName")} />
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label>{t("form.transport")}</Label>
-            <div className="flex gap-2">
-              {TRANSPORTS.map((tr) => (
-                <Button
-                  key={tr.value}
-                  type="button"
-                  variant={transport === tr.value ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setValue("transport", tr.value)}
-                >
-                  {tr.label}
-                </Button>
-              ))}
-            </div>
-          </div>
-
-          {isStdio ? (
-            <>
-              <div className="grid gap-1.5">
-                <Label htmlFor="mcp-cmd">{t("form.command")}</Label>
-                <Input id="mcp-cmd" placeholder="npx" className="font-mono" {...register("command")} />
-              </div>
-              <div className="grid gap-1.5">
-                <Label htmlFor="mcp-args">{t("form.args")}</Label>
-                <Input id="mcp-args" placeholder={t("form.argsPlaceholder")} className="font-mono" {...register("args")} />
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="grid gap-1.5">
-                <Label htmlFor="mcp-url">{t("form.url")}</Label>
-                <Input id="mcp-url" placeholder="http://localhost:3001/sse" className="font-mono" {...register("url")} />
-              </div>
-              <div className="grid gap-1.5">
-                <Label>{t("form.headers")}</Label>
-                <KeyValueEditor
-                  value={headers}
-                  onChange={(v) => setValue("headers", v)}
-                  keyPlaceholder={t("form.headerKeyPlaceholder")}
-                  valuePlaceholder={t("form.headerValuePlaceholder")}
-                  addLabel={t("form.addHeader")}
-                  maskValue={isSensitiveHeader}
-                />
-              </div>
-            </>
-          )}
-
-          <div className="grid gap-1.5">
-            <Label>{t("form.env")}</Label>
-            <KeyValueEditor
-              value={env}
-              onChange={(v) => setValue("env", v)}
-              keyPlaceholder={t("form.envKeyPlaceholder")}
-              valuePlaceholder={t("form.envValuePlaceholder")}
-              addLabel={t("form.addVariable")}
-              maskValue={isSensitiveEnv}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="mcp-prefix">{t("form.toolPrefix")}</Label>
-            <div className="flex">
-              <span className="inline-flex items-center px-2.5 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm font-mono">mcp_</span>
-              <Input
-                id="mcp-prefix"
-                value={toolPrefix}
-                onChange={(e) => setValue("toolPrefix", e.target.value.replace(/[^a-z0-9_]/g, ""))}
-                placeholder={name.replace(/-/g, "_") || "auto"}
-                className="rounded-l-none font-mono"
-              />
-            </div>
-            <p className="text-xs text-muted-foreground">{t("form.toolPrefixHint")} Tools: <code className="text-[10px]">mcp_&#123;prefix&#125;__&#123;tool&#125;</code></p>
-          </div>
-
-          <div className="grid gap-1.5">
-            <Label htmlFor="mcp-timeout">{t("form.timeout")}</Label>
-            <Input
-              id="mcp-timeout"
-              type="number"
-              value={timeout}
-              onChange={(e) => setValue("timeout", Number(e.target.value))}
-              min={1}
-            />
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Switch id="mcp-enabled" checked={enabled} onCheckedChange={(v) => setValue("enabled", v)} />
-            <Label htmlFor="mcp-enabled">{t("form.enabled")}</Label>
-          </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2">
-              <Switch id="mcp-require-creds" checked={requireUserCreds} onCheckedChange={(v) => setValue("requireUserCreds", v)} />
-              <Label htmlFor="mcp-require-creds">{t("form.requireUserCredentials")}</Label>
-            </div>
-            <p className="text-xs text-muted-foreground pl-9">{t("form.requireUserCredentialsHint")}</p>
-          </div>
-
+          <McpConnectionFields form={form} />
+          <McpSettingsFields form={form} />
           {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
 
         <DialogFooter className="flex-col sm:flex-row gap-2">
           <div className="flex items-center gap-2 mr-auto">
             <Button type="button" variant="secondary" size="sm" onClick={handleTest} disabled={loading || testing}>
-              {testing ? <><Loader2 className="h-3.5 w-3.5 animate-spin mr-1" /> {t("form.testing")}</> : t("form.testConnection")}
+              {testing
+                ? <><Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />{t("form.testing")}</>
+                : t("form.testConnection")}
             </Button>
             {testResult && (
               <span className={`flex items-center gap-1 text-xs ${testResult.success ? "text-emerald-600 dark:text-emerald-400" : "text-destructive"}`}>
-                {testResult.success ? (
-                  <><CheckCircle2 className="h-3.5 w-3.5" /> {t("form.toolsFound", { count: testResult.tool_count })}</>
-                ) : (
-                  <><XCircle className="h-3.5 w-3.5" /> {testResult.error}</>
-                )}
+                {testResult.success
+                  ? <><CheckCircle2 className="h-3.5 w-3.5" />{t("form.toolsFound", { count: testResult.tool_count })}</>
+                  : <><XCircle className="h-3.5 w-3.5" />{testResult.error}</>}
               </span>
             )}
           </div>
           <div className="flex gap-2">
-            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>{t("form.cancel")}</Button>
+            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+              {t("form.cancel")}
+            </Button>
             <Button onClick={handleSubmit} disabled={loading}>
               {loading ? t("form.saving") : server ? t("form.update") : t("form.create")}
             </Button>
diff --git a/ui/web/src/pages/mcp/mcp-settings-fields.tsx b/ui/web/src/pages/mcp/mcp-settings-fields.tsx
new file mode 100644
index 00000000..96c345cc
--- /dev/null
+++ b/ui/web/src/pages/mcp/mcp-settings-fields.tsx
@@ -0,0 +1,95 @@
+import type { UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { KeyValueEditor } from "@/components/shared/key-value-editor";
+import type { MCPFormData } from "@/schemas/mcp.schema";
+
+/** Env var keys whose values should be masked in the form. */
+const SENSITIVE_ENV_RE = /^.*(key|secret|token|password|credential).*$/i;
+export const isSensitiveEnv = (key: string) => SENSITIVE_ENV_RE.test(key.trim());
+
+interface McpSettingsFieldsProps {
+  form: UseFormReturn<MCPFormData>;
+}
+
+/** Renders env vars, tool prefix, timeout, enabled, and requireUserCredentials fields. */
+export function McpSettingsFields({ form }: McpSettingsFieldsProps) {
+  const { t } = useTranslation("mcp");
+  const { watch, setValue } = form;
+  const env = watch("env") as Record<string, string>;
+  const toolPrefix = watch("toolPrefix");
+  const timeout = watch("timeout");
+  const name = watch("name");
+  const enabled = watch("enabled");
+  const requireUserCreds = watch("requireUserCreds");
+
+  return (
+    <>
+      <div className="grid gap-1.5">
+        <Label>{t("form.env")}</Label>
+        <KeyValueEditor
+          value={env}
+          onChange={(v) => setValue("env", v)}
+          keyPlaceholder={t("form.envKeyPlaceholder")}
+          valuePlaceholder={t("form.envValuePlaceholder")}
+          addLabel={t("form.addVariable")}
+          maskValue={isSensitiveEnv}
+        />
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="mcp-prefix">{t("form.toolPrefix")}</Label>
+        <div className="flex">
+          <span className="inline-flex items-center px-2.5 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm font-mono">
+            mcp_
+          </span>
+          <Input
+            id="mcp-prefix"
+            value={toolPrefix}
+            onChange={(e) => setValue("toolPrefix", e.target.value.replace(/[^a-z0-9_]/g, ""))}
+            placeholder={name.replace(/-/g, "_") || "auto"}
+            className="rounded-l-none font-mono"
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {t("form.toolPrefixHint")} Tools:{" "}
+          <code className="text-[10px]">mcp_&#123;prefix&#125;__&#123;tool&#125;</code>
+        </p>
+      </div>
+
+      <div className="grid gap-1.5">
+        <Label htmlFor="mcp-timeout">{t("form.timeout")}</Label>
+        <Input
+          id="mcp-timeout"
+          type="number"
+          value={timeout}
+          onChange={(e) => setValue("timeout", Number(e.target.value))}
+          min={1}
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          id="mcp-enabled"
+          checked={enabled}
+          onCheckedChange={(v) => setValue("enabled", v)}
+        />
+        <Label htmlFor="mcp-enabled">{t("form.enabled")}</Label>
+      </div>
+
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <Switch
+            id="mcp-require-creds"
+            checked={requireUserCreds}
+            onCheckedChange={(v) => setValue("requireUserCreds", v)}
+          />
+          <Label htmlFor="mcp-require-creds">{t("form.requireUserCredentials")}</Label>
+        </div>
+        <p className="text-xs text-muted-foreground pl-9">{t("form.requireUserCredentialsHint")}</p>
+      </div>
+    </>
+  );
+}