diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index affa35ff260..4b43f4b54ae 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -2,7 +2,7 @@
 
 import { CheckIcon } from "lucide-react";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useReducer } from "react";
 import {
   ProviderInstanceId,
   ProviderDriverKind,
@@ -64,6 +64,7 @@ const INSTANCE_ID_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]*$/;
 const DEFAULT_DRIVER_KIND = ProviderDriverKind.make("codex");
 const DEFAULT_DRIVER_OPTION = DRIVER_OPTIONS[0]!;
 const EMPTY_CONFIG_DRAFT: Record<string, unknown> = {};
+const WIZARD_STEPS = ["Driver", "Identity", "Config"] as const;
 interface ComingSoonDriverOption {
   readonly value: ProviderDriverKind;
   readonly label: string;
@@ -113,78 +114,132 @@ interface AddProviderInstanceDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
+interface AddProviderInstanceDraftState {
+  readonly wizardStep: number;
+  readonly driver: ProviderDriverKind;
+  readonly label: string;
+  readonly accentColor: string;
+  readonly manualInstanceId: string;
+  readonly instanceIdDirty: boolean;
+  readonly configByDriver: Record<string, Record<string, unknown>>;
+  readonly hasAttemptedSubmit: boolean;
+}
+
+type AddProviderInstanceDraftAction =
+  | { readonly type: "setWizardStep"; readonly step: number }
+  | { readonly type: "setDriver"; readonly driver: ProviderDriverKind }
+  | { readonly type: "setLabel"; readonly label: string }
+  | { readonly type: "setAccentColor"; readonly accentColor: string }
+  | { readonly type: "setManualInstanceId"; readonly instanceId: string }
+  | {
+      readonly type: "setConfigDraft";
+      readonly driver: ProviderDriverKind;
+      readonly config: Record<string, unknown> | undefined;
+    }
+  | { readonly type: "markAttemptedSubmit" };
+
+function createInitialAddProviderInstanceDraftState(): AddProviderInstanceDraftState {
+  return {
+    wizardStep: 0,
+    driver: DEFAULT_DRIVER_KIND,
+    label: "",
+    accentColor: "",
+    manualInstanceId: "",
+    instanceIdDirty: false,
+    configByDriver: {},
+    hasAttemptedSubmit: false,
+  };
+}
+
+function addProviderInstanceDraftReducer(
+  state: AddProviderInstanceDraftState,
+  action: AddProviderInstanceDraftAction,
+): AddProviderInstanceDraftState {
+  switch (action.type) {
+    case "setWizardStep":
+      return state.wizardStep === action.step ? state : { ...state, wizardStep: action.step };
+    case "setDriver":
+      return state.driver === action.driver ? state : { ...state, driver: action.driver };
+    case "setLabel":
+      return state.label === action.label ? state : { ...state, label: action.label };
+    case "setAccentColor":
+      return state.accentColor === action.accentColor
+        ? state
+        : { ...state, accentColor: action.accentColor };
+    case "setManualInstanceId":
+      return state.manualInstanceId === action.instanceId && state.instanceIdDirty
+        ? state
+        : { ...state, manualInstanceId: action.instanceId, instanceIdDirty: true };
+    case "setConfigDraft": {
+      const next = { ...state.configByDriver };
+      if (action.config === undefined || Object.keys(action.config).length === 0) {
+        delete next[action.driver];
+      } else {
+        next[action.driver] = action.config;
+      }
+      return { ...state, configByDriver: next };
+    }
+    case "markAttemptedSubmit":
+      return state.hasAttemptedSubmit ? state : { ...state, hasAttemptedSubmit: true };
+  }
+}
+
 export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderInstanceDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {open ? <AddProviderInstanceDialogContent onOpenChange={onOpenChange} /> : null}
+    </Dialog>
+  );
+}
+
+function AddProviderInstanceDialogContent({
+  onOpenChange,
+}: Pick<AddProviderInstanceDialogProps, "onOpenChange">) {
   const settings = useSettings();
   const { updateSettings } = useUpdateSettings();
-
-  const [wizardStep, setWizardStep] = useState(0);
-  const [driver, setDriver] = useState<ProviderDriverKind>(DEFAULT_DRIVER_KIND);
-  const [label, setLabel] = useState("");
-  const [accentColor, setAccentColor] = useState<string>("");
-  const [instanceId, setInstanceId] = useState("");
-  const [instanceIdDirty, setInstanceIdDirty] = useState(false);
-  // Driver-specific config drafts keyed by driver so toggling between drivers
-  // during the same dialog session does not lose in-progress input.
-  const [configByDriver, setConfigByDriver] = useState<Record<string, Record<string, unknown>>>({});
-  // Errors are suppressed until the user has tried to submit once. After that
-  // they update live so fixing the problem clears the message in place.
-  const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false);
+  const [draft, dispatch] = useReducer(
+    addProviderInstanceDraftReducer,
+    undefined,
+    createInitialAddProviderInstanceDraftState,
+  );
+  const {
+    wizardStep,
+    driver,
+    label,
+    accentColor,
+    manualInstanceId,
+    instanceIdDirty,
+    configByDriver,
+    hasAttemptedSubmit,
+  } = draft;
 
   const existingIds = useMemo(
     () => new Set(Object.keys(settings.providerInstances ?? {})),
     [settings.providerInstances],
   );
 
