diff --git a/src/index.css b/src/index.css
index 4fbb6ad..0e91037 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2149,3 +2149,79 @@ select.studio-input { background: var(--bp-paper); }
   color: var(--bp-navy); cursor: pointer;
 }
 .approvals-actions-toggle input { cursor: pointer; }
+
+/* Wizard polish — preview pane, stepper checkmarks, review summary, step controls */
+.wizard-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 24px;
+  padding: 0 24px 24px;
+}
+@media (max-width: 1000px) { .wizard-body { grid-template-columns: 1fr; } }
+
+.wizard-progress { display: flex; gap: 6px; flex-wrap: wrap; }
+.wizard-step-marker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bp-mono); font-size: 10px; color: var(--bp-muted); letter-spacing: 0.06em; text-transform: uppercase; }
+.wizard-step-marker.active { color: var(--bp-navy); font-weight: 700; }
+.wizard-step-marker.past { color: color-mix(in srgb, var(--bp-navy) 60%, var(--bp-muted)); }
+.step-num {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px;
+  background: var(--bp-paper); color: var(--bp-navy);
+  border: 1px solid var(--bp-navy); font-size: 10px; font-weight: 700;
+}
+.wizard-step-marker.active .step-num { background: var(--bp-amber); color: var(--bp-paper); border-color: var(--bp-amber); }
+.step-num-done { background: color-mix(in srgb, #2e7a25 70%, var(--bp-paper)) !important; color: var(--bp-paper) !important; border-color: #2e7a25 !important; }
+.step-chevron { color: var(--bp-muted); }
+
+.panel-sub { font-size: 12px; color: var(--bp-muted); line-height: 1.5; margin: -4px 0 12px; }
+
+.node-controls { display: inline-flex; gap: 4px; margin-left: auto; }
+.node-controls .icon-btn { padding: 2px 6px; font-size: 12px; }
+.node-controls .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.node-meta { display: flex; align-items: center; gap: 8px; }
+
+.wizard-review {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 14px;
+  background: var(--bp-paper);
+  border: 1px solid var(--bp-navy);
+  margin-bottom: 12px;
+}
+.wizard-review-row { display: flex; gap: 12px; font-size: 12px; line-height: 1.5; }
+.wizard-review-label {
+  flex: 0 0 110px;
+  font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.08em;
+  color: var(--bp-muted); text-transform: uppercase;
+  padding-top: 2px;
+}
+
+.wizard-preview {
+  background: var(--bp-paper);
+  border: 1px solid var(--bp-navy);
+  padding: 16px;
+  display: flex; flex-direction: column; gap: 14px;
+  position: sticky; top: 60px; align-self: flex-start;
+  max-height: calc(100vh - 80px); overflow-y: auto;
+}
+.wizard-preview-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--bp-navy) 20%, transparent); }
+.wizard-preview-title { font-size: 14px; font-weight: 700; color: var(--bp-navy); }
+.wizard-preview-desc { font-size: 11px; color: var(--bp-muted); line-height: 1.4; }
+.wizard-preview-section { display: flex; flex-direction: column; gap: 6px; }
+.wizard-preview-label { font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--bp-muted); text-transform: uppercase; }
+.wizard-preview-chain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
+.wizard-preview-chain-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--bp-navy) 16%, transparent); }
+.wizard-preview-chain-idx { font-family: var(--bp-mono); font-size: 10px; color: var(--bp-muted); width: 18px; text-align: right; }
+.wizard-preview-chain-name { flex: 1; color: var(--bp-navy); }
+.wizard-preview-chain-kind { font-family: var(--bp-mono); font-size: 10px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--bp-navy) 30%, transparent); }
+.wizard-preview-chain-kind.kind-agent { background: color-mix(in srgb, var(--bp-amber) 25%, var(--bp-paper)); }
+.wizard-preview-chain-kind.kind-system { background: color-mix(in srgb, var(--bp-navy) 12%, var(--bp-paper)); }
+.wizard-preview-fields, .wizard-preview-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
+.wizard-preview-fields li, .wizard-preview-rules li { padding: 4px 8px; border-left: 2px solid color-mix(in srgb, var(--bp-navy) 20%, transparent); }
+.wizard-preview-field-name { font-weight: 600; color: var(--bp-navy); }
+.wizard-preview-field-type { font-family: var(--bp-mono); font-size: 10px; color: var(--bp-muted); margin-left: 4px; }
+.wizard-preview-empty { color: var(--bp-muted); font-style: italic; font-size: 11px; padding: 4px 0 !important; border-left: 0 !important; }
+
+@media (max-width: 700px) {
+  .wizard-body { padding: 0 12px 12px; }
+  .wizard-preview { position: static; max-height: none; }
+}
diff --git a/src/scenes/Wizard.tsx b/src/scenes/Wizard.tsx
index cc29ca0..d5e27c2 100644
--- a/src/scenes/Wizard.tsx
+++ b/src/scenes/Wizard.tsx
@@ -235,15 +235,27 @@ export default function Wizard() {
     }
   }
 
