Initial Awawawa

web/patchbay_web/static/patch.js

@@ -0,0 +1,634 @@
+/* Patch editor: node graph with draggable wires, saved to /api/graph. */
+"use strict";
+
+(() => {
+  const NODE_W = 220;
+  const SOCKET_Y = 47;            // socket centre below the node's top edge
+  const TYPES = {
+    client_source: { title: "Client Source", input: false, output: true },
+    client_sink: { title: "Client Sink", input: true, output: false },
+    public_sink: { title: "Public Sink", input: true, output: false },
+    splitter: { title: "Splitter", input: true, output: true },
+    tunnel_source: { title: "Tunnel Source", input: false, output: true },
+    tunnel_sink: { title: "Tunnel Sink", input: true, output: false },
+  };
+  const SOURCE_TYPES = new Set(["client_source", "tunnel_source"]);
+  const TUNNEL_TYPES = new Set(["tunnel_source", "tunnel_sink"]);
+
+  const editor = document.getElementById("editor");
+  const canvas = document.getElementById("canvas");
+  const wireLayer = document.getElementById("wire-layer");
+  const saveState = document.getElementById("save-state");
+  const SVG = "http://www.w3.org/2000/svg";
+
+  const S = {
+    nodes: new Map(),           // id -> node
+    els: new Map(),             // id -> element
+    links: [],                  // {from, to}
+    clients: [],
+    interfaces: {},             // host id ("0" = target) -> [{name, addr}]
+    status: { clients: {}, sinks: {} },
+    live: {},
+    daemon: true,
+    pan: { x: 40, y: 40 },
+    zoom: 1,
+    sel: null,                  // {kind: "node", id} | {kind: "link", link}
+    nextTemp: -1,
+    dirty: false,
+    saving: false,
+    saveTimer: null,
+    addOffset: 0,
+    lastWire: null,
+  };
+
+  /* Graph helpers */
+
+  function inputLink(id) {
+    return S.links.find((l) => l.to === id);
+  }
+
+  // Follows splitters upstream to the client source feeding a node.
+  function sourceOf(id) {
+    let cur = id;
+    for (let i = 0; i < 64; i++) {
+      const n = S.nodes.get(cur);
+      if (!n) return null;
+      if (SOURCE_TYPES.has(n.type)) return n;
+      const l = inputLink(cur);
+      if (!l) return null;
+      cur = l.from;
+    }
+    return null;
+  }
+
+  function createsLoop(from, to) {
+    // Walking upstream from "from" must not reach "to".
+    let cur = from;
+    for (let i = 0; i < 64; i++) {
+      if (cur === to) return true;
+      const l = inputLink(cur);
+      if (!l) return false;
+      cur = l.from;
+    }
+    return true;
+  }
+
+  /* View transform */
+
+  function applyView() {
+    const t = `translate(${S.pan.x}px, ${S.pan.y}px) scale(${S.zoom})`;
+    canvas.style.transform = t;
+    wireLayer.setAttribute("transform", `translate(${S.pan.x} ${S.pan.y}) scale(${S.zoom})`);
+  }
+
+  function toCanvas(clientX, clientY) {
+    const r = editor.getBoundingClientRect();
+    return { x: (clientX - r.left - S.pan.x) / S.zoom, y: (clientY - r.top - S.pan.y) / S.zoom };
+  }
+
+  function fit() {
+    if (!S.nodes.size) return;
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    for (const n of S.nodes.values()) {
+      const el = S.els.get(n.id);
+      x0 = Math.min(x0, n.x);
+      y0 = Math.min(y0, n.y);
+      x1 = Math.max(x1, n.x + NODE_W);
+      y1 = Math.max(y1, n.y + (el ? el.offsetHeight : 150));
+    }
+    const r = editor.getBoundingClientRect();
+    const pad = 60;
+    S.zoom = Math.max(0.3, Math.min(1.2, Math.min((r.width - pad * 2) / (x1 - x0), (r.height - pad * 2) / (y1 - y0))));
+    S.pan.x = (r.width - (x1 - x0) * S.zoom) / 2 - x0 * S.zoom;
+    S.pan.y = (r.height - (y1 - y0) * S.zoom) / 2 - y0 * S.zoom;
+    applyView();
+  }
+
+  /* Wires */
+
+  function wirePath(x1, y1, x2, y2) {
+    const dx = Math.max(40, Math.abs(x2 - x1) * 0.5);
+    return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
+  }
+
+  function outPos(n) { return { x: n.x + NODE_W + 1, y: n.y + SOCKET_Y }; }
+  function inPos(n) { return { x: n.x - 1, y: n.y + SOCKET_Y }; }
+
+  function drawWires() {
+    wireLayer.replaceChildren();
+    for (const l of S.links) {
+      const a = S.nodes.get(l.from), b = S.nodes.get(l.to);
+      if (!a || !b) continue;
+      const p = outPos(a), q = inPos(b);
+      const d = wirePath(p.x, p.y, q.x, q.y);
+      const src = sourceOf(l.from);
+      let cls = src ? src.proto : "none";
+      if (src && b.type !== "splitter" && b.proto !== src.proto) cls += " bad";
+      if (S.sel && S.sel.kind === "link" && S.sel.link === l) cls += " selected";
+
+      const vis = document.createElementNS(SVG, "path");
+      vis.setAttribute("d", d);
+      vis.setAttribute("class", cls);
+      const hit = document.createElementNS(SVG, "path");
+      hit.setAttribute("d", d);
+      hit.setAttribute("class", "hit");
+      hit.addEventListener("mousedown", (ev) => {
+        ev.stopPropagation();
+        // Selecting re-renders the wires, so dblclick would never fire; time it instead.
+        const now = Date.now();
+        if (S.lastWire && S.lastWire.link === l && now - S.lastWire.t < 400) {
+          S.lastWire = null;
+          removeLink(l);
+          return;
+        }
+        S.lastWire = { link: l, t: now };
+        select({ kind: "link", link: l });
+        editor.focus();
+      });
+      wireLayer.append(vis, hit);
+
+      // A selected wire gets a delete button at its midpoint (bezier t = 0.5).
+      if (S.sel && S.sel.kind === "link" && S.sel.link === l) {
+        const dx = Math.max(40, Math.abs(q.x - p.x) * 0.5);
+        const mx = (p.x + 3 * (p.x + dx) + 3 * (q.x - dx) + q.x) / 8;
+        const my = (p.y + q.y) / 2;
+        const btn = document.createElementNS(SVG, "g");
+        btn.setAttribute("class", "wire-del");
+        btn.setAttribute("transform", `translate(${mx} ${my})`);
+        const title = document.createElementNS(SVG, "title");
+        title.textContent = "Remove connection";
+        const circle = document.createElementNS(SVG, "circle");
+        circle.setAttribute("r", "10");
+        const x = document.createElementNS(SVG, "path");
+        x.setAttribute("d", "M -4 -4 L 4 4 M 4 -4 L -4 4");
+        btn.append(title, circle, x);
+        btn.addEventListener("mousedown", (ev) => ev.stopPropagation());
+        btn.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          removeLink(l);
+        });
+        wireLayer.append(btn);
+      }
+    }
+  }
+
+  function removeLink(l) {
+    S.links = S.links.filter((x) => x !== l);
+    if (S.sel && S.sel.kind === "link" && S.sel.link === l) S.sel = null;
+    changed();
+  }
+
+  /* Nodes */
+
+  function field(label, input) {
+    return PB.el("label", {}, PB.el("span", { text: label }), input);
+  }
+
+  // Tunnel nodes may live on the target itself (client_id null).
+  function clientSelect(n, onChange) {
+    const sel = PB.el("select", { "aria-label": "Host" });
+    sel.append(PB.el("option", { value: "", text: TUNNEL_TYPES.has(n.type) ? "Target (this server)" : "- choose client -" }));
+    for (const c of S.clients) {
+      const o = PB.el("option", { value: String(c.id), text: c.name });
+      if (n.client_id === c.id) o.selected = true;
+      sel.append(o);
+    }
+    sel.addEventListener("change", () => {
+      n.client_id = sel.value ? Number(sel.value) : null;
+      if (onChange) onChange();
+      changed();
+    });
+    return sel;
+  }
+
+  // Free text with suggestions from the tun interfaces the host reported.
+  function ifaceInput(n) {
+    const listId = `ifaces-${Math.random().toString(36).slice(2)}`;
+    const list = PB.el("datalist", { id: listId });
+    const inp = PB.el("input", { value: n.iface || "", placeholder: "tun0", list: listId, spellcheck: "false" });
+    inp.addEventListener("input", () => { n.iface = inp.value.trim(); changed(); });
+    const fill = () => {
+      list.replaceChildren();
+      for (const i of S.interfaces[String(n.client_id || 0)] || []) {
+        list.append(PB.el("option", { value: i.name, text: i.addr !== "-" ? `${i.name} (${i.addr})` : i.name }));
+      }
+    };
+    fill();
+    const wrap = PB.el("span", { class: "iface-wrap" }, inp, list);
+    wrap._fill = fill;
+    return wrap;
+  }
+
+  function textInput(n, key, placeholder) {
+    const inp = PB.el("input", { value: n[key] || "", placeholder: placeholder || "", spellcheck: "false" });
+    inp.addEventListener("input", () => { n[key] = inp.value.trim(); changed(); });
+    return inp;
+  }
+
+  function portInput(n) {
+    const inp = PB.el("input", { type: "number", min: "1", max: "65535", value: n.port ? String(n.port) : "", placeholder: "port" });
+    inp.addEventListener("input", () => { n.port = Number(inp.value) || 0; changed(); });
+    return inp;
+  }
+
+  function protoSelect(n) {
+    const sel = PB.el("select", { "aria-label": "Protocol" });
+    for (const p of ["tcp", "udp"]) {
+      const o = PB.el("option", { value: p, text: p.toUpperCase() });
+      if (n.proto === p) o.selected = true;
+      sel.append(o);
+    }
+    sel.addEventListener("change", () => { n.proto = sel.value; changed(); });
+    return sel;
+  }
+
+  function buildNode(n) {
+    const t = TYPES[n.type];
+    const el = PB.el("div", { class: `node ${n.type}` });
+    const title = PB.el("span", { class: "title", text: t.title });
+    const close = PB.el("button", { class: "x", type: "button", title: "Delete node", "aria-label": "Delete node", text: "\u00d7" });
+    const head = PB.el("div", { class: "node-head" }, title, close);
+    const body = PB.el("div", { class: "node-body" });
+
+    if (n.type === "client_source") {
+      body.append(field("Client", clientSelect(n)), field("Address", textInput(n, "host", "127.0.0.1")),
+        field("Port", portInput(n)), field("Proto", protoSelect(n)));
+    } else if (n.type === "client_sink") {
+      body.append(field("Client", clientSelect(n)), field("Bind", textInput(n, "host", "127.0.0.1")),
+        field("Port", portInput(n)), field("Proto", protoSelect(n)));
+    } else if (n.type === "public_sink") {
+      body.append(field("Bind", textInput(n, "host", "0.0.0.0")), field("Port", portInput(n)), field("Proto", protoSelect(n)));
+    } else if (TUNNEL_TYPES.has(n.type)) {
+      const iface = ifaceInput(n);
+      body.append(field("Host", clientSelect(n, iface._fill)), field("Iface", iface));
+      if (n.type === "tunnel_source") body.append(field("Peer", textInput(n, "host", "e.g. 10.100.0.2")));
+      body.append(field("Port", portInput(n)), field("Proto", protoSelect(n)));
+    }
+    body.append(field("Label", textInput(n, "label", "optional")));
+    const status = PB.el("div", { class: "node-status" });
+    body.append(status);
+    el.append(head, body);
+    if (t.input) el.append(PB.el("div", { class: "socket in", "data-node": String(n.id), title: "Input" }));
+    if (t.output) el.append(PB.el("div", { class: "socket out", "data-node": String(n.id), title: "Output" }));
+
+    close.addEventListener("mousedown", (ev) => ev.stopPropagation());
+    close.addEventListener("click", () => removeNode(n.id));
+    head.addEventListener("mousedown", (ev) => startNodeDrag(ev, n));
+    el.addEventListener("mousedown", (ev) => {
+      // Sockets must bubble up to the canvas handler that starts wire drags.
+      if (ev.target.closest("input, select, button, .socket")) return;
+      ev.stopPropagation();
+      select({ kind: "node", id: n.id });
+    });
+    el._status = status;
+    el._title = title;
+    return el;
+  }
+
+  function placeNode(n) {
+    const el = S.els.get(n.id);
+    el.style.left = n.x + "px";
+    el.style.top = n.y + "px";
+  }
+
+  function renderAll() {
+    canvas.replaceChildren();
+    S.els.clear();
+    for (const n of S.nodes.values()) {
+      const el = buildNode(n);
+      S.els.set(n.id, el);
+      canvas.append(el);
+      placeNode(n);
+    }
+    // Socket data attributes carry ids; refresh after remapping.
+    updateStatus();
+    drawWires();
+  }
+
+  function addNode(type) {
+    const r = editor.getBoundingClientRect();
+    const c = toCanvas(r.left + r.width / 2, r.top + r.height / 2);
+    const off = (S.addOffset++ % 6) * 24;
+    const n = {
+      id: S.nextTemp--, type, client_id: null, port: 0, proto: "tcp", label: "",
+      iface: TUNNEL_TYPES.has(type) ? "tun0" : "",
+      host: type === "public_sink" ? "0.0.0.0" : (type === "splitter" || TUNNEL_TYPES.has(type)) ? "" : "127.0.0.1",
+      x: Math.round(c.x - NODE_W / 2 + off), y: Math.round(c.y - 80 + off),
+    };
+    S.nodes.set(n.id, n);
+    const el = buildNode(n);
+    S.els.set(n.id, el);
+    canvas.append(el);
+    placeNode(n);
+    select({ kind: "node", id: n.id });
+    changed();
+  }
+
+  function removeNode(id) {
+    S.nodes.delete(id);
+    const el = S.els.get(id);
+    if (el) el.remove();
+    S.els.delete(id);
+    S.links = S.links.filter((l) => l.from !== id && l.to !== id);
+    if (S.sel && S.sel.kind === "node" && S.sel.id === id) S.sel = null;
+    drawWires();
+    changed();
+  }
+
+  function select(sel) {
+    S.sel = sel;
+    for (const [id, el] of S.els) el.classList.toggle("selected", !!sel && sel.kind === "node" && sel.id === id);
+    drawWires();
+  }
+
+  /* Status */
+
+  function updateStatus() {
+    for (const n of S.nodes.values()) {
+      const el = S.els.get(n.id);
+      if (!el) continue;
+      el._title.textContent = TYPES[n.type].title + (n.id > 0 ? ` #${n.id}` : "");
+      const st = el._status;
+      st.replaceChildren();
+      st.classList.remove("err");
+      const parts = [];
+
+      if (n.client_id && n.type !== "splitter" && n.type !== "public_sink") {
+        const on = !!S.status.clients[String(n.client_id)];
+        parts.push(PB.el("span", { class: `dot ${on ? "on" : "off"}` }), PB.el("span", { text: on ? "online" : "offline" }));
+      }
+      if (n.type === "splitter") {
+        const outs = S.links.filter((l) => l.from === n.id).length;
+        parts.push(PB.el("span", { text: `fans out to ${outs} sink${outs === 1 ? "" : "s"}` }));
+      }
+      if (TYPES[n.type].input && n.type !== "splitter" && n.id > 0 && !S.dirty) {
+        const s = S.status.sinks[String(n.id)];
+        const lv = S.live[String(n.id)];
+        if (s && !s.ok) {
+          st.classList.add("err");
+          parts.push(PB.el("span", { text: s.error }));
+        } else if (s) {
+          const txt = lv ? `in ${PB.rate(lv.in)}, out ${PB.rate(lv.out)}, ${lv.active} open` : "ready";
+          parts.push(PB.el("span", { text: s.source_online ? txt : "source offline" }));
+        }
+      }
+      if (!S.daemon && n.type !== "splitter") {
+        st.classList.add("err");
+        parts.length = 0;
+        parts.push(PB.el("span", { text: "daemon not reachable" }));
+      }
+      st.append(...parts);
+    }
+  }
+
+  async function pollStatus() {
+    try {
+      const [st, lv] = await Promise.all([PB.api("GET", "/api/status"), PB.api("GET", "/api/live")]);
+      S.daemon = st.daemon;
+      S.status = { clients: st.clients || {}, sinks: st.sinks || {} };
+      S.live = lv.sinks || {};
+    } catch (e) {
+      S.daemon = false;
+    }
+    updateStatus();
+  }
+
+  /* Saving */
+
+  function setSaveState(text, err) {
+    saveState.textContent = text;
+    saveState.classList.toggle("err", !!err);
+  }
+
+  function changed() {
+    S.dirty = true;
+    setSaveState("Unsaved changes");
+    clearTimeout(S.saveTimer);
+    S.saveTimer = setTimeout(save, 700);
+    drawWires();
+    updateStatus();
+  }
+
+  async function save() {
+    if (S.saving) {
+      S.saveTimer = setTimeout(save, 300);
+      return;
+    }
+    S.saving = true;
+    S.dirty = false;
+    setSaveState("Saving...");
+    const payload = {
+      nodes: [...S.nodes.values()].map((n) => ({ ...n })),
+      links: S.links.map((l) => ({ from: l.from, to: l.to })),
+    };
+    try {
+      const res = await PB.api("PUT", "/api/graph", payload);
+      remapIds(res.ids || {});
+      setSaveState(res.daemon ? "Saved" : "Saved (daemon offline)", !res.daemon);
+      await pollStatus();
+    } catch (e) {
+      S.dirty = true;
+      setSaveState("Not saved: " + e.message, true);
+    } finally {
+      S.saving = false;
+    }
+  }
+
+  function remapIds(ids) {
+    let any = false;
+    for (const [oldStr, newId] of Object.entries(ids)) {
+      const oldId = Number(oldStr);
+      if (oldId === newId || !S.nodes.has(oldId)) continue;
+      const n = S.nodes.get(oldId);
+      S.nodes.delete(oldId);
+      n.id = newId;
+      S.nodes.set(newId, n);
+      for (const l of S.links) {
+        if (l.from === oldId) l.from = newId;
+        if (l.to === oldId) l.to = newId;
+      }
+      if (S.sel && S.sel.kind === "node" && S.sel.id === oldId) S.sel.id = newId;
+      any = true;
+    }
+    if (any) renderAll();
+  }
+
+  /* Mouse interaction */
+
+  function startNodeDrag(ev, n) {
+    if (ev.button !== 0 || ev.target.closest("button")) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    select({ kind: "node", id: n.id });
+    const start = toCanvas(ev.clientX, ev.clientY);
+    const ox = n.x, oy = n.y;
+    let moved = false;
+    const move = (e) => {
+      const p = toCanvas(e.clientX, e.clientY);
+      n.x = Math.round(ox + p.x - start.x);
+      n.y = Math.round(oy + p.y - start.y);
+      moved = true;
+      placeNode(n);
+      drawWires();
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      if (moved) changed();
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }
+
+  function startWireDrag(ev, fromId) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const from = S.nodes.get(fromId);
+    const temp = document.createElementNS(SVG, "path");
+    temp.setAttribute("class", "temp");
+    wireLayer.append(temp);
+    let target = null;
+
+    const move = (e) => {
+      const p = outPos(from), q = toCanvas(e.clientX, e.clientY);
+      temp.setAttribute("d", wirePath(p.x, p.y, q.x, q.y));
+      const hit = document.elementFromPoint(e.clientX, e.clientY);
+      const sock = hit && hit.closest(".socket.in");
+      if (target && target !== sock) target.classList.remove("target");
+      target = sock && Number(sock.dataset.node) !== fromId ? sock : null;
+      if (target) target.classList.add("target");
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      temp.remove();
+      if (target) {
+        target.classList.remove("target");
+        connect(fromId, Number(target.dataset.node));
+      }
+      drawWires();
+    };
+    move(ev);
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }
+
+  function connect(from, to) {
+    if (from === to || createsLoop(from, to)) {
+      setSaveState("That link would create a loop", true);
+      return;
+    }
+    S.links = S.links.filter((l) => l.to !== to);
+    // A source has a single output; fan-out goes through a splitter.
+    if (SOURCE_TYPES.has(S.nodes.get(from).type)) S.links = S.links.filter((l) => l.from !== from);
+    S.links.push({ from, to });
+    changed();
+  }
+
+  canvas.addEventListener("mousedown", (ev) => {
+    const sock = ev.target.closest(".socket");
+    if (!sock || ev.button !== 0) return;
+    const id = Number(sock.dataset.node);
+    if (sock.classList.contains("out")) {
+      startWireDrag(ev, id);
+    } else {
+      // Grabbing a connected input detaches the wire and keeps dragging it.
+      const l = inputLink(id);
+      if (l) {
+        removeLink(l);
+        startWireDrag(ev, l.from);
+      } else {
+        ev.stopPropagation();
+      }
+    }
+  });
+
+  editor.addEventListener("mousedown", (ev) => {
+    if (ev.button !== 0 && ev.button !== 1) return;
+    if (ev.target.closest(".node")) return;
+    ev.preventDefault();
+    editor.focus();
+    select(null);
+    const sx = ev.clientX, sy = ev.clientY, px = S.pan.x, py = S.pan.y;
+    editor.classList.add("panning");
+    const move = (e) => {
+      S.pan.x = px + e.clientX - sx;
+      S.pan.y = py + e.clientY - sy;
+      applyView();
+    };
+    const up = () => {
+      editor.classList.remove("panning");
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  });
+
+  editor.addEventListener("wheel", (ev) => {
+    if (ev.target.closest("select")) return;
+    ev.preventDefault();
+    const r = editor.getBoundingClientRect();
+    const mx = ev.clientX - r.left, my = ev.clientY - r.top;
+    const z = Math.max(0.3, Math.min(2, S.zoom * (ev.deltaY < 0 ? 1.1 : 1 / 1.1)));
+    S.pan.x = mx - (mx - S.pan.x) * (z / S.zoom);
+    S.pan.y = my - (my - S.pan.y) * (z / S.zoom);
+    S.zoom = z;
+    applyView();
+  }, { passive: false });
+
+  editor.addEventListener("keydown", (ev) => {
+    if (ev.target.closest("input, select, textarea")) return;
+    if ((ev.key === "Delete" || ev.key === "Backspace") && S.sel) {
+      ev.preventDefault();
+      if (S.sel.kind === "node") removeNode(S.sel.id);
+      else removeLink(S.sel.link);
+    }
+  });
+
+  /* Toolbar */
+
+  const addMenu = document.getElementById("add-menu");
+  const addBtn = document.getElementById("add-btn");
+  function setMenu(open) {
+    addMenu.classList.toggle("open", open);
+    addBtn.setAttribute("aria-expanded", String(open));
+  }
+  addBtn.addEventListener("click", () => setMenu(!addMenu.classList.contains("open")));
+  addMenu.querySelectorAll("[data-add]").forEach((b) => b.addEventListener("click", () => {
+    setMenu(false);
+    addNode(b.dataset.add);
+  }));
+  document.addEventListener("click", (ev) => { if (!addMenu.contains(ev.target)) setMenu(false); });
+  document.addEventListener("keydown", (ev) => { if (ev.key === "Escape") setMenu(false); });
+  document.getElementById("fit-btn").addEventListener("click", fit);
+
+  window.addEventListener("beforeunload", (ev) => {
+    if (S.dirty || S.saving) {
+      save();
+      ev.preventDefault();
+    }
+  });
+
+  /* Start */
+
+  async function load() {
+    try {
+      const g = await PB.api("GET", "/api/graph");
+      S.clients = g.clients;
+      S.interfaces = g.interfaces || {};
+      for (const n of g.nodes) S.nodes.set(n.id, n);
+      S.links = g.links;
+      renderAll();
+      applyView();
+      fit();
+      setSaveState(S.nodes.size ? "Saved" : "Empty patch: use Add to create nodes");
+    } catch (e) {
+      setSaveState("Loading failed: " + e.message, true);
+    }
+    await pollStatus();
+    setInterval(pollStatus, 3000);
+  }
+
+  load();
+})();