@intentius/behold 0.25.0 → 0.27.0

package/example-choudoufu-estate/chant.workspace.json

@@ -4,7 +4,7 @@
   "pins": [
     {
       "package": "@intentius/chant-lexicon-terraform",
-      "version": "0.121.0"
+      "version": "0.124.0"
     }
   ],
   "members": [

package/example-terraform-estate/README.md

@@ -90,7 +90,7 @@ install them, so that every user who serves an ordinary chant project does not
 carry an HCL parser they will never run:
 
 ```sh
-npm install --no-save @intentius/chant-lexicon-terraform@^0.121.0 @cdktn/hcl2json@^0.24.0
+npm install --no-save @intentius/chant-lexicon-terraform@^0.124.0 @cdktn/hcl2json@^0.24.0
 ```
 
 Without them the demo refuses before it serves, naming both packages, the
@@ -101,7 +101,7 @@ the packages `chant.workspace.json` pins, looked up from the workspace's own
 `node_modules` at exactly the pinned version. A demo copy has no
 `node_modules`, so `behold demo` links the lexicon behold resolved into the
 copy and sets the copy's pin to that version (#484). It says so as it loads:
-`linked @intentius/chant-lexicon-terraform 0.121.0 into the copy`. Serving
+`linked @intentius/chant-lexicon-terraform 0.124.0 into the copy`. Serving
 your own declared workspace is different: install the pinned lexicon in its
 root, the way `chant workspace check` asks.
 

package/example-terraform-estate/chant.workspace.json

@@ -4,7 +4,7 @@
   "pins": [
     {
       "package": "@intentius/chant-lexicon-terraform",
-      "version": "0.121.0"
+      "version": "0.124.0"
     }
   ],
   "members": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "license": "Apache-2.0",
   "type": "module",
   "description": "behold — a live control plane on chant. See your whole estate (every substrate in one graph), coloured by drift; act through delegated, gated Ops.",
@@ -41,14 +41,14 @@
   },
   "dependencies": {
     "@hono/node-server": "^2.0.5",
-    "@intentius/chant": "^0.121.1",
-    "@intentius/chant-k8s-client": "^0.121.1",
-    "@intentius/pinhole": "^0.3.8",
+    "@intentius/chant": "^0.124.20",
+    "@intentius/chant-k8s-client": "^0.124.20",
+    "@intentius/pinhole": "^0.4.0",
     "ajv": "^8.20.0",
     "hono": "^4.12.34"
   },
   "peerDependencies": {
-    "@intentius/chant-lexicon-terraform": "^0.121.0",
+    "@intentius/chant-lexicon-terraform": "^0.124.0",
     "@cdktn/hcl2json": "^0.24.0"
   },
   "peerDependenciesMeta": {
@@ -60,6 +60,7 @@
     }
   },
   "devDependencies": {
+    "@intentius/chant-lexicon-sql": "^0.124.13",
     "@types/node": "^26.4.1",
     "esbuild": "^0.28.0",
     "playwright": "^1.62.1",

package/web/app.js

@@ -13,11 +13,15 @@ import { readViewQuery, writeViewQuery, settleView, settlePlace, refusalLine } f
 import { readEmbed, selectMessage, viewFromMessage } from "./embed.js";
 import { gateCards } from "./workspace-gates.js";
 import { cornerOf, estateLine, hrefOf as tgHref, legend as tgLegend, markLine, rootRows as tgRootRows, waveCards } from "./terragucci.js";
-import { laneElement as tgLane, rootOfCard as tgRootOfCard } from "./terragucci-timeline.js";
+import { laneElement as tgLane, rootOfCard as tgRootOfCard, historyElement as tgHistoryLane } from "./terragucci-timeline.js";
 import { renderLane } from "./terragucci-lifecycle.js";
+import { renderReleases } from "./releases.js";
+import { renderYodelLane } from "./sql-yodeler-lane.js";
 import { initTerragucciEstate } from "./terragucci-estate.js";
+import { auditLines as yrAuditLines, cornerText as yrCorner, datedWords as yrDated, environmentLines as yrEnvLines, joinMarks as yrJoin, legend as yrLegend, markLine as yrMarkLine } from "./yodel-report.js";
 import { cardProgress as tgCardProgress, progressLines as tgProgressLines, progressSection as tgProgressSection, stampProgress as tgStampProgress } from "./terragucci-progress.js";
 import { seconds, whyQuery, whyView } from "./why.js";
+import { edgeLabel, edgeLegend, edgeTitle, isCiKind } from "./edge-kind.js";
 import { readCostLine } from "./read-cost.js";
 import { mountHistoryPicker } from "./history-picker.js";
 import { applyMemberFrame, pendingLine, stillPending } from "./pending.js";
@@ -94,6 +98,7 @@ import { hasOperator, renderOperator, APPROVED_SEMANTICS } from "./operator.js";
 // which commit, approved by whom — and, when the ledger's run id cannot be
 // followed, the reason in words rather than a guessed link.
 import { releaseRows } from "./release.js";
+import { danglingFor, danglingRows, danglingHeading, DANGLING_EXPLAINED } from "./dangling.js";
 import { comparisonRow, comparisonSummary } from "./cross-env.js";
 initTheme();
 // #476: framed in a host pane. The flag is a class on <html>, so the CSS that
@@ -908,6 +913,21 @@ function inspect(node) {
       panel.appendChild(p);
     }
   }
