feat(workflows): add revision history, trash, UUID naming, and backup

- Store up to 50 revisions per workflow in SQLite with normalized SHA dedup
- Soft-delete workflows to trash (7-day retention) with restore and permanent purge
- Assign UUID filenames for new and duplicated workflows; show name + file in UI
- Warn on invalid YAML, unknown scripts, and plaintext secrets with save-anyway option
- Add workflow backup zip (workflows + plugins) and merge/replace restore
- Trash page, history panel on editor, and smoke test

Co-authored-by: Nasyarobby Putra <nasyarobby@gmail.com>

packages/web/src/components/DuplicateWorkflowDialog.jsx

@@ -1,44 +1,22 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useState } from "react";
 import { errorMessage } from "../api/client.js";
-import { useDuplicateWorkflow, useOwners, useWorkflows } from "../api/hooks.js";
-import { ensureWorkflowFilename, suggestCopyFilename } from "../lib/workflow-doc.js";
+import { useDuplicateWorkflow, useOwners } from "../api/hooks.js";
 import { useNotifications } from "../notifications.jsx";
 
-const EMPTY_WORKFLOWS = [];
-
 export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplicated }) {
   const { notify } = useNotifications();
   const { data: owners = [] } = useOwners();
-  const { data: workflows = EMPTY_WORKFLOWS } = useWorkflows();
   const duplicate = useDuplicateWorkflow();
   const [destOwner, setDestOwner] = useState(source.owner);
-  const [destFile, setDestFile] = useState(() => suggestCopyFilename(source.file));
-  const fileTouched = useRef(false);
-
-  const existingFiles = useMemo(
-    () => workflows.filter((w) => w.owner === destOwner).map((w) => w.file),
-    [workflows, destOwner],
-  );
-
-  useEffect(() => {
-    if (fileTouched.current) return;
-    setDestFile(suggestCopyFilename(source.file, existingFiles));
-  }, [source.file, existingFiles]);
-
-  const yamlFile = ensureWorkflowFilename(destFile);
-  const sameAsSource = destOwner === source.owner && yamlFile === source.file;
-  const exists = existingFiles.includes(yamlFile);
-  const canSubmit = Boolean(destOwner && yamlFile) && !sameAsSource && !exists && !duplicate.isPending;
 
   function onSubmit(e) {
     e.preventDefault();
-    if (!canSubmit) return;
+    if (destOwner === source.owner && duplicate.isPending) return;
     duplicate.mutate(
       {
         owner: source.owner,
         file: source.file,
         destOwner,
-        destFile: yamlFile,
       },
       {
         onSuccess: (data) => {
@@ -54,11 +32,13 @@ export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplic
       <div className="modal-box">
         <h3 className="font-bold">Duplicate {source.key}?</h3>
         <p className="mt-2 text-sm opacity-70">
-          The copy starts disabled. HTTP paths are rewritten when staying under the same owner so
-          triggers do not collide.
+          A new UUID filename is assigned automatically. The copy starts disabled. HTTP paths are
+          rewritten when staying under the same owner so triggers do not collide.
         </p>
         {warnUnsaved ? (
-          <p className="text-warning mt-2 text-sm">The copy uses the last saved YAML, not unsaved edits.</p>
+          <p className="text-warning mt-2 text-sm">
+            The copy uses the last saved YAML, not unsaved edits.
+          </p>
         ) : null}
         <form className="mt-4 space-y-3" onSubmit={onSubmit}>
           <label className="form-control w-full">
@@ -76,24 +56,6 @@ export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplic
               ))}
             </datalist>
           </label>
-          <label className="form-control w-full">
-            <span className="label py-0 text-sm">File</span>
-            <input
-              className="input input-sm w-full font-mono"
-              placeholder="file.yaml"
-              value={destFile}
-              onChange={(e) => {
-                fileTouched.current = true;
-                setDestFile(e.target.value);
-              }}
-              required
-            />
-          </label>
-          {sameAsSource ? (
-            <p className="text-error text-sm">Choose a different owner or filename.</p>
-          ) : exists ? (
-            <p className="text-error text-sm">{destOwner}/{yamlFile} already exists.</p>
-          ) : null}
           {duplicate.isError ? (
             <p className="text-error text-sm">{errorMessage(duplicate.error)}</p>
           ) : null}
@@ -101,7 +63,7 @@ export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplic
             <button type="button" className="btn btn-ghost" onClick={onClose}>
               Cancel
             </button>
-            <button type="submit" className="btn btn-primary" disabled={!canSubmit}>
+            <button type="submit" className="btn btn-primary" disabled={duplicate.isPending}>
               {duplicate.isPending ? (
                 <span className="loading loading-spinner loading-xs" />
               ) : null}

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

@@ -0,0 +1,67 @@
+import { errorMessage } from "../../api/client.js";
+
+export function SaveWorkflowWarningsDialog({ warnings, pending, onCancel, onSaveAnyway }) {
+  if (!warnings?.length) return null;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box max-w-lg">
+        <h3 className="font-bold">Save with warnings?</h3>
+        <p className="mt-2 text-sm opacity-70">
+          The workflow has issues that may prevent it from running correctly. You can fix them
+          first, or save anyway.
+        </p>
+        <ul className="mt-3 max-h-48 space-y-2 overflow-y-auto text-sm">
+          {warnings.map((w, i) => (
+            <li key={i} className="rounded-box bg-base-200 px-3 py-2">
+              <span className="badge badge-warning badge-xs mr-2">{w.code}</span>
+              {w.message}
+              {w.path ? (
+                <span className="mt-1 block font-mono text-xs opacity-60">{w.path}</span>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+        <div className="modal-action">
+          <button type="button" className="btn btn-ghost" onClick={onCancel}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn btn-warning"
+            disabled={pending}
+            onClick={onSaveAnyway}
+          >
+            {pending ? <span className="loading loading-spinner loading-xs" /> : null}
+            Save anyway
+          </button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={onCancel}>
+          close
+        </button>
+      </form>
+    </dialog>
+  );
+}
+
+/**
+ * Extract validation warnings from a failed save mutation error.
+ * @param {unknown} error
+ */
+export function saveWarningsFromError(error) {
+  const warnings = error?.response?.data?.warnings;
+  return Array.isArray(warnings) ? warnings : null;
+}
+
+export function isSaveWarningsError(error) {
+  return error?.response?.status === 422 && saveWarningsFromError(error);
+}
+
+export function saveErrorMessage(error) {
+  if (isSaveWarningsError(error)) {
+    return "Workflow has validation warnings";
+  }
+  return errorMessage(error);
+}

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

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { LuHistory, LuRotateCcw } from "react-icons/lu";
+import { errorMessage } from "../../api/client.js";
+import {
+  useRevertWorkflowRevision,
+  useWorkflowRevisions,
+} from "../../api/hooks.js";
+import { formatTime } from "../../lib/format.jsx";
+import { useNotifications } from "../../notifications.jsx";
+import {
+  SaveWorkflowWarningsDialog,
+  isSaveWarningsError,
+  saveWarningsFromError,
+} from "./SaveWorkflowWarningsDialog.jsx";
+
+function reasonLabel(reason, meta) {
+  if (reason === "duplicated" && meta?.from) return `duplicated from ${meta.from}`;
+  if (reason === "revert" && meta?.fromRevision != null) {
+    return `reverted from #${meta.fromRevision}`;
+  }
+  if (reason === "restored-from-trash") return "restored from trash";
+  return reason ?? "save";
+}
+
+export function WorkflowHistoryPanel({ owner, file, onReverted }) {
+  const { notify } = useNotifications();
+  const revisions = useWorkflowRevisions(owner, file);
+  const revert = useRevertWorkflowRevision();
+  const [pendingRevision, setPendingRevision] = useState(null);
+  const [warnings, setWarnings] = useState(null);
+
+  function doRevert(revision, saveAnyway = false) {
+    setPendingRevision(revision);
+    revert.mutate(
+      { owner, file, revision, saveAnyway },
+      {
+        onSuccess: (data) => {
+          setWarnings(null);
+          setPendingRevision(null);
+          notify.success(`Restored revision #${revision}`);
+          onReverted?.(data);
+        },
+        onError: (err) => {
+          setPendingRevision(null);
+          if (isSaveWarningsError(err)) {
+            setWarnings({ revision, items: saveWarningsFromError(err) });
+            return;
+          }
+          notify.error(errorMessage(err));
+        },
+      },
+    );
+  }
+
+  const items = revisions.data?.revisions ?? [];
+
+  return (
+    <div className="border-base-300 flex h-full min-h-0 flex-col rounded-box border bg-base-100">
+      <div className="border-base-300 flex items-center gap-2 border-b px-3 py-2">
+        <LuHistory className="size-4 opacity-70" />
+        <span className="text-sm font-medium">History</span>
+        <span className="text-xs opacity-50">({items.length} / 50)</span>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto p-2">
+        {revisions.isLoading ? (
+          <div className="flex justify-center p-4">
+            <span className="loading loading-spinner loading-sm" />
+          </div>
+        ) : !items.length ? (
+          <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)}
+                >
+                  {pendingRevision === rev.revision && revert.isPending ? (
+                    <span className="loading loading-spinner loading-xs" />
+                  ) : (
+                    <LuRotateCcw className="size-3.5" />
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {warnings ? (
+        <SaveWorkflowWarningsDialog
+          warnings={warnings.items}
+          pending={revert.isPending}
+          onCancel={() => setWarnings(null)}
+          onSaveAnyway={() => doRevert(warnings.revision, true)}
+        />
+      ) : null}
+    </div>
+  );
+}