feat: add script dry-run functionality and enhance script management

- Introduced a new dry-run endpoint for executing scripts without saving changes.
- Implemented a dedicated ScriptDryRunPage for user interaction with dry-run functionality.
- Enhanced ScriptsPage to support navigation to the dry-run feature.
- Added LogViewer component for displaying logs during script execution.
- Created ScriptEditPage for editing scripts with integrated dry-run capabilities.
- Updated workflows to include new scripts for fetching and notifying data.
- Improved overall user experience with better navigation and error handling.

packages/web/src/pages/EventDetailPage.jsx

@@ -1,13 +1,12 @@
-import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { LuArrowLeft } from "react-icons/lu";
 import { useRun } from "../api/hooks.js";
-import { formatTime, levelName, StatusBadge } from "../lib/format.jsx";
+import { LogViewer } from "../components/LogViewer.jsx";
+import { formatTime, StatusBadge } from "../lib/format.jsx";
 
 export function EventDetailPage() {
   const { id } = useParams();
   const { data: run, isLoading, error } = useRun(id);
-  const [wordWrap, setWordWrap] = useState(true);
 
   if (isLoading) return <span className="loading loading-spinner loading-lg" />;
   if (error || !run) return <p className="text-error">Event not found</p>;
@@ -68,7 +67,7 @@ export function EventDetailPage() {
                 <tr key={s.id}>
                   <td>{s.step_index}</td>
                   <td className="font-mono">
-                    <Link className="link" to={`/scripts?edit=${encodeURIComponent(s.script)}`}>
+                    <Link className="link" to={`/scripts/${encodeURIComponent(s.script)}/edit`}>
                       {s.script}
                     </Link>
                   </td>
@@ -84,46 +83,7 @@ export function EventDetailPage() {
         </div>
       </section>
 
-      <section>
-        <div className="mb-2 flex items-center justify-between gap-2">
-          <h2 className="font-semibold">Logs</h2>
-          <label className="label cursor-pointer gap-2 py-0">
-            <span className="label-text text-sm">Word wrap</span>
-            <input
-              type="checkbox"
-              className="checkbox checkbox-sm"
-              checked={wordWrap}
-              onChange={(e) => setWordWrap(e.target.checked)}
-            />
-          </label>
-        </div>
-        <div className="mockup-code text-xs max-h-[50vh] overflow-auto">
-          {(run.logs ?? []).length === 0 ? (
-            <div className="flex gap-3 px-5 py-0.5 font-mono opacity-50">
-              <span className="w-12 shrink-0 text-right">—</span>
-              <span>no logs</span>
-            </div>
-          ) : (
-            run.logs.map((l) => (
-              <div key={l.id} className="flex gap-3 px-5 py-0.5 font-mono">
-                <span className="w-12 shrink-0 text-right opacity-50">
-                  {levelName(l.level)}
-                </span>
-                <span
-                  className={
-                    wordWrap
-                      ? "min-w-0 flex-1 whitespace-pre-wrap break-words"
-                      : "whitespace-pre"
-                  }
-                >
-                  {l.ts} {l.msg ?? ""}
-                  {l.payload ? ` ${JSON.stringify(l.payload)}` : ""}
-                </span>
-              </div>
-            ))
-          )}
-        </div>
-      </section>
+      <LogViewer logs={run.logs ?? []} />
     </div>
   );
 }

packages/web/src/pages/ScriptDryRunPage.jsx

@@ -0,0 +1,214 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useLocation, useParams } from "react-router-dom";
+import { LuArrowLeft, LuPlay, LuSave } from "react-icons/lu";
+import { errorMessage } from "../api/client.js";
+import {
+  useDryRunScript,
+  useSaveScript,
+  useScript,
+} from "../api/hooks.js";
+import { CodeEditor } from "../components/CodeEditor.jsx";
+import { LogViewer } from "../components/LogViewer.jsx";
+import { StatusBadge } from "../lib/format.jsx";
+import {
+  DEFAULT_INPUT_CONTEXT,
+  NEW_SCRIPT_TEMPLATE,
+  normalizeScriptName,
+  prettyJson,
+} from "../lib/script.js";
+
+export function ScriptDryRunPage() {
+  const { name: rawName } = useParams();
+  const name = decodeURIComponent(rawName ?? "");
+  const location = useLocation();
+  const stateContent = location.state?.content;
+
+  const existing = useScript(name, stateContent == null);
+  const dryRun = useDryRunScript();
+  const save = useSaveScript();
+
+  const [content, setContent] = useState("");
+  const [inputJson, setInputJson] = useState(DEFAULT_INPUT_CONTEXT);
+  const [outputJson, setOutputJson] = useState("");
+  const [logs, setLogs] = useState([]);
+  const [runStatus, setRunStatus] = useState(null);
+  const [parseError, setParseError] = useState(null);
+  const [contentReady, setContentReady] = useState(false);
+
+  useEffect(() => {
+    if (stateContent != null) {
+      setContent(stateContent);
+      setContentReady(true);
+      return;
+    }
+    if (existing.isLoading) return;
+    if (existing.data?.content != null) {
+      setContent(existing.data.content);
+      setContentReady(true);
+      return;
+    }
+    if (existing.isError) {
+      setContent(NEW_SCRIPT_TEMPLATE);
+      setContentReady(true);
+    }
+  }, [stateContent, existing.data, existing.isLoading, existing.isError]);
+
+  const backHref = `/scripts/${encodeURIComponent(name)}/edit`;
+
+  const lastRun = dryRun.data;
+
+  useEffect(() => {
+    if (!lastRun) return;
+    setRunStatus(lastRun.status);
+    setLogs(lastRun.logs ?? []);
+    if (lastRun.status === "success") {
+      setOutputJson(prettyJson(lastRun.output));
+    } else {
+      setOutputJson(prettyJson({ error: lastRun.error ?? "run failed" }));
+    }
+  }, [lastRun]);
+
+  const runDisabledReason = useMemo(() => {
+    if (!contentReady) return "loading script";
+    if (!name) return "missing script name";
+    if (dryRun.isPending) return "running";
+    return null;
+  }, [contentReady, name, dryRun.isPending]);
+
+  function parseInputContext() {
+    let parsed;
+    try {
+      parsed = JSON.parse(inputJson);
+    } catch (err) {
+      throw new Error(err instanceof Error ? err.message : "invalid JSON");
+    }
+    if (parsed == null || typeof parsed !== "object" || Array.isArray(parsed)) {
+      throw new Error('input context must be a JSON object with "data" and/or "config"');
+    }
+    return {
+      data: "data" in parsed ? parsed.data : null,
+      config: "config" in parsed ? parsed.config : null,
+    };
+  }
+
+  function onRun() {
+    setParseError(null);
+    let ctx;
+    try {
+      ctx = parseInputContext();
+    } catch (err) {
+      setParseError(err instanceof Error ? err.message : String(err));
+      return;
+    }
+
+    dryRun.mutate({
+      name,
+      content,
+      data: ctx.data,
+      config: ctx.config,
+    });
+  }
+
+  function onSave() {
+    save.mutate({ name, content });
+  }
+
+  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={backHref} className="btn btn-ghost btn-sm btn-square" aria-label="Back">
+          <LuArrowLeft className="size-4" />
+        </Link>
+        <h1 className="truncate font-mono text-lg font-semibold">{name}</h1>
+        <span className="badge badge-ghost badge-sm">dry run</span>
+        {runStatus ? <StatusBadge status={runStatus} /> : null}
+        {lastRun?.durationMs != null ? (
+          <span className="text-sm opacity-60">{lastRun.durationMs}ms</span>
+        ) : null}
+        <div className="flex-1" />
+        <button
+          type="button"
+          className="btn btn-primary btn-sm"
+          disabled={Boolean(runDisabledReason)}
+          onClick={onRun}
+        >
+          {dryRun.isPending ? (
+            <span className="loading loading-spinner loading-xs" />
+          ) : (
+            <LuPlay className="size-4" />
+          )}
+          Run
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline btn-sm"
+          disabled={save.isPending || !contentReady}
+          onClick={onSave}
+        >
+          <LuSave className="size-4" />
+          Save
+        </button>
+      </div>
+
+      {parseError ? (
+        <p className="text-error text-sm shrink-0">{parseError}</p>
+      ) : null}
+      {dryRun.isError ? (
+        <p className="text-error text-sm shrink-0">{errorMessage(dryRun.error)}</p>
+      ) : null}
+      {save.isError ? (
+        <p className="text-error text-sm shrink-0">{errorMessage(save.error)}</p>
+      ) : null}
+      {save.isSuccess ? (
+        <p className="text-success text-sm shrink-0">Script saved</p>
+      ) : null}
+
+      <div className="grid min-h-0 flex-1 grid-cols-1 gap-3 lg:grid-cols-3">
+        <section className="flex min-h-0 flex-col gap-1">
+          <h2 className="shrink-0 text-sm font-semibold opacity-70">Input context</h2>
+          <div className="min-h-0 flex-1">
+            <CodeEditor
+              language="json"
+              value={inputJson}
+              onChange={setInputJson}
+              height="100%"
+            />
+          </div>
+        </section>
+
+        <section className="flex min-h-0 flex-col gap-1">
+          <h2 className="shrink-0 text-sm font-semibold opacity-70">Script</h2>
+          <div className="min-h-0 flex-1">
+            {!contentReady ? (
+              <div className="flex h-full items-center justify-center rounded-box border border-base-300">
+                <span className="loading loading-spinner" />
+              </div>
+            ) : (
+              <CodeEditor
+                language="javascript"
+                value={content}
+                onChange={setContent}
+                height="100%"
+              />
+            )}
+          </div>
+        </section>
+
+        <section className="flex min-h-0 flex-col gap-1">
+          <h2 className="shrink-0 text-sm font-semibold opacity-70">Output</h2>
+          <div className="min-h-0 flex-1">
+            <CodeEditor
+              language="json"
+              value={outputJson}
+              onChange={() => {}}
+              readOnly
+              height="100%"
+            />
+          </div>
+        </section>
+      </div>
+
+      <LogViewer logs={logs} className="h-48 shrink-0 lg:h-56" />
+    </div>
+  );
+}

