feat(workflows): stamp runs with revision and improve history preview

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/server/migrations/20260820050000_workflow_run_revision.js

@@ -0,0 +1,21 @@
+/**
+ * @param {import("knex").Knex} knex
+ */
+export async function up(knex) {
+  await knex.schema.alterTable("workflow_runs", (t) => {
+    t.integer("workflow_revision");
+  });
+  await knex.schema.raw(
+    "CREATE INDEX workflow_runs_workflow_revision_idx ON workflow_runs (workflow, workflow_revision)",
+  );
+}
+
+/**
+ * @param {import("knex").Knex} knex
+ */
+export async function down(knex) {
+  await knex.schema.raw("DROP INDEX IF EXISTS workflow_runs_workflow_revision_idx");
+  await knex.schema.alterTable("workflow_runs", (t) => {
+    t.dropColumn("workflow_revision");
+  });
+}

packages/server/store.js

@@ -65,6 +65,7 @@ function nowIso() {
  *   input?: unknown,
  *   parentRunId?: string | null,
  *   status?: "queued" | "running",
+ *   workflowRevision?: number | null,
  * }} opts
  */
 export async function startRun({
@@ -75,6 +76,7 @@ export async function startRun({
   input = null,
   parentRunId = null,
   status = "queued",
+  workflowRevision = null,
 }) {
   const id = randomUUID();
   const now = nowIso();
@@ -91,6 +93,7 @@ export async function startRun({
     queued_at: isQueued ? now : null,
     input: serialize(input),
     parent_run_id: parentRunId ?? null,
+    workflow_revision: workflowRevision ?? null,
   });
   return { id, started_at: now, queued_at: isQueued ? now : null };
 }

packages/server/test/workflow-history-smoke.js

@@ -20,6 +20,7 @@ import {
   listRevisions,
   getLatestRevision,
   deleteRevisionHistory,
+  ensureInitialRevision,
 } from "../workflow-history.js";
 import {
   moveWorkflowToTrash,
@@ -89,6 +90,47 @@ const rev2 = await recordRevision({
 assert.equal(rev2.revision, 2);
 assert.equal((await listRevisions(workflowId)).length, 2);
 
+const yamlDisabled = `${yamlV2}\nenabled: false\n`;
+assert.equal(
+  workflowContentSha(yamlV2),
+  workflowContentSha(yamlDisabled),
+  "enabled-only change should not change content SHA",
+);
+const revDisable = await recordRevision({
+  workflowId,
+  owner,
+  file,
+  content: yamlDisabled,
+  reason: "disable",
+});
+assert.equal(revDisable.skipped, true, "enable/disable should not create a revision");
+assert.equal((await listRevisions(workflowId)).length, 2);
+
+const { startRun, getRun } = await import("../store.js");
+const latest = await getLatestRevision(workflowId);
+assert.equal(latest?.revision, 2);
+const run = await startRun({
+  owner,
+  workflow: `${owner}/${file}`,
+  workflowName: "smoke test v2",
+  trigger: { type: "manual", detail: "smoke" },
+  input: null,
+  workflowRevision: latest?.revision ?? null,
+});
+const loaded = await getRun(run.id);
+assert.equal(loaded.workflow_revision, 2);
+await db("workflow_runs").where({ id: run.id }).del();
+
+await deleteRevisionHistory(workflowId);
+assert.equal(await getLatestRevision(workflowId), null);
+const seeded = await ensureInitialRevision({ owner, file });
+assert.ok(seeded);
+assert.equal(seeded.revision, 1);
+assert.equal(seeded.seeded, true);
+const again = await ensureInitialRevision({ owner, file });
+assert.equal(again?.revision, 1);
+assert.equal(again?.seeded, false);
+
 const warnings = collectWorkflowWarnings(
   `name: bad\nscripts:\n  - unknown-script-xyz\n`,
 );

packages/server/workflow-history.js

@@ -1,6 +1,7 @@
 import { randomUUID } from "node:crypto";
 import { db } from "./db.js";
-import { workflowContentSha } from "./workflow-normalize.js";
+import * as fsStore from "./fs-store.js";
+import { workflowContentSha, workflowIdFromFile } from "./workflow-normalize.js";
 
 const MAX_REVISIONS = 50;
 
@@ -70,6 +71,50 @@ export async function getRevision(workflowId, revision) {
   };
 }
 
+/**
+ * Ensure a workflow has at least revision #1 (seed from disk when history is empty).
+ * @param {{ owner: string, file: string }} opts
+ * @returns {Promise<{ revision: number, id: string, content_sha: string, created_at: string, seeded: boolean } | null>}
+ */
+export async function ensureInitialRevision(opts) {
+  const workflowId = workflowIdFromFile(opts.file);
+  const latest = await getLatestRevision(workflowId);
+  if (latest) {
+    return {
+      revision: latest.revision,
+      id: latest.id,
+      content_sha: latest.content_sha,
+      created_at: latest.created_at,
+      seeded: false,
+    };
+  }
+
+  const content = fsStore.readWorkflowYaml(opts.owner, opts.file);
+  if (content == null) return null;
+
+  const recorded = await recordRevision({
+    workflowId,
+    owner: opts.owner,
+    file: opts.file,
+    content,
+    reason: "seed",
+    force: true,
+  });
+
+  if (recorded.revision == null || recorded.id == null) return null;
+
+  const row = await getLatestRevision(workflowId);
+  if (!row) return null;
+
+  return {
+    revision: row.revision,
+    id: row.id,
+    content_sha: row.content_sha,
+    created_at: row.created_at,
+    seeded: true,
+  };
+}
+
 /**
  * Insert a revision when content changed (SHA dedup skips identical saves).
  * @param {{

packages/server/workflow-normalize.js

@@ -24,12 +24,22 @@ export function parseWorkflowObject(content) {
   return yaml.parse(content) ?? null;
 }
 
+/**
+ * Drop `enabled` before hashing so enable/disable does not create revision points.
+ * @param {unknown} parsed
+ */
+function stripEnabledForHash(parsed) {
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return parsed;
+  const { enabled, ...rest } = parsed;
+  return rest;
+}
+
 /**
  * SHA256 of normalized workflow content (YAML → object → canonical JSON).
  * @param {string} content
  */
 export function workflowContentSha(content) {
-  const parsed = parseWorkflowObject(content);
+  const parsed = stripEnabledForHash(parseWorkflowObject(content));
   const canonical = canonicalize(parsed);
   const json = JSON.stringify(canonical);
   return createHash("sha256").update(json, "utf8").digest("hex");

packages/web/src/components/workflow/WorkflowHistoryPanel.jsx

@@ -12,6 +12,7 @@ import {
   isSaveWarningsError,
   saveWarningsFromError,
 } from "./SaveWorkflowWarningsDialog.jsx";
+import { ConfirmDialog } from "./WorkflowRevisionBanner.jsx";
 
 function reasonLabel(reason, meta) {
   if (reason === "duplicated" && meta?.from) return `duplicated from ${meta.from}`;
@@ -22,13 +23,23 @@ function reasonLabel(reason, meta) {
   return reason ?? "save";
 }
 
-export function WorkflowHistoryPanel({ owner, file, onReverted }) {
+export function WorkflowHistoryPanel({
+  owner,
+  file,
+  previewRevision,
+  onSelectRevision,
+  onReverted,
+}) {
   const { notify } = useNotifications();
   const revisions = useWorkflowRevisions(owner, file);
   const revert = useRevertWorkflowRevision();
   const [pendingRevision, setPendingRevision] = useState(null);
+  const [confirmRevision, setConfirmRevision] = useState(null);
   const [warnings, setWarnings] = useState(null);
 
+  const items = revisions.data?.revisions ?? [];
+  const latestRevision = items[0]?.revision ?? null;
+
   function doRevert(revision, saveAnyway = false) {
     setPendingRevision(revision);
     revert.mutate(
@@ -37,6 +48,7 @@ export function WorkflowHistoryPanel({ owner, file, onReverted }) {
         onSuccess: (data) => {
           setWarnings(null);
           setPendingRevision(null);
+          setConfirmRevision(null);
           notify.success(`Restored revision #${revision}`);
           onReverted?.(data);
         },
@@ -52,7 +64,15 @@ export function WorkflowHistoryPanel({ owner, file, onReverted }) {
     );
   }
 
-  const items = revisions.data?.revisions ?? [];
+  function onRowClick(rev) {
+    if (rev.revision === latestRevision) {
+      onSelectRevision?.(null);
+      return;
+    }
+    onSelectRevision?.(rev.revision, rev);
+  }
+
+  const confirmRev = confirmRevision != null ? items.find((r) => r.revision === confirmRevision) : null;
 
   return (
     <div className="border-base-300 flex h-full min-h-0 flex-col rounded-box border bg-base-100">
@@ -70,36 +90,73 @@ export function WorkflowHistoryPanel({ owner, file, onReverted }) {
           <p className="p-3 text-sm opacity-50">No revisions yet.</p>
         ) : (
           <ul className="space-y-1">
-            {items.map((rev) => (
+            {items.map((rev, index) => {
-              <li
+              const isCurrent = index === 0;
-                key={rev.id}
+              const isSelected =
-                className="hover:bg-base-200 flex items-start justify-between gap-2 rounded-lg px-2 py-2"
+                previewRevision === rev.revision || (previewRevision == null && isCurrent);
-              >
+              return (
-                <div className="min-w-0">
+                <li
-                  <div className="text-sm font-medium">#{rev.revision}</div>
+                  key={rev.id}
-                  <div className="text-xs opacity-60">{formatTime(rev.created_at)}</div>
+                  className={`hover:bg-base-200 flex cursor-pointer items-start justify-between gap-2 rounded-lg px-2 py-2 ${
-                  <div className="text-xs opacity-70">
+                    isSelected ? "bg-base-200 ring-base-content/10 ring-1" : ""
-                    {reasonLabel(rev.reason, rev.meta)}
+                  }`}
-                  </div>
+                  onClick={() => onRowClick(rev)}
-                </div>
+                  onKeyDown={(e) => {
-                <button
+                    if (e.key === "Enter" || e.key === " ") {
-                  type="button"
+                      e.preventDefault();
-                  className="btn btn-ghost btn-xs shrink-0"
+                      onRowClick(rev);
-                  title="Revert to this revision"
+                    }
-                  disabled={revert.isPending}
+                  }}
-                  onClick={() => doRevert(rev.revision)}
+                  role="button"
+                  tabIndex={0}
                 >
-                  {pendingRevision === rev.revision && revert.isPending ? (
+                  <div className="min-w-0">
-                    <span className="loading loading-spinner loading-xs" />
+                    <div className="flex items-center gap-1.5 text-sm font-medium">
-                  ) : (
+                      <span>#{rev.revision}</span>
-                    <LuRotateCcw className="size-3.5" />
+                      {isCurrent ? (
-                  )}
+                        <span className="badge badge-primary badge-xs">Current</span>
-                </button>
+                      ) : null}
-              </li>
+                    </div>
-            ))}
+                    <div className="text-xs opacity-60">{formatTime(rev.created_at)}</div>
+                    <div className="text-xs opacity-70">
+                      {reasonLabel(rev.reason, rev.meta)}
+                    </div>
+                  </div>
+                  {!isCurrent ? (
+                    <button
+                      type="button"
+                      className="btn btn-ghost btn-xs shrink-0"
+                      title="Revert to this revision"
+                      disabled={revert.isPending}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setConfirmRevision(rev.revision);
+                      }}
+                    >
+                      {pendingRevision === rev.revision && revert.isPending ? (
+                        <span className="loading loading-spinner loading-xs" />
+                      ) : (
+                        <LuRotateCcw className="size-3.5" />
+                      )}
+                    </button>
+                  ) : null}
+                </li>
+              );
+            })}
           </ul>
         )}
       </div>
+      {confirmRev ? (
+        <ConfirmDialog
+          open
+          title={`Revert to revision #${confirmRev.revision}?`}
+          message={`This replaces the live workflow with revision #${confirmRev.revision} from ${formatTime(confirmRev.created_at)} and creates a new revision.`}
+          confirmLabel="Revert"
+          pending={revert.isPending}
+          onCancel={() => setConfirmRevision(null)}
+          onConfirm={() => doRevert(confirmRev.revision, false)}
+        />
+      ) : null}
       {warnings ? (
         <SaveWorkflowWarningsDialog
           warnings={warnings.items}

packages/web/src/components/workflow/WorkflowRevisionBanner.jsx

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { LuHistory } from "react-icons/lu";
+import { errorMessage } from "../../api/client.js";
+import { useRevertWorkflowRevision } from "../../api/hooks.js";
+import { formatTime } from "../../lib/format.jsx";
+import { useNotifications } from "../../notifications.jsx";
+import {
+  SaveWorkflowWarningsDialog,
+  isSaveWarningsError,
+  saveWarningsFromError,
+} from "./SaveWorkflowWarningsDialog.jsx";
+
+function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel,
+  confirmClass = "btn-warning",
+  pending,
+  onCancel,
+  onConfirm,
+}) {
+  if (!open) return null;
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-md">
+        <h3 className="font-bold">{title}</h3>
+        <p className="mt-2 text-sm opacity-70">{message}</p>
+        <div className="modal-action">
+          <button type="button" className="btn btn-ghost" onClick={onCancel}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`btn ${confirmClass}`}
+            disabled={pending}
+            onClick={onConfirm}
+          >
+            {pending ? <span className="loading loading-spinner loading-xs" /> : null}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onCancel}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}
+
+export function WorkflowRevisionBanner({
+  owner,
+  file,
+  revision,
+  createdAt,
+  onBackToCurrent,
+  onReverted,
+}) {
+  const { notify } = useNotifications();
+  const revert = useRevertWorkflowRevision();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [warnings, setWarnings] = useState(null);
+
+  function doRevert(saveAnyway = false) {
+    revert.mutate(
+      { owner, file, revision, saveAnyway },
+      {
+        onSuccess: (data) => {
+          setWarnings(null);
+          setConfirmOpen(false);
+          notify.success(`Restored revision #${revision}`);
+          onReverted?.(data);
+        },
+        onError: (err) => {
+          if (isSaveWarningsError(err)) {
+            setWarnings({ items: saveWarningsFromError(err) });
+            return;
+          }
+          notify.error(errorMessage(err));
+        },
+      },
+    );
+  }
+
+  return (
+    <>
+      <div className="alert alert-warning shrink-0 py-2">
+        <LuHistory className="size-4 shrink-0" />
+        <span className="text-sm">
+          Viewing revision <strong>#{revision}</strong> from {formatTime(createdAt)}
+        </span>
+        <div className="flex shrink-0 gap-2">
+          <button type="button" className="btn btn-ghost btn-xs" onClick={onBackToCurrent}>
+            Back to current
+          </button>
+          <button
+            type="button"
+            className="btn btn-warning btn-xs"
+            disabled={revert.isPending}
+            onClick={() => setConfirmOpen(true)}
+          >
+            Revert
+          </button>
+        </div>
+      </div>
+      <ConfirmDialog
+        open={confirmOpen}
+        title={`Revert to revision #${revision}?`}
+        message={`This replaces the live workflow with revision #${revision} from ${formatTime(createdAt)} and creates a new revision.`}
+        confirmLabel="Revert"
+        pending={revert.isPending}
+        onCancel={() => setConfirmOpen(false)}
+        onConfirm={() => doRevert(false)}
+      />
+      {warnings ? (
+        <SaveWorkflowWarningsDialog
+          warnings={warnings.items}
+          pending={revert.isPending}
+          onCancel={() => setWarnings(null)}
+          onSaveAnyway={() => doRevert(true)}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export { ConfirmDialog };

packages/web/src/pages/EventDetailPage.jsx

@@ -103,6 +103,12 @@ export function EventDetailPage() {
           <dt className="opacity-60">Duration</dt>
           <dd>{run.duration_ms != null ? `${run.duration_ms}ms` : "—"}</dd>
         </div>
+        <div>
+          <dt className="opacity-60">Revision</dt>
+          <dd>
+            {run.workflow_revision != null ? `#${run.workflow_revision}` : "unknown version"}
+          </dd>
+        </div>
       </dl>
 
       {run.error ? (
@@ -111,7 +117,7 @@ export function EventDetailPage() {
         </div>
       ) : null}
 
-      <div className="grid gap-2 sm:grid-cols-2">
+      <div className="grid gap-2 sm:grid-cols-3">
         <JsonViewBlock title="Run input (data)" value={run.input} />
         <JsonViewBlock title="Run output" value={runParts.output} />
         <JsonViewBlock title="Run context" value={runParts.context} />

packages/web/src/pages/EventsPage.jsx

@@ -50,6 +50,7 @@ export function EventsPage() {
               <tr>
                 <th>Status</th>
                 <th>Workflow</th>
+                <th>Revision</th>
                 <th>Trigger</th>
                 <th>Started</th>
                 <th>Duration</th>
@@ -66,6 +67,9 @@ export function EventsPage() {
                       {r.workflow_name || r.workflow}
                     </Link>
                   </td>
+                  <td className="text-xs opacity-70">
+                    {r.workflow_revision != null ? `#${r.workflow_revision}` : "unknown"}
+                  </td>
                   <td className="text-xs">
                     {r.trigger_type}
                     {r.trigger_detail ? ` · ${r.trigger_detail}` : ""}

packages/web/src/pages/WorkflowEditPage.jsx

@@ -8,6 +8,7 @@ import {
   useSaveWorkflow,
   useSetWorkflowEnabled,
   useWorkflow,
+  useWorkflowRevision,
 } from "../api/hooks.js";
 import { DuplicateWorkflowDialog } from "../components/DuplicateWorkflowDialog.jsx";
 import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
@@ -19,6 +20,10 @@ import {
   saveErrorMessage,
   saveWarningsFromError,
 } from "../components/workflow/SaveWorkflowWarningsDialog.jsx";
+import {
+  ConfirmDialog,
+  WorkflowRevisionBanner,
+} from "../components/workflow/WorkflowRevisionBanner.jsx";
 import { NEW_WORKFLOW_YAML, parseWorkflowYaml } from "../lib/workflow-doc.js";
 import { useNotifications } from "../notifications.jsx";
 
@@ -190,8 +195,14 @@ export function WorkflowEditPage() {
   const [testOpen, setTestOpen] = useState(false);
   const [duplicateOpen, setDuplicateOpen] = useState(false);
   const [saveWarnings, setSaveWarnings] = useState(null);
+  const [previewRevision, setPreviewRevision] = useState(null);
+  const [previewMeta, setPreviewMeta] = useState(null);
+  const [previewBaseline, setPreviewBaseline] = useState(null);
+  const [discardConfirm, setDiscardConfirm] = useState(null);
+  const [savePreviewConfirm, setSavePreviewConfirm] = useState(false);
   const routeKey = `${owner}/${file}`;
   const [activeKey, setActiveKey] = useState(routeKey);
+  const previewQuery = useWorkflowRevision(owner, file, previewRevision);
 
   if (activeKey !== routeKey) {
     setActiveKey(routeKey);
@@ -200,16 +211,89 @@ export function WorkflowEditPage() {
     setContentReady(false);
     setTestOpen(false);
     setDuplicateOpen(false);
+    setPreviewRevision(null);
+    setPreviewMeta(null);
+    setPreviewBaseline(null);
+    setDiscardConfirm(null);
+    setSavePreviewConfirm(false);
   }
 
   useEffect(() => {
     if (existing.isLoading) return;
+    if (previewRevision != null) return;
     if (!contentReady && existing.data?.content != null) {
       setContent(existing.data.content);
       setSavedYaml(existing.data.content);
       setContentReady(true);
     }
-  }, [existing.data, existing.isLoading, contentReady]);
+  }, [existing.data, existing.isLoading, contentReady, previewRevision]);
+
+  useEffect(() => {
+    if (previewRevision == null || previewQuery.isLoading) return;
+    if (previewQuery.data?.content != null) {
+      setContent(previewQuery.data.content);
+      setPreviewBaseline(previewQuery.data.content);
+      setPreviewMeta({ created_at: previewQuery.data.created_at });
+    }
+  }, [previewRevision, previewQuery.data, previewQuery.isLoading]);
+
+  function isDirty() {
+    const baseline = previewRevision != null ? previewBaseline : savedYaml;
+    return contentReady && baseline != null && content !== baseline;
+  }
+
+  function exitPreview() {
+    setPreviewRevision(null);
+    setPreviewMeta(null);
+    setPreviewBaseline(null);
+    existing.refetch().then((result) => {
+      const next = result.data?.content;
+      if (next != null) {
+        setContent(next);
+        setSavedYaml(next);
+      }
+    });
+  }
+
+  function applySelectRevision(revision, meta) {
+    if (revision == null) {
+      exitPreview();
+      return;
+    }
+    setPreviewRevision(revision);
+    if (meta?.created_at) {
+      setPreviewMeta({ created_at: meta.created_at });
+    }
+  }
+
+  function onSelectRevision(revision, meta) {
+    if (isDirty()) {
+      setDiscardConfirm(() => () => applySelectRevision(revision, meta));
+      return;
+    }
+    applySelectRevision(revision, meta);
+  }
+
+  function onBackToCurrent() {
+    if (isDirty()) {
+      setDiscardConfirm(() => () => exitPreview());
+      return;
+    }
+    exitPreview();
+  }
+
+  function onReverted() {
+    setPreviewRevision(null);
+    setPreviewMeta(null);
+    setPreviewBaseline(null);
+    existing.refetch().then((result) => {
+      const next = result.data?.content;
+      if (next != null) {
+        setContent(next);
+        setSavedYaml(next);
+      }
+    });
+  }
 
   function onSave(saveAnyway = false) {
     save.mutate(
@@ -218,7 +302,13 @@ export function WorkflowEditPage() {
         onSuccess: () => {
           setSavedYaml(content);
           setSaveWarnings(null);
+          setSavePreviewConfirm(false);
           notify.success("Workflow saved");
+          if (previewRevision != null) {
+            setPreviewRevision(null);
+            setPreviewMeta(null);
+            setPreviewBaseline(null);
+          }
         },
         onError: (err) => {
           if (isSaveWarningsError(err)) {
@@ -230,6 +320,15 @@ export function WorkflowEditPage() {
     );
   }
 
+  function onSaveRequest() {
+    const liveYaml = existing.data?.content;
+    if (previewRevision != null && content !== liveYaml) {
+      setSavePreviewConfirm(true);
+      return;
+    }
+    onSave(false);
+  }
+
   if (existing.isLoading) {
     return (
       <div className="flex min-h-[12rem] items-center justify-center">
@@ -254,6 +353,8 @@ export function WorkflowEditPage() {
   const yamlOk = !parsedDoc.parseError;
   const workflowName = parsedDoc.doc?.name?.trim();
   const pageTitle = workflowName ? `${workflowName}` : file;
+  const isPreviewing = previewRevision != null;
+  const previewLoading = isPreviewing && previewQuery.isLoading;
 
   return (
     <>
@@ -265,17 +366,20 @@ export function WorkflowEditPage() {
           </span>
         }
         savePending={save.isPending}
-        saveDisabled={!contentReady}
+        saveDisabled={!contentReady || previewLoading}
         saveError={save.isError && !saveWarnings ? saveErrorMessage(save.error) : null}
-        onSave={() => onSave(false)}
+        onSave={() => onSaveRequest()}
-        onTest={() => setTestOpen(true)}
+        onTest={isPreviewing ? undefined : () => setTestOpen(true)}
-        onDuplicate={() => setDuplicateOpen(true)}
+        onDuplicate={isPreviewing ? undefined : () => setDuplicateOpen(true)}
-        onToggleEnabled={() =>
+        onToggleEnabled={
-          setEnabled.mutate({
+          isPreviewing
-            owner,
+            ? undefined
-            file,
+            : () =>
-            enabled: existing.data?.parsed?.enabled === false,
+                setEnabled.mutate({
-          })
+                  owner,
+                  file,
+                  enabled: existing.data?.parsed?.enabled === false,
+                })
         }
         enabled={existing.data?.parsed?.enabled !== false}
         enablePending={setEnabled.isPending}
@@ -284,30 +388,40 @@ export function WorkflowEditPage() {
       >
         <div className="flex min-h-0 flex-1 gap-3">
           <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
-            <WorkflowVisualEditor
+            {isPreviewing && previewMeta ? (
-              yaml={content}
+              <WorkflowRevisionBanner
-              onYamlChange={setContent}
+                owner={owner}
-              owner={owner}
+                file={file}
-              file={file}
+                revision={previewRevision}
-              savedYaml={savedYaml}
+                createdAt={previewMeta.created_at}
-              showTest
+                onBackToCurrent={onBackToCurrent}
-              testOpen={testOpen}
+                onReverted={onReverted}
-              onTestClose={() => setTestOpen(false)}
+              />
-            />
+            ) : null}
+            {previewLoading ? (
+              <div className="flex min-h-[12rem] flex-1 items-center justify-center">
+                <span className="loading loading-spinner loading-lg" />
+              </div>
+            ) : (
+              <WorkflowVisualEditor
+                yaml={content}
+                onYamlChange={setContent}
+                owner={owner}
+                file={file}
+                savedYaml={savedYaml}
+                showTest={!isPreviewing}
+                testOpen={testOpen}
+                onTestClose={() => setTestOpen(false)}
+              />
+            )}
           </div>
           <div className="hidden w-64 shrink-0 xl:block">
             <WorkflowHistoryPanel
-                owner={owner}
+              owner={owner}
-                file={file}
+              file={file}
-                onReverted={() => {
+              previewRevision={previewRevision}
-                  existing.refetch().then((result) => {
+              onSelectRevision={onSelectRevision}
-                    const next = result.data?.content;
+              onReverted={onReverted}
-                    if (next != null) {
-                      setContent(next);
-                      setSavedYaml(next);
-                    }
-                  });
-                }}
             />
           </div>
         </div>
@@ -333,6 +447,33 @@ export function WorkflowEditPage() {
           onSaveAnyway={() => onSave(true)}
         />
       ) : null}
+      {savePreviewConfirm ? (
+        <ConfirmDialog
+          open
+          title="Save over current workflow?"
+          message="This will replace the current live workflow with the content you are viewing."
+          confirmLabel="Save"
+          confirmClass="btn-primary"
+          pending={save.isPending}
+          onCancel={() => setSavePreviewConfirm(false)}
+          onConfirm={() => onSave(false)}
+        />
+      ) : null}
+      {discardConfirm ? (
+        <ConfirmDialog
+          open
+          title="Discard unsaved changes?"
+          message="You have unsaved edits. Switching versions will discard them."
+          confirmLabel="Discard"
+          pending={false}
+          onCancel={() => setDiscardConfirm(null)}
+          onConfirm={() => {
+            const action = discardConfirm;
+            setDiscardConfirm(null);
+            action?.();
+          }}
+        />
+      ) : null}
     </>
   );
 }