@wairon/cli 5.0.2-dev.12 → 5.0.2-dev.14

package/dist/index.js

@@ -1260,6 +1260,47 @@ var init_errors = __esm({
   }
 });
 
+// src/core/statehash.ts
+function computeStateId() {
+  const tree = {
+    system: loadSystemSpec(),
+    subsystems: loadSubsystemSpecs(),
+    components: loadComponentSpecs(),
+    interfaces: loadInterfaceSpecs(),
+    implementations: loadImplementationSpecs(),
+    types: loadTypeSpecs()
+  };
+  const digest = crypto.createHash("sha256").update(canonicalize(tree)).digest("hex");
+  return { algorithm: "sha256", digest };
+}
+function stateIdEquals(a, b) {
+  return !!a && !!b && a.algorithm === b.algorithm && a.digest === b.digest;
+}
+function canonicalize(value) {
+  return JSON.stringify(sortKeys(value));
+}
+function sortKeys(v) {
+  if (Array.isArray(v)) return v.map(sortKeys);
+  if (v && typeof v === "object") {
+    const src = v;
+    const out = {};
+    for (const k of Object.keys(src).sort()) {
+      if (k === "createdAt" || k === "updatedAt") continue;
+      out[k] = sortKeys(src[k]);
+    }
+    return out;
+  }
+  return v;
+}
+var crypto;
+var init_statehash = __esm({
+  "src/core/statehash.ts"() {
+    "use strict";
+    crypto = __toESM(require("crypto"));
+    init_specs2();
+  }
+});
+
 // src/core/narrative-labels.ts
 function resolveNarrativeLabels(methodName, steps) {
   const errors = [];
@@ -2345,6 +2386,16 @@ header input[type="search"]::placeholder { color:var(--dim); }
 #moreMenu .dropdown { display:block; width:100%; }
 #moreMenu .dropdown > .tbtn, #moreMenu > .tbtn { display:block; width:100%; text-align:left; border:none; background:transparent; margin:2px 0; }
 #moreMenu .dropdown > .tbtn:hover, #moreMenu > .tbtn:hover { background:var(--hover-bg); }
+/* Staged header compaction (responsive only, never persisted): compact
+   stand-ins for the search input, the mode tabs, and the ancestor crumbs.
+   All hidden at full width, so a roomy header renders exactly as before. */
+#searchBtn { position:relative; }
+#searchBtn.hasq::after { content:''; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
+.search-menu { min-width:210px; padding:8px; }
+.search-menu input[type="search"] { width:100%; }
+#modeMenu button.active { background:var(--accent); color:#fff; font-weight:700; }
+#crumbs .dropdown { display:inline-flex; }
+#crumbs .crumbmore { font-weight:700; }
 
 /* Settings panel \u2014 toggle switches */
 .settings-menu { min-width:266px; }
@@ -2468,9 +2519,17 @@ body.presentation #exitPresent, body.presentation #presentDetails { display:bloc
     <button data-vm="types">Types</button>
     <button data-vm="databases">Databases</button>
   </div>
+  <div class="dropdown" id="modeDd" style="display:none">
+    <button class="tbtn" id="modeBtn" title="Switch between the component architecture, the type ERD, or the database schemas">Components \u25BE</button>
+    <div class="menu" id="modeMenu"></div>
+  </div>
   <nav id="crumbs"></nav>
   <span class="divider"></span>
   <input id="search" type="search" placeholder="Search this view\u2026">
+  <div class="dropdown" id="searchDd" style="display:none">
+    <button class="tbtn" id="searchBtn" title="Search this view">\u{1F50D}</button>
+    <div class="menu search-menu" id="searchMenu"></div>
+  </div>
   <div class="seg" id="typesDetailSeg" style="display:none" title="ERD detail level">
     <button data-td="full">Full</button>
     <button data-td="fields">Fields</button>
@@ -2987,13 +3046,300 @@ var MODEL = __MODEL_JSON__;
   var BOX_W = 200, BOX_H = 56, SUBBOX_W = 230, SUBBOX_H = 84, GAP_X = 110, GAP_Y = 34;
   var INNER_W = 130, INNER_H = 36, INNER_GAPX = 26, INNER_GAPY = 12, HEAD_H = 34, PADI = 14;
 
+  // ---- deep expansion (opt-in via subsystem.deepInternals) -------------------
+  // When Internals is on and a subsystem record carries deepInternals:true, its
+  // box renders its WHOLE subtree instead of one layer: deep-flagged child
+  // subsystems become NESTED boundary boxes (recursing, defensively capped),
+  // every other child renders as a fixed leaf tile that is never expanded
+  // further. Sizes are computed bottom-up (a nested container tile takes its
+  // recursive {w,h}); positions are emitted top-down by accumulating parent
+  // top-left offsets. Relations between concrete visible endpoints are drawn
+  // as ONE direct line each by buildDeepContext \u2014 crossing nested boundaries
+  // on purpose (the full org overview of project relations); only relations
+  // that cannot resolve to two concrete endpoints keep today's port machinery,
+  // and ONLY at the outermost box. Without the flag this whole path is inert
+  // and the classic one-layer innerLayout runs unchanged.
+  var DEEP_MAX_DEPTH = 6;
+  function isDeepId(subId) {
+    var s = subById[subId];
+    return !!(s && s.deepInternals);
+  }
+  // The DEEPEST visible tile representing compId inside the deep-expanded box
+  // rooted at rootSubId: descend deep-flagged containers (the same expansion
+  // rule as deepContainerLayout) until the containing child is a leaf tile.
+  // Returns the child entry { kind, id } (its node id is IN(kind, id)).
+  function deepLeafFor(compId, rootSubId) {
+    var subId = rootSubId, depth = 1;
+    for (;;) {
+      var child = childOfScopeContaining(compId, { kind: 'subsystem', id: subId });
+      if (!child) return null;
+      if (child.kind === 'subsystem' && isDeepId(child.id) && depth < DEEP_MAX_DEPTH) {
+        subId = child.id; depth += 1;
+        continue;
+      }
+      return child;
+    }
+  }
+  // One deep container's DIRECT children, placed with PER-TILE sizes (nested
+  // containers take their recursive size; leaves stay INNER_W x INNER_H). The
+  // placement mirrors innerLayout's strategy switch, generalised to variable
+  // tile sizes. Tiles are centres relative to THIS container's top-left corner
+  // (content sits right of PADI, below the HEAD_H label band); nested tiles
+  // are relative to their own container, so emission accumulates offsets.
+  function deepContainerLayout(subId, depth) {
+    var kids = childrenOf({ kind: 'subsystem', id: subId });
+    if (!kids.length) {
+      // An EMPTY deep subsystem still shows as a (min-size) boundary box.
+      return { tiles: [], w: INNER_W + 2 * PADI, h: HEAD_H + PADI };
+    }
+    var scope = { kind: 'subsystem', id: subId };
+    var kidKey = function (k) { return k.kind + ':' + k.id; };
+    var size = {};
+    kids.forEach(function (k) {
+      if (k.kind === 'subsystem' && isDeepId(k.id) && depth < DEEP_MAX_DEPTH) {
+        var nested = deepContainerLayout(k.id, depth + 1);
+        size[kidKey(k)] = { w: nested.w, h: nested.h, sub: nested };
+      } else {
+        size[kidKey(k)] = { w: INNER_W, h: INNER_H, sub: null };
+      }
+    });
+    // Intra-container edges lifted to DIRECT children \u2014 for LAYOUT ONLY (the
+    // drawn lines come from buildDeepContext's direct pass, never per level).
+    var intra = {};
+    MODEL.edges.forEach(function (edge) {
+      var a = childOfScopeContaining(edge.from, scope);
+      var b = childOfScopeContaining(edge.to, scope);
+      if (!a || !b) return;
+      var ak = a.kind + ':' + a.id, bk = b.kind + ':' + b.id;
+      if (!size[ak] || !size[bk] || ak === bk) return;
+      intra[ak + '=>' + bk] = 1;
+    });
+    var layer = {};
+    function calc(k, stack) {
+      var key = kidKey(k);
+      if (layer[key] !== undefined) return layer[key];
+      if (stack[key]) return 0;
+      stack[key] = 1;
+      var l = 0;
+      if (k.kind === 'component') {
+        var c = compById[k.id];
+        if (c && (c.componentType === 'Portal' || c.componentType === 'Observer')) { layer[key] = 0; delete stack[key]; return 0; }
+      }
+      Object.keys(intra).forEach(function (ek) {
+        var cut = ek.indexOf('=>');
+        if (ek.slice(cut + 2) !== key) return;
+        var srcKid = kids.filter(function (x) { return kidKey(x) === ek.slice(0, cut); })[0];
+        if (srcKid) l = Math.max(l, calc(srcKid, stack) + 1);
+      });
+      delete stack[key];
+      layer[key] = l;
+      return l;
+    }
+    kids.forEach(function (k) { calc(k, {}); });
+    var tiles = [], contentW = 0, contentH = 0;
+    if (state.layout === 'grid') {
+      // Row packing by ACTUAL tile size (the fixed per-column grid assumed
+      // uniform tiles); the target row width follows the tile count, widened
+      // to at least the widest single tile.
+      var gsorted = kids.slice().sort(function (a, b) { return a.id < b.id ? -1 : 1; });
+      var target = Math.max(1, Math.ceil(Math.sqrt(kids.length))) * (INNER_W + INNER_GAPX);
+      kids.forEach(function (k) { var s0 = size[kidKey(k)]; if (s0.w > target) target = s0.w; });
+      var gx = 0, gy = 0, rowH = 0;
+      gsorted.forEach(function (k) {
+        var s = size[kidKey(k)];
+        if (gx > 0 && gx + s.w > target) { gx = 0; gy += rowH + INNER_GAPY; rowH = 0; }
+        tiles.push({ kid: k, x: gx + s.w / 2, y: gy + s.h / 2, w: s.w, h: s.h, sub: s.sub });
+        gx += s.w + INNER_GAPX;
+        if (s.h > rowH) rowH = s.h;
+        if (gx - INNER_GAPX > contentW) contentW = gx - INNER_GAPX;
+        if (gy + rowH > contentH) contentH = gy + rowH;
+      });
+    } else if (state.layout === 'concentric' || state.layout === 'force') {
+      var ideg = {};
+      kids.forEach(function (k) { ideg[kidKey(k)] = 0; });
+      Object.keys(intra).forEach(function (ek) {
+        var cut2 = ek.indexOf('=>');
+        var sk = ek.slice(0, cut2), tk = ek.slice(cut2 + 2);
+        if (ideg[sk] !== undefined) ideg[sk]++;
+        if (ideg[tk] !== undefined) ideg[tk]++;
+      });
+      var rel = concentricPositions(
+        kids.map(kidKey),
+        function (key) { return ideg[key] || 0; },
+        function (key) { return { w: size[key].w, h: size[key].h }; }
+      );
+      // Normalise by the tiles' BOUNDING BOX (not just the centres) so a wide
+      // nested container on the rim still clears the container's left/top pad.
+      var minL = Infinity, minT = Infinity;
+      kids.forEach(function (k) {
+        var s1 = size[kidKey(k)], p1 = rel[kidKey(k)] || { x: 0, y: 0 };
+        if (p1.x - s1.w / 2 < minL) minL = p1.x - s1.w / 2;
+        if (p1.y - s1.h / 2 < minT) minT = p1.y - s1.h / 2;
+      });
+      if (minL === Infinity) { minL = 0; minT = 0; }
+      kids.forEach(function (k) {
+        var s2 = size[kidKey(k)], p2 = rel[kidKey(k)] || { x: 0, y: 0 };
+        var cx = p2.x - minL, cyy = p2.y - minT;
+        tiles.push({ kid: k, x: cx, y: cyy, w: s2.w, h: s2.h, sub: s2.sub });
+        if (cx + s2.w / 2 > contentW) contentW = cx + s2.w / 2;
+        if (cyy + s2.h / 2 > contentH) contentH = cyy + s2.h / 2;
+      });
+    } else {
+      // Layered dependency columns: the column is as wide as its widest tile,
+      // and each tile advances by ITS OWN height.
+      var cols = {};
+      kids.forEach(function (k) { var l = layer[kidKey(k)] || 0; (cols[l] = cols[l] || []).push(k); });
+      var colKeys = Object.keys(cols).map(Number).sort(function (a, b) { return a - b; });
+      var x = 0;
+      colKeys.forEach(function (ck) {
+        var col = cols[ck].sort(function (a, b) { return a.id < b.id ? -1 : 1; });
+        var colW = 0, y = 0;
+        col.forEach(function (k) { var s3 = size[kidKey(k)]; if (s3.w > colW) colW = s3.w; });
+        col.forEach(function (k) {
+          var s = size[kidKey(k)];
+          tiles.push({ kid: k, x: x + colW / 2, y: y + s.h / 2, w: s.w, h: s.h, sub: s.sub });
+          y += s.h + INNER_GAPY;
+        });
+        if (y - INNER_GAPY > contentH) contentH = y - INNER_GAPY;
+        x += colW + INNER_GAPX;
+      });
+      contentW = x - INNER_GAPX;
+    }
+    tiles.forEach(function (t) { t.x += PADI; t.y += HEAD_H; });
+    return { tiles: tiles, w: contentW + 2 * PADI, h: HEAD_H + contentH + PADI };
+  }
+  // Top-level deep box: the recursive interior plus today's port machinery at
+  // the OUTERMOST box only (buildDeepContext supplies which relations still
+  // need ports; stubs run port <-> the DEEPEST visible leaf tile). Returns the
+  // same shape as innerLayout, plus deep:true so emission recurses.
+  function deepLayout(entry, portRec) {
+    var box = deepContainerLayout(entry.id, 1);
+    var parentId = anchorNodeId(entry);
+    var pBaseIn = 'p~in~' + parentId + '~', pBaseOut = 'p~out~' + parentId + '~';
+    var extIn = portRec ? portRec.extIn : {}, extOut = portRec ? portRec.extOut : {};
+    var inIds = Object.keys(extIn).sort(), outIds = Object.keys(extOut).sort();
+    var hasIn = inIds.length > 0, hasOut = outIds.length > 0;
+    var PROXY_W = 22, PROXY_H = 22, PROXY_GAP = 8;
+    var shift = hasIn ? PROXY_W + INNER_GAPX : 0;
+    var tiles = box.tiles;
+    if (shift) tiles.forEach(function (t) { t.x += shift; });
+    var w = box.w + shift + (hasOut ? PROXY_W + INNER_GAPX : 0);
+    if (w < SUBBOX_W) w = SUBBOX_W;
+    var stackMax = Math.max(inIds.length, outIds.length);
+    var h = Math.max(box.h, HEAD_H + stackMax * PROXY_H + Math.max(0, stackMax - 1) * PROXY_GAP + PADI);
+    var midY = HEAD_H + Math.max(0, (h - HEAD_H - PADI) / 2);
+    function stackPorts(ids, recs, base, cx, dir) {
+      var total = ids.length * PROXY_H + Math.max(0, ids.length - 1) * PROXY_GAP;
+      var y0 = Math.max(HEAD_H + PROXY_H / 2, midY - total / 2 + PROXY_H / 2);
+      return ids.map(function (eid, i) {
+        var km = recs[eid].kids, klist = [];
+        Object.keys(km).forEach(function (key) { klist.push(km[key]); });
+        return { id: base + eid, extId: eid, dir: dir, kids: klist, raws: Object.keys(recs[eid].raws), x: cx, y: y0 + i * (PROXY_H + PROXY_GAP), w: PROXY_W, h: PROXY_H };
+      });
+    }
+    return {
+      deep: true,
+      tiles: tiles,
+      edges: portRec ? Object.keys(portRec.stubs).map(function (k) { return portRec.stubs[k]; }) : [],
+      proxies: stackPorts(inIds, extIn, pBaseIn, PADI + PROXY_W / 2, 'in')
+        .concat(stackPorts(outIds, extOut, pBaseOut, w - PADI - PROXY_W / 2, 'out')),
+      w: w,
+      h: h,
+    };
+  }
+  // View-level deep context (null unless Internals is on AND at least one
+  // in-view entry is deep-flagged \u2014 the classic path never sees it): which
+  // top-level entries are deep-expanded; every relation drawn as a DIRECT
+  // concrete line (deduped per src=>tgt pair); the per-top-pair count used to
+  // suppress aggregated edges whose constituents are ALL drawn directly; and
+  // the port records for relations that keep today's port semantics.
+  function buildDeepContext(scope, entries) {
+    if (!state.internals) return null;
+    var deepByAnchor = {}, any = false;
+    entries.forEach(function (e) {
+      if (e.kind === 'subsystem' && isDeepId(e.id)) { deepByAnchor[anchorNodeId(e)] = e; any = true; }
+    });
+    if (!any) return null;
+    var entryByAnchor = {};
+    entries.forEach(function (e) { entryByAnchor[e.kind + ':' + e.id] = e; });
+    // A relation endpoint's DIRECT-line node in this view: the deepest leaf
+    // tile inside a deep-expanded entry, or a top-level component box ITSELF.
+    // null = this endpoint keeps aggregated/port semantics (interiors of
+    // non-deep entries, out-of-scope counterparts).
+    function directEnd(compId) {
+      var child = childOfScopeContaining(compId, scope);
+      var entry = child && entryByAnchor[child.kind + ':' + child.id];
+      if (!entry) return null;
+      var aid = anchorNodeId(entry);
+      if (deepByAnchor[aid]) {
+        var leaf = deepLeafFor(compId, entry.id);
+        return leaf ? { node: IN(leaf.kind, leaf.id), top: aid, deep: true } : null;
+      }
+      if (entry.kind === 'component' && entry.id === compId) return { node: aid, top: aid, deep: false };
+      return null;
+    }
+    var direct = {}, directTopCount = {}, ports = {};
+    function portRec(aid) { return ports[aid] = ports[aid] || { extIn: {}, extOut: {}, stubs: {} }; }
+    MODEL.edges.forEach(function (edge) {
+      var a = directEnd(edge.from), b = directEnd(edge.to);
+      if (a && b && (a.deep || b.deep) && a.node !== b.node) {
+        // Drawn as ONE direct line \u2014 never ALSO as ports/stubs (dedupe rule).
+        var key = a.node + '=>' + b.node;
+        if (!direct[key]) direct[key] = { src: a.node, tgt: b.node, cross: false, aTop: a.top, bTop: b.top };
+        if (edge.cross) direct[key].cross = true;
+        if (a.top !== b.top) {
+          var tk = a.top + '=>' + b.top;
+          directTopCount[tk] = (directTopCount[tk] || 0) + 1;
+        }
+        return;
+      }
+      // Not a direct line: keep today's port semantics on any deep box with
+      // exactly one endpoint inside its subtree, stubbed to the deepest leaf.
+      var ac = childOfScopeContaining(edge.from, scope);
+      var bc = childOfScopeContaining(edge.to, scope);
+      var aEnt = ac && entryByAnchor[ac.kind + ':' + ac.id];
+      var bEnt = bc && entryByAnchor[bc.kind + ':' + bc.id];
+      var aAid = aEnt ? anchorNodeId(aEnt) : null;
+      var bAid = bEnt ? anchorNodeId(bEnt) : null;
+      if (aAid === bAid) return; // internal to one entry, or neither in scope
+      if (aAid && deepByAnchor[aAid]) {
+        var leafA = deepLeafFor(edge.from, aEnt.id);
+        if (leafA) {
+          var recA = portRec(aAid);
+          var ro = recA.extOut[edge.to] = recA.extOut[edge.to] || { kids: {}, raws: {} };
+          ro.kids[leafA.kind + ':' + leafA.id] = leafA;
+          ro.raws[edge.from] = 1;
+          var poId = 'p~out~' + aAid + '~' + edge.to;
+          recA.stubs[IN(leafA.kind, leafA.id) + '=>' + poId] = { src: IN(leafA.kind, leafA.id), tgt: poId, stub: true };
+        }
+      }
+      if (bAid && deepByAnchor[bAid]) {
+        var leafB = deepLeafFor(edge.to, bEnt.id);
+        if (leafB) {
+          var recB = portRec(bAid);
+          var ri = recB.extIn[edge.from] = recB.extIn[edge.from] || { kids: {}, raws: {} };
+          ri.kids[leafB.kind + ':' + leafB.id] = leafB;
+          ri.raws[edge.to] = 1;
+          var piId = 'p~in~' + bAid + '~' + edge.from;
+          recB.stubs[piId + '=>' + IN(leafB.kind, leafB.id)] = { src: piId, tgt: IN(leafB.kind, leafB.id), stub: true };
+        }
+      }
+    });
+    return { deepByAnchor: deepByAnchor, direct: direct, directTopCount: directTopCount, ports: ports };
+  }
+
   // Micro-layout for a container's direct children when Internals is on:
   // layered mini columns + intra-container edges. Each external relation gets
   // its own small PORT node INSIDE the container (one per external
   // counterpart; incoming left, outgoing right). Children connect to ports
   // with short edges that never leave the box \u2014 the real cross-boundary line
   // is only revealed on hover, or pinned while the port is selected.
-  function innerLayout(entry) {
+  function innerLayout(entry, deepCtx) {
+    // Deep-flagged subsystems take the recursive path (deepCtx exists only
+    // when Internals is on and the view has deep entries \u2014 see buildElements).
+    if (deepCtx && entry.kind === 'subsystem' && deepCtx.deepByAnchor[anchorNodeId(entry)]) {
+      return deepLayout(entry, deepCtx.ports[anchorNodeId(entry)]);
+    }
     var kids = state.internals && entry.hasKids ? childrenOf({ kind: entry.kind, id: entry.id }) : [];
     if (!kids.length) return null;
     var scope = { kind: entry.kind, id: entry.id };
@@ -3565,12 +3911,42 @@ var MODEL = __MODEL_JSON__;
     if (scope.kind === 'types' || scope.kind === 'databases') return buildTypeElements();
     var entries = childrenOf(scope);
     var eles = [];
+    var deepCtx = buildDeepContext(scope, entries);
     var ve = viewEdges(scope, entries);
     // Data-coupling overlay: same scoping pipeline, a different edge source.
     var vd = state.dataCoupling ? viewEdges(scope, entries, MODEL.dataEdges) : { agg: {}, ghosts: {} };
     Object.keys(vd.ghosts).forEach(function (g) { if (!ve.ghosts[g]) ve.ghosts[g] = vd.ghosts[g]; });
     var inners = {};
-    entries.forEach(function (e) { inners[anchorNodeId(e)] = innerLayout(e); });
+    entries.forEach(function (e) { inners[anchorNodeId(e)] = innerLayout(e, deepCtx); });
+
+    // Deep-mode recursive tile emission: a nested container becomes a cytoscape
+    // compound parent (no explicit position \u2014 a compound derives its bounds
+    // from its children); leaves and EMPTY containers are plain positioned
+    // nodes. ox/oy = the emitting container's absolute top-left; tile.x/y are
+    // centres relative to it, so offsets accumulate top-down. Search dimming
+    // propagates the TOP entry's dim to the whole subtree.
+    function emitDeepTiles(tiles, parentNodeId, ox, oy, dimCls) {
+      tiles.forEach(function (tile) {
+        var ax = ox + tile.x, ay = oy + tile.y;
+        if (tile.sub) {
+          var nid = SN(tile.kid.id);
+          var selCls = state.selectedKind === 'subsystem' && state.selected === tile.kid.id ? ' sel' : '';
+          var nested = {
+            data: { id: nid, parent: parentNodeId, label: nameOf(tile.kid), w: tile.w, h: tile.h, tw: tile.w - 16 },
+            classes: 'subsysBox' + (tile.sub.tiles.length ? ' drillable' : '') + dimCls + selCls,
+          };
+          if (!tile.sub.tiles.length) nested.position = { x: ax, y: ay };
+          eles.push(nested);
+          emitDeepTiles(tile.sub.tiles, nid, ax - tile.w / 2, ay - tile.h / 2, dimCls);
+        } else {
+          eles.push({
+            data: { id: IN(tile.kid.kind, tile.kid.id), parent: parentNodeId, label: nameOf(tile.kid), w: INNER_W, h: INNER_H, tw: INNER_W - 10 },
+            position: { x: ax, y: ay },
+            classes: 'inner' + dimCls,
+          });
+        }
+      });
+    }
 
     // Resolve a port's reveal target(s) in THIS view. Preference order: the
     // MATCHING PORT inside the counterpart's container (a port-to-port line
@@ -3702,17 +4078,25 @@ var MODEL = __MODEL_JSON__;
         + (state.showIssues && issuesBySpec[e.id] ? ' hasIssue' : '')
         + (state.selectedKind === e.kind && state.selected === e.id ? ' sel' : '');
       if (inner) {
-        eles.push({ data: { id: aid, label: e.kind === 'subsystem' ? nameOf(e) : nameOf(e), w: p.w, h: p.h, tw: p.w - 16 }, classes: classes });
-        inner.tiles.forEach(function (tile) {
-          eles.push({
-            data: {
-              id: IN(tile.kid.kind, tile.kid.id), parent: aid,
-              label: nameOf(tile.kid), w: INNER_W, h: INNER_H, tw: INNER_W - 10,
-            },
-            position: { x: p.x - p.w / 2 + tile.x, y: p.y - p.h / 2 + tile.y },
-            classes: 'inner' + (dim ? ' dimmed' : ''),
+        var boxNode = { data: { id: aid, label: e.kind === 'subsystem' ? nameOf(e) : nameOf(e), w: p.w, h: p.h, tw: p.w - 16 }, classes: classes };
+        // An EMPTY deep boundary box has no children, so it is NOT a compound
+        // parent \u2014 it needs (and honours) an explicit position and size.
+        if (inner.deep && !inner.tiles.length && !(inner.proxies && inner.proxies.length)) boxNode.position = { x: p.x, y: p.y };
+        eles.push(boxNode);
+        if (inner.deep) {
+          emitDeepTiles(inner.tiles, aid, p.x - p.w / 2, p.y - p.h / 2, dim ? ' dimmed' : '');
+        } else {
+          inner.tiles.forEach(function (tile) {
+            eles.push({
+              data: {
+                id: IN(tile.kid.kind, tile.kid.id), parent: aid,
+                label: nameOf(tile.kid), w: INNER_W, h: INNER_H, tw: INNER_W - 10,
+              },
+              position: { x: p.x - p.w / 2 + tile.x, y: p.y - p.h / 2 + tile.y },
+              classes: 'inner' + (dim ? ' dimmed' : ''),
+            });
           });
-        });
+        }
         (inner.proxies || []).forEach(function (px) {
           eles.push({
             data: {
@@ -3865,9 +4249,28 @@ var MODEL = __MODEL_JSON__;
 
     var dimmedAnchors = {};
     entries.forEach(function (e) { if (state.query && !matches(e)) dimmedAnchors[anchorNodeId(e)] = true; });
+
+    // Deep mode: ONE direct line per related pair of concrete visible nodes \u2014
+    // leaf tiles at any depth and/or top-level component boxes (deduped by
+    // buildDeepContext). These lines cross nested boundaries on purpose.
+    if (deepCtx) {
+      var ddi = 0;
+      Object.keys(deepCtx.direct).sort().forEach(function (key) {
+        var d = deepCtx.direct[key];
+        var ddim = state.query && (dimmedAnchors[d.aTop] || dimmedAnchors[d.bTop]);
+        eles.push({
+          data: { id: 'dd' + (ddi++), source: d.src, target: d.tgt, lbl: '' },
+          classes: 'inneredge' + (d.cross ? ' cross' : '') + (ddim ? ' dimmed' : ''),
+        });
+      });
+    }
+
     var i = 0;
     Object.keys(ve.agg).forEach(function (key) {
       var e = ve.agg[key];
+      // Prefer the leaf lines: drop an aggregated container edge whose
+      // constituent relations were ALL drawn as direct deep lines above.
+      if (deepCtx && deepCtx.directTopCount[key] >= e.n) return;
       var bundle = e.n > 1;
       var dim = state.query && (dimmedAnchors[e.src] || dimmedAnchors[e.tgt]);
       var route = routeData(e.src, e.tgt, key);
@@ -4126,22 +4529,58 @@ var MODEL = __MODEL_JSON__;
     }
     return path;
   }
+  // Crumb compaction (compaction stage 5) is a RENDER MODE, not marker-based
+  // reparenting: renderCrumbs rebuilds #crumbs' innerHTML on every navigation,
+  // so nodes physically moved elsewhere would be destroyed by the next render.
+  // The header-compaction stage toggles crumbsCompact and re-renders; compact
+  // keeps the CURRENT scope visible and folds the ancestors into an ordered
+  // "\\u2026" dropdown (document order, root first) whose entries navigate
+  // exactly like the crumbs they replace.
+  var crumbsCompact = false;
+  var lastCrumbsHtml; // no initializer: the boot render at cy-init time precedes this line
+  // Set by the header-compaction IIFE: crumb re-renders change the header's
+  // CONTENT width without resizing #hdr itself (it is edge-anchored), so the
+  // ResizeObserver never fires for them \u2014 renderCrumbs nudges a reflow here.
+  var headerReflowHook = null;
+  function crumbBtnHtml(p, cur) {
+    return '<button class="crumb' + (cur ? ' cur' : '') + '" data-ck="' + p.kind + '" data-ci="' + (p.id || '') + '">' + p.label + '</button>';
+  }
   function renderCrumbs() {
     var el = document.getElementById('crumbs');
     var path = crumbPath();
-    el.innerHTML = path.map(function (p, i) {
-      var cur = i === path.length - 1;
-      return '<button class="crumb' + (cur ? ' cur' : '') + '" data-ck="' + p.kind + '" data-ci="' + (p.id || '') + '">' + p.label + '</button>'
-        + (cur ? '' : '<span class="sep">\\u203A</span>');
-    }).join('');
+    var html;
+    if (crumbsCompact && path.length > 1) {
+      html = '<span class="dropdown" id="crumbDd">'
+        + '<button class="crumb crumbmore" id="crumbMoreBtn" title="Show the collapsed ancestor path">\\u2026</button>'
+        + '<span class="menu" id="crumbMenu">'
+        + path.slice(0, path.length - 1).map(function (p) {
+          return '<button data-ck="' + p.kind + '" data-ci="' + (p.id || '') + '">' + p.label + '</button>';
+        }).join('')
+        + '</span></span>'
+        + '<span class="sep">\\u203A</span>'
+        + crumbBtnHtml(path[path.length - 1], true);
+    } else {
+      html = path.map(function (p, i) {
+        var cur = i === path.length - 1;
+        return crumbBtnHtml(p, cur) + (cur ? '' : '<span class="sep">\\u203A</span>');
+      }).join('');
+    }
+    // No-op renders keep the already-wired nodes (and an open "\\u2026" menu)
+    // intact \u2014 and don't churn the reflow scheduler while a search query types.
+    if (html === lastCrumbsHtml) return;
+    lastCrumbsHtml = html;
+    el.innerHTML = html;
     var btns = el.querySelectorAll('button');
     for (var i = 0; i < btns.length; i++) {
       (function (b) {
+        if (!b.getAttribute('data-ck')) return; // the "\\u2026" trigger toggles, never navigates
         b.addEventListener('click', function () {
           navigateTo(b.getAttribute('data-ck'), b.getAttribute('data-ci') || null);
         });
       })(btns[i]);
     }
+    if (crumbsCompact && path.length > 1) wireDropdown('crumbDd', 'crumbMoreBtn');
+    if (headerReflowHook) headerReflowHook();
   }
   function renderViewHint() {
     if (state.view.kind === 'types' || state.view.kind === 'databases') {
@@ -4408,7 +4847,16 @@ var MODEL = __MODEL_JSON__;
     return c ? { kind: 'subsystem', id: c.subsystem } : { kind: 'system', id: null };
   }
 
-  document.getElementById('search').addEventListener('input', function (ev) { state.query = ev.target.value.trim(); rebuild(false); });
+  // While the search input is compacted behind the magnifier icon (compaction
+  // stage 3), a non-empty query must stay discoverable \u2014 mark the icon with an
+  // accent dot. The class is kept in sync on every query edit; the dot is only
+  // ever visible while the compact icon itself is.
+  function updateSearchBadge() {
+    var b = document.getElementById('searchBtn');
+    if (b && b.classList) b.classList[state.query ? 'add' : 'remove']('hasq');
+  }
+  document.getElementById('search').addEventListener('input', function (ev) { state.query = ev.target.value.trim(); updateSearchBadge(); rebuild(false); });
+  updateSearchBadge();
   // Sync each View toggle's checkbox from the (possibly persisted) state, then
   // persist on change so the choices survive a refresh (see persist()/saved).
   document.getElementById('internalsToggle').checked = state.internals;
@@ -4462,9 +4910,24 @@ var MODEL = __MODEL_JSON__;
       })(btns[i]);
     }
   })();
+  // Compaction stage 4 replaces the mode tabs with one dropdown trigger; its
+  // label must follow the CURRENT mode. updateHeaderSegs runs on every rebuild,
+  // so a mode change made while compact re-labels the trigger immediately.
+  function updateModeBtn() {
+    var b = document.getElementById('modeBtn');
+    if (!b) return;
+    var lbl = state.view.kind === 'types' ? 'Types' : state.view.kind === 'databases' ? 'Databases' : 'Components';
+    b.textContent = lbl + ' \\u25BE';
+  }
   function updateHeaderSegs() {
     var seg = document.getElementById('modeSeg');
     var btns = seg.querySelectorAll('button');
+    if (!btns.length) {
+      // Compaction stage 4 moved the real tab buttons into the mode dropdown \u2014
+      // keep driving THEIR active classes there (they move back node-identical).
+      var mm = document.getElementById('modeMenu');
+      if (mm && mm.querySelectorAll) btns = mm.querySelectorAll('button');
+    }
     for (var i = 0; i < btns.length; i++) {
       var vm = btns[i].getAttribute('data-vm');
       var active = vm === 'components'
@@ -4472,6 +4935,7 @@ var MODEL = __MODEL_JSON__;
         : vm === state.view.kind;
       if (btns[i].classList) btns[i].classList[active ? 'add' : 'remove']('active');
     }
+    updateModeBtn();
     var td = document.getElementById('typesDetailSeg');
     td.style.display = (state.view.kind === 'types' || state.view.kind === 'databases') ? '' : 'none';
     var tbs = td.querySelectorAll('button');
@@ -4535,7 +4999,13 @@ var MODEL = __MODEL_JSON__;
     var r = btn.getBoundingClientRect();
     menu.style.top = (r.bottom + 6) + 'px';
     menu.style.left = 'auto';
-    menu.style.right = Math.max(6, window.innerWidth - r.right) + 'px';
+    // Right-aligned to the trigger, but never pushed off the LEFT edge \u2014 the
+    // compact search / crumb triggers (header compaction) sit on the header's
+    // left side, where a 200px menu right-aligned to a narrow button would clip.
+    var right = Math.max(6, window.innerWidth - r.right);
+    var mw = menu.getBoundingClientRect ? menu.getBoundingClientRect().width : 0;
+    if (mw && window.innerWidth - right - mw < 6) right = Math.max(6, window.innerWidth - mw - 6);
+    menu.style.right = right + 'px';
   }
   function wireDropdown(ddId, btnId) {
     var dd = document.getElementById(ddId);
@@ -4554,11 +5024,29 @@ var MODEL = __MODEL_JSON__;
   var ldd = wireDropdown('layoutDd', 'layoutBtn');
   var sdd = wireDropdown('settingsDd', 'settingsBtn');
   var mdd = wireDropdown('moreDd', 'moreBtn');
+  // Compact stand-ins (header compaction stages 3-4): the search panel and the
+  // mode-tab dropdown are ordinary dropdowns; their triggers stay hidden until
+  // their compaction stage shows them, so wiring them here is inert at full width.
+  var qdd = wireDropdown('searchDd', 'searchBtn');
+  var vdd = wireDropdown('modeDd', 'modeBtn');
+  // Opening the compact search panel focuses the REAL input (stage 3 moves the
+  // node, never clones it, so its input listener keeps driving state.query).
+  // Registered after wireDropdown's toggle, so 'open' reflects the new state.
+  document.getElementById('searchBtn').addEventListener('click', function () {
+    if (String(qdd.className || '').indexOf('open') >= 0) {
+      var inp = document.getElementById('search');
+      if (inp && inp.focus) inp.focus();
+    }
+  });
   // Keep the settings panel open while flipping switches (clicks inside it don't
   // bubble to the document-level close handler).
   (function () {
     var m = document.getElementById('settingsMenu');
     if (m && m.addEventListener) m.addEventListener('click', function (ev) { if (ev && ev.stopPropagation) ev.stopPropagation(); });
+    // Same for the floating search panel: clicking into the input must not
+    // bubble to the document-level close handler and shut the panel mid-typing.
+    var sm = document.getElementById('searchMenu');
+    if (sm && sm.addEventListener) sm.addEventListener('click', function (ev) { if (ev && ev.stopPropagation) ev.stopPropagation(); });
   })();
 
   // Layout picker: choose the auto-layout algorithm. Components use cytoscape's
@@ -4582,6 +5070,12 @@ var MODEL = __MODEL_JSON__;
   });
   updateLayoutBtn();
 
+  // The compact crumb dropdown (compaction stage 5) is re-created by every
+  // compact crumb render, so it is looked up per close instead of captured.
+  function closeCrumbDd() {
+    var cdd = document.getElementById('crumbDd');
+    if (cdd && cdd.classList) cdd.classList.remove('open');
+  }
   if (document.addEventListener) {
     document.addEventListener('click', function () {
       if (dd.classList) dd.classList.remove('open');
@@ -4589,6 +5083,9 @@ var MODEL = __MODEL_JSON__;
       if (ldd.classList) ldd.classList.remove('open');
       if (sdd.classList) sdd.classList.remove('open');
       if (mdd && mdd.classList) mdd.classList.remove('open');
+      if (qdd && qdd.classList) qdd.classList.remove('open');
+      if (vdd && vdd.classList) vdd.classList.remove('open');
+      closeCrumbDd();
     });
     document.addEventListener('keydown', function (ev) {
       if (ev.key === 'Escape') {
@@ -4596,16 +5093,27 @@ var MODEL = __MODEL_JSON__;
         if (modal.classList && String(modal.className).indexOf('open') >= 0) { closeFlow(); return; }
         setPresentation(false);
         if (dd.classList) dd.classList.remove('open');
+        if (qdd && qdd.classList) qdd.classList.remove('open');
+        if (vdd && vdd.classList) vdd.classList.remove('open');
+        closeCrumbDd();
       }
     });
   }
 
-  // \u2500\u2500 Responsive header overflow \u2192 "\u22EF" dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  // When the floating header no longer fits its controls, trailing items
-  // COLLAPSE into the More menu instead of relying on horizontal scroll \u2014
-  // every control stays one click away. Whole items move (listeners survive
-  // reparenting); a hidden placeholder pins each item's original position so
-  // restoring keeps the exact order. Collapse order = least-used first.
+  // \u2500\u2500 Responsive header compaction \u2192 ordered stages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // When the floating header no longer fits its controls, standard reusable
+  // COMPACTION BEHAVIORS apply progressively \u2014 each stage only while the row
+  // still overflows \u2014 and restore in REVERSE order when space returns:
+  //   1. trailing buttons fold into the "\u22EF" menu (least-used first, one by one)
+  //   2. the View dropdown folds in after them
+  //   3. the search input compacts to a \u{1F50D} icon + floating panel
+  //   4. the mode tabs compact to one current-mode dropdown
+  //   5. ancestor crumbs compact into an ordered "\u2026" dropdown
+  // Stages 1-2 move whole items (listeners survive reparenting) with a hidden
+  // placeholder pinning each item's original spot for restore; stage 5 is a
+  // render mode (renderCrumbs rebuilds its innerHTML, so reparenting would not
+  // survive navigation). Nothing here is persisted \u2014 compaction is purely
+  // responsive to the available width.
   (function () {
     if (typeof window === 'undefined') return;
     var hdr = document.getElementById('hdr');
@@ -4633,7 +5141,122 @@ var MODEL = __MODEL_JSON__;
       }
       return markers[id];
     }
-    var collapsed = [];
+    // Fold stage (the classic behavior): move items into the "\u22EF" menu ONE per
+    // apply() call \u2014 the reflow loop keeps a stage active until it reports no
+    // further progress, preserving the original per-button granularity.
+    function foldStage(ids) {
+      var folded = [];
+      return {
+        apply: function () {
+          while (folded.length < ids.length) {
+            var id = ids[folded.length];
+            var el = movableFor(id);
+            if (!el || el === moreDd || el.parentNode === moreMenu) { folded.push({ el: null, marker: null }); continue; }
+            var m = markerFor(id, el);
+            // A dropdown moved while open would strand its fixed-positioned menu.
+            if (el.classList) el.classList.remove('open');
+            moreDd.style.display = '';
+            moreMenu.appendChild(el);
+            folded.push({ el: el, marker: m });
+            return true;
+          }
+          return false;
+        },
+        restore: function () {
+          for (var i = folded.length - 1; i >= 0; i--) {
+            var it = folded[i];
+            if (it.el && it.marker && it.marker.parentNode) it.marker.parentNode.insertBefore(it.el, it.marker);
+          }
+          folded = [];
+        },
+      };
+    }
+    // Stage 3: the search input compacts behind a \u{1F50D} icon; the REAL input node
+    // MOVES into the floating panel (fixed-positioned by the same helper as
+    // every dropdown menu), so its input listener keeps driving state.query.
+    function searchStage() {
+      var on = false;
+      return {
+        apply: function () {
+          if (on) return false;
+          var inp = document.getElementById('search');
+          var ddw = document.getElementById('searchDd');
+          var menu = document.getElementById('searchMenu');
+          if (!inp || !ddw || !menu) return false;
+          menu.appendChild(inp);
+          ddw.style.display = '';
+          on = true;
+          return true;
+        },
+        restore: function () {
+          if (!on) return;
+          on = false;
+          var inp = document.getElementById('search');
+          var ddw = document.getElementById('searchDd');
+          if (inp && ddw && ddw.parentNode) ddw.parentNode.insertBefore(inp, ddw);
+          if (ddw) { ddw.style.display = 'none'; if (ddw.classList) ddw.classList.remove('open'); }
+        },
+      };
+    }
+    // Stage 4: the mode tabs collapse into ONE dropdown labelled with the
+    // current mode. The REAL tab buttons move into its menu (listeners and
+    // active styling survive); updateHeaderSegs keeps the trigger label in
+    // sync when the mode changes while compact.
+    function modeStage() {
+      var moved = [];
+      return {
+        apply: function () {
+          if (moved.length) return false;
+          var seg = document.getElementById('modeSeg');
+          var ddw = document.getElementById('modeDd');
+          var menu = document.getElementById('modeMenu');
+          if (!seg || !ddw || !menu) return false;
+          var btns = seg.querySelectorAll('button');
+          if (!btns.length) return false;
+          for (var i = 0; i < btns.length; i++) moved.push(btns[i]);
+          for (var j = 0; j < moved.length; j++) menu.appendChild(moved[j]);
+          seg.style.display = 'none';
+          ddw.style.display = '';
+          updateModeBtn();
+          return true;
+        },
+        restore: function () {
+          if (!moved.length) return;
+          var seg = document.getElementById('modeSeg');
+          var ddw = document.getElementById('modeDd');
+          for (var i = 0; i < moved.length; i++) seg.appendChild(moved[i]);
+          moved = [];
+          seg.style.display = '';
+          if (ddw) { ddw.style.display = 'none'; if (ddw.classList) ddw.classList.remove('open'); }
+        },
+      };
+    }
+    // Stage 5: crumb compaction is a render-mode toggle consulted by
+    // renderCrumbs itself \u2014 see crumbsCompact there. Never reparenting.
+    function crumbStage() {
+      return {
+        apply: function () {
+          if (crumbsCompact) return false;
+          crumbsCompact = true;
+          renderCrumbs();
+          return true;
+        },
+        restore: function () {
+          if (!crumbsCompact) return;
+          crumbsCompact = false;
+          renderCrumbs();
+        },
+      };
+    }
+    // Ordered compaction stages: applied first-to-last only while the header
+    // overflows, restored last-to-first when space returns.
+    var STAGES = [
+      foldStage(COLLAPSE),        // 1: trailing buttons \u2192 "\u22EF" menu
+      foldStage(['settingsBtn']), // 2: the View dropdown folds in too
+      searchStage(),              // 3: search input \u2192 \u{1F50D} + floating panel
+      modeStage(),                // 4: mode tabs \u2192 current-mode dropdown
+      crumbStage(),               // 5: ancestor crumbs \u2192 "\u2026" dropdown
+    ];
     // Signed fit measure in px: positive = overflowing, negative = headroom.
     // The header is a flex row whose ONLY flex:1 child is the .spacer, so the
     // spacer's rendered width IS the free space -- it grows to absorb all slack
@@ -4649,33 +5272,54 @@ var MODEL = __MODEL_JSON__;
       var slack = spacer ? spacer.getBoundingClientRect().width : 0;
       return (hdr.scrollWidth - hdr.clientWidth) - slack;
     }
+    var inReflow = false;
     function reflow() {
       // Not laid out (hidden tab, non-browser DOM) \u2014 measuring would misfire.
       var box = hdr.getBoundingClientRect();
       if (!box || box.width <= 0) return;
-      // Restore everything, then collapse until the row fits (idempotent).
-      for (var i = collapsed.length - 1; i >= 0; i--) {
-        var it = collapsed[i];
-        if (it.el && it.marker && it.marker.parentNode) it.marker.parentNode.insertBefore(it.el, it.marker);
-      }
-      collapsed = [];
-      moreDd.style.display = 'none';
-      hdr.scrollLeft = 0;
-      var guard = 0;
-      // Demand a few px of headroom, not a bare fit \u2014 the marginal-fit widths
-      // are exactly where the phantom scrollbar appeared.
-      while (overflowPx() > -8 && guard < COLLAPSE.length) {
-        var id = COLLAPSE[guard++];
-        var el = movableFor(id);
-        if (!el || el === moreDd || el.parentNode === moreMenu) continue;
-        var m = markerFor(id, el);
-        // A dropdown moved while open would strand its fixed-positioned menu.
-        if (el.classList) el.classList.remove('open');
-        moreDd.style.display = '';
-        moreMenu.appendChild(el);
-        collapsed.push({ el: el, marker: m });
+      inReflow = true;
+      try {
+        // The floating search panel must survive a reflow cycle: restore-all
+        // would close it (and reparenting blurs the input), so capture its
+        // open/focus state up front and reinstate it after the stage walk.
+        var ddw = document.getElementById('searchDd');
+        var inp = document.getElementById('search');
+        var searchOpen = !!(ddw && String(ddw.className || '').indexOf('open') >= 0);
+        var searchFocus = false;
+        try {
+          var ae = (typeof ROOT !== 'undefined' && ROOT ? ROOT : document).activeElement;
+          searchFocus = !!(ae && inp && ae === inp);
+        } catch (e) { /* stubbed DOM */ }
+        // Restore every stage in REVERSE order, then re-apply progressively
+        // while the row still overflows (idempotent).
+        for (var i = STAGES.length - 1; i >= 0; i--) STAGES[i].restore();
+        moreDd.style.display = 'none';
+        hdr.scrollLeft = 0;
+        // Demand a few px of headroom, not a bare fit \u2014 the marginal-fit widths
+        // are exactly where the phantom scrollbar appeared. Every apply()
+        // changes the very widths being measured, but restore-all + a strictly
+        // forward stage walk make the outcome a pure function of the current
+        // width, and reflow never reschedules itself (renderCrumbs' nudge is
+        // suppressed via inReflow, and #hdr's own box never changes here), so
+        // boundary widths settle in ONE pass instead of oscillating.
+        var si = 0;
+        var guard = 0;
+        var bound = COLLAPSE.length + STAGES.length + 8;
+        while (overflowPx() > -8 && si < STAGES.length && guard < bound) {
+          guard++;
+          if (!STAGES[si].apply()) si++;
+        }
+        if (searchOpen || searchFocus) {
+          var compactNow = ddw && ddw.style && ddw.style.display !== 'none';
+          if (compactNow && searchOpen) {
+            if (ddw.classList) ddw.classList.add('open');
+            positionDropdownMenu(ddw, document.getElementById('searchBtn'));
+          }
+          if (searchFocus && inp && inp.focus) inp.focus();
+        }
+      } finally {
+        inReflow = false;
       }
-      if (collapsed.length === 0) moreDd.style.display = 'none';
     }
     var raf = null;
     var defer = window.requestAnimationFrame
@@ -4685,6 +5329,9 @@ var MODEL = __MODEL_JSON__;
       if (raf !== null) return;
       raf = defer(function () { raf = null; reflow(); });
     }
+    // Crumb re-renders change the header's content width without resizing #hdr
+    // itself \u2014 renderCrumbs nudges a reflow through this hook (no-op mid-reflow).
+    headerReflowHook = function () { if (!inReflow) schedule(); };
     if (typeof ResizeObserver !== 'undefined') {
       new ResizeObserver(schedule).observe(hdr);
     } else if (window.addEventListener) {
@@ -6218,47 +6865,6 @@ var init_filenames = __esm({
   }
 });
 
-// src/core/statehash.ts
-function computeStateId() {
-  const tree = {
-    system: loadSystemSpec(),
-    subsystems: loadSubsystemSpecs(),
-    components: loadComponentSpecs(),
-    interfaces: loadInterfaceSpecs(),
-    implementations: loadImplementationSpecs(),
-    types: loadTypeSpecs()
-  };
-  const digest = crypto.createHash("sha256").update(canonicalize(tree)).digest("hex");
-  return { algorithm: "sha256", digest };
-}
-function stateIdEquals(a, b) {
-  return !!a && !!b && a.algorithm === b.algorithm && a.digest === b.digest;
-}
-function canonicalize(value) {
-  return JSON.stringify(sortKeys(value));
-}
-function sortKeys(v) {
-  if (Array.isArray(v)) return v.map(sortKeys);
-  if (v && typeof v === "object") {
-    const src = v;
-    const out = {};
-    for (const k of Object.keys(src).sort()) {
-      if (k === "createdAt" || k === "updatedAt") continue;
-      out[k] = sortKeys(src[k]);
-    }
-    return out;
-  }
-  return v;
-}
-var crypto;
-var init_statehash = __esm({
-  "src/core/statehash.ts"() {
-    "use strict";
-    crypto = __toESM(require("crypto"));
-    init_specs2();
-  }
-});
-
 // src/core/openapi.ts
 function schemaFor(typeRef, closureIds) {
   const trimmed = typeRef.trim().replace(/^promise\s*<(.+)>$/i, "$1").trim();
@@ -6716,6 +7322,57 @@ function projectOwnSurface(maxAudience) {
 function projectChildSurface() {
   return projectOwnSurface("project");
 }
+function localName(id) {
+  return id.split("::").pop();
+}
+function projectSubsystemSurface(subsystemId) {
+  const system = loadSystemSpec();
+  if (!system) {
+    throw new Error("Cannot project a subsystem surface: the L0 system spec is missing.");
+  }
+  const subsystems = loadSubsystemSpecs();
+  const target = subsystems.find((s) => s.id === subsystemId);
+  if (!target) {
+    throw new Error(`Cannot project a subsystem surface: subsystem "${subsystemId}" does not exist.`);
+  }
+  const components = loadComponentSpecs();
+  const interfaces = loadInterfaceSpecs();
+  const types = loadTypeSpecs();
+  const entries = [];
+  for (const pub of target.publicInterfaces ?? []) {
+    if (!pub.component) continue;
+    const comp = components.find((c) => c.id === pub.component || c.id === `${subsystemId}::${pub.component}`);
+    if (!comp) continue;
+    if (comp.componentType !== "Portal") continue;
+    const compInterfaces = interfaces.filter((i) => i.component === comp.id && (!pub.interface || i.id === pub.interface || i.id === `${subsystemId}::${pub.interface}`));
+    const methods = compInterfaces.flatMap((i) => i.methods);
+    entries.push({
+      id: localName(pub.interface ?? comp.id),
+      name: comp.name,
+      // Family ceiling: a sibling surface is consumable by the system family only.
+      audience: "project",
+      type: pub.type ?? "Custom",
+      // The snapshot carries the LOCAL portal name — consumers resolve cross-tree
+      // refs by their final segment.
+      component: localName(comp.id),
+      methods,
+      ...comp.dispatch && comp.dispatch.length ? { dispatch: comp.dispatch } : {},
+      // Project the backing Portal's auth + basePath so the codec can emit
+      // OpenAPI security + per-portal servers self-contained from the snapshot.
+      ...comp.auth && comp.auth.scheme !== "none" ? { auth: comp.auth } : {},
+      ...comp.basePath ? { basePath: comp.basePath } : {},
+      details: pub.details ?? ""
+    });
+  }
+  return SurfaceSnapshotSchema.parse({
+    projectName: `${system.name}::${subsystemId}`,
+    origin: "generated",
+    stateId: stateIdString(),
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    interfaces: entries,
+    types: computeTypeClosure(entries, types)
+  });
+}
 function listSnapshots(rootDir = getProjectRoot()) {
   const dir = surfacesDir(rootDir);
   if (!fs4.existsSync(dir)) return [];
@@ -6732,18 +7389,37 @@ function listSnapshots(rootDir = getProjectRoot()) {
 function getSnapshot(projectName, rootDir = getProjectRoot()) {
   return listSnapshots(rootDir).find((s) => s.projectName === projectName) ?? null;
 }
+function snapshotFilename(projectName) {
+  return `${safeFilenamePart(projectName)}.yaml`;
+}
 function saveSnapshot(snapshot, rootDir = getProjectRoot()) {
   const dir = surfacesDir(rootDir);
   fs4.mkdirSync(dir, { recursive: true });
-  const p = path5.join(dir, `${snapshot.projectName}.yaml`);
+  const p = path5.join(dir, snapshotFilename(snapshot.projectName));
   writeYamlFile(p, SurfaceSnapshotSchema.parse(snapshot));
   return p;
 }
 function removeSnapshot(projectName, rootDir = getProjectRoot()) {
-  const p = path5.join(surfacesDir(rootDir), `${projectName}.yaml`);
-  if (!fs4.existsSync(p)) return false;
-  fs4.unlinkSync(p);
-  return true;
+  const dir = surfacesDir(rootDir);
+  const direct = path5.join(dir, snapshotFilename(projectName));
+  if (fs4.existsSync(direct)) {
+    fs4.unlinkSync(direct);
+    return true;
+  }
+  if (!fs4.existsSync(dir)) return false;
+  for (const file of fs4.readdirSync(dir)) {
+    if (!file.endsWith(".yaml") && !file.endsWith(".yml")) continue;
+    const p = path5.join(dir, file);
+    try {
+      const snap = SurfaceSnapshotSchema.parse(readYamlFile(p));
+      if (snap.projectName === projectName) {
+        fs4.unlinkSync(p);
+        return true;
+      }
+    } catch {
+    }
+  }
+  return false;
 }
 function loadSurfaceSnapshots() {
   return listSnapshots();
@@ -6814,17 +7490,54 @@ function importSurface(sourcePath, origin) {
   return snapshot;
 }
 function generateChildSnapshots(rootDir = getProjectRoot()) {
-  const children = loadSubsystemSpecs().filter((s) => s.projectPath && !s.id.includes("::"));
+  const topLevel = loadSubsystemSpecs().filter((s) => !s.id.includes("::"));
+  const children = topLevel.filter((s) => s.projectPath);
   if (!children.length) return [];
-  const snapshot = projectChildSurface();
+  const familySnapshot = projectChildSurface();
+  const siblingSnapshots = /* @__PURE__ */ new Map();
+  const siblingSurface = (subsystemId) => {
+    let snap = siblingSnapshots.get(subsystemId);
+    if (!snap) {
+      snap = projectSubsystemSurface(subsystemId);
+      siblingSnapshots.set(subsystemId, snap);
+    }
+    return snap;
+  };
   const written = [];
   for (const child of children) {
     const childDir = path5.resolve(rootDir, child.projectPath);
     if (!fs4.existsSync(childDir)) continue;
-    written.push(saveSnapshot(snapshot, childDir));
+    written.push(saveSnapshot(familySnapshot, childDir));
+    for (const sibling of topLevel) {
+      if (sibling.id === child.id) continue;
+      written.push(saveSnapshot(siblingSurface(sibling.id), childDir));
+    }
   }
   return written;
 }
+function computeParentStateId(parentRoot) {
+  return computeStateIdAt(parentRoot);
+}
+function listExternalInterfaces() {
+  const snapshots = listSnapshots();
+  const chainingParent = resolveChainingParent();
+  const parentStateId = chainingParent ? computeParentStateId(chainingParent.parentRoot) : null;
+  return snapshots.map((snapshot) => {
+    const generated = snapshot.origin === "generated";
+    const sourceKind = !generated ? "foreign" : snapshot.projectName.includes("::") ? "sibling" : "parent";
+    const freshness = generated && parentStateId ? snapshot.stateId === parentStateId ? "fresh" : "stale" : "unverifiable";
+    return {
+      projectName: snapshot.projectName,
+      origin: snapshot.origin,
+      sourceKind,
+      generatedAt: snapshot.generatedAt,
+      ...snapshot.stateId ? { stateId: snapshot.stateId } : {},
+      ...snapshot.version ? { version: snapshot.version } : {},
+      freshness,
+      interfaceIds: snapshot.interfaces.map((e) => e.id)
+    };
+  });
+}
 function surfaceContentKey(snapshot) {
   const { stateId, generatedAt, origin, ...content } = snapshot;
   return JSON.stringify(content);
@@ -7033,7 +7746,8 @@ var init_contracts = __esm({
                           "SURFACE_REF_NOT_EXPOSED",
                           `Method "${implMethod.name}" in implementation "${impl.id}" dispatches capability "${step.capability}" through cross-tree portal "${step.targetComponent}" (step ${step.stepNumber}), but the surface snapshot of "${resolved.snapshot.projectName}" does not serve that capability on "${resolved.entry.id}".`,
                           impl.id,
-                          isDraftCtx
+                          isDraftCtx,
+                          true
                         );
                       }
                       continue;
@@ -7090,7 +7804,8 @@ var init_contracts = __esm({
                         "SURFACE_REF_NOT_EXPOSED",
                         `Method "${implMethod.name}" in implementation "${impl.id}" calls "${step.targetMethod}" on cross-tree component "${step.targetComponent}" (step ${step.stepNumber}), but the surface snapshot of "${resolved.snapshot.projectName}" does not expose that method on "${resolved.entry.id}".`,
                         impl.id,
-                        isDraftCtx
+                        isDraftCtx,
+                        true
                       );
                     } else if (step.assertsGuarantees) {
                       const declared = new Set(surfaceMethod.guarantees ?? []);
@@ -7101,7 +7816,8 @@ var init_contracts = __esm({
                             "NARRATIVE_SEMANTIC_UNBACKED",
                             `Step ${step.stepNumber} of "${implMethod.name}" in implementation "${impl.id}" asserts guarantee "${g}", but the surface snapshot of "${resolved.snapshot.projectName}" does not declare it on "${resolved.entry.id}.${step.targetMethod}".`,
                             impl.id,
-                            isDraftCtx
+                            isDraftCtx,
+                            true
                           );
                         }
                       }
@@ -8589,7 +9305,8 @@ var init_stereotype_deps = __esm({
                       "CROSS_SUBSYSTEM_NON_ADAPTER",
                       `Boundary violation: ${comp.componentType} "${comp.id}" depends directly on "${depId}", a surface of project "${resolved.snapshot.projectName}". Only a local client Adapter may cross a project boundary \u2014 route this hop through an Adapter.`,
                       comp.id,
-                      isDraftCtx
+                      isDraftCtx,
+                      true
                     );
                   }
                   continue;
@@ -11847,9 +12564,15 @@ function buildRuleContext(opts) {
     ...[...SDD_RULES, ...extensions.rules].flatMap((r) => r.codes.map((c) => c.code)),
     // Declarative assertions bring their own namespaced codes — lint.allow
     // and severity overrides treat them exactly like builtins.
-    ...extensions.assertions.map((a) => a.fullCode)
+    ...extensions.assertions.map((a) => a.fullCode),
+    // Entry-point emitted codes: validateSddTree's chained-subproject pass
+    // raises these AFTER the rule run (it post-processes the aggregated issue
+    // list), so no registered rule declares them — but lint.allow validation
+    // must still recognize them as real codes.
+    "CHAINED_SUBPROJECT_CONTEXT",
+    "UNVERIFIED_EXTERNAL_REF"
   ]);
-  const addIssue = (defaultSeverity, code, message, specId, isDraftContext) => {
+  const addIssue = (defaultSeverity, code, message, specId, isDraftContext, surfaceResolved) => {
     if (scopeSubsystem && specId && !isSpecInScope(specId)) {
       return;
     }
@@ -11867,7 +12590,14 @@ function buildRuleContext(opts) {
         if (severity === "warning") return;
       }
     }
-    issues.push({ severity, code, message, specId, ...isDraftContext ? { draftContext: true } : {} });
+    issues.push({
+      severity,
+      code,
+      message,
+      specId,
+      ...isDraftContext ? { draftContext: true } : {},
+      ...surfaceResolved ? { surfaceResolved: true } : {}
+    });
   };
   return {
     system,
@@ -12345,24 +13075,54 @@ function validateSddTree(rulesOrOptions, projectType = "backend") {
     for (const rule of ruleSequence()) {
       rule.check(ctx);
     }
-    const hasCrossTreeSuspects = issues.some((i) => SUBPROJECT_LENIENT_CODES.has(i.code));
+    const hasCrossTreeSuspects = issues.some(
+      (i) => SUBPROJECT_REFERENCE_CODES.has(i.code) || SUBPROJECT_CONFORMANCE_CODES.has(i.code)
+    );
     const chainingParent = hasCrossTreeSuspects ? findChainingParent(getProjectRoot()) : null;
     if (chainingParent) {
+      let unverified = 0;
       let downgraded = 0;
-      for (const iss of issues) {
-        if (!SUBPROJECT_LENIENT_CODES.has(iss.code)) continue;
-        if (iss.severity === "error") {
-          iss.severity = "warning";
-          downgraded++;
+      for (let at = 0; at < issues.length; at++) {
+        const iss = issues[at];
+        if (SUBPROJECT_REFERENCE_CODES.has(iss.code) && !iss.surfaceResolved) {
+          issues[at] = {
+            severity: "warning",
+            code: "UNVERIFIED_EXTERNAL_REF",
+            crossTreeContext: true,
+            // --ci waives it (parent root is authoritative)
+            specId: iss.specId,
+            ...iss.agentId ? { agentId: iss.agentId } : {},
+            ...iss.draftContext ? { draftContext: true } : {},
+            message: `Unverified external reference (${iss.code}): ${iss.message} No vendored surface snapshot covers this reference, so it cannot be verified from this chained subproject standalone \u2014 re-lock the parent so fresh family/sibling snapshots ship, or inspect what this project can consume via \`wairon surface externals\` / sdd_list_external_interfaces.`
+          };
+          unverified++;
+          continue;
+        }
+        if (SUBPROJECT_CONFORMANCE_CODES.has(iss.code)) {
+          if (iss.severity === "error") {
+            iss.severity = "warning";
+            downgraded++;
+          }
+          iss.crossTreeContext = true;
         }
-        iss.crossTreeContext = true;
       }
-      if (downgraded > 0) {
+      if (unverified > 0 || downgraded > 0) {
+        const notes = [];
+        if (unverified > 0) {
+          notes.push(
+            `${unverified} cross-tree reference(s) have no vendored surface snapshot covering them and were reported as UNVERIFIED_EXTERNAL_REF warnings \u2014 re-lock the parent so fresh family/sibling snapshots ship, or inspect via \`wairon surface externals\` / sdd_list_external_interfaces.`
+          );
+        }
+        if (downgraded > 0) {
+          notes.push(
+            `${downgraded} code\u2194spec conformance finding(s) (parent-root-relative source paths) were downgraded to warnings.`
+          );
+        }
         issues.unshift({
           severity: "warning",
           code: "CHAINED_SUBPROJECT_CONTEXT",
           crossTreeContext: true,
-          message: `This project is a chained subproject ("${chainingParent.subsystemId}") of the parent project at "${chainingParent.parentRoot}". ${downgraded} reference(s) resolve only in the parent tree (shared types, sibling subsystems, or cross-tree components that live above this root) and were downgraded to warnings \u2014 validating a subproject standalone cannot verify them. Run validation from the parent root for full cross-tree verification.`
+          message: `This project is a chained subproject ("${chainingParent.subsystemId}") of the parent project at "${chainingParent.parentRoot}". ${notes.join(" ")} Full cross-tree verification runs from the parent root.`
         });
       }
     }
@@ -12379,7 +13139,7 @@ function validateSddTree(rulesOrOptions, projectType = "backend") {
 function validateAsComplete(options) {
   return validateSddTree({ ...options ?? {}, treatAllAsComplete: true });
 }
-var SUBPROJECT_LENIENT_CODES;
+var SUBPROJECT_REFERENCE_CODES, SUBPROJECT_CONFORMANCE_CODES;
 var init_validation = __esm({
   "src/core/validation.ts"() {
     "use strict";
@@ -12392,8 +13152,7 @@ var init_validation = __esm({
     init_source_analysis();
     init_specs2();
     init_fs();
-    SUBPROJECT_LENIENT_CODES = /* @__PURE__ */ new Set([
-      // reference resolution
+    SUBPROJECT_REFERENCE_CODES = /* @__PURE__ */ new Set([
       "UNDEFINED_TYPE_REFERENCE",
       "INVALID_DEPENDENCY_REFERENCE",
       "INVALID_TARGET_COMPONENT_REFERENCE",
@@ -12401,8 +13160,9 @@ var init_validation = __esm({
       "UNDECLARED_DEPENDENCY_CALL",
       "INVALID_TRUSTED_LINK",
       "CROSS_SUBSYSTEM_NON_ADAPTER",
-      "CROSS_TREE_REF_UNRESOLVED",
-      // code↔spec conformance (root-relative sourcePaths / import graph)
+      "CROSS_TREE_REF_UNRESOLVED"
+    ]);
+    SUBPROJECT_CONFORMANCE_CODES = /* @__PURE__ */ new Set([
       "MISSING_SOURCE_FILE",
       "SOURCE_PATH_ESCAPES_ROOT",
       "MISSING_SOURCE_PATH",
@@ -13325,6 +14085,19 @@ function dryRunSerializeSpecs(include) {
 function buildProjectGraph(level) {
   return buildGraphModel(level);
 }
+function resolveChainingParent() {
+  return findChainingParent(getProjectRoot());
+}
+function computeStateIdAt(root) {
+  const resolved = path10.resolve(root);
+  return runWithProjectRoot(resolved, () => {
+    workspaceFor(resolved).invalidate();
+    const system = loadSystemSpec();
+    if (!system) return null;
+    const s = computeStateId();
+    return `${s.algorithm}:${s.digest}`;
+  });
+}
 function deleteTypeSpec(id) {
   return current().deleteTypeSpec(id);
 }
@@ -13368,6 +14141,7 @@ var init_specs2 = __esm({
     path10 = __toESM(require("path"));
     init_loader();
     init_fs();
+    init_statehash();
     init_yaml();
     init_models();
     init_narrative_labels();
@@ -15532,7 +16306,9 @@ __export(src_exports, {
   clearLoaderIssues: () => clearLoaderIssues,
   collectPromotableSpecs: () => collectPromotableSpecs,
   composeRuleSequence: () => composeRuleSequence,
+  computeParentStateId: () => computeParentStateId,
   computeStateId: () => computeStateId,
+  computeStateIdAt: () => computeStateIdAt,
   contextDir: () => contextDir,
   createAgentRecord: () => createAgentRecord,
   createChainedSubsystem: () => createChainedSubsystem,
@@ -15598,6 +16374,7 @@ __export(src_exports, {
   isOpenApiDocument: () => isOpenApiDocument,
   isProjectInitialized: () => isProjectInitialized,
   listDirectChainedSubprojects: () => listDirectChainedSubprojects,
+  listExternalInterfaces: () => listExternalInterfaces,
   listFiles: () => listFiles,
   listFilesRecursive: () => listFilesRecursive,
   listFreeStandingDomains: () => listFreeStandingDomains,
@@ -15643,6 +16420,7 @@ __export(src_exports, {
   pathExists: () => pathExists,
   projectChildSurface: () => projectChildSurface,
   projectOwnSurface: () => projectOwnSurface,
+  projectSubsystemSurface: () => projectSubsystemSurface,
   promoteAllComplete: () => promoteAllComplete,
   provisionProject: () => provisionProject,
   readArchitectureContext: () => readArchitectureContext,
@@ -15662,6 +16440,7 @@ __export(src_exports, {
   renderTemplateInstructions: () => renderTemplateInstructions,
   renderWaironGuide: () => renderWaironGuide,
   resolveAgentTopology: () => resolveAgentTopology,
+  resolveChainingParent: () => resolveChainingParent,
   resolveDomains: () => resolveDomains,
   resolvePackRef: () => resolvePackRef,
   resolveSubprojectForNamespace: () => resolveSubprojectForNamespace,
@@ -15725,7 +16504,7 @@ function defaultTargetConfig(type) {
     enabled: true
   };
 }
-var WAIRON_VERSION = "5.0.2-dev.12";
+var WAIRON_VERSION = "5.0.2-dev.14";
 var GITHUB_REPO = "SYW-Apps/Waffle-AIron";
 var ARCHITECT_AGENT_ID = "agent-architect";
 var ARCHITECT_TEMPLATE_ID = "architect";
@@ -17119,7 +17898,9 @@ init_yaml();
   clearLoaderIssues,
   collectPromotableSpecs,
   composeRuleSequence,
+  computeParentStateId,
   computeStateId,
+  computeStateIdAt,
   contextDir,
   createAgentRecord,
   createChainedSubsystem,
@@ -17185,6 +17966,7 @@ init_yaml();
   isOpenApiDocument,
   isProjectInitialized,
   listDirectChainedSubprojects,
+  listExternalInterfaces,
   listFiles,
   listFilesRecursive,
   listFreeStandingDomains,
@@ -17230,6 +18012,7 @@ init_yaml();
   pathExists,
   projectChildSurface,
   projectOwnSurface,
+  projectSubsystemSurface,
   promoteAllComplete,
   provisionProject,
   readArchitectureContext,
@@ -17249,6 +18032,7 @@ init_yaml();
   renderTemplateInstructions,
   renderWaironGuide,
   resolveAgentTopology,
+  resolveChainingParent,
   resolveDomains,
   resolvePackRef,
   resolveSubprojectForNamespace,