+  // #526: SQL Yodeler's drift on this card, each dated by its file.
+  const yrMarks = yrJoined && yrJoined.cards[node.id];
+  if (yrMarks && yrMarks.length) {
+    const h = document.createElement("h3");
+    h.textContent = "SQL Yodeler drift (from files, not live)";
+    panel.appendChild(h);
+    const now = new Date();
+    for (const m of yrMarks) {
+      const p = document.createElement("p");
+      p.className = "tg-inspect";
+      p.textContent = yrMarkLine(m, now);
+      p.title = m.changes.map((c) => `${c.path || ""} ${c.kind || ""}: declared ${JSON.stringify(c.declared ?? null)}, live ${JSON.stringify(c.live ?? null)}`).join("\n");
+      panel.appendChild(p);
+    }
+  }
   // #511: the newest apply's progress on this card, dated by the records read.
   const tgProg = tgCardProgress(tgProgress && tgProgress.cards && tgProgress.cards[node.id]);
   if (tgProg) {
@@ -1142,6 +1162,19 @@ function inspect(node) {
     }
   }
 
+  // #554: references from this card to a target the project does not declare
+  // (chant#3912's `ir.dangling`), with the value as written. No edge is drawn
+  // for any of them, so this is the one place they show.
+  const dangling = danglingFor(lastGraphIr, node.id);
+  if (dangling.length) {
+    const row = section(danglingHeading(dangling));
+    for (const [k, v] of danglingRows(dangling)) row(k, v);
+    const p = document.createElement("p");
+    p.style.color = "var(--muted)";
+    p.textContent = DANGLING_EXPLAINED;
+    panel.appendChild(p);
+  }
+
   // CI projection facet (M1.2, #56/#58): loomster's GitLab CI is the SAME
   // component DAG projected — waves = stages, components = jobs, `dependsOn` =
   // `needs:`. Read one way it's the deployment, read the other it's the
@@ -2815,10 +2848,47 @@ function renderPanelModel() {
       host.appendChild(actButton("→ Scope", () => setPanelTab("scope")));
     }
   }
+  renderEdgeLegend(host, ir);
   renderBehaviourRefusal(host);
   renderBehaviourDiagnostics(host);
 }
 
