okf 1.10.0 → 1.12.0

data/lib/okf/render/graph/template.html.erb

@@ -50,7 +50,12 @@
  :root{
   --bg:#ffffff; --panel:#ffffff; --panel-2:#f6f7f8; --canvas:#f4f5f7; --ink:#1f2328; --ink-soft:#333333;
   --muted:#63697a; --faint:#9298a4; --line:#e6e8eb; --line-2:#eef0f2;
-  --accent:#e21e1e; --accent-ink:#c81a1a; --accent-soft:#fdecec; --edge:#cfd4db; --ok:#1a9e5f;
+  /* --edge was #cfd4db, which is 1.38:1 against the canvas — dark mode's
+     equivalent is 1.67:1, so light was always the weaker theme and anything
+     drawn *softer* than a plain edge fell off the cliff there first. #b9c0ca
+     brings it to 1.72:1, level with dark, and the cluster box borders that
+     share the token get the same benefit. */
+  --accent:#e21e1e; --accent-ink:#c81a1a; --accent-soft:#fdecec; --edge:#b9c0ca; --ok:#1a9e5f;
   --rail:#15171c; --rail-ink:#8b919c; --rail-ink-hi:#dfe2e7;
   --shadow:0 1px 2px rgba(20,24,33,.05),0 8px 24px rgba(20,24,33,.07);
  }
@@ -120,6 +125,15 @@
   font:inherit;font-size:13px;padding:0 10px;outline:none;transition:border-color .15s,box-shadow .15s}
  .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .field::placeholder{color:var(--muted)}
+ /* iOS Safari zooms the page whenever a focused control is under 16px, and it
+    never zooms back out — so every `/` left the reader pinching. 16px is the
+    whole fix; `maximum-scale=1` would also stop it and is the wrong trade, since
+    it takes pinch-zoom away from everyone to spare one gesture.
+    Both conditions, because neither covers the other: a phone is narrow, and a
+    tablet in landscape is not — but it still zooms. Desktop keeps 13px. */
+ @media (max-width:768px),(pointer:coarse){
+  .field{font-size:16px}
+ }
  .search{position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:130px;max-width:520px}
  .search svg{position:absolute;left:11px;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;pointer-events:none}
  .search input{width:100%;padding-left:33px;padding-right:52px}
@@ -154,6 +168,12 @@
  .sb-act kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--faint);
   border:1px solid var(--line);border-radius:4px;padding:1px 4px;background:var(--panel);line-height:1.3}
  .selwrap{position:relative;display:inline-flex;flex:none}
+ /* `display:inline-flex` above outranks the [hidden] attribute's own
+    display:none, so the depth select would sit in the bar unclustered. */
+ .selwrap[hidden]{display:none}
+ /* the depth control is a single digit — sized to its content, not to the
+    layout select beside it */
+ #cluster-depth{padding-right:26px;min-width:0}
  .selwrap::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
  select.field{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer}
  select.field:disabled{opacity:.45;cursor:not-allowed}
@@ -164,6 +184,26 @@
  .btn[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
  .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .btn[hidden]{display:none}
+ /* ── segmented control: one setting, every state on screen ──
+    Three .btn segments sharing one border, so the group reads as a single
+    control rather than three neighbours that happen to touch. `aria-checked`
+    carries the selection instead of `aria-pressed` — these are exclusive, and
+    a radio group is what a reader's screen reader should hear.
+    The segments are narrower than a standalone .btn (30 vs 34) so the whole
+    group lands near a single select's width instead of dwarfing the bar. */
+ .seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}
+ .seg .seg-b{width:32px;height:32px;border:0;border-radius:0;background:transparent}
+ /* Larger than a toolbar icon: these glyphs carry three beads and a span in the
+    space a normal icon uses for one shape, and at 16px the beads sank into the
+    line they sit on — the spine segment read as a bare dash. */
+ .seg .seg-b svg{width:19px;height:19px}
+ .seg .seg-b+.seg-b{border-left:1px solid var(--line)}
+ .seg .seg-b:hover{background:var(--panel-2);border-color:var(--line)}
+ .seg .seg-b[aria-checked=true]{color:var(--accent);background:var(--accent-soft)}
+ /* The focus ring goes on the segment, never on the group: outlining the whole
+    control put an accent border around all three at once, which reads as "this
+    setting is on" and competes with the fill that actually says so. */
+ .seg .seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .btn.text{width:auto;display:inline-flex;align-items:center;padding:0 12px;gap:7px;font-size:13px;font-weight:500;color:var(--ink)}
  /* `.btn.text` sets display, which outranks `.btn[hidden]` above at equal
     specificity — so hiding a text button (e.g. #fp-graph on a log) needs its own
@@ -285,6 +325,7 @@
  .ws-pill.def{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
  .ws-meta{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);margin-top:3px;flex-wrap:wrap}
  .ws-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint)}
+ .ws-where{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint)}
  .ws-health.ok{color:var(--ok)} .ws-health.warn{color:var(--warn)}
  .ws-health.error,.ws-health.missing{color:var(--accent-ink)}
  .ws-slug-edit{height:24px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;padding:0 7px;width:150px;border-radius:6px}
@@ -405,7 +446,7 @@
  #sw-input{width:100%;box-sizing:border-box}
  #sw-list{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow:auto}
  #sw-list a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
- #sw-list a .slug{margin-left:auto;color:var(--faint);font-size:12px}
+ #sw-list a .slug,#sw-list a .sw-where{margin-left:auto;color:var(--faint);font-size:12px}
  #sw-list .sw-grp{margin:9px 0 3px;padding:0 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
  #sw-list .sw-grp:first-child{margin-top:0}
  /* Under a hub a view is the sideline, so it sits at the muted weight until the
@@ -764,9 +805,15 @@
   #app.controls-open #file-controls .combo{flex:1 1 44%;width:auto;min-width:130px}
   /* Wrapping by whatever happened to fit left one icon orphaned on a line of its
      own. The two controls carrying words take a column each, so the first line
-     is two even halves; the icon buttons then get a line to themselves and
-     spread across it. */
-  #app.controls-open #graph-controls{gap:8px}
+     is two even halves; the icon buttons then get a line to themselves.
+     Centred, because that line is the only one that does not fill the width —
+     Filters and the layout select are 50% each and reach both edges, so a
+     left-aligned icon row hung off the left with a pool of dead space to its
+     right, reading as a layout accident rather than a row. (`justify-content`
+     was simply never set: the comment here used to claim the icons spread
+     across the line, and they never did.) The first line is unaffected — its
+     two items already fill it, so there is no free space to distribute. */
+  #app.controls-open #graph-controls{gap:8px;justify-content:center}
   #app.controls-open #graph-controls>#btn-filters,
   #app.controls-open #graph-controls>.selwrap{flex:1 1 calc(50% - 4px);min-width:0}
   /* the select has to grow with its wrapper. Stretching only the wrapper left
@@ -891,12 +938,32 @@
     </select></span>
     <button class="btn" id="btn-fit" type="button" aria-label="Fit graph to screen" title="Fit graph to screen">
      <svg viewBox="0 0 24 24"><path d="M3 9V6a2 2 0 0 1 2-2h3M21 9V6a2 2 0 0 0-2-2h-3M3 15v3a2 2 0 0 0 2 2h3M21 15v3a2 2 0 0 0-2 2h-3"/><rect x="9.5" y="9.5" width="5" height="5" rx="1"/></svg></button>
-    <button class="btn" id="btn-cluster" type="button" aria-label="Cluster by area" aria-pressed="false" title="Cluster nodes by area">
+    <button class="btn" id="btn-cluster" type="button" aria-label="Cluster by directory" aria-pressed="false" title="Cluster by directory — each cluster is a directory of concepts">
      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4" opacity=".45"/><circle cx="9" cy="9" r="1.9" fill="currentColor" stroke="none"/><circle cx="15" cy="10" r="1.9" fill="currentColor" stroke="none"/><circle cx="11" cy="15" r="1.9" fill="currentColor" stroke="none"/></svg></button>
+    <span class="selwrap" id="cluster-depth-wrap" hidden><select id="cluster-depth" class="field" aria-label="Cluster depth" title="How many directory levels to nest"></select></span>
     <button class="btn" id="btn-tree" type="button" aria-label="File tree" aria-pressed="false" title="File tree: folders and files, parent-to-child edges only">
      <svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="5" rx="1.2"/><rect x="3" y="16" width="6" height="5" rx="1.2"/><rect x="15" y="16" width="6" height="5" rx="1.2"/><path d="M12 8v4M12 12H6v4M12 12h6v4"/></svg></button>
     <button class="btn" id="btn-ix" type="button" aria-label="Show indexes" aria-pressed="false" title="Draw the index.md map layer alongside the concepts">
      <svg viewBox="0 0 24 24"><path d="M4 5h16M4 9.6h10.5M4 14.2h16M4 18.8h7.5"/></svg></button>
+    <!-- How many links to draw. Three segments, each a miniature of what it does
+         to the graph: the same three concepts in the same places every time, and
+         only the wire between them changes — an extra span over the top, a single
+         line through, nothing.
+
+         The row is not an arbitrary arrangement. Three dots on one axis joined by
+         one stroke *is* a spine, so the middle segment depicts the word it means;
+         and because the dots never move, the eye reads the difference as wire
+         added or taken away rather than as three unrelated symbols. A triangle
+         was tried first and failed exactly there — dropping one of its edges
+         changes the shape (it reads as a "7") instead of reading as less. -->
+    <div class="seg" id="links" role="radiogroup" aria-label="How many links to draw">
+     <button class="btn seg-b" type="button" role="radio" data-links="all" aria-checked="true" title="All links — every link in the bundle">
+      <svg viewBox="0 0 24 24"><path d="M4 15h16M4 15q8-12 16 0"/><circle cx="4" cy="15" r="2.2" fill="currentColor" stroke="none"/><circle cx="12" cy="15" r="2.2" fill="currentColor" stroke="none"/><circle cx="20" cy="15" r="2.2" fill="currentColor" stroke="none"/></svg></button>
+     <button class="btn seg-b" type="button" role="radio" data-links="spine" aria-checked="false" title="Spine — each concept's strongest link, so nothing floats">
+      <svg viewBox="0 0 24 24"><path d="M4 15h16"/><circle cx="4" cy="15" r="2.2" fill="currentColor" stroke="none"/><circle cx="12" cy="15" r="2.2" fill="currentColor" stroke="none"/><circle cx="20" cy="15" r="2.2" fill="currentColor" stroke="none"/></svg></button>
+     <button class="btn seg-b" type="button" role="radio" data-links="none" aria-checked="false" title="No links — a concept's own appear when you select it">
+      <svg viewBox="0 0 24 24"><circle cx="4" cy="15" r="2.2" fill="currentColor" stroke="none"/><circle cx="12" cy="15" r="2.2" fill="currentColor" stroke="none"/><circle cx="20" cy="15" r="2.2" fill="currentColor" stroke="none"/></svg></button>
+    </div>
     <button class="btn" id="btn-panel" type="button" aria-label="Toggle inspector" aria-pressed="true"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></svg></button>
    </div>
    </div>
@@ -916,9 +983,9 @@
         <button class="btn" id="filters-close" type="button" aria-label="Close filters" style="width:28px;height:28px"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
        <div class="fbody">
         <label class="search" style="max-width:none;margin-bottom:12px"><svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
-         <input id="filter-search" class="field" placeholder="find a type, area, tag…" autocomplete="off" aria-label="Find a filter"></label>
+         <input id="filter-search" class="field" placeholder="find a type, dir, tag…" autocomplete="off" aria-label="Find a filter"></label>
         <div class="fgroup"><h4>Types</h4><div class="fchips" id="ftypes"></div></div>
-        <div class="fgroup"><h4>Areas</h4><div class="fchips" id="fareas"></div></div>
+        <div class="fgroup"><h4>Dirs</h4><div class="fchips" id="fdirs"></div></div>
         <div class="fgroup"><h4>Tags</h4><div class="fchips" id="ftags"></div></div>
        </div>
       </aside>
@@ -965,7 +1032,7 @@
       <label class="search" style="max-width:none;margin-bottom:12px"><svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        <input id="cat-filter-search" class="field" placeholder="find a type, area, tag…" autocomplete="off"></label>
       <div class="fgroup"><h4>Types</h4><div class="fchips" id="cat-ftypes"></div></div>
-      <div class="fgroup"><h4>Areas</h4><div class="fchips" id="cat-fareas"></div></div>
+      <div class="fgroup"><h4>Dirs</h4><div class="fchips" id="cat-fdirs"></div></div>
       <div class="fgroup"><h4>Tags</h4><div class="fchips" id="cat-ftags"></div></div>
      </div>
     </aside>
@@ -1008,7 +1075,7 @@
       <button class="btn" id="tag-filters-close" type="button" aria-label="Close filters" style="width:28px;height:28px"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
      <div class="fbody">
       <div class="fgroup"><h4>Types</h4><div class="fchips" id="tag-ftypes"></div></div>
-      <div class="fgroup"><h4>Areas</h4><div class="fchips" id="tag-fareas"></div></div>
+      <div class="fgroup"><h4>Dirs</h4><div class="fchips" id="tag-fdirs"></div></div>
      </div>
     </aside>
    </section>
@@ -1020,7 +1087,7 @@
      <div class="stat-grid" id="stat-grid"></div>
      <div class="two">
       <div><div class="shead"><h2>By type</h2></div><div class="bars" id="bars-type"></div></div>
-      <div><div class="shead"><h2>By area</h2></div><div class="bars" id="bars-area"></div></div>
+      <div><div class="shead"><h2>By dir</h2></div><div class="bars" id="bars-dir"></div></div>
      </div>
     </div>
    </section>
@@ -1098,7 +1165,7 @@
      Mermaid (lazy)                fullscreen diagram viewer
      inspector                     drag-resize splitters
      graph filters                 layout
-     cluster by area               file-tree mode
+     cluster by directory          file-tree mode
      the authored layer            fit to screen
      view switching                full-text search
      catalog                       files
@@ -1115,7 +1182,7 @@
    1. `applyGraphFilter()` is the shared sink. The search box, the three chip
       groups in the slide-over, the inspector's focus chips and cluster mode
       all funnel into it, and it reads `q.graph`, `activeTypes`, `activeTags`,
-      `activeAreas` and `ftMatch()` together. Touching any one caller can
+      `activeDirs` and `ftMatch()` together. Touching any one caller can
       change what the other four produce.
    2. `setView()` reaches into nearly every section — it toggles the tool
       groups, seeds a view on first entry via `inited`, and has to
@@ -1125,7 +1192,8 @@
       filled by one section and read by three or four. A stale one is
       invisible until an unrelated view renders wrong.
 
-   The mode flags (`clustered`, `treeMode`, `ixNodes`, `ixOnly`, `view`) are
+   The mode flags (`clustered` + `clusterDepth`, `treeMode`, `ixNodes`,
+   `ixOnly`, `view`) are
    read across boundaries too: each rebuilds the graph's elements and must
    undo itself exactly, or its nodes leak into the plain view.
 
@@ -1134,6 +1202,11 @@
    real page in Chromium and fails on any error the page throws.
    ═════════════════════════════════════════════════════════════════════════ */
 const NODES=<%= nodes_json %>, EDGES=<%= edges_json %>, TYPES=<%= types_json %>, TAGS=<%= tags_json %>;
