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.

packages/web/src/pages/EventDetailPage.jsx

@@ -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>

packages/web/src/pages/WorkflowEditPage.jsx

@@ -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>