+// #553: the CI edge kinds this graph draws, each with a stroke drawn by the
+// same rules as the graph's own edges (index.html matches `.edge-swatch` beside
+// `#graph`), so the legend changes with the theme. Nothing on a graph that
+// holds only references.
+function renderEdgeLegend(host, ir) {
+  const rows = edgeLegend(ir.edges || []);
+  if (!rows.length) return;
+  host.appendChild(panelHeading("edges"));
+  for (const r of rows) {
+    const row = document.createElement("div");
+    row.className = "count-row";
+    row.title = r.title;
+    const svg = document.createElementNS(SVGNS, "svg");
+    svg.setAttribute("class", "edge-swatch");
+    svg.setAttribute("viewBox", "0 0 28 10");
+    svg.setAttribute("width", "28");
+    svg.setAttribute("height", "10");
+    const g = document.createElementNS(SVGNS, "g");
+    if (r.kind) g.setAttribute("data-edge-kind", r.kind);
+    if (r.cross) g.setAttribute("data-edge-cross", "true");
+    const line = document.createElementNS(SVGNS, "path");
+    line.setAttribute("class", "pin-edge-line");
+    line.setAttribute("d", "M 1 5 L 27 5");
+    g.appendChild(line);
+    svg.appendChild(g);
+    const name = document.createElement("span");
+    name.className = "grow";
+    name.textContent = r.label;
+    const t = document.createElement("span");
+    t.className = "tag";
+    t.textContent = String(r.count);
+    row.append(svg, name, t);
+    host.appendChild(row);
+  }
+}
+
 /**
  * The refusal, where the legend would be (#401).
  *
@@ -3250,6 +3320,7 @@ function markDriftedCards(ir) {
 let tgAnswer = null;
 let tgHost = null;
 let tgTimeline = null; // #506: /api/terragucci/timeline, the audit record's lane
+let tgHistory = null; // #522: /api/lifecycle/history, the gate ledgers' history
 async function initTerragucci() {
   const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
   if (!project.terragucciReports) return;
@@ -3299,6 +3370,10 @@ async function loadTerragucci({ fresh = false } = {}) {
   tgTimeline = await apiFetch(`/api/terragucci/timeline${fresh ? "?fresh=1" : ""}`)
     .then((r) => r.json())
     .catch((e) => ({ error: String(e), code: "terragucci-report", remedy: "" }));
+  // #522: the gate ledgers' history, with or in place of the audit record.
+  tgHistory = await apiFetch(`/api/lifecycle/history${fresh ? "?fresh=1" : ""}`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
   renderTerragucciPanel();
   markTerragucciCards();
   if (!staticMode) await loadTgProgress({ fresh });
@@ -3456,11 +3531,16 @@ function renderTerragucciPanel() {
     ].filter(Boolean).join(" · ");
     host.appendChild(um);
   }
-  if (tgTimeline) {
+  if (tgTimeline || tgHistory) {
     const h = document.createElement("div");
     h.className = "tg-timeline-title";
     h.textContent = "Timeline";
-    host.append(h, tgLane(tgTimeline));
+    host.append(h);
+    // #522: the audit record, and the ledger's history beside it, each
+    // labelled by its source. Without an audit.jsonl the record's lane is its
+    // one "has no audit.jsonl" sentence and the ledger carries the history.
+    if (tgTimeline) host.append(tgLane(tgTimeline));
+    if (tgHistory) host.append(tgHistoryLane(tgHistory));
   }
   if (!staticMode) {
     const again = button("Read the reports again", "", () => {
@@ -3471,6 +3551,188 @@ function renderTerragucciPanel() {
   }
 }
 initTerragucci();
+// #525: each environment's newest release from the release ledger on
+// chant/lifecycle, with a cell whose schema the environment before it does
+// not hold marked. Dated and read-only; a static export carries its snapshot.
+let relHost = null;
+async function initReleases() {
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.releaseLedger) return;
+  await loadReleases();
+}
+async function loadReleases({ fresh = false } = {}) {
+  const a = await apiFetch(`/api/lifecycle/releases${fresh ? "?fresh=1" : ""}`)
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e) }));
+  if (!relHost) {
+    relHost = addPanelTab("releases", "Releases", "Each environment's newest release from the release ledger on chant/lifecycle, dated. Not live.");
+    if (!relHost) return;
+    relHost.id = "tab-releases";
+  }
+  renderReleases(relHost, a, new Date(), { link: tgLink });
+  if (!staticMode) {
+    const again = button("Read again", "", () => loadReleases({ fresh: true }));
+    again.title = "Read chant/lifecycle again and redraw.";
+    relHost.appendChild(again);
+  }
+}
+initReleases();
+
+
+// --- #526: SQL Yodeler's report and drift, from files ------------------------
+// /api/yodel-report reads `yodel report --json` and drift JSON the person or
+// their pipeline wrote, checked against SQL Yodeler's schemas. Drift marks are
+// dated corner tags on the cards they name; environments and gaps go in the
+// panel. Nothing is live, and behold never runs yodel.
+let yrAnswer = null;
+let yrJoined = null;
+let yrHost = null;
+async function initYodelReport() {
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.yodelReport) return;
+  await loadYodelReport();
+}
+async function loadYodelReport() {
+  yrAnswer = await apiFetch("/api/yodel-report")
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e), code: "yodel-report", remedy: "" }));
+  markYodelCards();
+}
+function markYodelCards() {
+  if (!yrAnswer) return;
+  const svg = document.querySelector("#graph svg");
+  if (svg) {
+    for (const old of svg.querySelectorAll("[data-yr-mark]")) old.remove();
+    const ids = [...svg.querySelectorAll("[data-node-id]")].map((g) => g.getAttribute("data-node-id"));
+    yrJoined = yrAnswer.error ? null : yrJoin(yrAnswer, ids);
+    const now = new Date();
+    for (const [id, marks] of Object.entries(yrJoined ? yrJoined.cards : {})) {
+      const g = svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]');
+      if (!g) continue;
+      const rect = g.querySelector("rect");
+      const box = rect && rect.getBBox ? rect.getBBox() : null;
+      const tag = document.createElementNS("http://www.w3.org/2000/svg", "text");
+      tag.setAttribute("data-yr-mark", "1");
+      tag.setAttribute("x", String((box ? box.x + box.width : 150) - 10));
+      tag.setAttribute("y", String((box ? box.y : 0) + 14));
+      tag.setAttribute("text-anchor", "end");
+      tag.setAttribute("font-size", "11");
+      tag.setAttribute("font-weight", "600");
+      tag.setAttribute("fill", "var(--degraded)");
+      tag.textContent = yrCorner(marks, now);
+      const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+      title.setAttribute("data-yr-mark", "title");
+      title.textContent = marks.map((m) => yrMarkLine(m, now)).join("\n") + "\n(from SQL Yodeler drift files, not live)";
+      g.append(title, tag);
+    }
+  }
+  renderYodelPanel();
+}
+function renderYodelPanel() {
+  if (!yrHost) {
+    yrHost = addPanelTab("yodel", "SQL Yodeler", "SQL Yodeler's report and drift, read from files: each environment's applied migrations and gaps, dated. Not live.");
+    if (!yrHost) return;
+    yrHost.id = "tab-yodel";
+  }
+  const host = yrHost;
+  host.replaceChildren();
+  const a = yrAnswer;
+  const line = (cls, text, title) => {
+    const d = document.createElement("div");
+    d.className = cls;
+    d.textContent = text;
+    if (title) d.title = title;
+    host.appendChild(d);
+    return d;
+  };
+  if (!a || a.error) {
+    line("tg-refusal", a ? `${a.code}: ${a.error}` : "SQL Yodeler report not read");
+    if (a && a.remedy) line("tg-legend", a.remedy);
+    return;
+  }
+  const now = new Date();
+  const lg = yrLegend(a, now);
+  line("tg-legend", lg.text, lg.title);
+  for (const e of a.environments) {
+    const h = document.createElement("h3");
+    h.textContent = e.op ? `${e.name} (op ${e.op.name}, gate ${e.op.gate})` : e.name;
+    host.appendChild(h);
+    for (const t of yrEnvLines(e, now)) line("tg-inspect", t);
+    line("tg-legend", `from ${yrDated(e.dated, now)}`);
+    drawAudit((a.audit || []).filter((x) => x.environment === e.name));
+  }
+  // #537: audit entries for an environment the report lists no row for.
+  const named = new Set(a.environments.map((e) => e.name));
+  const loose = (a.audit || []).filter((x) => !named.has(x.environment));
+  if (loose.length) {
+    const h = document.createElement("h3");
+    h.textContent = "audit, environments the report lists no row for";
+    host.appendChild(h);
+    drawAudit(loose, true);
+  }
+  function drawAudit(entries, withEnv = false) {
+    if (!entries.length) return;
+    const sub = document.createElement("div");
+    sub.className = "tg-legend";
+    sub.textContent = `audit, ${entries.length} entr${entries.length === 1 ? "y" : "ies"}, oldest first`;
+    host.appendChild(sub);
+    for (const x of entries) {
+      const l = yrAuditLines(x, now);
+      line("tg-inspect", withEnv ? `${x.environment}: ${l.text}` : l.text, l.source);
+      line("tg-legend", l.source);
+    }
+  }
+  for (const d of a.drift) {
+    const h = document.createElement("h3");
+    h.textContent = `${d.environment} drift`;
+    host.appendChild(h);
+    line("tg-inspect", d.drifted ? `${d.changed} changed, ${d.missing} missing` : "no drift in what could be read");
+    for (const u of d.unobserved) line("tg-inspect", `not read: ${u.name}${u.reason ? ` (${u.reason})` : ""}`);
+    line("tg-legend", `from ${yrDated(d.dated, now)}${d.server ? ` · ${d.server}` : ""}`);
+  }
+  const unmatched = (yrJoined && yrJoined.unmatched) || [];
+  if (unmatched.length) {
+    const h = document.createElement("h3");
+    h.textContent = "drift on no card";
+    host.appendChild(h);
+    for (const m of unmatched) line("tg-inspect", `${m.object}: ${yrMarkLine(m, now)}`);
+  }
+  if (a.ignored.length) line("tg-legend", `not read (neither a report nor drift): ${a.ignored.join(", ")}`);
+  if (!staticMode) host.appendChild(button("Read the files again", "", () => loadYodelReport()));
+}
+initYodelReport();
+
+// --- #524: a SQL Yodeler repo's lane over chant/lifecycle -------------------
+// /api/sql-yodeler/lifecycle: each environment's wave gate and migrations-op
+// gate, in the order of applies, with the approve line to copy. Below it,
+// the gate ledgers' history (#522). Read-only and dated; never live.
+let ylHost = null;
+async function initYodelLane() {
+  // #537: a static export carries the lane as a snapshot (src/export.ts), so it draws here too.
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.sqlYodeler) return;
+  await loadYodelLane();
+}
+async function loadYodelLane({ fresh = false } = {}) {
+  const q = fresh ? "?fresh=1" : "";
+  const [lane, history] = await Promise.all([
+    apiFetch(`/api/sql-yodeler/lifecycle${q}`).then((r) => r.json()).catch((e) => ({ error: String(e) })),
+    apiFetch(`/api/lifecycle/history${q}`).then((r) => (r.ok ? r.json() : null)).catch(() => null),
+  ]);
+  if (!ylHost) {
+    ylHost = addPanelTab("yodel-lane", "Pipeline", "SQL Yodeler's gates on chant/lifecycle: each environment's wave and migrations op, in the order of applies, dated. Not live.");
+    if (!ylHost) return;
+    ylHost.id = "tab-yodel-lane";
+  }
+  ylHost.replaceChildren();
+  renderYodelLane(ylHost, lane, new Date(), { button, copy: copyToClipboard, link: tgLink });
+  if (history) ylHost.appendChild(tgHistoryLane(history));
+  if (staticMode) return;
+  const again = button("Read again", "", () => loadYodelLane({ fresh: true }));
+  again.title = "Fetch chant/lifecycle again and redraw.";
+  ylHost.appendChild(again);
+}
+initYodelLane();
 // #509: a control repo draws its projects from estate.json and their run views.
 initTerragucciEstate({ fetchUrl: apiFetch, copy: copyToClipboard });
 
@@ -4162,24 +4424,42 @@ async function loadReconcile() {
   }
 }
 
+// #553: pinhole writes the IR edge's `viaAttr` on the chip ("uses",
+// "workflow_run"). A CI edge's chip says its kind instead, with the attribute
+// when it adds something ("calls (uses)"), as chant's Mermaid does. The pill
+// is re-sized around the new text with pinhole's own metrics (5.7 per
+// character plus 14), centred where pinhole centred it.
+function relabelEdgeChip(chip, kind, via) {
+  if (!isCiKind(kind)) return;
+  const text = chip.querySelector("text");
+  const rect = chip.querySelector("rect");
+  const label = edgeLabel({ kind, via });
+  if (!text || !label || text.textContent === label) return;
+  text.textContent = label;
+  if (!rect) return;
+  const cx = Number(text.getAttribute("x"));
+  const w = label.length * 5.7 + 14;
+  if (!Number.isFinite(cx)) return;
+  rect.setAttribute("width", w.toFixed(1));
+  rect.setAttribute("x", (cx - w / 2).toFixed(1));
+}
+
 // Edge hover-highlight (helps trace one edge through an overlapping bundle — see
 // index.html's `.pin-edge-line` rules). pinhole already paints a fat transparent
 // hit-path per edge, so the CSS `:hover` does the visual work; this adds two
 // things CSS can't: raise the hovered edge to the top of the paint order (SVG has
 // no z-index) so it's not buried, and light up every edge touching a hovered node
 // (the `.edge-hi` class) so hovering a card traces all its connections.
-// Human-readable "why does this edge exist" from the IR edge's `viaAttr`
-// (src/logical.ts tags them). Shown as a native SVG <title> tooltip on hover;
-// the value also drives a dashed style for data-dependency links (index.html).
-const EDGE_REASON = {
-  "security-group ingress": "security-group ingress — traffic is allowed here",
-  "data dependency": "data dependency — reads/uses this store",
-};
+// Human-readable "why does this edge exist" from the IR edge's `viaAttr` and,
+// for a CI edge (#553), its `kind` and `crossPipeline` (web/edge-kind.js says
+// them in words). Shown as a native SVG <title> tooltip on hover; the stamped
+// attributes also drive the dashed and per-kind styles (index.html).
 function wireEdgeHighlight(svgEl, ir) {
   const edges = [...svgEl.querySelectorAll("g[data-edge-from]")];
   if (!edges.length) return;
   // Reason per edge, keyed by from|to (and its reverse, since pinhole may paint
-  // an edge in either direction relative to the IR).
+  // an edge in either direction relative to the IR). pinhole stamps
+  // data-edge-via itself; this fills it in where it did not.
   const viaOf = new Map();
   for (const e of ir.edges || []) {
     if (!e.viaAttr) continue;
@@ -4189,10 +4469,13 @@ function wireEdgeHighlight(svgEl, ir) {
   for (const g of edges) {
     const from = g.getAttribute("data-edge-from");
     const to = g.getAttribute("data-edge-to");
-    const via = viaOf.get(`${from}|${to}`);
+    const via = g.getAttribute("data-edge-via") || viaOf.get(`${from}|${to}`);
     if (via) g.setAttribute("data-edge-via", via); // drives the dashed style
+    const kind = g.getAttribute("data-edge-kind") || "ref";
+    const cross = g.getAttribute("data-edge-cross") === "true";
+    if (!g.querySelector("path")) relabelEdgeChip(g, kind, via);
     const title = document.createElementNS(SVGNS, "title");
-    title.textContent = `${from} → ${to}${via ? "\n" + (EDGE_REASON[via] || via) : ""}`;
+    title.textContent = edgeTitle(from, to, { kind, via, cross });
     g.insertBefore(title, g.firstChild);
   }
   const raise = (g) => g.parentNode && g.parentNode.appendChild(g);
@@ -4379,6 +4662,7 @@ function render(ir, svg, m) {
   markDriftedCards(ir); // #404: same, for a bound card the plan would change — after the carve/operator stamps, so it can see and yield to them
   markPendingCards(ir); // #422: and the cards whose member has not answered yet
   markTerragucciCards(); // #490: and what terragucci's reports found, dated
+  markYodelCards(); // #526: and SQL Yodeler's drift, dated
   applyLayout(); // #228: last, so the hand-placed deltas ride on top of every other pass
   renderDial();
 }
@@ -6221,12 +6505,14 @@ async function initActions() {
   // them right now (`/api/project`'s executor block).
   executorInfo = project.executor || {};
   previewMode = staticMode || !!project.previewMode; // static ⇒ read-only, no writes at all
-  if (project.terragucci) {
-    terragucciRepo = project.terragucci;
+  // #517: a SQL Yodeler repo is guarded the same way.
+  const guarded = project.terragucci || project.sqlYodeler;
+  if (guarded) {
+    terragucciRepo = guarded;
     previewMode = true;
     const pill = document.createElement("span");
-    pill.textContent = "● applied by terragucci";
-    pill.title = `${project.terragucci.error}\n\n${project.terragucci.remedy}`;
+    pill.textContent = project.terragucci ? "● applied by terragucci" : "● migrated by SQL Yodeler";
+    pill.title = `${guarded.error}\n\n${guarded.remedy}`;
     pill.style.cssText = "align-self:center;font:var(--t-caption)/1.4 var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-ctl);padding:2px 8px";
     bar.appendChild(pill);
     return; // no Deploy, no Run, no Approve: the pipeline is the only way to apply

package/web/dangling.js

@@ -0,0 +1,29 @@
+// #554: a CI reference whose target this project does not declare, such as
+// another repository's reusable workflow or a local composite action. chant
+// keeps each one on `ir.dangling` (chant#3912) with the value as written, and
+// behold draws no edge for it, so the card holding it is where it is listed.
+// The pure half, tested without a DOM the way web/release.js is.
+
+/** The dangling references `nodeId` holds, in the order chant listed them. */
+export function danglingFor(ir, nodeId) {
+  const all = ir && Array.isArray(ir.dangling) ? ir.dangling : [];
+  return all.filter((d) => d && d.from === nodeId);
+}
+
+/** One `[label, value]` row per reference: the edge kind it would have been
+ * and where on the card it was written, then the value exactly as written. A
+ * reference that leaves the pipeline says so. */
+export function danglingRows(refs) {
+  return refs.map((d) => {
+    const label = d.path ? `${d.kind} · ${d.path}` : String(d.kind);
+    return [label, d.crossPipeline ? `${d.value} (cross-pipeline)` : String(d.value)];
+  });
+}
+
+/** The section heading, with the count. */
+export function danglingHeading(refs) {
+  return `not declared here · ${refs.length}`;
+}
+
+/** The line under the rows, saying why no edge is drawn for them. */
+export const DANGLING_EXPLAINED = "these targets are not declared in this project, so no edge is drawn to them";

