();
+ let frontier = nodes.filter((n) => !incoming[n.id]).map((n) => n.id);
+ while (frontier.length) {
+ const next: string[] = [];
+ frontier.forEach((id) => {
+ if (!seen.has(id)) {
+ seen.add(id);
+ order.push(id);
+ edges.filter((e) => e.from[0] === id).forEach((e) => next.push(e.to[0]));
+ }
+ });
+ frontier = next;
+ }
+ nodes.forEach((n) => {
+ if (!seen.has(n.id)) order.push(n.id);
+ });
+ order.forEach((id, i) => window.setTimeout(() => setActive(id), i * 420));
+ window.setTimeout(
+ () => {
+ setRunning(false);
+ setActive(null);
+ toast(
+ `Test run complete · ${nodes.length} nodes · 0 errors`,
+ "workflow.tested",
+ );
+ },
+ order.length * 420 + 700,
+ );
+ };
+
+ const selNode = sel?.type === "node" ? nodes.find((n) => n.id === sel.id) ?? null : null;
+ const selMod = selNode ? FLOW_MODULES[selNode.mod] : null;
+
+ const updateConfig = (k: string, v: string | number | boolean) => {
+ if (!selNode) return;
+ setNodes((ns) =>
+ ns.map((n) =>
+ n.id === selNode.id ? { ...n, config: { ...n.config, [k]: v } } : n,
+ ),
+ );
+ };
+
+ const grid: CSSProperties = useMemo(
+ () => ({
+ backgroundPosition: `${pan.x}px ${pan.y}px`,
+ backgroundSize: `${22 * zoom}px ${22 * zoom}px`,
+ }),
+ [pan.x, pan.y, zoom],
+ );
+
+ return (
+
+ {/* ---- palette ---- */}
+
+
+ MODULE LIBRARY
+
+ drag onto canvas
+
+
+
+ {FLOW_CATS.map((cat) => {
+ const open = !collapsed[cat.id];
+ const items = modsByCat(cat.id);
+ return (
+
+
+ setCollapsed((c) => ({ ...c, [cat.id]: !c[cat.id] }))
+ }
+ >
+ {open ? (
+ {cat.label}
+ {items.length}
+
+ {open
+ ? items.map((m) => (
+
{
+ e.preventDefault();
+ dragRef.current = { mode: "new", mod: m.id };
+ setGhost({
+ x: e.clientX,
+ y: e.clientY,
+ mod: m.id,
+ });
+ }}
+ >
+
+ {m.mono}
+
+ {m.name}
+
+ ))
+ : null}
+
+ );
+ })}
+
+
+ {/* ---- canvas ---- */}
+
{
+ const t = e.target as HTMLElement;
+ if (
+ t === e.currentTarget ||
+ t.classList.contains("flow-grid") ||
+ t.classList.contains("flow-layer") ||
+ t.tagName.toLowerCase() === "svg"
+ ) {
+ setSel(null);
+ dragRef.current = {
+ mode: "pan",
+ sx: e.clientX,
+ sy: e.clientY,
+ px: pan.x,
+ py: pan.y,
+ };
+ }
+ }}
+ >
+
+
+ {/* toolbar */}
+
+
+
+ {nodes.length} nodes · {edges.length} links
+
+
+
+
+ toast(
+ "Workflow validated · no cycles · all inputs satisfied",
+ "workflow.valid",
+ )
+ }
+ >
+
+
+ frozen
+ ? toast("Tenant frozen — writes blocked", "402 → reactivation.requested")
+ : toast(
+ `Workflow saved · v12 · ${nodes.length} nodes`,
+ "workflow.saved",
+ )
+ }
+ >
+
+
+
+
+
+
+ {/* zoom controls */}
+
+
setZoom((z) => Math.min(1.6, +(z + 0.15).toFixed(2)))}
+ aria-label="Zoom in"
+ >
+
+
{Math.round(zoom * 100)}%
+
setZoom((z) => Math.max(0.5, +(z - 0.15).toFixed(2)))}
+ aria-label="Zoom out"
+ >
+
+
{
+ setZoom(0.78);
+ setPan({ x: 22, y: 54 });
+ }}
+ title="Reset view"
+ aria-label="Reset view"
+ >
+
+
+
+
+ {/* wires */}
+
+ {edges.map((e) => {
+ const a = nodes.find((n) => n.id === e.from[0]);
+ const b = nodes.find((n) => n.id === e.to[0]);
+ if (!a || !b) return null;
+ const x1 = portX(a, "out");
+ const y1 = portY(a, "out")[e.from[1]];
+ const x2 = portX(b, "in");
+ const y2 = portY(b, "in")[e.to[1]];
+ const lit = running && active === e.from[0];
+ const selected =
+ sel?.type === "edge" && sel.id === e.id;
+ return (
+ {
+ ev.stopPropagation();
+ setSel({ type: "edge", id: e.id });
+ }}
+ />
+ );
+ })}
+ {pending ? (
+
+
+ {/* nodes */}
+ {nodes.map((n) => {
+ const m = FLOW_MODULES[n.mod];
+ if (!m) return null;
+ const H = nodeH(m);
+ const insY = portY(n, "in");
+ const outsY = portY(n, "out");
+ const isSel = sel?.type === "node" && sel.id === n.id;
+ const firstSetting = m.settings?.[0];
+ const firstValue =
+ firstSetting && n.config[firstSetting.k] != null
+ ? String(n.config[firstSetting.k])
+ : "";
+ return (
+
{
+ e.stopPropagation();
+ setSel({ type: "node", id: n.id });
+ const w = toWorld(e.clientX, e.clientY);
+ dragRef.current = {
+ mode: "move",
+ id: n.id,
+ ox: w.x - n.x,
+ oy: w.y - n.y,
+ };
+ }}
+ >
+
+
+ {m.mono}
+
+ {m.name}
+
+
+ {firstValue.length ? firstValue : m.desc}
+
+ {m.in.map((lbl, i) => (
+
endWire(e, n.id, i)}
+ onMouseDown={(e) => e.stopPropagation()}
+ >
+ {m.in.length > 1 ? (
+ {lbl}
+ ) : null}
+
+ ))}
+ {m.out.map((lbl, i) => (
+
startWire(e, n.id, i)}
+ >
+ {m.out.length > 1 ? (
+ {lbl}
+ ) : null}
+
+ ))}
+
+ );
+ })}
+
+
+
+ {/* ---- inspector ---- */}
+
+ {selNode && selMod ? (
+ <>
+
+
+ {selMod.mono}
+
+
+
{selMod.name}
+
+ {selNode.id} · {selMod.cat}
+
+
+
+
+ SETTINGS
+
+
+ {(selMod.settings || []).map((s) => (
+
updateConfig(s.k, v)}
+ />
+ ))}
+ {!selMod.settings?.length ? (
+
+ No settings for this module.
+
+ ) : null}
+
+
+
+ Inputs
+ {selMod.in.length || "—"}
+ Outputs
+ {selMod.out.join(", ") || "terminal"}
+
+
+
+
+
+
+ ) : sel?.type === "edge" ? (
+
+
+ CONNECTION
+
+
+ A data link between two modules. The upstream module's output
+ is passed to the downstream input.
+
+
+
+
+
+ INSPECTOR
+
+
+ Select a node to configure it, drag a module from the library to
+ add one, or drag from an output port to wire modules together.
+
+
+ {FLOW_CATS.map((c) => (
+
+
+ ))}
+
+
+
+ {ghost ? (
+
+
+ {FLOW_MODULES[ghost.mod]?.mono}
+
+ {FLOW_MODULES[ghost.mod]?.name}
+
+ ) : null}
+
+
+ {toasts.map((t) => (
+
+
+ {t.msg}
+ {t.code ? {t.code} : null}
+
+
+ ))}
+
+
+
+ {s.label}
+
+ onChange(!on)}
+ aria-pressed={on}
+ >
+
+
+ );
+ }
+ if (s.type === "select") {
+ return (
+
+ {s.label}
+ onChange(e.target.value)}
+ >
+ {s.opts.map((o) => (
+
+ {o}
+
+ ))}
+
+
+ );
+ }
+ if (s.type === "area") {
+ return (
+
+ {s.label}
+