@powerhousedao/workflow 6.2.3-dev.11

package/dist/browser/editor-Hh1cyIIW.js

@@ -0,0 +1,1550 @@
+import { E as packageFromConnectorId, f as fireWorkflow, g as rerunRun, l as fetchRuns } from "./runtime-api-DQa04P3e.js";
+import { y as actions } from "./module-12vI18HY.js";
+import { y as actions$1 } from "./module-CYQnNZWl.js";
+import { r as useWorkflowDocumentsInSelectedDrive } from "./workflow-CFZUezoY.js";
+import { i as errorMessage, n as DocumentErrorBoundary, r as DocumentLoadError, t as useSyncWorkflowRuntimeUrl } from "./use-runtime-url-DzYskFkw.js";
+import { t as CONNECTION_STATUS_STYLES } from "./status-kpDX5CIA.js";
+import { i as portRank, l as usePieceLogos, o as blockMeta } from "./ap-layout-DLTZBpE7.js";
+import { addDocument, setSelectedNode, showDeleteNodeModal, useDispatch, useDocumentSafe, useFileNodesInSelectedDrive, usePHToast, useSelectedDrive, useSelectedNode, useSetPHAppConfig } from "@powerhousedao/reactor-browser";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region editors/workflow-studio/components/run-format.ts
+const RUN_STATUSES = [
+	"RUNNING",
+	"SUCCEEDED",
+	"FAILED"
+];
+const RUN_DOT = {
+	SUCCEEDED: "bg-green-500",
+	FAILED: "bg-red-500",
+	RUNNING: "bg-amber-400",
+	PARKED: "bg-slate-400",
+	CANCELLED: "bg-slate-400"
+};
+const RUN_TEXT = {
+	SUCCEEDED: "text-green-700",
+	FAILED: "text-red-700",
+	RUNNING: "text-amber-700"
+};
+const STEP_TEXT = {
+	SUCCEEDED: "text-green-600",
+	FAILED: "text-red-600",
+	SKIPPED: "text-slate-400",
+	REPLAYED: "text-sky-600"
+};
+const WORKFLOW_STATUS_DOT = {
+	ENABLED: "bg-green-500",
+	DRAFT: "bg-slate-300",
+	DISABLED: "bg-amber-400",
+	ARCHIVED: "bg-slate-200"
+};
+const CONNECTION_STATUS_DOT = {
+	OK: "bg-green-500",
+	ERROR: "bg-red-500",
+	REVOKED: "bg-red-400",
+	UNCONFIGURED: "bg-slate-300"
+};
+const WORKFLOW_STATUS_STYLES = {
+	ENABLED: "bg-green-100 text-green-700",
+	DRAFT: "bg-slate-100 text-slate-500",
+	DISABLED: "bg-amber-100 text-amber-700",
+	ARCHIVED: "bg-slate-200 text-slate-400"
+};
+function formatDuration(startedAt, endedAt) {
+	if (!endedAt) return "…";
+	const ms = new Date(endedAt).getTime() - new Date(startedAt).getTime();
+	if (ms < 1e3) return `${ms}ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+	return `${Math.floor(ms / 6e4)}m ${Math.round(ms % 6e4 / 1e3)}s`;
+}
+function durationMs(startedAt, endedAt) {
+	if (!endedAt) return null;
+	return new Date(endedAt).getTime() - new Date(startedAt).getTime();
+}
+function formatWhen(startedAt) {
+	const diff = Date.now() - new Date(startedAt).getTime();
+	if (diff < 6e4) return "just now";
+	if (diff < 36e5) return `${Math.floor(diff / 6e4)}m ago`;
+	if (diff < 864e5) return `${Math.floor(diff / 36e5)}h ago`;
+	return new Date(startedAt).toLocaleDateString();
+}
+function formatAbsolute(iso) {
+	return new Date(iso).toLocaleString();
+}
+function formatTrigger(kind) {
+	return kind.replace(/[-_]/g, " ").toLowerCase();
+}
+function runStats(runs) {
+	const succeeded = runs.filter((run) => run.status === "SUCCEEDED").length;
+	const failed = runs.filter((run) => run.status === "FAILED").length;
+	const finished = succeeded + failed;
+	return {
+		total: runs.length,
+		succeeded,
+		failed,
+		running: runs.filter((run) => run.status === "RUNNING").length,
+		lastRun: runs[0],
+		successRate: finished === 0 ? null : Math.round(succeeded / finished * 100)
+	};
+}
+//#endregion
+//#region editors/workflow-studio/components/EditorToolbar.tsx
+const WORKFLOW_TYPE$3 = "powerhouse/workflow";
+function Fact(props) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-baseline gap-1.5",
+		title: props.title,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[11px] text-slate-400",
+			children: props.label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-xs tabular-nums text-slate-700",
+			children: props.value
+		})]
+	});
+}
+function EditorToolbar(props) {
+	const { data: document } = useDocumentSafe(props.node?.id ?? null);
+	const isWorkflow = document?.header.documentType === WORKFLOW_TYPE$3;
+	const state = isWorkflow ? document.state.global : void 0;
+	const stats = runStats(props.runs ?? []);
+	const lastRun = isWorkflow ? stats.lastRun : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-solid border-slate-200 bg-slate-50 px-3 py-2",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "flex items-center gap-1.5 rounded border border-solid border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-600 hover:border-slate-400 hover:text-slate-900",
+				onClick: props.onBack,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: "←"
+				}), isWorkflow ? "Back to runs" : "Back to overview"]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate text-sm font-medium text-slate-800",
+				children: state?.name || props.node?.name || "Untitled"
+			}),
+			state ? /* @__PURE__ */ jsx("span", {
+				className: `rounded px-2 py-0.5 text-[11px] font-semibold ${WORKFLOW_STATUS_STYLES[state.status] ?? "bg-slate-100 text-slate-500"}`,
+				children: state.status
+			}) : null,
+			isWorkflow ? /* @__PURE__ */ jsxs("span", {
+				className: "ml-auto flex flex-wrap items-center gap-x-4 gap-y-1",
+				children: [
+					lastRun ? /* @__PURE__ */ jsxs("span", {
+						className: "flex items-baseline gap-1.5",
+						title: formatAbsolute(lastRun.startedAt),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-[11px] text-slate-400",
+							children: "Last run"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5 text-xs",
+							children: [
+								/* @__PURE__ */ jsx("span", { className: `h-2 w-2 shrink-0 rounded-full ${RUN_DOT[lastRun.status] ?? "bg-slate-300"}` }),
+								/* @__PURE__ */ jsx("span", {
+									className: RUN_TEXT[lastRun.status] ?? "text-slate-700",
+									children: formatWhen(lastRun.startedAt)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "tabular-nums text-slate-400",
+									children: formatDuration(lastRun.startedAt, lastRun.endedAt)
+								})
+							]
+						})]
+					}) : /* @__PURE__ */ jsx(Fact, {
+						label: "Last run",
+						value: "Never run"
+					}),
+					stats.successRate !== null ? /* @__PURE__ */ jsx(Fact, {
+						label: "Success",
+						value: `${stats.successRate}%`,
+						title: `${stats.succeeded} of ${stats.succeeded + stats.failed} finished runs succeeded`
+					}) : null,
+					/* @__PURE__ */ jsx(Fact, {
+						label: "Runs",
+						value: String(stats.total)
+					})
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/components/connection-usage.ts
+function connectionUsage(connectionId, workflows) {
+	const usage = [];
+	for (const workflow of workflows) {
+		const trigger = workflow.trigger?.connectionId === connectionId;
+		const steps = workflow.steps.filter((step) => step.connectionId === connectionId);
+		if (trigger || steps.length > 0) usage.push({
+			workflow,
+			trigger,
+			steps
+		});
+	}
+	return usage.sort((a, b) => a.workflow.name.localeCompare(b.workflow.name));
+}
+function enabledDependents(usage) {
+	return usage.filter((entry) => entry.workflow.status === "ENABLED").length;
+}
+//#endregion
+//#region editors/workflow-studio/components/ConnectionView.tsx
+const CONNECTION_TYPE$1 = "powerhouse/connection";
+const ACTION$1 = "rounded border border-solid border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-700 hover:border-slate-400 hover:bg-slate-50";
+function Stat$1(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 grow border-l border-solid border-slate-200 px-3 py-2 first:border-l-0 first:pl-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[11px] text-slate-400",
+			children: props.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "truncate text-xs text-slate-800",
+			children: props.children
+		})]
+	});
+}
+function configEntries(config) {
+	if (!config || typeof config !== "object" || Array.isArray(config)) return [];
+	return Object.entries(config).map(([key, value]) => [key, typeof value === "string" ? value : JSON.stringify(value)]);
+}
+function ConnectionView(props) {
+	const connectionId = props.node.id;
+	const { data: document, error, reload } = useDocumentSafe(connectionId);
+	const [, dispatch] = useDispatch(document);
+	const workflows = useWorkflowDocumentsInSelectedDrive();
+	if (error !== void 0) return /* @__PURE__ */ jsx(DocumentLoadError, {
+		title: "This connection could not be loaded",
+		documentId: connectionId,
+		error,
+		onRetry: () => {
+			reload();
+		}
+	});
+	if (document?.header.documentType !== CONNECTION_TYPE$1) return null;
+	const state = document.state.global;
+	const revoked = state.status === "REVOKED";
+	const packageName = packageFromConnectorId(state.connectorId);
+	const usage = connectionUsage(connectionId, (workflows ?? []).map((workflow) => ({
+		id: workflow.header.id,
+		name: workflow.state.global.name || workflow.header.name || "Untitled",
+		status: workflow.state.global.status,
+		trigger: workflow.state.global.trigger,
+		steps: workflow.state.global.steps
+	})));
+	const atRisk = enabledDependents(usage);
+	const config = configEntries(state.config);
+	const setStatus = (status) => dispatch(actions.recordCheckResult({
+		status,
+		checkedAt: (/* @__PURE__ */ new Date()).toISOString()
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto w-full max-w-5xl p-6",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: "min-w-0 truncate text-base font-semibold text-slate-800",
+							children: state.name || props.node.name || "Untitled connection"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: `rounded px-2 py-0.5 text-[11px] font-semibold ${CONNECTION_STATUS_STYLES[state.status]}`,
+							children: state.status
+						}),
+						/* @__PURE__ */ jsx("span", { className: "grow" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: ACTION$1,
+							onClick: props.onEdit,
+							children: "Edit connection"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: ACTION$1,
+							onClick: () => setStatus(revoked ? "OK" : "REVOKED"),
+							children: revoked ? "Reactivate" : "Revoke"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "rounded border border-solid border-red-200 bg-white px-2.5 py-1 text-xs font-medium text-red-600 hover:border-red-300 hover:bg-red-50",
+							onClick: () => showDeleteNodeModal(props.node),
+							children: "Delete"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex flex-wrap items-stretch rounded-md border border-solid border-slate-200 bg-white px-3",
+					children: [
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Connector",
+							children: packageName || /* @__PURE__ */ jsx("span", {
+								className: "text-slate-400",
+								children: "None picked"
+							})
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Auth",
+							children: state.authType
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Account",
+							children: state.accountLabel ?? /* @__PURE__ */ jsx("span", {
+								className: "text-slate-400",
+								children: "—"
+							})
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Last checked",
+							children: state.lastCheckedAt ? formatAbsolute(state.lastCheckedAt) : /* @__PURE__ */ jsx("span", {
+								className: "text-slate-400",
+								children: "Never"
+							})
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Secrets",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "tabular-nums",
+								children: state.secretRefs.length
+							})
+						}),
+						/* @__PURE__ */ jsx(Stat$1, {
+							label: "Used by",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "tabular-nums",
+								children: [usage.length, atRisk > 0 ? /* @__PURE__ */ jsxs("span", {
+									className: "text-slate-400",
+									children: [
+										" · ",
+										atRisk,
+										" enabled"
+									]
+								}) : null]
+							})
+						})
+					]
+				})]
+			}),
+			state.lastError ? /* @__PURE__ */ jsx("p", {
+				className: "mb-4 rounded bg-red-50 px-3 py-2 text-xs text-red-600",
+				children: state.lastError
+			}) : null,
+			/* @__PURE__ */ jsxs("section", {
+				className: "mb-4 rounded-md border border-solid border-slate-200 bg-white px-3 py-3",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "mb-2 text-[11px] text-slate-400",
+					children: "Used by"
+				}), usage.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-slate-500",
+					children: "No workflow uses this connection yet. Bind it to a step in a workflow's editor."
+				}) : /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-1",
+					children: usage.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "flex w-full items-center gap-2 rounded px-1 py-1 text-left hover:bg-slate-50",
+						onClick: () => props.onOpenWorkflow(entry.workflow.id),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: `h-1.5 w-1.5 shrink-0 rounded-full ${WORKFLOW_STATUS_DOT[entry.workflow.status] ?? "bg-slate-300"}`,
+								title: entry.workflow.status
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "shrink-0 text-xs font-medium text-slate-700",
+								children: entry.workflow.name
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "truncate text-[11px] text-slate-400",
+								children: [
+									entry.trigger ? "trigger" : null,
+									entry.trigger && entry.steps.length > 0 ? " · " : null,
+									entry.steps.map((step) => step.key).join(", ")
+								]
+							})
+						]
+					}) }, entry.workflow.id))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "rounded-md border border-solid border-slate-200 bg-white px-3 py-3",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "mb-2 text-[11px] text-slate-400",
+					children: "Configuration"
+				}), config.length === 0 && state.secretRefs.length === 0 ? /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-slate-500",
+					children: [
+						"Nothing configured yet.",
+						" ",
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "underline hover:text-slate-800",
+							onClick: props.onEdit,
+							children: "Open the editor"
+						}),
+						" ",
+						"to fill it in."
+					]
+				}) : /* @__PURE__ */ jsxs("dl", {
+					className: "flex flex-col gap-1",
+					children: [config.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2 text-xs",
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: "w-40 shrink-0 truncate text-slate-500",
+							children: key
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "min-w-0 truncate text-slate-800",
+							children: value
+						})]
+					}, key)), state.secretRefs.map((ref) => /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2 text-xs",
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: "w-40 shrink-0 truncate text-slate-500",
+							children: ref.name
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "text-slate-400",
+							children: "stored secret · never displayed"
+						})]
+					}, ref.id))]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/components/RunsTable.tsx
+const CONTROL = "rounded border border-solid border-slate-300 bg-white px-2 py-1 text-xs text-slate-700 focus:border-slate-400 focus:outline-none";
+function stringify(value) {
+	if (value === void 0) return "";
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+}
+function StepRow(props) {
+	const { step } = props;
+	const meta = blockMeta(step.blockType);
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-t border-solid border-slate-100 first:border-t-0",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			className: "flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-white focus-visible:bg-white focus-visible:outline-none",
+			onClick: () => setOpen((value) => !value),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: `w-16 shrink-0 text-[11px] font-semibold ${STEP_TEXT[step.status] ?? "text-slate-500"}`,
+					children: step.status
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-xs font-medium text-slate-700",
+					children: step.stepKey
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "truncate text-xs text-slate-400",
+					children: [
+						meta.displayName,
+						" · ",
+						meta.subtitle
+					]
+				}),
+				step.port ? /* @__PURE__ */ jsxs("span", {
+					className: "ml-auto shrink-0 rounded bg-slate-100 px-1 text-[10px] text-slate-500",
+					children: ["→ ", step.port]
+				}) : null
+			]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1 px-3 pb-2",
+			children: [
+				step.error ? /* @__PURE__ */ jsx("pre", {
+					className: "overflow-x-auto rounded bg-red-50 p-2 text-[11px] text-red-600",
+					children: step.error
+				}) : null,
+				/* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer text-[11px] text-slate-400",
+					children: "input"
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "max-h-48 overflow-auto rounded bg-white p-2 text-[11px] text-slate-600",
+					children: stringify(step.input)
+				})] }),
+				/* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer text-[11px] text-slate-400",
+					children: "output"
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "max-h-48 overflow-auto rounded bg-white p-2 text-[11px] text-slate-600",
+					children: stringify(step.output)
+				})] })
+			]
+		}) : null]
+	});
+}
+function RunDetail(props) {
+	const { run } = props;
+	const [rerunning, setRerunning] = useState(false);
+	const [rerunError, setRerunError] = useState(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 bg-slate-50 px-4 py-3",
+		children: [
+			run.error ? /* @__PURE__ */ jsx("p", {
+				className: "rounded bg-red-50 px-2 py-1 text-xs text-red-600",
+				children: run.error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-slate-500",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["run ", /* @__PURE__ */ jsx("span", {
+						className: "font-mono",
+						children: run.id.slice(0, 8)
+					})] }),
+					/* @__PURE__ */ jsxs("span", { children: ["started ", formatAbsolute(run.startedAt)] }),
+					run.rerunOf ? /* @__PURE__ */ jsxs("span", { children: ["resumes ", /* @__PURE__ */ jsx("span", {
+						className: "font-mono",
+						children: run.rerunOf.slice(0, 8)
+					})] }) : null,
+					run.status === "FAILED" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: rerunning,
+						className: "rounded border border-solid border-slate-300 bg-white px-2 py-1 font-medium text-slate-600 hover:border-slate-400 disabled:opacity-50",
+						onClick: () => {
+							setRerunning(true);
+							setRerunError(null);
+							rerunRun(run.id).then((result) => setRerunError(result.error)).catch((error) => setRerunError(error instanceof Error ? error.message : String(error))).finally(() => {
+								setRerunning(false);
+								props.onChanged();
+							});
+						},
+						children: rerunning ? "Rerunning…" : "↻ Rerun from failure"
+					}) : null,
+					rerunError ? /* @__PURE__ */ jsx("span", {
+						className: "text-red-600",
+						children: rerunError
+					}) : null
+				]
+			}),
+			run.steps.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-slate-400",
+				children: "This run recorded no steps."
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "rounded border border-solid border-slate-200 bg-slate-50",
+				children: run.steps.map((step) => /* @__PURE__ */ jsx(StepRow, { step }, step.stepId + step.stepKey))
+			})
+		]
+	});
+}
+function SortHeader(props) {
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		className: props.className,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: `flex items-center gap-1 hover:text-slate-700 ${props.active ? "text-slate-700" : ""}`,
+			onClick: props.onClick,
+			children: [props.label, /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: props.active ? "" : "opacity-0",
+				children: props.descending ? "↓" : "↑"
+			})]
+		})
+	});
+}
+function RunsTable(props) {
+	const [query, setQuery] = useState("");
+	const [status, setStatus] = useState("ALL");
+	const [workflow, setWorkflow] = useState("ALL");
+	const [trigger, setTrigger] = useState("ALL");
+	const [sort, setSort] = useState("startedAt");
+	const [descending, setDescending] = useState(true);
+	const [expanded, setExpanded] = useState(null);
+	const workflowOptions = useMemo(() => [...new Map(props.runs.map((run) => [run.workflowId, run.workflowName]))].map(([id, name]) => ({
+		id,
+		name
+	})).sort((a, b) => a.name.localeCompare(b.name)), [props.runs]);
+	const triggerOptions = useMemo(() => [...new Set(props.runs.map((run) => run.triggerKind))].sort(), [props.runs]);
+	const scoped = useMemo(() => {
+		const needle = query.trim().toLowerCase();
+		return props.runs.filter((run) => {
+			if (workflow !== "ALL" && run.workflowId !== workflow) return false;
+			if (trigger !== "ALL" && run.triggerKind !== trigger) return false;
+			if (!needle) return true;
+			return run.workflowName.toLowerCase().includes(needle) || run.id.toLowerCase().includes(needle) || (run.error?.toLowerCase().includes(needle) ?? false) || run.steps.some((step) => step.stepKey.toLowerCase().includes(needle));
+		});
+	}, [
+		props.runs,
+		query,
+		workflow,
+		trigger
+	]);
+	const counts = useMemo(() => ({
+		ALL: scoped.length,
+		RUNNING: scoped.filter((run) => run.status === "RUNNING").length,
+		SUCCEEDED: scoped.filter((run) => run.status === "SUCCEEDED").length,
+		FAILED: scoped.filter((run) => run.status === "FAILED").length
+	}), [scoped]);
+	const visible = useMemo(() => {
+		const rows = scoped.filter((run) => status === "ALL" || run.status === status);
+		const direction = descending ? -1 : 1;
+		return [...rows].sort((a, b) => {
+			if (sort === "duration") return ((durationMs(a.startedAt, a.endedAt) ?? Infinity) - (durationMs(b.startedAt, b.endedAt) ?? Infinity)) * direction;
+			return (new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime()) * direction;
+		});
+	}, [
+		scoped,
+		status,
+		sort,
+		descending
+	]);
+	const filtered = query.trim() || workflow !== "ALL" || trigger !== "ALL";
+	const sortBy = (key) => {
+		if (key === sort) {
+			setDescending((value) => !value);
+			return;
+		}
+		setSort(key);
+		setDescending(true);
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-2 flex flex-wrap items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex overflow-hidden rounded border border-solid border-slate-300",
+				children: ["ALL", ...RUN_STATUSES].map((option) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": status === option,
+					className: `border-r border-solid border-slate-200 px-2.5 py-1 text-xs last:border-r-0 ${status === option ? "bg-slate-800 text-white" : "bg-white text-slate-600 hover:bg-slate-50"}`,
+					onClick: () => setStatus(option),
+					children: [option === "ALL" ? "All" : option.charAt(0) + option.slice(1).toLowerCase(), /* @__PURE__ */ jsx("span", {
+						className: "ml-1.5 tabular-nums opacity-60",
+						children: counts[option]
+					})]
+				}, option))
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "search",
+				className: `${CONTROL} w-44`,
+				placeholder: "Search runs",
+				value: query,
+				onChange: (event) => setQuery(event.target.value)
+			}),
+			props.showWorkflow && workflowOptions.length > 1 ? /* @__PURE__ */ jsxs("select", {
+				className: CONTROL,
+				value: workflow,
+				onChange: (event) => setWorkflow(event.target.value),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "ALL",
+					children: "Every workflow"
+				}), workflowOptions.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option.id,
+					children: option.name
+				}, option.id))]
+			}) : null,
+			triggerOptions.length > 1 ? /* @__PURE__ */ jsxs("select", {
+				className: CONTROL,
+				value: trigger,
+				onChange: (event) => setTrigger(event.target.value),
+				children: [/* @__PURE__ */ jsx("option", {
+					value: "ALL",
+					children: "Every trigger"
+				}), triggerOptions.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option,
+					children: formatTrigger(option)
+				}, option))]
+			}) : null,
+			filtered ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-xs text-slate-500 underline hover:text-slate-800",
+				onClick: () => {
+					setQuery("");
+					setWorkflow("ALL");
+					setTrigger("ALL");
+				},
+				children: "Clear filters"
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "ml-auto text-[11px] tabular-nums text-slate-400",
+				children: [
+					visible.length,
+					" of ",
+					props.runs.length,
+					" runs"
+				]
+			})
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto rounded-md border border-solid border-slate-200 bg-white",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full border-collapse text-left",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				className: "border-b border-solid border-slate-200 text-[11px] font-medium text-slate-400",
+				children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "px-3 py-2",
+						children: "Status"
+					}),
+					props.showWorkflow ? /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "px-3 py-2",
+						children: "Workflow"
+					}) : null,
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "px-3 py-2",
+						children: "Trigger"
+					}),
+					/* @__PURE__ */ jsx(SortHeader, {
+						label: "Started",
+						className: "px-3 py-2",
+						active: sort === "startedAt",
+						descending,
+						onClick: () => sortBy("startedAt")
+					}),
+					/* @__PURE__ */ jsx(SortHeader, {
+						label: "Duration",
+						className: "px-3 py-2",
+						active: sort === "duration",
+						descending,
+						onClick: () => sortBy("duration")
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "px-3 py-2",
+						children: "Steps"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "w-8 px-3 py-2",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Details"
+						})
+					})
+				]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: visible.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				colSpan: props.showWorkflow ? 7 : 6,
+				className: "px-3 py-6 text-center text-sm text-slate-400",
+				children: "No runs match these filters."
+			}) }) : visible.map((run) => {
+				const open = expanded === run.id;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+					className: `cursor-pointer border-b border-solid border-slate-100 text-sm ${open ? "bg-slate-50" : "hover:bg-slate-50"}`,
+					onClick: () => setExpanded(open ? null : run.id),
+					children: [
+						/* @__PURE__ */ jsx("td", {
+							className: "px-3 py-2",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", { className: `h-2 w-2 shrink-0 rounded-full ${RUN_DOT[run.status] ?? "bg-slate-300"}` }), /* @__PURE__ */ jsx("span", {
+									className: `text-xs font-medium ${RUN_TEXT[run.status] ?? "text-slate-500"}`,
+									children: run.status.charAt(0) + run.status.slice(1).toLowerCase()
+								})]
+							})
+						}),
+						props.showWorkflow ? /* @__PURE__ */ jsx("td", {
+							className: "max-w-48 truncate px-3 py-2 text-slate-800",
+							children: run.workflowName
+						}) : null,
+						/* @__PURE__ */ jsxs("td", {
+							className: "px-3 py-2 text-xs text-slate-500",
+							children: [formatTrigger(run.triggerKind), /* @__PURE__ */ jsxs("span", {
+								className: "ml-1 text-slate-300",
+								children: ["v", run.workflowVersion]
+							})]
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "whitespace-nowrap px-3 py-2 text-xs tabular-nums text-slate-500",
+							title: formatAbsolute(run.startedAt),
+							children: formatWhen(run.startedAt)
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "whitespace-nowrap px-3 py-2 text-xs tabular-nums text-slate-500",
+							children: formatDuration(run.startedAt, run.endedAt)
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-3 py-2 text-xs tabular-nums text-slate-500",
+							children: run.steps.length
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-3 py-2",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-expanded": open,
+								"aria-label": `${open ? "Hide" : "Show"} steps of the run started ${formatAbsolute(run.startedAt)}`,
+								className: "rounded px-1 text-xs text-slate-400 hover:text-slate-700",
+								onClick: (event) => {
+									event.stopPropagation();
+									setExpanded(open ? null : run.id);
+								},
+								children: /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									children: open ? "▾" : "▸"
+								})
+							})
+						})
+					]
+				}), open ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: props.showWorkflow ? 7 : 6,
+					className: "border-b border-solid border-slate-200 p-0",
+					children: /* @__PURE__ */ jsx(RunDetail, {
+						run,
+						onChanged: props.onChanged
+					})
+				}) }) : null] }, run.id);
+			}) })]
+		})
+	})] });
+}
+//#endregion
+//#region editors/workflow-studio/components/RunsView.tsx
+function RunsView(props) {
+	const [firing, setFiring] = useState(false);
+	const [fireError, setFireError] = useState(null);
+	const { runs } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-3 flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-base font-semibold text-slate-800",
+						children: props.title
+					}),
+					/* @__PURE__ */ jsx("span", { className: "grow" }),
+					props.onFire ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: firing,
+						className: "rounded bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-50",
+						onClick: () => {
+							setFiring(true);
+							setFireError(null);
+							props.onFire().then((fireResultError) => setFireError(fireResultError)).catch((fireCallError) => setFireError(fireCallError instanceof Error ? fireCallError.message : String(fireCallError))).finally(() => {
+								setFiring(false);
+								props.reload();
+							});
+						},
+						children: firing ? "Running…" : "▶ Run workflow"
+					}) : null
+				]
+			}),
+			fireError ? /* @__PURE__ */ jsx("p", {
+				className: "mb-2 rounded bg-red-50 px-3 py-2 text-xs text-red-600",
+				children: fireError
+			}) : null,
+			props.error ? /* @__PURE__ */ jsxs("p", {
+				className: "rounded bg-amber-50 px-3 py-2 text-xs text-amber-700",
+				children: [
+					"The workflow runtime is unreachable, so runs cannot be listed:",
+					" ",
+					props.error
+				]
+			}) : runs === null ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-slate-400",
+				children: "Loading runs…"
+			}) : runs.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "rounded-md border border-solid border-slate-200 bg-white px-3 py-6 text-center text-sm text-slate-400",
+				children: [
+					"No runs yet",
+					props.onFire ? " — run the workflow to record the first one" : "",
+					"."
+				]
+			}) : /* @__PURE__ */ jsx(RunsTable, {
+				runs,
+				showWorkflow: props.showWorkflow,
+				onChanged: props.reload
+			})
+		]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/components/Sidebar.tsx
+const WORKFLOW_TYPE$2 = "powerhouse/workflow";
+function documentName(document, fallback) {
+	return (document?.state?.global)?.name || fallback || "(unnamed)";
+}
+function documentStatus(document) {
+	return (document?.state?.global)?.status;
+}
+function Row(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `group mx-2 flex items-center rounded ${props.active ? "bg-white ring-1 ring-slate-200" : "hover:bg-slate-100"}`,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-current": props.active ? "true" : void 0,
+			className: `flex min-w-0 grow items-center gap-2 px-2 py-1.5 text-left text-sm ${props.active ? "text-slate-900" : "text-slate-600"}`,
+			onClick: props.onClick,
+			children: props.children
+		}), props.trailing]
+	});
+}
+const ROW_ACTION = "shrink-0 rounded px-1 py-0.5 text-xs text-slate-400 opacity-0 hover:bg-slate-200 hover:text-slate-700 focus-visible:opacity-100 group-hover:opacity-100";
+const DELETE_ACTION = `${ROW_ACTION} hover:bg-red-100 hover:text-red-600`;
+function DeleteButton(props) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title: "Delete",
+		"aria-label": `Delete ${props.label}`,
+		className: DELETE_ACTION,
+		onClick: () => showDeleteNodeModal(props.node),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "🗑"
+		})
+	});
+}
+function NodeRow(props) {
+	const { node } = props;
+	const { data: document, error } = useDocumentSafe(node.id);
+	useEffect(() => {
+		if (error !== void 0) console.error(`Failed to load document ${node.id}:`, error);
+	}, [error, node.id]);
+	if (error !== void 0) return /* @__PURE__ */ jsxs(Row, {
+		active: props.active,
+		onClick: props.onOpen,
+		trailing: /* @__PURE__ */ jsx("span", {
+			className: "mr-1.5 flex shrink-0 items-center",
+			children: /* @__PURE__ */ jsx(DeleteButton, {
+				node,
+				label: node.name || node.id
+			})
+		}),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "shrink-0 text-xs text-red-600",
+			title: `Could not load ${node.id}: ${errorMessage(error)}`,
+			"aria-hidden": true,
+			children: "⚠"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate text-red-600",
+			children: node.name || "(unnamed)"
+		})]
+	});
+	const status = documentStatus(document);
+	const dots = node.documentType === WORKFLOW_TYPE$2 ? WORKFLOW_STATUS_DOT : CONNECTION_STATUS_DOT;
+	return /* @__PURE__ */ jsxs(Row, {
+		active: props.active,
+		onClick: props.onOpen,
+		trailing: /* @__PURE__ */ jsxs("span", {
+			className: "mr-1.5 flex shrink-0 items-center",
+			children: [props.onEdit ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				title: "Open in editor",
+				"aria-label": `Open ${documentName(document, node.name)} in the editor`,
+				className: ROW_ACTION,
+				onClick: props.onEdit,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: "✎"
+				})
+			}) : null, /* @__PURE__ */ jsx(DeleteButton, {
+				node,
+				label: documentName(document, node.name)
+			})]
+		}),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `h-1.5 w-1.5 shrink-0 rounded-full ${status ? dots[status] ?? "bg-slate-300" : "bg-slate-200"}`,
+			title: status
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: documentName(document, node.name)
+		})]
+	});
+}
+function Section(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-1.5 flex items-center justify-between border-y border-solid border-slate-200 bg-slate-100 px-4 py-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-[11px] font-bold uppercase tracking-wider text-slate-600",
+				children: props.title
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: props.creating,
+				className: "flex h-5 w-5 items-center justify-center rounded border border-solid border-transparent text-sm leading-none text-slate-500 hover:border-slate-300 hover:bg-white hover:text-slate-800 disabled:opacity-50",
+				title: props.addLabel,
+				"aria-label": props.addLabel,
+				onClick: props.onCreate,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: "+"
+				})
+			})]
+		}), props.nodes.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "px-4 py-1 text-xs text-slate-400",
+			children: props.empty
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-0.5",
+			children: props.nodes.map((node) => /* @__PURE__ */ jsx(NodeRow, {
+				node,
+				active: props.activeId === node.id,
+				onOpen: () => props.onOpen(node),
+				onEdit: props.onEdit ? () => props.onEdit(node) : void 0
+			}, node.id))
+		})]
+	});
+}
+function Sidebar(props) {
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "w-60 shrink-0 overflow-y-auto border-r border-solid border-slate-200 bg-slate-50 py-2",
+		children: [
+			/* @__PURE__ */ jsxs(Row, {
+				active: props.allRunsActive,
+				onClick: props.onShowAllRuns,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "shrink-0 text-xs text-slate-400",
+					children: "☰"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: "All runs"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Workflows",
+				addLabel: "New workflow",
+				empty: "No workflows yet. Use + to add one.",
+				nodes: props.workflows,
+				activeId: props.activeId,
+				onOpen: props.onOpenWorkflow,
+				onEdit: props.onEditWorkflow,
+				onCreate: props.onCreateWorkflow,
+				creating: props.creating
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: "Connections",
+				addLabel: "New connection",
+				empty: "No connections yet. Use + to add one.",
+				nodes: props.connections,
+				activeId: props.activeId,
+				onOpen: props.onOpenConnection,
+				onEdit: props.onEditConnection,
+				onCreate: props.onCreateConnection,
+				creating: props.creating
+			})
+		]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/components/use-hash-selection.ts
+function readHash() {
+	return window.location.hash.replace(/^#/, "") || void 0;
+}
+function useHashSelection() {
+	const [selected, setSelected] = useState(readHash);
+	useEffect(() => {
+		const sync = () => setSelected(readHash());
+		window.addEventListener("hashchange", sync);
+		window.addEventListener("popstate", sync);
+		return () => {
+			window.removeEventListener("hashchange", sync);
+			window.removeEventListener("popstate", sync);
+		};
+	}, []);
+	return [selected, useCallback((id) => {
+		setSelected(id);
+		const url = new URL(window.location.href);
+		url.hash = id ?? "";
+		window.history.replaceState(null, "", url);
+	}, [])];
+}
+//#endregion
+//#region editors/workflow-studio/components/useRuns.ts
+const POLL_MS = 5e3;
+function useRuns(scope) {
+	const { workflowId, driveId, limit } = scope;
+	const [runs, setRuns] = useState(null);
+	const [error, setError] = useState(null);
+	const load = useRef(() => void 0);
+	useEffect(() => {
+		let cancelled = false;
+		const run = () => {
+			fetchRuns({
+				workflowId,
+				driveId,
+				limit
+			}).then((result) => {
+				if (cancelled) return;
+				setRuns(result);
+				setError(null);
+			}, (loadError) => {
+				if (cancelled) return;
+				setError(loadError instanceof Error ? loadError.message : String(loadError));
+			});
+		};
+		load.current = run;
+		setRuns(null);
+		run();
+		const timer = setInterval(run, POLL_MS);
+		return () => {
+			cancelled = true;
+			clearInterval(timer);
+		};
+	}, [
+		workflowId,
+		driveId,
+		limit
+	]);
+	return {
+		runs,
+		error,
+		reload: useCallback(() => load.current(), [])
+	};
+}
+//#endregion
+//#region editors/workflow-studio/components/step-outline.ts
+function stepOutline(args) {
+	const stepById = new Map(args.steps.map((step) => [step.id, step]));
+	const outgoing = /* @__PURE__ */ new Map();
+	for (const edge of args.edges) {
+		if (!stepById.has(edge.to)) continue;
+		const list = outgoing.get(edge.from) ?? [];
+		list.push(edge);
+		outgoing.set(edge.from, list);
+	}
+	for (const list of outgoing.values()) list.sort((a, b) => portRank(a.port) - portRank(b.port));
+	const rows = [];
+	const seen = /* @__PURE__ */ new Set();
+	const walk = (fromId, port) => {
+		const step = stepById.get(fromId);
+		if (step) {
+			if (seen.has(fromId)) return;
+			seen.add(fromId);
+			rows.push({
+				step,
+				port: port === "next" ? null : port
+			});
+		}
+		for (const edge of outgoing.get(fromId) ?? []) walk(edge.to, edge.port);
+	};
+	if (args.triggerId) walk(args.triggerId, null);
+	return {
+		rows,
+		orphans: args.steps.filter((step) => !seen.has(step.id))
+	};
+}
+//#endregion
+//#region editors/workflow-studio/components/WorkflowSteps.tsx
+const STEP_DOT = {
+	...RUN_DOT,
+	SKIPPED: "bg-slate-300",
+	REPLAYED: "bg-sky-400"
+};
+function ChipLogo(props) {
+	const [broken, setBroken] = useState(false);
+	if (props.logoUrl && !broken) return /* @__PURE__ */ jsx("img", {
+		src: props.logoUrl,
+		alt: "",
+		className: "h-4 w-4 shrink-0",
+		onError: () => setBroken(true)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "w-4 shrink-0 text-center text-xs text-slate-400",
+		children: props.glyph ?? "▪"
+	});
+}
+function Chip(props) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		title: props.status ? `${props.subtitle} · ${props.status}` : props.subtitle,
+		className: `flex max-w-56 items-center gap-2 rounded border border-solid px-2 py-1 text-left hover:border-slate-400 ${props.muted ? "border-dashed border-slate-300 bg-slate-50" : "border-slate-200 bg-white"}`,
+		onClick: props.onClick,
+		children: [
+			/* @__PURE__ */ jsx(ChipLogo, {
+				logoUrl: props.logoUrl,
+				glyph: props.glyph
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block truncate text-xs font-medium text-slate-700",
+					children: props.title
+				}), /* @__PURE__ */ jsx("span", {
+					className: "block truncate text-[11px] text-slate-400",
+					children: props.subtitle
+				})]
+			}),
+			props.status ? /* @__PURE__ */ jsx("span", { className: `ml-1 h-2 w-2 shrink-0 rounded-full ${STEP_DOT[props.status] ?? "bg-slate-300"}` }) : null
+		]
+	});
+}
+function Arrow(props) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex shrink-0 items-center gap-1 text-slate-300",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "→"
+		}), props.port ? /* @__PURE__ */ jsx("span", {
+			className: "rounded bg-slate-100 px-1 text-[10px] text-slate-500",
+			children: props.port
+		}) : null]
+	});
+}
+function WorkflowSteps(props) {
+	const { state } = props;
+	usePieceLogos();
+	const outline = stepOutline({
+		triggerId: state.trigger?.id,
+		steps: state.steps,
+		edges: state.edges
+	});
+	const statusByKey = new Map((props.latestRun?.steps ?? []).map((step) => [step.stepKey, step.status]));
+	const chipFor = (step, muted) => {
+		const meta = blockMeta(step.blockType);
+		return /* @__PURE__ */ jsx(Chip, {
+			title: step.name || step.key,
+			subtitle: meta.displayName,
+			glyph: meta.glyph,
+			logoUrl: meta.logoUrl,
+			status: statusByKey.get(step.key),
+			muted,
+			onClick: props.onOpenEditor
+		}, step.id);
+	};
+	if (!state.trigger && state.steps.length === 0) return /* @__PURE__ */ jsx("section", {
+		className: "mt-3 rounded-md border border-solid border-slate-200 bg-white px-3 py-4",
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "text-xs text-slate-500",
+			children: [
+				"This workflow has no trigger or steps yet.",
+				" ",
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "underline hover:text-slate-800",
+					onClick: props.onOpenEditor,
+					children: "Open the editor"
+				}),
+				" ",
+				"to build it."
+			]
+		})
+	});
+	const triggerMeta = state.trigger ? blockMeta(state.trigger.blockType) : null;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mt-3 rounded-md border border-solid border-slate-200 bg-white px-3 py-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-baseline gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-[11px] text-slate-400",
+					children: "Steps"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-[11px] tabular-nums text-slate-400",
+					children: state.steps.length
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [triggerMeta && state.trigger ? /* @__PURE__ */ jsx(Chip, {
+					title: triggerMeta.displayName,
+					subtitle: "Trigger",
+					glyph: triggerMeta.glyph,
+					logoUrl: triggerMeta.logoUrl,
+					muted: false,
+					onClick: props.onOpenEditor
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "rounded border border-dashed border-slate-300 px-2 py-1 text-[11px] text-slate-400",
+					children: "No trigger"
+				}), outline.rows.map((row) => /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Arrow, { port: row.port }), chipFor(row.step, false)]
+				}, row.step.id))]
+			}),
+			outline.orphans.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 border-t border-solid border-slate-100 pt-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-2 text-[11px] text-slate-400",
+					children: "Not connected to the trigger, so runs never reach these:"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: outline.orphans.map((step) => chipFor(step, true))
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/components/WorkflowHeader.tsx
+const WORKFLOW_TYPE$1 = "powerhouse/workflow";
+const ACTION = "rounded border border-solid border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-700 hover:border-slate-400 hover:bg-slate-50";
+function Stat(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 grow border-l border-solid border-slate-200 px-3 py-2 first:border-l-0 first:pl-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[11px] text-slate-400",
+			children: props.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "truncate text-xs text-slate-800",
+			children: props.children
+		})]
+	});
+}
+function WorkflowHeader(props) {
+	const workflowId = props.node.id;
+	const { data: document, error, reload } = useDocumentSafe(workflowId);
+	const [, dispatch] = useDispatch(document);
+	if (error !== void 0) return /* @__PURE__ */ jsx(DocumentLoadError, {
+		title: "This workflow could not be loaded",
+		documentId: workflowId,
+		error,
+		onRetry: () => {
+			reload();
+		}
+	});
+	if (document?.header.documentType !== WORKFLOW_TYPE$1) return null;
+	const state = document.state.global;
+	const enabled = state.status === "ENABLED";
+	const stats = runStats(props.runs ?? []);
+	const trigger = state.trigger ? blockMeta(state.trigger.blockType).displayName : null;
+	return /* @__PURE__ */ jsxs("header", {
+		className: "mb-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "min-w-0 truncate text-base font-semibold text-slate-800",
+						children: state.name || props.node.name || "Untitled workflow"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: `rounded px-2 py-0.5 text-[11px] font-semibold ${WORKFLOW_STATUS_STYLES[state.status] ?? "bg-slate-100 text-slate-500"}`,
+						children: state.status
+					}),
+					/* @__PURE__ */ jsx("span", { className: "grow" }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: ACTION,
+						onClick: () => dispatch(actions$1.setWorkflowStatus({ status: enabled ? "DISABLED" : "ENABLED" })),
+						children: enabled ? "Disable" : "Enable"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: ACTION,
+						onClick: props.onEdit,
+						children: "Edit workflow"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "rounded border border-solid border-red-200 bg-white px-2.5 py-1 text-xs font-medium text-red-600 hover:border-red-300 hover:bg-red-50",
+						onClick: () => showDeleteNodeModal(props.node),
+						children: "Delete"
+					})
+				]
+			}),
+			state.description ? /* @__PURE__ */ jsx("p", {
+				className: "mt-1 max-w-2xl text-xs text-slate-500",
+				children: state.description
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex flex-wrap items-stretch rounded-md border border-solid border-slate-200 bg-white px-3",
+				children: [
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Trigger",
+						children: trigger ?? /* @__PURE__ */ jsx("span", {
+							className: "text-slate-400",
+							children: "None set"
+						})
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Last run",
+						children: stats.lastRun ? /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							title: formatAbsolute(stats.lastRun.startedAt),
+							children: [/* @__PURE__ */ jsx("span", { className: `h-2 w-2 shrink-0 rounded-full ${RUN_DOT[stats.lastRun.status] ?? "bg-slate-300"}` }), /* @__PURE__ */ jsx("span", {
+								className: RUN_TEXT[stats.lastRun.status] ?? "",
+								children: formatWhen(stats.lastRun.startedAt)
+							})]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-slate-400",
+							children: "Never run"
+						})
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Recent runs",
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "tabular-nums",
+							children: [
+								stats.total,
+								stats.failed > 0 ? /* @__PURE__ */ jsxs("span", {
+									className: "text-red-600",
+									children: [
+										" · ",
+										stats.failed,
+										" failed"
+									]
+								}) : null,
+								stats.running > 0 ? /* @__PURE__ */ jsxs("span", {
+									className: "text-amber-700",
+									children: [
+										" · ",
+										stats.running,
+										" running"
+									]
+								}) : null
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Success rate",
+						children: stats.successRate === null ? /* @__PURE__ */ jsx("span", {
+							className: "text-slate-400",
+							children: "—"
+						}) : /* @__PURE__ */ jsxs("span", {
+							className: "tabular-nums",
+							children: [stats.successRate, "%"]
+						})
+					}),
+					/* @__PURE__ */ jsx(Stat, {
+						label: "Version",
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "tabular-nums",
+							children: ["v", state.version]
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(WorkflowSteps, {
+				state,
+				latestRun: stats.lastRun,
+				onOpenEditor: props.onEdit
+			})
+		]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/components/WorkflowStudio.tsx
+const WORKFLOW_TYPE = "powerhouse/workflow";
+const CONNECTION_TYPE = "powerhouse/connection";
+function WorkflowStudio(props) {
+	const [drive] = useSelectedDrive();
+	const fileNodes = useFileNodesInSelectedDrive() ?? [];
+	const selectedNode = useSelectedNode();
+	const selectedNodeId = selectedNode?.id;
+	const toast = usePHToast();
+	const [selectedId, select] = useHashSelection();
+	const [creating, setCreating] = useState(false);
+	const driveId = drive.header.id;
+	const workflows = fileNodes.filter((node) => node.documentType === WORKFLOW_TYPE);
+	const connections = fileNodes.filter((node) => node.documentType === CONNECTION_TYPE);
+	const editorOpen = Boolean(props.children && selectedNodeId);
+	const create = (documentType, baseName, count) => {
+		if (creating) return;
+		setCreating(true);
+		addDocument(driveId, `${baseName} ${count + 1}`, documentType).then((node) => {
+			select(node.id);
+			setSelectedNode(node.id);
+		}).catch((error) => {
+			toast?.(error instanceof Error ? error.message : `Failed to create ${baseName}`, { type: "error" });
+		}).finally(() => setCreating(false));
+	};
+	const showRuns = (node) => {
+		setSelectedNode(void 0);
+		select(node?.id);
+	};
+	const liveTarget = workflows.find((node) => node.id === selectedId) ?? null;
+	const liveConnection = connections.find((node) => node.id === selectedId) ?? null;
+	const openNode = fileNodes.find((node) => node.id === selectedNodeId);
+	const selectionExists = fileNodes.some((node) => node.id === selectedId);
+	useEffect(() => {
+		if (selectedId && fileNodes.length > 0 && !selectionExists) select(void 0);
+	}, [
+		fileNodes.length,
+		select,
+		selectedId,
+		selectionExists
+	]);
+	const editedWorkflow = editorOpen ? workflows.find((node) => node.id === selectedNodeId) ?? null : null;
+	const focusedWorkflow = editedWorkflow ?? liveTarget;
+	const { runs, error: runsError, reload: reloadRuns } = useRuns({
+		workflowId: focusedWorkflow?.id,
+		driveId: focusedWorkflow ? void 0 : driveId
+	});
+	const { data: targetDocument } = useDocumentSafe(liveTarget?.id ?? null);
+	const manualTrigger = targetDocument?.header.documentType === WORKFLOW_TYPE && targetDocument.state.global.trigger?.blockType === "core#manual";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0",
+		children: [/* @__PURE__ */ jsx(Sidebar, {
+			workflows,
+			connections,
+			activeId: selectedId,
+			allRunsActive: !selectedId,
+			creating,
+			onShowAllRuns: () => showRuns(null),
+			onOpenWorkflow: (node) => showRuns(node),
+			onEditWorkflow: (node) => {
+				select(node.id);
+				setSelectedNode(node.id);
+			},
+			onOpenConnection: (node) => showRuns(node),
+			onEditConnection: (node) => {
+				select(node.id);
+				setSelectedNode(node.id);
+			},
+			onCreateWorkflow: () => create(WORKFLOW_TYPE, "Workflow", workflows.length),
+			onCreateConnection: () => create(CONNECTION_TYPE, "Connection", connections.length)
+		}), /* @__PURE__ */ jsx("main", {
+			className: "min-w-0 flex-1 overflow-y-auto",
+			children: editorOpen ? /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full min-h-0 flex-col",
+				children: [/* @__PURE__ */ jsx(EditorToolbar, {
+					node: openNode,
+					runs: editedWorkflow ? runs : null,
+					onBack: () => setSelectedNode(void 0)
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex min-h-0 flex-1 flex-col [&>#document-editor-container]:min-h-0",
+					children: /* @__PURE__ */ jsx(DocumentErrorBoundary, {
+						documentId: selectedNodeId,
+						label: selectedNode?.name,
+						onDismiss: () => setSelectedNode(void 0),
+						children: props.children
+					}, selectedNodeId)
+				})]
+			}) : liveConnection ? /* @__PURE__ */ jsx(ConnectionView, {
+				node: liveConnection,
+				onEdit: () => {
+					select(liveConnection.id);
+					setSelectedNode(liveConnection.id);
+				},
+				onOpenWorkflow: (workflowId) => select(workflowId)
+			}, liveConnection.id) : /* @__PURE__ */ jsxs("div", {
+				className: "mx-auto w-full max-w-5xl p-6",
+				children: [liveTarget ? /* @__PURE__ */ jsx(WorkflowHeader, {
+					node: liveTarget,
+					runs,
+					onEdit: () => setSelectedNode(liveTarget.id)
+				}, liveTarget.id) : null, /* @__PURE__ */ jsx(RunsView, {
+					title: liveTarget ? "Runs" : "All runs in this drive",
+					runs,
+					error: runsError,
+					reload: reloadRuns,
+					showWorkflow: liveTarget === null,
+					onFire: liveTarget && manualTrigger ? () => fireWorkflow(liveTarget.id).then((result) => result.error) : void 0
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region editors/workflow-studio/config.ts
+const editorConfig = {
+	isDragAndDropEnabled: true,
+	allowedDocumentTypes: ["powerhouse/workflow", "powerhouse/connection"]
+};
+//#endregion
+//#region editors/workflow-studio/editor.tsx
+/**
+* WARNING: DO NOT EDIT
+* This file is auto-generated and updated by codegen
+*/
+/** Editor component for the app */
+function Editor(props) {
+	useSetPHAppConfig(editorConfig);
+	useSyncWorkflowRuntimeUrl();
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-full min-h-0 bg-background",
+		children: /* @__PURE__ */ jsx(WorkflowStudio, { children: props.children })
+	});
+}
+//#endregion
+export { Editor as default };
+
+//# sourceMappingURL=editor-Hh1cyIIW.js.map