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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-20 22:31:18 +07:00
parent f68376587e
commit 84f29057df
10 changed files with 521 additions and 63 deletions
@@ -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}
@@ -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 };
@@ -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} />
@@ -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}` : ""}
@@ -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)}
-        onTest={() => setTestOpen(true)}
-        onDuplicate={() => setDuplicateOpen(true)}
-        onToggleEnabled={() =>
-          setEnabled.mutate({
-            owner,
-            file,
-            enabled: existing.data?.parsed?.enabled === false,
-          })
+        onSave={() => onSaveRequest()}
+        onTest={isPreviewing ? undefined : () => setTestOpen(true)}
+        onDuplicate={isPreviewing ? undefined : () => setDuplicateOpen(true)}
+        onToggleEnabled={
+          isPreviewing
+            ? undefined
+            : () =>
+                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
-              yaml={content}
-              onYamlChange={setContent}
-              owner={owner}
-              file={file}
-              savedYaml={savedYaml}
-              showTest
-              testOpen={testOpen}
-              onTestClose={() => setTestOpen(false)}
-            />
+            {isPreviewing && previewMeta ? (
+              <WorkflowRevisionBanner
+                owner={owner}
+                file={file}
+                revision={previewRevision}
+                createdAt={previewMeta.created_at}
+                onBackToCurrent={onBackToCurrent}
+                onReverted={onReverted}
+              />
+            ) : 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}
-                file={file}
-                onReverted={() => {
-                  existing.refetch().then((result) => {
-                    const next = result.data?.content;
-                    if (next != null) {
-                      setContent(next);
-                      setSavedYaml(next);
-                    }
-                  });
-                }}
+              owner={owner}
+              file={file}
+              previewRevision={previewRevision}
+              onSelectRevision={onSelectRevision}
+              onReverted={onReverted}
            />
          </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}
    </>
  );
 }