/* OpenSyn homepage — animated run trace (a worked example moving L5→L1 and back) */
const { Button: OSBtn3 } = window.OpenSynDesignSystem_a3458e;
const OSGlyph3 = window.OSGlyph;
const { useState: useState3, useEffect: useEffect3, useRef: useRef3 } = React;
const { WRAP, SectionLabel, CrtFrame } = window;
/* --- graph geometry ---------------------------------------------------- */
const WF_NODES = [
{ id: "g", type: "pentagon", x: 300, y: 46, col: "#E95C2B", L: "L5", name: "Governance" },
{ id: "i", type: "square", x: 300, y: 130, col: "#F0C83D", L: "L4", name: "Intelligence" },
{ id: "o", type: "triangle", x: 300, y: 214, col: "#4C9B63", L: "L3", name: "Operations" },
{ id: "c", type: "circle", x: 300, y: 298, col: "#4f6be0", L: "L2", name: "Coordination" },
{ id: "t1", type: "plus", x: 168, y: 388, col: "#4f6be0", L: "L1", name: "Retrieve" },
{ id: "t2", type: "plus", x: 300, y: 388, col: "#4f6be0", L: "L1", name: "Implement" },
{ id: "t3", type: "plus", x: 432, y: 388, col: "#4f6be0", L: "L1", name: "Verify" },
];
const WF_NODE = Object.fromEntries(WF_NODES.map((n) => [n.id, n]));
const WF_EDGES = {
"g-i": ["M300 46 L300 130"],
"i-o": ["M300 130 L300 214"],
"o-c": ["M300 214 L300 298"],
"c-fan": ["M300 298 L168 388", "M300 298 L300 388", "M300 298 L432 388"],
"esc": ["M432 388 C 508 322 498 252 314 220"],
"appr": ["M286 208 C 178 152 178 96 286 52"],
};
const KIND_COL = { info: "#4f6be0", ok: "#4C9B63", intervene: "#E95C2B", attention: "#F0C83D" };
/* --- the worked example: "Add OAuth login to the API" ------------------ */
const WF_STEPS = [
{ nodes: ["g"], edge: "g-i", kind: "info", code: "ACK-OBJ", head: "Objective accepted", line: "L5 Governance accepts the objective — add OAuth login to the API — and sets the risk boundary: no auto-merge." },
{ nodes: ["i"], edge: "i-o", kind: "attention", code: "W-1102", head: "Intelligence scan", line: "L4 scans prior auth work and flags a token-refresh edge case as a likely failure mode." },
{ nodes: ["o"], edge: "o-c", kind: "info", code: "RUN-7F2A", head: "Run allocated", line: "L3 Operations opens run RUN-7F2A — budget cap set, retries = 3." },
{ nodes: ["c"], edge: "c-fan", kind: "info", code: "A-00001", head: "Subtasks routed", line: "L2 Coordination splits the work into three bounded tasks: retrieve · implement · verify." },
{ nodes: ["t1","t2","t3"], edge: null, kind: "info", code: "RUN-7F2A", head: "Tasks executing", line: "L1 units run in parallel: pull the spec, write the handler, run the test suite." },
{ nodes: ["t3"], edge: null, kind: "intervene", code: "E-4471", head: "Verifier failure ×1", line: "Test suite fails — token expiry unhandled, exactly as L4 predicted. Local retry attempted first." },
{ nodes: ["t2","t3"], edge: null, kind: "ok", code: "ACK-PASS", head: "Retry passes", line: "Handler patched, suite green. Artifact v2 written to the log — autonomy stayed local." },
{ nodes: ["o","t3"], edge: "esc", kind: "intervene", code: "E-2210", head: "Escalate by exception", line: "Budget hits 92% of cap. The threshold trips: an escalation packet rises to L3 for a call." },
{ nodes: ["g","o"], edge: "appr", kind: "ok", code: "ACK-MERGE", head: "Human policy closure", line: "L3 clears budget; the irreversible merge routes to L5. A human approves. Run closed nominal." },
];
/* --- draw one node glyph as native SVG -------------------------------- */
function WfNode({ n, state }) {
const r = n.id.startsWith("t") ? 11 : 15;
const dim = "rgba(255,255,255,0.28)";
const active = state === "active";
const done = state === "done";
const stroke = active ? n.col : done ? n.col : dim;
const sw = active ? 2.6 : 1.8;
const fill = (active || done) && n.type !== "plus" ? n.col : "none";
const fillOp = active ? 0.9 : done ? 0.18 : 0;
const common = { stroke, strokeWidth: sw, strokeLinejoin: "round", strokeLinecap: "round", fill, fillOpacity: fillOp, filter: active ? "url(#wfGlow)" : "none" };
let shape;
if (n.type === "plus") {
shape = ;
} else if (n.type === "circle") {
shape = ;
} else if (n.type === "square") {
shape = ;
} else if (n.type === "triangle") {
shape = ;
} else { // pentagon
const pts = [0, 1, 2, 3, 4].map((k) => {
const a = (-90 + k * 72) * Math.PI / 180;
return `${(n.x + r * Math.cos(a)).toFixed(1)},${(n.y + r * Math.sin(a)).toFixed(1)}`;
}).join(" ");
shape = ;
}
return shape;
}
function WorkflowGraph({ step }) {
const cur = WF_STEPS[step];
const doneNodes = new Set();
for (let s = 0; s < step; s++) WF_STEPS[s].nodes.forEach((id) => doneNodes.add(id));
const activeNodes = new Set(cur.nodes);
const activeEdges = cur.edge ? WF_EDGES[cur.edge] : [];
const pulseCol = KIND_COL[cur.kind];
return (
);
}
/* --- the section ------------------------------------------------------- */
const WF_KEY = "opensyn-trace-step";
function WorkflowSection() {
const reduce = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const [step, setStep] = useState3(() => {
const s = parseInt(localStorage.getItem(WF_KEY), 10);
return Number.isInteger(s) && s >= 0 && s < WF_STEPS.length ? s : 0;
});
const [playing, setPlaying] = useState3(!reduce);
const timer = useRef3(null);
useEffect3(() => { localStorage.setItem(WF_KEY, String(step)); }, [step]);
useEffect3(() => {
if (!playing) return;
const last = step === WF_STEPS.length - 1;
timer.current = setTimeout(() => {
setStep((s) => (s + 1) % WF_STEPS.length);
}, last ? 3200 : 2000);
return () => clearTimeout(timer.current);
}, [step, playing]);
const cur = WF_STEPS[step];
return (
Watch a run move through the stack
One task, traced end to end.
A worked example — “add OAuth login to the API.” Watch
it delegate down the layers, recover locally, and escalate by exception only when a budget threshold trips.