feat(web): add workflow creation and editing functionality

- Introduced WorkflowNewPage and WorkflowEditPage for creating and editing workflows.
- Updated App component to include new routes for workflow management.
- Enhanced workflow diagram generation in workflow-mermaid.js for better visualization.
- Modified WorkflowsPage to support navigation to the new workflow pages.
- Improved HomePage links to direct users to the correct workflow edit paths.

packages/web/src/App.jsx

@@ -9,6 +9,7 @@ import { ScriptsPage } from "./pages/ScriptsPage.jsx";
 import { ScriptDryRunPage } from "./pages/ScriptDryRunPage.jsx";
 import { ScriptEditPage, ScriptNewPage } from "./pages/ScriptEditPage.jsx";
 import { WorkflowsPage } from "./pages/WorkflowsPage.jsx";
+import { WorkflowEditPage, WorkflowNewPage } from "./pages/WorkflowEditPage.jsx";
 import { EventsPage } from "./pages/EventsPage.jsx";
 import { EventDetailPage } from "./pages/EventDetailPage.jsx";
 import { UsersPage } from "./pages/UsersPage.jsx";
@@ -51,6 +52,8 @@ export function App() {
         <Route path="/scripts/:name/dry-run" element={<ScriptDryRunPage />} />
         <Route path="/scripts/:name/edit" element={<ScriptEditPage />} />
         <Route path="/workflows" element={<WorkflowsPage />} />
+        <Route path="/workflows/new" element={<WorkflowNewPage />} />
+        <Route path="/workflows/:owner/:file/edit" element={<WorkflowEditPage />} />
         <Route path="/events" element={<EventsPage />} />
         <Route path="/events/:id" element={<EventDetailPage />} />
         {user.role === "admin" ? (

packages/web/src/lib/workflow-mermaid.js

@@ -1,12 +1,3 @@
-function sanitize(label) {
-  const cleaned = String(label ?? "")
-    .replace(/[^A-Za-z0-9]+/g, "_")
-    .replace(/_+/g, "_")
-    .replace(/^_|_$/g, "")
-    .slice(0, 48);
-  return cleaned || "node";
-}
-
 function parseStep(step) {
   if (typeof step === "string") {
     return { script: step, id: null, needs: null };
@@ -32,27 +23,35 @@ function parentIdsFromNeeds(needs) {
   return [];
 }
 
-export function workflowToArchitecture(parsed) {
+function mermaidLabel(text) {
+  return String(text ?? "")
+    .replace(/"/g, "#quot;")
+    .replace(/[\[\]]/g, " ")
+    .trim() || "node";
+}
+
+function triggerLabel(t) {
+  const type = String(t?.type ?? "").toLowerCase();
+  if (type === "cron") return `cron ${t.schedule ?? ""}`.trim();
+  const method = t?.method ?? "POST";
+  const path = t?.path ?? "";
+  return `${method} ${path}`.trim();
+}
+
+export function workflowToFlowchart(parsed) {
   /** @type {Record<string, string>} */
   const scriptIds = {};
   if (!parsed || typeof parsed !== "object") {
     return { chart: "", scriptIds };
   }
 
-  const groupId = "wf";
+  const lines = ["flowchart LR"];
-  const name = sanitize(parsed.name || "workflow");
-  const lines = ["architecture-beta", `    group ${groupId}[${name}]`];
 
   const triggerIds = [];
   const triggers = Array.isArray(parsed.triggers) ? parsed.triggers : [];
   triggers.forEach((t, i) => {
     const id = `t${i}`;
-    const icon = t?.type === "cron" ? "cloud" : "internet";
+    lines.push(`  ${id}(["${mermaidLabel(triggerLabel(t))}"])`);
-    const label =
-      t?.type === "cron"
-        ? `cron ${t.schedule ?? ""}`
-        : `${t?.method ?? "POST"} ${t?.path ?? ""}`;
-    lines.push(`    service ${id}(${icon})[${sanitize(label)}] in ${groupId}`);
     triggerIds.push(id);
   });
 
@@ -74,9 +73,8 @@ export function workflowToArchitecture(parsed) {
 
   for (const s of parsedSteps) {
     scriptIds[s.mermaidId] = s.script;
-    lines.push(
+    const label = s.id ? `${s.id}: ${s.script}` : s.script;
-      `    service ${s.mermaidId}(server)[${sanitize(s.id || s.script)}] in ${groupId}`,
+    lines.push(`  ${s.mermaidId}["${mermaidLabel(label)}"]`);
-    );
   }
 
   if (dagMode) {
@@ -89,12 +87,12 @@ export function workflowToArchitecture(parsed) {
       }
       for (const pid of parents) {
         const from = idToMermaid[pid];
-        if (from) lines.push(`    ${from}:R -- L:${s.mermaidId}`);
+        if (from) lines.push(`  ${from} --> ${s.mermaidId}`);
       }
     }
     for (const tid of triggerIds) {
       for (const rid of roots) {
-        lines.push(`    ${tid}:R -- L:${rid}`);
+        lines.push(`  ${tid} --> ${rid}`);
       }
     }
   } else {
@@ -102,18 +100,18 @@ export function workflowToArchitecture(parsed) {
     let firstScript = null;
     for (const s of parsedSteps) {
       if (!firstScript) firstScript = s.mermaidId;
-      if (prev) lines.push(`    ${prev}:R -- L:${s.mermaidId}`);
+      if (prev) lines.push(`  ${prev} --> ${s.mermaidId}`);
       prev = s.mermaidId;
     }
     if (firstScript) {
       for (const tid of triggerIds) {
-        lines.push(`    ${tid}:R -- L:${firstScript}`);
+        lines.push(`  ${tid} --> ${firstScript}`);
       }
     }
   }
 
-  if (triggerIds.length >= 2) {
+  if (lines.length === 1) {
-    lines.push(`    align column ${triggerIds.join(" ")}`);
+    return { chart: "", scriptIds };
   }
 
   return { chart: lines.join("\n"), scriptIds };

packages/web/src/pages/HomePage.jsx

@@ -70,7 +70,7 @@ export function HomePage() {
               <li key={w.key}>
                 <Link
                   className="link link-error"
-                  to={`/workflows?edit=${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}`}
+                  to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
                 >
                   {w.key}: {w.loadError}
                 </Link>

packages/web/src/pages/WorkflowEditPage.jsx

@@ -0,0 +1,229 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { parse as parseYaml } from "yaml";
+import { LuArrowLeft, LuSave } from "react-icons/lu";
+import { errorMessage } from "../api/client.js";
+import { useOwners, useSaveWorkflow, useWorkflow } from "../api/hooks.js";
+import { CodeEditor } from "../components/CodeEditor.jsx";
+import { MermaidDiagram } from "../components/MermaidDiagram.jsx";
+import { workflowToFlowchart } from "../lib/workflow-mermaid.js";
+
+const NEW_YAML = `name: new workflow
+scripts:
+  - get-current-time.js
+triggers:
+  - type: HTTP
+    method: POST
+    path: /new
+`;
+
+function useYamlPreview(content) {
+  return useMemo(() => {
+    try {
+      const parsedYaml = parseYaml(content);
+      return {
+        parsed: parsedYaml,
+        parseError: null,
+        mermaid: workflowToFlowchart(parsedYaml),
+      };
+    } catch (err) {
+      return {
+        parsed: null,
+        parseError: err instanceof Error ? err.message : String(err),
+        mermaid: { chart: "", scriptIds: {} },
+      };
+    }
+  }, [content]);
+}
+
+function WorkflowEditorLayout({
+  title,
+  backTo = "/workflows",
+  savePending,
+  saveDisabled,
+  saveError,
+  saveSuccess,
+  formId,
+  children,
+}) {
+  return (
+    <div className="flex h-[calc(100vh-5rem)] min-h-[32rem] flex-col gap-3">
+      <div className="flex shrink-0 flex-wrap items-center gap-2">
+        <Link to={backTo} className="btn btn-ghost btn-sm btn-square" aria-label="Back">
+          <LuArrowLeft className="size-4" />
+        </Link>
+        <h1 className="truncate text-xl font-semibold">{title}</h1>
+        <div className="flex-1" />
+        <button
+          type="submit"
+          form={formId}
+          className="btn btn-primary btn-sm"
+          disabled={savePending || saveDisabled}
+        >
+          <LuSave className="size-4" />
+          Save
+        </button>
+      </div>
+      {children}
+      {saveError ? (
+        <p className="text-error text-sm shrink-0">{saveError}</p>
+      ) : null}
+      {saveSuccess ? (
+        <p className="text-success text-sm shrink-0">Workflow saved</p>
+      ) : null}
+    </div>
+  );
+}
+
+function WorkflowYamlAndDiagram({ content, onChange, parseError, mermaid, parsed }) {
+  return (
+    <div className="grid min-h-0 flex-1 gap-3 lg:grid-cols-2">
+      <div className="min-h-0">
+        <CodeEditor language="yaml" value={content} onChange={onChange} height="100%" />
+      </div>
+      <div className="min-h-0 overflow-auto">
+        {parseError ? (
+          <p className="text-error text-sm">{parseError}</p>
+        ) : (
+          <MermaidDiagram chart={mermaid.chart} scriptIds={mermaid.scriptIds} />
+        )}
+        {parsed?.name ? (
+          <p className="text-sm opacity-70 mt-2">{parsed.name}</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function WorkflowNewPage() {
+  const navigate = useNavigate();
+  const { data: owners = [] } = useOwners();
+  const [owner, setOwner] = useState("");
+  const [file, setFile] = useState("");
+  const [content, setContent] = useState(NEW_YAML);
+  const save = useSaveWorkflow();
+  const { parsed, parseError, mermaid } = useYamlPreview(content);
+
+  useEffect(() => {
+    if (!owner && owners[0]) setOwner(owners[0]);
+  }, [owner, owners]);
+
+  function onSave(e) {
+    e.preventDefault();
+    const yamlFile = file.endsWith(".yaml") || file.endsWith(".yml") ? file : `${file}.yaml`;
+    save.mutate(
+      { owner, file: yamlFile, content },
+      {
+        onSuccess: () =>
+          navigate(
+            `/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(yamlFile)}/edit`,
+          ),
+      },
+    );
+  }
+
+  return (
+    <WorkflowEditorLayout
+      title="New workflow"
+      formId="workflow-edit-form"
+      savePending={save.isPending}
+      saveDisabled={!owner || !file}
+      saveError={save.isError ? errorMessage(save.error) : null}
+    >
+      <form
+        id="workflow-edit-form"
+        onSubmit={onSave}
+        className="flex min-h-0 flex-1 flex-col gap-3"
+      >
+        <div className="flex shrink-0 flex-col sm:flex-row gap-2">
+          <input
+            className="input input-sm w-full sm:max-w-xs"
+            placeholder="owner"
+            value={owner}
+            onChange={(e) => setOwner(e.target.value)}
+            required
+          />
+          <input
+            className="input input-sm w-full sm:max-w-xs"
+            placeholder="file.yaml"
+            value={file}
+            onChange={(e) => setFile(e.target.value)}
+            required
+          />
+        </div>
+        <WorkflowYamlAndDiagram
+          content={content}
+          onChange={setContent}
+          parseError={parseError}
+          mermaid={mermaid}
+          parsed={parsed}
+        />
+      </form>
+    </WorkflowEditorLayout>
+  );
+}
+
+export function WorkflowEditPage() {
+  const { owner: rawOwner, file: rawFile } = useParams();
+  const owner = decodeURIComponent(rawOwner ?? "");
+  const file = decodeURIComponent(rawFile ?? "");
+  const existing = useWorkflow(owner, file);
+  const save = useSaveWorkflow();
+  const [content, setContent] = useState("");
+  const [contentReady, setContentReady] = useState(false);
+  const { parsed, parseError, mermaid } = useYamlPreview(content);
+
+  useEffect(() => {
+    if (existing.isLoading) return;
+    if (existing.data?.content != null) {
+      setContent(existing.data.content);
+      setContentReady(true);
+    }
+  }, [existing.data, existing.isLoading]);
+
+  function onSave(e) {
+    e.preventDefault();
+    save.mutate({ owner, file, content });
+  }
+
+  if (existing.isLoading) {
+    return (
+      <div className="flex min-h-[12rem] items-center justify-center">
+        <span className="loading loading-spinner loading-lg" />
+      </div>
+    );
+  }
+
+  if (existing.isError) {
+    return (
+      <div className="space-y-3">
+        <Link to="/workflows" className="btn btn-ghost btn-sm">
+          <LuArrowLeft className="size-4" />
+          Back
+        </Link>
+        <p className="text-error">Workflow not found</p>
+      </div>
+    );
+  }
+
+  return (
+    <WorkflowEditorLayout
+      title={`${owner}/${file}`}
+      formId="workflow-edit-form"
+      savePending={save.isPending}
+      saveDisabled={!contentReady}
+      saveError={save.isError ? errorMessage(save.error) : null}
+      saveSuccess={save.isSuccess}
+    >
+      <form id="workflow-edit-form" onSubmit={onSave} className="flex min-h-0 flex-1 flex-col">
+        <WorkflowYamlAndDiagram
+          content={content}
+          onChange={setContent}
+          parseError={parseError}
+          mermaid={mermaid}
+          parsed={parsed}
+        />
+      </form>
+    </WorkflowEditorLayout>
+  );
+}

packages/web/src/pages/WorkflowsPage.jsx

@@ -1,127 +1,38 @@
-import { useEffect, useMemo, useState } from "react";
+import { useState } from "react";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, Navigate, useNavigate, useSearchParams } from "react-router-dom";
-import { parse as parseYaml } from "yaml";
+import { LuActivity, LuPencil, LuPlay, LuPlus, LuRefreshCw, LuTrash2 } from "react-icons/lu";
-import {
-  LuActivity,
-  LuPencil,
-  LuPlay,
-  LuPlus,
-  LuRefreshCw,
-  LuSave,
-  LuTrash2,
-  LuX,
-} from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import {
   useDeleteWorkflow,
-  useOwners,
   useReregisterWorkflows,
   useRunWorkflow,
-  useSaveWorkflow,
-  useWorkflow,
   useWorkflows,
 } from "../api/hooks.js";
-import { CodeEditor } from "../components/CodeEditor.jsx";
-import { MermaidDiagram } from "../components/MermaidDiagram.jsx";
 import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
-import { workflowToArchitecture } from "../lib/workflow-mermaid.js";
-
-const NEW_YAML = `name: new workflow
-scripts:
-  - get-current-time.js
-triggers:
-  - type: HTTP
-    method: POST
-    path: /new
-`;
 
 export function WorkflowsPage() {
   const navigate = useNavigate();
-  const [params, setParams] = useSearchParams();
+  const [params] = useSearchParams();
   const editParam = params.get("edit");
   const { data: workflows = [], isLoading } = useWorkflows();
-  const { data: owners = [] } = useOwners();
-  const [mode, setMode] = useState(null);
-  const [owner, setOwner] = useState("default");
-  const [file, setFile] = useState("");
-  const [content, setContent] = useState("");
   const [confirmDelete, setConfirmDelete] = useState(null);
   const [runError, setRunError] = useState(null);
-
-  const existing = useWorkflow(
-    mode === "edit" ? owner : null,
-    mode === "edit" ? file : null,
-    mode === "edit",
-  );
-  const save = useSaveWorkflow();
   const del = useDeleteWorkflow();
   const run = useRunWorkflow();
   const reregister = useReregisterWorkflows();
 
-  useEffect(() => {
+  if (editParam) {
-    if (!editParam) return;
     const slash = editParam.indexOf("/");
-    if (slash === -1) return;
+    if (slash !== -1) {
-    setMode("edit");
+      const owner = editParam.slice(0, slash);
-    setOwner(editParam.slice(0, slash));
+      const file = editParam.slice(slash + 1);
-    setFile(editParam.slice(slash + 1));
+      return (
-  }, [editParam]);
+        <Navigate
-
+          to={`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(file)}/edit`}
-  useEffect(() => {
+          replace
-    if (mode === "edit" && existing.data?.content != null) {
+        />
-      setContent(existing.data.content);
+      );
     }
-  }, [mode, existing.data]);
-
-  const { parsed, parseError, mermaid } = useMemo(() => {
-    try {
-      const parsedYaml = parseYaml(content);
-      const arch = workflowToArchitecture(parsedYaml);
-      return { parsed: parsedYaml, parseError: null, mermaid: arch };
-    } catch (err) {
-      return {
-        parsed: null,
-        parseError: err instanceof Error ? err.message : String(err),
-        mermaid: { chart: "", scriptIds: {} },
-      };
-    }
-  }, [content]);
-
-  function openAdd() {
-    setMode("add");
-    setOwner(owners[0] || "default");
-    setFile("");
-    setContent(NEW_YAML);
-    setParams({});
-  }
-
-  function openEdit(w) {
-    setMode("edit");
-    setOwner(w.owner);
-    setFile(w.file);
-    setParams({ edit: `${w.owner}/${w.file}` });
-  }
-
-  function closeForm() {
-    setMode(null);
-    setFile("");
-    setContent("");
-    setParams({});
-  }
-
-  function onSave(e) {
-    e.preventDefault();
-    const yamlFile = file.endsWith(".yaml") || file.endsWith(".yml") ? file : `${file}.yaml`;
-    save.mutate(
-      { owner, file: yamlFile, content },
-      {
-        onSuccess: () => {
-          setMode("edit");
-          setFile(yamlFile);
-          setParams({ edit: `${owner}/${yamlFile}` });
-        },
-      },
-    );
   }
 
   function onRun(w) {
@@ -145,9 +56,7 @@ export function WorkflowsPage() {
   }
 
   const runningKey =
-    run.isPending && run.variables
+    run.isPending && run.variables ? `${run.variables.owner}/${run.variables.file}` : null;
-      ? `${run.variables.owner}/${run.variables.file}`
-      : null;
 
   return (
     <div className="space-y-4">
@@ -168,10 +77,10 @@ export function WorkflowsPage() {
             )}
             Reregister
           </button>
-          <button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
+          <Link to="/workflows/new" className="btn btn-primary btn-sm">
             <LuPlus className="size-4" />
             Add
-          </button>
+          </Link>
         </div>
       </div>
 
@@ -200,7 +109,14 @@ export function WorkflowsPage() {
             <tbody>
               {workflows.map((w) => (
                 <tr key={w.key} className="hover">
-                  <td>{w.name}</td>
+                  <td>
+                    <Link
+                      className="link"
+                      to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
+                    >
+                      {w.name}
+                    </Link>
+                  </td>
                   <td className="font-mono text-xs">{w.owner}</td>
                   <td>
                     <WorkflowStatusBadge workflow={w} />
@@ -231,14 +147,13 @@ export function WorkflowsPage() {
                     >
                       <LuActivity className="size-4" />
                     </Link>
-                    <button
+                    <Link
-                      type="button"
                       className="btn btn-ghost btn-xs"
                       title="Edit"
-                      onClick={() => openEdit(w)}
+                      to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
                     >
                       <LuPencil className="size-4" />
-                    </button>
+                    </Link>
                     <button
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
@@ -255,64 +170,6 @@ export function WorkflowsPage() {
         </div>
       )}
 
-      {mode ? (
-        <form onSubmit={onSave} className="space-y-3">
-          <div className="flex items-center justify-between">
-            <h2 className="font-semibold">
-              {mode === "add" ? "New workflow" : `${owner}/${file}`}
-            </h2>
-            <button type="button" className="btn btn-ghost btn-sm btn-square" onClick={closeForm} aria-label="Close">
-              <LuX className="size-4" />
-            </button>
-          </div>
-          {mode === "add" ? (
-            <div className="flex flex-col sm:flex-row gap-2">
-              <input
-                className="input input-sm w-full sm:max-w-xs"
-                placeholder="owner"
-                value={owner}
-                onChange={(e) => setOwner(e.target.value)}
-                required
-              />
-              <input
-                className="input input-sm w-full sm:max-w-xs"
-                placeholder="file.yaml"
-                value={file}
-                onChange={(e) => setFile(e.target.value)}
-                required
-              />
-            </div>
-          ) : null}
-          {mode === "edit" && existing.isLoading ? (
-            <span className="loading loading-spinner" />
-          ) : (
-            <div className="grid gap-3 lg:grid-cols-2">
-              <CodeEditor language="yaml" value={content} onChange={setContent} />
-              <div>
-                {parseError ? (
-                  <p className="text-error text-sm">{parseError}</p>
-                ) : (
-                  <MermaidDiagram
-                    chart={mermaid.chart}
-                    scriptIds={mermaid.scriptIds}
-                  />
-                )}
-                {parsed?.name ? (
-                  <p className="text-sm opacity-70 mt-2">{parsed.name}</p>
-                ) : null}
-              </div>
-            </div>
-          )}
-          {save.isError ? (
-            <p className="text-error text-sm">{errorMessage(save.error)}</p>
-          ) : null}
-          <button type="submit" className="btn btn-primary btn-sm" disabled={save.isPending}>
-            <LuSave className="size-4" />
-            Save
-          </button>
-        </form>
-      ) : null}
-
       {confirmDelete ? (
         <dialog className="modal modal-open">
           <div className="modal-box">
@@ -331,14 +188,7 @@ export function WorkflowsPage() {
                 onClick={() =>
                   del.mutate(
                     { owner: confirmDelete.owner, file: confirmDelete.file },
-                    {
+                    { onSuccess: () => setConfirmDelete(null) },
-                      onSuccess: () => {
-                        if (owner === confirmDelete.owner && file === confirmDelete.file) {
-                          closeForm();
-                        }
-                        setConfirmDelete(null);
-                      },
-                    },
                   )
                 }
               >