+  const STEP_LABELS: Record<WizardStep, string> = {
+    Intake: "Describe",
+    Analyze: "Steps",
+    Generate: "Form fields",
+    Validate: "Rules",
+    "Draft saved": "Review",
+    Publish: "Done",
+  };
+
   const renderStepNav = () => (
     <div className="wizard-progress">
       {STEPS.map((step, i) => {
         const isActive = step === draft.step;
         const isPast = STEPS.indexOf(step) < STEPS.indexOf(draft.step);
+        const isDone = isPast || draft.step === "Publish";
         return (
-          <div key={step} className={`wizard-step-marker ${isActive ? 'active' : ''} ${isPast ? 'past' : ''}`}>
-            <span className="step-num">{i + 1}</span>
-            <span className="step-label">{step}</span>
+          <div key={step} className={`wizard-step-marker ${isActive ? "active" : ""} ${isPast ? "past" : ""}`}>
+            <span className={`step-num ${isDone ? "step-num-done" : ""}`}>
+              {isDone ? <Check size={11} /> : i + 1}
+            </span>
+            <span className="step-label">{STEP_LABELS[step]}</span>
             {i < STEPS.length - 1 && <ChevronRight size={12} className="step-chevron" />}
           </div>
         );
@@ -251,6 +263,84 @@ export default function Wizard() {
     </div>
   );
 
+  const renderPreviewPane = () => {
+    if (draft.nodes.length === 0 && draft.fields.length === 0 && draft.rules.length === 0) return null;
+    return (
+      <aside className="wizard-preview">
+        <div className="wizard-preview-head">
+          <span className="mc-hero-eyebrow">Preview</span>
+          <div className="wizard-preview-title">{draft.name || "Untitled process"}</div>
+          {draft.description && <div className="wizard-preview-desc">{draft.description.slice(0, 140)}</div>}
+        </div>
+
+        {draft.nodes.length > 0 && (
+          <div className="wizard-preview-section">
+            <div className="wizard-preview-label">Steps · {draft.nodes.length}</div>
+            <ol className="wizard-preview-chain">
+              {draft.nodes.map((n, i) => (
+                <li key={n._key || i} className="wizard-preview-chain-item">
+                  <span className="wizard-preview-chain-idx">{i + 1}</span>
+                  <span className="wizard-preview-chain-name">{n.display_name || "Untitled step"}</span>
+                  <span className={`wizard-preview-chain-kind kind-${n.dispatch_kind || "human"}`}>{n.dispatch_kind || "human"}</span>
+                </li>
+              ))}
+            </ol>
+          </div>
+        )}
+
+        {draft.fields.length > 0 && (
+          <div className="wizard-preview-section">
+            <div className="wizard-preview-label">Form · {draft.fields.length} field{draft.fields.length === 1 ? "" : "s"}</div>
+            <ul className="wizard-preview-fields">
+              {draft.fields.filter((f) => f.name).map((f, i) => (
+                <li key={i}>
+                  <span className="wizard-preview-field-name">{f.name}</span>
+                  <span className="wizard-preview-field-type">· {f.type}</span>
+                </li>
+              ))}
+              {draft.fields.filter((f) => f.name).length === 0 && (
+                <li className="wizard-preview-empty">No fields named yet</li>
+              )}
+            </ul>
+          </div>
+        )}
+
+        {draft.rules.length > 0 && (
+          <div className="wizard-preview-section">
+            <div className="wizard-preview-label">Rules · {draft.rules.length}</div>
+            <ul className="wizard-preview-rules">
+              {draft.rules.filter((r) => r.trim()).map((r, i) => <li key={i}>{r}</li>)}
+              {draft.rules.filter((r) => r.trim()).length === 0 && (
+                <li className="wizard-preview-empty">No rules typed yet</li>
+              )}
+            </ul>
+          </div>
+        )}
+      </aside>
+    );
+  };
+
+  const moveStep = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= draft.nodes.length) return;
+    const next = [...draft.nodes];
+    [next[i], next[j]] = [next[j], next[i]];
+    updateDraft({ nodes: next });
+  };
+
+  const removeStep = (i: number) => {
+    if (draft.nodes.length <= 1) {
+      pushToast("err", "A process needs at least one step.");
+      return;
+    }
+    updateDraft({ nodes: draft.nodes.filter((_, idx) => idx !== i) });
+  };
+
+  const addStep = () => {
+    const next = [...draft.nodes, { _key: `n${Date.now()}`, kind: "step", display_name: "New step", dispatch_kind: "human" }];
+    updateDraft({ nodes: next });
+  };
+
   return (
     <div className="wizard-container">
       <header className="wizard-header">
@@ -261,201 +351,207 @@ export default function Wizard() {
         {renderStepNav()}
       </header>
 
-      <div className="wizard-content">
-        {draft.step === "Intake" && (
-          <div className="wizard-panel">
-            <h3 className="panel-h">What process do you want to build?</h3>
-            <div className="field-group">
-                <label>Name (optional)</label>
-                <input 
-                  type="text" 
-                  value={draft.name} 
-                  onChange={e => updateDraft({ name: e.target.value })} 
-                  placeholder="e.g. Laptop Procurement"
-                />
+      <div className="wizard-body">
+        <div className="wizard-content">
+          {draft.step === "Intake" && (
+            <div className="wizard-panel">
+              <h3 className="panel-h">What process do you want to build?</h3>
+              <div className="field-group">
+                  <label>Name (optional)</label>
+                  <input
+                    type="text"
+                    value={draft.name}
+                    onChange={e => updateDraft({ name: e.target.value })}
+                    placeholder="e.g. Laptop Procurement"
+                  />
+              </div>
+              <div className="field-group">
+                  <label>Describe the process</label>
+                  <textarea
+                    value={draft.description}
+                    onChange={e => updateDraft({ description: e.target.value })}
+                    placeholder="When a store manager requests a new laptop, run a procurement approval..."
+                    rows={4}
+                  />
+              </div>
+              <button
+                  className="btn btn-primary"
+                  onClick={handleIntakeSubmit}
+                  disabled={!draft.description || working || !canPublish}
+              >
+                {working ? "Saving..." : "Start drafting →"}
+              </button>
+              {!canPublish && <p className="warning-text">Switch to live mode + sign in to create processes.</p>}
             </div>
-            <div className="field-group">
-                <label>Describe the process</label>
-                <textarea 
-                  value={draft.description} 
-                  onChange={e => updateDraft({ description: e.target.value })}
-                  placeholder="When a store manager requests a new laptop, run a procurement approval..."
-                  rows={4}
-                />
-            </div>
-            <button 
-                className="btn btn-primary" 
-                onClick={handleIntakeSubmit} 
-                disabled={!draft.description || working || !canPublish}
-                title="POST /api/ea2/flow"
-            >
-              {working ? 'Saving...' : 'Start Drafting →'}
-            </button>
-            {!canPublish && <p className="warning-text">Switch to LIVE mode + sign in to create processes.</p>}
-          </div>
-        )}
+          )}
 
-        {draft.step === "Analyze" && (
-          <div className="wizard-panel">
-            <h3 className="panel-h">Review proposed structure</h3>
-            <div className="node-list">
-              {draft.nodes.map((n, i) => (
-                <div key={n._key} className="node-card">
-                  <div className="node-header">
-                    <span className="node-idx">{i + 1}</span>
-                    <input 
-                      value={n.display_name} 
-                      onChange={e => {
-                        const newNodes = [...draft.nodes];
-                        newNodes[i].display_name = e.target.value;
-                        updateDraft({ nodes: newNodes });
-                      }}
-                    />
-                  </div>
-                  <div className="node-meta">
-                    <select 
-                      value={n.dispatch_kind}
-                      onChange={e => {
-                        const newNodes = [...draft.nodes];
-                        newNodes[i].dispatch_kind = e.target.value;
-                        updateDraft({ nodes: newNodes });
-                      }}
-                    >
-                      <option value="human">Human Task</option>
-                      <option value="agent">Agent Task</option>
-                      <option value="system">System Task</option>
-                    </select>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <button 
-                className="btn btn-primary" 
-                onClick={handleStructureSave} 
-                disabled={working}
-                title="POST /api/ea2/apply-batch"
-            >
-              {working ? 'Saving...' : 'Confirm Structure →'}
-            </button>
-          </div>
-        )}
-
-        {draft.step === "Generate" && (
-          <div className="wizard-panel">
-            <h3 className="panel-h">What information do you need to collect?</h3>
-            <div className="field-list">
-                {draft.fields.map((f, i) => (
-                    <div key={i} className="field-row">
-                        <input 
-                            placeholder="Field name" 
-                            value={f.name} 
-                            onChange={e => {
-                                const newFields = [...draft.fields];
-                                newFields[i].name = e.target.value;
-                                updateDraft({ fields: newFields });
-                            }} 
-                        />
-                        <select 
-                            value={f.type}
-                            onChange={e => {
-                                const newFields = [...draft.fields];
-                                newFields[i].type = e.target.value;
-                                updateDraft({ fields: newFields });
-                            }}
-                        >
-                            <option value="string">Text</option>
-                            <option value="number">Number</option>
-                            <option value="boolean">Yes/No</option>
-                        </select>
-                        <button className="icon-btn" onClick={() => updateDraft({ fields: draft.fields.filter((_, idx) => idx !== i) })}><Close size={12} /></button>
+          {draft.step === "Analyze" && (
+            <div className="wizard-panel">
+              <h3 className="panel-h">What steps does it have?</h3>
+              <p className="panel-sub">Reorder, rename, or pick who does each step. Order is preserved when we write to EA2.</p>
+              <div className="node-list">
+                {draft.nodes.map((n, i) => (
+                  <div key={n._key} className="node-card">
+                    <div className="node-header">
+                      <span className="node-idx">{i + 1}</span>
+                      <input
+                        value={n.display_name}
+                        onChange={e => {
+                          const newNodes = [...draft.nodes];
+                          newNodes[i].display_name = e.target.value;
+                          updateDraft({ nodes: newNodes });
+                        }}
+                      />
                     </div>
-                ))}
-                <button className="btn btn-secondary" onClick={() => updateDraft({ fields: [...draft.fields, { name: "", type: "string" }] })}>+ Add Field</button>
-            </div>
-            <button 
-                className="btn btn-primary" 
-                onClick={handleDataSave} 
-                disabled={working}
-                title="PUT /api/ea2/flow/{key}"
-            >
-              {working ? 'Saving...' : 'Confirm Data →'}
-            </button>
-          </div>
-        )}
-
-        {draft.step === "Validate" && (
-           <div className="wizard-panel">
-            <h3 className="panel-h">When should this process do something different? (Rules)</h3>
-             <div className="field-list">
-                {draft.rules.map((r, i) => (
-                    <div key={i} className="field-row">
-                        <input 
-                            placeholder="e.g. If cost > 5000, require VP approval" 
-                            value={r} 
-                            onChange={e => {
-                                const newRules = [...draft.rules];
-                                newRules[i] = e.target.value;
-                                updateDraft({ rules: newRules });
-                            }} 
-                            style={{ flex: 1 }}
-                        />
-                         <button className="icon-btn" onClick={() => updateDraft({ rules: draft.rules.filter((_, idx) => idx !== i) })}><Close size={12} /></button>
+                    <div className="node-meta">
+                      <select
+                        value={n.dispatch_kind}
+                        onChange={e => {
+                          const newNodes = [...draft.nodes];
+                          newNodes[i].dispatch_kind = e.target.value;
+                          updateDraft({ nodes: newNodes });
+                        }}
+                      >
+                        <option value="human">Human</option>
+                        <option value="agent">Agent</option>
+                        <option value="system">System</option>
+                      </select>
+                      <div className="node-controls">
+                        <button className="icon-btn" onClick={() => moveStep(i, -1)} disabled={i === 0} title="Move up">↑</button>
+                        <button className="icon-btn" onClick={() => moveStep(i, 1)} disabled={i === draft.nodes.length - 1} title="Move down">↓</button>
+                        <button className="icon-btn" onClick={() => removeStep(i)} title="Remove"><Close size={12} /></button>
+                      </div>
                     </div>
+                  </div>
                 ))}
-                 <button className="btn btn-secondary" onClick={() => updateDraft({ rules: [...draft.rules, ""] })}>+ Add Rule</button>
+                <button className="btn btn-secondary" onClick={addStep}>+ Add step</button>
+              </div>
+              <button className="btn btn-primary" onClick={handleStructureSave} disabled={working}>
+                {working ? "Saving..." : "Confirm structure →"}
+              </button>
             </div>
-             <button 
-                className="btn btn-primary" 
-                onClick={handleRulesSave} 
-                disabled={working}
-                title="PUT /api/ea2/flow/{key}"
-            >
-              {working ? 'Saving...' : 'Review Process →'}
-            </button>
-          </div>
-        )}
+          )}
 
-        {draft.step === "Draft saved" && (
-           <div className="wizard-panel">
-            <h3 className="panel-h">Review & Publish</h3>
-            <p>Your process <strong>{draft.name || 'Untitled'}</strong> is ready to be published to EA2.</p>
-            <div className="summary-stats">
-                <div><span>Steps:</span> {draft.nodes.length}</div>
-                <div><span>Data fields:</span> {draft.fields.length}</div>
-                <div><span>Rules:</span> {draft.rules.length}</div>
+          {draft.step === "Generate" && (
+            <div className="wizard-panel">
+              <h3 className="panel-h">What information do you need to collect?</h3>
+              <p className="panel-sub">These become the form every step asks for. You can add as many as you like.</p>
+              <div className="field-list">
+                  {draft.fields.map((f, i) => (
+                      <div key={i} className="field-row">
+                          <input
+                              placeholder="e.g. requester name"
+                              value={f.name}
+                              onChange={e => {
+                                  const newFields = [...draft.fields];
+                                  newFields[i].name = e.target.value;
+                                  updateDraft({ fields: newFields });
+                              }}
+                          />
+                          <select
+                              value={f.type}
+                              onChange={e => {
+                                  const newFields = [...draft.fields];
+                                  newFields[i].type = e.target.value;
+                                  updateDraft({ fields: newFields });
+                              }}
+                          >
+                              <option value="string">Text</option>
+                              <option value="number">Number</option>
+                              <option value="boolean">Yes / No</option>
+                          </select>
+                          <button className="icon-btn" onClick={() => updateDraft({ fields: draft.fields.filter((_, idx) => idx !== i) })}><Close size={12} /></button>
+                      </div>
+                  ))}
+                  <button className="btn btn-secondary" onClick={() => updateDraft({ fields: [...draft.fields, { name: "", type: "string" }] })}>+ Add field</button>
+              </div>
+              <button className="btn btn-primary" onClick={handleDataSave} disabled={working}>
+                {working ? "Saving..." : "Confirm fields →"}
+              </button>
             </div>
-            <div className="actions-row">
-                <button className="btn btn-secondary" onClick={() => updateDraft({ step: "Intake" })}>Edit</button>
-                <button 
-                    className="btn btn-primary" 
-                    onClick={handlePublish} 
-                    disabled={working}
-                    title="POST /api/ea2/apply-batch"
-                >
-                {working ? 'Publishing...' : 'Publish to EA2'}
-                </button>
-            </div>
-          </div>
-        )}
+          )}
 
-        {draft.step === "Publish" && (
-             <div className="wizard-panel success-panel">
-                <div className="success-icon"><Check size={32} /></div>
-                <h3 className="panel-h">Process Published!</h3>
-                <p>Your process <strong>{draft.name || "Untitled"}</strong> is now active and ready to run.</p>
-                <div className="actions-row">
-                     <button className="btn btn-secondary" onClick={() => { setDraft({ step: "Intake", name: "", description: "", nodes: [], edges: [], fields: [], rules: [] }); setPublishedKey(null); }}>Create Another</button>
-                     <button 
-                        className="btn btn-primary" 
-                        onClick={handleStartInstance} 
-                        disabled={working}
-                        title="POST /api/runtime/transactions"
-                     >
-                        Start First Instance Now
-                    </button>
+          {draft.step === "Validate" && (
+             <div className="wizard-panel">
+              <h3 className="panel-h">Anything special the process should check?</h3>
+              <p className="panel-sub">Plain-English rules. We'll attach them as exception checks once published.</p>
+               <div className="field-list">
+                  {draft.rules.map((r, i) => (
+                      <div key={i} className="field-row">
+                          <input
+                              placeholder="e.g. If cost is over 5000, require VP approval"
+                              value={r}
+                              onChange={e => {
+                                  const newRules = [...draft.rules];
+                                  newRules[i] = e.target.value;
+                                  updateDraft({ rules: newRules });
+                              }}
+                              style={{ flex: 1 }}
+                          />
+                           <button className="icon-btn" onClick={() => updateDraft({ rules: draft.rules.filter((_, idx) => idx !== i) })}><Close size={12} /></button>
+                      </div>
+                  ))}
+                   <button className="btn btn-secondary" onClick={() => updateDraft({ rules: [...draft.rules, ""] })}>+ Add rule</button>
+              </div>
+               <button className="btn btn-primary" onClick={handleRulesSave} disabled={working}>
+                {working ? "Saving..." : "Review process →"}
+              </button>
+            </div>
+          )}
+
+          {draft.step === "Draft saved" && (
+             <div className="wizard-panel">
+              <h3 className="panel-h">Review &amp; publish</h3>
+              <p className="panel-sub">Last look. Hit publish to write the definition + steps + form + version to EA2 in one atomic batch.</p>
+              <div className="wizard-review">
+                <div className="wizard-review-row">
+                  <span className="wizard-review-label">Process</span>
+                  <strong>{draft.name || "Untitled"}</strong>
                 </div>
-             </div>
-        )}
+                {draft.description && (
+                  <div className="wizard-review-row">
+                    <span className="wizard-review-label">Purpose</span>
+                    <span>{draft.description}</span>
+                  </div>
+                )}
+                <div className="wizard-review-row">
+                  <span className="wizard-review-label">Steps</span>
+                  <span>{draft.nodes.length} ({draft.nodes.map((n) => n.display_name || "Untitled").join(" → ")})</span>
+                </div>
+                <div className="wizard-review-row">
+                  <span className="wizard-review-label">Form fields</span>
+                  <span>{draft.fields.filter((f) => f.name).length || "none"}</span>
+                </div>
+                <div className="wizard-review-row">
+                  <span className="wizard-review-label">Rules</span>
+                  <span>{draft.rules.filter((r) => r.trim()).length || "none"}</span>
+                </div>
+              </div>
+              <div className="actions-row">
+                  <button className="btn btn-secondary" onClick={() => updateDraft({ step: "Intake" })}>Back to edit</button>
+                  <button className="btn btn-primary" onClick={handlePublish} disabled={working}>
+                  {working ? "Publishing..." : "Publish to EA2"}
+                  </button>
+              </div>
+            </div>
+          )}
+
+          {draft.step === "Publish" && (
+               <div className="wizard-panel success-panel">
+                  <div className="success-icon"><Check size={32} /></div>
+                  <h3 className="panel-h">Process published</h3>
+                  <p>Your process <strong>{draft.name || "Untitled"}</strong> is now active and ready to run.</p>
+                  <div className="actions-row">
+                       <button className="btn btn-secondary" onClick={() => { setDraft({ step: "Intake", name: "", description: "", nodes: [], edges: [], fields: [], rules: [] }); setPublishedKey(null); }}>Create another</button>
+                       <button className="btn btn-primary" onClick={handleStartInstance} disabled={working}>
+                          Start first instance
+                      </button>
+                  </div>
+               </div>
+          )}
+        </div>
+
+        {renderPreviewPane()}
       </div>
     </div>
   );