@nanobpm/nano-workforce 0.138.3 → 0.139.1

package/pages/delivery-graphs/staged.mount.js

@@ -17,14 +17,31 @@
 // demand×supply board (pages/board/mount.js): the SAME module mounts embedded in the console (App View)
 // and standalone — only the host element and injected endpoint config differ.
 
-// The read behind the list: every live staged proposal, newest first (base-relative — a leading-slash
-// path resolves against the console iframe ORIGIN, not the app-view base, and 404s the door, #279).
-const DEFAULT_STAGED_URL = "app/api/delivery-graph/staged";
+// The door defaults are anchored to THIS MODULE's url (import.meta.url), NOT the document base. The
+// staged App-View shell (staged-embed.html / staged-standalone.html) — and therefore this mount.js —
+// is served ONE DIRECTORY DEEP at `<appMount>/delivery-graphs/`, while the API is a sibling of that
+// dir at `<appMount>/app/api/…`. A document-base-relative default (`"app/api/delivery-graph/staged"`)
+// resolves against the `…/delivery-graphs/` shell base to `…/delivery-graphs/app/api/delivery-graph/
+// staged` → 404 on EVERY surface (standalone, local urban-SPA App-View, and the Studio console
+// App-View, which never injects window.__NANO_APP_VIEW__ so this default is what runs) — the
+// "Could not load staged proposals." bug. A leading-slash absolute is worse still: through Studio it
+// resolves against the console ORIGIN, not the app-view base (#279). `../app/api/…` off
+// import.meta.url steps up out of `/delivery-graphs/` and lands on `<appMount>/app/api/…` on all
+// three surfaces regardless of the document base — the same fix the cockpit shipped for #467.
+// The read behind the list: every live staged proposal, newest first.
+const DEFAULT_STAGED_URL = new URL("../app/api/delivery-graph/staged", import.meta.url).href;
 // The operator dispatch door: POST { digest } → launches the staged graph engine-natively (#460).
-const DEFAULT_DISPATCH_URL = "app/api/actions/delivery-graph/dispatch";
+const DEFAULT_DISPATCH_URL = new URL("../app/api/actions/delivery-graph/dispatch", import.meta.url).href;
+// The operator dismiss door: POST { digest } → discards a staged proposal as noise, flipping it to the
+// terminal `dismissed` status so it drops off the staged list (#520). Launches nothing.
+const DEFAULT_DISMISS_URL = new URL("../app/api/actions/delivery-graph/dismiss", import.meta.url).href;
 // The read-only DI preview door: recompiles a staged proposal's BPMN (with diagram interchange) so its
 // generated diagram can be rendered in the host explorer BEFORE dispatch. No deploy, no dispatch.
-const DEFAULT_PROPOSAL_BPMN_URL = "app/api/actions/delivery-graph/proposal-bpmn";
+const DEFAULT_PROPOSAL_BPMN_URL = new URL("../app/api/actions/delivery-graph/proposal-bpmn", import.meta.url).href;
+// The save-to-library door: POST { name, digest } → copies this staged proposal's already-stored graph
+// into the reusable library (issue #523, save-from-digest → source `from-staged`). Persists a library
+// entry; it never dispatches or re-stages, so the #460 operator boundary holds.
+const DEFAULT_SAVE_LIBRARY_URL = new URL("../app/api/actions/delivery-graph/library/save", import.meta.url).href;
 
 // How often the list re-polls the read door so a freshly-staged (or just-dispatched) proposal appears
 // (or drops off) without a manual refresh — mirrors the 5s cadence the old declarative grid used.
@@ -42,6 +59,13 @@ const DISPATCH_CONFIRM =
   "node (it merges PRs / publishes packages) will run. Clicking Dispatch IS the approval, " +
   "content-addressed to exactly the graph you previewed.";
 
