feat(scripts): enhance script return structure and context handling

- Introduced a new contract for script returns, requiring an object with `output`, `context`, and `skipRemaining` fields.
- Refactored existing scripts to align with the new return structure, ensuring compatibility with the updated context management.
- Added utility functions for normalizing context and step results, improving the handling of script execution context.
- Updated various scripts (e.g., fetch-binary, fetch-html, fetch-http) to return structured output and context, enhancing data flow and usability.
- Improved error handling for script returns, ensuring clearer feedback when invalid structures are returned.

This update significantly enhances the flexibility and clarity of script interactions within workflows.

packages/web/src/pages/EventDetailPage.jsx

@@ -1,14 +1,13 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, Fragment } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { LuArrowLeft, LuFilter } from "react-icons/lu";
 import { useRun } from "../api/hooks.js";
 import { LogViewer } from "../components/LogViewer.jsx";
 import { formatTime, StatusBadge } from "../lib/format.jsx";
+import { prettyJson } from "../lib/script.js";
 
 function stepLabel(s) {
-  if (s.script === "set") {
-    return s.config?.as ? `set:${s.config.as}` : "set";
-  }
+  if (s.script === "set") return "set";
   return s.script;
 }
 
@@ -20,11 +19,39 @@ function isEditableScript(s) {
   return Boolean(s.script) && s.script !== "set";
 }
 
