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

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

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) => (
-              <li
-                key={rev.id}
-                className="hover:bg-base-200 flex items-start justify-between gap-2 rounded-lg px-2 py-2"
-              >
-                <div className="min-w-0">
-                  <div className="text-sm font-medium">#{rev.revision}</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>
-                <button
-                  type="button"
-                  className="btn btn-ghost btn-xs shrink-0"
-                  title="Revert to this revision"
-                  disabled={revert.isPending}
-                  onClick={() => doRevert(rev.revision)}
+            {items.map((rev, index) => {
+              const isCurrent = index === 0;
+              const isSelected =
+                previewRevision === rev.revision || (previewRevision == null && isCurrent);
+              return (
+                <li
+                  key={rev.id}
+                  className={`hover:bg-base-200 flex cursor-pointer items-start justify-between gap-2 rounded-lg px-2 py-2 ${
+                    isSelected ? "bg-base-200 ring-base-content/10 ring-1" : ""
+                  }`}
+                  onClick={() => onRowClick(rev)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      onRowClick(rev);
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
                 >
-                  {pendingRevision === rev.revision && revert.isPending ? (
-                    <span className="loading loading-spinner loading-xs" />
-                  ) : (
-                    <LuRotateCcw className="size-3.5" />
-                  )}
-                </button>
-              </li>
-            ))}
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-1.5 text-sm font-medium">
+                      <span>#{rev.revision}</span>
+                      {isCurrent ? (
+                        <span className="badge badge-primary badge-xs">Current</span>
+                      ) : null}
+                    </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 };