From 0b38a70311940a36c05f58188cae7fc8665e0be5 Mon Sep 17 00:00:00 2001
From: shankar-gpio <shankar@goplasmatic.io>
Date: Fri, 29 May 2026 11:17:51 +0530
Subject: [PATCH] Phase 3: structured config editors, guided import, rollout &
 version compare
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make authoring & governance first-class (proposal.md §5.3/5.4/5.5):

- Shared primitives: accessible Dialog (focus-trap, Esc, scroll-lock),
  Slider, Switch, and config-field form helpers.
- Channel config editor: structured sections for the known ChannelConfig
  shape (rate limit, backpressure, timeout, CORS, cache, dedup, tracing) with
  a read-only DataLogicEditor for validation_logic and a synced Advanced(JSON)
  fallback; replaces the raw textarea in channel-form.
- Connector config editor: schema-agnostic field editor switched by type with
  "leave unchanged" masked-secret handling so a save never clobbers a stored
  secret; replaces the raw textarea + checkbox in connector-form.
- Rollout control: 0-100% slider on active workflows wired to the existing
  useSetWorkflowRollout, plus one-click rollback.
- Version compare: line-based diff of two workflow versions in the Versions tab.
- Guided workflow import wizard: paste -> validate -> import-as-draft ->
  dry-run -> activate w/ rollout, hosted in the new Dialog; adds the missing
  Import button and useImportWorkflows/useValidateWorkflow hooks.
- Refactor ImportDialog onto the accessible Dialog primitive.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../shared/channel-config-editor.tsx          | 286 ++++++++++++
 src/components/shared/config-field.tsx        | 192 ++++++++
 .../shared/connector-config-editor.tsx        | 310 +++++++++++++
 src/components/shared/import-dialog.tsx       |  40 +-
 src/components/shared/rollout-control.tsx     |  72 +++
 src/components/shared/version-compare.tsx     | 137 ++++++
 .../shared/workflow-import-wizard.tsx         | 429 ++++++++++++++++++
 src/components/ui/dialog.tsx                  | 114 +++++
 src/components/ui/slider.tsx                  |  50 ++
 src/components/ui/switch.tsx                  |  49 ++
 src/hooks/use-workflows.ts                    |  20 +
 src/pages/channel-form.tsx                    |  27 +-
 src/pages/connector-form.tsx                  |  54 +--
 src/pages/workflow-detail.tsx                 |  26 +-
 src/pages/workflows.tsx                       |  13 +-
 15 files changed, 1727 insertions(+), 92 deletions(-)
 create mode 100644 src/components/shared/channel-config-editor.tsx
 create mode 100644 src/components/shared/config-field.tsx
 create mode 100644 src/components/shared/connector-config-editor.tsx
 create mode 100644 src/components/shared/rollout-control.tsx
 create mode 100644 src/components/shared/version-compare.tsx
 create mode 100644 src/components/shared/workflow-import-wizard.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/slider.tsx
 create mode 100644 src/components/ui/switch.tsx