+function JsonBlock({ title, value }) {
+  if (value == null || value === "") return null;
+  const text = prettyJson(value);
+  if (!text) return null;
+  return (
+    <details className="collapse collapse-arrow border border-base-300 bg-base-100">
+      <summary className="collapse-title min-h-0 py-2 text-sm font-semibold">{title}</summary>
+      <div className="collapse-content">
+        <pre className="max-h-80 overflow-auto rounded-box bg-base-200 p-3 font-mono text-xs">
+          {text}
+        </pre>
+      </div>
+    </details>
+  );
+}
+
+function envelopeParts(raw) {
+  if (raw != null && typeof raw === "object" && !Array.isArray(raw) && ("output" in raw || "context" in raw)) {
+    return {
+      output: "output" in raw ? raw.output : undefined,
+      context: "context" in raw ? raw.context : undefined,
+      skipRemaining: raw.skipRemaining === true,
+    };
+  }
+  return { output: raw, context: undefined, skipRemaining: false };
+}
+
 export function EventDetailPage() {
   const { id } = useParams();
   const navigate = useNavigate();
   const { data: run, isLoading, error } = useRun(id);
   const [stepFilters, setStepFilters] = useState([]);
+  const [openStep, setOpenStep] = useState(null);
 
   function goBack() {
     const idx = window.history.state?.idx;
@@ -60,6 +87,8 @@ export function EventDetailPage() {
   if (isLoading) return <span className="loading loading-spinner loading-lg" />;
   if (error || !run) return <p className="text-error">Event not found</p>;
 
+  const runParts = envelopeParts(run.output);
+
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
@@ -98,6 +127,15 @@ export function EventDetailPage() {
         </div>
       ) : null}
 
+      <div className="grid gap-2 sm:grid-cols-2">
+        <JsonBlock title="Run input (data)" value={run.input} />
+        <JsonBlock title="Run output" value={runParts.output} />
+        <JsonBlock title="Run context" value={runParts.context} />
+      </div>
+      {runParts.skipRemaining ? (
+        <p className="text-sm opacity-70">This run stopped early (<span className="font-mono">skipRemaining</span>).</p>
+      ) : null}
+
       <section>
         <h2 className="font-semibold mb-2">Steps</h2>
         <div className="overflow-x-auto">
@@ -113,42 +151,65 @@ export function EventDetailPage() {
               </tr>
             </thead>
             <tbody>
-              {steps.map((s) => (
-                <tr key={s.id}>
-                  <td>{s.step_index}</td>
-                  <td className="font-mono">
-                    {isEditableScript(s) ? (
-                      <Link className="link" to={`/scripts/${encodeURIComponent(s.script)}/edit`}>
-                        {stepLabel(s)}
-                      </Link>
-                    ) : (
-                      stepLabel(s)
-                    )}
-                  </td>
-                  <td>
-                    <StatusBadge status={s.status} />
-                  </td>
-                  <td>{s.duration_ms != null ? `${s.duration_ms}ms` : "—"}</td>
-                  <td
-                    className={
-                      s.status === "skipped" ? "opacity-60 text-xs" : "text-error text-xs"
-                    }
-                  >
-                    {s.error || ""}
-                  </td>
-                  <td className="text-right">
-                    <button
-                      type="button"
-                      className={`btn btn-ghost btn-xs btn-square ${stepFilters.includes(s.id) ? "btn-active" : ""}`}
-                      aria-label={`Filter logs for ${filterLabel(s)}`}
-                      aria-pressed={stepFilters.includes(s.id)}
-                      onClick={() => toggleStepFilter(s.id)}
-                    >
-                      <LuFilter className="size-3.5" />
-                    </button>
-                  </td>
-                </tr>
-              ))}
+              {steps.map((s) => {
+                const parts = envelopeParts(s.output);
+                const open = openStep === s.id;
+                return (
+                  <Fragment key={s.id}>
+                    <tr>
+                      <td>{s.step_index}</td>
+                      <td className="font-mono">
+                        {isEditableScript(s) ? (
+                          <Link className="link" to={`/scripts/${encodeURIComponent(s.script)}/edit`}>
+                            {stepLabel(s)}
+                          </Link>
+                        ) : (
+                          stepLabel(s)
+                        )}
+                      </td>
+                      <td>
+                        <StatusBadge status={s.status} />
+                      </td>
+                      <td>{s.duration_ms != null ? `${s.duration_ms}ms` : "—"}</td>
+                      <td
+                        className={
+                          s.status === "skipped" ? "opacity-60 text-xs" : "text-error text-xs"
+                        }
+                      >
+                        {s.error || (parts.skipRemaining ? "skipRemaining" : "")}
+                      </td>
+                      <td className="text-right">
+                        <button
+                          type="button"
+                          className="btn btn-ghost btn-xs"
+                          onClick={() => setOpenStep(open ? null : s.id)}
+                        >
+                          I/O
+                        </button>
+                        <button
+                          type="button"
+                          className={`btn btn-ghost btn-xs btn-square ${stepFilters.includes(s.id) ? "btn-active" : ""}`}
+                          aria-label={`Filter logs for ${filterLabel(s)}`}
+                          aria-pressed={stepFilters.includes(s.id)}
+                          onClick={() => toggleStepFilter(s.id)}
+                        >
+                          <LuFilter className="size-3.5" />
+                        </button>
+                      </td>
+                    </tr>
+                    {open ? (
+                      <tr>
+                        <td colSpan={6} className="bg-base-200">
+                          <div className="grid gap-2 p-2 sm:grid-cols-2">
+                            <JsonBlock title="output" value={parts.output} />
+                            <JsonBlock title="context" value={parts.context} />
+                          </div>
+                        </td>
+                      </tr>
+                    ) : null}
+                  </Fragment>
+                );
+              })}
             </tbody>
           </table>
         </div>

packages/web/src/pages/ScriptDryRunPage.jsx

@@ -76,7 +76,9 @@ export function ScriptDryRunPage() {
     setRunStatus(lastRun.status);
     setLogs(lastRun.logs ?? []);
     if (lastRun.status === "success") {
-      setOutputJson(prettyJson(lastRun.output));
+      const envelope = { output: lastRun.output, context: lastRun.context };
+      if (lastRun.skipRemaining) envelope.skipRemaining = true;
+      setOutputJson(prettyJson(envelope));
     } else {
       setOutputJson(prettyJson({ error: lastRun.error ?? "run failed" }));
     }
@@ -97,10 +99,11 @@ export function ScriptDryRunPage() {
       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"');
+      throw new Error('input must be a JSON object with "data", "context", and/or "config"');
     }
     return {
       data: "data" in parsed ? parsed.data : null,
+      context: "context" in parsed ? parsed.context : {},
       config: "config" in parsed ? parsed.config : null,
     };
   }
@@ -119,6 +122,7 @@ export function ScriptDryRunPage() {
       name,
       content,
       data: ctx.data,
+      context: ctx.context,
       config: ctx.config,
       owner,
     });
@@ -229,7 +233,7 @@ export function ScriptDryRunPage() {
         </section>
 
         <section className="flex min-h-0 flex-col gap-1">
-          <h2 className="shrink-0 text-sm font-semibold opacity-70">Output</h2>
+          <h2 className="shrink-0 text-sm font-semibold opacity-70">Result (output + context)</h2>
           <div className="min-h-0 flex-1">
             <CodeEditor
               language="json"