package/web/dangling.test.js

@@ -0,0 +1,34 @@
+import { describe, it, expect } from "vitest";
+import { danglingFor, danglingRows, danglingHeading } from "../web/dangling.js";
+
+// #554: the shape chant 0.124.20 writes (chant#3912) for a job calling another
+// repo's reusable workflow and a step using a local composite action.
+const IR = {
+  nodes: [{ id: "build" }, { id: "release" }, { id: "ci" }],
+  edges: [],
+  dangling: [
+    { from: "build", kind: "calls", path: "steps.uses", value: "./.github/actions/setup" },
+    { from: "release", kind: "calls", path: "uses", value: "octo/shared/.github/workflows/release.yml@main", crossPipeline: true },
+  ],
+};
+
+describe("dangling references on a card (#554)", () => {
+  it("lists only the references the card holds", () => {
+    expect(danglingFor(IR, "build").map((d) => d.value)).toEqual(["./.github/actions/setup"]);
+    expect(danglingFor(IR, "ci")).toEqual([]);
+  });
+
+  it("is empty on an IR without the field, or with none", () => {
+    expect(danglingFor({ nodes: [], edges: [] }, "build")).toEqual([]);
+    expect(danglingFor(null, "build")).toEqual([]);
+  });
+
+  it("shows kind, path and the value as written, and marks a cross-pipeline one", () => {
+    expect(danglingRows(danglingFor(IR, "build"))).toEqual([["calls · steps.uses", "./.github/actions/setup"]]);
+    expect(danglingRows(danglingFor(IR, "release"))).toEqual([["calls · uses", "octo/shared/.github/workflows/release.yml@main (cross-pipeline)"]]);
+  });
+
+  it("counts them in the heading", () => {
+    expect(danglingHeading(IR.dangling)).toBe("not declared here · 2");
+  });
+});