-  // Reset the form every time the dialog opens so each creation starts
-  // from a clean slate.
-  useEffect(() => {
-    if (!open) return;
-    setDriver(DEFAULT_DRIVER_KIND);
-    setLabel("");
-    setAccentColor("");
-    setInstanceId("");
-    setWizardStep(0);
-    setInstanceIdDirty(false);
-    setConfigByDriver({});
-    setHasAttemptedSubmit(false);
-  }, [open]);
-
-  // Auto-derive the instance id from driver + label until the user types
-  // in the Instance ID field directly (after which they own its value).
-  useEffect(() => {
-    if (instanceIdDirty) return;
-    setInstanceId(deriveInstanceId(driver, label));
-  }, [driver, label, instanceIdDirty]);
-
   const driverOption = DRIVER_OPTION_BY_VALUE[driver] ?? DEFAULT_DRIVER_OPTION;
   const driverSettingsFields = useMemo(
     () => deriveProviderSettingsFields(driverOption),
     [driverOption],
   );
+  const derivedInstanceId = deriveInstanceId(driver, label);
+  const instanceId = instanceIdDirty ? manualInstanceId : derivedInstanceId;
   const instanceIdError = validateInstanceId(instanceId, existingIds);
   const showInstanceIdError = hasAttemptedSubmit && instanceIdError !== null;
   const previewLabel = label.trim() || `${driverOption.label} Workspace`;