diff --git a/src/components/shared/channel-config-editor.tsx b/src/components/shared/channel-config-editor.tsx
new file mode 100644
index 0000000..2afe11b
--- /dev/null
+++ b/src/components/shared/channel-config-editor.tsx
@@ -0,0 +1,286 @@
+import { useState } from "react"
+import { DataLogicEditor } from "@goplasmatic/datalogic-ui"
+import type { ChannelConfig } from "@/api/types"
+import { useTheme } from "@/lib/use-theme"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  ConfigSection,
+  NumberField,
+  TextField,
+  SelectField,
+  ToggleField,
+  StringListField,
+} from "@/components/shared/config-field"
+import { Braces, SlidersHorizontal } from "lucide-react"
+
+interface ChannelConfigEditorProps {
+  value: ChannelConfig
+  onChange: (next: ChannelConfig) => void
+}
+
+const TRACING_MODES = [
+  { value: "sync", label: "Sync" },
+  { value: "async", label: "Async" },
+  { value: "batch", label: "Batch" },
+  { value: "off", label: "Off" },
+]
+
+/**
+ * Structured editor for the well-known ChannelConfig shape, with an "Advanced
+ * (JSON)" escape hatch. The ChannelConfig object held by the parent form is the
+ * single source of truth; the JSON view edits the same object and syncs back on
+ * every valid parse. Empty sub-objects are pruned so unset config keys stay unset.
+ */
+export function ChannelConfigEditor({ value, onChange }: ChannelConfigEditorProps) {
+  const { resolvedTheme } = useTheme()
+  const [mode, setMode] = useState<"form" | "json">("form")
+  const [jsonText, setJsonText] = useState("")
+  const [jsonError, setJsonError] = useState<string | null>(null)
+
+  const setTop = <K extends keyof ChannelConfig>(key: K, val: ChannelConfig[K] | undefined) => {
+    const next = { ...value }
+    if (val === undefined) delete next[key]
+    else next[key] = val
+    onChange(next)
+  }
+
+  const setSub = <K extends keyof ChannelConfig>(key: K, field: string, val: unknown) => {
+    const current = (value[key] ?? {}) as Record<string, unknown>
+    const sub: Record<string, unknown> = { ...current }
+    if (val === undefined) delete sub[field]
+    else sub[field] = val
+    const next = { ...value }
+    if (Object.keys(sub).length === 0) delete next[key]
+    else next[key] = sub as ChannelConfig[K]
+    onChange(next)
+  }
+
+  const openJson = () => {
+    setJsonText(JSON.stringify(value, null, 2))
+    setJsonError(null)
+    setMode("json")
+  }
+
+  const onJsonChange = (text: string) => {
+    setJsonText(text)
+    try {
+      const parsed = JSON.parse(text)
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        setJsonError("Config must be a JSON object")
+        return
+      }
+      setJsonError(null)
+      onChange(parsed as ChannelConfig)
+    } catch {
+      setJsonError("Invalid JSON")
+    }
+  }
+
+  const rateLimit = value.rate_limit ?? {}
+  const backpressure = value.backpressure ?? {}
+  const cors = value.cors ?? {}
+  const cache = value.cache ?? {}
+  const dedup = value.deduplication ?? {}
+  const tracing = value.tracing ?? {}
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium">Configuration</label>
+        <div className="flex gap-1 rounded-md border p-0.5">
+          <Button
+            type="button"
+            variant={mode === "form" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => setMode("form")}
+          >
+            <SlidersHorizontal className="h-3.5 w-3.5" /> Form
+          </Button>
+          <Button
+            type="button"
+            variant={mode === "json" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={openJson}
+          >
+            <Braces className="h-3.5 w-3.5" /> Advanced (JSON)
+          </Button>
+        </div>
+      </div>
+
+      {mode === "json" ? (
+        <div>
+          <Textarea
+            value={jsonText}
+            onChange={(e) => onJsonChange(e.target.value)}
+            rows={16}
+            className="font-mono text-sm"
+          />
+          {jsonError && <p className="mt-1 text-xs text-destructive">{jsonError}</p>}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <ConfigSection title="Rate limiting" description="Throttle inbound requests.">
+            <div className="grid grid-cols-2 gap-4">
+              <NumberField
+                label="Requests / second"
+                unit="req/s"
+                value={rateLimit.requests_per_second}
+                onChange={(v) => setSub("rate_limit", "requests_per_second", v)}
+              />
+              <NumberField
+                label="Burst"
+                value={rateLimit.burst}
+                onChange={(v) => setSub("rate_limit", "burst", v)}
+              />
+            </div>
+          </ConfigSection>
+
+          <ConfigSection title="Backpressure" description="Bound in-flight and queued work.">
+            <div className="grid grid-cols-2 gap-4">
+              <NumberField
+                label="Max concurrent"
+                value={backpressure.max_concurrent}
+                onChange={(v) => setSub("backpressure", "max_concurrent", v)}
+              />
+              <NumberField
+                label="Queue depth"
+                value={backpressure.queue_depth}
+                onChange={(v) => setSub("backpressure", "queue_depth", v)}
+              />
+            </div>
+          </ConfigSection>
+
+          <ConfigSection title="Timeout">
+            <NumberField
+              label="Request timeout"
+              unit="ms"
+              value={value.timeout_ms}
+              onChange={(v) => setTop("timeout_ms", v)}
+            />
+          </ConfigSection>
+
+          <ConfigSection title="CORS">
+            <StringListField
+              label="Allowed origins"
+              value={cors.allowed_origins}
+              onChange={(v) => setSub("cors", "allowed_origins", v)}
+              placeholder="https://app.example.com, *"
+            />
+            <StringListField
+              label="Allowed methods"
+              value={cors.allowed_methods}
+              onChange={(v) => setSub("cors", "allowed_methods", v)}
+              placeholder="GET, POST"
+            />
+            <StringListField
+              label="Allowed headers"
+              value={cors.allowed_headers}
+              onChange={(v) => setSub("cors", "allowed_headers", v)}
+              placeholder="Content-Type, Authorization"
+            />
+          </ConfigSection>
+
+          <ConfigSection title="Cache" description="Cache responses through a connector.">
+            <ToggleField
+              label="Enabled"
+              checked={cache.enabled ?? false}
+              onCheckedChange={(c) => setSub("cache", "enabled", c || undefined)}
+            />
+            <div className="grid grid-cols-2 gap-4">
+              <NumberField
+                label="TTL"
+                unit="secs"
+                value={cache.ttl_secs}
+                onChange={(v) => setSub("cache", "ttl_secs", v)}
+              />
+              <TextField
+                label="Connector"
+                value={cache.connector}
+                onChange={(v) => setSub("cache", "connector", v)}
+                placeholder="idempotency-cache"
+              />
+            </div>
+            <StringListField
+              label="Cache key fields"
+              value={cache.cache_key_fields}
+              onChange={(v) => setSub("cache", "cache_key_fields", v)}
+              placeholder="user_id, amount"
+            />
+          </ConfigSection>
+
+          <ConfigSection title="Deduplication">
+            <div className="grid grid-cols-2 gap-4">
+              <TextField
+                label="Header"
+                value={dedup.header}
+                onChange={(v) => setSub("deduplication", "header", v)}
+                placeholder="Idempotency-Key"
+              />
+              <NumberField
+                label="Window"
+                unit="secs"
+                value={dedup.window_secs}
+                onChange={(v) => setSub("deduplication", "window_secs", v)}
+              />
+            </div>
+            <TextField
+              label="Connector"
+              value={dedup.connector}
+              onChange={(v) => setSub("deduplication", "connector", v)}
+              placeholder="idempotency-cache"
+            />
+          </ConfigSection>
+
+          <ConfigSection title="Tracing" description="Per-channel trace capture.">
+            <SelectField
+              label="Mode"
+              value={tracing.mode}
+              onChange={(v) => setSub("tracing", "mode", v)}
+              options={TRACING_MODES}
+              includeEmpty="Default"
+            />
+            <NumberField
+              label="Sample rate"
+              value={tracing.sample_rate}
+              onChange={(v) => setSub("tracing", "sample_rate", v)}
+              placeholder="0.0 – 1.0"
+              min={0}
+              max={1}
+              step={0.05}
+            />
+            <ToggleField
+              label="Errors only"
+              description="Only persist traces for failed requests."
+              checked={tracing.errors_only ?? false}
+              onCheckedChange={(c) => setSub("tracing", "errors_only", c || undefined)}
+            />
+            <ToggleField
+              label="Task details"
+              description="Capture the per-task execution trace."
+              checked={tracing.task_details ?? false}
+              onCheckedChange={(c) => setSub("tracing", "task_details", c || undefined)}
+            />
+          </ConfigSection>
+
+          <ConfigSection
+            title="Validation logic"
+            description="Read-only view of the channel's JSONLogic validation rule. Edit via the Advanced (JSON) tab."
+          >
+            {value.validation_logic !== undefined && value.validation_logic !== null ? (
+              <div className="h-64 overflow-hidden rounded-md border">
+                <DataLogicEditor
+                  value={value.validation_logic}
+                  editable={false}
+                  theme={resolvedTheme}
+                />
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">No validation logic configured.</p>
+            )}
+          </ConfigSection>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/shared/config-field.tsx b/src/components/shared/config-field.tsx
new file mode 100644
index 0000000..3cc54ab
--- /dev/null
+++ b/src/components/shared/config-field.tsx
@@ -0,0 +1,192 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { Select } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+
+/** A titled group of related config fields. */
+export function ConfigSection({
+  title,
+  description,
+  children,
+  className,
+}: {
+  title: string
+  description?: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={cn("space-y-3 rounded-lg border p-4", className)}>
+      <div>
+        <h4 className="text-sm font-semibold">{title}</h4>
+        {description && <p className="text-xs text-muted-foreground">{description}</p>}
+      </div>
+      <div className="space-y-3">{children}</div>
+    </section>
+  )
+}
+
+function FieldLabel({ label, htmlFor }: { label: string; htmlFor?: string }) {
+  return (
+    <label htmlFor={htmlFor} className="mb-1 block text-sm font-medium">
+      {label}
+    </label>
+  )
+}
+
+/** Numeric field; empty input maps to `undefined` so optional config keys stay unset. */
+export function NumberField({
+  label,
+  value,
+  onChange,
+  unit,
+  placeholder,
+  min,
+  max,
+  step,
+}: {
+  label: string
+  value: number | undefined
+  onChange: (value: number | undefined) => void
+  unit?: string
+  placeholder?: string
+  min?: number
+  max?: number
+  step?: number
+}) {
+  return (
+    <div>
+      <FieldLabel label={label} />
+      <div className="flex items-center gap-2">
+        <Input
+          type="number"
+          value={value ?? ""}
+          min={min}
+          max={max}
+          step={step}
+          placeholder={placeholder}
+          onChange={(e) => {
+            const v = e.target.value
+            onChange(v === "" ? undefined : Number(v))
+          }}
+        />
+        {unit && <span className="shrink-0 text-xs text-muted-foreground">{unit}</span>}
+      </div>
+    </div>
+  )
+}
+
+/** Free-text field; empty input maps to `undefined`. */
+export function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+}: {
+  label: string
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  placeholder?: string
+}) {
+  return (
+    <div>
+      <FieldLabel label={label} />
+      <Input
+        value={value ?? ""}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+      />
+    </div>
+  )
+}
+
+/** Select bound to a string option list; empty value maps to `undefined`. */
+export function SelectField({
+  label,
+  value,
+  onChange,
+  options,
+  includeEmpty,
+}: {
+  label: string
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  options: { value: string; label: string }[]
+  includeEmpty?: string
+}) {
+  return (
+    <div>
+      <FieldLabel label={label} />
+      <Select
+        value={value ?? ""}
+        onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
+      >
+        {includeEmpty !== undefined && <option value="">{includeEmpty}</option>}
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </Select>
+    </div>
+  )
+}
+
+/** Inline label + Switch row with an optional helper description. */
+export function ToggleField({
+  label,
+  description,
+  checked,
+  onCheckedChange,
+}: {
+  label: string
+  description?: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div>
+        <p className="text-sm font-medium">{label}</p>
+        {description && <p className="text-xs text-muted-foreground">{description}</p>}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} aria-label={label} />
+    </div>
+  )
+}
+
+/**
+ * Edits a `string[]` as a comma-separated text field; empty maps to `undefined`.
+ * Used for CORS lists, cache key fields, etc.
+ */
+export function StringListField({
+  label,
+  value,
+  onChange,
+  placeholder,
+}: {
+  label: string
+  value: string[] | undefined
+  onChange: (value: string[] | undefined) => void
+  placeholder?: string
+}) {
+  return (
+    <div>
+      <FieldLabel label={label} />
+      <Input
+        value={(value ?? []).join(", ")}
+        placeholder={placeholder}
+        onChange={(e) => {
+          const items = e.target.value
+            .split(",")
+            .map((s) => s.trim())
+            .filter(Boolean)
+          onChange(items.length > 0 ? items : undefined)
+        }}
+      />
+      <p className="mt-1 text-xs text-muted-foreground">Comma-separated</p>
+    </div>
+  )
+}
diff --git a/src/components/shared/connector-config-editor.tsx b/src/components/shared/connector-config-editor.tsx
new file mode 100644
index 0000000..dbfa9b0
--- /dev/null
+++ b/src/components/shared/connector-config-editor.tsx
@@ -0,0 +1,310 @@
+import { useRef, useState } from "react"
+import type { ConnectorType } from "@/api/types"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { Braces, KeyRound, Plus, SlidersHorizontal, Trash2 } from "lucide-react"
+
+type ConfigObject = Record<string, unknown>
+
+interface ConnectorConfigEditorProps {
+  connectorType: ConnectorType
+  value: ConfigObject
+  /** Server-masked values are passed through unchanged unless the user replaces them. */
+  onChange: (next: ConfigObject) => void
+}
+
+// Keys whose values are treated as secrets in the UI (password input + secret affordance).
+const SECRET_KEY_RE = /(pass|secret|token|key|credential)/i
+
+/** A server-masked secret looks like "***", "********", "[MASKED]", "<redacted>", etc. */
+function isMaskedSecret(v: unknown): v is string {
+  if (typeof v !== "string") return false
+  const t = v.trim()
+  return /^\*{3,}$/.test(t) || /masked|redacted/i.test(t)
+}
+
+const isSecretKey = (key: string) => SECRET_KEY_RE.test(key)
+
+/**
+ * Structured editor for a connector's config. The shape varies per connector type
+ * (http/db/kafka/cache/storage), so rather than hard-code field names that could
+ * drift from the backend, this renders the actual config keys with type-appropriate
+ * controls and an "Advanced (JSON)" escape hatch.
+ *
+ * Masked secrets returned by the server are shown in a "leave unchanged" state: the
+ * original masked value is preserved in the payload (the server keeps the stored
+ * secret) unless the operator explicitly chooses to replace it — so a save can never
+ * accidentally clobber a stored secret.
+ */
+export function ConnectorConfigEditor({ value, onChange, connectorType }: ConnectorConfigEditorProps) {
+  const [mode, setMode] = useState<"form" | "json">("form")
+  const [jsonText, setJsonText] = useState("")
+  const [jsonError, setJsonError] = useState<string | null>(null)
+  const [newKey, setNewKey] = useState("")
+  const [newType, setNewType] = useState<"string" | "number" | "boolean">("string")
+
+  const setKey = (key: string, val: unknown) => onChange({ ...value, [key]: val })
+  const removeKey = (key: string) => {
+    const next = { ...value }
+    delete next[key]
+    onChange(next)
+  }
+
+  const openJson = () => {
+    setJsonText(JSON.stringify(value, null, 2))
+    setJsonError(null)
+    setMode("json")
+  }
+
+  const onJsonChange = (text: string) => {
+    setJsonText(text)
+    try {
+      const parsed = JSON.parse(text)
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        setJsonError("Config must be a JSON object")
+        return
+      }
+      setJsonError(null)
+      onChange(parsed as ConfigObject)
+    } catch {
+      setJsonError("Invalid JSON")
+    }
+  }
+
+  const addField = () => {
+    const key = newKey.trim()
+    if (!key || key in value) return
+    const initial = newType === "string" ? "" : newType === "number" ? 0 : false
+    setKey(key, initial)
+    setNewKey("")
+  }
+
+  const entries = Object.entries(value)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium">
+          Configuration <span className="text-xs text-muted-foreground">({connectorType})</span>
+        </label>
+        <div className="flex gap-1 rounded-md border p-0.5">
+          <Button
+            type="button"
+            variant={mode === "form" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={() => setMode("form")}
+          >
+            <SlidersHorizontal className="h-3.5 w-3.5" /> Form
+          </Button>
+          <Button
+            type="button"
+            variant={mode === "json" ? "secondary" : "ghost"}
+            size="sm"
+            onClick={openJson}
+          >
+            <Braces className="h-3.5 w-3.5" /> Advanced (JSON)
+          </Button>
+        </div>
+      </div>
+
+      {mode === "json" ? (
+        <div>
+          <Textarea
+            value={jsonText}
+            onChange={(e) => onJsonChange(e.target.value)}
+            rows={16}
+            className="font-mono text-sm"
+          />
+          {jsonError && <p className="mt-1 text-xs text-destructive">{jsonError}</p>}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {entries.length === 0 && (
+            <p className="rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground">
+              No fields yet. Add the connector's settings below, or paste them via Advanced (JSON).
+            </p>
+          )}
+
+          {entries.map(([key, val]) => (
+            <ConfigRow
+              key={key}
+              name={key}
+              value={val}
+              onChange={(v) => setKey(key, v)}
+              onRemove={() => removeKey(key)}
+            />
+          ))}
+
+          <div className="flex items-end gap-2 rounded-md border border-dashed p-3">
+            <div className="flex-1">
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Field name</label>
+              <Input
+                value={newKey}
+                onChange={(e) => setNewKey(e.target.value)}
+                placeholder="host"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault()
+                    addField()
+                  }
+                }}
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Type</label>
+              <Select value={newType} onChange={(e) => setNewType(e.target.value as typeof newType)}>
+                <option value="string">Text</option>
+                <option value="number">Number</option>
+                <option value="boolean">Toggle</option>
+              </Select>
+            </div>
+            <Button type="button" variant="outline" onClick={addField} disabled={!newKey.trim()}>
+              <Plus className="h-4 w-4" /> Add
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** A single config field row; control type is inferred from the value (and key name for secrets). */
+function ConfigRow({
+  name,
+  value,
+  onChange,
+  onRemove,
+}: {
+  name: string
+  value: unknown
+  onChange: (value: unknown) => void
+  onRemove: () => void
+}) {
+  const label = (
+    <div className="flex items-center gap-1.5">
+      <span className="text-sm font-medium">{name}</span>
+      {(isSecretKey(name) || isMaskedSecret(value)) && (
+        <KeyRound className="h-3 w-3 text-muted-foreground" />
+      )}
+    </div>
+  )
+
+  let control: React.ReactNode
+  if (isMaskedSecret(value)) {
+    control = <SecretField masked={value} onReplace={onChange} />
+  } else if (typeof value === "boolean") {
+    control = <Switch checked={value} onCheckedChange={onChange} aria-label={name} />
+  } else if (typeof value === "number") {
+    control = (
+      <Input
+        type="number"
+        value={value}
+        onChange={(e) => onChange(e.target.value === "" ? 0 : Number(e.target.value))}
+      />
+    )
+  } else if (typeof value === "string") {
+    control = (
+      <Input
+        type={isSecretKey(name) ? "password" : "text"}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    )
+  } else {
+    // Objects / arrays: edit as a compact JSON block.
+    control = <NestedJsonField value={value} onChange={onChange} />
+  }
+
+  return (
+    <div className="flex items-start justify-between gap-3 rounded-md border p-3">
+      <div className="min-w-0 flex-1 space-y-1.5">
+        {label}
+        {control}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="text-muted-foreground hover:text-destructive"
+        onClick={onRemove}
+        aria-label={`Remove ${name}`}
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+/** Masked secret with an explicit replace flow; preserves the stored secret by default. */
+function SecretField({ masked, onReplace }: { masked: string; onReplace: (value: unknown) => void }) {
+  const original = useRef(masked)
+  const [replacing, setReplacing] = useState(false)
+
+  if (!replacing) {
+    return (
+      <div className="flex items-center gap-2">
+        <Input value={"•".repeat(8)} disabled className="font-mono" />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            setReplacing(true)
+            onReplace("")
+          }}
+        >
+          Replace
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <Input
+        type="password"
+        autoFocus
+        placeholder="Enter new secret"
+        onChange={(e) => onReplace(e.target.value)}
+      />
+      <button
+        type="button"
+        className="text-xs text-muted-foreground underline-offset-2 hover:underline"
+        onClick={() => {
+          setReplacing(false)
+          onReplace(original.current)
+        }}
+      >
+        Keep existing secret (leave unchanged)
+      </button>
+    </div>
+  )
+}
+
+/** Edits an object/array value as JSON; only propagates on a valid parse. */
+function NestedJsonField({ value, onChange }: { value: unknown; onChange: (value: unknown) => void }) {
+  const [text, setText] = useState(() => JSON.stringify(value, null, 2))
+  const [err, setErr] = useState<string | null>(null)
+  return (
+    <div>
+      <Textarea
+        value={text}
+        rows={4}
+        className="font-mono text-xs"
+        onChange={(e) => {
+          setText(e.target.value)
+          try {
+            onChange(JSON.parse(e.target.value))
+            setErr(null)
+          } catch {
+            setErr("Invalid JSON")
+          }
+        }}
+      />
+      {err && <p className="mt-1 text-xs text-destructive">{err}</p>}
+    </div>
+  )
+}
diff --git a/src/components/shared/import-dialog.tsx b/src/components/shared/import-dialog.tsx
index 3cec6d9..beab22a 100644
--- a/src/components/shared/import-dialog.tsx
+++ b/src/components/shared/import-dialog.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter } from "@/components/ui/dialog"
 import { Textarea } from "@/components/ui/textarea"
 import { Badge } from "@/components/ui/badge"
 import type { ImportResult } from "@/api/types"
