@intentius/behold 0.26.0 → 0.28.0

package/dist/cli.js

@@ -5129,13 +5129,15 @@ function dropForeignDeclarations(ir, projectDir) {
     }
     groups[axis] = kept;
   }
-  return {
+  const out = {
     ...ir,
     nodes: ir.nodes.filter((n) => !gone.has(n.id)),
     edges: ir.edges.filter((e) => !gone.has(e.from) && !gone.has(e.to)),
     groups,
     foreign
   };
+  if (ir.dangling) out.dangling = ir.dangling.filter((d) => !gone.has(d.from));
+  return out;
 }
 function foreignNote(ir) {
   const f = ir.foreign;
@@ -9131,6 +9133,11 @@ var init_workspace_kinds_schema = __esm({
             },
             fields: {
               $ref: "#/$defs/fields"
+            },
+            reader: {
+              type: "string",
+              pattern: "^[a-z][a-z0-9-]{0,39}$",
+              description: "A link reader chant ships, by name, that derives a member's links from the member's own files (#3932): dbt-project reads a dbt project's sources. The reader is chant's code and runs offline, parsing files as data; the package supplies only the name. A name this chant doesn't have keeps the kind without a reader, and the load reports it. A chant older than this field fails a kinds file that uses it."
             }
           },
           patternProperties: {
@@ -12681,11 +12688,29 @@ function edgelessNote(zoom, ir, detail, instead) {
   if (zoom === "components" || zoom === "logical") return void 0;
   if (ir.nodes.length === 0 || ir.edges.length > 0) return void 0;
   if (instead) return instead;
-  if (detail !== void 0 && detail < 3) {
+  const dangling = ir.dangling?.length ?? 0;
+  if (dangling > 0) {
+    return `no edges: ${referencesCount(dangling)} ${dangling === 1 ? "names a target" : "name targets"} this project does not declare, listed on the card that holds ${dangling === 1 ? "it" : "each"}`;
+  }
+  if (detail !== void 0 && detail < 3 && !allInPipelines(ir)) {
     return "no edges at this detail \u2014 sourceRef/dependsOn and other attrs-derived references only appear at detail 3 (\u2318K \u2192 attributes, or add &detail=3)";
   }
   return "no edges \u2014 nothing in this estate references anything else";
 }
+function referencesCount(n) {
+  return `${n} reference${n === 1 ? "" : "s"}`;
+}
+function allInPipelines(ir) {
+  const byPipeline = ir.groups?.byPipeline;
+  if (!byPipeline) return false;
+  const inPipeline = new Set(Object.values(byPipeline).flat());
+  return ir.nodes.every((n) => inPipeline.has(n.id ?? ""));
+}
+function danglingNote(ir) {
+  const n = ir.dangling?.length ?? 0;
+  if (n === 0) return void 0;
+  return `${referencesCount(n)} to targets not declared here, such as another repo's workflow or a local action: listed on their cards, not drawn`;
+}
 var SAME_AS_RESOURCES = {
   choudoufu: ["composites", "attributes"],
   terraform: ["composites"]
@@ -12721,7 +12746,9 @@ function namespaceJoinNote(joined) {
 }
 function notesFor(zoom, ir, compositeEdgesAttached, logicalBefore, detail, edgelessInstead) {
   const primary = zoom === "logical" && logicalBefore !== void 0 ? logicalKept(logicalBefore, ir.nodes.length) : zoomNote(zoom, ir, compositeEdgesAttached);
-  const notes = [primary, edgelessNote(zoom, ir, detail, edgelessInstead)].filter((n) => n !== void 0);
+  const edgeless = edgelessNote(zoom, ir, detail, edgelessInstead);
+  const counted = edgeless !== void 0 || zoom === "components" || zoom === "logical" ? void 0 : danglingNote(ir);
+  const notes = [primary, edgeless, counted].filter((n) => n !== void 0);
   return notes.length ? notes.join(" \xB7 ") : void 0;
 }
 function tierMismatchNote(ir, tiers, currentTier) {
@@ -12984,7 +13011,7 @@ function memberIrFromGraphDocument(doc, member) {
   if (isRecord7(doc.groups)) {
     for (const [key, table] of Object.entries(doc.groups)) {
       if (key === "byMember" || !isRecord7(table)) continue;
-      const scoped = key === "byStack" || key === "byContainer" || key === "byWave";
+      const scoped = key === "byStack" || key === "byContainer" || key === "byWave" || key === "byPipeline";
       for (const [k, ids] of Object.entries(table)) {
         if (scoped && !k.startsWith(p)) continue;
         const members = (Array.isArray(ids) ? ids : []).map(un).filter((id) => own.has(id));
@@ -13000,7 +13027,12 @@ function memberIrFromGraphDocument(doc, member) {
     const { member: _m, ...rest } = i;
     return { ...rest, node: un(i.node) };
   });
+  const dangling = (Array.isArray(doc.dangling) ? doc.dangling : []).filter((d) => isRecord7(d) && (d.member === member || d.member === void 0 && typeof d.from === "string" && d.from.startsWith(p))).map((d) => {
+    const { member: _m, ...rest } = d;
+    return { ...rest, from: un(d.from) };
+  }).filter((d) => own.has(d.from));
   const ir = { version: 1, nodes, edges, groups, exports, imports };
+  if (dangling.length) ir.dangling = dangling;
   if (isRecord7(entry.meta)) ir.meta = entry.meta;
   if (entry.pipeline !== void 0) ir.pipeline = entry.pipeline;
   if (isRecord7(doc.derivedAttrs)) ir.derivedAttrs = doc.derivedAttrs;
@@ -14126,8 +14158,9 @@ function projectChoudoufuLogical(ir) {
   const edges = [];
   const seen = /* @__PURE__ */ new Set();
   for (const e of ir.edges) {
-    if (!kept.has(e.from) || !kept.has(e.to) || seen.has(`${e.from}|${e.to}`)) continue;
-    seen.add(`${e.from}|${e.to}`);
+    const key = `${e.from}|${e.to}|${e.kind}`;
+    if (!kept.has(e.from) || !kept.has(e.to) || seen.has(key)) continue;
+    seen.add(key);
     edges.push(e);
   }
   return { ir: { nodes: cards, edges, groups: {} }, byContainer };
@@ -14155,8 +14188,9 @@ function projectTerraformLogical(ir) {
   const edges = [];
   const seen = /* @__PURE__ */ new Set();
   for (const e of ir.edges) {
-    if (!kept.has(e.from) || !kept.has(e.to) || seen.has(`${e.from}|${e.to}`)) continue;
-    seen.add(`${e.from}|${e.to}`);
+    const key = `${e.from}|${e.to}|${e.kind}`;
+    if (!kept.has(e.from) || !kept.has(e.to) || seen.has(key)) continue;
+    seen.add(key);
     edges.push(e);
   }
   return { ir: { nodes: cards, edges, groups: {} }, byContainer };
@@ -15643,7 +15677,7 @@ function collapseBoxes(ir, opts = {}) {
     const from = standsFor.get(e.from) ?? e.from;
     const to = standsFor.get(e.to) ?? e.to;
     if (from === to) continue;
-    const key = `${from}|${to}`;
+    const key = `${from}|${to}|${e.kind}`;
     if (seen.has(key)) continue;
     seen.add(key);
     edges.push(from === e.from && to === e.to ? e : { ...e, from, to });
@@ -15747,7 +15781,9 @@ function estateFace(irIn, boxesIn, opts = {}) {
   const face = cardFaces(irIn, boxesIn, opts.prefixes ? { prefixes: opts.prefixes } : {});
   const ir = face.ir;
   if (Object.keys(face.overrides).length) faceOverrides.set(ir, face.overrides);
-  const boxes = boxesIn ? Object.fromEntries(Object.entries(boxesIn).map(([key, ids]) => [key, ids.map((id) => face.display.get(id) ?? id)])) : void 0;
+  const toDisplay = (record) => record ? Object.fromEntries(Object.entries(record).map(([key, ids]) => [key, ids.map((id) => face.display.get(id) ?? id)])) : void 0;
+  const boxes = toDisplay(boxesIn);
+  const subgroups = boxes ? toDisplay(opts.subgroups) : void 0;
   const realBand = moduleBandOf(irIn);
   const toReal = new Map(ir.nodes.map((n, i) => [n.id, irIn.nodes[i].id]));
   const bandOf = realBand ? (id) => realBand(toReal.get(id) ?? id) : void 0;
@@ -15757,13 +15793,14 @@ function estateFace(irIn, boxesIn, opts = {}) {
     ...opts.nodesep !== void 0 ? { nodesep: opts.nodesep } : {},
     ...opts.ranksep !== void 0 ? { ranksep: opts.ranksep } : {}
   }) : { ir, grids: /* @__PURE__ */ new Map() };
-  return { ir, overrides: face.overrides, boxes, display: face.display, bandOf, chains, restore: face.restore };
+  return { ir, overrides: face.overrides, boxes, subgroups, display: face.display, bandOf, chains, restore: face.restore };
 }
 function packEstateBoxes(layout, face, opts = {}) {
   const boxes = face.boxes;
   if (!boxes) return;
-  const boxGrids = packBoxComponents(layout, face.ir, boxes, face.bandOf);
-  if (opts.members) packMemberBoxes(layout, face.ir, boxes);
+  const boxGrids = packBoxComponents(layout, face.ir, boxes, face.bandOf, face.subgroups);
+  if (opts.members) packMemberBoxes(layout, face.ir, { ...topLevelSubgroups(layout.groups, face.subgroups), ...boxes });
+  if (face.subgroups) fitNestedBoxes(layout, face.ir, boxes, face.subgroups);
   addBandBoxes(layout, new Map([...boxGrids, ...face.chains.grids]), footprints(face.ir, face.overrides));
   applyBadges(layout.groups, opts.badges, opts.marks);
 }
@@ -15795,15 +15832,30 @@ function renderArchitecture(ir, byContainer, opts = {}) {
 }
 function renderGraph(irIn, opts = {}) {
   const groupsIn = irIn.groups;
-  const boxKey = groupsIn.byWave ? "byWave" : opts.boxes;
-  const face = estateFace(irIn, boxKey ? groupsIn[boxKey] : void 0);
+  const pipelines = groupsIn.byPipeline && Object.keys(groupsIn.byPipeline).length ? groupsIn.byPipeline : void 0;
+  const boxKey = groupsIn.byWave ? "byWave" : opts.boxes ?? (pipelines ? "byPipeline" : void 0);
+  const nested = boxKey === "byStack" ? pipelines : void 0;
+  const face = estateFace(irIn, boxKey ? groupsIn[boxKey] : void 0, nested ? { subgroups: nested } : {});
   const ir = face.ir;
   const boxes = face.boxes;
   const chains = face.chains;
-  const layout = layoutIr(chains.ir, { fit: true, overrides: face.overrides, ...boxes ? { groups: boxes } : {} });
+  const layout = layoutIr(chains.ir, {
+    fit: true,
+    overrides: face.overrides,
+    ...boxes ? { groups: boxes } : {},
+    ...face.subgroups ? { subgroups: face.subgroups } : {}
+  });
   if (opts.radial && !boxes) radializeLayout(layout, groupKeyByNode(ir), footprints(ir, face.overrides));
   else if (!boxes) packComponents(layout, ir);
   packEstateBoxes(layout, face, { members: boxKey === "byStack", ...opts.groupBadges ? { badges: opts.groupBadges } : {} });
+  if ((boxKey === "byPipeline" || nested) && pipelines) {
+    const titles = pipelineTitles(irIn, pipelines);
+    for (const box of layout.groups ?? []) {
+      if (box.id === void 0 || titles[box.id] === void 0) continue;
+      const title = titles[box.id];
+      box.title = title === box.id && box.parent !== void 0 && title.startsWith(`${box.parent}/`) ? title.slice(box.parent.length + 1) : title;
+    }
+  }
   const svg = renderSvg(ir, layout, {
     fit: true,
     hideTitle: true,
@@ -15813,6 +15865,22 @@ function renderGraph(irIn, opts = {}) {
   });
   return { svg: face.restore(svg) };
 }
+function pipelineTitles(ir, byPipeline) {
+  const nodes = new Map(ir.nodes.map((n) => [n.id, n]));
+  const workflowOf = (ids) => {
+    const workflows = ids.flatMap((id) => {
+      const n = nodes.get(id);
+      return n && /::Workflow$/.test(n.kind) ? [n] : [];
+    });
+    return workflows.length === 1 ? workflows[0] : void 0;
+  };
+  return Object.fromEntries(
+    Object.entries(byPipeline).map(([key, ids]) => {
+      const name = (nodes.get(key) ?? workflowOf(ids))?.attrs?.["name"];
+      return [key, typeof name === "string" && name.trim() ? name : key];
+    })
+  );
+}
 function applyBadges(boxes, badges, marks) {
   if (!badges && !marks) return;
   for (const box of boxes ?? []) {
@@ -15858,6 +15926,39 @@ function addBandBoxes(layout, grids, sizes) {
   boxes.push(...added);
 }
 var BAND_PAD = 14;
+var NEST_PAD_X = 50;
+var NEST_PAD_Y = 36;
+var NEST_OUTER = 36;
+function topLevelSubgroups(boxes, subgroups) {
+  if (!subgroups) return {};
+  return Object.fromEntries(
+    (boxes ?? []).flatMap((b) => b.parent === void 0 && b.id !== void 0 && subgroups[b.id] ? [[b.id, subgroups[b.id]]] : [])
+  );
+}
+function fitNestedBoxes(layout, ir, boxes, subgroups, only2) {
+  const at2 = new Map(layout.nodes.map((n) => [n.id, n]));
+  const ownerOf2 = /* @__PURE__ */ new Map();
+  for (const [key, ids] of Object.entries(boxes)) for (const id of ids) if (at2.has(id)) ownerOf2.set(id, key);
+  const sizes = footprints(ir);
+  for (const box of layout.groups ?? []) {
+    if (box.parent === void 0 || box.id === void 0 || only2 !== void 0 && box.parent !== only2) continue;
+    const cards = (subgroups[box.id] ?? []).flatMap((id) => {
+      const p = at2.get(id);
+      if (!p || ownerOf2.get(id) !== box.parent) return [];
+      const s = sizes.get(id) ?? { w: NODE_W, h: NODE_H };
+      return [{ x: p.x, y: p.y, w: s.w, h: s.h }];
+    });
+    if (!cards.length) continue;
+    const x0 = Math.min(...cards.map((c) => c.x - c.w / 2)) - NEST_PAD_X;
+    const x1 = Math.max(...cards.map((c) => c.x + c.w / 2)) + NEST_PAD_X;
+    const y0 = Math.min(...cards.map((c) => c.y - c.h / 2)) - NEST_PAD_Y;
+    const y1 = Math.max(...cards.map((c) => c.y + c.h / 2)) + NEST_PAD_Y;
+    box.x = (x0 + x1) / 2;
+    box.y = (y0 + y1) / 2;
+    box.w = x1 - x0;
+    box.h = y1 - y0;
+  }
+}
 function clampInside(r, box) {
   const inset = 6;
   const left = box.x - box.w / 2 + inset;
@@ -16173,7 +16274,8 @@ function packComponents(layout, ir) {
   layout.height = Math.max(...nodes.map((n) => n.y + halfH(n))) + pad;
 }
 function packMemberBoxes(layout, ir, members) {
-  const boxes = layout.groups ?? [];
+  const allBoxes = layout.groups ?? [];
+  const boxes = allBoxes.filter((b) => b.parent === void 0);
   if (boxes.length < 4) return;
   const nodes = layout.nodes;
   const size = footprints(ir);
@@ -16289,7 +16391,7 @@ function gridComponent(one, sizes) {
   const rows = Math.ceil(order.length / cols);
   return { local, w: Math.min(cols, order.length) * (cell.w + sep12.x) - sep12.x, h: rows * (cell.h + sep12.y) - sep12.y };
 }
-function packBoxComponents(layout, ir, boxes, bandOf) {
+function packBoxComponents(layout, ir, boxes, bandOf, subgroups) {
   const grids = /* @__PURE__ */ new Map();
   const groupBoxes = layout.groups ?? [];
   const nodes = layout.nodes;
@@ -16320,6 +16422,10 @@ function packBoxComponents(layout, ir, boxes, bandOf) {
       const b = idxOf.get(e.to);
       if (a !== void 0 && b !== void 0) parent[find(a)] = find(b);
     }
+    for (const ids2 of Object.values(subgroups ?? {})) {
+      const inside = ids2.flatMap((id) => idxOf.get(id) ?? []);
+      for (const i of inside.slice(1)) parent[find(i)] = find(inside[0]);
+    }
     const comps = /* @__PURE__ */ new Map();
     own.forEach((n, i) => (comps.get(find(i)) ?? comps.set(find(i), []).get(find(i))).push(n));
     if (comps.size < 2) continue;
@@ -16332,12 +16438,19 @@ function packBoxComponents(layout, ir, boxes, bandOf) {
         edges: ir.edges.filter((e) => inside.has(e.from) && inside.has(e.to)),
         groups: {}
       };
-      let one = layoutIr(sub, { fit: true });
+      const nest = Object.fromEntries(
+        Object.entries(subgroups ?? {}).flatMap(([k, ids2]) => {
+          const mine = ids2.filter((id) => inside.has(id));
+          return mine.length ? [[k, mine]] : [];
+        })
+      );
+      const nests = Object.keys(nest).length > 0;
+      let one = layoutIr(sub, { fit: true, ...nests ? { groups: nest } : {} });
       if (one.width > one.height * BOX_ASPECT_MAX) {
-        const sideways = layoutIr(sub, { fit: true, rankdir: "LR" });
+        const sideways = layoutIr(sub, { fit: true, rankdir: "LR", ...nests ? { groups: nest } : {} });
         if (offAspect(sideways) < offAspect(one)) one = sideways;
       }
-      const placed = offAspect(one) > GRID_COMPONENT ? gridComponent(one, size) : { local: new Map(one.nodes.map((n) => [n.id, { x: n.x, y: one.height - n.y }])), w: one.width, h: one.height };
+      const placed = !nests && offAspect(one) > GRID_COMPONENT ? gridComponent(one, size) : { local: new Map(one.nodes.map((n) => [n.id, { x: n.x, y: one.height - n.y }])), w: one.width, h: one.height };
       laid.set(root, { ...placed, ns });
     }
     const order = [void 0];
@@ -16353,8 +16466,9 @@ function packBoxComponents(layout, ir, boxes, bandOf) {
     const all = [...laid.values()];
     const area = all.reduce((s, c) => s + (c.w + COMPONENT_GAP) * (c.h + COMPONENT_GAP), 0);
     const targetW = Math.max(Math.max(...all.map((c) => c.w)), Math.sqrt(area * ROW_ASPECT));
-    const originX = box.x - box.w / 2 + BAND_PAD;
-    const originY = box.y - box.h / 2 + TITLE;
+    const holdsNested = groupBoxes.some((b) => b.parent === key);
+    const originX = box.x - box.w / 2 + (holdsNested ? NEST_OUTER : BAND_PAD);
+    const originY = box.y - box.h / 2 + (holdsNested ? NEST_OUTER : TITLE);
     let shelfX = 0;
     let shelfY = 0;
     let shelfH = 0;
@@ -16386,10 +16500,18 @@ function packBoxComponents(layout, ir, boxes, bandOf) {
       }
       bands.push({ key: band, ids: ids2 });
     }
-    const x0 = Math.min(...own.map((n) => n.x - halfW(n))) - BAND_PAD;
-    const x1 = Math.max(...own.map((n) => n.x + halfW(n))) + BAND_PAD;
-    const y0 = Math.min(...own.map((n) => n.y - halfH(n))) - TITLE;
-    const y1 = Math.max(...own.map((n) => n.y + halfH(n))) + BAND_PAD;
+    if (subgroups) fitNestedBoxes(layout, ir, boxes, subgroups, key);
+    const inner = groupBoxes.filter((b) => b.parent === key);
+    let x0 = Math.min(...own.map((n) => n.x - halfW(n))) - BAND_PAD;
+    let x1 = Math.max(...own.map((n) => n.x + halfW(n))) + BAND_PAD;
+    let y0 = Math.min(...own.map((n) => n.y - halfH(n))) - TITLE;
+    let y1 = Math.max(...own.map((n) => n.y + halfH(n))) + BAND_PAD;
+    for (const b of inner) {
+      x0 = Math.min(x0, b.x - b.w / 2 - NEST_OUTER);
+      x1 = Math.max(x1, b.x + b.w / 2 + NEST_OUTER);
+      y0 = Math.min(y0, b.y - b.h / 2 - NEST_OUTER);
+      y1 = Math.max(y1, b.y + b.h / 2 + NEST_OUTER);
+    }
     box.x = (x0 + x1) / 2;
     box.y = (y0 + y1) / 2;
     box.w = x1 - x0;
@@ -19443,6 +19565,17 @@ async function ledgerIn(root, dir) {
   return { members, prefix: memberLedgerPrefix(members) };
 }
 
+// node_modules/@intentius/chant/src/lifecycle/no-record.ts
+var NO_RECORD_ENV = "CHANT_NO_RECORD";
+function ledgerRecordingOff(env = process.env) {
+  const value = env[NO_RECORD_ENV]?.trim().toLowerCase();
+  return value !== void 0 && value !== "" && value !== "0" && value !== "false";
+}
+var overlays = /* @__PURE__ */ new Map();
+function overlayTip(key) {
+  return overlays.get(key)?.tip;
+}
+
 // node_modules/@intentius/chant/src/lifecycle/git.ts
 var STATE_BRANCH = "chant/lifecycle";
 async function ledgerDir(dir, opts) {
@@ -19459,7 +19592,7 @@ async function readBlobFromPath(environment, filename, opts) {
   const rt = getRuntime();
   const dir = await ledgerDir(environment, opts);
   const result = await rt.spawn(
-    ["git", "show", `${STATE_BRANCH}:${dir}/${filename}`],
+    ["git", "show", `${await ledgerRevision(opts?.cwd)}:${dir}/${filename}`],
     { cwd: opts?.cwd }
   );
   if (result.exitCode !== 0) return null;
@@ -19484,7 +19617,7 @@ async function listLedgerTrees(opts) {
   const rt = getRuntime();
   const base = await ledgerDir("", opts);
   const rootResult = await rt.spawn(
-    ["git", "ls-tree", "--full-tree", base === "" ? STATE_BRANCH : `${STATE_BRANCH}:${base}`],
+    ["git", "ls-tree", "--full-tree", base === "" ? tip : `${tip}:${base}`],
     { cwd: opts?.cwd }
   );
   if (rootResult.exitCode !== 0) return [];
@@ -19495,7 +19628,12 @@ async function listLedgerTrees(opts) {
   }
   return trees;
 }
+var C_LOCALE_ENV = { LC_ALL: "C", LANGUAGE: "" };
 async function getStateBranchTip(cwd) {
+  if (ledgerRecordingOff()) {
+    const tip = overlayTip(await overlayKey(cwd));
+    if (tip !== void 0) return tip;
+  }
   const rt = getRuntime();
   const result = await rt.spawn(
     ["git", "rev-parse", "--verify", `refs/heads/${STATE_BRANCH}`],
@@ -19504,6 +19642,20 @@ async function getStateBranchTip(cwd) {
   if (result.exitCode !== 0) return null;
   return result.stdout.trim();
 }
+async function ledgerRevision(cwd) {
+  if (!ledgerRecordingOff()) return STATE_BRANCH;
+  return overlayTip(await overlayKey(cwd)) ?? STATE_BRANCH;
+}
+var overlayKeys = /* @__PURE__ */ new Map();
+async function overlayKey(cwd) {
+  const from = cwd ?? process.cwd();
+  const cached = overlayKeys.get(from);
+  if (cached !== void 0) return cached;
+  const result = await getRuntime().spawn(["git", "rev-parse", "--path-format=absolute", "--git-common-dir"], { cwd: from, env: C_LOCALE_ENV });
+  const key = result.exitCode === 0 && result.stdout.trim() !== "" ? result.stdout.trim() : from;
+  overlayKeys.set(from, key);
+  return key;
+}
 
 // node_modules/@intentius/chant/src/content-digest.ts
 import { createHash as createHash6 } from "node:crypto";
@@ -20878,7 +21030,7 @@ function startDriftPoll(opts) {
 // src/frames.ts
 function frameDigest(ir) {
   const nodes = ir.nodes.map((n) => `${n.id}:${n.kind}:${n.attrs?._status ?? ""}`).sort();
-  const edges = ir.edges.map((e) => `${e.from}>${e.to}`).sort();
+  const edges = ir.edges.map((e) => `${e.from}>${e.to}${e.kind === "ref" ? "" : `:${e.kind}`}`).sort();
   return `${nodes.join("|")}#${edges.join("|")}`;
 }
 var FrameBuffer = class {
@@ -26808,11 +26960,14 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
       const tf = passNote(run3);
       const cdNote = lexiconNote(expanded);
       const sameNote = unchangedZoomNote(srcZoom, estateMembers(estateDirs).map((m) => m.kind));
+      const ownNote = [estateLensNote, tf.note, cdNote, sameNote].filter(Boolean).join(" \xB7 ");
+      const danglingClause = (ownNote || multi) && srcZoom !== "components" && srcZoom !== "logical" ? danglingNote(expanded) : void 0;
       const srcNote = [
-        [estateLensNote, tf.note, cdNote, sameNote].filter(Boolean).join(" \xB7 ") || (multi ? void 0 : notesFor(srcZoom, expanded, srcCompositeEdgesAttached, void 0, opts.detail ?? 2, cdNote)),
+        ownNote || (multi ? void 0 : notesFor(srcZoom, expanded, srcCompositeEdgesAttached, void 0, opts.detail ?? 2, cdNote)),
+        danglingClause,
         collapsedNote
       ].filter(Boolean).join(" \xB7 ") || void 0;
-      const srcNoteShort = tf.noteShort || sameNote ? [estateLensNote, tf.noteShort ?? tf.note, cdNote, sameNote, collapsedNote].filter(Boolean).join(" \xB7 ") : void 0;
+      const srcNoteShort = tf.noteShort || sameNote ? [estateLensNote, tf.noteShort ?? tf.note, cdNote, sameNote, danglingClause, collapsedNote].filter(Boolean).join(" \xB7 ") : void 0;
       return c.json({
         ir,
         svg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.26.0",
+  "version": "0.28.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,9 +41,9 @@
   },
   "dependencies": {
     "@hono/node-server": "^2.0.5",
-    "@intentius/chant": "^0.124.17",
-    "@intentius/chant-k8s-client": "^0.124.17",
-    "@intentius/pinhole": "^0.3.8",
+    "@intentius/chant": "^0.124.24",
+    "@intentius/chant-k8s-client": "^0.124.24",
+    "@intentius/pinhole": "^0.5.0",
     "ajv": "^8.20.0",
     "hono": "^4.12.34"
   },

package/web/app.js

@@ -21,6 +21,7 @@ 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 { edgeKey, edgeLabel, edgeLegend, edgeTitle, isCiKind, viaIndex } from "./edge-kind.js";
 import { readCostLine } from "./read-cost.js";
 import { mountHistoryPicker } from "./history-picker.js";
 import { applyMemberFrame, pendingLine, stillPending } from "./pending.js";
@@ -97,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
@@ -1160,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
@@ -2833,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).
  *
@@ -4372,37 +4424,53 @@ 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).
-  const viaOf = new Map();
-  for (const e of ir.edges || []) {
-    if (!e.viaAttr) continue;
-    viaOf.set(`${e.from}|${e.to}`, e.viaAttr);
-    viaOf.set(`${e.to}|${e.from}`, e.viaAttr);
-  }
+  // Reason per edge, keyed by from, to and kind (pinhole's edgeKey, #564), so
+  // two kinds on one pair keep their own reason. pinhole stamps data-edge-via
+  // itself; this fills it in where it did not.
+  const viaOf = viaIndex(ir.edges || []);
   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 kind = g.getAttribute("data-edge-kind") || "ref";
+    const via = g.getAttribute("data-edge-via") || viaOf.get(edgeKey({ from, to, kind }));
     if (via) g.setAttribute("data-edge-via", via); // drives the dashed style
+    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);
@@ -5207,17 +5275,24 @@ function userRect(el, toUser) {
  */
 function edgeLabelOf(g) {
   if (!(g.getAttribute("data-edge-via") || "").trim()) return null;
-  const from = g.getAttribute("data-edge-from");
-  const to = g.getAttribute("data-edge-to");
+  // The pair and the kind (pinhole#128, #564): two kinds on one pair draw two
+  // lines with a chip each, and each line keeps its own chip.
+  const key = edgeKeyOf(g);
   for (const cand of g.parentNode ? g.parentNode.children : []) {
     if (cand === g || cand.tagName.toLowerCase() !== "g") continue;
-    if (cand.getAttribute("data-edge-from") !== from || cand.getAttribute("data-edge-to") !== to) continue;
+    if (!cand.hasAttribute("data-edge-from") || edgeKeyOf(cand) !== key) continue;
     if (cand.hasAttribute("data-node-id") || cand.querySelector("path")) continue;
     return cand;
   }
   return null;
 }
 
+/** A drawn edge group's identity, pinhole's `edgeKey` over its stamped
+ * attributes (no `data-edge-kind` is a reference). */
+function edgeKeyOf(g) {
+  return edgeKey({ from: g.getAttribute("data-edge-from"), to: g.getAttribute("data-edge-to"), kind: g.getAttribute("data-edge-kind") || "ref" });
+}
+
 /** Index the freshly rendered SVG: node groups, containment boxes, edge paths. */
 function indexLayout(svgEl) {
   const toUser = userSpaceMapper(svgEl);

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,124 @@
+// #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";
+}
+
+/**
+ * An edge's identity, the same key pinhole 0.5.0's `edgeKey` gives
+ * (pinhole#128): `from>to` for a reference, `from>to>kind` otherwise. Two
+ * kinds on one pair (a GitLab job that both `needs` and `extends` another)
+ * are two edges, so anything the SPA looks up per edge goes through this
+ * (#564). Read off a drawn edge, pass `data-edge-kind`, which pinhole leaves
+ * off for "ref".
+ */
+export function edgeKey({ from, to, kind } = {}) {
+  return `${from}>${to}${isCiKind(kind) ? `>${kind}` : ""}`;
+}
+
+/**
+ * The `viaAttr` per edge key, for the drawn edges pinhole did not stamp
+ * `data-edge-via` on. The reverse direction is filled in as well, where
+ * nothing already holds it, since pinhole may paint an edge either way round
+ * relative to the IR.
+ */
+export function viaIndex(edges = []) {
+  const via = new Map();
+  for (const e of edges) {
+    if (!e.viaAttr) continue;
+    via.set(edgeKey(e), e.viaAttr);
+  }
+  for (const e of edges) {
+    const back = edgeKey({ from: e.to, to: e.from, kind: e.kind });
+    if (e.viaAttr && !via.has(back)) via.set(back, e.viaAttr);
+  }
+  return via;
+}
+
+/**
+ * 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;
+}

package/web/edge-kind.test.js

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import { edgeKey, edgeLabel, edgeLegend, edgeTitle, viaIndex } from "./edge-kind.js";
+
+// The edges chant 0.124.20's GitHub lexicon writes (lexicons/github/src/
+// graph-edges.ts) and one from its GitLab lexicon.
+const needs = { from: "Test", to: "Build", kind: "needs", viaAttr: "needs" };
+const calls = { from: "Ci", to: "Release", kind: "calls", viaAttr: "uses", crossPipeline: true };
+const triggers = { from: "Deploy", to: "Ci", kind: "triggers", viaAttr: "workflow_run", crossPipeline: true };
+const stage = { from: "test", to: "build", kind: "needs", viaAttr: "stage" };
+const ref = { from: "api", to: "db", kind: "ref", viaAttr: "data dependency" };
+
+const title = (e) => edgeTitle(e.from, e.to, { kind: e.kind, via: e.viaAttr, cross: e.crossPipeline });
+
+describe("edgeLabel (#553)", () => {
+  it("names a CI edge by its kind, with the attribute only when it adds something", () => {
+    expect(edgeLabel({ kind: "needs", via: "needs" })).toBe("needs");
+    expect(edgeLabel({ kind: "needs", via: "stage" })).toBe("needs (stage)");
+    expect(edgeLabel({ kind: "calls", via: "uses" })).toBe("calls (uses)");
+    expect(edgeLabel({ kind: "triggers", via: "workflow_run" })).toBe("triggers (workflow_run)");
+    expect(edgeLabel({ kind: "includes" })).toBe("includes");
+  });
+
+  it("names a reference by the attribute it flows through", () => {
+    expect(edgeLabel({ kind: "ref", via: "role" })).toBe("role");
+    expect(edgeLabel({ via: "role", toAttr: "arn" })).toBe("role → arn");
+    expect(edgeLabel({ kind: "ref" })).toBe("");
+  });
+});
+
+describe("edgeTitle, the hover tooltip (#553)", () => {
+  it("says a needs edge's kind and what it means", () => {
+    expect(title(needs)).toBe("Test → Build\nneeds: waits for the other job to finish");
+    expect(title(stage)).toBe("test → build\nneeds (stage): waits for the other job to finish");
+  });
+
+  it("says a call to a reusable workflow leaves its pipeline", () => {
+    expect(title(calls)).toBe(
+      "Ci → Release\ncalls (uses): runs the other workflow as a reusable workflow\ncross-pipeline: leaves its own workflow or pipeline",
+    );
+    expect(title(triggers)).toBe(
+      "Deploy → Ci\ntriggers (workflow_run): starts the other workflow or pipeline\ncross-pipeline: leaves its own workflow or pipeline",
+    );
+  });
+
+  it("keeps a reference's reason as it was", () => {
+    expect(title(ref)).toBe("api → db\ndata dependency — reads/uses this store");
+    expect(edgeTitle("a", "b", { kind: "ref", via: "role" })).toBe("a → b\nrole");
+    expect(edgeTitle("a", "b", {})).toBe("a → b");
+  });
+
+  it("names a kind it has no sentence for", () => {
+    expect(edgeTitle("a", "b", { kind: "waits", via: "on" })).toBe("a → b\nwaits (on)");
+  });
+});
+
+describe("edgeLegend (#553)", () => {
+  it("lists the CI kinds the graph holds, then the cross-pipeline edges", () => {
+    const rows = edgeLegend([needs, needs, calls, triggers, ref]);
+    expect(rows.map((r) => [r.label, r.count, r.cross])).toEqual([
+      ["needs", 2, false],
+      ["calls", 1, true],
+      ["triggers", 1, true],
+      ["cross-pipeline (dashed)", 2, true],
+    ]);
+  });
+
+  it("is empty for a graph of references", () => {
+    expect(edgeLegend([ref, { from: "a", to: "b", kind: "ref" }])).toEqual([]);
+  });
+});
+
+// #564: pinhole 0.5.0 keys an edge on from, to and kind (pinhole#128), so two
+// kinds on one pair are two edges, each with its own chip and tooltip.
+describe("edgeKey and viaIndex (#564)", () => {
+  it("gives the key pinhole's edgeKey gives: a reference keeps from>to", () => {
+    expect(edgeKey({ from: "api", to: "db", kind: "ref" })).toBe("api>db");
+    expect(edgeKey({ from: "api", to: "db" })).toBe("api>db");
+    expect(edgeKey({ from: "test", to: "build", kind: "needs" })).toBe("test>build>needs");
+  });
+
+  it("keeps each kind's reason on a pair joined twice", () => {
+    const via = viaIndex([
+      { from: "test", to: "build", kind: "needs", viaAttr: "stage" },
+      { from: "test", to: "build", kind: "extends", viaAttr: "extends" },
+    ]);
+    expect(via.get(edgeKey({ from: "test", to: "build", kind: "needs" }))).toBe("stage");
+    expect(via.get(edgeKey({ from: "test", to: "build", kind: "extends" }))).toBe("extends");
+  });
+
+  it("fills in the reverse direction without overwriting an edge drawn that way", () => {
+    const via = viaIndex([
+      { from: "a", to: "b", kind: "ref", viaAttr: "role" },
+      { from: "b", to: "a", kind: "ref", viaAttr: "policy_arn" },
+      { from: "c", to: "d", kind: "ref", viaAttr: "zone_id" },
+    ]);
+    expect(via.get("a>b")).toBe("role");
+    expect(via.get("b>a")).toBe("policy_arn");
+    expect(via.get("d>c")).toBe("zone_id");
+  });
+});

package/web/index.html

@@ -132,6 +132,34 @@
          either for the full reason (native SVG <title>). */
       #graph g[data-edge-via="data dependency"] .pin-edge-line { stroke-dasharray: 6 5; }
       #graph g[data-edge-from][data-edge-via] { cursor: help; }
+      /* #553: CI edges by kind (chant's IREdge.kind, stamped by pinhole as
+         data-edge-kind, left off for a plain reference). Each kind has a hue,
+         65% of a status token and 35% --fg so it clears the background on the
+         light palettes too (all but Unikitty, whose pastel slots sit on its
+         pink ground, read at least as well as --edge). On 128 of the 552
+         themes two of those slots come out the same colour, so the line's
+         pattern carries the kind
+         as well: needs is a heavier solid line, triggers a dash-dot, includes
+         and extends dotted. An edge that leaves its workflow or pipeline
+         (data-edge-cross) is dashed, as chant's Mermaid and DOT draw it. The
+         Model tab's edge legend (.edge-swatch) is drawn by the same rules.
+         Hover and .edge-hi above stay the more specific rules, so a traced
+         edge still turns --pending. */
+      .edge-swatch { flex: none; overflow: visible; }
+      .edge-swatch .pin-edge-line { stroke: var(--edge); stroke-width: 1.5; fill: none; }
+      :is(#graph, .edge-swatch) g[data-edge-kind] .pin-edge-line { stroke-width: 1.6; }
+      :is(#graph, .edge-swatch) g[data-edge-kind="needs"] .pin-edge-line { stroke: color-mix(in srgb, var(--runtime) 65%, var(--fg)); stroke-width: 2.1; }
+      :is(#graph, .edge-swatch) g[data-edge-kind="calls"] .pin-edge-line { stroke: color-mix(in srgb, var(--foreign) 65%, var(--fg)); }
+      :is(#graph, .edge-swatch) g[data-edge-kind="triggers"] .pin-edge-line { stroke: color-mix(in srgb, var(--managed) 65%, var(--fg)); }
+      :is(#graph, .edge-swatch) g[data-edge-cross="true"] .pin-edge-line { stroke-dasharray: 7 5; }
+      :is(#graph, .edge-swatch) g[data-edge-kind="triggers"] .pin-edge-line { stroke-dasharray: 9 4 2 4; }
+      :is(#graph, .edge-swatch) g[data-edge-kind="includes"] .pin-edge-line,
+      :is(#graph, .edge-swatch) g[data-edge-kind="extends"] .pin-edge-line { stroke: var(--muted); stroke-dasharray: 1.5 4; stroke-linecap: round; }
+      /* The chip wears its kind's hue on its outline; its text stays pinhole's. */
+      #graph g[data-edge-kind="needs"] rect { stroke: color-mix(in srgb, var(--runtime) 65%, var(--fg)); }
+      #graph g[data-edge-kind="calls"] rect { stroke: color-mix(in srgb, var(--foreign) 65%, var(--fg)); }
+      #graph g[data-edge-kind="triggers"] rect { stroke: color-mix(in srgb, var(--managed) 65%, var(--fg)); }
+      #graph g[data-edge-kind="includes"] rect, #graph g[data-edge-kind="extends"] rect { stroke: var(--muted); }
       /* #477: a declared workspace's waiting gates, over the top of the graph
          pane (same grid cell, so #graph's re-renders never take it with them). */
       #ws-gates { grid-row: 1; grid-column: 1; align-self: start; justify-self: center; z-index: 3; margin-top: 8px;