-  const wizardSteps = ["Driver", "Identity", "Config"] as const;
   const wizardStepSummaries = [driverOption.label, previewLabel, null] as const;
 
   const configDraft = configByDriver[driver] ?? EMPTY_CONFIG_DRAFT;
   const setConfigDraft = useCallback(
     (config: Record<string, unknown> | undefined) => {
-      setConfigByDriver((existing) => {
-        const next = { ...existing };
-        if (config === undefined || Object.keys(config).length === 0) {
-          delete next[driver];
-        } else {
-          next[driver] = config;
-        }
-        return next;
-      });
+      dispatch({ type: "setConfigDraft", driver, config });
     },
     [driver],
   );
 
   const handleSave = useCallback(() => {
-    setHasAttemptedSubmit(true);
+    dispatch({ type: "markAttemptedSubmit" });
     if (instanceIdError !== null) return;
 
     const config = configByDriver[driver] ?? {};
@@ -236,256 +291,392 @@ export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderIns
   ]);
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogPopup className="max-w-xl overflow-hidden">
-        <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-background shadow-2xl">
-          <DialogHeader className="border-b border-border/70 bg-background">
-            <DialogTitle>Add provider instance</DialogTitle>
-            <DialogDescription>
-              Configure an additional provider instance — for example, a second Codex install
-              pointed at a different workspace.
-            </DialogDescription>
-            <div className="grid grid-cols-3 gap-2">
-              {wizardSteps.map((step, index) => (
+    <DialogPopup className="max-w-xl overflow-hidden">
+      <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-background shadow-2xl">
+        <AddProviderInstanceDialogHeader
+          wizardStep={wizardStep}
+          wizardStepSummaries={wizardStepSummaries}
+          onStepSelect={(step) => dispatch({ type: "setWizardStep", step })}
+        />
+        <AddProviderInstanceDialogPanel
+          wizardStep={wizardStep}
+          driver={driver}
+          driverOption={driverOption}
+          driverSettingsFields={driverSettingsFields}
+          label={label}
+          onLabelChange={(nextLabel) => dispatch({ type: "setLabel", label: nextLabel })}
+          instanceId={instanceId}
+          instanceIdError={instanceIdError}
+          showInstanceIdError={showInstanceIdError}
+          onInstanceIdChange={(nextInstanceId) =>
+            dispatch({ type: "setManualInstanceId", instanceId: nextInstanceId })
+          }
+          accentColor={accentColor}
+          onAccentColorChange={(nextAccentColor) =>
+            dispatch({ type: "setAccentColor", accentColor: nextAccentColor })
+          }
+          onDriverChange={(nextDriver) => dispatch({ type: "setDriver", driver: nextDriver })}
+          configDraft={configDraft}
+          onConfigDraftChange={setConfigDraft}
+        />
+        <AddProviderInstanceDialogFooter
+          wizardStep={wizardStep}
+          onBack={() => {
+            if (wizardStep === 0) {
+              onOpenChange(false);
+              return;
+            }
+            dispatch({ type: "setWizardStep", step: Math.max(0, wizardStep - 1) });
+          }}
+          onNext={() =>
+            dispatch({
+              type: "setWizardStep",
+              step: Math.min(WIZARD_STEPS.length - 1, wizardStep + 1),
+            })
+          }
+          onSave={handleSave}
+        />
+      </div>
+    </DialogPopup>
+  );
+}
+
+function AddProviderInstanceDialogHeader(props: {
+  wizardStep: number;
+  wizardStepSummaries: readonly (string | null)[];
+  onStepSelect: (step: number) => void;
+}) {
+  return (
+    <DialogHeader className="border-b border-border/70 bg-background">
+      <DialogTitle>Add provider instance</DialogTitle>
+      <DialogDescription>
+        Configure an additional provider instance — for example, a second Codex install pointed at a
+        different workspace.
+      </DialogDescription>
+      <div className="grid grid-cols-3 gap-2">
+        {WIZARD_STEPS.map((step, index) => (
+          <button
+            key={step}
+            type="button"
+            className={cn(
+              "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",
+              index === props.wizardStep
+                ? "border-primary bg-primary/10 ring-1 ring-primary/25"
+                : index < props.wizardStep
+                  ? "border-border bg-background"
+                  : "border-border bg-muted/40",
+            )}
+            onClick={() => props.onStepSelect(index)}
+          >
+            <span
+              className={cn(
+                "row-span-2 mt-0.5 grid size-4 place-items-center rounded-full border",
+                index < props.wizardStep
+                  ? "border-primary bg-primary text-primary-foreground"
+                  : index === props.wizardStep
+                    ? "border-primary bg-background"
+                    : "border-muted-foreground/35 bg-background",
+              )}
+              aria-hidden
+            >
+              {index < props.wizardStep ? <CheckIcon className="size-3" /> : null}
+            </span>
+            <span className="text-[10px] font-medium uppercase text-muted-foreground">
+              Step {index + 1}
+            </span>
+            <span className="truncate text-xs font-semibold text-foreground">
+              {step}
+              {index < props.wizardStep && props.wizardStepSummaries[index]
+                ? `: ${props.wizardStepSummaries[index]}`
+                : ""}
+            </span>
+          </button>
+        ))}
+      </div>
+    </DialogHeader>
+  );
+}
+
+function AddProviderInstanceDialogPanel(props: {
+  wizardStep: number;
+  driver: ProviderDriverKind;
+  driverOption: typeof DEFAULT_DRIVER_OPTION;
+  driverSettingsFields: ReturnType<typeof deriveProviderSettingsFields>;
+  label: string;
+  onLabelChange: (label: string) => void;
+  instanceId: string;
+  instanceIdError: string | null;
+  showInstanceIdError: boolean;
+  onInstanceIdChange: (instanceId: string) => void;
+  accentColor: string;
+  onAccentColorChange: (accentColor: string) => void;
+  onDriverChange: (driver: ProviderDriverKind) => void;
+  configDraft: Record<string, unknown>;
+  onConfigDraftChange: (config: Record<string, unknown> | undefined) => void;
+}) {
+  return (
+    <div
+      data-slot="dialog-panel"
+      className="space-y-4 border-b border-border/70 bg-muted/20 px-6 py-5"
+    >
+      <AnimatedHeight>
+        <AddProviderInstanceDriverStep
+          active={props.wizardStep === 0}
+          driver={props.driver}
+          onDriverChange={props.onDriverChange}
+        />
+        <AddProviderInstanceIdentityStep
+          active={props.wizardStep === 1}
+          driver={props.driver}
+          label={props.label}
+          onLabelChange={props.onLabelChange}
+          instanceId={props.instanceId}
+          instanceIdError={props.instanceIdError}
+          showInstanceIdError={props.showInstanceIdError}
+          onInstanceIdChange={props.onInstanceIdChange}
+          accentColor={props.accentColor}
+          onAccentColorChange={props.onAccentColorChange}
+        />
+        <AddProviderInstanceConfigStep
+          active={props.wizardStep === 2}
+          driver={props.driver}
+          driverOption={props.driverOption}
+          driverSettingsFields={props.driverSettingsFields}
+          configDraft={props.configDraft}
+          onConfigDraftChange={props.onConfigDraftChange}
+        />
+      </AnimatedHeight>
+    </div>
+  );
+}
+
+function AddProviderInstanceDriverStep(props: {
+  active: boolean;
+  driver: ProviderDriverKind;
+  onDriverChange: (driver: ProviderDriverKind) => void;
+}) {
+  return (
+    <div className={cn("grid gap-2", !props.active && "hidden")}>
+      <span id="add-instance-driver-label" className="text-xs font-medium text-foreground">
+        Driver
+      </span>
+      <RadioGroup
+        value={props.driver}
+        onValueChange={(value) => props.onDriverChange(ProviderDriverKind.make(value))}
+        aria-labelledby="add-instance-driver-label"
+        className="grid grid-cols-2 gap-2.5"
+      >
+        {DRIVER_OPTIONS.map((option) => {
+          const IconComponent = option.icon;
+          const isSelected = option.value === props.driver;
+          return (
+            <RadioPrimitive.Root
+              key={option.value}
+              value={option.value}
+              className={cn(
+                "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                isSelected
+                  ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"
+                  : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",
+              )}
+            >
+              <IconComponent className="size-5 shrink-0" aria-hidden />
+              <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+                {option.label}
+              </span>
+              {option.badgeLabel ? (
+                <Badge variant="warning" size="sm">
+                  {option.badgeLabel}
+                </Badge>
+              ) : null}
+            </RadioPrimitive.Root>
+          );
+        })}
+        {COMING_SOON_DRIVER_OPTIONS.map((option) => {
+          const IconComponent = option.icon;
+          return (
+            <RadioPrimitive.Root
+              key={option.value}
+              value={option.value}
+              disabled
+              className={cn(
+                "relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-55 outline-none",
+              )}
+            >
+              <IconComponent className="size-5 shrink-0 text-muted-foreground" aria-hidden />
+              <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+                {option.label}
+              </span>
+              <Badge variant="warning" size="sm">
+                Coming Soon
+              </Badge>
+            </RadioPrimitive.Root>
+          );
+        })}
+      </RadioGroup>
+    </div>
+  );
+}
+
+function AddProviderInstanceIdentityStep(props: {
+  active: boolean;
+  driver: ProviderDriverKind;
+  label: string;
+  onLabelChange: (label: string) => void;
+  instanceId: string;
+  instanceIdError: string | null;
+  showInstanceIdError: boolean;
+  onInstanceIdChange: (instanceId: string) => void;
+  accentColor: string;
+  onAccentColorChange: (accentColor: string) => void;
+}) {
+  return (
+    <>
+      <label
+        htmlFor="add-provider-instance-label"
+        className={cn("grid gap-2", !props.active && "hidden")}
+      >
+        <span className="text-xs font-medium text-foreground">Label</span>
+        <Input
+          id="add-provider-instance-label"
+          className="bg-background"
+          placeholder="e.g. Work"
+          value={props.label}
+          onChange={(event) => props.onLabelChange(event.target.value)}
+        />
+        <span className="text-[11px] text-muted-foreground">
+          Shown in the provider list. Optional.
+        </span>
+      </label>
+
+      <label
+        htmlFor="add-provider-instance-id"
+        className={cn("grid gap-2", !props.active && "hidden")}
+      >
+        <span className="text-xs font-medium text-foreground">Instance ID</span>
+        <Input
+          id="add-provider-instance-id"
+          className="bg-background"
+          placeholder={`${props.driver}_work`}
+          value={props.instanceId}
+          onChange={(event) => props.onInstanceIdChange(event.target.value)}
+          aria-invalid={props.showInstanceIdError}
+        />
+        {props.showInstanceIdError ? (
+          <span className="text-[11px] text-destructive">{props.instanceIdError}</span>
+        ) : (
+          <span className="text-[11px] text-muted-foreground">
+            Routing key used by threads and sessions. Letters, digits, '-', or '_'.
+          </span>
+        )}
+      </label>
+
+      <div className={cn("grid gap-2", !props.active && "hidden")}>
+        <span className="text-xs font-medium text-foreground">Accent color</span>
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          <input
+            type="color"
+            value={normalizeProviderAccentColor(props.accentColor) ?? PROVIDER_ACCENT_SWATCHES[0]}
+            onChange={(event) => props.onAccentColorChange(event.target.value)}
+            aria-label="Provider instance accent color"
+            className="h-8 w-10 cursor-pointer rounded-xl border border-input bg-background p-0.5"
+          />
+          <div className="flex flex-wrap gap-1.5">
+            {PROVIDER_ACCENT_SWATCHES.map((swatch) => {
+              const selected = props.accentColor.toLowerCase() === swatch;
+              return (
                 <button
-                  key={step}
+                  key={swatch}
                   type="button"
                   className={cn(
-                    "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",
-                    index === wizardStep
-                      ? "border-primary bg-primary/10 ring-1 ring-primary/25"
-                      : index < wizardStep
-                        ? "border-border bg-background"
-                        : "border-border bg-muted/40",
+                    "size-6 cursor-pointer rounded-full border transition",
+                    selected
+                      ? "scale-110 border-foreground ring-2 ring-ring ring-offset-1 ring-offset-background"
+                      : "border-black/10 hover:scale-105 dark:border-white/20",
                   )}
-                  onClick={() => setWizardStep(index)}
-                >
-                  <span
-                    className={cn(
-                      "row-span-2 mt-0.5 grid size-4 place-items-center rounded-full border",
-                      index < wizardStep
-                        ? "border-primary bg-primary text-primary-foreground"
-                        : index === wizardStep
-                          ? "border-primary bg-background"
-                          : "border-muted-foreground/35 bg-background",
-                    )}
-                    aria-hidden
-                  >
-                    {index < wizardStep ? <CheckIcon className="size-3" /> : null}
-                  </span>
-                  <span className="text-[10px] font-medium uppercase text-muted-foreground">
-                    Step {index + 1}
-                  </span>
-                  <span className="truncate text-xs font-semibold text-foreground">
-                    {step}
-                    {index < wizardStep && wizardStepSummaries[index]
-                      ? `: ${wizardStepSummaries[index]}`
-                      : ""}
-                  </span>
-                </button>
-              ))}
-            </div>
-          </DialogHeader>
-
-          <div
-            data-slot="dialog-panel"
-            className="space-y-4 border-b border-border/70 bg-muted/20 px-6 py-5"
-          >
-            <AnimatedHeight>
-              <div className={cn("grid gap-2", wizardStep !== 0 && "hidden")}>
-                <span
-                  id="add-instance-driver-label"
-                  className="text-xs font-medium text-foreground"
-                >
-                  Driver
-                </span>
-                <RadioGroup
-                  value={driver}
-                  onValueChange={(value) => setDriver(ProviderDriverKind.make(value))}
-                  aria-labelledby="add-instance-driver-label"
-                  className="grid grid-cols-2 gap-2.5"
-                >
-                  {DRIVER_OPTIONS.map((option) => {
-                    const IconComponent = option.icon;
-                    const isSelected = option.value === driver;
-                    return (
-                      <RadioPrimitive.Root
-                        key={option.value}
-                        value={option.value}
-                        className={cn(
-                          "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",
-                          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                          isSelected
-                            ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"
-                            : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",
-                        )}
-                      >
-                        <IconComponent className="size-5 shrink-0" aria-hidden />
-                        <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
-                          {option.label}
-                        </span>
-                        {option.badgeLabel ? (
-                          <Badge variant="warning" size="sm">
-                            {option.badgeLabel}
-                          </Badge>
-                        ) : null}
-                      </RadioPrimitive.Root>
-                    );
-                  })}
-                  {COMING_SOON_DRIVER_OPTIONS.map((option) => {
-                    const IconComponent = option.icon;
-                    return (
-                      <RadioPrimitive.Root
-                        key={option.value}
-                        value={option.value}
-                        disabled
-                        className={cn(
-                          "relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-55 outline-none",
-                        )}
-                      >
-                        <IconComponent
-                          className="size-5 shrink-0 text-muted-foreground"
-                          aria-hidden
-                        />
-                        <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
-                          {option.label}
-                        </span>
-                        <Badge variant="warning" size="sm">
-                          Coming Soon
-                        </Badge>
-                      </RadioPrimitive.Root>
-                    );
-                  })}
-                </RadioGroup>
-              </div>
-
-              <label className={cn("grid gap-2", wizardStep !== 1 && "hidden")}>
-                <span className="text-xs font-medium text-foreground">Label</span>
-                <Input
-                  className="bg-background"
-                  placeholder="e.g. Work"
-                  value={label}
-                  onChange={(event) => setLabel(event.target.value)}
+                  style={{ backgroundColor: swatch }}
+                  onClick={() => props.onAccentColorChange(swatch)}
+                  aria-label={`Use ${swatch} accent`}
                 />
-                <span className="text-[11px] text-muted-foreground">
-                  Shown in the provider list. Optional.
-                </span>
-              </label>
-
-              <label className={cn("grid gap-2", wizardStep !== 1 && "hidden")}>
-                <span className="text-xs font-medium text-foreground">Instance ID</span>
-                <Input
-                  className="bg-background"
-                  placeholder={`${driver}_work`}
-                  value={instanceId}
-                  onChange={(event) => {
-                    setInstanceIdDirty(true);
-                    setInstanceId(event.target.value);
-                  }}
-                  aria-invalid={showInstanceIdError}
-                />
-                {showInstanceIdError ? (
-                  <span className="text-[11px] text-destructive">{instanceIdError}</span>
-                ) : (
-                  <span className="text-[11px] text-muted-foreground">
-                    Routing key used by threads and sessions. Letters, digits, '-', or '_'.
-                  </span>
-                )}
-              </label>
-
-              <div className={cn("grid gap-2", wizardStep !== 1 && "hidden")}>
-                <span className="text-xs font-medium text-foreground">Accent color</span>
-                <div className="flex min-w-0 flex-wrap items-center gap-2">
-                  <input
-                    type="color"
-                    value={normalizeProviderAccentColor(accentColor) ?? PROVIDER_ACCENT_SWATCHES[0]}
-                    onChange={(event) => setAccentColor(event.target.value)}
-                    aria-label="Provider instance accent color"
-                    className="h-8 w-10 cursor-pointer rounded-xl border border-input bg-background p-0.5"
-                  />
-                  <div className="flex flex-wrap gap-1.5">
-                    {PROVIDER_ACCENT_SWATCHES.map((swatch) => {
-                      const selected = accentColor.toLowerCase() === swatch;
-                      return (
-                        <button
-                          key={swatch}
-                          type="button"
-                          className={cn(
-                            "size-6 cursor-pointer rounded-full border transition",
-                            selected
-                              ? "scale-110 border-foreground ring-2 ring-ring ring-offset-1 ring-offset-background"
-                              : "border-black/10 hover:scale-105 dark:border-white/20",
-                          )}
-                          style={{ backgroundColor: swatch }}
-                          onClick={() => setAccentColor(swatch)}
-                          aria-label={`Use ${swatch} accent`}
-                        />
-                      );
-                    })}
-                  </div>
-                  {accentColor ? (
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="ghost"
-                      className="h-7 px-2 text-xs text-muted-foreground"
-                      onClick={() => setAccentColor("")}
-                    >
-                      Clear
-                    </Button>
-                  ) : null}
-                </div>
-                <span className="text-[11px] text-muted-foreground">
-                  Optional marker shown in the picker.
-                </span>
-              </div>
-
-              {driverSettingsFields.length > 0 ? (
-                <div className={cn("grid gap-4", wizardStep !== 2 && "hidden")}>
-                  <ProviderSettingsForm
-                    definition={driverOption}
-                    value={configDraft}
-                    idPrefix={`add-provider-${driver}`}
-                    variant="dialog"
-                    onChange={setConfigDraft}
-                  />
-                </div>
-              ) : wizardStep === 2 ? (
-                <div className="grid gap-2">
-                  <p className="text-sm text-muted-foreground">
-                    This driver has no required configuration. You can add the instance now.
-                  </p>
-                </div>
-              ) : null}
-            </AnimatedHeight>
+              );
+            })}
           </div>