package/web/edge-kind.js

@@ -0,0 +1,93 @@
+// #553: an edge's kind, in words. chant 0.124.20 (chant#3912) gives every IR
+// edge a `kind` (ref | needs | calls | triggers | includes | extends) and marks
+// an edge that leaves its workflow or pipeline `crossPipeline`. pinhole 0.4.0
+// stamps both on the drawn edge and its chip as `data-edge-kind` (left off for
+// "ref") and `data-edge-cross="true"`; index.html styles them, and this module
+// writes the chip text, the hover tooltip and the Model tab's edge rows.
+// Pure, so web/edge-kind.test.js can pin the words.
+
+/** The CI kinds, in the order the legend lists them. */
+export const CI_KINDS = ["needs", "calls", "triggers", "includes", "extends"];
+
+/** What each CI kind means, for the tooltip and the legend row's title. */
+export const KIND_MEANING = {
+  needs: "waits for the other job to finish",
+  calls: "runs the other workflow as a reusable workflow",
+  triggers: "starts the other workflow or pipeline",
+  includes: "pulls the other file into this pipeline",
+  extends: "takes the other job's settings",
+};
+
+/** The sentence a cross-pipeline edge adds, here and on the legend row. */
+export const CROSS_MEANING = "cross-pipeline: leaves its own workflow or pipeline";
+
+// The reason sentences for behold's own `ref` edges (src/logical.ts tags them).
+const REF_REASON = {
+  "security-group ingress": "security-group ingress — traffic is allowed here",
+  "data dependency": "data dependency — reads/uses this store",
+};
+
+/** A missing or "ref" kind is a reference; anything else is a CI kind. */
+export function isCiKind(kind) {
+  return !!kind && kind !== "ref";
+}
+
+/**
+ * The chip text, as chant's Mermaid and DOT writers label the edge
+ * (graph-mermaid.ts `edgeLabel`): a CI edge by its kind, plus the attribute
+ * when that says something more (`needs (stage)`, `calls (uses)`); a
+ * reference by the attribute it flows through. Empty when there is nothing
+ * to say.
+ */
+export function edgeLabel({ kind, via, toAttr } = {}) {
+  if (!isCiKind(kind)) return [via, toAttr].filter(Boolean).join(" → ");
+  return via && via !== kind ? `${kind} (${via})` : kind;
+}
+
+/**
+ * The hover tooltip: who points at whom on the first line, then the kind
+ * (with its meaning) for a CI edge or the reason for a reference, then the
+ * cross-pipeline sentence when the edge carries it.
+ */
+export function edgeTitle(from, to, { kind, via, cross } = {}) {
+  const lines = [`${from} → ${to}`];
+  if (isCiKind(kind)) {
+    const meaning = KIND_MEANING[kind];
+    lines.push(meaning ? `${edgeLabel({ kind, via })}: ${meaning}` : edgeLabel({ kind, via }));
+  } else if (via) {
+    lines.push(REF_REASON[via] || via);
+  }
+  if (cross) lines.push(CROSS_MEANING);
+  return lines.join("\n");
+}
+
+/**
+ * The Model tab's edge rows: one per CI kind the graph holds, with its count,
+ * then one for the cross-pipeline edges. A kind whose every edge is
+ * cross-pipeline (GitHub's `calls` and `triggers`) is drawn dashed on its row
+ * too, as it is on the graph. Empty when the graph has neither, so an
+ * infrastructure graph shows no edge legend.
+ */
+export function edgeLegend(edges = []) {
+  const counts = new Map();
+  const crossCounts = new Map();
+  let cross = 0;
+  for (const e of edges) {
+    if (isCiKind(e.kind)) {
+      counts.set(e.kind, (counts.get(e.kind) || 0) + 1);
+      if (e.crossPipeline) crossCounts.set(e.kind, (crossCounts.get(e.kind) || 0) + 1);
+    }
+    if (e.crossPipeline) cross++;
+  }
+  const known = CI_KINDS.filter((k) => counts.has(k));
+  const other = [...counts.keys()].filter((k) => !CI_KINDS.includes(k)).sort();
+  const rows = [...known, ...other].map((kind) => ({
+    kind,
+    cross: crossCounts.get(kind) === counts.get(kind),
+    label: kind,
+    count: counts.get(kind),
+    title: KIND_MEANING[kind] || kind,
+  }));
+  if (cross) rows.push({ kind: null, cross: true, label: "cross-pipeline (dashed)", count: cross, title: CROSS_MEANING });
+  return rows;
+}