feat(scripts): add previewConfigKey to various scripts and enhance UI components

- Added `previewConfigKey` metadata to multiple scripts including fetch-binary, fetch-html, fetch-http, fetch-rss-feed, fingerprint, get-secret, jsonata, ntfy, render-template, and send-email, improving configuration visibility. - Updated the `FieldHelp` and `ScriptCard` components to utilize the new preview configuration, enhancing the user interface for displaying script metadata. - Refactored `TriggerCard` and `WorkflowTestPanel` components to support expanded views, improving user interaction and accessibility of configuration details. - Enhanced the `WorkflowVisualEditor` to manage test panel visibility more effectively. This update improves the overall user experience by providing clearer context and configuration options for scripts and workflows.
2026-08-15 19:14:19 +07:00
parent 7fe5defc43
commit bccbf551e3
20 changed files with 443 additions and 179 deletions
@@ -4,7 +4,7 @@ export function FieldHelp({ description }) {
  if (!description) return null;
  const long = String(description).length > 80;
  return (
-    <div className="tooltip tooltip-top" {...(long ? {} : { "data-tip": description })}>
+    <div className="tooltip tooltip-top z-50" {...(long ? {} : { "data-tip": description })}>
      {long ? (
        <div className="tooltip-content">
          <p className="max-w-xs text-left text-xs whitespace-pre-wrap">{description}</p>
@@ -27,3 +27,140 @@ export function FieldLabel({ name, required, description, children }) {
    </div>
  );
 }
+
+function fieldNotes(field) {
+  return [
+    field.required ? "required" : null,
+    field.default !== undefined ? `default ${JSON.stringify(field.default)}` : null,
+    Array.isArray(field.enum)
+      ? field.enum.map((x) => (x && typeof x === "object" ? x.value : x)).join(" | ")
+      : Array.isArray(field.options)
+        ? field.options.map((x) => (x && typeof x === "object" ? x.value : x)).join(" | ")
+        : null,
+    field.description,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+const TITLE_PREVIEW_MAX = 40;
+const TOOLTIP_VALUE_MAX = 120;
+
+function stringifyConfigValue(val) {
+  if (typeof val === "string") return val.replace(/\s+/g, " ").trim();
+  if (typeof val === "number" || typeof val === "boolean") return String(val);
+  try {
+    return JSON.stringify(val);
+  } catch {
+    return String(val);
+  }
+}
+
+function truncateConfigValue(val, maxLen) {
+  const text = stringifyConfigValue(val);
+  if (!text) return "";
+  if (text.length <= maxLen) return text;
+  return `${text.slice(0, Math.max(0, maxLen - 1))}…`;
+}
+
+/** Collapsed card title suffix from `meta.previewConfigKey`. */
+export function previewConfigValue(config, key, maxLen = TITLE_PREVIEW_MAX) {
+  const text = configValueText(config, key);
+  if (!text) return "";
+  if (text.length <= maxLen) return text;
+  return `${text.slice(0, Math.max(0, maxLen - 1))}…`;
+}
+
+export function configValueText(config, key) {
+  if (typeof key !== "string" || !key.trim()) return "";
+  if (config == null || typeof config !== "object") return "";
+  const val = config[key];
+  if (val == null || val === "") return "";
+  return stringifyConfigValue(val);
+}
+
+/** Formatted DaisyUI tooltip for a step's current config. */
+export function ConfigTooltip({ config, label = "config" }) {
+  const entries =
+    config && typeof config === "object" && !Array.isArray(config) ? Object.entries(config) : [];
+
+  return (
+    <div className="tooltip tooltip-bottom z-50">
+      <div className="tooltip-content z-50 p-0">
+        <div className="max-w-sm text-left">
+          {entries.length === 0 ? (
+            <p className="px-3 py-2 text-xs opacity-80">No config</p>
+          ) : (
+            <table className="table table-xs">
+              <thead>
+                <tr>
+                  <th>Key</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {entries.map(([name, val]) => (
+                  <tr key={name}>
+                    <td className="font-mono align-top">{name}</td>
+                    <td className="max-w-56 break-all whitespace-normal font-mono opacity-90">
+                      {val == null || val === "" ? (
+                        <span className="opacity-50">—</span>
+                      ) : (
+                        truncateConfigValue(val, TOOLTIP_VALUE_MAX)
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+      <button type="button" className="badge badge-ghost badge-sm h-6 cursor-help font-normal" aria-label="Current config">
+        {label}
+      </button>
+    </div>
+  );
+}
+
+/** Formatted DaisyUI tooltip for script.meta.input (or similar field maps). */
+export function SchemaTooltip({ label = "Input", fields }) {
+  const entries = Object.entries(fields ?? {});
+  if (entries.length === 0) return null;
+
+  return (
+    <div className="tooltip tooltip-bottom z-50">
+      <div className="tooltip-content z-50 p-0">
+        <div className="max-w-sm text-left">
+          <table className="table table-xs">
+            <thead>
+              <tr>
+                <th>Field</th>
+                <th>Type</th>
+                <th>Notes</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map(([name, spec]) => {
+                const field = spec && typeof spec === "object" ? spec : { description: String(spec) };
+                return (
+                  <tr key={name}>
+                    <td className="font-mono">
+                      {name}
+                      {field.required ? <span className="text-error">*</span> : null}
+                    </td>
+                    <td className="opacity-80">{field.type ?? ""}</td>
+                    <td className="max-w-48 whitespace-normal opacity-90">{fieldNotes(field)}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <button type="button" className="btn btn-ghost btn-xs" aria-label={`${label} schema`}>
+        {label}
+      </button>
+    </div>
+  );
+}
@@ -1,17 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { LuGripVertical, LuMaximize2, LuMinimize2, LuPencil, LuPlay, LuTrash2 } from "react-icons/lu";
+import { LuChevronDown, LuGripVertical, LuMaximize2, LuMinimize2, LuPlay, LuTrash2 } from "react-icons/lu";
 import { useDryRunScript, useScript } from "../../api/hooks.js";
 import { errorMessage } from "../../api/client.js";
 import { CodeEditor } from "../CodeEditor.jsx";
 import { LogViewer } from "../LogViewer.jsx";
-import { ScriptMetaPanel } from "../ScriptMetaPanel.jsx";
 import { StatusBadge } from "../../lib/format.jsx";
 import { contextFromMeta, prettyJson } from "../../lib/script.js";
 import { ConfigFields } from "./ConfigFields.jsx";
-import { FieldLabel } from "./FieldHelp.jsx";
+import { ConfigTooltip, configValueText, FieldLabel, previewConfigValue, SchemaTooltip } from "./FieldHelp.jsx";

 export function ScriptCard({
  step,
@@ -35,24 +33,32 @@ export function ScriptCard({
    opacity: isDragging ? 0.6 : 1,
  };
  const [tryOpen, setTryOpen] = useState(false);
+  const [expanded, setExpanded] = useState(false);
  const listed = scriptsByName?.get(step.script);
  const meta = listed?.meta ?? null;
-  const metaError = listed?.metaError ?? null;

  const duplicateId =
    step.id && otherSteps.some((s) => s.id === step.id && s.uiId !== step.uiId);
+  const preview = previewConfigValue(step.config, meta?.previewConfigKey);
+  const previewFull = configValueText(step.config, meta?.previewConfigKey);
+  const baseName = step.kind === "set" ? `set:${step.as || "…"}` : step.script || "untitled";
+  const titleFull = previewFull ? `${baseName} (${previewFull})` : baseName;
+  const setConfig =
+    step.kind === "set" ? { as: step.as ?? "", expression: step.expression ?? "" } : null;

  return (
    <article
      ref={setNodeRef}
      style={style}
-      className="card bg-base-100 border border-primary"
+      className={`card bg-base-100 border border-primary ${
+        isDragging ? "z-40" : "z-0 hover:z-30 focus-within:z-30"
+      }`}
    >
-      <div className="card-body gap-3 p-4">
-        <div className="flex items-start gap-2">
+      <div className={`card-body gap-3 ${expanded ? "p-4" : "p-3"}`}>
+        <div className="flex items-center gap-2">
          <button
            type="button"
-            className="btn btn-ghost btn-xs btn-square mt-0.5 cursor-grab active:cursor-grabbing"
+            className="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
            aria-label={`Drag step ${index + 1}`}
            disabled={disabled}
            {...attributes}
@@ -60,39 +66,52 @@ export function ScriptCard({
          >
            <LuGripVertical className="size-4 opacity-60" />
          </button>
-          <div className="min-w-0 flex-1">
-            <h3 className="card-title text-base font-mono">
-              {step.kind === "set" ? `set:${step.as || "…"}` : step.script || "untitled"}
-            </h3>
-            {step.id ? <span className="badge badge-ghost badge-sm font-mono">{step.id}</span> : null}
-            {step.kind === "script" && meta?.description ? (
+          <button
+            type="button"
+            className="min-w-0 flex-1 text-left"
+            onClick={() => setExpanded((v) => !v)}
+          >
+            <div className="flex min-w-0 items-center gap-2">
+              <h3 className="card-title min-w-0 flex-1 text-base font-mono" title={titleFull}>
+                <span className="min-w-0 truncate">{baseName}</span>
+                {!expanded && preview ? (
+                  <span
+                    className="badge badge-secondary badge-sm max-w-[min(16rem,45%)] shrink-0 truncate font-mono font-normal"
+                    title={previewFull}
+                  >
+                    {preview}
+                  </span>
+                ) : null}
+              </h3>
+              {step.id ? (
+                <span className="badge badge-ghost badge-sm font-mono shrink-0">{step.id}</span>
+              ) : null}
+            </div>
+            {expanded && step.kind === "script" && meta?.description ? (
              <p className="text-sm opacity-70 mt-1">{meta.description}</p>
            ) : null}
-            {step.kind === "set" ? (
+            {expanded && step.kind === "set" ? (
              <p className="text-sm opacity-70 mt-1">Assign a JSONata result onto the context</p>
            ) : null}
-          </div>
+          </button>
+          {step.kind === "script" ? (
+            <SchemaTooltip label="Input" fields={meta?.input} />
+          ) : null}
+          {!expanded ? (
+            <ConfigTooltip config={step.kind === "set" ? setConfig : (step.config ?? {})} />
+          ) : null}
          <div className="card-actions shrink-0">
            {step.kind === "script" && step.script ? (
-              <>
-                <button
-                  type="button"
-                  className="btn btn-ghost btn-xs"
-                  title="Try"
-                  disabled={disabled}
-                  onClick={() => setTryOpen(true)}
-                >
-                  <LuPlay className="size-4" />
-                  Try
-                </button>
-                <Link
-                  to={`/scripts/${encodeURIComponent(step.script)}/edit`}
-                  className="btn btn-ghost btn-xs"
-                  title="Edit script"
-                >
-                  <LuPencil className="size-4" />
-                </Link>
-              </>
+              <button
+                type="button"
+                className="btn btn-ghost btn-xs"
+                title="Try"
+                disabled={disabled}
+                onClick={() => setTryOpen(true)}
+              >
+                <LuPlay className="size-4" />
+                Try
+              </button>
            ) : null}
            <button
              type="button"
@@ -103,89 +122,91 @@ export function ScriptCard({
            >
              <LuTrash2 className="size-4" />
            </button>
+            <button
+              type="button"
+              className="btn btn-ghost btn-xs btn-square"
+              title={expanded ? "Collapse" : "Expand"}
+              aria-expanded={expanded}
+              onClick={() => setExpanded((v) => !v)}
+            >
+              <LuChevronDown className={`size-4 opacity-70 transition-transform ${expanded ? "rotate-180" : ""}`} />
+            </button>
          </div>
        </div>

-        {step.kind === "script" && (meta?.input || meta?.output) ? (
-          <details className="collapse collapse-arrow bg-base-200">
-            <summary className="collapse-title min-h-0 py-2 text-sm font-semibold">
-              Input / output
-            </summary>
-            <div className="collapse-content">
-              <ScriptMetaPanel meta={meta} metaError={metaError} />
-            </div>
-          </details>
-        ) : null}
-
-        {step.kind === "set" ? (
-          <div className="space-y-2">
-            <FieldLabel name="as" required description="Context field to write (not data or config)" />
-            <input
-              className="input input-sm w-full font-mono"
-              value={step.as ?? ""}
-              disabled={disabled}
-              onChange={(e) => onChange({ ...step, as: e.target.value })}
-            />
-            <FieldLabel name="expression" required description="JSONata evaluated against ctx" />
-            <textarea
-              className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
-              value={step.expression ?? ""}
-              disabled={disabled}
-              onChange={(e) => onChange({ ...step, expression: e.target.value })}
-            />
-          </div>
-        ) : (
-          <ConfigFields
-            script={step.script}
-            config={step.config}
-            meta={meta}
-            disabled={disabled}
-            workflows={workflows}
-            owner={owner}
-            excludeFile={excludeFile}
-            onChange={(config) => onChange({ ...step, config })}
-          />
-        )}
-
-        <details className="collapse collapse-arrow bg-base-200">
-          <summary className="collapse-title min-h-0 py-2 text-sm font-semibold">Advanced</summary>
-          <div className="collapse-content space-y-2">
-            <label className="form-control">
-              <span className="label py-0 text-sm">id</span>
-              <input
-                className={`input input-sm font-mono ${duplicateId ? "input-error" : ""}`}
-                value={step.id ?? ""}
+        {expanded ? (
+          <>
+            {step.kind === "set" ? (
+              <div className="space-y-2">
+                <FieldLabel name="as" required description="Context field to write (not data or config)" />
+                <input
+                  className="input input-sm w-full font-mono"
+                  value={step.as ?? ""}
+                  disabled={disabled}
+                  onChange={(e) => onChange({ ...step, as: e.target.value })}
+                />
+                <FieldLabel name="expression" required description="JSONata evaluated against ctx" />
+                <textarea
+                  className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
+                  value={step.expression ?? ""}
+                  disabled={disabled}
+                  onChange={(e) => onChange({ ...step, expression: e.target.value })}
+                />
+              </div>
+            ) : (
+              <ConfigFields
+                script={step.script}
+                config={step.config}
+                meta={meta}
                disabled={disabled}
-                onChange={(e) => onChange({ ...step, id: e.target.value })}
-                placeholder="optional step id"
-              />
-              {duplicateId ? (
-                <span className="text-error text-xs">Duplicate step id</span>
-              ) : null}
-            </label>
-            {step.kind === "set" ? null : (
-              <NeedsEditor
-                step={step}
-                otherSteps={otherSteps}
-                disabled={disabled}
-                onChange={onChange}
+                workflows={workflows}
+                owner={owner}
+                excludeFile={excludeFile}
+                onChange={(config) => onChange({ ...step, config })}
              />
            )}
-            <label className="form-control">
-              <span className="label py-0 text-sm">when</span>
-              <input
-                className="input input-sm w-full font-mono"
-                value={step.when ?? ""}
-                disabled={disabled || Boolean(step.needs)}
-                onChange={(e) => onChange({ ...step, when: e.target.value })}
-                placeholder="JSONata; skip if false (linear only)"
-              />
-              {step.needs ? (
-                <span className="text-xs opacity-60">when is not allowed when needs is set</span>
-              ) : null}
-            </label>
-          </div>
-        </details>
+
+            <details className="collapse collapse-arrow bg-base-200">
+              <summary className="collapse-title min-h-0 py-2 text-sm font-semibold">Advanced</summary>
+              <div className="collapse-content space-y-2">
+                <label className="form-control">
+                  <span className="label py-0 text-sm">id</span>
+                  <input
+                    className={`input input-sm font-mono ${duplicateId ? "input-error" : ""}`}
+                    value={step.id ?? ""}
+                    disabled={disabled}
+                    onChange={(e) => onChange({ ...step, id: e.target.value })}
+                    placeholder="optional step id"
+                  />
+                  {duplicateId ? (
+                    <span className="text-error text-xs">Duplicate step id</span>
+                  ) : null}
+                </label>
+                {step.kind === "set" ? null : (
+                  <NeedsEditor
+                    step={step}
+                    otherSteps={otherSteps}
+                    disabled={disabled}
+                    onChange={onChange}
+                  />
+                )}
+                <label className="form-control">
+                  <span className="label py-0 text-sm">when</span>
+                  <input
+                    className="input input-sm w-full font-mono"
+                    value={step.when ?? ""}
+                    disabled={disabled || Boolean(step.needs)}
+                    onChange={(e) => onChange({ ...step, when: e.target.value })}
+                    placeholder="JSONata; skip if false (linear only)"
+                  />
+                  {step.needs ? (
+                    <span className="text-xs opacity-60">when is not allowed when needs is set</span>
+                  ) : null}
+                </label>
+              </div>
+            </details>
+          </>
+        ) : null}
      </div>
      {tryOpen ? (
        <ScriptTryDialog
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
+import { LuChevronDown, LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import cronstrue from "cronstrue";
@@ -26,14 +26,21 @@ export function TriggerCard({
    opacity: isDragging ? 0.6 : 1,
  };
  const type = trigger.type;
+  const [expanded, setExpanded] = useState(false);

  return (
-    <article ref={setNodeRef} style={style} className="card bg-base-100 border border-primary">
-      <div className="card-body gap-3 p-4">
-        <div className="flex items-start gap-2">
+    <article
+      ref={setNodeRef}
+      style={style}
+      className={`card bg-base-100 border border-primary ${
+        isDragging ? "z-40" : "z-0 hover:z-30 focus-within:z-30"
+      }`}
+    >
+      <div className={`card-body gap-3 ${expanded ? "p-4" : "p-3"}`}>
+        <div className="flex items-center gap-2">
          <button
            type="button"
-            className="btn btn-ghost btn-xs btn-square mt-0.5 cursor-grab active:cursor-grabbing"
+            className="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
            aria-label={`Drag trigger ${index + 1}`}
            disabled={disabled}
            {...attributes}
@@ -41,9 +48,14 @@ export function TriggerCard({
          >
            <LuGripVertical className="size-4 opacity-60" />
          </button>
-          <div className="min-w-0 flex-1">
-            <h3 className="card-title text-base">{typeLabel(type)}</h3>
-          </div>
+          <button
+            type="button"
+            className="min-w-0 flex-1 text-left"
+            onClick={() => setExpanded((v) => !v)}
+          >
+            <h3 className="card-title text-base inline">{typeLabel(type)}</h3>
+            <span className="ml-2 font-mono text-xs opacity-70">{triggerSummary(trigger, owner)}</span>
+          </button>
          <button
            type="button"
            className="btn btn-ghost btn-xs text-error"
@@ -53,34 +65,57 @@ export function TriggerCard({
          >
            <LuTrash2 className="size-4" />
          </button>
+          <button
+            type="button"
+            className="btn btn-ghost btn-xs btn-square"
+            title={expanded ? "Collapse" : "Expand"}
+            aria-expanded={expanded}
+            onClick={() => setExpanded((v) => !v)}
+          >
+            <LuChevronDown className={`size-4 opacity-70 transition-transform ${expanded ? "rotate-180" : ""}`} />
+          </button>
        </div>
-        {type === "HTTP" ? (
-          <HttpFields
-            trigger={trigger}
-            owner={owner}
-            disabled={disabled}
-            onChange={onChange}
-            auths={auths}
-            pages={pages}
-          />
-        ) : null}
-        {type === "cron" ? (
-          <CronFields trigger={trigger} disabled={disabled} onChange={onChange} />
-        ) : null}
-        {type === "workflow" ? (
-          <p className="text-sm opacity-80">
-            Other workflows can call this one with <span className="font-mono">trigger-workflow.js</span>.
-            No extra fields.
-          </p>
-        ) : null}
-        {type !== "HTTP" && type !== "cron" && type !== "workflow" ? (
-          <p className="text-sm opacity-70">Unknown trigger type. Edit it in the YAML tab.</p>
+        {expanded ? (
+          <>
+            {type === "HTTP" ? (
+              <HttpFields
+                trigger={trigger}
+                owner={owner}
+                disabled={disabled}
+                onChange={onChange}
+                auths={auths}
+                pages={pages}
+              />
+            ) : null}
+            {type === "cron" ? (
+              <CronFields trigger={trigger} disabled={disabled} onChange={onChange} />
+            ) : null}
+            {type === "workflow" ? (
+              <p className="text-sm opacity-80">
+                Other workflows can call this one with <span className="font-mono">trigger-workflow.js</span>.
+                No extra fields.
+              </p>
+            ) : null}
+            {type !== "HTTP" && type !== "cron" && type !== "workflow" ? (
+              <p className="text-sm opacity-70">Unknown trigger type. Edit it in the YAML tab.</p>
+            ) : null}
+          </>
        ) : null}
      </div>
    </article>
  );
 }

+function triggerSummary(trigger, owner) {
+  const type = trigger?.type;
+  if (type === "HTTP") {
+    return `${trigger.method || "POST"} ${namespacedPath(owner || "owner", trigger.path || "/")}`;
+  }
+  if (type === "cron") return trigger.schedule || "";
+  if (type === "workflow") return "callable";
+  return "";
+}
+
 function typeLabel(type) {
  if (type === "HTTP") return "HTTP";
  if (type === "cron") return "Cron";
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { LuPlay } from "react-icons/lu";
+import { LuMaximize2, LuMinimize2, LuPlay } from "react-icons/lu";
 import { errorMessage } from "../../api/client.js";
 import { useRunWorkflow } from "../../api/hooks.js";
 import { CodeEditor } from "../CodeEditor.jsx";
@@ -13,12 +13,14 @@ export function WorkflowTestPanel({
  defaultData,
  disabled,
  disabledReason,
-  testKey = 0,
+  open,
+  onClose,
 }) {
  const run = useRunWorkflow();
  const [dataJson, setDataJson] = useState(() => prettyJson(defaultData ?? {}));
  const [parseError, setParseError] = useState(null);
  const [last, setLast] = useState(null);
+  const [expanded, setExpanded] = useState(false);

  useEffect(() => {
    setDataJson(prettyJson(defaultData ?? {}));
@@ -61,28 +63,52 @@ export function WorkflowTestPanel({
    ? prettyJson(last.error ? { error: last.error } : last.result)
    : "";

+  function close() {
+    setExpanded(false);
+    onClose?.();
+  }
+
  return (
-    <details
-      key={testKey}
-      className="collapse collapse-arrow border border-base-300 bg-base-100 shrink-0"
-      open={testKey > 0 ? true : undefined}
-    >
-      <summary className="collapse-title min-h-0 py-2 text-sm font-semibold">
-        Test
-      </summary>
-      <div className="collapse-content space-y-2">
-        <p className="text-xs opacity-70">
-          Runs the <strong>saved</strong> YAML and writes an Event. Manual run works even when the
-          workflow is disabled. Save before testing unsaved edits.
-        </p>
-        {disabledReason ? <p className="text-warning text-xs">{disabledReason}</p> : null}
-        {parseError ? <p className="text-error text-sm">{parseError}</p> : null}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <div className="h-40">
-            <p className="text-xs opacity-60 mb-1">data</p>
-            <CodeEditor language="json" value={dataJson} onChange={setDataJson} height="100%" />
+    <dialog className={`modal ${open ? "modal-open" : ""}`}>
+      <div
+        className={
+          expanded
+            ? "modal-box flex h-dvh max-h-dvh w-dvw max-w-none flex-col rounded-none"
+            : "modal-box flex max-w-5xl flex-col"
+        }
+      >
+        <div className="flex shrink-0 items-start gap-2">
+          <div className="min-w-0 flex-1">
+            <h3 className="font-bold text-lg">Test workflow</h3>
+            <p className="text-sm opacity-70">
+              Runs the <strong>saved</strong> YAML and writes an Event. Manual run works even when
+              the workflow is disabled. Save before testing unsaved edits.
+            </p>
          </div>
-          <div className="h-40">
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm btn-square"
+            title={expanded ? "Exit full screen" : "Full screen"}
+            aria-label={expanded ? "Exit full screen" : "Full screen"}
+            onClick={() => setExpanded((v) => !v)}
+          >
+            {expanded ? <LuMinimize2 className="size-4" /> : <LuMaximize2 className="size-4" />}
+          </button>
+        </div>
+        {disabledReason ? (
+          <p className="text-warning text-xs mt-2 shrink-0">{disabledReason}</p>
+        ) : null}
+        {parseError ? <p className="text-error text-sm mt-2 shrink-0">{parseError}</p> : null}
+        <div
+          className={`grid grid-cols-1 md:grid-cols-2 gap-3 mt-3 min-h-0 ${expanded ? "flex-1" : ""}`}
+        >
+          <div className={expanded ? "min-h-0 h-full" : "min-h-64 h-64"}>
+            <p className="text-xs opacity-60 mb-1">data</p>
+            <div className={expanded ? "h-[calc(100%-1.25rem)]" : "h-[calc(100%-1.25rem)]"}>
+              <CodeEditor language="json" value={dataJson} onChange={setDataJson} height="100%" />
+            </div>
+          </div>
+          <div className={expanded ? "min-h-0 h-full" : "min-h-64 h-64"}>
            <p className="text-xs opacity-60 mb-1 flex items-center gap-2">
              result
              {last?.status ? <StatusBadge status={last.status} /> : null}
@@ -92,13 +118,24 @@ export function WorkflowTestPanel({
                </Link>
              ) : null}
            </p>
-            <CodeEditor language="json" value={resultJson} onChange={() => {}} readOnly height="100%" />
+            <div className={expanded ? "h-[calc(100%-1.25rem)]" : "h-[calc(100%-1.25rem)]"}>
+              <CodeEditor
+                language="json"
+                value={resultJson}
+                onChange={() => {}}
+                readOnly
+                height="100%"
+              />
+            </div>
          </div>
        </div>
-        <div className="flex justify-end">
+        <div className="modal-action shrink-0">
+          <button type="button" className="btn" onClick={close}>
+            Close
+          </button>
          <button
            type="button"
-            className="btn btn-primary btn-sm"
+            className="btn btn-primary"
            disabled={disabled || run.isPending}
            onClick={onRun}
          >
@@ -111,6 +148,11 @@ export function WorkflowTestPanel({
          </button>
        </div>
      </div>
-    </details>
+      <form method="dialog" className="modal-backdrop">
+        <button type="button" onClick={close}>
+          close
+        </button>
+      </form>
+    </dialog>
  );
 }
@@ -35,7 +35,8 @@ export function WorkflowVisualEditor({
  extraChrome,
  showTest,
  savedYaml,
-  testKey,
+  testOpen,
+  onTestClose,
 }) {
  const [tab, setTab] = useState("scripts");
  const [lastEdited, setLastEdited] = useState("yaml");
@@ -185,7 +186,8 @@ export function WorkflowVisualEditor({
          defaultData={defaultData}
          disabled={Boolean(testDisabledReason)}
          disabledReason={testDisabledReason}
-          testKey={testKey}
+          open={testOpen}
+          onClose={onTestClose}
        />
      ) : null}
    </>
@@ -4,6 +4,7 @@ export const NEW_SCRIPT_TEMPLATE = `async function main(ctx) {

 main.meta = {
  description: "",
+  previewConfigKey: "",
  config: {},
  input: {},
  output: {},
@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+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";
@@ -22,9 +22,19 @@ function isEditableScript(s) {

 export function EventDetailPage() {
  const { id } = useParams();
+  const navigate = useNavigate();
  const { data: run, isLoading, error } = useRun(id);
  const [stepFilters, setStepFilters] = useState([]);

+  function goBack() {
+    const idx = window.history.state?.idx;
+    if (typeof idx === "number" && idx > 0) {
+      navigate(-1);
+      return;
+    }
+    navigate("/events");
+  }
+
  const steps = run?.steps ?? [];
  const logs = run?.logs ?? [];
  const logFilters = useMemo(
@@ -53,9 +63,9 @@ export function EventDetailPage() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
-        <Link to="/events" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
+        <button type="button" className="btn btn-ghost btn-sm btn-square" aria-label="Back" onClick={goBack}>
          <LuArrowLeft className="size-4" />
-        </Link>
+        </button>
        <h1 className="text-xl font-semibold truncate">{run.workflow_name || run.workflow}</h1>
        <StatusBadge status={run.status} />
      </div>
@@ -152,7 +152,7 @@ export function WorkflowEditPage() {
  const [content, setContent] = useState("");
  const [savedYaml, setSavedYaml] = useState("");
  const [contentReady, setContentReady] = useState(false);
-  const [testKey, setTestKey] = useState(0);
+  const [testOpen, setTestOpen] = useState(false);

  useEffect(() => {
    if (existing.isLoading) return;
@@ -192,17 +192,20 @@ export function WorkflowEditPage() {
    );
  }

-  const yamlOk = !parseWorkflowYaml(content).parseError;
+  const parsedDoc = parseWorkflowYaml(content);
+  const yamlOk = !parsedDoc.parseError;
+  const workflowName = parsedDoc.doc?.name?.trim();
+  const pageTitle = workflowName ? `${workflowName} (${file})` : file;

  return (
    <WorkflowEditorLayout
-      title={`${owner}/${file}`}
+      title={pageTitle}
      savePending={save.isPending}
      saveDisabled={!contentReady}
      saveError={save.isError ? errorMessage(save.error) : null}
      saveSuccess={save.isSuccess}
      onSave={onSave}
-      onTest={() => setTestKey((k) => k + 1)}
+      onTest={() => setTestOpen(true)}
      onToggleEnabled={() =>
        setEnabled.mutate({
          owner,
@@ -223,7 +226,8 @@ export function WorkflowEditPage() {
          file={file}
          savedYaml={savedYaml}
          showTest
-          testKey={testKey}
+          testOpen={testOpen}
+          onTestClose={() => setTestOpen(false)}
        />
      </div>
    </WorkflowEditorLayout>