packages/web/src/pages/ScriptEditPage.jsx

@@ -0,0 +1,168 @@
+import { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { LuArrowLeft, LuPlay, LuSave } from "react-icons/lu";
+import { errorMessage } from "../api/client.js";
+import { useSaveScript, useScript } from "../api/hooks.js";
+import { CodeEditor } from "../components/CodeEditor.jsx";
+import { NEW_SCRIPT_TEMPLATE, normalizeScriptName } from "../lib/script.js";
+
+export function ScriptNewPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [name, setName] = useState("");
+  const [content, setContent] = useState(
+    location.state?.content ?? NEW_SCRIPT_TEMPLATE,
+  );
+  const save = useSaveScript();
+
+  function onSave(e) {
+    e.preventDefault();
+    const file = normalizeScriptName(name);
+    if (!file) return;
+    save.mutate(
+      { name: file, content },
+      {
+        onSuccess: () => navigate(`/scripts/${encodeURIComponent(file)}/edit`),
+      },
+    );
+  }
+
+  function openDryRun() {
+    const file = normalizeScriptName(name);
+    if (!file) return;
+    navigate(`/scripts/${encodeURIComponent(file)}/dry-run`, {
+      state: { content },
+    });
+  }
+
+  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="/scripts" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
+          <LuArrowLeft className="size-4" />
+        </Link>
+        <h1 className="text-xl font-semibold">New script</h1>
+        <div className="flex-1" />
+        <button
+          type="button"
+          className="btn btn-outline btn-sm"
+          disabled={!normalizeScriptName(name)}
+          onClick={openDryRun}
+        >
+          <LuPlay className="size-4" />
+          Dry run
+        </button>
+        <button
+          type="submit"
+          form="script-edit-form"
+          className="btn btn-primary btn-sm"
+          disabled={save.isPending || !normalizeScriptName(name)}
+        >
+          <LuSave className="size-4" />
+          Save
+        </button>
+      </div>
+
+      <form id="script-edit-form" onSubmit={onSave} className="flex min-h-0 flex-1 flex-col gap-3">
+        <input
+          className="input input-sm w-full max-w-md shrink-0"
+          placeholder="name.js"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+        />
+        <div className="min-h-0 flex-1">
+          <CodeEditor language="javascript" value={content} onChange={setContent} height="100%" />
+        </div>
+        {save.isError ? (
+          <p className="text-error text-sm shrink-0">{errorMessage(save.error)}</p>
+        ) : null}
+      </form>
+    </div>
+  );
+}
+
+export function ScriptEditPage() {
+  const { name: rawName } = useParams();
+  const name = decodeURIComponent(rawName ?? "");
+  const navigate = useNavigate();
+  const existing = useScript(name);
+  const save = useSaveScript();
+  const [content, setContent] = useState("");
+  const [contentReady, setContentReady] = useState(false);
+
+  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({ name, content });
+  }
+
+  function openDryRun() {
+    navigate(`/scripts/${encodeURIComponent(name)}/dry-run`, {
+      state: { 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="/scripts" className="btn btn-ghost btn-sm">
+          <LuArrowLeft className="size-4" />
+          Back
+        </Link>
+        <p className="text-error">Script not found</p>
+      </div>
+    );
+  }
+
+  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="/scripts" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
+          <LuArrowLeft className="size-4" />
+        </Link>
+        <h1 className="truncate font-mono text-xl font-semibold">{name}</h1>
+        <div className="flex-1" />
+        <button type="button" className="btn btn-outline btn-sm" onClick={openDryRun}>
+          <LuPlay className="size-4" />
+          Dry run
+        </button>
+        <button
+          type="submit"
+          form="script-edit-form"
+          className="btn btn-primary btn-sm"
+          disabled={save.isPending || !contentReady}
+        >
+          <LuSave className="size-4" />
+          Save
+        </button>
+      </div>
+
+      <form id="script-edit-form" onSubmit={onSave} className="min-h-0 flex-1">
+        <CodeEditor language="javascript" value={content} onChange={setContent} height="100%" />
+      </form>
+
+      {save.isError ? (
+        <p className="text-error text-sm shrink-0">{errorMessage(save.error)}</p>
+      ) : null}
+      {save.isSuccess ? (
+        <p className="text-success text-sm shrink-0">Script saved</p>
+      ) : null}
+    </div>
+  );
+}