-
-          <DialogFooter className="border-t bg-background">
+          {props.accentColor ? (
             <Button
-              variant="outline"
+              type="button"
               size="sm"
-              onClick={() => {
-                if (wizardStep === 0) {
-                  onOpenChange(false);
-                  return;
-                }
-                setWizardStep((step) => Math.max(0, step - 1));
-              }}
+              variant="ghost"
+              className="h-7 px-2 text-xs text-muted-foreground"
+              onClick={() => props.onAccentColorChange("")}
             >
-              {wizardStep === 0 ? "Cancel" : "Back"}
+              Clear
             </Button>
-            {wizardStep < wizardSteps.length - 1 ? (
-              <Button size="sm" onClick={() => setWizardStep((step) => Math.min(2, step + 1))}>
-                Next
-              </Button>
-            ) : (
-              <Button size="sm" onClick={handleSave}>
-                Add instance
-              </Button>
-            )}
-          </DialogFooter>
+          ) : null}
         </div>
-      </DialogPopup>
-    </Dialog>
+        <span className="text-[11px] text-muted-foreground">
+          Optional marker shown in the picker.
+        </span>
+      </div>
+    </>
+  );
+}
+
+function AddProviderInstanceConfigStep(props: {
+  active: boolean;
+  driver: ProviderDriverKind;
+  driverOption: typeof DEFAULT_DRIVER_OPTION;
+  driverSettingsFields: ReturnType<typeof deriveProviderSettingsFields>;
+  configDraft: Record<string, unknown>;
+  onConfigDraftChange: (config: Record<string, unknown> | undefined) => void;
+}) {
+  if (props.driverSettingsFields.length > 0) {
+    return (
+      <div className={cn("grid gap-4", !props.active && "hidden")}>
+        <ProviderSettingsForm
+          definition={props.driverOption}
+          value={props.configDraft}
+          idPrefix={`add-provider-${props.driver}`}
+          variant="dialog"
+          onChange={props.onConfigDraftChange}
+        />
+      </div>
+    );
+  }
+
+  if (!props.active) {
+    return null;
+  }
+
+  return (
+    <div className="grid gap-2">
+      <p className="text-sm text-muted-foreground">
+        This driver has no required configuration. You can add the instance now.
+      </p>
+    </div>
+  );
+}
+
+function AddProviderInstanceDialogFooter(props: {
+  wizardStep: number;
+  onBack: () => void;
+  onNext: () => void;
+  onSave: () => void;
+}) {
+  return (
+    <DialogFooter className="border-t bg-background">
+      <Button variant="outline" size="sm" onClick={props.onBack}>
+        {props.wizardStep === 0 ? "Cancel" : "Back"}
+      </Button>
+      {props.wizardStep < WIZARD_STEPS.length - 1 ? (
+        <Button size="sm" onClick={props.onNext}>
+          Next
+        </Button>
+      ) : (
+        <Button size="sm" onClick={props.onSave}>
+          Add instance
+        </Button>
+      )}
+    </DialogFooter>
   );
 }