@@ -43,12 +43,11 @@ export function ImportDialog({ title, onImport, onClose }: ImportDialogProps) {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-      <Card className="flex max-h-[90vh] w-full max-w-2xl flex-col">
-        <CardHeader>
-          <CardTitle>{title}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3 overflow-y-auto">
+    <Dialog open onClose={onClose} aria-label={title}>
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+      </DialogHeader>
+      <DialogBody>
           <p className="text-sm text-muted-foreground">
             Paste a JSON array of items. Validate runs a dry-run (no database writes,
             so name conflicts are not detected until you import).
@@ -97,19 +96,18 @@ export function ImportDialog({ title, onImport, onClose }: ImportDialogProps) {
               )}
             </div>
           )}
-        </CardContent>
-        <CardFooter className="justify-end gap-2">
-          <Button variant="outline" onClick={onClose} disabled={busy}>
-            Close
-          </Button>
-          <Button variant="outline" onClick={() => run(true)} disabled={busy}>
-            Validate
-          </Button>
-          <Button onClick={() => run(false)} disabled={busy}>
-            {busy ? "Working..." : "Import"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="outline" onClick={onClose} disabled={busy}>
+          Close
+        </Button>
+        <Button variant="outline" onClick={() => run(true)} disabled={busy}>
+          Validate
+        </Button>
+        <Button onClick={() => run(false)} disabled={busy}>
+          {busy ? "Working..." : "Import"}
+        </Button>
+      </DialogFooter>
+    </Dialog>
   )
 }