+/* Index-aligned with EDGES: the cut each link survives (OKF::Bundle::Skeleton).
+   Read once, at boot, to lay the graph out on its strongest links first — which
+   is earlier than any fetch could answer, and the whole reason it is inlined
+   rather than served from /skeleton with the arcs. */
+const EDGE_CUT=<%= edge_cuts_json %>;
 const NODE_ENDPOINT=<%= @node_endpoint.to_json %>, META_ENDPOINT=<%= @meta_endpoint.to_json %>;
 const BUNDLE=<%= name_json %>;
 const CATALOG_ENDPOINT="catalog",INDEX_ENDPOINT="index",LOG_ENDPOINT="log";
@@ -1187,7 +1260,28 @@ const esc=s=>(s==null?'':String(s)).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt
 const cvar=n=>getComputedStyle(root).getPropertyValue(n).trim();
 const isDark=()=>root.getAttribute('data-theme')==='dark';
 const reduce=()=>matchMedia('(prefers-reduced-motion:reduce)').matches;
-const areaOf=id=>id.includes('/')?id.split('/')[0]:'(root)';
+/* A concept's directory — the whole path, "." at the root — mirroring the
+   `dir` every catalog row carries. This used to be `areaOf`, the *first path
+   segment* only: a word the OKF spec never uses, and a projection that made
+   nested clustering impossible because everything below level one was already
+   thrown away before the boxes were drawn. */
+const dirOf=id=>{const i=id.lastIndexOf('/');return i<0?'.':id.slice(0,i);};
+const dirDepth=d=>d==='.'?0:d.split('/').length;
+const dirTrunc=(d,n)=>d==='.'?'.':d.split('/').slice(0,n).join('/');
+const dirParent=d=>{const i=d.lastIndexOf('/');return i<0?null:d.slice(0,i);};
+/* The one rule `okf --dir` uses, verbatim: a directory names itself and
+   everything beneath it. "." needs no special case — nothing starts with "./",
+   so the root selects only what lives directly in it. */
+const underDir=(d,path)=>d===path||d.indexOf(path+'/')===0;
+/* `.` is the data; `(root)` is what a human reads. A box caption is the last
+   segment — a full path on every nested box would bury the picture in text. */
+const dirLabel=d=>d==='.'?'(root)':d.split('/').pop()+'/';
+/* Where a bundle lives, for the rows that name it — and only where that says
+   something its slug does not. The slug is the name (`@okf-gem`, /b/okf-gem/);
+   the folder is a fact about it, so a row shows the fact beside the name and
+   drops it when the two read alike. Server-side twin: Bundle::Folder.label,
+   which is what `title` already arrived as. */
+const bundleWhere=b=>b.title===b.slug?'':(b.title||'');
 
 /* ── Cytoscape ── */
 function styleSheet(){const ink=cvar('--ink'),halo=cvar('--canvas'),edge=cvar('--edge');
@@ -1210,8 +1304,12 @@ function styleSheet(){const ink=cvar('--ink'),halo=cvar('--canvas'),edge=cvar('-
   /* authorship still shows as form: a map nobody wrote is hollow and dashed */
   {selector:'node.ix-syn',style:{'background-color':cvar('--faint'),'background-opacity':.2,'color':cvar('--muted'),
    'border-width':1.5,'border-color':cvar('--faint'),'border-style':'dashed'}},
-  {selector:'edge.ixe',style:{'width':1,'opacity':.5,'line-style':'dashed','line-color':cvar('--edge'),'target-arrow-shape':'none'}},
-  {selector:'edge.ixe-syn',style:{'opacity':.3}},
+  /* A dash carries roughly half the ink of a solid line of the same weight, so
+     matching a plain edge's opacity is not the same as matching its presence —
+     these read fainter at equal numbers, and at .5 they were invisible in light
+     mode. They sit *above* a plain edge now (.85 vs .8) to land level with it. */
+  {selector:'edge.ixe',style:{'width':1.1,'opacity':.85,'line-style':'dashed','line-color':cvar('--edge'),'target-arrow-shape':'none'}},
+  {selector:'edge.ixe-syn',style:{'opacity':.55}},
   {selector:'edge.linkhid',style:{'display':'none'}},
   {selector:':parent',style:{'background-color':cvar('--ink'),'background-opacity':0.05,'border-width':1,'border-color':cvar('--edge'),'shape':'round-rectangle','padding':26,'label':'data(label)','color':cvar('--ink'),'font-size':13,'font-weight':600,'text-valign':'top','text-halign':'center','text-margin-y':-8,'min-zoomed-font-size':0,'text-outline-width':3,'text-outline-color':cvar('--canvas')}},
   /* ── state, last so it outranks every look above ──
@@ -1229,9 +1327,50 @@ function styleSheet(){const ink=cvar('--ink'),halo=cvar('--canvas'),edge=cvar('-
    a floor above the fitting zoom puts the whole picture out of reach, fit
    button included. relaxZoom() lowers it to follow anything bigger. */
 const MIN_ZOOM=.2;
+/* ── the first layout runs on the strongest links only ──
+   The boot layout is the wait on a big bundle, and it is the *edges* that make
+   it one. Measured on 414 concepts / 1829 links: cose takes 6.25s, of which
+   about 2.1s is the nodes and the rest is edges, near enough linearly.
+
+   Hiding edges does not help — it was the first thing tried, and it bought 0.5%,
+   because the layout runs over hidden elements just the same (it does help the
+   *paint*: a pan frame goes 20.7ms → 11.8ms, which is why the link layer still
+   hides rather than removes — an edge it took away has to come straight back
+   when a concept is selected). Removing them before the layout is what pays:
+   6.25s → 3.29s at half the edges.
+
+   So the first layout gets `EDGE_CUT[i]===0` — each concept's single strongest
+   link, per OKF::Bundle::Skeleton. That set is chosen rather than sampled, and
+   the property that makes it usable is that it *touches every linked concept*,
+   so nothing is left unplaced and the arrangement is a real one rather than a
+   sketch to be redone. The rest arrive on the next frame and no layout re-runs,
+   so nothing on screen moves — the reader sees the graph sooner and then sees
+   more lines in it, never a jump.
+
+   Only above BOOT_MIN_EDGES, where the saving is worth the extra path at all:
+   at 800 edges the edge share of the layout is under a second. */
+const BOOT_MIN_EDGES=800;
+/* Each edge carries its own cut, so the `spine` link setting is a comparison on
+   data the edge already holds rather than a lookup keyed on endpoints. Same
+   number, two readers: this split, and linkShown(). */
+const cutAt=(i)=>(EDGE_CUT&&EDGE_CUT.length===EDGES.length?EDGE_CUT[i]:0);
+const edgeEls=EDGES.map((e,i)=>({data:{source:e.source,target:e.target,cut:cutAt(i)}}));
+const bootSplit=(()=>{
+ if(!EDGE_CUT||EDGE_CUT.length!==EDGES.length||EDGES.length<=BOOT_MIN_EDGES)return {first:edgeEls,rest:[]};
+ const first=[],rest=[];
+ edgeEls.forEach(el=>(el.data.cut===0?first:rest).push(el));
+ return {first:first,rest:rest};})();
 const cy=cytoscape({container:document.getElementById('cy'),minZoom:MIN_ZOOM,maxZoom:1.6,wheelSensitivity:.2,
- elements:[...NODES.map(n=>({data:{id:n.id,title:n.title,c:color[typeOf[n.id]||'Untyped']||'#64748b',sz:szOf(n.id)}})),...EDGES.map(e=>({data:e}))],
+ elements:[...NODES.map(n=>({data:{id:n.id,title:n.title,c:color[typeOf[n.id]||'Untyped']||'#64748b',sz:szOf(n.id)}})),...bootSplit.first],
  style:styleSheet(),layout:{name:'<%= @layout %>',animate:false,nodeRepulsion:9000,idealEdgeLength:170,padding:40,nodeOverlap:24,avoidOverlap:true,spacingFactor:1.2,nodeDimensionsIncludeLabels:true}});
+/* Next frame, not next tick: the boot layout finished inside the constructor
+   above (animate:false), so the only thing still owed is a paint, and yielding
+   one frame is what buys the reader the early picture this whole split is for. */
+if(bootSplit.rest.length)requestAnimationFrame(()=>{
+ cy.batch(()=>cy.add(bootSplit.rest.map(el=>({group:'edges',data:el.data}))));
+ /* The late edges arrive after applyGraphFilter may already have run once, so
+    they would come back unfiltered — and under a narrowed link layer, visible. */
+ applyGraphFilter();});
 function applyCyTheme(){cy.style(styleSheet());}
 /* Debounced so the panel width transition (--side-w, .22s) fires cy.resize()
    once after it settles instead of on every frame — avoids canvas flicker. */
@@ -1466,6 +1605,11 @@ function focusNode(ele,opened){if(!ele||!ele.length)return;
     the state. (Outside cluster mode there are no :parent nodes, so this is a
     no-op there.) */
  cy.elements().removeClass('hl');cy.elements().not(':parent').addClass('dim');
+ /* With the link layer narrowed the arrows are hidden, so emphasis alone would
+    highlight a neighbourhood joined by nothing visible. Bring this node's own
+    links back first — the selection is exactly the moment they stop being
+    noise and become the answer to something. */
+ linkReveal(ele);
  ele.closedNeighborhood().removeClass('dim');ele.addClass('hl');
  centerOn(ele,opened);}
 function select(id){const ele=cy.getElementById(id);if(!ele.length)return;const opened=show(id);
@@ -1474,7 +1618,9 @@ function select(id){const ele=cy.getElementById(id);if(!ele.length)return;const
 cy.on('tap','node',e=>{const t=e.target;
  if(t.hasClass('dir')){showDir(t.id().slice(DIR.length)||'.');return focusNode(t,true);}
  if(t.hasClass('ix')){showDir(t.data('dir')||'.');return focusNode(t,true);}
- if(t.isParent()){const a=t.id().indexOf('area::')===0?t.id().slice(6):null;return showDir(a&&a!=='(root)'?a:'.');}
+ /* A box's id carries the directory verbatim — "." included — so the tap needs
+    no unmangling of a display label back into a path. */
+ if(t.isParent()){const id=t.id();return showDir(id.indexOf('box::')===0?id.slice(5):'.');}
  select(t.id());});
 /* Clear the focus: drop the dim/highlight and let the hash forget the node, so a
    reload does not reselect it. Tapping empty canvas does this — but a dense graph
@@ -1486,57 +1632,82 @@ cy.on('tap',e=>{if(e.target===cy)deselect();});
 /* Three groups, one grammar: empty means everything, a click narrows, a second
    click puts it back. Types used to be the odd one out — a `hiddenTypes` set
    where every type showed until you clicked one *away* — so the same chip
-   component meant "include" under Areas and Tags and "exclude" two rows above,
+   component meant "include" under Dirs and Tags and "exclude" two rows above,
    and meant "include" again on the catalog's own type chips one view over. That
    is a rule a reader has to learn per panel instead of once. Within a group
    selections union (Service *or* Charter); across groups they intersect. */
-const activeTypes=new Set(), activeTags=new Set(), activeAreas=new Set();
+const activeTypes=new Set(), activeTags=new Set(), activeDirs=new Set();
 const searchInput=document.getElementById('search');
 const q={graph:'',catalog:'',files:'',tags:''};
 function applyGraphFilter(){const s=q.graph.toLowerCase();const ids=ftMatch(q.graph);
  cy.nodes().forEach(n=>{if(n.isParent()||n.hasClass('dir')||n.hasClass('ix'))return;const id=n.data('id');const t=typeOf[id]||'Untyped';const nt=tagsOf[id]||[];
   const hay=(n.data('title')+' '+t+' '+nt.join(' ')+' '+(descOf[id]||'')).toLowerCase();
   const txt=ids?ids.has(id):(!s||hay.includes(s));
-  const m=txt&&(activeTypes.size===0||activeTypes.has(t))&&(activeTags.size===0||nt.some(x=>activeTags.has(x)))&&(activeAreas.size===0||activeAreas.has(areaOf(id)));
+  const m=txt&&(activeTypes.size===0||activeTypes.has(t))&&(activeTags.size===0||nt.some(x=>activeTags.has(x)))&&(activeDirs.size===0||[...activeDirs].some(d=>underDir(dirOf(id),d)));
   n.style('display',m?'element':'none');});
- /* Cluster mode draws an area box around each group's concepts. When a filter
-    hides every concept in a group, hide the now-empty box too (and bring it back
+ /* Cluster mode draws a box around each directory's concepts. When a filter
+    hides every concept in one, hide the now-empty box too (and bring it back
     when one survives) — the same rule fitBox already uses to leave stale boxes
-    out of the fit, now applied to what is drawn. */
- cy.nodes(':parent').forEach(p=>p.style('display',p.children().some(c=>c.style('display')!=='none')?'element':'none'));
+    out of the fit, now applied to what is drawn.
+    Leaf descendants, not children: a box nests other boxes now, and an
+    intermediate directory holding nothing directly has no children but its
+    sub-boxes — `children()` read it as empty and took the whole branch beneath
+    it off the canvas. One pass still does it, because the predicate is what
+    knows about depth, not the loop. */
+ cy.nodes(':parent').forEach(p=>p.style('display',p.descendants().some(c=>!c.isParent()&&c.style('display')!=='none')?'element':'none'));
+ /* A loosened filter brings back nodes the layout never placed — they return at
+    whatever coordinates the pre-cluster force layout left them at, dragging
+    their box across the canvas. Re-tile when that happens. Narrowing never
+    re-runs: the visible set only shrinks, and every survivor is already laid. */
+ if(clustered&&clusterLaid&&cy.nodes(':visible').some(n=>!n.isParent()&&!clusterLaid.has(n.id())))clusterLayout();
  ixVisibility();
+ linkVisibility();
  relaxZoom();
  bridgeSync();}
-function fbadge(){const c=activeTypes.size+activeTags.size+activeAreas.size;const b=document.getElementById('btn-filters');
+function fbadge(){const c=activeTypes.size+activeTags.size+activeDirs.size;const b=document.getElementById('btn-filters');
  b.classList.toggle('on-filter',c>0);b.querySelector('.fbadge').textContent=c;ctlBadge();syncFacets();}
 /* mirror the active view's tool state onto the ⚙ toggle — when the sheet is
    folded away on mobile, an active filter must still call out from the bar */
 function ctlBadge(){const b=document.getElementById('btn-controls');if(!b)return;
  let c=0;
- if(view==='graph')c=activeTypes.size+activeTags.size+activeAreas.size;
+ if(view==='graph')c=activeTypes.size+activeTags.size+activeDirs.size;
  else if(view==='files'){try{c=(fileTypeCombo.get()?1:0)+(fileTagCombo.get()?1:0);}catch(err){}}
  b.classList.toggle('on-filter',c>0);b.querySelector('.fbadge').textContent=c;}
-const ftypes=document.getElementById('ftypes'), ftags=document.getElementById('ftags'), fareas=document.getElementById('fareas');
-const graphAreas=[...new Set(NODES.map(n=>areaOf(n.id)))].sort();
-const areaCount={};NODES.forEach(n=>{const a=areaOf(n.id);areaCount[a]=(areaCount[a]||0)+1;});
+const ftypes=document.getElementById('ftypes'), ftags=document.getElementById('ftags'), fdirs=document.getElementById('fdirs');
+/* Every directory a concept lives in, plus each of their ancestors — so a chip
+   exists for an intermediate directory that holds nothing itself but whose
+   subtree does. The root is listed only when concepts actually sit there. */
+const graphDirs=(()=>{const s=new Set();
+ NODES.forEach(n=>{let d=dirOf(n.id);if(d==='.'){s.add('.');return;}while(d){s.add(d);d=dirParent(d);}});
+ return [...s].sort((a,b)=>a==='.'?-1:b==='.'?1:(a<b?-1:a>b?1:0));})();
+/* Counted by the same prefix rule the chip filters with, so the number on a
+   chip is exactly how many concepts clicking it leaves — the root's count is
+   its own, since "." is a prefix of nothing. */
+const dirCount={};graphDirs.forEach(d=>{dirCount[d]=NODES.filter(n=>underDir(dirOf(n.id),d)).length;});
 const tagsByCount=Object.entries(TAGS).sort((a,b)=>b[1].length-a[1].length).map(e=>e[0]);
 const dotFor=t=>`<span class="dot" style="background:${color[t]}"></span>`;
 const toggleSet=(s,v)=>{s.has(v)?s.delete(v):s.add(v);};
 /* One renderer for every filter chip group (graph, catalog and tags views):
    paints the items with their current state class and wires the toggle. */
+/* `label` is separate from `v` for one reason: the root directory's value is
+   "." and its label "(root)", and a chip that filtered on what it displayed
+   would be filtering on a spelling the data never uses. */
 function chipRow(el,items,attr,isOn,onToggle){
- el.innerHTML=items.map(o=>`<span class="chip${isOn(o.v)?' on':''}" ${attr}="${esc(o.v)}">${o.dot||''}${esc(o.v)} <span class="c">${o.n}</span></span>`).join('');
+ el.innerHTML=items.map(o=>`<span class="chip${isOn(o.v)?' on':''}" ${attr}="${esc(o.v)}">${o.dot||''}${esc(o.label==null?o.v:o.label)} <span class="c">${o.n}</span></span>`).join('');
  el.querySelectorAll('.chip').forEach(ch=>ch.onclick=()=>onToggle(ch.getAttribute(attr)));}
 const typeItems=list=>list.map(t=>({v:t,n:(TYPES[t]||[]).length,dot:dotFor(t)}));
-const areaItems=list=>list.map(a=>({v:a,n:areaCount[a]}));
+const dirItems=list=>list.map(d=>({v:d,label:d==='.'?'(root)':d,n:dirCount[d]}));
 const tagItems=list=>list.map(t=>({v:t,n:(TAGS[t]||[]).length}));
 /* The find box narrows the chips themselves; while it is empty, tags cap at the
    top 40 so a busy bundle doesn't flood the panel — searching reaches ALL tags. */
 const fsearch=document.getElementById('filter-search');
+/* The finder matches what the reader sees, so typing "root" reaches the chip
+   labelled (root) even though its value is ".". */
+const dirMatch=qq=>d=>!qq||(d==='.'?'(root)':d).toLowerCase().includes(qq);
 function syncFilterChips(){const qq=fsearch.value.trim().toLowerCase();const match=v=>!qq||v.toLowerCase().includes(qq);
  const after=()=>{syncFilterChips();applyGraphFilter();fbadge();};
  chipRow(ftypes,typeItems(types.filter(match)),'data-t',t=>activeTypes.has(t),t=>{toggleSet(activeTypes,t);after();});
- chipRow(fareas,areaItems(graphAreas.filter(match)),'data-area',a=>activeAreas.has(a),a=>{toggleSet(activeAreas,a);after();});
+ chipRow(fdirs,dirItems(graphDirs.filter(dirMatch(qq))),'data-dir',d=>activeDirs.has(d),d=>{toggleSet(activeDirs,d);after();});
  chipRow(ftags,tagItems(qq?tagsByCount.filter(match):tagsByCount.slice(0,40)),'data-tag',t=>activeTags.has(t),t=>{toggleSet(activeTags,t);after();});}
 fsearch.oninput=syncFilterChips;
 syncFilterChips();
@@ -1544,9 +1715,9 @@ syncFilterChips();
 // so the container has resized), reusing the working fitGraph implementation.
 function fitVisible(){requestAnimationFrame(()=>requestAnimationFrame(fitGraph));}
 function focusGraphType(t){setView('graph');clearSets();activeTypes.add(t);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
-function focusGraphArea(a){setView('graph');clearSets();activeAreas.add(a);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
+function focusGraphDir(d){setView('graph');clearSets();activeDirs.add(d);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
 function focusGraphTag(t){setView('graph');clearSets();activeTags.add(t);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
-const clearSets=()=>{activeTypes.clear();activeTags.clear();activeAreas.clear();};
+const clearSets=()=>{activeTypes.clear();activeTags.clear();activeDirs.clear();};
 function clearGraphFilter(){clearSets();syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
 /* Is the graph focused on exactly this facet and nothing else? Only then is a
    second click on the chip an undo — with any other filter in play, clearing
@@ -1557,8 +1728,8 @@ function clearGraphFilter(){clearSets();syncFilterChips();applyGraphFilter();fba
    on t" was `every other type hidden`, which a one-type bundle satisfies with
    nothing hidden at all — so an unfiltered graph read as focused, lit the chip,
    and spent the first click clearing nothing. */
-function typeFocused(t){return !activeTags.size&&!activeAreas.size&&activeTypes.size===1&&activeTypes.has(t);}
-function tagFocused(t){return !activeTypes.size&&!activeAreas.size&&activeTags.size===1&&activeTags.has(t);}
+function typeFocused(t){return !activeTags.size&&!activeDirs.size&&activeTypes.size===1&&activeTypes.has(t);}
+function tagFocused(t){return !activeTypes.size&&!activeDirs.size&&activeTags.size===1&&activeTags.has(t);}
 /* The chips are filter indicators, so they repaint wherever the badge does —
    that way a filter cleared from the slide-over un-lights the chip too. */
 function syncFacets(){
@@ -1590,7 +1761,18 @@ async function ensureLayout(name){const ext=LAYOUT_EXT[name];if(!ext||loadedExt[
    keeps a real gap between boxes in cose; avoidOverlap + spacingFactor do the
    same for the geometric layouts. Extras are ignored by layouts that don't know
    them. */
-function layoutOpts(name){const base={animate:true,padding:40,nodeOverlap:24,avoidOverlap:true,spacingFactor:1.2,nodeDimensionsIncludeLabels:true};
+/* Past this many concepts a layout transition stops being orientation and starts
+   being the reason the tab is unresponsive. Measured in nodes rather than edges
+   because it is the node re-render that costs. */
+const ANIMATE_MAX=250;
+/* `'end'`, never `true`. The force layouts read `animate:true` as "render every
+   tick of the simulation" — that is the visible bounce, and it is hundreds of
+   full re-renders for one settle. `'end'` runs the same simulation headless and
+   moves the nodes once, into the same final positions. Above ANIMATE_MAX even
+   that one transition is dropped: at that size the move itself is the jank, and
+   a graph that appears laid out beats a graph that arrives slowly. */
+function animateMode(){return cy.nodes().filter(n=>!n.isParent()).length>ANIMATE_MAX?false:'end';}
+function layoutOpts(name){const base={animate:animateMode(),padding:40,nodeOverlap:24,avoidOverlap:true,spacingFactor:1.2,nodeDimensionsIncludeLabels:true};
  if(name==='fcose')return{...base,name:'fcose',quality:'default',nodeRepulsion:6500,idealEdgeLength:160,nodeSeparation:100,packComponents:true};
  if(name==='dagre')return{...base,name:'dagre',rankDir:'TB',nodeSep:26,rankSep:55,edgeSep:12};
  if(name==='cola')return{...base,name:'cola',maxSimulationTime:2500,edgeLength:160,nodeSpacing:8};
@@ -1600,8 +1782,72 @@ async function runLayout(name){if(await ensureLayout(name))cy.layout(layoutOpts(
 layoutSel.onchange=e=>{if(clustered)return;runLayout(e.target.value);};
 layoutSel.value='<%= @layout %>';
 
-/* ── cluster by area (compound parent nodes) ── */
-let clustered=false;const btnCluster=document.getElementById('btn-cluster');
+/* ── cluster by directory (nested compound parent nodes) ── */
+/* A cluster is a directory of concepts, and the boxes nest as the directories
+   do. `clusterDepth` is how many levels down that nesting goes: at 1 the view
+   is exactly the flat one this mode always drew (one box per first segment),
+   at the bundle's maximum every concept sits in a box for its own directory.
+   Both are mode state — turning clustering off has to undo them together, or
+   the boxes leak into the plain graph. */
+let clustered=false,clusterDepth=1;const btnCluster=document.getElementById('btn-cluster');
+/* Which leaves the last cluster layout actually placed. The layout runs over the
+   visible subset (see clusterLayout), so this is what tells a *loosened* filter
+   apart from a tightened one: a node that comes back but is not in here has
+   never been tiled. null while unclustered. */
+let clusterLaid=null;
+const depthSel=document.getElementById('cluster-depth'),depthWrap=document.getElementById('cluster-depth-wrap');
+const BOX='box::';
+/* `dir::` is taken — file-tree mode's folder nodes wear it — so the boxes get a
+   prefix of their own rather than a shade of meaning on a shared one. */
+const maxDirDepth=Math.max(1,...NODES.map(n=>dirDepth(dirOf(n.id))));
+depthSel.innerHTML=Array.from({length:maxDirDepth},(_,i)=>`<option value="${i+1}">${i+1}</option>`).join('');
+depthSel.value=String(clusterDepth);
+/* Every box a depth calls for: each concept's directory truncated to N, plus
+   every ancestor of that — so an intermediate directory holding no concepts
+   directly still gets a box for its sub-boxes to sit in. The root box is added
+   only when concepts live at the root, and never nests another one: it holds
+   direct-root concepts and nothing else, which is what it always did.
+   Shallowest first, because cy.add() reads the array in order and a compound
+   child cannot name a parent that has not been added yet. */
+function boxesAt(depth){const set=new Set();
+ NODES.forEach(n=>{const d=dirOf(n.id);if(d==='.'){set.add('.');return;}
+  let t=dirTrunc(d,depth);while(t){set.add(t);t=dirParent(t);}});
+ return [...set].sort((a,b)=>dirDepth(a)-dirDepth(b)||(a<b?-1:a>b?1:0));}
+/* `grabbable:false, pannable:true` is what keeps a box scenery rather than a
+   handle — the pair, not either alone: ungrabbable stops the box moving, but the
+   node still swallows the drag, and it is `pannable` that hands the gesture to
+   the canvas the way empty background does. A cluster's
+   empty interior is the largest drag target on the canvas, so while it grabbed
+   the compound node, dragging to look around dragged the *directory* — and the
+   bigger the cluster, the less of the view was pannable. Leaves stay grabbable:
+   moving a concept is a real gesture, moving its folder is not. */
+function addBoxes(){
+ cy.add(boxesAt(clusterDepth).map(d=>{const data={id:BOX+d,label:dirLabel(d)};
+  const p=d==='.'?null:dirParent(d);if(p)data.parent=BOX+p;
+  return {group:'nodes',data:data,grabbable:false,pannable:true};}));
+ setBoxHandles();
+ cy.batch(()=>NODES.forEach(n=>{const e=cy.getElementById(n.id);
+  if(e.length)e.move({parent:BOX+dirTrunc(dirOf(n.id),clusterDepth)});}));}
+/* Alt hands a box back its handle. The two gestures are split by frequency, not
+   by preference: looking around is constant and stays unmodified, tidying a box
+   is occasional and takes the modifier. Alt rather than Ctrl because on macOS
+   Ctrl+mousedown is the system secondary click, and a modifier that opens a
+   context menu instead of dragging is not a modifier.
+
+   `blur` is not defensive clutter — a keyup that lands on another window never
+   reaches us, so without it the boxes would still be handles when the reader
+   comes back and every drag would move the wrong thing. */
+let altHeld=false;
+function setBoxHandles(){cy.nodes(':parent').forEach(n=>{
+ if(altHeld){n.grabify();n.unpanify();}else{n.ungrabify();n.panify();}});}
+addEventListener('keydown',e=>{if(e.key==='Alt'&&!altHeld){altHeld=true;setBoxHandles();}});
+addEventListener('keyup',e=>{if(e.key==='Alt'&&altHeld){altHeld=false;setBoxHandles();}});
+addEventListener('blur',()=>{if(altHeld){altHeld=false;setBoxHandles();}});
+/* Unparent first, then take the boxes out as one collection — removing a nested
+   parent while its children still point at it is how a teardown leaves orphans. */
+function removeBoxes(){cy.batch(()=>{
+ NODES.forEach(n=>{const e=cy.getElementById(n.id);if(e.length&&e.isChild())e.move({parent:null});});
+ cy.nodes().filter(n=>n.id().indexOf(BOX)===0).remove();});}
 /* cose treats compounds as an afterthought — nodes with no links drift to
    opposite corners of a huge half-empty box, and the boxes themselves sprawl —
    so grouped views needed hand-tidying every time. fcose is the engine built
@@ -1610,27 +1856,48 @@ let clustered=false;const btnCluster=document.getElementById('btn-cluster');
    captions from overlapping. Clustering therefore always uses it, with cose
    kept only for when the CDN is unreachable (a saved render opened offline
    still groups, just less prettily). */
+/* Laid out over the *visible* elements only. Not a nicety: fcose measures every
+   node it is handed, and a nested compound graph whose nodes went `display:none`
+   mid-run threw on a label it could no longer measure — reachable by typing a
+   term that matches nothing while the tiling animation is still going. Handing
+   it the visible subset also happens to be the right answer, since a hidden
+   concept has no business influencing where the visible ones land. Nothing
+   visible means nothing to lay out. */
 function clusterLayout(){ensureLayout('fcose').then(ok=>{if(!clustered)return;
- cy.layout(ok?{name:'fcose',quality:'proof',animate:true,padding:40,nodeRepulsion:6500,idealEdgeLength:90,
+ const eles=cy.elements(':visible');
+ /* Recorded before the early return, not after: "nothing was visible" and
+    "nothing has been laid out" are the same fact, and the empty set is what
+    makes clearing that filter re-tile everything rather than nothing. */
+ clusterLaid=new Set(eles.nodes().filter(n=>!n.isParent()).map(n=>n.id()));
+ if(!eles.nodes().nonempty())return;
+ cy.layout(ok?{name:'fcose',eles:eles,quality:'proof',animate:animateMode(),padding:40,nodeRepulsion:6500,idealEdgeLength:90,
    nodeSeparation:100,nestingFactor:.1,gravityCompound:1.5,tile:true,tilingPaddingVertical:14,
    tilingPaddingHorizontal:14,packComponents:true,nodeDimensionsIncludeLabels:true}
-  :{name:'cose',animate:true,padding:40,nodeRepulsion:8000,idealEdgeLength:70,nodeOverlap:24,nestingFactor:1.2,gravity:.7}).run();});}
+  :{name:'cose',eles:eles,animate:animateMode(),padding:40,nodeRepulsion:8000,idealEdgeLength:70,nodeOverlap:24,nestingFactor:1.2,gravity:.7}).run();});}
 function setClustered(on){if(on===clustered)return;if(on&&treeMode)setTree(false);
  clustered=on;btnCluster.setAttribute('aria-pressed',String(on));layoutSel.disabled=on;
- if(on){const as=[...new Set(NODES.map(n=>areaOf(n.id)))];
-  cy.add(as.map(a=>({group:'nodes',data:{id:'area::'+a,label:a}})));
-  cy.batch(()=>NODES.forEach(n=>{const e=cy.getElementById(n.id);if(e.length)e.move({parent:'area::'+areaOf(n.id)});}));
-  /* A box is made for every area; if a search or filter was already narrowing
-     the graph, the areas it emptied would cluster as phantom boxes. Re-apply the
-     filter now — before the layout tiles them — so empty areas never get drawn.
-     (Filtering while already clustered runs applyGraphFilter on its own.) */
+ /* A flat bundle has one level and therefore no choice to offer — the control
+    stays away rather than presenting a select with a single option. */
+ depthWrap.hidden=!(on&&maxDirDepth>1);
+ clusterLaid=null;
+ if(on){
+  addBoxes();
+  /* A box is made for every directory; if a search or filter was already
+     narrowing the graph, the ones it emptied would cluster as phantom boxes.
+     Re-apply the filter now — before the layout tiles them — so empty boxes
+     never get drawn. (Filtering while already clustered runs applyGraphFilter
+     on its own.) */
   applyGraphFilter();
   clusterLayout();
  }else{
-  cy.batch(()=>NODES.forEach(n=>{const e=cy.getElementById(n.id);if(e.length&&e.isChild())e.move({parent:null});}));
-  cy.nodes().filter(n=>n.id().indexOf('area::')===0).remove();
+  removeBoxes();
   runLayout(layoutSel.value);}}
 btnCluster.onclick=()=>setClustered(!clustered);
+/* Changing depth rebuilds rather than re-parents: the box *set* changes with it
+   (depth 2 adds boxes depth 1 never had), so tearing down and building again is
+   both simpler and the only version with one code path to get right. */
+depthSel.onchange=()=>{clusterDepth=+depthSel.value;if(!clustered)return;
+ removeBoxes();addBoxes();applyGraphFilter();clusterLayout();};
 
 /* ── file-tree mode: folders become nodes and the only edges are folder→child,
    so the picture is the acyclic files-and-folders tree, not the link graph. ── */
@@ -1724,6 +1991,104 @@ function openMapInGraph(dir){setView('graph');showDir(dir);
     chose survives, and the map is emphasised exactly as a concept would be. */
  setIxNodes(true).then(()=>focusNode(cy.getElementById(IX+dir),true));}
 
+/* ── the link layer: how many arrows to draw ─────────────────────────────────
+   A dense bundle is unreadable because of its *arrows*, not its dots. Measured
+   on a 47-concept bundle: 227 links over 47 concepts, three quarters of them
+   crossing a directory boundary, at an average degree of 9.7 — every dot in a
+   thicket, and no amount of moving them apart fixes that.
+
+   Three settings, because there are three honest amounts of wiring:
+
+     all     the graph as authored. 227 arrows.
+     spine   each concept's single strongest link — the backbone Ruby already
+             computed (OKF::Bundle::Skeleton, the `keep_at === 0` set, inlined
+             as EDGE_CUT). 50 arrows on that bundle, 476 of 1829 on a
+             414-concept one: about one line per concept, which is tree
+             density. It is chosen rather than sampled, and the property that
+             earns it the name is that it *touches every linked concept*, so
+             nothing is left floating.
+     none    no arrows at all. The cleanest picture and the fastest to paint.
+
+   In every setting, selecting a concept reveals that concept's own links in
+   full. The wiring was never the answer to a standing question — "what is in
+   this bundle and how is it organised" is what a reader arrives with, and 227
+   lines were drowning it — but it is exactly the answer to "what does *this*
+   connect to", asked one concept at a time.
+
+   This layer only ever hides edges. It composes with cluster, file-tree and the
+   index layer rather than excluding them, which is the whole point: `--map` is
+   nothing but this set to `none` with the boxes on, and other combinations are
+   just as reachable. */
+/* The layer opens on `all`, unless the graph is dense enough that its arrows are
+   a thicket — then it opens on its spine (each concept's strongest link, the
+   backbone the boot split already lays out on). Density is undirected degree,
+   the measure this whole read is written in: the bundle that drove it ran 9.7, a
+   tree runs about 2, and THICKET_DEGREE sits between so a graph a reader can
+   already take in is left on `all`. Decided *here*, before the cytoscape() boot
+   frame reads linkMode, so a split bundle lays out on its spine and reveals it
+   without ever flashing the full set. `--map` overrides this to `none` below —
+   an explicit request outranks the heuristic. */
+const THICKET_DEGREE=6;
+const denseGraph=!!EDGE_CUT&&EDGE_CUT.length===EDGES.length&&NODES.length>0&&(2*EDGES.length/NODES.length)>=THICKET_DEGREE;
+let linkMode=(denseGraph&&!<%= map_json %>)?'spine':'all';
+const linksSeg=document.getElementById('links');
+const linkBtns=[ ...linksSeg.querySelectorAll('[data-links]') ];
+/* The markup checks `all`; if density opened us elsewhere, move the check to
+   match before the reader sees it. */
+if(linkMode!=='all')linkBtns.forEach(b=>b.setAttribute('aria-checked',String(b.dataset.links===linkMode)));
+
+/* Every edge that is a *link*. The structural ones (`tree` in file-tree mode,
+   `ixe` under the index layer) are somebody else's picture, never this one's
+   noise, so they are never touched. */
+const linkEdges=()=>cy.edges().not('.tree').not('.ixe');
+/* Which edges this setting draws. `cut` rides on each edge's own data (see the
+   cytoscape() call), so the spine is a comparison and never a lookup. */
+const linkShown=(e)=>linkMode==='all'||(linkMode==='spine'&&e.data('cut')===0);
+function linkVisibility(){if(treeMode)return;
+ linkEdges().forEach(e=>e.toggleClass('linkhid',!linkShown(e)));}
+/* The selected concept's arrows, in full, whatever the setting. Called from
+   focusNode so it rides the gesture the reader already makes rather than
+   adding one of its own. */
+function linkReveal(ele){if(linkMode==='all')return;
+ linkVisibility();
+ if(ele&&ele.length)ele.connectedEdges().not('.tree').not('.ixe').removeClass('linkhid');}
+
+function setLinks(mode){if(mode===linkMode)return;
+ linkMode=mode;
+ linkBtns.forEach(b=>b.setAttribute('aria-checked',String(b.dataset.links===mode)));
+ if(mode==='all')cy.edges().removeClass('linkhid');else linkVisibility();}
+linkBtns.forEach(b=>{b.onclick=()=>setLinks(b.dataset.links);});
+/* Arrow keys move within a radio group — that is the contract `role=radiogroup`
+   makes, and a group that only answers to clicks has made a promise it does not
+   keep. Tab still enters and leaves the group as one stop. */
+linksSeg.onkeydown=e=>{const i=linkBtns.indexOf(document.activeElement);if(i<0)return;
+ const d=e.key==='ArrowRight'||e.key==='ArrowDown'?1:e.key==='ArrowLeft'||e.key==='ArrowUp'?-1:0;
+ if(!d)return;
+ e.preventDefault();
+ const next=linkBtns[(i+d+linkBtns.length)%linkBtns.length];
+ next.focus();setLinks(next.dataset.links);};
+/* `okf server --map` / `okf render --map` open here: no arrows, and the
+   directories boxed. Not a mode of its own — a *starting point* made of two
+   ordinary controls, both of which the reader can move afterwards. Either half
+   alone is half a picture: arrows off without boxes leaves a scatter of dots
+   with nothing to read them against, and boxes with every arrow is the thicket
+   this began with.
+
+   Deferred a frame, and not for tidiness: setClustered reaches ensureLayout and
+   state declared elsewhere in this script. An inline call hit a binding in its
+   temporal dead zone once already, and the ReferenceError took every top-level
+   statement after this line with it — the page came up looking almost right,
+   with the palette, the keyboard map and the boot fit all silently unbound. A
+   frame is enough: the script has finished by then. */
+/* A dense graph opened on its spine at boot (see linkMode above); the hiding
+   itself still has to run once. A *split* bundle got it for free — the boot
+   rAF's applyGraphFilter already ran linkVisibility under the spine mode. A
+   bundle under the split floor did not, so apply it here, on the same deferred
+   frame and for the same TDZ reason. --map wins and needs no separate spine
+   pass: `none` hides strictly more. */
+if(<%= map_json %>)requestAnimationFrame(()=>{setLinks('none');setClustered(true);});
+else if(denseGraph)requestAnimationFrame(linkVisibility);
+
 /* ── fit to screen ── */
 // cy.animate({fit:…}) is a no-op in this Cytoscape build, so compute the target
 // zoom + pan and animate those (which do work): fits the visible nodes, re-centered.
@@ -1731,10 +2096,12 @@ function openMapInGraph(dir){setView('graph');showDir(dir);
    visible leaves plus the area boxes drawn around them. A compound parent is
    26px of padding wider than its children on every side and carries its label
    above that, so fitting to the children alone crops the boxes and their names
-   off the edges. A parent whose children are all filtered out is left out too —
-   it collapses to a stale box that would inflate the fit. */
+   off the edges. A parent with no visible *leaf* descendant is left out too — it
+   collapses to a stale box that would inflate the fit, and leaves are the test
+   because a box nests other boxes now. */
 function fitBox(){const vis=cy.nodes(':visible');
- const eles=vis.filter(n=>!n.isParent()).union(vis.filter(n=>n.isParent()&&n.children(':visible').nonempty()));
+ const eles=vis.filter(n=>!n.isParent())
+  .union(vis.filter(n=>n.isParent()&&n.descendants().some(c=>!c.isParent()&&c.style('display')!=='none')));
  const use=eles.length?eles:cy.nodes();
  return use.length?use.boundingBox():null;}
 
@@ -1788,17 +2155,19 @@ function setView(v){if(v===view)return;view=v;document.getElementById('app').set
  /* the count and the dead-end offer belong to the view's own query, so they
     re-decide on every switch — including into a view that has no box at all */
  bridgeSync();}
-/* The Files view answers to two rail items: Files when the Files tab is up,
-   Index when the Indexes tab is — the Index rail item is a shortcut into it. */
-/* Which rail item the page is standing on. It was a question of view *and*
-   tab, back when "index" was a rail item with no #view-index behind it. The
-   tab is gone and so is the pretence: a rail item is a view. */
-function activeRail(){return view;}
+/* Which rail item the page is standing on — the view, except where two rail
+   items share one. Index is a shortcut into Files that opens the root map, so
+   while that map is what is open the reader is standing on Index and the rail
+   has to say so; anything else in Files, a *nested* index.md included, is
+   Files. Returning `view` flat lit Files on the one screen the reader reached by
+   asking for Index, which reads as the click having gone somewhere else. */
+const ROOT_INDEX='index.md';
+function activeRail(){return view==='files'&&fileSel===ROOT_INDEX?'index':view;}
 /* And everything that has to *go* somewhere clicks the rail item rather than
-   calling setView: Index and Files are one view differing by tab, so setView
-   alone lands on whichever tab was last open — and for "index" it lands on a
-   view that does not exist. The rail button already gets this right; this is
-   how the keyboard and the palette borrow it instead of drifting from it. */
+   calling setView: "index" is not a view, so setView alone lands on one that
+   does not exist, and even for Files it would arrive without opening the map
+   that makes it Index. The rail button already gets this right; this is how the
+   keyboard and the palette borrow it instead of drifting from it. */
 function goRail(v){const b=document.querySelector('.rail-item[data-view="'+v+'"]');if(b)b.click();}
 function railActive(){const v=activeRail();
  document.querySelectorAll('.rail-item').forEach(b=>b.classList.toggle('active',b.dataset.view===v));}
@@ -1873,38 +2242,38 @@ let CATALOG=null;
    otherwise) and fills descOf on the way, so even the pre-index substring
    fallback can match a graph node by its leaf description. */
 function getCatalog(){return CATALOG||(CATALOG=(EMBED?Promise.resolve(EMBED.catalog):fetch(CATALOG_ENDPOINT).then(r=>r.json()).then(d=>d.concepts)).then(list=>{list.forEach(c=>{descOf[c.id]=c.description||'';});return list;}));}
-const catActiveTypes=new Set(), catActiveAreas=new Set(), catActiveTags=new Set();
+const catActiveTypes=new Set(), catActiveDirs=new Set(), catActiveTags=new Set();
 const catByCount=types.slice().sort((a,b)=>(TYPES[b]||[]).length-(TYPES[a]||[]).length);
 const catChip=t=>`<span class="chip" data-t="${esc(t)}"><span class="dot" style="background:${color[t]}"></span>${esc(t)} <span class="c">${(TYPES[t]||[]).length}</span></span>`;
 function syncCatChips(){document.querySelectorAll('#cat-types .chip').forEach(c=>c.classList.toggle('on',catActiveTypes.has(c.getAttribute('data-t'))));
- const n=catActiveTypes.size+catActiveAreas.size+catActiveTags.size;
+ const n=catActiveTypes.size+catActiveDirs.size+catActiveTags.size;
  const b=document.getElementById('cat-filters-btn');b.classList.toggle('on-filter',n>0);b.querySelector('.fbadge').textContent=n;}
 function catToggle(t){toggleSet(catActiveTypes,t);renderCatFilters();renderCatalog();}
 function wireCatChips(el){el.querySelectorAll('.chip').forEach(ch=>ch.onclick=()=>catToggle(ch.getAttribute('data-t')));}
-/* The slide-over mirrors the graph filters — Types, Areas, Tags — with one find
+/* The slide-over mirrors the graph filters — Types, Dirs, Tags — with one find
    box narrowing the chips of all three groups (tags cap at 40 until searched). */
 function renderCatFilters(){const qq=(document.getElementById('cat-filter-search').value||'').trim().toLowerCase();
  const match=v=>!qq||v.toLowerCase().includes(qq);
  const after=()=>{renderCatFilters();renderCatalog();};
  chipRow(document.getElementById('cat-ftypes'),typeItems(catByCount.filter(match)),'data-t',t=>catActiveTypes.has(t),t=>{toggleSet(catActiveTypes,t);after();});
- chipRow(document.getElementById('cat-fareas'),areaItems(graphAreas.filter(match)),'data-area',a=>catActiveAreas.has(a),a=>{toggleSet(catActiveAreas,a);after();});
+ chipRow(document.getElementById('cat-fdirs'),dirItems(graphDirs.filter(dirMatch(qq))),'data-dir',d=>catActiveDirs.has(d),d=>{toggleSet(catActiveDirs,d);after();});
  chipRow(document.getElementById('cat-ftags'),tagItems(qq?tagsByCount.filter(match):tagsByCount.slice(0,40)),'data-tag',t=>catActiveTags.has(t),t=>{toggleSet(catActiveTags,t);after();});
  syncCatChips();}
 function initCatalog(){inited.catalog=true;
  // Only the five most common types get inline chips; everything else — types,
- // areas, tags — lives in the searchable slide-over, so a bundle with many
+ // dirs, tags — lives in the searchable slide-over, so a bundle with many
  // values doesn't flood the header.
  const quick=document.getElementById('cat-types');quick.innerHTML=catByCount.slice(0,5).map(catChip).join('');wireCatChips(quick);
  renderCatFilters();
  const cf=document.getElementById('cat-filters');
  document.getElementById('cat-filters-btn').onclick=()=>cf.classList.toggle('open');
  document.getElementById('cat-filters-close').onclick=()=>cf.classList.remove('open');
- document.getElementById('cat-filters-reset').onclick=()=>{catActiveTypes.clear();catActiveAreas.clear();catActiveTags.clear();renderCatFilters();renderCatalog();};
+ document.getElementById('cat-filters-reset').onclick=()=>{catActiveTypes.clear();catActiveDirs.clear();catActiveTags.clear();renderCatFilters();renderCatalog();};
  document.getElementById('cat-filter-search').oninput=renderCatFilters;
  getCatalog().then(renderCatalog);}
 function renderCatalog(){if(!CATALOG)return;getCatalog().then(list=>{const s=(q.catalog||'').toLowerCase();const ids=ftMatch(q.catalog);
  const rows=list.filter(c=>{if(catActiveTypes.size&&!catActiveTypes.has(c.type))return false;
-  if(catActiveAreas.size&&!catActiveAreas.has(areaOf(c.id)))return false;
+  if(catActiveDirs.size&&![...catActiveDirs].some(d=>underDir(dirOf(c.id),d)))return false;
   if(catActiveTags.size&&!c.tags.some(t=>catActiveTags.has(t)))return false;
   if(ids)return ids.has(c.id);
   if(s){const hay=(c.title+' '+c.description+' '+c.type+' '+c.tags.join(' ')+' '+c.id).toLowerCase();if(!hay.includes(s))return false;}return true;});
@@ -2106,6 +2475,7 @@ function openFile(id,list){fileSel=id;
  if(ixOnly)setIxOnly(false);
  const c=(list||[]).find(x=>x.id===id)||byId[id]||{};
  document.querySelectorAll('.file').forEach(b=>b.classList.toggle('sel',b.dataset.id===id));
+ railActive(); /* the rail reads the open file to tell Index from Files */
  const ty=c.type||typeOf[id]||'Untyped';const cc=color[ty]||'#64748b';
  document.getElementById('fp-head').hidden=false;
  document.getElementById('fp-type').innerHTML=`<span class="dot" style="background:${cc}"></span>${esc(ty)}`;
@@ -2118,6 +2488,7 @@ function openFile(id,list){fileSel=id;
    log fetched fresh on every click so a just-appended entry shows. */
 function openReserved(kind,path){fileSel=path;
  document.querySelectorAll('.file').forEach(b=>b.classList.toggle('sel',b.dataset.path===path));
+ railActive(); /* the rail reads the open file to tell Index from Files */
  document.getElementById('fp-head').hidden=false;
  document.getElementById('fp-title').textContent=path;
  const d=dirOfPath(path);
@@ -2139,21 +2510,21 @@ function openReserved(kind,path){fileSel=path;
   LOGS=null;getLogs().then(logs=>{const l=logs.find(x=>x.path===path);done((l&&l.content)||'');});}}
 
 /* ── tags ── */
-const tagSel=new Set(), tagTypes=new Set(), tagAreas=new Set();
-/* Does this concept survive the tags view's type/area filters? Tags are counted
+const tagSel=new Set(), tagTypes=new Set(), tagDirs=new Set();
+/* Does this concept survive the tags view's type/dir filters? Tags are counted
    and listed over the surviving concepts only; a tag left with none disappears. */
-function tagMatch(id){return (tagTypes.size===0||tagTypes.has(typeOf[id]||'Untyped'))&&(tagAreas.size===0||tagAreas.has(areaOf(id)));}
+function tagMatch(id){return (tagTypes.size===0||tagTypes.has(typeOf[id]||'Untyped'))&&(tagDirs.size===0||[...tagDirs].some(d=>underDir(dirOf(id),d)));}
 function renderTagChips(){
  const after=()=>{renderTagChips();renderCloud();};
  chipRow(document.getElementById('tag-ftypes'),typeItems(types),'data-t',t=>tagTypes.has(t),t=>{toggleSet(tagTypes,t);after();});
- chipRow(document.getElementById('tag-fareas'),areaItems(graphAreas),'data-area',a=>tagAreas.has(a),a=>{toggleSet(tagAreas,a);after();});
- const n=tagTypes.size+tagAreas.size;const b=document.getElementById('tag-filters-btn');
+ chipRow(document.getElementById('tag-fdirs'),dirItems(graphDirs),'data-dir',d=>tagDirs.has(d),d=>{toggleSet(tagDirs,d);after();});
+ const n=tagTypes.size+tagDirs.size;const b=document.getElementById('tag-filters-btn');
  b.classList.toggle('on-filter',n>0);b.querySelector('.fbadge').textContent=n;}
 function initTags(){inited.tags=true;
  const tf=document.getElementById('tag-filters');
  document.getElementById('tag-filters-btn').onclick=()=>tf.classList.toggle('open');
  document.getElementById('tag-filters-close').onclick=()=>tf.classList.remove('open');
- document.getElementById('tag-filters-reset').onclick=()=>{tagTypes.clear();tagAreas.clear();renderTagChips();renderCloud();};
+ document.getElementById('tag-filters-reset').onclick=()=>{tagTypes.clear();tagDirs.clear();renderTagChips();renderCloud();};
  renderTagChips();renderCloud();}
 function renderCloud(){const s=(q.tags||'').toLowerCase();
  // Uniform chip size, ordered by frequency (descending); the background tint scales
@@ -2183,19 +2554,23 @@ function countUp(el,to){if(reduce()||to<=8){el.textContent=to;return;}let start=
  function step(ts){if(!start)start=ts;const p=Math.min(1,(ts-start)/650);el.textContent=Math.round(to*(1-Math.pow(1-p,3)));if(p<1)requestAnimationFrame(step);}
  requestAnimationFrame(step);}
 function initStats(){inited.stats=true;
- const areas=new Set(NODES.map(n=>areaOf(n.id)));
- const stats=[['Concepts',NODES.length],['Areas',areas.size],['Concept types',types.length],['Cross-links',EDGES.length],['Distinct tags',Object.keys(TAGS).length]];
+ const dirs=new Set(NODES.map(n=>dirOf(n.id)));
+ const stats=[['Concepts',NODES.length],['Dirs',dirs.size],['Concept types',types.length],['Cross-links',EDGES.length],['Distinct tags',Object.keys(TAGS).length]];
  const g=document.getElementById('stat-grid');
  g.innerHTML=stats.map(s=>`<div class="stat"><div class="n" data-to="${s[1]}">0</div><div class="l">${s[0]}</div></div>`).join('');
  g.querySelectorAll('.n').forEach(el=>countUp(el,+el.dataset.to));
  const byType=Object.entries(TYPES).map(([t,ids])=>[t,ids.length]).sort((a,b)=>b[1]-a[1]);
- const areaCnt={};NODES.forEach(n=>{const a=areaOf(n.id);areaCnt[a]=(areaCnt[a]||0)+1;});
- const byArea=Object.entries(areaCnt).sort((a,b)=>b[1]-a[1]);
- renderBars('bars-type',byType,t=>color[t],'type');renderBars('bars-area',byArea,()=>cvar('--accent'),'area');}
+ /* Direct counts, keyed by the whole path — the same cut `okf stats --json`
+    emits as `by_dir`, so the panel and the CLI answer alike. The bar's value is
+    the directory; only its label is softened to (root). */
+ const dirCnt={};NODES.forEach(n=>{const d=dirOf(n.id);dirCnt[d]=(dirCnt[d]||0)+1;});
+ const byDir=Object.entries(dirCnt).sort((a,b)=>b[1]-a[1]);
+ renderBars('bars-type',byType,t=>color[t],'type');renderBars('bars-dir',byDir,()=>cvar('--accent'),'dir');}
 function renderBars(id,rows,colFn,kind){const max=Math.max(1,...rows.map(r=>r[1]));const box=document.getElementById(id);
+ const label=l=>kind==='dir'&&l==='.'?'(root)':l;
  box.innerHTML=rows.map(([l,v])=>
-  `<div class="bar clickable" data-val="${esc(l)}" role="button" tabindex="0" title="Show ${esc(l)} in the graph"><span class="bl">${esc(l)}</span><div class="bt"><div class="bf" style="background:${colFn(l)};transform:scaleX(${reduce()?1:0})" data-w="${v/max}"></div></div><span class="bv">${v}</span></div>`).join('');
- box.querySelectorAll('.bar').forEach(b=>{const go=()=>{const val=b.dataset.val;kind==='type'?focusGraphType(val):focusGraphArea(val);};
+  `<div class="bar clickable" data-val="${esc(l)}" role="button" tabindex="0" title="Show ${esc(label(l))} in the graph"><span class="bl">${esc(label(l))}</span><div class="bt"><div class="bf" style="background:${colFn(l)};transform:scaleX(${reduce()?1:0})" data-w="${v/max}"></div></div><span class="bv">${v}</span></div>`).join('');
+ box.querySelectorAll('.bar').forEach(b=>{const go=()=>{const val=b.dataset.val;kind==='type'?focusGraphType(val):focusGraphDir(val);};
   b.onclick=go;b.onkeydown=e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();go();}};});
  requestAnimationFrame(()=>box.querySelectorAll('.bf').forEach(f=>f.style.transform=`scaleX(${f.dataset.w})`));}
 
@@ -2287,10 +2662,15 @@ var openPalette=null;
     and layout a bundle switch preserves are exactly what a node has to override.
     A hit in *this* bundle is not a navigation at all; go() selects it in place
     and this href only exists for ⌘-click, where a second tab is the point. */
- const hitHref=c=>(c.slug===SELF_SLUG?'':'../'+encodeURIComponent(c.slug)+'/')+'?select='+encodeURIComponent(c.id);
+ /* Three cases, not two. A hub row names another bundle and is addressed
+    relative to its mount; a hub row for *this* bundle stays put; and a
+    standalone row carries no slug at all, because one bundle has none to carry.
+    Folding that third case into the first built '../undefined/' — a 404 on
+    every result the palette returned. */
+ const hitHref=c=>(c.slug==null||c.slug===SELF_SLUG?'':'../'+encodeURIComponent(c.slug)+'/')+'?select='+encodeURIComponent(c.id);
  const hitHtml=c=>`<span class="hit-top"><span class="hit-t">${hilite(c.title||c.id,hitTerms)}</span>`+
   (c.type?`<span class="hit-type">${esc(c.type)}</span>`:'')+
-  `<span class="slug">${esc(c.slug)}</span></span>`+
+  (c.slug==null?'':`<span class="slug">${esc(c.slug)}</span>`)+`</span>`+
   (c.snippet?`<span class="hit-s">${hilite(c.snippet,hitTerms)}</span>`:'');
  /* Bundles lead, and on an empty box they are the only thing here: switching
     bundles is what the palette is for, and six views above them would push the
@@ -2312,11 +2692,17 @@ var openPalette=null;
   let h='';
   if(showB){
    if(heads)h+=grp('Bundles');
-   if(!q)h+=`<a class="cur" aria-disabled="true"><span>${esc(IDENT)}</span><span class="slug">current</span></a>`;
+   /* The you-are-here row wears the same name as the rows under it — `@slug`
+      where there is one to wear. A standalone page has none, and falls back to
+      the header's own wording rather than inventing a ref that addresses
+      nothing. */
+   if(!q)h+=`<a class="cur" aria-disabled="true"><span>${SELF_SLUG?'@'+esc(SELF_SLUG):esc(IDENT)}</span><span class="sw-where">current</span></a>`;
    if(!SIBLINGS.length)h+='<a class="none"><span>only this bundle is registered — okf registry set &lt;dir&gt; adds more</span></a>';
-   else h+=bs.map((b,i)=>opt(i,{
-    attrs:`href="${esc(target(b.path))}" data-path="${esc(b.path)}"`,
-    html:`<span>${esc(b.title)}${b.default?'<span class="sw-def">default</span>':''}</span><span class="slug">${esc(b.slug)}</span>`})).join('');
+   else h+=bs.map((b,i)=>{const where=bundleWhere(b);
+    return opt(i,{
+     attrs:`href="${esc(target(b.path))}" data-path="${esc(b.path)}"`,
+     html:`<span>@${esc(b.slug)}${b.default?'<span class="sw-def">default</span>':''}</span>`+
+      (where?`<span class="sw-where">${esc(where)}</span>`:'')});}).join('');
   }
   if(vs.length){
    if(heads)h+=grp('Views');
@@ -2329,7 +2715,7 @@ var openPalette=null;
    if(heads)h+=grp('Concepts');
    h+=cs.map((c,i)=>opt(bs.length+vs.length+i,{
     cls:' sw-hit',
-    attrs:`href="${esc(hitHref(c))}" data-hit="${esc(c.id)}" data-slug="${esc(c.slug)}"`,
+    attrs:`href="${esc(hitHref(c))}" data-hit="${esc(c.id)}" data-slug="${esc(c.slug==null?'':c.slug)}"`,
     html:hitHtml(c)})).join('');
    /* The cap is reported, never silent: a palette that shows 50 of 214 and says
       nothing has told the reader the answer is complete. */
@@ -2363,10 +2749,15 @@ var openPalette=null;
   const id=a.dataset.hit;
   /* A concept in this bundle is already loaded — selecting it in place keeps the
      camera, the filters and the layout the reader built. Only a hit in another
-     bundle is worth a page load. */
+     bundle is worth a page load.
+     Empty slug means a standalone server: one bundle, so every hit is this one.
+     It reads as '' rather than SELF_SLUG's null because the row simply has no
+     slug key, and comparing the two directly sent every standalone hit down the
+     page-load branch — the whole index reloaded to reach a node already on
+     screen. */
   if(id!==undefined){const t=a.getAttribute('href');
    if(newTab){window.open(t,'_blank');close();return;}
-   if(a.dataset.slug===SELF_SLUG){close();goToGraph(id);return;}
+   if(a.dataset.slug===''||a.dataset.slug===SELF_SLUG){close();goToGraph(id);return;}
    location.href=t;return;}
   const p=a.dataset.path;if(!p)return;const t=target(p);
   if(newTab){window.open(t,'_blank');close();}else{location.href=t;}}
@@ -2412,9 +2803,13 @@ var openPalette=null;
     is switching bundles. Standalone has neither, so there the view is the job.
     The ⇄ button keeps the bundle wording in every mode: it draws a swap, and a
     control whose tooltip disagrees with its icon teaches the wrong thing. */
- const label=FINDS?'Search all bundles':HUB?'Switch bundle':'Jump to a view';
+ /* FINDS no longer implies HUB: a standalone server answers /search over the one
+    bundle it was given, so the copy has to name what is actually on offer rather
+    than assume a set is behind it. Four states, because both bits are real. */
+ const label=FINDS?(HUB?'Search all bundles':'Search concepts'):HUB?'Switch bundle':'Jump to a view';
  const btnLabel=HUB?'Switch bundle':label;
- input.placeholder=FINDS?'search concepts, switch bundle, or a view…':HUB?'switch bundle, or type a view…':'jump to a view…';
+ input.placeholder=FINDS?(HUB?'search concepts, switch bundle, or a view…':'search concepts, or a view…')
+  :HUB?'switch bundle, or type a view…':'jump to a view…';
  input.setAttribute('aria-label',label);
  ov.setAttribute('aria-label',FINDS?label:HUB?'Switch bundle':'Command palette');
  document.getElementById('sw-hint').textContent='↑↓ move · ⏎ open · '+(HUB?(isMac?'⌘⏎':'Ctrl-⏎')+' new tab · ':'')+'Esc close';
@@ -2625,12 +3020,17 @@ function bridgeReport(v,shown,total){if(bridge)bridge.report(v,shown,total);}
   /* A row the hub could not load links nowhere, because there is nowhere to
      link — but it is still a row: "where did my bundle go?" is the question it
      exists to answer. */
+  /* Named by slug, for the reason the palette rows are: the slug is what
+     addresses this bundle, the folder is where it happens to sit. Unlike the
+     hub's own /b/ page this row carries no full path, so the folder stays — as
+     the fact under the name, and only where it is not the name repeated. */
   const title=b.mount!==null
-   ?'<a class="ws-title" href="../'+encodeURIComponent(b.mount)+'/">'+esc(b.title)+'</a>'
-   :'<span class="ws-title off">'+esc(b.title)+'</span>';
+   ?'<a class="ws-title" href="../'+encodeURIComponent(b.mount)+'/">@'+esc(b.slug)+'</a>'
+   :'<span class="ws-title off">@'+esc(b.slug)+'</span>';
+  const where=bundleWhere(b);
   const count=b.count===null?'':'<span>'+b.count+' concept'+(b.count===1?'':'s')+'</span>';
   const body='<div class="ws-row-main"><div class="ws-t">'+title+pills+'</div>'+
-   '<div class="ws-meta"><span class="ws-slug">@'+esc(b.slug)+'</span>'+count+
+   '<div class="ws-meta">'+(where?'<span class="ws-where">'+esc(where)+'</span>':'')+count+
    '<span class="ws-health '+esc(b.health)+'">'+esc(b.word)+'</span></div>'+
    (editing===b.slug?edit(b):'')+(confirming===b.slug?confirm(b):'')+'</div>';
   return '<div class="ws-row" data-slug="'+esc(b.slug)+'">'+body+(manageable()?menuBtn(b):'')+'</div>';}
@@ -3004,10 +3404,11 @@ const KEYS=[
  [ '/', 'search the current view (where it has one)' ],
  [ '\\', 'show or hide the inspector — graph' ],
  [ '0', 'fit the graph to the screen — graph' ],
- [ 'f', 'fullscreen' ],
  [ /Mac|iP/.test(navigator.platform||'')?'⌘K':'Ctrl-K',
-   SEARCH_ENDPOINT!==null?'search every bundle, switch bundle, or jump to a view':
-   HUB_PATH!==null?'switch bundle, or jump to a view':'jump to a view' ],
+   SEARCH_ENDPOINT!==null?(HUB_PATH!==null?'search every bundle, switch bundle, or jump to a view'
+     :'search this bundle, or jump to a view')
+   :HUB_PATH!==null?'switch bundle, or jump to a view':'jump to a view' ],
+ [ '⌥ drag', 'move a cluster box — a plain drag pans the canvas' ],
  [ '?', 'this list' ],
  [ 'Esc', 'close what is open, or clear the graph selection' ]
 ];
@@ -3034,7 +3435,7 @@ addEventListener('keydown',e=>{if(!dgv.hidden){if(e.key==='Escape')closeDiagram(
  else if(e.key==='\\'&&view==='graph'){setSide(gbody.getAttribute('data-side')==='hidden'?'default':'hidden');}
  else if(e.key==='0'&&view==='graph'){fitGraph();}
  else if(e.key==='Escape'&&view==='graph'){deselect();}
- else if(e.key==='f'){btnFull.click();}});
+});
 
 /* ── deep links ── */
 const Q=new URLSearchParams(location.search),QL=Q.get('layout'),QS=Q.get('select');