Spaces:

FireRedTeam
/

FireRed-OpenStoryline

Running

File size: 31,919 Bytes

06ba7ea

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Workflow Node Map</title>
  <style>
    :root{
      --bg:#0f0f0f;
      --panel:#171717;
      --panel2:#1f1f1f;
      --text:#eaeaea;
      --muted:#b5b5b5;
      --border:#2c2c2c;
      --edge:#8a8a8a;
      --edge-muted:#3f3f3f;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 12px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:var(--sans);
      overflow:hidden;
    }

    /* Topbar */
    #topbar{
      height:56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      border-bottom:1px solid var(--border);
      background:linear-gradient(to bottom, #121212, #0f0f0f);
    }
    #titleBlock{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width: 220px;
    }
    #wfName{
      font-weight:650;
      font-size:14px;
      letter-spacing:.2px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #wfDesc{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 54vw;
    }
    #controls{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .btn{
      appearance:none;
      background:transparent;
      color:var(--text);
      border:1px solid var(--border);
      border-radius:10px;
      padding:8px 10px;
      font-size:12px;
      cursor:pointer;
      transition:transform .05s ease, border-color .2s ease, background .2s ease;
      user-select:none;
    }
    .btn:hover{ border-color:#3a3a3a; background:#141414; }
    .btn:active{ transform: translateY(1px); }
    .sep{ width:1px; height:20px; background:var(--border); margin:0 2px; }

    #hint{
      font-size:12px;
      color:var(--muted);
      user-select:none;
      white-space:nowrap;
    }

    /* Viewport + canvas */
    #viewport{
      height: calc(100vh - 56px);
      overflow:auto;
      position:relative;
    }
    #canvas{
      position:relative;
      /*
        IMPORTANT: the workflow can have many depth columns; nodes may extend wider/taller
        than the initial minimum. We keep a safe base size here, and JS will expand the
        canvas to fit all nodes so edges/arrow coordinates stay 1:1 with pixels.
      */
      min-width: 2600px;
      min-height: 1600px;
      padding: 24px;
      box-sizing: border-box;
    }

    /* Edges svg */
    #edges{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      overflow:visible;
      z-index: 1;
    }
    .edge{
      stroke: var(--edge);
      stroke-width: 1.6;
      fill: none;
      opacity: .85;
    }
    .edge.dim{ opacity:.18; }
    .edge.highlight{ opacity:1; stroke-width:2.2; }

    /* Nodes */
    .node{
      position:absolute;
      width: 340px;
      background: var(--panel);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      z-index: 2;
      user-select:none;
      touch-action: none;
    }
    .node:focus{ outline:none; box-shadow: 0 0 0 2px #3a3a3a, var(--shadow); }

    .node-header{
      padding: 12px 12px 10px;
      border-bottom:1px solid var(--border);
      background: var(--panel2);
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
      cursor: grab;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .node-header:active{ cursor: grabbing; }

    /* Title + collapsed description stack */
    .node-titlewrap{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      flex: 1 1 auto;
    }

    .node-title{
      font-weight: 650;
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: .2px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    /* Collapsed-state description (smaller font) */
    .node-desc-collapsed{
      display:none;
      font-size: 11px;
      line-height: 1.25;
      color: var(--muted);
      opacity: .92;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .node-desc-collapsed:empty{ display:none !important; }
    .node.collapsed .node-desc-collapsed{
      display:block; /* fallback */
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .node-badges{
      display:flex;
      align-items:center;
      gap:6px;
      flex: 0 0 auto;
    }
    .badge{
      font-family: var(--mono);
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 999px;
      border:1px solid var(--border);
      color: var(--muted);
      background: #141414;
      max-width: 120px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .node-body{
      padding: 12px;
      display:block;
      font-size: 12px;
      line-height: 1.35;
      color: var(--text);
    }
    .node.collapsed .node-body{
      display:none;
    }
    .node.collapsed .node-header{
      border-bottom: none;
    }
    .node-meta{
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 10px;
      font-family: var(--mono);
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .kv{
      border:1px solid var(--border);
      padding: 3px 6px;
      border-radius: 8px;
      background:#121212;
    }

    .section{
      margin-top: 10px;
      border-top: 1px dashed #2e2e2e;
      padding-top: 10px;
    }
    .section h4{
      margin: 0 0 8px;
      font-size: 11px;
      letter-spacing: .2px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 650;
    }
    .desc{
      color: var(--text);
      margin: 0 0 8px;
      opacity: .95;
    }
    .pillRow{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .pill{
      font-size: 11px;
      color: var(--muted);
      border:1px solid var(--border);
      background:#121212;
      border-radius: 999px;
      padding: 3px 8px;
      font-family: var(--mono);
    }
    .empty{
      color: var(--muted);
      font-style: italic;
      font-size: 11px;
    }

    table.schema{
      width:100%;
      border-collapse: collapse;
      table-layout: fixed;
      border:1px solid var(--border);
      border-radius: 10px;
      overflow:hidden;
    }
    table.schema thead th{
      background:#121212;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .2px;
      text-transform: uppercase;
      padding: 8px 8px;
      border-bottom: 1px solid var(--border);
      font-weight: 650;
    }
    table.schema td{
      padding: 8px 8px;
      border-bottom: 1px solid #242424;
      vertical-align: top;
      word-break: break-word;
    }
    table.schema tr:last-child td{ border-bottom:none; }
    .mono{ font-family: var(--mono); }
    .right{ text-align:right; }
    .small{ font-size: 11px; color: var(--muted); }

    /* Hover highlighting */
    .node:hover{ border-color:#3a3a3a; }
    .node.dragging{ opacity: .95; border-color:#4a4a4a; }

    /* Loading / error */
    #overlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index: 10;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(3px);
    }
    #overlay.hidden{ display:none; }
    #overlayCard{
      width:min(560px, 92vw);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      box-shadow: var(--shadow);
    }
    #overlayTitle{
      font-weight: 650;
      font-size: 14px;
      margin:0 0 8px;
    }
    #overlayText{
      margin:0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      font-family: var(--mono);
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <div id="topbar">
    <div id="titleBlock">
      <div id="wfName">Workflow Node Map</div>
      <div id="wfDesc">Reads workflow.json and renders a draggable node map (minimal grayscale).</div>
    </div>

    <div id="controls">
      <button class="btn" id="btnExpand">Expand All</button>
      <button class="btn" id="btnCollapse">Collapse All</button>
      <div class="sep"></div>
      <button class="btn" id="btnReset">Reset Layout</button>
      <div class="sep"></div>
      <div id="hint">Tip: drag nodes; click the header to expand/collapse.</div>
    </div>
  </div>

  <div id="viewport">
    <div id="canvas">
      <svg id="edges" aria-hidden="true">
        <defs>
          <marker id="arrowHead" markerWidth="10" markerHeight="10" refX="8.7" refY="3" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L9,3 L0,6 Z" fill="var(--edge)"></path>
          </marker>
        </defs>
      </svg>
    </div>

    <div id="overlay">
      <div id="overlayCard">
        <p id="overlayTitle">Loading…</p>
        <p id="overlayText">Reading JSON and rendering nodes…</p>
      </div>
    </div>
  </div>

  <script>
    (function(){
      const SVG_NS = "http://www.w3.org/2000/svg";

      const viewport = document.getElementById("viewport");
      const canvas = document.getElementById("canvas");
      const edgesSvg = document.getElementById("edges");

      const overlay = document.getElementById("overlay");
      const overlayTitle = document.getElementById("overlayTitle");
      const overlayText = document.getElementById("overlayText");

      const wfNameEl = document.getElementById("wfName");
      const wfDescEl = document.getElementById("wfDesc");

      const btnExpand = document.getElementById("btnExpand");
      const btnCollapse = document.getElementById("btnCollapse");
      const btnReset = document.getElementById("btnReset");

      const params = new URLSearchParams(location.search);
      const DATA_URL = params.get("data") || "node_map/workflow.json";

      const state = {
        data: null,
        nodesById: new Map(),
        nodeEls: new Map(),
        edges: [], // {from,to,el}
        layoutKey: null,
        saveTimer: null
      };

      function escapeHtml(s){
        return String(s)
          .replaceAll("&","&amp;")
          .replaceAll("<","&lt;")
          .replaceAll(">","&gt;")
          .replaceAll('"',"&quot;")
          .replaceAll("'","&#039;");
      }

      function formatValue(v){
        if (v === undefined) return "";
        if (v === null) return "null";
        if (typeof v === "string") return v;
        try { return JSON.stringify(v); } catch (e) { return String(v); }
      }

      function setOverlay(title, text, hidden){
        overlayTitle.textContent = title || "";
        overlayText.textContent = text || "";
        overlay.classList.toggle("hidden", !!hidden);
      }

      function computeDepths(nodes){
        const byId = new Map(nodes.map(n => [n.id, n]));
        const depth = new Map(nodes.map(n => [n.id, 0]));

        // Relaxation: depth(n) = max(depth(dep)+1)
        const MAX_ITERS = nodes.length + 5;
        for(let i=0;i<MAX_ITERS;i++){
          let changed = false;
          for(const n of nodes){
            const deps = Array.isArray(n.dependencies) ? n.dependencies : [];
            if(!deps.length) continue;
            let maxD = 0;
            for(const depId of deps){
              if(!byId.has(depId)) continue;
              maxD = Math.max(maxD, (depth.get(depId) || 0) + 1);
            }
            if(maxD !== (depth.get(n.id) || 0)){
              depth.set(n.id, maxD);
              changed = true;
            }
          }
          if(!changed) break;
        }
        return depth;
      }

      function autoLayout(nodes){
        const depth = computeDepths(nodes);
        const cols = new Map(); // depth -> array of node ids
        for(const n of nodes){
          const d = depth.get(n.id) || 0;
          if(!cols.has(d)) cols.set(d, []);
          cols.get(d).push(n.id);
        }
        // Stable sort by name within each column
        for(const [d, arr] of cols){
          arr.sort((a,b)=>{
            const na = state.nodesById.get(a)?.name || a;
            const nb = state.nodesById.get(b)?.name || b;
            return na.localeCompare(nb);
          });
        }

        const columnWidth = 420;
        const rowHeight = 170;

        const positions = {};
        const depths = Array.from(cols.keys()).sort((a,b)=>a-b);
        for(const d of depths){
          const arr = cols.get(d);
          for(let i=0;i<arr.length;i++){
            const id = arr[i];
            positions[id] = {
              x: 40 + d * columnWidth,
              y: 40 + i * rowHeight
            };
          }
        }
        return positions;
      }

      // Ensure the scrollable canvas is big enough to contain all nodes.
      // This avoids SVG scaling issues (arrows not landing on cards) and keeps
      // the whole graph reachable via scroll.
      function ensureCanvasSize(){
        const BASE_W = 2600;
        const BASE_H = 1600;
        const EXTRA = 260; // breathing room to the right/bottom

        if(!state.nodeEls || state.nodeEls.size === 0) return;

        let maxRight = 0;
        let maxBottom = 0;

        for(const el of state.nodeEls.values()){
          const left = parseFloat(el.style.left || "0") || 0;
          const top = parseFloat(el.style.top || "0") || 0;
          const right = left + el.offsetWidth;
          const bottom = top + el.offsetHeight;
          maxRight = Math.max(maxRight, right);
          maxBottom = Math.max(maxBottom, bottom);
        }

        const desiredW = Math.max(BASE_W, Math.ceil(maxRight + EXTRA));
        const desiredH = Math.max(BASE_H, Math.ceil(maxBottom + EXTRA));

        // Only expand; do not shrink automatically to avoid jarring jumps.
        const currentW = canvas.clientWidth || 0;
        const currentH = canvas.clientHeight || 0;

        if(desiredW > currentW) canvas.style.width = desiredW + "px";
        if(desiredH > currentH) canvas.style.height = desiredH + "px";
      }

      function loadLayout(){
        if(!state.layoutKey) return null;
        try{
          const raw = localStorage.getItem(state.layoutKey);
          if(!raw) return null;
          return JSON.parse(raw);
        }catch(e){
          return null;
        }
      }

      function saveLayoutDebounced(){
        if(!state.layoutKey) return;
        clearTimeout(state.saveTimer);
        state.saveTimer = setTimeout(saveLayout, 120);
      }

      function saveLayout(){
        if(!state.layoutKey) return;
        const positions = {};
        const collapsed = {};
        for(const [id, el] of state.nodeEls){
          positions[id] = {
            x: parseFloat(el.style.left || "0"),
            y: parseFloat(el.style.top || "0")
          };
          collapsed[id] = el.classList.contains("collapsed");
        }
        const payload = { positions, collapsed };
        try{
          localStorage.setItem(state.layoutKey, JSON.stringify(payload));
        }catch(e){
          // ignore quota errors
        }
      }

      function resetLayout(){
        if(state.layoutKey){
          localStorage.removeItem(state.layoutKey);
        }
        const positions = autoLayout(state.data.nodes);
        for(const n of state.data.nodes){
          const el = state.nodeEls.get(n.id);
          if(!el) continue;
          const p = positions[n.id] || {x:40,y:40};
          el.style.left = p.x + "px";
          el.style.top = p.y + "px";
        }
        ensureCanvasSize();
        updateAllEdges();
      }

      function schemaTable(schema){
        if(!Array.isArray(schema) || schema.length === 0){
          return '<div class="empty">—</div>';
        }
        const rows = schema.map(f => {
          const name = escapeHtml(f.name ?? "");
          const type = escapeHtml(f.type ?? "");
          const def = escapeHtml(formatValue(f.default ?? ""));
          const opts = Array.isArray(f.options) ? escapeHtml(f.options.join(", ")) : "";
          const desc = escapeHtml(f.description ?? "");
          return `<tr>
            <td class="mono">${name}</td>
            <td class="mono">${type}</td>
            <td class="mono">${def}</td>
            <td class="mono">${opts}</td>
            <td>${desc}</td>
          </tr>`;
        }).join("");
        return `<table class="schema">
          <thead><tr>
            <th class="right">name</th>
            <th>type</th>
            <th>default</th>
            <th>options</th>
            <th>description</th>
          </tr></thead>
          <tbody>${rows}</tbody>
        </table>`;
      }

      function pillList(ids){
        if(!Array.isArray(ids) || ids.length === 0){
          return '<div class="empty">—</div>';
        }
        const pills = ids.map(id => `<span class="pill">${escapeHtml(id)}</span>`).join("");
        return `<div class="pillRow">${pills}</div>`;
      }

      function nodeBodyHtml(node){
        const meta = `
          <div class="node-meta">
            <span class="kv">id: ${escapeHtml(node.id)}</span>
            <span class="kv">kind: ${escapeHtml(node.kind ?? "")}</span>
            <span class="kv">pro: ${node.pro ? "true" : "false"}</span>
          </div>
        `;

        const desc = node.description ? `<p class="desc">${escapeHtml(node.description)}</p>` : '';

        const deps = `
          <div class="section">
            <h4>Dependencies</h4>
            ${pillList(node.dependencies)}
          </div>
        `;

        const nexts = `
          <div class="section">
            <h4>Next Nodes</h4>
            ${pillList(node.next_nodes)}
          </div>
        `;

        const input = `
          <div class="section">
            <h4>Input Schema</h4>
            ${schemaTable(node.input_schema)}
          </div>
        `;

        const output = `
          <div class="section">
            <h4>Output Schema</h4>
            ${schemaTable(node.output_schema)}
          </div>
        `;

        return meta + desc + deps + nexts + input + output;
      }

      function createNodeEl(node){
        const el = document.createElement("div");
        el.className = "node collapsed";
        el.tabIndex = 0;
        el.dataset.id = node.id;

        const header = document.createElement("div");
        header.className = "node-header";

        const titleWrap = document.createElement("div");
        titleWrap.className = "node-titlewrap";

        const title = document.createElement("div");
        title.className = "node-title";
        title.textContent = node.name || node.id;

        const descCollapsed = document.createElement("div");
        descCollapsed.className = "node-desc-collapsed";
        descCollapsed.textContent = node.description || "";

        titleWrap.appendChild(title);
        titleWrap.appendChild(descCollapsed);

        const badges = document.createElement("div");
        badges.className = "node-badges";
        // Badges intentionally hidden in collapsed state requirement: keep only tool name visible.
        // We show badges only when expanded, by toggling their visibility in JS.
        const badgeKind = document.createElement("span");
        badgeKind.className = "badge";
        badgeKind.textContent = node.kind || "node";
        const badgePro = document.createElement("span");
        badgePro.className = "badge";
        badgePro.textContent = node.pro ? "PRO" : "NORMAL";
        badges.appendChild(badgeKind);
        badges.appendChild(badgePro);

        header.appendChild(titleWrap);
        header.appendChild(badges);

        const body = document.createElement("div");
        body.className = "node-body";
        body.innerHTML = nodeBodyHtml(node);

        el.appendChild(header);
        el.appendChild(body);

        // Collapsed view: hide badges; keep title + description visible.
        badges.style.display = "none";

        attachDragAndToggle(el, header, badges);

        // Hover highlights
        el.addEventListener("mouseenter", () => highlightConnections(node.id, true));
        el.addEventListener("mouseleave", () => highlightConnections(node.id, false));

        return el;
      }

      function setCollapsed(el, collapsed){
        const header = el.querySelector(".node-header");
        const badges = header.querySelector(".node-badges");
        el.classList.toggle("collapsed", !!collapsed);
        badges.style.display = collapsed ? "none" : "flex";
      }

      function toggleNode(el){
        const collapsed = el.classList.contains("collapsed");
        setCollapsed(el, !collapsed);
        // Expanding/collapsing changes node height; keep the canvas large enough.
        ensureCanvasSize();
        // Canvas/SVG size may change, so update all edges (also refreshes SVG viewBox).
        updateAllEdges();
        saveLayoutDebounced();
      }

      function attachDragAndToggle(el, header, badges){
        let startX = 0, startY = 0;
        let originLeft = 0, originTop = 0;
        let dragging = false;

        const DRAG_THRESHOLD = 4;

        header.addEventListener("pointerdown", (e) => {
          if(e.button !== 0) return;
          header.setPointerCapture(e.pointerId);
          dragging = false;
          startX = e.clientX;
          startY = e.clientY;

          const canvasRect = canvas.getBoundingClientRect();
          const rect = el.getBoundingClientRect();
          originLeft = rect.left - canvasRect.left;
          originTop = rect.top - canvasRect.top;

          el.classList.add("dragging");
          e.preventDefault();
        });

        header.addEventListener("pointermove", (e) => {
          if(!header.hasPointerCapture(e.pointerId)) return;

          const dx = e.clientX - startX;
          const dy = e.clientY - startY;

          if(!dragging && (Math.abs(dx) + Math.abs(dy) > DRAG_THRESHOLD)){
            dragging = true;
          }

          if(dragging){
            // Keep nodes inside the 0,0 quadrant so the scroll area is always reachable.
            const newLeft = Math.max(0, originLeft + dx);
            const newTop = Math.max(0, originTop + dy);
            el.style.left = newLeft + "px";
            el.style.top = newTop + "px";
            updateEdgesForNode(el.dataset.id);
          }
        });

        function endPointer(e){
          if(!header.hasPointerCapture(e.pointerId)) return;
          header.releasePointerCapture(e.pointerId);
          el.classList.remove("dragging");

          if(!dragging){
            // Click without drag -> toggle
            toggleNode(el);
          }else{
            // Dragging may move nodes beyond current canvas bounds.
            ensureCanvasSize();
            saveLayoutDebounced();
          }
        }

        header.addEventListener("pointerup", endPointer);
        header.addEventListener("pointercancel", endPointer);

        // Keyboard toggle
        el.addEventListener("keydown", (e) => {
          if(e.key === "Enter" || e.key === " "){
            e.preventDefault();
            toggleNode(el);
          }
        });
      }

      function addEdge(fromId, toId, dedupe){
        if(!state.nodesById.has(fromId) || !state.nodesById.has(toId)) return;
        const key = fromId + "→" + toId;
        if(dedupe.has(key)) return;
        dedupe.add(key);

        const path = document.createElementNS(SVG_NS, "path");
        path.classList.add("edge");
        path.setAttribute("marker-end", "url(#arrowHead)");
        path.dataset.from = fromId;
        path.dataset.to = toId;
        edgesSvg.appendChild(path);

        state.edges.push({ from: fromId, to: toId, el: path });
      }

      function buildEdges(){
        // Remove existing
        state.edges = [];
        // Keep defs (arrow marker)
        const defs = edgesSvg.querySelector("defs");
        edgesSvg.innerHTML = "";
        edgesSvg.appendChild(defs);

        const dedupe = new Set();
        for(const node of state.data.nodes){
          const deps = Array.isArray(node.dependencies) ? node.dependencies : [];
          for(const depId of deps){
            addEdge(depId, node.id, dedupe);
          }
          const nexts = Array.isArray(node.next_nodes) ? node.next_nodes : [];
          for(const nxt of nexts){
            addEdge(node.id, nxt, dedupe);
          }
        }
      }

      function rectInCanvas(el){
        /*
          IMPORTANT:
          Use the SVG element as the coordinate reference, not `canvas.scrollWidth`.
          If the workflow spans wider than the base canvas size, using scrollWidth in
          the SVG viewBox would introduce a scale factor and arrows would drift away
          from cards.

          Here we measure everything in CSS pixels relative to the SVG viewport.
        */
        const svgRect = edgesSvg.getBoundingClientRect();
        const r = el.getBoundingClientRect();

        const left = r.left - svgRect.left;
        const top = r.top - svgRect.top;
        const width = r.width;
        const height = r.height;

        return {
          left,
          top,
          width,
          height,
          right: left + width,
          bottom: top + height,
          cx: left + width/2,
          cy: top + height/2
        };
      }

      function anchorPoint(rect, side){
        switch(side){
          case "left": return { x: rect.left, y: rect.cy };
          case "right": return { x: rect.right, y: rect.cy };
          case "top": return { x: rect.cx, y: rect.top };
          case "bottom": return { x: rect.cx, y: rect.bottom };
          default: return { x: rect.cx, y: rect.cy };
        }
      }

      function edgePath(fromRect, toRect){
        const dx = toRect.cx - fromRect.cx;
        const dy = toRect.cy - fromRect.cy;

        const horizontal = Math.abs(dx) >= Math.abs(dy);

        let fromSide, toSide;
        if(horizontal){
          fromSide = dx >= 0 ? "right" : "left";
          toSide = dx >= 0 ? "left" : "right";
        }else{
          fromSide = dy >= 0 ? "bottom" : "top";
          toSide = dy >= 0 ? "top" : "bottom";
        }

        const p1 = anchorPoint(fromRect, fromSide);
        const p2 = anchorPoint(toRect, toSide);

        // Bezier control points
        const curvature = 0.55;
        let c1, c2;

        if(horizontal){
          const d = Math.max(60, Math.abs(p2.x - p1.x) * curvature);
          c1 = { x: p1.x + (fromSide === "right" ? d : -d), y: p1.y };
          c2 = { x: p2.x + (toSide === "left" ? -d : d), y: p2.y };
        }else{
          const d = Math.max(60, Math.abs(p2.y - p1.y) * curvature);
          c1 = { x: p1.x, y: p1.y + (fromSide === "bottom" ? d : -d) };
          c2 = { x: p2.x, y: p2.y + (toSide === "top" ? -d : d) };
        }

        return `M ${p1.x.toFixed(1)} ${p1.y.toFixed(1)} C ${c1.x.toFixed(1)} ${c1.y.toFixed(1)}, ${c2.x.toFixed(1)} ${c2.y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
      }

      function updateEdge(edge){
        const fromEl = state.nodeEls.get(edge.from);
        const toEl = state.nodeEls.get(edge.to);
        if(!fromEl || !toEl) return;

        const fromRect = rectInCanvas(fromEl);
        const toRect = rectInCanvas(toEl);

        edge.el.setAttribute("d", edgePath(fromRect, toRect));
      }

      function updateAllEdges(){
        // Keep SVG user units == CSS pixels (no implicit scaling).
        const w = Math.max(1, edgesSvg.clientWidth);
        const h = Math.max(1, edgesSvg.clientHeight);
        edgesSvg.setAttribute("viewBox", `0 0 ${w} ${h}`);
        for(const e of state.edges) updateEdge(e);
      }

      function updateEdgesForNode(nodeId){
        for(const e of state.edges){
          if(e.from === nodeId || e.to === nodeId){
            updateEdge(e);
          }
        }
      }

      function highlightConnections(nodeId, on){
        for(const e of state.edges){
          const connected = (e.from === nodeId || e.to === nodeId);
          e.el.classList.toggle("dim", on && !connected);
          e.el.classList.toggle("highlight", on && connected);
        }
      }

      function collapseAll(){
        for(const [id, el] of state.nodeEls){
          setCollapsed(el, true);
        }
        updateAllEdges();
        saveLayoutDebounced();
      }

      function expandAll(){
        for(const [id, el] of state.nodeEls){
          setCollapsed(el, false);
        }
        updateAllEdges();
        saveLayoutDebounced();
      }

      btnCollapse.addEventListener("click", collapseAll);
      btnExpand.addEventListener("click", expandAll);
      btnReset.addEventListener("click", resetLayout);

      async function main(){
        setOverlay("Loading…", `fetch("${DATA_URL}")`, false);

        let data;
        try{
          const resp = await fetch(DATA_URL, { cache: "no-store" });
          if(!resp.ok) throw new Error(`HTTP ${resp.status}`);
          data = await resp.json();
        }catch(err){
          setOverlay("Load failed", [
            "Unable to load the JSON file.",
            "If you opened index.html directly (file://), your browser may block fetch().",
            "",
            "Tip: run a local static server in this folder, for example:",
            "  python -m http.server 8000",
            "Then open:",
            "  http://localhost:8000/index.html",
            "",
            "Error:",
            String(err)
          ].join("\n"), false);
          return;
        }

        state.data = data;
        state.layoutKey = "node_layout_" + (data.workflow_meta?.id || "workflow");
        state.nodesById = new Map((data.nodes || []).map(n => [n.id, n]));

        wfNameEl.textContent = data.workflow_meta?.name || "Workflow Node Map";
        wfDescEl.textContent = data.workflow_meta?.description || `data: ${DATA_URL}`;
        document.title = wfNameEl.textContent;

        // Build nodes
        const saved = loadLayout();
        const positions = saved?.positions || autoLayout(data.nodes || []);
        const collapsed = saved?.collapsed || null;

        // Clear existing nodes but keep svg
        Array.from(canvas.querySelectorAll(".node")).forEach(n => n.remove());

        for(const node of (data.nodes || [])){
          const el = createNodeEl(node);
          const p = positions[node.id] || {x:40, y:40};
          el.style.left = p.x + "px";
          el.style.top = p.y + "px";
          const isCollapsed = collapsed ? !!collapsed[node.id] : true;
          setCollapsed(el, isCollapsed);

          canvas.appendChild(el);
          state.nodeEls.set(node.id, el);
        }

        // Make sure the canvas is large enough to contain all nodes before drawing edges.
        ensureCanvasSize();

        // Build edges
        buildEdges();
        // Initial edge layout
        requestAnimationFrame(() => {
          updateAllEdges();
          setOverlay("", "", true);
        });

        // Keep edges updated on window resize
        window.addEventListener("resize", () => updateAllEdges());

        // Optional: keep edges updated while scrolling (helps with some browsers/subpixel issues)
        viewport.addEventListener("scroll", () => {
          // Edges are in canvas, so they scroll together, but updating can avoid minor jitter.
          updateAllEdges();
        }, { passive: true });
      }

      main();
    })();
  </script>
</body>
</html>