diff --git a/src/components/shared/rollout-control.tsx b/src/components/shared/rollout-control.tsx
new file mode 100644
index 0000000..9c60472
--- /dev/null
+++ b/src/components/shared/rollout-control.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react"
+import { useSetWorkflowRollout } from "@/hooks/use-workflows"
+import { Slider } from "@/components/ui/slider"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { RotateCcw } from "lucide-react"
+
+interface RolloutControlProps {
+  workflowId: string
+  current: number | null | undefined
+}
+
+/**
+ * Canary rollout control: a 0–100% slider + numeric input mapped onto the existing
+ * `useSetWorkflowRollout()` mutation (toast feedback is handled by the hook), with a
+ * one-click rollback to 0%.
+ */
+export function RolloutControl({ workflowId, current }: RolloutControlProps) {
+  const setRollout = useSetWorkflowRollout()
+  const initial = current ?? 0
+  const [value, setValue] = useState(initial)
+
+  const clamp = (n: number) => Math.max(0, Math.min(100, Math.round(n)))
+  const dirty = value !== initial
+
+  const apply = (next: number) =>
+    setRollout.mutate({ id: workflowId, req: { rollout_percentage: clamp(next) } })
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm">Canary rollout</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-4">
+          <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} className="flex-1" />
+          <div className="flex items-center gap-1">
+            <Input
+              type="number"
+              min={0}
+              max={100}
+              value={value}
+              onChange={(e) => setValue(clamp(Number(e.target.value)))}
+              className="w-20"
+            />
+            <span className="text-sm text-muted-foreground">%</span>
+          </div>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {value}% of matching traffic runs this workflow version.
+        </p>
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={() => apply(value)} disabled={!dirty || setRollout.isPending}>
+            {setRollout.isPending ? "Applying..." : "Apply"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              setValue(0)
+              apply(0)
+            }}
+            disabled={setRollout.isPending || (value === 0 && initial === 0)}
+          >
+            <RotateCcw className="h-3.5 w-3.5" /> Rollback to 0%
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/shared/version-compare.tsx b/src/components/shared/version-compare.tsx
new file mode 100644
index 0000000..86fd4ee
--- /dev/null
+++ b/src/components/shared/version-compare.tsx
@@ -0,0 +1,137 @@
+import { useMemo, useState } from "react"
+import type { PaginatedResponse, Workflow } from "@/api/types"
+import { Select } from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+interface VersionCompareProps {
+  versions?: PaginatedResponse<Workflow> | Workflow[]
+  isLoading?: boolean
+}
+
+type DiffLine = { type: "same" | "add" | "del"; text: string }
+
+/** Line-based LCS diff between two JSON snapshots. */
+function diffLines(a: string, b: string): DiffLine[] {
+  const left = a.split("\n")
+  const right = b.split("\n")
+  const n = left.length
+  const m = right.length
+  // LCS length table.
+  const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0))
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      lcs[i][j] = left[i] === right[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1])
+    }
+  }
+  const out: DiffLine[] = []
+  let i = 0
+  let j = 0
+  while (i < n && j < m) {
+    if (left[i] === right[j]) {
+      out.push({ type: "same", text: left[i] })
+      i++
+      j++
+    } else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+      out.push({ type: "del", text: left[i] })
+      i++
+    } else {
+      out.push({ type: "add", text: right[j] })
+      j++
+    }
+  }
+  while (i < n) out.push({ type: "del", text: left[i++] })
+  while (j < m) out.push({ type: "add", text: right[j++] })
+  return out
+}
+
+/** Stable JSON view of a version, excluding volatile/status fields that aren't part of the definition. */
+function definitionJson(wf: Workflow): string {
+  const { status: _s, created_at: _c, updated_at: _u, ...rest } = wf
+  void _s
+  void _c
+  void _u
+  return JSON.stringify(rest, null, 2)
+}
+
+/**
+ * Side-by-side(ish) compare of two workflow versions, rendered as a colored line
+ * diff of their definitions. Reuses the version list already loaded for the
+ * Versions tab — no extra fetch.
+ */
+export function VersionCompare({ versions, isLoading }: VersionCompareProps) {
+  const list = useMemo(
+    () => (Array.isArray(versions) ? versions : (versions?.data ?? [])),
+    [versions]
+  )
+  const sorted = useMemo(() => [...list].sort((a, b) => b.version - a.version), [list])
+
+  const [leftV, setLeftV] = useState<number | null>(null)
+  const [rightV, setRightV] = useState<number | null>(null)
+
+  // Default to the two most recent versions.
+  const lv = leftV ?? sorted[1]?.version ?? sorted[0]?.version ?? null
+  const rv = rightV ?? sorted[0]?.version ?? null
+
+  const left = sorted.find((w) => w.version === lv)
+  const right = sorted.find((w) => w.version === rv)
+
+  const diff = useMemo(() => {
+    if (!left || !right) return []
+    return diffLines(definitionJson(left), definitionJson(right))
+  }, [left, right])
+
+  if (isLoading) return <p className="text-sm text-muted-foreground">Loading versions…</p>
+  if (sorted.length < 2) {
+    return <p className="text-sm text-muted-foreground">Need at least two versions to compare.</p>
+  }
+
+  const changes = diff.filter((d) => d.type !== "same").length
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <div>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Base</label>
+          <Select value={lv ?? ""} onChange={(e) => setLeftV(Number(e.target.value))} className="w-32">
+            {sorted.map((w) => (
+              <option key={w.version} value={w.version}>
+                v{w.version}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Compare</label>
+          <Select value={rv ?? ""} onChange={(e) => setRightV(Number(e.target.value))} className="w-32">
+            {sorted.map((w) => (
+              <option key={w.version} value={w.version}>
+                v{w.version}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <span className="self-end text-sm text-muted-foreground">
+          {changes === 0 ? "No differences" : `${changes} changed line${changes !== 1 ? "s" : ""}`}
+        </span>
+      </div>
+
+      <pre className="max-h-[40rem] overflow-auto rounded-md border bg-muted/30 p-3 text-xs leading-relaxed">
+        {diff.map((d, i) => (
+          <div
+            key={i}
+            className={cn(
+              "whitespace-pre-wrap px-1 font-mono",
+              d.type === "add" && "bg-chart-2/15 text-chart-2",
+              d.type === "del" && "bg-destructive/15 text-destructive"
+            )}
+          >
+            <span className="select-none opacity-60">
+              {d.type === "add" ? "+ " : d.type === "del" ? "- " : "  "}
+            </span>
+            {d.text}
+          </div>
+        ))}
+      </pre>
+    </div>
+  )
+}
diff --git a/src/components/shared/workflow-import-wizard.tsx b/src/components/shared/workflow-import-wizard.tsx
new file mode 100644
index 0000000..f424aaf
--- /dev/null
+++ b/src/components/shared/workflow-import-wizard.tsx
@@ -0,0 +1,429 @@
+import { useMemo, useState } from "react"
+import { Link } from "react-router"
+import { DataLogicEditor } from "@goplasmatic/datalogic-ui"
+import {
+  useValidateWorkflow,
+  useImportWorkflows,
+  useTestWorkflow,
+  useChangeWorkflowStatus,
+  useSetWorkflowRollout,
+} from "@/hooks/use-workflows"
+import type { JsonLogicValue, ValidationResponse, WorkflowTestResponse } from "@/api/types"
+import { useTheme } from "@/lib/use-theme"
+import { Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Slider } from "@/components/ui/slider"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import { stepResultBadgeClass } from "@/lib/status"
+import { AlertCircle, CheckCircle2, Play } from "lucide-react"
+
+const STEPS = ["Paste", "Validate", "Import", "Dry run", "Activate"] as const
+type StepIndex = 0 | 1 | 2 | 3 | 4
+
+interface WorkflowImportWizardProps {
+  open: boolean
+  onClose: () => void
+}
+
+/**
+ * Guided workflow import: paste → validate → import (as draft) → dry-run → activate
+ * with a rollout %. The dry-run and activate steps target the definition's
+ * `workflow_id` (the test/status endpoints are id-scoped, and `import` returns only
+ * counts); if the pasted definition omits an id, those steps are skipped with a note.
+ */
+export function WorkflowImportWizard({ open, onClose }: WorkflowImportWizardProps) {
+  const { resolvedTheme } = useTheme()
+  const validate = useValidateWorkflow()
+  const importWorkflows = useImportWorkflows()
+  const testWorkflow = useTestWorkflow()
+  const changeStatus = useChangeWorkflowStatus()
+  const setRollout = useSetWorkflowRollout()
+
+  const [step, setStep] = useState<StepIndex>(0)
+  const [text, setText] = useState("")
+  const [parseError, setParseError] = useState<string | null>(null)
+  const [validation, setValidation] = useState<ValidationResponse | null>(null)
+  const [imported, setImported] = useState(false)
+
+  const [testPayload, setTestPayload] = useState("{\n  \n}")
+  const [testResult, setTestResult] = useState<WorkflowTestResponse | null>(null)
+  const [testError, setTestError] = useState<string | null>(null)
+
+  const [rollout, setRolloutValue] = useState(100)
+  const [activated, setActivated] = useState(false)
+
+  const parsed = useMemo(() => {
+    try {
+      const json = JSON.parse(text)
+      const items = Array.isArray(json) ? json : [json]
+      const primary =
+        items[0] && typeof items[0] === "object" && !Array.isArray(items[0])
+          ? (items[0] as Record<string, unknown>)
+          : null
+      return { items, primary }
+    } catch {
+      return null
+    }
+  }, [text])
+
+  const workflowId =
+    parsed?.primary && typeof parsed.primary.workflow_id === "string"
+      ? parsed.primary.workflow_id
+      : null
+  const condition = parsed?.primary?.condition as JsonLogicValue | undefined
+
+  const reset = () => {
+    setStep(0)
+    setText("")
+    setParseError(null)
+    setValidation(null)
+    setImported(false)
+    setTestResult(null)
+    setTestError(null)
+    setActivated(false)
+    setRolloutValue(100)
+  }
+
+  const close = () => {
+    reset()
+    onClose()
+  }
+
+  const goValidate = () => {
+    setParseError(null)
+    if (!parsed) {
+      setParseError("Invalid JSON")
+      return
+    }
+    if (!parsed.primary) {
+      setParseError("Expected a workflow object (or an array of them)")
+      return
+    }
+    validate.mutate(parsed.primary, {
+      onSuccess: (res) => {
+        setValidation(res)
+        setStep(1)
+      },
+      onError: () => setStep(1),
+    })
+  }
+
+  const doImport = () => {
+    if (!parsed) return
+    importWorkflows.mutate(
+      { items: parsed.items, dryRun: false },
+      {
+        onSuccess: (res) => {
+          if (res.imported > 0 || res.failed === 0) {
+            setImported(true)
+            setStep(3)
+          }
+        },
+      }
+    )
+  }
+
+  const runTest = () => {
+    if (!workflowId) return
+    setTestError(null)
+    setTestResult(null)
+    let data: Record<string, unknown>
+    try {
+      data = JSON.parse(testPayload)
+    } catch {
+      setTestError("Invalid JSON payload")
+      return
+    }
+    testWorkflow.mutate(
+      { id: workflowId, req: { data } },
+      {
+        onSuccess: setTestResult,
+        onError: (e) => setTestError(e instanceof Error ? e.message : "Test failed"),
+      }
+    )
+  }
+
+  const activate = () => {
+    if (!workflowId) return
+    changeStatus.mutate(
+      { id: workflowId, req: { status: "active" } },
+      {
+        onSuccess: () => {
+          setRollout.mutate({ id: workflowId, req: { rollout_percentage: rollout } })
+          setActivated(true)
+        },
+      }
+    )
+  }
+
+  return (
+    <Dialog open={open} onClose={close} className="max-w-3xl" aria-label="Import workflow">
+      <DialogHeader>
+        <DialogTitle>Import workflow</DialogTitle>
+        <ol className="mt-2 flex flex-wrap gap-2 text-xs">
+          {STEPS.map((label, i) => (
+            <li
+              key={label}
+              className={cn(
+                "flex items-center gap-1.5 rounded-full border px-2.5 py-1",
+                i === step
+                  ? "border-primary bg-primary/10 text-primary"
+                  : i < step
+                    ? "border-chart-2/40 text-chart-2"
+                    : "text-muted-foreground"
+              )}
+            >
+              <span className="font-mono">{i + 1}</span>
+              {label}
+            </li>
+          ))}
+        </ol>
+      </DialogHeader>
+
+      <DialogBody>
+        {step === 0 && (
+          <div className="space-y-2">
+            <p className="text-sm text-muted-foreground">
+              Paste a workflow definition (often AI-generated) as JSON. A single object or an
+              array is accepted.
+            </p>
+            <Textarea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              rows={16}
+              className="font-mono text-sm"
+              placeholder='{ "workflow_id": "my-workflow", "name": "My Workflow", "tasks": [] }'
+            />
+            {parseError && <p className="text-xs text-destructive">{parseError}</p>}
+          </div>
+        )}
+
+        {step === 1 && (
+          <div className="space-y-4">
+            {validation ? (
+              <div
+                className={cn(
+                  "flex items-center gap-2 rounded-md border p-3 text-sm",
+                  validation.valid
+                    ? "border-chart-2/40 text-chart-2"
+                    : "border-destructive/40 text-destructive"
+                )}
+              >
+                {validation.valid ? (
+                  <CheckCircle2 className="h-4 w-4" />
+                ) : (
+                  <AlertCircle className="h-4 w-4" />
+                )}
+                {validation.valid ? "Definition is valid" : "Definition has errors"}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">Validating…</p>
+            )}
+
+            {validation && validation.errors.length > 0 && (
+              <IssueList title="Errors" issues={validation.errors} tone="error" />
+            )}
+            {validation && validation.warnings.length > 0 && (
+              <IssueList title="Warnings" issues={validation.warnings} tone="warning" />
+            )}
+
+            {condition !== undefined && condition !== null && (
+              <div className="space-y-1.5">
+                <p className="text-sm font-medium">Trigger condition</p>
+                <div className="h-56 overflow-hidden rounded-md border">
+                  <DataLogicEditor value={condition} editable={false} theme={resolvedTheme} />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {step === 2 && (
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              Import the definition as a <strong>draft</strong>. It won't receive traffic until
+              you activate it.
+            </p>
+            {importWorkflows.data && (
+              <div className="flex flex-wrap gap-2 rounded-md border p-3 text-sm">
+                <Badge variant="outline" className="border-chart-2/40 text-chart-2">
+                  {importWorkflows.data.imported} imported
+                </Badge>
+                {importWorkflows.data.failed > 0 && (
+                  <Badge variant="destructive">{importWorkflows.data.failed} failed</Badge>
+                )}
+              </div>
+            )}
+            {importWorkflows.data?.errors?.length ? (
+              <ul className="space-y-1 text-xs">
+                {importWorkflows.data.errors.map((e) => (
+                  <li key={e.index} className="font-mono text-destructive">
+                    [{e.index}] {e.error}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        )}
+
+        {step === 3 && (
+          <div className="space-y-3">
+            {workflowId ? (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  Dry-run the imported draft <span className="font-mono">{workflowId}</span> against a
+                  sample payload (no side effects).
+                </p>
+                <Textarea
+                  value={testPayload}
+                  onChange={(e) => setTestPayload(e.target.value)}
+                  rows={8}
+                  className="font-mono text-sm"
+                />
+                <Button onClick={runTest} disabled={testWorkflow.isPending} variant="outline">
+                  <Play className="h-4 w-4" />
+                  {testWorkflow.isPending ? "Running…" : "Run dry-run"}
+                </Button>
+                {testError && <p className="text-xs text-destructive">{testError}</p>}
+                {testResult && (
+                  <div className="space-y-2 rounded-md border p-3">
+                    <Badge variant="outline" className={stepResultBadgeClass(testResult.matched ? "executed" : "skipped")}>
+                      {testResult.matched ? "Matched" : "No match"}
+                    </Badge>
+                    {testResult.trace?.steps?.map((s, i) => {
+                      const r = typeof s.result === "string" ? s.result.toLowerCase() : undefined
+                      return (
+                        <div key={i} className="flex items-center gap-2 text-sm">
+                          {r && (
+                            <Badge variant="outline" className={stepResultBadgeClass(r)}>
+                              {r}
+                            </Badge>
+                          )}
+                          <span>{s.task_name ?? s.task_id}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                The definition has no <span className="font-mono">workflow_id</span>, so the
+                dry-run step is skipped. You can dry-run it from the workflow's detail page after
+                import.
+              </p>
+            )}
+          </div>
+        )}
+
+        {step === 4 && (
+          <div className="space-y-4">
+            {activated ? (
+              <div className="flex items-center gap-2 rounded-md border border-chart-2/40 p-3 text-sm text-chart-2">
+                <CheckCircle2 className="h-4 w-4" /> Activated at {rollout}% rollout.
+              </div>
+            ) : workflowId ? (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  Activate the workflow and choose how much matching traffic it should receive.
+                </p>
+                <div className="flex items-center gap-4">
+                  <Slider value={rollout} onValueChange={setRolloutValue} className="flex-1" />
+                  <div className="flex items-center gap-1">
+                    <Input
+                      type="number"
+                      min={0}
+                      max={100}
+                      value={rollout}
+                      onChange={(e) =>
+                        setRolloutValue(Math.max(0, Math.min(100, Number(e.target.value))))
+                      }
+                      className="w-20"
+                    />
+                    <span className="text-sm text-muted-foreground">%</span>
+                  </div>
+                </div>
+                <Button onClick={activate} disabled={changeStatus.isPending}>
+                  {changeStatus.isPending ? "Activating…" : `Activate at ${rollout}%`}
+                </Button>
+              </>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                No <span className="font-mono">workflow_id</span> in the definition — activate it
+                from the workflow's detail page.
+              </p>
+            )}
+          </div>
+        )}
+      </DialogBody>
+
+      <DialogFooter>
+        <Button variant="outline" onClick={close}>
+          {activated ? "Done" : "Cancel"}
+        </Button>
+        {step > 0 && !activated && (
+          <Button variant="outline" onClick={() => setStep((s) => (s - 1) as StepIndex)}>
+            Back
+          </Button>
+        )}
+        {step === 0 && (
+          <Button onClick={goValidate} disabled={!text.trim() || validate.isPending}>
+            {validate.isPending ? "Validating…" : "Validate"}
+          </Button>
+        )}
+        {step === 1 && (
+          <Button onClick={() => setStep(2)} disabled={!!validation && !validation.valid}>
+            Next
+          </Button>
+        )}
+        {step === 2 &&
+          (imported ? (
+            <Button onClick={() => setStep(3)}>Next</Button>
+          ) : (
+            <Button onClick={doImport} disabled={importWorkflows.isPending}>
+              {importWorkflows.isPending ? "Importing…" : "Import as draft"}
+            </Button>
+          ))}
+        {step === 3 && (
+          <Button onClick={() => setStep(4)}>{workflowId ? "Next" : "Skip"}</Button>
+        )}
+        {step === 4 && activated && (
+          <Button asChild>
+            <Link to="/workflows" onClick={close}>
+              View workflows
+            </Link>
+          </Button>
+        )}
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+function IssueList({
+  title,
+  issues,
+  tone,
+}: {
+  title: string
+  issues: { field: string; message: string }[]
+  tone: "error" | "warning"
+}) {
+  return (
+    <div className="space-y-1.5">
+      <p className="text-sm font-medium">{title}</p>
+      <ul className="space-y-1 text-xs">
+        {issues.map((issue, i) => (
+          <li
+            key={i}
+            className={cn(tone === "error" ? "text-destructive" : "text-chart-3")}
+          >
+            <span className="font-mono">{issue.field || "—"}</span>: {issue.message}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..492c2c3
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+
+export interface DialogProps {
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+  className?: string
+  /** Accessible label for the dialog when no DialogTitle id is wired. */
+  "aria-label"?: string
+}
+
+/**
+ * Accessible modal: backdrop + centered panel, Esc-to-close, focus trap, and body
+ * scroll lock while open. Replaces the hand-rolled `fixed inset-0` overlays used
+ * before (e.g. ImportDialog). Compose with DialogHeader/Title/Body/Footer.
+ */
+export function Dialog({ open, onClose, children, className, ...props }: DialogProps) {
+  const panelRef = React.useRef<HTMLDivElement>(null)
+
+  // Lock body scroll while open.
+  React.useEffect(() => {
+    if (!open) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.body.style.overflow = prev
+    }
+  }, [open])
+
+  // Move focus into the panel on open.
+  React.useEffect(() => {
+    if (!open) return
+    const panel = panelRef.current
+    if (!panel) return
+    const first = panel.querySelector<HTMLElement>(FOCUSABLE)
+    ;(first ?? panel).focus()
+  }, [open])
+
+  if (!open) return null
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.stopPropagation()
+      onClose()
+      return
+    }
+    if (e.key !== "Tab") return
+    const panel = panelRef.current
+    if (!panel) return
+    const nodes = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
+      (n) => n.offsetParent !== null
+    )
+    if (nodes.length === 0) return
+    const first = nodes[0]
+    const last = nodes[nodes.length - 1]
+    const active = document.activeElement
+    if (e.shiftKey && active === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "flex max-h-[90vh] w-full max-w-2xl flex-col rounded-xl border bg-card text-card-foreground outline-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 border-b p-4", className)} {...props} />
+}
+
+export function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+}
+
+export function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+}
+
+export function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex-1 space-y-3 overflow-y-auto p-4", className)} {...props} />
+}
+
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex justify-end gap-2 border-t p-4", className)} {...props} />
+}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..2dd7945
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface SliderProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+}
+
+/**
+ * A single-thumb range slider built on a native <input type="range">, styled to
+ * match the design tokens. The filled portion of the track is driven by a CSS
+ * gradient computed from the current value so it reads correctly in both themes.
+ */
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, value, onValueChange, min = 0, max = 100, step = 1, ...props }, ref) => {
+    const pct = max === min ? 0 : ((value - min) / (max - min)) * 100
+    return (
+      <input
+        ref={ref}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onValueChange(Number(e.target.value))}
+        style={{
+          background: `linear-gradient(to right, var(--primary) 0%, var(--primary) ${pct}%, var(--muted) ${pct}%, var(--muted) 100%)`,
+        }}
+        className={cn(
+          "h-2 w-full cursor-pointer appearance-none rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:ring-1 focus-visible:ring-ring",
+          // WebKit thumb
+          "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow",
+          // Firefox thumb
+          "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background [&::-moz-range-thumb]:bg-primary",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Slider.displayName = "Slider"
+
+export { Slider }
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..20491fd
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,49 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface SwitchProps {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
+  id?: string
+  className?: string
+  "aria-label"?: string
+}
+
+/**
+ * A controlled toggle switch (role="switch"), keyboard-accessible via the native
+ * button. Used for boolean config fields (cache enabled, tracing flags, CORS, the
+ * connector `enabled` flag) in place of bare checkboxes.
+ */
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, onCheckedChange, disabled, id, className, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        id={id}
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onCheckedChange(!checked)}
+        className={cn(
+          "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          checked ? "bg-primary" : "bg-input",
+          className
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            "pointer-events-none block h-4 w-4 rounded-full bg-background shadow ring-0 transition-transform",
+            checked ? "translate-x-4" : "translate-x-0.5"
+          )}
+        />
+      </button>
+    )
+  }
+)
+Switch.displayName = "Switch"
+
+export { Switch }
diff --git a/src/hooks/use-workflows.ts b/src/hooks/use-workflows.ts
index ae50c92..866cd56 100644
--- a/src/hooks/use-workflows.ts
+++ b/src/hooks/use-workflows.ts
@@ -67,6 +67,26 @@ export function useTestWorkflow() {
   })
 }
 
+export function useValidateWorkflow() {
+  return useMutation({
+    mutationFn: (req: unknown) => workflowsApi.validate(req),
+  })
+}
+
+export function useImportWorkflows() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ items, dryRun }: { items: unknown[]; dryRun: boolean }) =>
+      workflowsApi.import(items, dryRun),
+    onSuccess: (result, { dryRun }) => {
+      if (dryRun) return
+      queryClient.invalidateQueries({ queryKey: ["workflows"] })
+      toast.success(`Imported ${result.imported} workflow${result.imported !== 1 ? "s" : ""}`)
+    },
+    onError: (e) => toast.error("Failed to import workflows", { description: errorDescription(e) }),
+  })
+}
+
 export function useCreateWorkflowVersion() {
   const queryClient = useQueryClient()
   return useMutation({
diff --git a/src/pages/channel-form.tsx b/src/pages/channel-form.tsx
index a26da6f..570ba42 100644
--- a/src/pages/channel-form.tsx
+++ b/src/pages/channel-form.tsx
@@ -13,10 +13,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select } from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
 import { PageHeader } from "@/components/shared/page-header"
+import { ChannelConfigEditor } from "@/components/shared/channel-config-editor"
 import { ArrowLeft, Save } from "lucide-react"
 
 const CHANNEL_TYPES: ChannelType[] = ["sync", "async"]
@@ -38,7 +38,7 @@ function ChannelForm({ existing }: { existing?: Channel }) {
   const [consumerGroup, setConsumerGroup] = useState(existing?.consumer_group ?? "")
   const [workflowId, setWorkflowId] = useState(existing?.workflow_id ?? "")
   const [priority, setPriority] = useState(String(existing?.priority ?? 0))
-  const [configText, setConfigText] = useState(JSON.stringify(existing?.config ?? {}, null, 2))
+  const [config, setConfig] = useState<ChannelConfig>(existing?.config ?? {})
   const [error, setError] = useState<string | null>(null)
 
   const backTo = existing ? `/channels/${existing.channel_id}` : "/channels"
@@ -46,18 +46,6 @@ function ChannelForm({ existing }: { existing?: Channel }) {
   const handleSubmit = () => {
     setError(null)
 
-    let config: ChannelConfig
-    try {
-      const parsed = JSON.parse(configText)
-      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
-        setError("Config must be a JSON object")
-        return
-      }
-      config = parsed
-    } catch {
-      setError("Invalid JSON in config")
-      return
-    }
     if (!name.trim()) {
       setError("Name is required")
       return
@@ -187,16 +175,7 @@ function ChannelForm({ existing }: { existing?: Channel }) {
             <Input value={workflowId} onChange={(e) => setWorkflowId(e.target.value)} />
           </div>
 
-          <div>
-            <label className="mb-1 block text-sm font-medium">Config (JSON)</label>
-            <Textarea
-              value={configText}
-              onChange={(e) => setConfigText(e.target.value)}
-              rows={12}
-              className="font-mono text-sm"
-              placeholder='{ "rate_limit": { "requests_per_second": 100 }, "tracing": { "mode": "async" } }'
-            />
-          </div>
+          <ChannelConfigEditor value={config} onChange={setConfig} />
 
           {error && (
             <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
diff --git a/src/pages/connector-form.tsx b/src/pages/connector-form.tsx
index 3add08d..2f56e21 100644
--- a/src/pages/connector-form.tsx
+++ b/src/pages/connector-form.tsx
@@ -6,12 +6,21 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select } from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
 import { Skeleton } from "@/components/ui/skeleton"
 import { PageHeader } from "@/components/shared/page-header"
+import { ConnectorConfigEditor } from "@/components/shared/connector-config-editor"
 import { parseJson } from "@/lib/utils"
 import { ArrowLeft, Save } from "lucide-react"
 
+function initialConfig(existing?: Connector): Record<string, unknown> {
+  if (!existing) return {}
+  const parsed = parseJson(existing.config_json)
+  return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+    ? (parsed as Record<string, unknown>)
+    : {}
+}
+
 const CONNECTOR_TYPES: ConnectorType[] = ["http", "kafka", "db", "cache", "storage"]
 
 function ConnectorForm({ existing }: { existing?: Connector }) {
@@ -23,27 +32,13 @@ function ConnectorForm({ existing }: { existing?: Connector }) {
   const [name, setName] = useState(existing?.name ?? "")
   const [type, setType] = useState<ConnectorType>(existing?.connector_type ?? "http")
   const [enabled, setEnabled] = useState(existing?.enabled ?? true)
-  const [configText, setConfigText] = useState(
-    existing ? JSON.stringify(parseJson(existing.config_json), null, 2) : "{\n  \n}"
-  )
+  const [config, setConfig] = useState<Record<string, unknown>>(() => initialConfig(existing))
   const [error, setError] = useState<string | null>(null)
 
   const backTo = existing ? `/connectors/${existing.id}` : "/connectors"
 
   const handleSubmit = () => {
     setError(null)
-    let config: Record<string, unknown>
-    try {
-      const parsed = JSON.parse(configText)
-      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
-        setError("Config must be a JSON object")
-        return
-      }
-      config = parsed
-    } catch {
-      setError("Invalid JSON in config")
-      return
-    }
     if (!name.trim()) {
       setError("Name is required")
       return
@@ -103,32 +98,13 @@ function ConnectorForm({ existing }: { existing?: Connector }) {
           </div>
 
           {isEdit && (
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={enabled}
-                onChange={(e) => setEnabled(e.target.checked)}
-                className="rounded"
-              />
+            <div className="flex items-center gap-2 text-sm">
+              <Switch checked={enabled} onCheckedChange={setEnabled} aria-label="Enabled" />
               Enabled
-            </label>
+            </div>
           )}
 
-          <div>
-            <label className="mb-1 block text-sm font-medium">Config (JSON)</label>
-            <Textarea
-              value={configText}
-              onChange={(e) => setConfigText(e.target.value)}
-              rows={14}
-              className="font-mono text-sm"
-            />
-            {isEdit && (
-              <p className="mt-1 text-xs text-amber-600">
-                Secret fields are shown masked. Replace them with real values before saving,
-                or the mask will overwrite the stored secret.
-              </p>
-            )}
-          </div>
+          <ConnectorConfigEditor connectorType={type} value={config} onChange={setConfig} />
 
           {error && (
             <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
diff --git a/src/pages/workflow-detail.tsx b/src/pages/workflow-detail.tsx
index cb202ee..033b40f 100644
--- a/src/pages/workflow-detail.tsx
+++ b/src/pages/workflow-detail.tsx
@@ -19,6 +19,8 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { StatusBadge } from "@/components/shared/status-badge"
 import { LifecycleActions } from "@/components/shared/lifecycle-actions"
 import { VersionHistory } from "@/components/shared/version-history"
+import { VersionCompare } from "@/components/shared/version-compare"
+import { RolloutControl } from "@/components/shared/rollout-control"
 import { JsonViewer } from "@/components/shared/json-viewer"
 import { RelationshipGraph } from "@/components/graph/relationship-graph"
 import { stepResultBadgeClass } from "@/lib/status"
@@ -106,11 +108,13 @@ export function WorkflowDetailPage() {
                 ))}
               </div>
             )}
-            {workflow.rollout_percentage !== undefined && workflow.rollout_percentage !== null && (
-              <span className="text-sm text-muted-foreground">
-                Rollout: {workflow.rollout_percentage}%
-              </span>
-            )}
+            {workflow.status !== "active" &&
+              workflow.rollout_percentage !== undefined &&
+              workflow.rollout_percentage !== null && (
+                <span className="text-sm text-muted-foreground">
+                  Rollout: {workflow.rollout_percentage}%
+                </span>
+              )}
             <span className="text-sm text-muted-foreground">
               {workflow.tasks?.length ?? 0} tasks
             </span>
@@ -126,6 +130,10 @@ export function WorkflowDetailPage() {
         />
       </div>
 
+      {workflow.status === "active" && (
+        <RolloutControl workflowId={workflow.workflow_id} current={workflow.rollout_percentage} />
+      )}
+
       <Tabs defaultValue="visualization">
         <TabsList>
           <TabsTrigger value="visualization">Visualization</TabsTrigger>
@@ -240,7 +248,13 @@ export function WorkflowDetailPage() {
         </TabsContent>
 
         <TabsContent value="versions">
-          <VersionHistory versions={versions} isLoading={versionsLoading} />
+          <div className="space-y-6">
+            <VersionHistory versions={versions} isLoading={versionsLoading} />
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold">Compare versions</h3>
+              <VersionCompare versions={versions} isLoading={versionsLoading} />
+            </div>
+          </div>
         </TabsContent>
 
         <TabsContent value="json">
diff --git a/src/pages/workflows.tsx b/src/pages/workflows.tsx
index 6df6718..e4e8fd1 100644
--- a/src/pages/workflows.tsx
+++ b/src/pages/workflows.tsx
@@ -16,8 +16,9 @@ import { Select } from "@/components/ui/select"
 import { Input } from "@/components/ui/input"
 import { PageHeader } from "@/components/shared/page-header"
 import { StatusBadge } from "@/components/shared/status-badge"
+import { WorkflowImportWizard } from "@/components/shared/workflow-import-wizard"
 import { formatDate } from "@/lib/utils"
-import { ChevronLeft, ChevronRight } from "lucide-react"
+import { ChevronLeft, ChevronRight, Upload } from "lucide-react"
 
 const PAGE_SIZE = 20
 const columnHelper = createColumnHelper<Workflow>()
@@ -77,6 +78,7 @@ export function WorkflowsPage() {
   const [offset, setOffset] = useState(0)
   const [statusFilter, setStatusFilter] = useState<EntityStatus | "">("")
   const [tagFilter, setTagFilter] = useState("")
+  const [showImport, setShowImport] = useState(false)
 
   const { data, isLoading } = useWorkflows({
     limit: PAGE_SIZE,
@@ -97,7 +99,14 @@ export function WorkflowsPage() {
 
   return (
     <div className="space-y-6">
-      <PageHeader title="Workflows" description="View workflow pipelines and task definitions" />
+      <div className="flex items-start justify-between">
+        <PageHeader title="Workflows" description="View workflow pipelines and task definitions" />
+        <Button onClick={() => setShowImport(true)}>
+          <Upload className="h-4 w-4" /> Import
+        </Button>
+      </div>
+
+      <WorkflowImportWizard open={showImport} onClose={() => setShowImport(false)} />
 
       <div className="flex items-center gap-3">
         <Select