feat(ui/alerts): ReviewStep + promotion prefill warnings

Review step dumps a human summary plus raw request JSON, and (when a
setter is supplied) offers an Enabled-on-save Toggle. Promotion prefill
now returns {form, warnings}: clears agent IDs (per-env), flags missing
apps in target env, and flags webhook connections not allowed in target
env. 4 Vitest cases cover copy-name, agent clear, app-missing, and
webhook-not-allowed paths.

The wizard now consumes {form, warnings}; Task 25 renders the warnings
banner.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/src/pages/Alerts/RuleEditor/ReviewStep.tsx

@@ -1,11 +1,62 @@
-import type { FormState } from './form-state';
+import { Toggle } from '@cameleer/design-system';
+import { toRequest, type FormState } from './form-state';
 
 export function ReviewStep({
-  form: _form,
-  setForm: _setForm,
+  form,
+  setForm,
 }: {
   form: FormState;
   setForm?: (f: FormState) => void;
 }) {
-  return <div>Review step &mdash; TODO Task 24</div>;
+  const req = toRequest(form);
+  return (
+    <div style={{ display: 'grid', gap: 12, maxWidth: 720 }}>
+      <div>
+        <strong>Name:</strong> {form.name}
+      </div>
+      <div>
+        <strong>Severity:</strong> {form.severity}
+      </div>
+      <div>
+        <strong>Scope:</strong> {form.scopeKind}
+        {form.scopeKind !== 'env' &&
+          ` (app=${form.appSlug}${form.routeId ? `, route=${form.routeId}` : ''}${form.agentId ? `, agent=${form.agentId}` : ''})`}
+      </div>
+      <div>
+        <strong>Condition kind:</strong> {form.conditionKind}
+      </div>
+      <div>
+        <strong>Intervals:</strong> eval {form.evaluationIntervalSeconds}s &middot; for {form.forDurationSeconds}s &middot; re-notify {form.reNotifyMinutes}m
+      </div>
+      <div>
+        <strong>Targets:</strong> {form.targets.length}
+      </div>
+      <div>
+        <strong>Webhooks:</strong> {form.webhooks.length}
+      </div>
+      {setForm && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Toggle
+            checked={form.enabled}
+            onChange={(e) => setForm({ ...form, enabled: e.target.checked })}
+            label="Enabled on save"
+          />
+        </div>
+      )}
+      <details>
+        <summary>Raw request JSON</summary>
+        <pre
+          style={{
+            fontSize: 11,
+            background: 'var(--code-bg)',
+            padding: 8,
+            borderRadius: 6,
+            overflow: 'auto',
+          }}
+        >
+          {JSON.stringify(req, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
 }