+// The confirm shown before a dismiss — dismissing is a terminal discard: the proposal drops off the
+// staged list for good (it can be re-staged only by recompiling). It launches nothing, so this is a
+// lighter acknowledgement than Dispatch, but still a one-way action the operator confirms.
+const DISMISS_CONFIRM =
+  "Dismiss this staged delivery graph? It is discarded as noise and drops off the staged list — this " +
+  "launches nothing, but to bring it back you must recompile/re-stage it.";
+
 /** Escape untrusted strings before they touch innerHTML. */
 function esc(value) {
   return String(value ?? "").replace(
@@ -76,6 +100,8 @@ function renderProposal(p) {
     <div class="actions">
       <button class="btn btn-ghost" type="button" data-preview-di="${esc(p.digest)}">Preview generated DI</button>
       <button class="btn btn-primary" type="button" data-dispatch="${esc(p.digest)}">Dispatch</button>
+      <button class="btn btn-ghost" type="button" data-save-library="${esc(p.digest)}" data-title="${esc(p.title ?? "")}">Save to library</button>
+      <button class="btn btn-ghost" type="button" data-dismiss="${esc(p.digest)}">Dismiss</button>
     </div>
   </section>`;
 }
@@ -95,10 +121,24 @@ function renderList(proposals) {
   return header + proposals.map(renderProposal).join("");
 }
 
+// Only attach the guard secret when the resolved door URL is SAME-ORIGIN. The staged/dispatch/dismiss/
+// proposal-bpmn/save-library door URLs can be overridden (e.g. via the standalone `?staged=` /
+// `?dispatch=` / `?proposal-bpmn=` query params) to a full `https://…` URL on a foreign origin; sending
+// `x-hook-secret` there would exfiltrate the shared guard secret to an arbitrary host. A cross-origin
+// (or unparseable, or non-browser) target therefore gets no secret.
+function isSameOrigin(url) {
+  try {
+    if (typeof window === "undefined" || !window.location) return false;
+    return new URL(url, window.location.href).origin === window.location.origin;
+  } catch (_e) {
+    return false;
+  }
+}
+
 /**
  * Mount the staged-proposals list into `host`.
  * @param {Element|null} host — the element to render into (or null → look up #delivery-graphs-staged-root).
- * @param {{stagedUrl?:string, dispatchUrl?:string, proposalBpmnUrl?:string, hookSecret?:string, refreshMs?:number}} [config]
+ * @param {{stagedUrl?:string, dispatchUrl?:string, dismissUrl?:string, proposalBpmnUrl?:string, saveLibraryUrl?:string, hookSecret?:string, refreshMs?:number}} [config]
  */
 export function mountStagedProposals(host, config = {}) {
   const isElement = host != null && host.nodeType === 1 && typeof host.innerHTML === "string";
@@ -107,11 +147,13 @@ export function mountStagedProposals(host, config = {}) {
 
   const stagedUrl = config.stagedUrl ?? DEFAULT_STAGED_URL;
   const dispatchUrl = config.dispatchUrl ?? DEFAULT_DISPATCH_URL;
+  const dismissUrl = config.dismissUrl ?? DEFAULT_DISMISS_URL;
   const proposalBpmnUrl = config.proposalBpmnUrl ?? DEFAULT_PROPOSAL_BPMN_URL;
+  const saveLibraryUrl = config.saveLibraryUrl ?? DEFAULT_SAVE_LIBRARY_URL;
   const refreshMs = typeof config.refreshMs === "number" && config.refreshMs > 0 ? config.refreshMs : DEFAULT_REFRESH_MS;
-  const headers = () => ({
+  const headers = (url) => ({
     "content-type": "application/json",
-    ...(config.hookSecret ? { "x-hook-secret": config.hookSecret } : {}),
+    ...(config.hookSecret && isSameOrigin(url) ? { "x-hook-secret": config.hookSecret } : {}),
   });
 
   root.innerHTML = `<div class="dg">
@@ -149,7 +191,7 @@ export function mountStagedProposals(host, config = {}) {
     const controller = new AbortController();
     const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
     try {
-      const res = await fetch(url, { ...init, headers: headers(), signal: controller.signal });
+      const res = await fetch(url, { ...init, headers: headers(url), signal: controller.signal });
       let body = {};
       try {
         body = await res.json();
@@ -254,6 +296,67 @@ export function mountStagedProposals(host, config = {}) {
     }
   }
 
+  // "Dismiss": the operator's discard (#520). Confirm (dismiss is a one-way drop off the staged list),
+  // then POST the digest to the dismiss door; on success the proposal flips to `dismissed` and drops off
+  // the list on the next poll — refresh immediately so the operator sees it leave. Launches nothing.
+  async function doDismiss(digest) {
+    const staged = typeof digest === "string" ? digest.trim() : "";
+    if (staged === "") return;
+    if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(DISMISS_CONFIRM)) {
+      return;
+    }
+    busy(true);
+    setStatus("Dismissing…");
+    try {
+      const { status, body } = await post(dismissUrl, { digest: staged });
+      if ((status === 200 || status === 202) && body.ok) {
+        setStatus("\u2713 Dismissed — the proposal is off the staged list.", "ok");
+        await refresh();
+      } else {
+        setStatus(body && body.error ? body.error : "Dismiss failed.", "err");
+      }
+    } catch (err) {
+      setStatus(err && err.message ? err.message : "Dismiss request failed.", "err");
+    } finally {
+      busy(false);
+    }
+  }
+
+  // "Save to library": copy this staged proposal's already-stored graph into the reusable library
+  // (issue #523, save-from-digest → source `from-staged`). Prompt the operator for the entry name
+  // (defaulting to the proposal title — its slug/short-hash derive the library id, so re-saving the
+  // same name upserts), then POST { name, digest } to the save door. This persists a library entry
+  // only — it never dispatches or re-stages, so the operator boundary the staged view enforces (#460)
+  // is untouched.
+  async function doSaveToLibrary(digest, defaultName) {
+    const staged = typeof digest === "string" ? digest.trim() : "";
+    if (staged === "") return;
+    let name = defaultName ? String(defaultName) : "";
+    if (typeof window !== "undefined" && typeof window.prompt === "function") {
+      const entered = window.prompt("Save to library as (name):", name);
+      if (entered === null) return; // operator cancelled
+      name = entered;
+    }
+    if (name.trim() === "") {
+      setStatus("A library entry needs a non-blank name.", "err");
+      return;
+    }
+    busy(true);
+    setStatus("Saving to library…");
+    try {
+      const { status, body } = await post(saveLibraryUrl, { name: name.trim(), digest: staged });
+      if (status === 200 && body.ok) {
+        setStatus("\u2713 Saved to the library \u2014 reuse it from the Library view.", "ok");
+      } else {
+        setStatus(body && body.error ? body.error : "Save to library failed.", "err");
+      }
+    } catch (err) {
+      setStatus(err && err.message ? err.message : "Save-to-library request failed.", "err");
+    } finally {
+      busy(false);
+    }
+  }
+
   listEl.addEventListener("click", (ev) => {
     const previewBtn = ev.target && ev.target.closest ? ev.target.closest("[data-preview-di]") : null;
     if (previewBtn) {
@@ -265,6 +368,18 @@ export function mountStagedProposals(host, config = {}) {
     if (dispatchBtn) {
       ev.preventDefault();
       doDispatch(dispatchBtn.getAttribute("data-dispatch"));
+      return;
+    }
+    const saveLibraryBtn = ev.target && ev.target.closest ? ev.target.closest("[data-save-library]") : null;
+    if (saveLibraryBtn) {
+      ev.preventDefault();
+      doSaveToLibrary(saveLibraryBtn.getAttribute("data-save-library"), saveLibraryBtn.getAttribute("data-title"));
+      return;
+    }
+    const dismissBtn = ev.target && ev.target.closest ? ev.target.closest("[data-dismiss]") : null;
+    if (dismissBtn) {
+      ev.preventDefault();
+      doDismiss(dismissBtn.getAttribute("data-dismiss"));
     }
   });
 

package/pages/delivery-graphs/standalone.html

@@ -13,7 +13,7 @@
     <!--
       Standalone shell (phone / direct link). Loads the SAME ./mount.js the console App-View embed uses,
       so the standalone and embedded views render identically. Endpoints default to the current origin;
-      override the preview/dispatch endpoints via ?preview= / ?dispatch=. For a secured deployment, pass
+      override the preview/stage/import endpoints via ?preview= / ?stage= / ?import=. For a secured deployment, pass
       the guard secret via the URL fragment #secret= (sent as x-hook-secret) — NOT the query string, so
       it never leaks via server access logs, browser history, or the Referer header. The fragment is
       stripped from the address bar immediately after it is read.
@@ -31,6 +31,7 @@
       mountDeliveryGraphs(document.getElementById("delivery-graphs-root"), {
         previewUrl: params.get("preview") ?? undefined,
         stageUrl: params.get("stage") ?? undefined,
+        importUrl: params.get("import") ?? undefined,
         hookSecret,
       });
     </script>

package/pages/delivery-graphs.page.json

@@ -94,6 +94,16 @@
         "fill": true
       }
     },
+    {
+      "type": "appView",
+      "id": "delivery-graphs-library",
+      "props": {
+        "title": "Library",
+        "embed": "./delivery-graphs/library-embed.html",
+        "standalone": "./delivery-graphs/library-standalone.html",
+        "fill": true
+      }
+    },
     {
       "type": "dataGrid",
       "id": "delivery-graphs-inflight",
@@ -120,10 +130,12 @@
         "columns": [
           { "field": "title", "template": "{{title}}", "header": "Graph", "subtitleField": "run_key", "truncate": true, "width": "28%", "link": { "kind": "page", "page": "delivery-graph-detail", "keyField": "run_key" } },
           { "field": "status", "header": "Status", "link": { "kind": "processExplorer", "keyField": "process_key" } },
+          { "field": "process_key", "header": "Instance", "width": "9rem", "truncate": true, "link": { "kind": "processExplorer", "keyField": "process_key" } },
           { "field": "phase", "header": "Phase", "truncate": true, "width": "26%" },
           { "field": "node_count", "header": "Nodes" },
           { "field": "human_node_count", "header": "Human" },
           { "field": "side_effect_count", "header": "Side effects" },
+          { "field": "created_at", "header": "Dispatched", "width": "9rem", "format": "datetime" },
           { "field": "updated_at", "header": "Updated", "width": "9rem", "format": "datetime" }
         ],
         "detail": {
@@ -132,7 +144,18 @@
             { "field": "digest", "label": "Digest" },
             { "field": "phase_node_id", "label": "Parked node" }
           ]
-        }
+        },
+        "rowActions": [
+          {
+            "label": "Save to library",
+            "confirm": "Save this dispatched delivery graph to the reusable library? Its stored graph is copied into the Library (source: from-dispatched) so it can be reused later.",
+            "showWhenField": "title",
+            "action": {
+              "path": "/app/api/actions/delivery-graph/library/save",
+              "body": { "name": "{{row.title}}", "digest": "{{row.digest}}" }
+            }
+          }
+        ]
       }
     }
   ]

package/scripts/pages-contract.test.ts

@@ -407,3 +407,53 @@ test("issue #386: the human-facing Delivery Graphs surface is wired (nav tab, pa
     "overview delivery-graphs section must link its item to delivery-graph-detail by run_key",
   );
 });
+
+test("issue #521: the Delivery Graphs History tab surfaces dispatch time + the instance key", async () => {
+  // The in-flight grid's History tab (`delivery-graphs-inflight`) is where a completed/failed run is
+  // reviewed after the fact. It must surface WHEN the run was dispatched (`created_at`, stamped at
+  // dispatch) and its engine instance key (`process_key`) as a first-class, Explorer-linked cell —
+  // not just the `updated_at` last-touch. Grid columns are shared across the In-flight/History/All
+  // tabs (the renderer has no per-tab column override — tabs carry only `label`+`filter`), so pinning
+  // the columns on the grid that owns the History tab is what surfaces them on History.
+  const page = JSON.parse(readFileSync(`${ROOT}pages/delivery-graphs.page.json`, "utf8"));
+  const grid = (page.nodes ?? []).find(
+    (n: Json) => n.type === "dataGrid" && n.id === "delivery-graphs-inflight",
+  );
+  assert(grid, "delivery-graphs page must have the `delivery-graphs-inflight` grid");
+
+  // The History tab must exist (this is the tab whose columns we are pinning).
+  const history = (grid.props?.tabs ?? []).find((t: Json) => t.label === "History");
+  assert(history, "the delivery-graphs-inflight grid must have a History tab");
+
+  const columns: Json[] = grid.props?.columns ?? [];
+
+  // Dispatched: the dispatch time, formatted as a datetime, distinct from the `updated_at` "Updated".
+  const dispatched = columns.find((c: Json) => c.field === "created_at");
+  assert(dispatched, "History tab must expose a `created_at` column (dispatch time)");
+  assert(
+    dispatched.header === "Dispatched",
+    "the `created_at` column must be headed \"Dispatched\"",
+  );
+  assert(
+    dispatched.format === "datetime",
+    "the `created_at` (Dispatched) column must be formatted as a datetime",
+  );
+
+  // Instance: an explicit cell carrying `process_key`, deep-linked to the Explorer via the same
+  // `processExplorer` link kind used by the Status column, keyed on `process_key`.
+  const instance = columns.find(
+    (c: Json) => c.field === "process_key" && c.link?.kind === "processExplorer",
+  );
+  assert(
+    instance,
+    "History tab must expose an explicit Instance cell on `process_key` with a processExplorer link",
+  );
+  assert(
+    instance.header === "Instance",
+    "the `process_key` cell must be headed \"Instance\"",
+  );
+  assert(
+    instance.link?.keyField === "process_key",
+    "the Instance cell's processExplorer link must key on `process_key`",
+  );
+});

package/test/delivery-graphs-embed.test.ts

@@ -6,12 +6,13 @@
 // Stage are SEPARATE operator actions (#516): Preview compiles without persisting; Stage persists a
 // proposal. Dispatch is deliberately NOT in this view (issue #460): it is an OPERATOR row-action on the
 // Staged proposals grid on the same page. This test pins the wiring so it can't silently regress: the
-// sidecars exist, mount.js hits the preview + stage doors with base-relative defaults (the #279
-// App-View resolution class — a leading-slash path 404s), it renders each preview facet, its compose
-// panel is collapsible, and it exposes NO dispatch/approval affordance (the self-approval hole #460
-// closes).
+// sidecars exist, mount.js hits the preview + stage doors with MODULE-ANCHORED defaults (`new
+// URL("../app/api/…", import.meta.url)`, the #467 App-View resolution class — this module is served one
+// dir deep under `/delivery-graphs/`, so a document-base-relative or leading-slash default 404s; see
+// test/delivery-graphs-staged-embed.test.ts and #536), it renders each preview facet, its compose panel
+// is collapsible, and it exposes NO dispatch/approval affordance (the self-approval hole #460 closes).
 import { test } from "node:test";
-import { assert } from "#test-assert";
+import { assert, assertEquals } from "#test-assert";
 import { readFileSync } from "node:fs";
 import { parseAndCompileText } from "../app/deliveryGraphTextIngress.ts";
 import { EXAMPLE_GRAPH } from "../pages/delivery-graphs/mount.js";
@@ -24,15 +25,41 @@ const STANDALONE_HTML = readFileSync(`${DIR}/standalone.html`, "utf8");
 const CSS = readFileSync(`${DIR}/delivery-graphs.css`, "utf8");
 const PAGE_JSON = readFileSync(`${ROOT}pages/delivery-graphs.page.json`, "utf8");
 
-// Pull the string default out of `const <name> = config.<name> ?? <CONST>;` (a module const).
-function defaultUrl(name: string): string {
+// The REAL served location of mount.js on each surface: one directory deep under `/delivery-graphs/`.
+const STANDALONE_MOUNT = "http://127.0.0.1:3000/delivery-graphs/mount.js";
+const STUDIO_MOUNT = "http://studio-host:8080/console/app-view/Workforce/delivery-graphs/mount.js";
+
+// Pull the module-anchored default spec out of `const <name> = config.<field> ?? <CONST>;` where the
+// CONST is declared `const <CONST> = new URL("<spec>", import.meta.url).href;`.
+function defaultSpec(name: string): string {
   const m = MOUNT_JS.match(new RegExp(`${name}\\s*=\\s*config\\.\\w+\\s*\\?\\?\\s*(\\w+);`));
   assert(m, `mount.js must default ${name} from config with a fallback constant`);
-  const constM = MOUNT_JS.match(new RegExp(`const ${m![1]}\\s*=\\s*"([^"]*)"`));
-  assert(constM, `mount.js must declare the ${m![1]} fallback as a string literal`);
+  const constM = MOUNT_JS.match(
+    new RegExp(`const ${m![1]}\\s*=\\s*new URL\\(\\s*"([^"]*)"\\s*,\\s*import\\.meta\\.url\\s*\\)\\s*\\.href`),
+  );
+  assert(
+    constM,
+    `mount.js must default ${m![1]} to new URL("<spec>", import.meta.url) so the door is anchored to the ` +
+      `module's own served location, not the document base (#467/#536)`,
+  );
   return constM![1];
 }
 
+// A module-anchored door default must (a) not be absolute (#279), (b) step up out of /delivery-graphs/
+// (#467), and (c) resolve onto <appMount>/app/api/… both standalone AND inside the Studio iframe.
+function assertModuleAnchored(name: string, endpoint: string): void {
+  const spec = defaultSpec(name);
+  assert(!spec.startsWith("/"), `default ${name} spec "${spec}" must not be absolute (resolves against console origin, #279)`);
+  assert(spec.startsWith("../"), `default ${name} spec "${spec}" must step up out of /delivery-graphs/ (#467)`);
+  assert(spec.endsWith(endpoint), `default ${name} spec "${spec}" must hit the ${endpoint} door`);
+  assertEquals(new URL(spec, STANDALONE_MOUNT).href, `http://127.0.0.1:3000/${endpoint}`, `default ${name} must resolve to the app root (#467)`);
+  assertEquals(
+    new URL(spec, STUDIO_MOUNT).href,
+    `http://studio-host:8080/console/app-view/Workforce/${endpoint}`,
+    `default ${name} must resolve under the app-view base, not the console origin (#279) nor the /delivery-graphs/ base (#467/#536)`,
+  );
+}
+
 test("#441: the delivery-graphs App View mounts the same module standalone and embedded", () => {
   assert(/mountDeliveryGraphs/.test(MOUNT_JS), "mount.js must export mountDeliveryGraphs");
   for (const [file, html] of [["embed.html", EMBED_HTML], ["standalone.html", STANDALONE_HTML]] as const) {
@@ -41,13 +68,9 @@ test("#441: the delivery-graphs App View mounts the same module standalone and e
   }
 });
 
-test("#516: mount.js wires SEPARATE preview and stage doors (base-relative)", () => {
-  const previewUrl = defaultUrl("previewUrl");
-  assert(previewUrl.endsWith("actions/delivery-graph/preview"), `previewUrl default "${previewUrl}" must hit the previewDeliveryGraph door`);
-  assert(!previewUrl.startsWith("/"), `default previewUrl "${previewUrl}" must be base-relative (App-View #279 resolution class)`);
-  const stageUrl = defaultUrl("stageUrl");
-  assert(stageUrl.endsWith("actions/delivery-graph/stage"), `stageUrl default "${stageUrl}" must hit the stageDeliveryGraph door`);
-  assert(!stageUrl.startsWith("/"), `default stageUrl "${stageUrl}" must be base-relative (App-View #279 resolution class)`);
+test("#516/#467: mount.js wires SEPARATE preview and stage doors, module-anchored to the app root", () => {
+  assertModuleAnchored("previewUrl", "app/api/actions/delivery-graph/preview");
+  assertModuleAnchored("stageUrl", "app/api/actions/delivery-graph/stage");
   // Preview and Stage are distinct buttons wired to distinct actions.
   assert(/id="dg-preview"/.test(MOUNT_JS) && /id="dg-stage"/.test(MOUNT_JS), "mount.js must render distinct Preview and Stage buttons");
   assert(/submit\(previewUrl,\s*false\)/.test(MOUNT_JS), "the Preview button must submit to the preview door WITHOUT staging");

package/test/delivery-graphs-import.test.ts

@@ -0,0 +1,110 @@
+// Contract guard for the filesystem IMPORT wiring on the Delivery Graphs compose App-View (issue #524,
+// epic #519 S5). The Import control is ADDED into the PRE-EXISTING compose mount (pages/delivery-graphs/
+// mount.js — the one #523 reshaped), alongside #523's inbound reuse-fill seam. It must: render an
+// `<input type=file accept=.json>`, read the picked file's text client-side, POST it to the
+// importToLibrary door (module-anchored relative spec, App-View #279 + #467/#536 resolution class), route a successful import back
+// through #523's SINGLE `fillComposer()` seam (no second inbound fill path), and render path-qualified
+// compile errors inline on a 400. This test pins that wiring so it can't silently regress.
+import { test } from "node:test";
+import { assert } from "#test-assert";
+import { readFileSync } from "node:fs";
+
+const ROOT = decodeURIComponent(new URL("../", import.meta.url).pathname);
+const DIR = `${ROOT}pages/delivery-graphs`;
+const MOUNT_JS = readFileSync(`${DIR}/mount.js`, "utf8");
+const CSS = readFileSync(`${DIR}/delivery-graphs.css`, "utf8");
+const EMBED_HTML = readFileSync(`${DIR}/embed.html`, "utf8");
+const STANDALONE_HTML = readFileSync(`${DIR}/standalone.html`, "utf8");
+
+// Pull the module-anchored default URL *spec* (the "<spec>" literal inside
+// `new URL("<spec>", import.meta.url)`, e.g. "../app/api/…") out of
+// `const <name> = config.<name> ?? <CONST>;` where the CONST is declared
+// `const <CONST> = new URL("<spec>", import.meta.url).href;`. This is the unresolved
+// relative spec, not a resolved URL string — hence `Spec`, not `Url`.
+function defaultSpec(name: string): string {
+  const m = MOUNT_JS.match(new RegExp(`${name}\\s*=\\s*config\\.\\w+\\s*\\?\\?\\s*(\\w+);`));
+  assert(m, `mount.js must default ${name} from config with a fallback constant`);
+  const constM = MOUNT_JS.match(
+    new RegExp(`const ${m![1]}\\s*=\\s*new URL\\(\\s*"([^"]*)"\\s*,\\s*import\\.meta\\.url\\s*\\)\\s*\\.href`),
+  );
+  assert(
+    constM,
+    `mount.js must default ${m![1]} to new URL("<spec>", import.meta.url) so the door is anchored ` +
+      `to the module's own served location, not the document base (#467/#536)`,
+  );
+  return constM![1];
+}
+
+test("#524: the compose mount renders a file-input Import control accepting .json", () => {
+  assert(/id="dg-import"/.test(MOUNT_JS), "mount.js must render an Import file input with id=dg-import");
+  assert(/type="file"/.test(MOUNT_JS), "the Import control must be an <input type=file>");
+  assert(/accept="[^"]*\.json[^"]*"/.test(MOUNT_JS), "the Import file input must accept .json files");
+});
+
+test("#524: Import wires the importToLibrary door (module-anchored relative), reading the file text client-side", () => {
+  const importSpec = defaultSpec("importUrl");
+  assert(
+    importSpec.endsWith("actions/delivery-graph/library/import"),
+    `importUrl default spec "${importSpec}" must hit the importToLibrary door`,
+  );
+  assert(!importSpec.startsWith("/"), `default importUrl spec "${importSpec}" must be relative, not absolute (App-View #279 + #467/#536 resolution class)`);
+  // Pin the MODULE-anchored invariant, not merely "not absolute": the spec must step UP out of the
+  // /delivery-graphs/ shell base with "../" (resolved against import.meta.url), so a regression back to a
+  // document-base-relative "app/api/…" — which 404s under the shell base (#467/#536) — fails the guard.
+  assert(
+    importSpec.startsWith("../"),
+    `default importUrl spec "${importSpec}" must be module-anchored with a "../" prefix (steps out of the ` +
+      `/delivery-graphs/ shell base off import.meta.url), not document-base-relative (#467/#536)`,
+  );
+  // The file's text is read CLIENT-SIDE and POSTed as graphJson to the import door.
+  assert(/\.text\(\)/.test(MOUNT_JS), "mount.js must read the selected file's text client-side via File.text()");
+  assert(/post\(importUrl,\s*\{\s*graphJson:/.test(MOUNT_JS), "the Import handler must POST the file text as graphJson to the import door");
+  // The <input> must actually be WIRED to the handler: without a change listener that invokes
+  // importFile(), the door + handler could stay intact while Import is inert (every other assertion
+  // here still green). Pin the change→importFile wiring so removing the listener fails the suite.
+  assert(
+    /addEventListener\(\s*["']change["'][\s\S]{0,200}?importFile\(/.test(MOUNT_JS),
+    "the Import file input's change listener must invoke importFile() so picking a file triggers an import",
+  );
+});
+
+test("#524: a successful import routes through #523's single fillComposer() seam", () => {
+  // #523 owns the inbound fill seam; #524 builds on it rather than adding a second inbound fill path.
+  assert(/function fillComposer\(/.test(MOUNT_JS), "the #523 fillComposer() seam must still be present");
+  const importHandler = MOUNT_JS.slice(MOUNT_JS.indexOf("async function importFile"));
+  assert(importHandler.length > 0, "mount.js must define the importFile handler");
+  assert(/fillComposer\(text\b/.test(importHandler), "a successful import must route the imported text through the fillComposer() seam");
+});
+
+test("#524: an import failure renders the door's path-qualified compile errors inline", () => {
+  const importHandler = MOUNT_JS.slice(MOUNT_JS.indexOf("async function importFile"));
+  assert(
+    /renderErrors\(body\.error,\s*body\.errors\)/.test(importHandler),
+    "an import 400 must render the door's path-qualified errors inline",
+  );
+});
+
+test("#524: both shells forward importUrl into the mount (embed via cfg, standalone via ?import=)", () => {
+  // The mount resolves `config.importUrl ?? DEFAULT_IMPORT_URL`, so the default-URL guard above passes
+  // even if a shell drops the `importUrl` forwarding entirely — silently breaking embedded custom
+  // deployments and the standalone `?import=` override. Pin BOTH forwardings, exactly as the shells
+  // already forward previewUrl/stageUrl.
+  assert(
+    /importUrl:\s*cfg\.importUrl/.test(EMBED_HTML),
+    "embed.html must forward the console-injected importUrl (importUrl: cfg.importUrl) into the mount",
+  );
+  assert(
+    /importUrl:\s*params\.get\("import"\)/.test(STANDALONE_HTML),
+    "standalone.html must forward the ?import= override (importUrl: params.get(\"import\")) into the mount",
+  );
+  // mount.js must actually read config.importUrl (not hard-code the default), so the forwarding matters.
+  assert(
+    /const importUrl\s*=\s*config\.importUrl\s*\?\?/.test(MOUNT_JS),
+    "mount.js must resolve importUrl from config.importUrl with a fallback default",
+  );
+});
+
+test("#524: the native file input is visually hidden and the label reads as a button", () => {
+  assert(/\.dg-import-input/.test(CSS), "the CSS must style the Import file input");
+  assert(/clip:\s*rect\(0,\s*0,\s*0,\s*0\)/.test(CSS), "the native file input must be visually hidden (the label is the button)");
+});