packages/web/src/pages/ScriptsPage.jsx

@@ -1,89 +1,29 @@
-import { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
-import { LuPencil, LuPlus, LuSave, LuTrash2, LuX } from "react-icons/lu";
+import { useState } from "react";
+import { Link, Navigate, useNavigate, useSearchParams } from "react-router-dom";
+import { LuPencil, LuPlay, LuPlus, LuTrash2 } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
-import {
-  useDeleteScript,
-  useSaveScript,
-  useScript,
-  useScripts,
-} from "../api/hooks.js";
-import { CodeEditor } from "../components/CodeEditor.jsx";
-
-const NEW_TEMPLATE = `export default async function main(ctx) {
-  return ctx;
-}
-`;
+import { useDeleteScript, useScripts } from "../api/hooks.js";
 
 export function ScriptsPage() {
-  const [params, setParams] = useSearchParams();
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
   const editName = params.get("edit");
   const { data: scripts = [], isLoading } = useScripts();
-  const [mode, setMode] = useState(null);
-  const [name, setName] = useState("");
-  const [content, setContent] = useState("");
   const [confirmDelete, setConfirmDelete] = useState(null);
-
-  const existing = useScript(mode === "edit" ? name : null, mode === "edit");
-  const save = useSaveScript();
   const del = useDeleteScript();
 
-  useEffect(() => {
-    if (editName) {
-      setMode("edit");
-      setName(editName);
-    }
-  }, [editName]);
-
-  useEffect(() => {
-    if (mode === "edit" && existing.data?.content != null) {
-      setContent(existing.data.content);
-    }
-  }, [mode, existing.data]);
-
-  function openAdd() {
-    setMode("add");
-    setName("");
-    setContent(NEW_TEMPLATE);
-    setParams({});
-  }
-
-  function openEdit(script) {
-    setMode("edit");
-    setName(script);
-    setParams({ edit: script });
-  }
-
-  function closeForm() {
-    setMode(null);
-    setName("");
-    setContent("");
-    setParams({});
-  }
-
-  function onSave(e) {
-    e.preventDefault();
-    const file = name.endsWith(".js") ? name : `${name}.js`;
-    save.mutate(
-      { name: file, content },
-      {
-        onSuccess: () => {
-          setMode("edit");
-          setName(file);
-          setParams({ edit: file });
-        },
-      },
-    );
+  if (editName) {
+    return <Navigate to={`/scripts/${encodeURIComponent(editName)}/edit`} replace />;
   }
 
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-2">
         <h1 className="text-xl font-semibold">Scripts</h1>
-        <button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
+        <Link to="/scripts/new" className="btn btn-primary btn-sm">
           <LuPlus className="size-4" />
           Add
-        </button>
+        </Link>
       </div>
 
       {isLoading ? (
@@ -94,22 +34,35 @@ export function ScriptsPage() {
             <thead>
               <tr>
                 <th>Name</th>
-                <th className="w-24" />
+                <th className="w-28" />
               </tr>
             </thead>
             <tbody>
               {scripts.map((s) => (
                 <tr key={s} className="hover">
-                  <td className="font-mono">{s}</td>
+                  <td className="font-mono">
+                    <Link className="link" to={`/scripts/${encodeURIComponent(s)}/edit`}>
+                      {s}
+                    </Link>
+                  </td>
                   <td className="text-right whitespace-nowrap">
                     <button
                       type="button"
                       className="btn btn-ghost btn-xs"
+                      title="Dry run"
+                      onClick={() =>
+                        navigate(`/scripts/${encodeURIComponent(s)}/dry-run`)
+                      }
+                    >
+                      <LuPlay className="size-4" />
+                    </button>
+                    <Link
+                      to={`/scripts/${encodeURIComponent(s)}/edit`}
+                      className="btn btn-ghost btn-xs"
                       title="Edit"
-                      onClick={() => openEdit(s)}
                     >
                       <LuPencil className="size-4" />
-                    </button>
+                    </Link>
                     <button
                       type="button"
                       className="btn btn-ghost btn-xs text-error"
@@ -126,38 +79,6 @@ export function ScriptsPage() {
         </div>
       )}
 
-      {mode ? (
-        <form onSubmit={onSave} className="space-y-3">
-          <div className="flex items-center justify-between">
-            <h2 className="font-semibold">{mode === "add" ? "New script" : name}</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" ? (
-            <input
-              className="input input-sm w-full max-w-md"
-              placeholder="name.js"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              required
-            />
-          ) : null}
-          {mode === "edit" && existing.isLoading ? (
-            <span className="loading loading-spinner" />
-          ) : (
-            <CodeEditor language="javascript" value={content} onChange={setContent} />
-          )}
-          {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">
@@ -175,10 +96,7 @@ export function ScriptsPage() {
                 disabled={del.isPending}
                 onClick={() =>
                   del.mutate(confirmDelete, {
-                    onSuccess: () => {
-                      if (name === confirmDelete) closeForm();
-                      setConfirmDelete(null);
-                    },
+                    onSuccess: () => setConfirmDelete(null),
                   })
                 }
               >