leyline-code 0.8.1__py3-none-any.whl

leyline/viewer/viewer.html

@@ -0,0 +1,1622 @@
+<title>Leyline map of __LEYLINE_REPO__</title>
+<style>
+/* Layout: a survey sheet. Map canvas left, inspector right; one header row of navigation above.
+   No web fonts: the page fetches nothing, so it uses the faces already on the machine. */
+:root {
+  --bg: #ecf0ed; --surface: #f8faf8; --sunken: #e2e8e4; --ink: #15201c; --muted: #586860;
+  --line: #c6d0ca; --grid: #e2e8e4; --edge: #7c8c84; --accent: #0b6a5b; --accent-soft: #d3e9e3; --mark: #b0561a;
+  --mark-soft: #f4dfcd; --cs: #5b4fb3; --py: #8f6410; --warn: #a3341f; --warn-soft: #f3d9d2; --chan: #1f62ad;
+  --cross: #a2387f; --ok: #2f7a3d; --ok-soft: #d8ecd9;
+  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
+  --bg: #0f1513; --surface: #161e1b; --sunken: #0b100e; --ink: #e2e9e5; --muted: #8d9d95;
+  --line: #2a3631; --grid: #141c19; --edge: #6e7f77; --accent: #55c4ab; --accent-soft: #173a33; --mark: #e8a15c;
+  --mark-soft: #40291a; --cs: #a99df2; --py: #ddb155; --warn: #f08a75; --warn-soft: #43201a; --chan: #7db5f2;
+  --cross: #e48cc8; --ok: #7fcf8c; --ok-soft: #1b3520;
+  color-scheme: dark } }
+:root[data-theme="dark"] {
+  --bg: #0f1513; --surface: #161e1b; --sunken: #0b100e; --ink: #e2e9e5; --muted: #8d9d95;
+  --line: #2a3631; --grid: #141c19; --edge: #6e7f77; --accent: #55c4ab; --accent-soft: #173a33; --mark: #e8a15c;
+  --mark-soft: #40291a; --cs: #a99df2; --py: #ddb155; --warn: #f08a75; --warn-soft: #43201a; --chan: #7db5f2;
+  --cross: #e48cc8; --ok: #7fcf8c; --ok-soft: #1b3520;
+  color-scheme: dark }
+
+html, body { height: 100%; }
+body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); }
+#app { height: 100%; display: flex; flex-direction: column; min-height: 0; }
+#app *, #app *::before { box-sizing: border-box; }
+button, input { font: inherit; color: inherit; }
+button { cursor: pointer; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-block: 10px;
+  padding-inline: 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
+.brand { font-weight: 600; letter-spacing: 0.02em; display: flex; align-items: baseline; gap: 8px; }
+.brand small { font: 12px var(--mono); color: var(--muted); font-weight: 400; }
+.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; flex: 1 1 240px; }
+.crumbs button { background: none; border: 0; padding: 3px 6px; border-radius: 4px; font: 13px var(--mono);
+  color: var(--muted); max-width: 100%; overflow-wrap: anywhere; text-align: left; }
+.crumbs button:hover { background: var(--sunken); color: var(--ink); }
+.crumbs button[aria-current] { color: var(--ink); font-weight: 500; }
+.crumbs .sep { color: var(--line); }
+.tabs { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
+.tabs button { background: none; border: 0; padding: 5px 12px; color: var(--muted); }
+.tabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
+.tabs .count { font: 11px var(--mono); color: var(--muted); margin-left: 4px; }
+.morewrap { position: relative; display: flex; }
+.menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--surface);
+  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); padding: 4px 0; }
+.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 12px; }
+.menu button small { display: block; color: var(--muted); font-size: 12px; }
+.menu button:hover, .menu button:focus-visible { background: var(--accent-soft); }
+.menu button[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--accent); }
+.search { position: relative; flex: 0 1 240px; min-width: 150px; }
+.search input { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
+  background: var(--bg); }
+.results { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; max-height: 320px;
+  overflow: auto; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
+.results button { display: block; width: 100%; text-align: left; background: none; border: 0;
+  padding: 6px 10px; border-bottom: 1px solid var(--line); }
+.results button:last-child { border-bottom: 0; }
+.results button:hover, .results button:focus-visible { background: var(--accent-soft); }
+.results b { font: 500 13px var(--mono); display: block; overflow-wrap: anywhere; }
+.results span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+
+.main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
+.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background:
+  linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 48px,
+  linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 100%, var(--bg); }
+#map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
+#map.dragging { cursor: grabbing; }
+.tools { position: absolute; z-index: 3; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px;
+  max-width: calc(100% - 24px); }
+.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px;
+  font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
+.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--edge); }
+.chip[aria-pressed="true"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+.chip.zoom { border-radius: 6px; padding: 3px 9px; color: var(--ink); }
+.hint { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: 12px; color: var(--muted);
+  display: flex; flex-wrap: wrap; gap: 4px 16px; pointer-events: none; }
+.hint i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
+.hint svg { width: 30px; height: 8px; }
+
+.node rect { fill: var(--surface); stroke: var(--edge); stroke-width: 1.2; }
+.node text { fill: var(--ink); font: 500 12.5px var(--mono); pointer-events: none; }
+.node text.meta { fill: var(--muted); font: 11px var(--sans); }
+.node { cursor: pointer; }
+.node.stub rect { fill: var(--bg); stroke-dasharray: 2 3; }
+.node.stub text { fill: var(--muted); }
+.node.iso rect { stroke: var(--line); }
+.node:hover rect { stroke: var(--accent); }
+.node.sel rect { stroke: var(--mark); stroke-width: 2.2; fill: var(--mark-soft); }
+.node.near rect { stroke: var(--accent); stroke-width: 1.8; }
+.node .lang-csharp { fill: var(--cs); } .node .lang-python { fill: var(--py); } .node .lang-none { fill: var(--edge); }
+.node .flag { fill: var(--mark); }
+.dim { opacity: 0.18; }
+.dense .edge:not(.near):not(.sel) path.vis { opacity: 0.45; }
+.edge path.vis { fill: none; stroke: var(--edge); }
+.edge.heur path.vis { stroke-dasharray: 5 4; }
+.edge.guess path.vis { stroke-dasharray: 1.5 4; stroke-linecap: round; }
+.edge.comm path.vis { stroke: var(--chan); stroke-dasharray: 9 3 2 3; }
+.edge.comm text { fill: var(--chan); }
+#arrow-c path { fill: var(--chan); }
+.edge path.hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
+.edge text { font: 11px var(--mono); fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; pointer-events: none; }
+.edge:hover path.vis, .edge.near path.vis { stroke: var(--accent); }
+.edge.near text { fill: var(--ink); }
+.edge.sel path.vis { stroke: var(--mark); }
+.edge.sel text { fill: var(--mark); font-weight: 500; }
+#arrow path { fill: var(--edge); } #arrow-a path { fill: var(--accent); } #arrow-m path { fill: var(--mark); } #arrow-x path { fill: var(--cross); }
+.edge.cross path.vis { stroke: var(--cross); }
+.edge.cross text { fill: var(--cross); }
+.node.other rect:first-child { stroke: var(--cross); stroke-dasharray: 2 3; }
+.group-label { font: 11px var(--sans); fill: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
+
+.matrix-wrap { height: 100%; overflow: auto; padding: 56px 16px 40px; }
+table.matrix { border-collapse: collapse; font: 11.5px var(--mono); font-variant-numeric: tabular-nums; }
+.matrix th { font-weight: 400; color: var(--muted); white-space: nowrap; }
+.matrix th.row { text-align: right; padding: 0 8px 0 0; position: sticky; left: 0; background: var(--bg); z-index: 1;
+  max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+.matrix th.col { height: 160px; vertical-align: bottom; padding: 0; }
+.matrix th.col div { writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; max-height: 158px;
+  overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
+.matrix td { width: 26px; min-width: 26px; height: 24px; text-align: center; border: 1px solid var(--line);
+  background: var(--surface); padding: 0; }
+.matrix td.diag { background: var(--sunken); }
+.matrix td.on { cursor: pointer; color: var(--ink); }
+.matrix td.back { background: var(--warn-soft); color: var(--warn); font-weight: 500; }
+.matrix td.sel { outline: 2px solid var(--mark); outline-offset: -2px; }
+.matrix tr:hover th.row { color: var(--ink); }
+.matrix-note { font-size: 12px; color: var(--muted); max-width: 62ch; margin: 0 0 14px; }
+
+.side { border-left: 1px solid var(--line); background: var(--surface); overflow: auto; min-width: 0; padding: 16px; }
+.side h2 { font: 600 16px/1.25 var(--mono); margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
+.side h3 { font: 600 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
+  margin: 18px 0 6px; display: flex; justify-content: space-between; gap: 8px; }
+.side h3 span { font-weight: 400; letter-spacing: 0; text-transform: none; }
+.eyebrow { font: 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
+  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.tag { font: 11px var(--sans); letter-spacing: 0; text-transform: none; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); }
+.tag.entry { border-color: var(--mark); color: var(--mark); }
+.tag.heur { border-style: dashed; }
+.sig { font: 12.5px/1.5 var(--mono); background: var(--sunken); padding: 8px 10px; border-radius: 6px; margin-top: 10px;
+  overflow-wrap: anywhere; }
+.where { font: 12px var(--mono); color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
+.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; margin-top: 12px; }
+.facts div { border-top: 2px solid var(--line); padding-top: 4px; }
+.facts b { font: 500 17px var(--mono); display: block; font-variant-numeric: tabular-nums; }
+.facts span { font-size: 11.5px; color: var(--muted); }
+.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.list li { border-top: 1px solid var(--line); }
+.list button { display: flex; width: 100%; gap: 8px; justify-content: space-between; align-items: baseline;
+  background: none; border: 0; padding: 5px 2px; text-align: left; }
+.list button:hover { background: var(--accent-soft); }
+.list .nm { font: 12.5px var(--mono); overflow-wrap: anywhere; min-width: 0; }
+.list .nm small { display: block; font: 11.5px var(--sans); color: var(--muted); }
+.list .ct { font: 12px var(--mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.list .plain { padding: 5px 2px; display: flex; justify-content: space-between; gap: 8px; }
+.more { font-size: 12px; color: var(--muted); padding: 5px 2px; border-top: 1px solid var(--line); }
+.open { margin-top: 12px; background: var(--accent); color: var(--surface); border: 0; border-radius: 6px; padding: 7px 14px; font-weight: 500; }
+.open:hover { filter: brightness(1.1); }
+.note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; max-width: 60ch; }
+pre.code { font: 12px/1.5 var(--mono); background: var(--sunken); border-radius: 6px; padding: 8px 0; margin: 0;
+  overflow: auto; max-height: 420px; tab-size: 4; }
+pre.code code { display: block; padding: 0 10px 0 0; white-space: pre; }
+pre.code.diagram { margin: 8px 0; } pre.code.diagram code { padding-left: 10px; }
+pre.code .ln { display: inline-block; width: 3.6em; padding-right: 0.9em; text-align: right; color: var(--muted);
+  user-select: none; opacity: 0.7; }
+.status { font: 12px var(--mono); }
+.status.ok { color: var(--accent); } .status.na { color: var(--muted); }
+.tag.chan { border-color: var(--chan); color: var(--chan); }
+.tag.risk-high { border-color: var(--warn); color: var(--warn); } .tag.risk-medium { border-color: var(--mark); color: var(--mark); }
+.node.role-changed rect:first-child { fill: var(--mark-soft); stroke: var(--mark); stroke-width: 2.4; }
+.node.role-new rect:first-child { fill: var(--mark-soft); stroke: var(--mark); stroke-width: 2; stroke-dasharray: 5 3; }
+.node.role-contract rect:first-child { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 3; }
+.node.role-must_edit rect:first-child { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.8; }
+.node.role-direct rect:first-child { stroke: var(--accent); stroke-width: 1.8; fill: var(--accent-soft); }
+.node.role-test rect:first-child { stroke: var(--chan); stroke-width: 1.6; }
+.node.role-indirect rect:first-child { stroke: var(--line); }
+.node.role-c0 rect:first-child { stroke: var(--accent); stroke-width: 2; fill: var(--accent-soft); }
+.node.role-c1 rect:first-child { stroke: var(--mark); stroke-width: 2; fill: var(--mark-soft); }
+.node.role-c2 rect:first-child { stroke: var(--chan); stroke-width: 2; }
+.node.role-c3 rect:first-child { stroke: var(--warn); stroke-width: 2; fill: var(--warn-soft); }
+.node.role-c4 rect:first-child { stroke: var(--cs); stroke-width: 2; }
+.node.role-c5 rect:first-child { stroke: var(--py); stroke-width: 2; }
+.node.role-done rect:first-child { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2.4; }
+.node.role-done_new rect:first-child { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 2.2; stroke-dasharray: 5 3; }
+.node.role-helper rect:first-child { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 2 3; }
+.node.role-test_changed rect:first-child { stroke: var(--chan); stroke-width: 2; }
+.node.role-drift rect:first-child { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 2.4; }
+.node.role-missed rect:first-child { fill: var(--mark-soft); stroke: var(--mark); stroke-width: 2; stroke-dasharray: 6 3; }
+.node.picked rect:first-child { stroke-width: 3.4; }
+.node .pin { fill: var(--ink); font: 600 11px var(--sans); }
+.key { display: inline-flex; align-items: center; gap: 6px; }
+.key b { width: 14px; height: 10px; border-radius: 2px; border: 2px solid var(--line); display: inline-block; }
+.key .k-changed, .key .k-c1, .key .k-new { background: var(--mark-soft); border-color: var(--mark); }
+.key .k-must_edit, .key .k-contract, .key .k-c3 { background: var(--warn-soft); border-color: var(--warn); }
+.key .k-direct, .key .k-c0 { background: var(--accent-soft); border-color: var(--accent); }
+.key .k-test, .key .k-c2, .key .k-test_changed { border-color: var(--chan); } .key .k-c4 { border-color: var(--cs); } .key .k-c5 { border-color: var(--py); }
+.key .k-done, .key .k-done_new, .key .k-helper { background: var(--ok-soft); border-color: var(--ok); }
+.key .k-drift { background: var(--warn-soft); border-color: var(--warn); } .key .k-missed { background: var(--mark-soft); border-color: var(--mark); border-style: dashed; }
+.key .k-direct, .key .k-indirect { border-color: var(--accent); } .key .k-indirect { border-color: var(--line); }
+.tools select { font: 13px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--edge);
+  border-radius: 6px; padding: 4px 8px; max-width: min(100%, 460px); }
+.flow-wrap { height: 100%; overflow: auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
+.flow-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
+.flow-head select { font: 13px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line);
+  border-radius: 6px; padding: 6px 8px; max-width: 100%; min-width: 0; flex: 1 1 280px; }
+.flow-head span { font-size: 12px; color: var(--muted); }
+.steps button.idle { opacity: .55; }
+.tour { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px 14px 12px; margin-bottom: 18px; }
+.tour h2 { margin-top: 4px; }
+.tour .note { color: var(--ink); }
+.tour-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
+.tour-top select { font: 12.5px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; min-width: 0; max-width: 100%; }
+.tour-nav { display: flex; gap: 8px; margin-top: 10px; }
+.tour button { font: 12.5px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; cursor: pointer; }
+.tour button.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); margin-left: auto; }
+.tour button:disabled { opacity: .45; cursor: default; }
+.flow-head input { font: 13px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; min-width: 190px; }
+.flow-head select { max-width: min(100%, 560px); }
+.steps { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
+  overflow-x: auto; }
+.steps li { border-top: 1px solid var(--line); min-width: max-content; }
+.steps li:first-child { border-top: 0; }
+.steps button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; text-align: left;
+  padding: 4px 10px; font: 12.5px var(--mono); white-space: nowrap; }
+.steps button:hover { background: var(--accent-soft); }
+.steps button[aria-current="true"] { background: var(--mark-soft); box-shadow: inset 3px 0 0 var(--mark); }
+.steps .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
+.steps .seq { color: var(--muted); font-size: 11px; width: 2.4em; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
+.steps .ind { flex: none; width: calc(var(--d) * 18px); }
+.steps .mod { color: var(--muted); font: 11.5px var(--sans); margin-left: auto; padding-left: 24px; }
+.steps .via { font: 11px var(--sans); color: var(--chan); border: 1px solid var(--chan); border-radius: 4px; padding: 0 5px; }
+
+.state { border-radius: 6px; padding: 8px 10px; margin: 12px 0 0; border: 1px solid var(--line); background: var(--sunken); }
+.state.ok { border-color: var(--ok); background: var(--ok-soft); } .state.todo { border-color: var(--mark); background: var(--mark-soft); }
+.state.ready { border-color: var(--accent); background: var(--accent-soft); }
+.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
+.seg button { background: none; border: 0; padding: 4px 11px; font-size: 13px; color: var(--muted); }
+.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
+.onmap { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+.keylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
+.keylist li { display: flex; align-items: center; gap: 8px; }
+.keylist .key b { flex: none; }
+.keylist .n { font: 12px var(--mono); color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
+.md { font-size: 13.5px; }
+.md h3 { margin-top: 22px; }
+.md p { margin: 8px 0 0; max-width: 64ch; }
+.md ul { margin: 6px 0 0; padding-left: 18px; }
+.md li { margin: 2px 0; }
+.md code { font: 12px var(--mono); background: var(--sunken); border-radius: 3px; padding: 0 3px; overflow-wrap: anywhere; }
+.md .tbl { overflow-x: auto; margin-top: 8px; }
+.md table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
+.md th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; border-bottom: 1px solid var(--line); padding: 4px 6px 4px 0; }
+.md td { border-top: 1px solid var(--line); padding: 5px 6px 5px 0; vertical-align: top; overflow-wrap: anywhere; }
+.md tr[data-task], .md tr[data-scenario] { cursor: pointer; }
+.md tr[data-task]:hover td, .md tr[data-scenario]:hover td { background: var(--accent-soft); }
+.md tr[aria-current="true"] td { background: var(--mark-soft); }
+.md td.res-done, .md td.res-passes { color: var(--ok); font-weight: 500; }
+.md td.res-not-done, .md td.res-fails, .md td.res-partly, .md td.res-no-test { color: var(--warn); font-weight: 500; }
+.changes { list-style: none; margin: 8px 0 0; padding: 0; }
+.changes button { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line);
+  border-radius: 6px; padding: 9px 11px; margin-top: 8px; }
+.changes button:hover { border-color: var(--accent); }
+.changes b { display: block; font-weight: 600; }
+.changes small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
+.banner { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: flex-end; border: 1px solid var(--accent);
+  background: var(--accent-soft); border-radius: 6px; padding: 6px 10px; margin-bottom: 14px; font-size: 12.5px; }
+.banner span { flex: 1 1 100%; }
+.banner button { font: 12.5px var(--sans); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; flex: none; }
+.loading { padding: 24px 16px; color: var(--muted); }
+
+@media (max-width: 820px) {
+  html, body { height: auto; }
+  #app { height: auto; }
+  .main { display: flex; flex-direction: column; }
+  .stage { height: 62vh; min-height: 340px; }
+  .side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
+  .search { flex: 1 1 100%; }
+  .crumbs { flex-basis: 100%; order: 3; }
+}
+@media (prefers-reduced-motion: no-preference) { .node rect, .edge path.vis { transition: stroke 0.12s, opacity 0.12s; } }
+</style>
+
+<div id="app">
+  <header class="bar">
+    <div class="brand">Leyline <small id="commit"></small></div>
+    <nav class="crumbs" id="crumbs" aria-label="Location"></nav>
+    <div class="tabs" role="group" aria-label="View">
+      <button id="tab-map" aria-pressed="true">Map</button>
+      <button id="tab-change" aria-pressed="false">Changes<span class="count" id="change-count"></span></button>
+      <div class="morewrap">
+        <button id="tab-more" aria-pressed="false" aria-haspopup="true" aria-expanded="false">More</button>
+        <div class="menu" id="menu" hidden>
+          <button id="tab-flows" aria-pressed="false">Flows<small>what a test or an entry point runs through</small></button>
+          <button id="tab-matrix" aria-pressed="false">Matrix<small>dependencies as a grid, cycles tinted</small></button>
+          <button id="tab-views" aria-pressed="false">Saved views<small>marked sets of code, design patterns</small></button>
+          <button id="tab-tour" aria-pressed="false">Tour<small>a guided walk through the code</small></button>
+        </div>
+      </div>
+    </div>
+    <div class="search">
+      <input id="q" type="search" placeholder="Find a type, function or file" autocomplete="off" aria-label="Search">
+      <div class="results" id="results" hidden></div>
+    </div>
+  </header>
+  <div class="main">
+    <section class="stage" aria-label="Map">
+      <svg id="map" role="img" aria-label="Dependency map">
+        <defs>
+          <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z"/></marker>
+          <marker id="arrow-a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z"/></marker>
+          <marker id="arrow-c" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z"/></marker>
+          <marker id="arrow-m" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z"/></marker>
+          <marker id="arrow-x" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z"/></marker>
+        </defs>
+        <g id="world"><g id="edges"></g><g id="nodes"></g></g>
+      </svg>
+      <div class="matrix-wrap" id="matrix" hidden></div>
+      <div class="flow-wrap" id="flowview" hidden></div>
+      <div class="tools" id="tools"></div>
+      <div class="hint" id="viewkey" hidden></div>
+      <div class="hint" id="hint">
+        <i><svg viewBox="0 0 30 8"><line x1="0" y1="4" x2="30" y2="4" stroke="currentColor" stroke-width="1.5"/></svg>exact</i>
+        <i><svg viewBox="0 0 30 8"><line x1="0" y1="4" x2="30" y2="4" stroke="currentColor" stroke-width="1.5" stroke-dasharray="5 4"/></svg>worked out from syntax</i>
+        <i><svg viewBox="0 0 30 8"><line x1="0" y1="4" x2="30" y2="4" stroke="currentColor" stroke-width="2" stroke-dasharray="1.5 4" stroke-linecap="round"/></svg>guessed by name</i>
+        <i><svg viewBox="0 0 30 8"><line x1="0" y1="4" x2="30" y2="4" stroke="var(--chan)" stroke-width="1.5" stroke-dasharray="9 3 2 3"/></svg>a channel that is not a call (event, launch, message, table…), in the direction data moves</i>
+        <i id="hint-cross" hidden><svg viewBox="0 0 30 8"><line x1="0" y1="4" x2="30" y2="4" stroke="var(--cross)" stroke-width="1.5"/></svg>into another repository</i>
+        <i>Other arrows point at what is depended on. Double-click a box to open it.</i>
+      </div>
+    </section>
+    <aside class="side" id="side" aria-live="polite"><p class="loading">Loading the map.</p></aside>
+  </div>
+</div>
+
+<script id="leyline-data" type="application/json">__LEYLINE_DATA__</script>
+<script>
+(async () => {
+"use strict";
+// A big map is embedded gzipped (export.py says when); the browser unpacks it, with no fetch.
+async function load() {
+  const box = document.getElementById("leyline-data");
+  if (box.type === "application/json") return JSON.parse(box.textContent);
+  const bin = atob(box.textContent.trim()), bytes = new Uint8Array(bin.length);
+  for (let k = 0; k < bin.length; k++) bytes[k] = bin.charCodeAt(k);
+  const text = await new Response(new Blob([bytes]).stream().pipeThrough(new DecompressionStream("gzip"))).text();
+  return JSON.parse(text);
+}
+let D;
+try { D = await load(); } catch (err) {
+  document.getElementById("side").innerHTML = `<p class="loading">This page could not read its own data (${String(err).replace(/[<&]/g, "")}). A browser from 2023 or later is needed for large maps.</p>`;
+  throw err;
+}
+const N = D.nodes;
+const $ = (id) => document.getElementById(id);
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+const SVG = "http://www.w3.org/2000/svg";
+const el = (tag, attrs = {}, parent) => {
+  const e = document.createElementNS(SVG, tag);
+  for (const k in attrs) e.setAttribute(k, attrs[k]);
+  if (parent) parent.appendChild(e);
+  return e;
+};
+
+/* ---------- index ---------- */
+const kids = N.map(() => []);
+N.forEach((n, i) => { n.idx = i; if (n.p != null) kids[n.p].push(i); });
+const up = (i, test) => { for (let c = i; c != null; c = N[c].p) if (test(N[c])) return c; return null; };
+const moduleOf = N.map((n, i) => up(i, (m) => m.k === "module"));
+const fileOf = N.map((n, i) => up(i, (m) => m.k === "file"));
+const repoOf = N.map((n, i) => up(i, (m) => m.k === "repo"));
+// A workspace: several repositories in one store. Then the repositories are the top of the map.
+const REPOS = N.map((n, i) => i).filter((i) => N[i].k === "repo");
+const WS = REPOS.length > 1;
+const repoMeta = (r) => D.repos.find((x) => x.id === N[r].i) || {};
+const otherRepo = (i, home) => WS && home != null && repoOf[i] != null && repoOf[i] !== repoOf[home];
+const srcKey = (i) => (WS ? N[repoOf[i]].i + "/" : "") + N[i].f;
+// The unit a node belongs to: its outermost type, or its file when it sits loose in one.
+const unitOf = N.map((n, i) => {
+  if (n.k === "module" || n.k === "repo" || n.k === "external" || n.k === "system") return null;
+  if (n.k === "file") return i;
+  let c = i;
+  while (N[c].p != null && N[N[c].p].k !== "file") c = N[c].p;
+  return N[c].k === "type" ? c : fileOf[i];
+});
+// The member of a unit a node belongs to: the child of the unit on the way down to it.
+const memberOf = (i) => {
+  const u = unitOf[i];
+  if (u == null || u === i) return null;
+  let c = i;
+  while (N[c].p != null && N[c].p !== u && N[N[c].p].k !== "file") c = N[c].p;
+  return c;
+};
+const GROUPS = { calls: "calls", uses_type: "types", instantiates: "types", extends: "inherit",
+  implements: "inherit", imports: "imports", depends_on: "imports", communicates: "channels" };
+const LABEL = { calls: "calls", uses_type: "uses type", instantiates: "creates", extends: "extends",
+  implements: "implements", imports: "imports", depends_on: "depends on", communicates: "channel",
+  event: "raises an event handled by", process: "launches" };
+// Channels that are not calls: [one end to the other, the other end seen from the source, seen from the target, a flow step].
+const CHAN = {
+  event: ["raises an event handled in", "its event is handled here", "raises an event handled here", "through an event"],
+  process: ["starts as a separate program", "launches it", "launched from here", "starts a program"],
+  http: ["sends a request served in", "serves its request", "sends a request served here", "over HTTP"],
+  file: ["writes a file read in", "reads a file it writes", "writes a file read here", "through a file"],
+  di: ["is handed, through a dependency-injection container, to", "reached through the container", "reaches this through the container", "through the container"],
+  queue: ["sends a message handled in", "handles its messages", "sends messages handled here", "through a message"],
+  db: ["writes a table read in", "reads a table it writes", "writes a table read here", "through a table"],
+  rpc: ["makes a remote call served in", "serves its remote call", "makes a remote call served here", "over RPC"],
+  format: ["builds keys taken apart in", "takes apart the keys it builds", "builds keys taken apart here", "through a key's shape"],
+};
+Object.assign(LABEL, { http: "sends a request to", file: "writes a file read by", di: "dependency injection",
+  queue: "sends a message to", db: "writes a table read by", rpc: "makes a remote call to",
+  format: "builds keys taken apart by" });
+// One flat list of links: [kind, src, dst, rank (2 exact, 1 from syntax, 0 guessed), count, line, channel info]
+const LINKS = [];
+for (const [k, s, d, x, extra] of D.edges) if (GROUPS[k]) LINKS.push([k, s, d, x, 1, 0, k === "communicates" ? extra : null]);
+for (const [s, d, n, line, x] of D.calls) LINKS.push(["calls", s, d, x, n, line, null]);
+// Systems: groups of units inside a module. A note named "name" renames a proposed system.
+const NOTES = D.notes || {};
+const sysOf = new Map(), unitsOf = new Map();
+for (const [k, s, d] of D.edges) if (k === "groups") { sysOf.set(d, s); (unitsOf.get(s) || unitsOf.set(s, []).get(s)).push(d); }
+N.forEach((n, i) => { if (n.k === "system" && NOTES[i] && NOTES[i].name) { n.proposed = n.n; n.n = NOTES[i].name.v; } });
+const grp = (u) => (sysOf.has(u) ? sysOf.get(u) : u);
+// Parts: a large module drawn as `leyline outline` splits it, two levels deep. Each part is a node of kind "part"
+// whose parent is its module or the part it was split from; a level's parts hold every file of what was split.
+const PARTS = new Map(), topPart = new Map(), subPart = new Map(); // part -> its files; file -> its part at each level
+for (const p of D.parts || []) { const files = new Set(p.files), top = N[N[p.i].p].k === "module"; PARTS.set(p.i, files); for (const f of files) (top ? topPart : subPart).set(f, p.i); }
+const PARTED = new Set([...PARTS.keys()].filter((p) => N[N[p].p].k === "module").map((p) => N[p].p));
+const subsOf = (p) => kids[p].filter((c) => N[c].k === "part");
+// The box a node is drawn in when the map shows the parts of `focus` (a part), or of its module when focus is null.
+function partFor(i, focus) {
+  const f = fileOf[i], t = f == null ? null : topPart.get(f);
+  if (t == null) return null;
+  if (focus == null) return t;
+  const ftop = N[N[focus].p].k === "module" ? focus : N[focus].p, s = subPart.get(f);
+  if (t !== ftop) return t;
+  if (focus === ftop) return s != null ? s : unitOf[i];
+  return s != null && s !== focus ? s : unitOf[i];
+}
+const deepestPart = (i) => (fileOf[i] == null ? null : subPart.get(fileOf[i]) ?? topPart.get(fileOf[i]) ?? null);
+// Interface and base methods, and the methods that implement them.
+const implsOf = new Map(), basesOf = new Map();
+for (const [k, s, d] of D.edges) if (k === "overrides") { (implsOf.get(d) || implsOf.set(d, []).get(d)).push(s); (basesOf.get(s) || basesOf.set(s, []).get(s)).push(d); }
+const linkLabel = (L) => (L[6] ? LABEL[L[6].channel] || L[6].channel : LABEL[L[0]]);
+const VIEWS = D.views || [];
+// Each design-pattern label is shown as a view: its nodes, grouped by the role they play.
+const PATTERN_AT = new Map();
+for (const p of D.patterns || []) {
+  const lead = p.marks[0], cap = p.pattern[0].toUpperCase() + p.pattern.slice(1);
+  const nm = D.nodes[lead.i];
+  const owner = (nm.k === "callable" || nm.k === "field") && nm.p != null && D.nodes[nm.p].k === "type" ? D.nodes[nm.p].n + "." : "";
+  PATTERN_AT.set(VIEWS.length, p);
+  VIEWS.push({ id: p.id, kind: "pattern", title: `${cap}: ${owner}${nm.n}`, narrative: p.rationale, marks: p.marks.map((m) => ({ ...m, note: "" })), legend: {}, pattern: p });
+}
+// Measured coverage: which functions ran under which test.
+const MEAS = D.measured || { t: {}, any: [], watched: [] };
+const RAN_ANY = new Set(MEAS.any), WATCHED = new Set(MEAS.watched), RAN_IN = new Map(), TESTS_OF = new Map();
+for (const [t, ns] of Object.entries(MEAS.t)) { RAN_IN.set(+t, new Set(ns)); for (const n of ns) (TESTS_OF.get(n) || TESTS_OF.set(n, []).get(n)).push(+t); }
+const fileNodeOf = (i) => { let c = i; while (c != null && N[c].k !== "file") c = N[c].p; return c; };
+function measuredHtml(i) {
+  if (!MEAS.any.length || N[i].k !== "callable" || !WATCHED.has(fileNodeOf(i))) return "";
+  const ts = TESTS_OF.get(i) || [];
+  if (!RAN_ANY.has(i)) return `<h3>Measured</h3><p class="note"><span class="tag risk-medium">did not run</span> No test ran this function when coverage was measured.</p>`;
+  if (!ts.length) return `<h3>Measured</h3><p class="note">It ran when coverage was measured. The coverage file does not say under which test.</p>`;
+  return listHtml("Ran under these tests (measured)", ts.slice(0, 25).map((t) => ({ go: t, name: N[t].n, sub: N[t].f || "", ct: "" })), ts.length);
+}
+// Field access: which functions read and assign each field.
+const ACC_BY_FIELD = new Map(), ACC_BY_FN = new Map();
+for (const a of D.access || []) { (ACC_BY_FIELD.get(a[1]) || ACC_BY_FIELD.set(a[1], []).get(a[1])).push(a); (ACC_BY_FN.get(a[0]) || ACC_BY_FN.set(a[0], []).get(a[0])).push(a); }
+function accessHtml(i) {
+  const n = N[i]; let h = "";
+  const fnRow = (a) => ({ go: a[0], name: N[a[0]].k === "test" ? N[a[0]].n : qual(a[0]), sub: [N[moduleOf[a[0]]] ? "in " + N[moduleOf[a[0]]].n : "", a[4] ? "line " + a[4] : "", a[5] ? "only while creating the object" : "", a[6] ? "guessed by name" : ""].filter(Boolean).join(" · "), ct: a[3] > 1 ? a[3] + "×" : "" });
+  const fieldRow = (a) => ({ go: a[1], name: qual(a[1]), sub: [a[5] ? "only while creating the object" : "", a[6] ? "guessed by name" : ""].filter(Boolean).join(" · "), ct: a[3] > 1 ? a[3] + "×" : "" });
+  if (n.k === "field") {
+    const all = ACC_BY_FIELD.get(i) || [], w = all.filter((a) => a[2]), r = all.filter((a) => !a[2]);
+    if (all.length) { h += listHtml("Assigned by", w.slice(0, 40).map(fnRow), w.length, "Nothing in the repository assigns it after its declaration."); h += listHtml("Read by", r.slice(0, 40).map(fnRow), r.length, "Nothing in the repository reads it."); }
+  } else if (n.k === "callable" || n.k === "test") {
+    const all = ACC_BY_FN.get(i) || [], w = all.filter((a) => a[2]), r = all.filter((a) => !a[2]);
+    h += listHtml("Assigns", w.slice(0, 30).map(fieldRow), w.length) + listHtml("Reads", r.slice(0, 30).map(fieldRow), r.length);
+  } else if (n.k === "type") {
+    const rows = [];
+    N.forEach((f, k) => { if (f.k !== "field" || f.p !== i) return; const all = ACC_BY_FIELD.get(k) || []; if (!all.length) return;
+      const w = all.filter((a) => a[2] && !a[5]), r = all.filter((a) => !a[2]);
+      const out = [...new Set(w.map((a) => { let c = N[a[0]].p; while (c != null && N[c].k !== "type") c = N[c].p; return c; }).filter((c) => c !== i).map((c) => (c == null ? "top-level code" : N[c].n)))];
+      rows.push({ go: k, name: f.n, sub: out.length ? "assigned from " + out.slice(0, 4).join(", ") + (out.length > 4 ? " and " + (out.length - 4) + " more" : "") : "", ct: `${w.length} set · ${r.length} read`, o: out.length, w: w.length }); });
+    rows.sort((a, b) => b.o - a.o || b.w - a.w);
+    h += listHtml("State", rows.slice(0, 30), rows.length);
+  }
+  return h;
+}
+const patternsOf = (i) => { const out = []; for (const [k, p] of PATTERN_AT) if (p.marks.some((m) => m.i === i || (N[m.i] && N[m.i].p === i))) out.push(k); return out; };
+const patternRows = (ks) => ks.length ? `<h3>Design patterns <span>${ks.length}</span></h3><ul class="list">${ks.slice(0, 12).map((k) => `<li><button data-view="${k}"><span class="nm">${esc(VIEWS[k].title)}<small>${esc(VIEWS[k].narrative)}</small></span><span class="ct">${Math.round(PATTERN_AT.get(k).c * 100)}%</span></button></li>`).join("")}</ul>${ks.length > 12 ? `<div class="more">and ${ks.length - 12} more</div>` : ""}` : "";
+// Box roles, strongest first. The first group is what a check found; the rest is what a plan expects.
+const ROLE_ORDER = ["drift", "missed", "done", "done_new", "helper", "test_changed", "changed", "new", "contract", "must_edit", "test", "direct", "indirect"];
+const REVIEW_CLS = { "edited as predicted": "c0", "new, as declared": "c2", "edited, not predicted": "c3", "predicted, not edited": "c1" };
+// In the words leyline.md uses for the same things.
+const ROLE_LABEL = { changed: "will change", new: "new code goes in here", contract: "must be edited with it (an interface)", must_edit: "must be edited with it",
+  direct: "reached, no edit needed", test: "existing test that runs through it", indirect: "reached further out, no edit needed",
+  done: "changed, as planned", done_new: "new, as planned", helper: "helper added, only planned code calls it", test_changed: "test added or changed",
+  drift: "changed, but not in the spec", missed: "expected to change, and did not" };
+const FLOWS = D.flows || [];
+const flowsOf = new Map();
+FLOWS.forEach((f, fi) => { for (const st of f.steps) { if (!flowsOf.has(st[0])) flowsOf.set(st[0], []); flowsOf.get(st[0]).push(fi); } });
+const entryTargets = new Set(D.edges.filter((e) => e[0] === "exposes").map((e) => e[2]));
+const entryOf = new Map(D.edges.filter((e) => e[0] === "exposes").map((e) => [e[2], e[1]]));
+const hasEntry = new Set();
+for (const [t, e] of entryOf) if ((N[e].x || {}).trigger !== "lifecycle") for (let c = t; c != null; c = N[c].p) hasEntry.add(c);
+const repoIdx = REPOS[0];
+// A test written as a function is counted with the tests, not the functions, as `leyline map` counts them.
+const counted = (n, kind) => n.k === kind && !(kind === "callable" && (n.x || {}).is_test);
+const count = (root, kind) => { let c = 0; const st = [root]; while (st.length) { const i = st.pop(); if (i !== root && counted(N[i], kind)) c++; st.push(...kids[i]); } return c; };
+const linesOf = (i) => { let c = 0; const st = [i]; while (st.length) { const j = st.pop(); if (N[j].k === "file") c += N[j].b || 0; else st.push(...kids[j]); } return c; };
+const isBody = (i) => N[i].n === "<module>" || N[i].n === "<top-level>";
+const big = (n) => (n >= 100000 ? Math.round(n / 1000) + "k" : n >= 10000 ? (n / 1000).toFixed(1) + "k" : n.toLocaleString());
+const short = (i) => {
+  const n = N[i];
+  if (isBody(i)) return "script body";
+  if (n.k === "callable") { const m = /\(([^)]*)\)$/.exec(n.i); const a = m && m[1] ? m[1].split(",").length : 0; return n.n === ".ctor" ? `new(${a ? "…" : ""})` : `${n.n}(${a ? "…" : ""})`; }
+  return n.n;
+};
+const langOf = (i) => { const n = N[i]; if (n.l) return n.l; if (n.k === "module") { const ls = new Set(kids[i].map((f) => N[f].l).filter(Boolean)); return ls.size === 1 ? [...ls][0] : "none"; } return "none"; };
+
+/* ---------- state ---------- */
+const S = { level: WS ? "ws" : "repo", focus: WS ? null : repoIdx, sel: null, hover: null, mode: "map", externals: false, view: null,
+  change: null, phase: "plan", pick: null,
+  filters: { ws: { calls: true, types: true, inherit: true, imports: true, channels: true },
+             repo: { calls: true, types: true, inherit: true, imports: true, channels: true },
+             module: { calls: true, types: false, inherit: true, imports: false, channels: true },
+             system: { calls: true, types: false, inherit: true, imports: false, channels: true },
+             part: { calls: true, types: false, inherit: true, imports: false, channels: true },
+             unit: { calls: true, types: false, inherit: true, imports: false, channels: true },
+             view: { calls: true, types: false, inherit: true, imports: false, channels: true } },
+  flow: 0, viewIdx: 0, prev: null,
+  outside: { repo: true, module: false, system: true, part: true, unit: true, view: true } };
+const cam = { x: 0, y: 0, k: 1 };
+
+/* ---------- build the graph for the current level ---------- */
+// The current saved view: which box each marked node falls in, and that box's strongest role.
+let VW = null;
+function viewSetup() {
+  const v = curView(); VW = { boxes: new Map(), marksIn: new Map(), roles: [] };
+  if (!v) return;
+  const custom = [...new Set(v.marks.map((m) => m.role))].filter((r) => !ROLE_ORDER.includes(r));
+  VW.roles = [...ROLE_ORDER.filter((r) => v.marks.some((m) => m.role === r)), ...custom];
+  VW.cls = (r) => (ROLE_ORDER.includes(r) ? r : REVIEW_CLS[r] || "c" + (custom.indexOf(r) % 6));
+  const rankOf = (r) => VW.roles.indexOf(r);
+  let marks = v.marks;
+  const boxOf = (i) => (unitOf[i] != null ? unitOf[i] : i);
+  if (new Set(marks.map((m) => boxOf(m.i))).size > 70) { marks = marks.filter((m) => m.role !== "indirect"); VW.trimmed = true; }
+  for (const m of marks) { const b = boxOf(m.i); (VW.marksIn.get(b) || VW.marksIn.set(b, []).get(b)).push(m); if (!VW.boxes.has(b) || rankOf(m.role) < rankOf(VW.boxes.get(b))) VW.boxes.set(b, m.role); }
+}
+function rep(i) {
+  const n = N[i];
+  if (S.level === "view") { const b = unitOf[i] != null ? unitOf[i] : i; return VW.boxes.has(b) ? b : null; }
+  if (S.level === "ws") return n.k === "external" ? null : repoOf[i];
+  if (S.level === "repo") {
+    if (n.k === "external") return S.externals && repoOf[i] === S.focus ? i : null;
+    const m = n.k === "module" ? i : moduleOf[i];
+    return m != null && (repoOf[m] === S.focus || S.outside.repo) ? m : null;
+  }
+  if (n.k === "external") return null;
+  if (n.k === "system") return null;
+  if (S.level === "module") return moduleOf[i] === S.focus ? (unitOf[i] == null ? null : PARTED.has(S.focus) ? partFor(i, null) ?? grp(unitOf[i]) : grp(unitOf[i])) : (n.k === "module" ? i : moduleOf[i]);
+  if (S.level === "part") { if (unitOf[i] == null) return n.k === "module" ? i : null; return moduleOf[i] === moduleOf[S.focus] ? partFor(i, S.focus) ?? unitOf[i] : moduleOf[i]; }
+  if (S.level === "system") { const u = unitOf[i]; if (u == null) return n.k === "module" ? i : null; return sysOf.get(u) === S.focus ? u : moduleOf[i] === moduleOf[S.focus] ? grp(u) : moduleOf[i]; }
+  const u = unitOf[i];
+  if (u === S.focus) { const m = memberOf(i); return m != null && N[m].k !== "field" && N[m].k !== "entry_point" ? m : null; }
+  return u;
+}
+function inside(i) {
+  if (S.level === "view") return VW.boxes.has(i);
+  if (S.level === "ws") return N[i].k === "repo";
+  if (S.level === "repo") return (N[i].k === "module" || N[i].k === "external") && repoOf[i] === S.focus;
+  if (S.level === "module" && PARTED.has(S.focus)) return N[i].k === "part" && N[i].p === S.focus;
+  if (S.level === "module") return N[i].k === "system" ? N[i].p === S.focus : moduleOf[i] === S.focus && unitOf[i] === i && !sysOf.has(i);
+  if (S.level === "part") return subsOf(S.focus).length ? N[i].k === "part" && N[i].p === S.focus : unitOf[i] === i && PARTS.get(S.focus).has(fileOf[i]);
+  if (S.level === "system") return unitOf[i] === i && sysOf.get(i) === S.focus;
+  return unitOf[i] === S.focus && memberOf(i) === i;
+}
+function buildView() {
+  const edges = new Map();
+  const used = new Set();
+  for (const L of LINKS) {
+    if (!S.filters[S.level][GROUPS[L[0]]]) continue;
+    const a = rep(L[1]), b = rep(L[2]);
+    if (a == null || b == null || a === b) continue;
+    const ia = inside(a), ib = inside(b);
+    if (!ia && !ib) continue;
+    if (S.level !== "ws" && !S.outside[S.level] && !(ia && ib)) continue;
+    const comm = L[0] === "communicates";
+    const key = a + ">" + b + (comm ? ">c" : "");
+    let e = edges.get(key);
+    if (!e) edges.set(key, e = { key, a, b, n: 0, exact: 0, guess: 0, kinds: {}, links: [], comm, chans: new Set(), cross: WS && repoOf[a] !== repoOf[b] });
+    e.n += L[4]; if (L[3] === 2) e.exact += L[4]; if (L[3] === 0) e.guess += L[4];
+    if (comm) e.chans.add(L[6].channel);
+    e.kinds[linkLabel(L)] = (e.kinds[linkLabel(L)] || 0) + L[4];
+    e.links.push(L);
+    used.add(a); used.add(b);
+  }
+  const nodes = [];
+  if (S.level === "view") { for (const b of VW.boxes.keys()) nodes.push(b); }
+  else if (S.level === "ws") { for (const r of REPOS) nodes.push(r); }
+  else if (S.level === "repo") { N.forEach((n, i) => { if (repoOf[i] === S.focus && (n.k === "module" || (S.externals && n.k === "external" && used.has(i)))) nodes.push(i); }); }
+  else if (S.level === "module" && PARTED.has(S.focus)) { for (const c of subsOf(S.focus)) nodes.push(c); }
+  else if (S.level === "part") {
+    const subs = subsOf(S.focus), fs = PARTS.get(S.focus);
+    if (subs.length) nodes.push(...subs);
+    else N.forEach((n, i) => { if (unitOf[i] === i && fs.has(fileOf[i]) && (n.k === "type" || kids[i].some((c) => N[c].k === "callable"))) nodes.push(i); });
+  }
+  else if (S.level === "module") { N.forEach((n, i) => { if (n.k === "system" ? n.p === S.focus : moduleOf[i] === S.focus && unitOf[i] === i && !sysOf.has(i) && (n.k === "type" || kids[i].some((c) => N[c].k === "callable"))) nodes.push(i); }); }
+  else if (S.level === "system") { for (const u of unitsOf.get(S.focus) || []) nodes.push(u); }
+  else { for (const c of kids[S.focus]) if (N[c].k === "callable" || N[c].k === "type") nodes.push(c); }
+  const own = new Set(nodes);
+  // Outside nodes: keep the heaviest, so a busy type does not drown the picture.
+  const weight = new Map();
+  for (const e of edges.values()) for (const s of [e.a, e.b]) if (!own.has(s)) weight.set(s, (weight.get(s) || 0) + e.n);
+  const stubs = [...weight.entries()].sort((x, y) => y[1] - x[1]);
+  const keep = new Set(stubs.slice(0, S.level === "repo" ? 24 : 12).map((s) => s[0]));
+  for (const [key, e] of edges) if ((!own.has(e.a) && !keep.has(e.a)) || (!own.has(e.b) && !keep.has(e.b))) edges.delete(key);
+  for (const s of keep) nodes.push(s);
+  return { nodes, own, edges: [...edges.values()], hiddenStubs: Math.max(0, stubs.length - keep.size) };
+}
+
+/* ---------- layout: layered, dependents above what they depend on ---------- */
+const meter = document.createElement("canvas").getContext("2d");
+function measure(text, font) { meter.font = font; return meter.measureText(text).width; }
+// The level's key in the remembered layout export.py writes; levels without one are laid out here.
+const levelKey = () => (S.level === "ws" ? "ws" : S.level === "repo" ? "repo:" + N[S.focus].i : S.level === "module" ? "module:" + N[S.focus].i : null);
+const MONO = '500 12.5px "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace', SANS = '11px "IBM Plex Sans", "Segoe UI", system-ui, sans-serif';
+function layout(view) {
+  const two = S.level === "ws" || S.level === "repo" || S.level === "view" || ((S.level === "module" || S.level === "part") && view.nodes.some((i) => N[i].k === "system" || N[i].k === "part"));
+  const boxes = new Map();
+  const homeMod = S.level === "module" ? S.focus : S.level === "repo" || S.level === "view" || S.level === "ws" ? null : moduleOf[S.focus];
+  const homeRepo = S.level === "repo" ? S.focus : homeMod;
+  for (const i of view.nodes) {
+    const far = homeMod != null && N[i].k !== "module" && moduleOf[i] !== homeMod;
+    const away = S.level !== "view" && otherRepo(i, homeRepo);
+    const label = (away ? N[repoOf[i]].n + " / " : "") + (far ? N[moduleOf[i]].n + " / " : "") + short(i);
+    const meta = two ? metaLine(i) : "";
+    const w = Math.max(measure(label, MONO) + 34, two ? measure(meta, SANS) + 32 : 0, 70);
+    boxes.set(i, { i, w: Math.ceil(w), h: two ? 46 : 30, label, meta, x: 0, y: 0, stub: !view.own.has(i), away });
+  }
+  const fixed = D.layout && levelKey() ? D.layout[levelKey()] : null;
+  if (fixed && view.nodes.some((i) => fixed[i])) return placeFixed(view, boxes, fixed, two);
+  const out = new Map(), inn = new Map();
+  for (const i of view.nodes) { out.set(i, []); inn.set(i, []); }
+  // A handler depends on whatever raises its event, so event arrows are layered against their direction.
+  for (const e of view.edges) { const flip = e.comm && e.chans.has("event"); const a = flip ? e.b : e.a, b = flip ? e.a : e.b; if (!out.get(a).includes(b)) { out.get(a).push(b); inn.get(b).push(a); } }
+  const linked = view.nodes.filter((i) => out.get(i).length || inn.get(i).length);
+  const loose = view.nodes.filter((i) => !out.get(i).length && !inn.get(i).length);
+  // Break cycles with a depth-first pass, then layer by longest path.
+  const state = new Map(), back = new Set();
+  const order = [...linked].sort((a, b) => inn.get(a).length - inn.get(b).length || out.get(b).length - out.get(a).length);
+  const visit = (v) => { state.set(v, 1); for (const w of out.get(v)) { if (state.get(w) === 1) back.add(v + ">" + w); else if (!state.get(w)) visit(w); } state.set(v, 2); };
+  for (const v of order) if (!state.get(v)) visit(v);
+  const layer = new Map();
+  const depth = (v) => { if (layer.has(v)) return layer.get(v); layer.set(v, 0); let d = 0; for (const u of inn.get(v)) if (!back.has(u + ">" + v)) d = Math.max(d, depth(u) + 1); layer.set(v, d); return d; };
+  linked.forEach(depth);
+  const layers = [];
+  for (const v of linked) (layers[layer.get(v)] = layers[layer.get(v)] || []).push(v);
+  const pos = new Map();
+  const sweep = (rows, up, down, times) => {
+    rows.forEach((r) => r.forEach((v, j) => pos.set(v, j)));
+    for (let k = 0; k < times; k++) {
+      const seq = k % 2 ? [...rows.keys()].reverse() : [...rows.keys()];
+      for (const r of seq) { const nb = k % 2 ? down : up; const b = new Map(rows[r].map((v) => { const ns = (nb.get(v) || []).filter((u) => pos.has(u)); return [v, ns.length ? ns.reduce((t, u) => t + pos.get(u), 0) / ns.length : pos.get(v)]; })); rows[r].sort((x, y) => b.get(x) - b.get(y)); rows[r].forEach((v, j) => pos.set(v, j)); }
+    }
+  };
+  const dense = layers.filter(Boolean);
+  const rankLayer = new Map(); dense.forEach((r, k) => r.forEach((v) => rankLayer.set(v, k)));
+  const upL = new Map(), downL = new Map();
+  for (const v of linked) { upL.set(v, [...inn.get(v), ...out.get(v)].filter((u) => rankLayer.get(u) < rankLayer.get(v))); downL.set(v, [...inn.get(v), ...out.get(v)].filter((u) => rankLayer.get(u) > rankLayer.get(v))); }
+  sweep(dense, upL, downL, 4);
+  // Wide layers wrap into several ranks, so the map stays readable on narrow screens.
+  const stageW = svg.getBoundingClientRect().width || 1000;
+  const MAXW = Math.max(380, Math.min(1500, stageW / 0.78)), GX = 26, GY = two ? 84 : 62, rowH = two ? 46 : 30;
+  const ranks = [];
+  for (const r of dense) { let line = [], lw = 0; for (const v of r) { const b = boxes.get(v); if (line.length && lw + b.w > MAXW) { ranks.push(line); line = []; lw = 0; } line.push(v); lw += b.w + GX; } if (line.length) ranks.push(line); }
+  const rank = new Map(); ranks.forEach((r, k) => r.forEach((v) => rank.set(v, k)));
+  // An edge that skips ranks gets a waypoint in each rank it crosses, so it runs between boxes, not behind them.
+  const up = new Map(), down = new Map();
+  const link = (a, b) => { (down.get(a) || down.set(a, []).get(a)).push(b); (up.get(b) || up.set(b, []).get(b)).push(a); };
+  for (const e of view.edges) {
+    e.chain = [];
+    const ra = rank.get(e.a), rb = rank.get(e.b);
+    if (ra == null || rb == null || ra === rb) continue;
+    const lo = Math.min(ra, rb), hi = Math.max(ra, rb), topNode = ra < rb ? e.a : e.b, botNode = ra < rb ? e.b : e.a;
+    let prev = topNode; const ids = [];
+    for (let r = lo + 1; r < hi; r++) { const id = "~" + e.key + "~" + r; boxes.set(id, { i: id, w: 2, h: rowH, x: 0, y: 0, dummy: true }); ranks[r].push(id); rank.set(id, r); link(prev, id); prev = id; ids.push(id); }
+    link(prev, botNode);
+    e.chain = ra < rb ? ids : ids.reverse();
+  }
+  sweep(ranks, up, down, 8);
+  let y = 0;
+  // Waypoints sit close together, so bundles of long edges take little room.
+  const gapAfter = (list, j) => { if (j === list.length - 1) return 0; const a = boxes.get(list[j]).dummy, b = boxes.get(list[j + 1]).dummy; return a && b ? 5 : a || b ? 12 : GX; };
+  const place = (list) => { const w = list.reduce((t, v, j) => t + boxes.get(v).w + gapAfter(list, j), 0); let x = -w / 2; list.forEach((v, j) => { const b = boxes.get(v); b.x = x + b.w / 2; b.y = y; x += b.w + gapAfter(list, j); }); };
+  for (const r of ranks) { place(r); y += rowH + GY; }
+  let looseY = null;
+  if (loose.length) {
+    if (linked.length) y += 6; looseY = y - 14; y += 8;
+    let line = [], lw = 0;
+    for (const v of loose.sort((a, b) => N[a].n.localeCompare(N[b].n))) { const b = boxes.get(v); if (line.length && lw + b.w > MAXW) { place(line); y += rowH + 16; line = []; lw = 0; } line.push(v); lw += b.w + GX; }
+    if (line.length) place(line);
+  }
+  return { boxes, back, looseY, hasLinked: linked.length > 0 };
+}
+// Rows and places from the remembered layout. A box keeps its place unless a wider neighbour needs the room;
+// boxes it does not know (outside packages, other modules) go in a row above what they depend on or below
+// what depends on them; a long edge passes through each row it crosses at a gap between boxes.
+function placeFixed(view, boxes, fixed, two) {
+  const GX = 26, GY = two ? 84 : 62, rowH = two ? 46 : 30;
+  const at = new Map();
+  for (const i of view.nodes) if (fixed[i]) at.set(i, fixed[i]);
+  const known = [...at.values()].map((f) => f[0]);
+  const top = Math.min(...known), bottom = Math.max(...known);
+  for (const i of view.nodes) {
+    if (at.has(i)) continue;
+    let into = 0, from = 0; const xs = [];
+    for (const e of view.edges) { if (e.b === i && fixed[e.a]) { into++; xs.push(fixed[e.a][1]); } if (e.a === i && fixed[e.b]) { from++; xs.push(fixed[e.b][1]); } }
+    at.set(i, [from > into ? top - 1 : bottom + 1, xs.length ? xs.reduce((t, x) => t + x, 0) / xs.length : 0]);
+  }
+  const rowNums = [...new Set([...at.values()].map((f) => f[0]))].sort((a, b) => a - b);
+  const rowAt = new Map(rowNums.map((r, k) => [r, k]));
+  const rows = rowNums.map(() => []);
+  for (const i of view.nodes) rows[rowAt.get(at.get(i)[0])].push(i);
+  rows.forEach((list, k) => {
+    list.sort((a, b) => at.get(a)[1] - at.get(b)[1] || a - b);
+    let right = -Infinity, moved = 0;
+    for (const i of list) { const b = boxes.get(i), want = at.get(i)[1] - b.w / 2, left = Math.max(want, right + GX); moved += left - want; b.x = left + b.w / 2; b.y = k * (rowH + GY); right = left + b.w; }
+    if (moved && list.every((i) => !fixed[i])) for (const i of list) boxes.get(i).x -= moved / list.length;   // a row of newcomers stays centred
+  });
+  const busy = rows.map((list) => list.map((i) => { const b = boxes.get(i); return [b.x - b.w / 2, b.x + b.w / 2]; }));
+  const rowOf = new Map(); rows.forEach((list, k) => list.forEach((i) => rowOf.set(i, k)));
+  const taken = new Map();
+  for (const e of view.edges) {
+    e.chain = [];
+    const ra = rowOf.get(e.a), rb = rowOf.get(e.b);
+    if (Math.abs(ra - rb) < 2) continue;
+    const A = boxes.get(e.a), B = boxes.get(e.b), ids = [];
+    for (let r = Math.min(ra, rb) + 1; r < Math.max(ra, rb); r++) {
+      let x = A.x + (B.x - A.x) * (r - ra) / (rb - ra);
+      for (const [l, rr] of busy[r]) if (x > l - 8 && x < rr + 8) x = x - l < rr - x ? l - 9 : rr + 9;
+      const slot = r + ":" + Math.round(x / 8), n = taken.get(slot) || 0; taken.set(slot, n + 1);
+      x += (n % 2 ? -1 : 1) * Math.ceil(n / 2) * 4;
+      const id = "~" + e.key + "~" + r;
+      boxes.set(id, { i: id, w: 2, h: rowH, x, y: r * (rowH + GY), dummy: true });
+      ids.push(id);
+    }
+    e.chain = ra < rb ? ids : ids.reverse();
+  }
+  return { boxes, back: new Set(), looseY: null, hasLinked: true };
+}
+function metaLine(i) {
+  const n = N[i];
+  if (n.k === "repo") { const ms = N.filter((m, k) => m.k === "module" && repoOf[k] === i).length; return `${ms} module${ms === 1 ? "" : "s"} · ${linesOf(i).toLocaleString()} lines`; }
+  if (S.level === "view") { const ms = VW.marksIn.get(i) || []; const where = n.k === "module" ? "module" : N[moduleOf[i]] ? N[moduleOf[i]].n : ""; return `${where}${ms.length > 1 ? " · " + ms.length + " marked" : ""}`; }
+  if (n.k === "external") return (n.x && (n.x.category || n.x.ecosystem)) || "external";
+  if (n.k === "system") { const us = unitsOf.get(i) || []; return `${us.length} types and files · ${us.reduce((t, u) => t + count(u, "callable"), 0)} functions`; }
+  if (n.k === "part") { const x = n.x || {}; return `${x.files || 0} file${x.files === 1 ? "" : "s"} · ${(x.functions || 0).toLocaleString()} functions · ${big(x.lines || 0)} lines${x.stale ? " · name may be stale" : ""}`; }
+  if (n.k !== "module") return kindName(i);
+  const f = kids[i].filter((c) => N[c].k === "file").length;
+  return `${f} file${f === 1 ? "" : "s"} · ${linesOf(i).toLocaleString()} lines`;
+}
+
+/* ---------- draw ---------- */
+let L = null, OVER = null;
+function draw() {
+  OVER = S.change != null && S.level !== "view" ? overlay() : null;
+  S.view = buildView();
+  L = layout(S.view);
+  const gE = $("edges"), gN = $("nodes");
+  gE.textContent = ""; gN.textContent = "";
+  const maxN = Math.max(1, ...S.view.edges.map((e) => e.n));
+  svg.classList.toggle("dense", S.view.edges.length > 45);
+  // Spread the ends of edges along each box so arrowheads do not pile up on one point.
+  const ports = new Map(), ends = new Map();
+  const slot = (box, side, otherX, key) => { const k = box.i + "|" + side; if (!ports.has(k)) ports.set(k, []); ports.get(k).push([otherX, key]); };
+  for (const e of S.view.edges) {
+    const A = L.boxes.get(e.a), B = L.boxes.get(e.b);
+    const first = e.chain.length ? L.boxes.get(e.chain[0]) : B, last = e.chain.length ? L.boxes.get(e.chain[e.chain.length - 1]) : A;
+    if (first.y === A.y && !e.chain.length) continue;
+    const sa = first.y > A.y ? "b" : "t", sb = last.y < B.y ? "t" : "b";
+    slot(A, sa, first.x, e.key + "|a"); slot(B, sb, last.x, e.key + "|b"); ends.set(e.key, [sa, sb]);
+  }
+  const off = new Map();
+  for (const [k, list] of ports) { list.sort((p, q) => p[0] - q[0]); const box = L.boxes.get(isNaN(+k.split("|")[0]) ? k.split("|")[0] : +k.split("|")[0]); const span = Math.min(box.w * 0.7, 18 * (list.length - 1)); list.forEach(([, key], j) => off.set(key, list.length > 1 ? -span / 2 + (span * j) / (list.length - 1) : 0)); }
+  for (const e of S.view.edges) {
+    const A = L.boxes.get(e.a), B = L.boxes.get(e.b);
+    const g = el("g", { class: "edge" + (e.comm ? " comm" : e.guess === e.n ? " guess" : e.exact < e.n ? " heur" : "") + (e.cross ? " cross" : ""), "data-key": e.key, "data-comm": e.comm ? 1 : 0, "data-cross": e.cross ? 1 : 0 }, gE);
+    const d = route(A, B, e.chain.map((id) => L.boxes.get(id)), ends.get(e.key), off.get(e.key + "|a") || 0, off.get(e.key + "|b") || 0);
+    el("path", { class: "vis", d: d.path, "stroke-width": e.comm ? 1.8 : (1 + 2.2 * Math.log(1 + e.n) / Math.log(1 + maxN)).toFixed(2), "marker-end": `url(#arrow${e.comm ? "-c" : e.cross ? "-x" : ""})` }, g);
+    el("path", { class: "hit", d: d.path }, g);
+    if (e.comm || S.level === "repo" || S.level === "ws" || S.view.edges.length <= 14) { const t = el("text", { x: d.mx, y: d.my + 4, "text-anchor": "middle" }, g); t.textContent = e.comm ? [...e.chans].join(", ") : e.n; }
+    g.addEventListener("click", (ev) => { ev.stopPropagation(); select({ edge: e.key }); });
+  }
+  if (L.looseY != null && L.hasLinked) { const t = el("text", { class: "group-label", x: 0, y: L.looseY, "text-anchor": "middle" }, gN); t.textContent = "No links in this view"; }
+  for (const b of L.boxes.values()) {
+    if (b.dummy) continue;
+    const n = N[b.i];
+    const role = S.level === "view" ? VW.boxes.get(b.i) : OVER ? OVER.get(b.i) : null;
+    const g = el("g", { class: "node" + (b.stub ? " stub" : "") + (b.away ? " other" : "") + (role ? " role-" + (S.level === "view" ? VW.cls(role) : role) : ""), transform: `translate(${b.x - b.w / 2},${b.y})`, tabindex: 0, "data-i": b.i, role: "button", "aria-label": n.n }, gN);
+    el("rect", { width: b.w, height: b.h, rx: 5 }, g);
+    el("rect", { class: "lang-" + langOf(b.i), x: 0, y: 0, width: 4, height: b.h, rx: 2, style: "stroke:none" }, g);
+    const t = el("text", { x: 14, y: b.meta ? 19 : 19.5 }, g); t.textContent = b.label;
+    if (b.meta) { const m = el("text", { class: "meta", x: 14, y: 35 }, g); m.textContent = b.meta; }
+    if (hasEntry.has(b.i)) el("path", { class: "flag", d: `M${b.w - 14} 7h8l-2.5 3.5l2.5 3.5h-8z`, style: "stroke:none" }, g);
+    g.addEventListener("click", (ev) => { ev.stopPropagation(); select({ node: b.i }); });
+    g.addEventListener("pointerenter", () => { S.hover = b.i; mark(); });
+    g.addEventListener("pointerleave", () => { S.hover = null; mark(); });
+    g.addEventListener("dblclick", (ev) => { ev.stopPropagation(); if (S.mode === "views" || S.mode === "change") goTo(b.i); else open(b.i); });
+    g.addEventListener("keydown", (ev) => { if (ev.key === "Enter") { ev.shiftKey ? open(b.i) : select({ node: b.i }); } });
+  }
+  mark();
+  if (S.mode === "matrix") drawMatrix();
+}
+function route(A, B, chain, sides, o1, o2) {
+  if (!sides) { // same rank: bow over the top
+    const right = B.x > A.x;
+    const x1 = A.x + (right ? A.w / 2 : -A.w / 2), y1 = A.y + A.h / 2, x2 = B.x + (right ? -B.w / 2 - 2 : B.w / 2 + 2), y2 = B.y + B.h / 2;
+    const bow = -Math.min(60, 18 + Math.abs(x2 - x1) * 0.12);
+    const c1 = [x1 + (x2 - x1) * 0.3, y1 + bow], c2 = [x1 + (x2 - x1) * 0.7, y2 + bow];
+    return { path: `M${x1} ${y1}C${c1[0]} ${c1[1]} ${c2[0]} ${c2[1]} ${x2} ${y2}`, mx: (x1 + 3 * c1[0] + 3 * c2[0] + x2) / 8, my: (y1 + 3 * c1[1] + 3 * c2[1] + y2) / 8 };
+  }
+  const dir = sides[0] === "b" ? 1 : -1;
+  // Waypoints: leave A, pass straight through each crossed rank, arrive at B.
+  const pts = [[A.x + o1, dir > 0 ? A.y + A.h : A.y]];
+  for (const d of chain) { pts.push([d.x, dir > 0 ? d.y - 4 : d.y + d.h + 4]); pts.push([d.x, dir > 0 ? d.y + d.h + 4 : d.y - 4]); }
+  pts.push([B.x + o2, sides[1] === "t" ? B.y - 2 : B.y + B.h + 2]);
+  let path = `M${pts[0][0]} ${pts[0][1]}`, mx = 0, my = 0;
+  for (let k = 1; k < pts.length; k++) {
+    const [x1, y1] = pts[k - 1], [x2, y2] = pts[k];
+    if (k % 2 === 0) { path += `L${x2} ${y2}`; continue; } // straight through a crossed rank
+    const kk = Math.max(18, Math.abs(y2 - y1) * 0.45) * dir;
+    path += `C${x1} ${y1 + kk} ${x2} ${y2 - kk} ${x2} ${y2}`;
+    if (k === 1) { mx = (x1 + x2) / 2; my = (y1 + y2) / 2; }
+  }
+  return { path, mx, my };
+}
+function mark() {
+  const sel = S.sel || {};
+  const near = new Set(), nearE = new Set();
+  const ref = S.hover != null ? S.hover : sel.node;
+  if (ref != null) for (const e of S.view.edges) if (e.a === ref || e.b === ref) { near.add(e.a); near.add(e.b); nearE.add(e.key); }
+  if (sel.edge && S.hover == null) { const e = S.view.edges.find((x) => x.key === sel.edge); if (e) { near.add(e.a); near.add(e.b); } }
+  const focusOn = (ref != null && L.boxes.has(ref)) || (!!sel.edge && S.hover == null);
+  // A task or scenario picked on the change page: its boxes stand out, the rest fade.
+  const pick = picked(), pickOn = !focusOn && pick && [...L.boxes.keys()].some((i) => pick.has(i));
+  for (const g of $("nodes").querySelectorAll(".node")) {
+    const i = +g.dataset.i;
+    g.classList.toggle("sel", sel.node === i);
+    g.classList.toggle("near", sel.node !== i && (near.has(i) || ref === i));
+    g.classList.toggle("picked", !!pickOn && pick.has(i));
+    g.classList.toggle("dim", focusOn ? ref !== i && sel.node !== i && !near.has(i) : !!pickOn && !pick.has(i));
+  }
+  for (const g of $("edges").querySelectorAll(".edge")) {
+    const k = g.dataset.key, isSel = sel.edge === k, isNear = nearE.has(k);
+    const e = pickOn ? S.view.edges.find((x) => x.key === k) : null;
+    g.classList.toggle("sel", isSel); g.classList.toggle("near", isNear);
+    g.classList.toggle("dim", focusOn ? !isSel && !isNear : !!e && !pick.has(e.a) && !pick.has(e.b));
+    g.querySelector(".vis").setAttribute("marker-end", `url(#arrow${isSel ? "-m" : g.dataset.comm === "1" ? "-c" : g.dataset.cross === "1" ? "-x" : isNear ? "-a" : ""})`);
+  }
+  for (const td of $("matrix").querySelectorAll("td.on")) td.classList.toggle("sel", td.dataset.key === sel.edge);
+}
+
+/* ---------- camera ---------- */
+const svg = $("map"), world = $("world");
+const apply = () => world.setAttribute("transform", `translate(${cam.x},${cam.y}) scale(${cam.k})`);
+function fit() {
+  const r = svg.getBoundingClientRect();
+  if (!r.width || !L.boxes.size) return;
+  let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;
+  for (const b of L.boxes.values()) { x0 = Math.min(x0, b.x - b.w / 2); x1 = Math.max(x1, b.x + b.w / 2); y0 = Math.min(y0, b.y); y1 = Math.max(y1, b.y + b.h); }
+  const padT = $("tools").getBoundingClientRect().height + 36, padB = Math.max($("hint").getBoundingClientRect().height, $("viewkey").getBoundingClientRect().height) + 28, pad = 20;
+  cam.k = Math.min(1.25, (r.width - 2 * pad) / (x1 - x0), (r.height - padT - padB) / (y1 - y0));
+  cam.k = Math.max(cam.k, 0.3);
+  cam.x = r.width / 2 - ((x0 + x1) / 2) * cam.k;
+  cam.y = padT + Math.max(0, (r.height - padT - padB - (y1 - y0) * cam.k) / 2) - y0 * cam.k;
+  apply();
+}
+function zoomAt(px, py, f) { const k = Math.min(3, Math.max(0.1, cam.k * f)); cam.x = px - (px - cam.x) * (k / cam.k); cam.y = py - (py - cam.y) * (k / cam.k); cam.k = k; apply(); }
+svg.addEventListener("wheel", (e) => { e.preventDefault(); const r = svg.getBoundingClientRect(); zoomAt(e.clientX - r.left, e.clientY - r.top, Math.exp(-e.deltaY * 0.0015)); }, { passive: false });
+const ptrs = new Map(); let pinch = 0, moved = 0;
+svg.addEventListener("pointerdown", (e) => { ptrs.set(e.pointerId, [e.clientX, e.clientY]); moved = 0; });
+svg.addEventListener("pointermove", (e) => {
+  if (!ptrs.has(e.pointerId)) return;
+  const p = ptrs.get(e.pointerId), dx = e.clientX - p[0], dy = e.clientY - p[1];
+  if (ptrs.size === 1) { moved += Math.abs(dx) + Math.abs(dy); if (moved > 4) { svg.classList.add("dragging"); svg.setPointerCapture(e.pointerId); cam.x += dx; cam.y += dy; apply(); } }
+  ptrs.set(e.pointerId, [e.clientX, e.clientY]);
+  if (ptrs.size === 2) { const [a, b] = [...ptrs.values()]; const d = Math.hypot(a[0] - b[0], a[1] - b[1]); const r = svg.getBoundingClientRect(); if (pinch) zoomAt((a[0] + b[0]) / 2 - r.left, (a[1] + b[1]) / 2 - r.top, d / pinch); pinch = d; }
+});
+const endPtr = (e) => { ptrs.delete(e.pointerId); pinch = 0; svg.classList.remove("dragging"); };
+svg.addEventListener("pointerup", endPtr); svg.addEventListener("pointercancel", endPtr);
+svg.addEventListener("click", () => { if (moved < 5) select(null); });
+
+/* ---------- navigation ---------- */
+function select(sel) { S.sel = sel; mark(); side(); }
+function setLevel(level, focus, sel) { S.level = level; S.focus = focus; S.sel = sel || null; render(true); }
+function open(i) {
+  const n = N[i];
+  if (n.k === "repo") return setLevel("repo", i);
+  if (n.k === "module") return setLevel("module", i);
+  if (n.k === "system") return setLevel("system", i);
+  if (n.k === "part") return setLevel("part", i);
+  if (n.k === "external") return;
+  const u = unitOf[i];
+  if (u === i) return setLevel("unit", i);
+  if (N[i].k === "type") return goTo(i);
+  select({ node: i });
+}
+function goTo(i) {
+  const n = N[i];
+  if (n.k === "test") { const fi = FLOWS.findIndex((f) => f.entry === i); if (fi >= 0) return openFlow(fi, null); }
+  if (S.mode === "views" || S.mode === "change") setMode("map");
+  if (S.mode === "flows") { if (FLOWS[S.flow] && FLOWS[S.flow].steps.some((s) => s[0] === i)) { S.sel = { node: i }; drawFlow(); side(); const cur = $("flowview").querySelector("[aria-current]"); if (cur) cur.scrollIntoView({ block: "center" }); return; } setMode("map"); }
+  if (n.k === "repo") return setLevel("repo", i);
+  if (n.k === "module") return setLevel("repo", repoOf[i], { node: i });
+  if (n.k === "external") { S.externals = true; return setLevel("repo", repoOf[i], { node: i }); }
+  if (n.k === "entry_point") { const t = D.edges.find((e) => e[0] === "exposes" && e[1] === i); if (t) return goTo(t[2]); }
+  if (n.k === "system") return setLevel("module", n.p, { node: i });
+  if (n.k === "part") return setLevel(N[n.p].k === "module" ? "module" : "part", n.p, { node: i });
+  const u = unitOf[i];
+  if (u === i && PARTED.has(moduleOf[i]) && deepestPart(i) != null) return setLevel("part", deepestPart(i), { node: i });
+  if (u === i) return sysOf.has(i) ? setLevel("system", sysOf.get(i), { node: i }) : setLevel("module", moduleOf[i], { node: i });
+  return setLevel("unit", u, { node: i });
+}
+const top = () => (WS ? setLevel("ws", null) : setLevel("repo", repoIdx));
+function render(refit) {
+  const r = S.level === "ws" || S.level === "view" ? null : S.level === "repo" ? S.focus : repoOf[S.focus];
+  $("commit").textContent = r != null && repoMeta(r).commit ? repoMeta(r).commit.slice(0, 7) : "";
+  crumbs(); tools(); draw(); side(); if (refit) requestAnimationFrame(fit);
+}
+function crumbs() {
+  if (S.level === "view") { $("crumbs").textContent = ""; return; }
+  const parts = WS ? [["Workspace", () => setLevel("ws", null)]] : [];
+  const r = S.level === "ws" ? null : S.level === "repo" ? S.focus : repoOf[S.focus];
+  if (r != null) parts.push([N[r].n, () => setLevel("repo", r)]);
+  if (S.level !== "repo" && S.level !== "ws") { const m = S.level === "module" ? S.focus : moduleOf[S.focus]; parts.push([N[m].n, () => setLevel("module", m)]); }
+  const pc = S.level === "part" ? S.focus : S.level === "unit" && PARTED.has(moduleOf[S.focus]) ? deepestPart(S.focus) : null;
+  if (pc != null) { const chain = []; for (let c = pc; c != null && N[c].k === "part"; c = N[c].p) chain.unshift(c); for (const c of chain) parts.push([N[c].n, () => setLevel("part", c)]); }
+  const sy = pc != null ? null : S.level === "system" ? S.focus : S.level === "unit" ? sysOf.get(S.focus) : null;
+  if (sy != null) parts.push([N[sy].n, () => setLevel("system", sy)]);
+  if (S.level === "unit") parts.push([N[S.focus].n, () => setLevel("unit", S.focus)]);
+  const c = $("crumbs"); c.textContent = "";
+  parts.forEach(([label, fn], j) => {
+    if (j) { const s = document.createElement("span"); s.className = "sep"; s.textContent = "/"; c.appendChild(s); }
+    const b = document.createElement("button"); b.textContent = label; b.onclick = fn;
+    if (j === parts.length - 1) b.setAttribute("aria-current", "page");
+    c.appendChild(b);
+  });
+}
+function tools() {
+  const t = $("tools"); t.textContent = "";
+  const chip = (label, on, fn, cls) => { const b = document.createElement("button"); b.className = "chip" + (cls ? " " + cls : ""); b.textContent = label; if (on != null) b.setAttribute("aria-pressed", on); b.onclick = fn; t.appendChild(b); };
+  const zoom = () => { chip("+", null, () => { const r = svg.getBoundingClientRect(); zoomAt(r.width / 2, r.height / 2, 1.3); }, "zoom"); chip("−", null, () => { const r = svg.getBoundingClientRect(); zoomAt(r.width / 2, r.height / 2, 1 / 1.3); }, "zoom"); chip("Fit", null, fit, "zoom"); };
+  if (S.mode === "flows") return;
+  if (S.mode === "change") {
+    const c = CHANGES[S.change];
+    if (c && c.after) {
+      const seg = document.createElement("div"); seg.className = "seg"; seg.setAttribute("role", "group"); seg.setAttribute("aria-label", "Show");
+      for (const [ph, label] of [["plan", "The plan"], ["after", "What was done"]]) { const b = document.createElement("button"); b.textContent = label; b.dataset.phase = ph; b.setAttribute("aria-pressed", S.phase === ph); b.onclick = () => setPhase(ph); seg.appendChild(b); }
+      t.appendChild(seg);
+    }
+    if (c) zoom();
+    return;
+  }
+  if (S.mode === "views") {
+    if (VIEWS.length) { const sel = document.createElement("select"); sel.id = "view-pick"; sel.setAttribute("aria-label", "Saved view"); const groups = [["Changes and views", (v) => v.kind !== "pattern"], ["Design patterns", (v) => v.kind === "pattern" && !v.pattern.tests], ["Design patterns in test code", (v) => v.kind === "pattern" && v.pattern.tests]]; for (const [label, want] of groups) { const ks = VIEWS.map((v, i) => i).filter((i) => want(VIEWS[i])); if (!ks.length) continue; const g = document.createElement("optgroup"); g.label = `${label} (${ks.length})`; ks.filter((i, n) => n < 300 || i === S.viewIdx).forEach((i) => { const v = VIEWS[i], o = document.createElement("option"); o.value = i; o.textContent = (v.kind === "change" ? "Change: " : v.kind === "custom" ? "View: " : "") + v.title; o.selected = i === S.viewIdx; g.appendChild(o); }); sel.appendChild(g); } sel.onchange = () => { S.viewIdx = +sel.value; S.sel = null; viewSetup(); render(true); viewKey(); }; t.appendChild(sel); }
+    chip("+", null, () => { const r = svg.getBoundingClientRect(); zoomAt(r.width / 2, r.height / 2, 1.3); }, "zoom"); chip("−", null, () => { const r = svg.getBoundingClientRect(); zoomAt(r.width / 2, r.height / 2, 1 / 1.3); }, "zoom"); chip("Fit", null, fit, "zoom");
+    return;
+  }
+  for (const [k, label] of [["calls", "Calls"], ["types", "Type use"], ["inherit", "Inheritance"], ["imports", "Imports"], ["channels", "Events and processes"]]) {
+    if (k === "channels" && S.mode === "matrix") continue;
+    if (k === "imports" && S.level !== "repo" && S.level !== "ws") continue;
+    const f = S.filters[S.level];
+    chip(label, f[k], () => { f[k] = !f[k]; S.sel = S.sel && S.sel.node != null ? S.sel : null; render(true); });
+  }
+  if (S.level === "repo" && WS) chip("Other repositories", S.outside.repo, () => { S.outside.repo = !S.outside.repo; render(true); });
+  if (S.level === "repo") chip("Outside packages", S.externals, () => { S.externals = !S.externals; render(true); });
+  else if (S.level !== "ws") chip(S.level === "module" ? "Other modules" : S.level === "system" ? "Neighbouring systems" : S.level === "part" ? "Neighbouring parts" : "Outside callers", S.outside[S.level], () => { S.outside[S.level] = !S.outside[S.level]; render(true); });
+  if (S.mode === "map") zoom();
+}
+
+/* ---------- inspector ---------- */
+const LANG = { csharp: "C#", python: "Python", typescript: "TypeScript", javascript: "JavaScript", go: "Go", rust: "Rust", java: "Java", bash: "shell" };
+const KIND = { part: "Part", system: "System", module: "Module", file: "File", type: "Type", callable: "Function", field: "Field", external: "Outside package", repo: "Repository" };
+function kindName(i) { const n = N[i], x = n.x || {}; if (n.k === "test") return "test"; if (n.k === "type") return x.native_kind || "type"; if (n.k === "callable") return x.native_kind === "constructor" ? "constructor" : x.native_kind === "local_function" ? "local function" : x.native_kind || "function"; if (n.k === "field") return x.native_kind || "field"; return KIND[n.k] || n.k; }
+function where(i) { const n = N[i]; if (!n.f && n.k !== "module") return ""; return n.k === "module" ? (n.f || ".") + "/" : n.a && n.k !== "file" ? `${n.f}:${n.a}–${n.b}` : n.f; }
+function qual(i) { const n = N[i]; const u = unitOf[i]; if (isBody(i)) return N[fileOf[i]].n; if (n.k === "module" || u == null) return n.n; if (u === i) return n.n; const parts = []; for (let c = i; c != null && c !== N[u].p; c = N[c].p) parts.unshift(short(c)); return parts.join("."); }
+function listHtml(title, rows, total, empty) {
+  if (!rows.length) return empty ? `<h3>${title}</h3><p class="note">${empty}</p>` : "";
+  // Rows that read the same (Builder.notes in each of four scripts) name their file, so they can be told apart.
+  const twice = new Map(); for (const r of rows) twice.set(r.name, (twice.get(r.name) || 0) + 1);
+  rows = rows.map((r) => twice.get(r.name) > 1 && r.go != null && N[r.go] && N[r.go].f && N[r.go].f !== r.name ? { ...r, name: `${r.name} (${N[r.go].f})` } : r);
+  const items = rows.map((r) => r.go != null
+    ? `<li><button data-go="${r.go}"${r.edge ? ` data-edge="${esc(r.edge)}"` : ""}><span class="nm">${esc(r.name)}${r.sub ? `<small>${esc(r.sub)}</small>` : ""}</span><span class="ct">${r.ct != null ? esc(r.ct) : ""}</span></button></li>`
+    : `<li><div class="plain"><span class="nm">${esc(r.name)}${r.sub ? `<small>${esc(r.sub)}</small>` : ""}</span><span class="ct">${r.ct != null ? esc(r.ct) : ""}</span></div></li>`).join("");
+  const more = total > rows.length ? `<div class="more">and ${total - rows.length} more</div>` : "";
+  return `<h3>${title} <span>${total}</span></h3><ul class="list">${items}</ul>${more}`;
+}
+// Links touching a node (or anything inside it), grouped by the other end at a chosen grain.
+function around(i, dir, grain) {
+  const insideI = N[i].k === "part" ? (j) => fileOf[j] != null && PARTS.get(i).has(fileOf[j]) : N[i].k === "system" ? (j) => unitOf[j] != null && sysOf.get(unitOf[j]) === i : (j) => { for (let c = j; c != null; c = N[c].p) if (c === i) return true; return false; };
+  const acc = new Map();
+  for (const Lk of LINKS) {
+    if (GROUPS[Lk[0]] === "imports" && N[i].k !== "module" && N[i].k !== "file") continue;
+    const me = dir === "out" ? Lk[1] : Lk[2], other = dir === "out" ? Lk[2] : Lk[1];
+    if (!insideI(me) || insideI(other)) continue;
+    const g = grain(other); if (g == null) continue;
+    let r = acc.get(g); if (!r) acc.set(g, r = { go: g, n: 0, kinds: {}, guess: 0 });
+    const kk = Lk[0] === "communicates" ? "communicates:" + Lk[6].channel : Lk[0];
+    r.n += Lk[4]; r.kinds[kk] = (r.kinds[kk] || 0) + Lk[4]; if (Lk[3] === 0) r.guess += Lk[4];
+  }
+  const home = N[i].k === "module" ? i : moduleOf[i];
+  return [...acc.values()].sort((a, b) => b.n - a.n).map((r) => {
+    const ks = Object.entries(r.kinds), far = N[r.go].k !== "module" && N[r.go].k !== "external" && moduleOf[r.go] !== home;
+    const lab = (k) => (k.startsWith("communicates:") ? (CHAN[k.slice(13)] ? CHAN[k.slice(13)][dir === "out" ? 1 : 2] : k.slice(13)) : LABEL[k]);
+    const sub = [ks.length > 1 || ks[0][0] !== "calls" ? ks.map(([k, v]) => (k.startsWith("communicates:") ? lab(k) : `${lab(k)} ${v}`)).join(" · ") : "", far ? "in " + N[moduleOf[r.go]].n : "", r.guess ? (r.guess === r.n ? "guessed by name" : `${r.guess} guessed`) : ""].filter(Boolean).join(" · ");
+    return { go: r.go, name: grainName(r.go, i), sub, ct: r.n };
+  });
+}
+const grainName = (g, from) => { const n = N[g]; if (n.k === "system" || n.k === "part") return n.n; if (isBody(g)) return N[fileOf[g]].n + " (script body)"; if (n.k === "module" || n.k === "external" || unitOf[g] === g) return n.n; return (unitOf[g] !== unitOf[from] ? N[unitOf[g]].n + "." : "") + short(g); };
+const byModule = (j) => (N[j].k === "external" ? j : N[j].k === "module" ? j : moduleOf[j]);
+const byUnit = (j) => (N[j].k === "external" ? null : unitOf[j]);
+const bySystem = (home) => (j) => (N[j].k === "external" || unitOf[j] == null ? null : moduleOf[j] === home ? grp(unitOf[j]) : moduleOf[j]);
+// The other end of a part's links: a part of the same level (or of the level above), or another module.
+const byPart = (p) => { const lvl = N[N[p].p].k === "part" ? N[p].p : null; return (j) => (N[j].k === "external" || unitOf[j] == null ? null : moduleOf[j] === moduleOf[p] ? partFor(j, lvl) ?? unitOf[j] : moduleOf[j]); };
+const PART_KIND = { folder: "folder", files: "loose files of a folder", system: "group of files that work together", other: "files no group took", file: "file", more: "the rest of the level", module: "module" };
+function notesHtml(i) {
+  const ns = NOTES[i]; if (!ns) return "";
+  return Object.entries(ns).filter(([k]) => k !== "name").map(([k, a]) => `<p class="note"><span class="tag${a.layer === "inferred" ? " heur" : ""}">${a.layer === "inferred" ? "inferred" : "yours"}${a.c != null ? " · " + Math.round(a.c * 100) + "%" : ""}</span>${a.stale ? ` <span class="tag entry">stale: the code changed</span>` : ""} ${esc(a.v)}</p>`).join("");
+}
+const byMember = (j) => (N[j].k === "external" ? null : N[j].k === "callable" || N[j].k === "type" ? j : memberOf(j) ?? unitOf[j]);
+
+function side() {
+  const s = $("side"), sel = S.sel || {};
+  let html = "";
+  if (S.mode === "change") html = S.change != null && sel.edge ? backHtml() + edgeHtml(sel.edge) : S.change != null && sel.node != null ? backHtml() + viewNodeHtml(sel.node) : changeHtml();
+  else if (S.mode === "views") html = sel.edge ? edgeHtml(sel.edge) : sel.node != null ? viewNodeHtml(sel.node) : viewHtml();
+  else if (S.mode === "flows") html = sel.node != null ? nodeHtml(sel.node) : flowHtml();
+  else if (sel.edge) html = edgeHtml(sel.edge);
+  else if (sel.node != null) html = nodeHtml(sel.node);
+  else if (S.level === "ws") html = wsHtml();
+  else if (S.level === "repo") html = repoHtml(S.focus);
+  else html = nodeHtml(S.focus, true);
+  if (S.mode === "map" && S.change != null) html = shownHtml() + html;
+  s.innerHTML = tourHtml() + html; s.scrollTop = 0;
+  if (S.tour) {
+    const move = (d) => { S.tour.stop = Math.max(0, Math.min(TOURS[S.tour.idx].stops.length - 1, S.tour.stop + d)); tourShow(); };
+    if ($("tour-prev")) $("tour-prev").onclick = () => move(-1);
+    if ($("tour-next")) $("tour-next").onclick = () => move(1);
+    if ($("tour-back")) $("tour-back").onclick = () => tourShow();
+    $("tour-end").onclick = () => { S.tour = null; $("tab-tour").setAttribute("aria-pressed", "false"); side(); };
+    if ($("tour-pick")) $("tour-pick").onchange = (e) => { S.tour = { idx: +e.target.value, stop: 0 }; tourShow(); };
+  }
+  for (const b of s.querySelectorAll("[data-go]")) b.onclick = () => goTo(+b.dataset.go);
+  for (const b of s.querySelectorAll("[data-view]")) b.onclick = () => { S.viewIdx = +b.dataset.view; S.sel = null; if (S.mode === "views") { viewSetup(); render(true); viewKey(); } else setMode("views"); };
+  for (const b of s.querySelectorAll("[data-open]")) b.onclick = () => open(+b.dataset.open);
+  for (const b of s.querySelectorAll("[data-flow]")) b.onclick = () => openFlow(+b.dataset.flow, b.dataset.at ? +b.dataset.at : null);
+  for (const b of s.querySelectorAll("[data-edge]")) b.onclick = () => select({ edge: b.dataset.edge });
+  wireChange(s);
+}
+function repoHtml(ri) {
+  const r = repoMeta(ri), mine = (k) => repoOf[k] === ri, here = (kind) => N.filter((n, k) => counted(n, kind) && mine(k)).length;
+  const mods = here("module");
+  const facts = [[mods, "modules"], [here("file"), "files"], [big(linesOf(ri)), "lines"], [here("type"), "types"], [here("callable"), "functions"]];
+  const entries = [...entryOf.entries()].filter(([t, e]) => (N[e].x || {}).trigger === "cli" && mine(t)).map(([t, e]) => ({ go: t, name: qual(t), sub: isBody(t) ? N[moduleOf[t]].n + " · script" : N[t].f, ct: "" }));
+  const cov = D.coverage.filter((c) => !WS || c.repo === N[ri].i);
+  const ok = cov.filter((c) => c.status === "ok"), na = cov.filter((c) => c.status !== "ok");
+  const stat = ok.map((c) => `<li><div class="plain"><span class="nm">${esc(c.extractor.replace("communicates:", "channel: ").replace("flows:static", "flows (static)").replace("systems:louvain", "systems (clustering)"))}<small>${esc(describe(c))}</small></span><span class="status ok">ran</span></div></li>`).join("");
+  const nas = na.map((c) => `<li><div class="plain"><span class="nm">${esc(c.extractor.replace("communicates:", "channel: "))}</span><span class="status na">not analyzed</span></div></li>`).join("");
+  function describe(c) { const st = c.stats || {}; if (c.extractor.startsWith("tree-sitter")) { const tot = st.calls_total || 0; return `${st.files || 0} files · ${tot.toLocaleString()} call sites: ${(st.calls_resolved || 0).toLocaleString()} linked (${(st.calls_by_unique_name || 0).toLocaleString()} by guess), ${(st.calls_external || 0).toLocaleString()} to outside code, ${(st.calls_unresolved || 0).toLocaleString()} unresolved`; } if (c.extractor === "timing") return `indexed in ${st.total_seconds} s: ${(st.lines || 0).toLocaleString()} lines at ${(st.lines_per_second || 0).toLocaleString()} lines a second${st.compiler ? ` (compiler pass ${st.compiler} s)` : ""}`; if (c.extractor.startsWith("exact:")) return `a compiler confirmed ${(st.calls_confirmed || 0).toLocaleString()} call links, removed ${(st.calls_removed || 0).toLocaleString()} and added ${(st.calls_added || 0).toLocaleString()}; ${((st.field_links_confirmed || 0) + (st.field_links_added || 0)).toLocaleString()} field links are exact${st.files_with_binding_errors ? `; ${st.files_with_binding_errors} files did not bind cleanly (missing packages)` : ""}`; if (c.extractor === "coverage") return `${(st.functions_ran || 0).toLocaleString()} functions ran${st.per_test ? ` under ${st.tests} tests` : ""}`; if (c.extractor === "communicates:http") return `${st.routes || 0} routes, ${st.requests || 0} requests, ${st.links || 0} linked${st.ambiguous ? `, ${st.ambiguous} ambiguous` : ""}`; if (c.extractor === "communicates:file") return `${st.write_sites || 0} writes, ${st.read_sites || 0} reads, ${st.links || 0} linked by matching path fragments`; if (c.extractor === "communicates:event") return `${st.events_declared || 0} events declared, ${st.links || 0} raiser-to-handler links, ${st.subscriptions_to_outside_events || 0} subscriptions to outside events`; if (c.extractor === "communicates:process") return `${st.launch_sites || 0} launch sites, ${st.links || 0} linked to a program in this repository`; if (c.extractor === "communicates:di") return `${st.registrations || 0} registrations, ${st.registrations_linked || 0} linked to their implementation (${st.links || 0} links)${st.registrations_outside ? `, ${st.registrations_outside} of types outside` : ""}${st.dependencies ? `; ${st.dependencies_linked || 0} of ${st.dependencies} Depends() linked` : ""}`; if (c.extractor === "communicates:queue") return `${st.publish_sites || 0} publish sites, ${st.subscriptions || 0} subscriptions, ${st.links || 0} linked by topic or message type${st.linked_by_creation ? ` (${st.linked_by_creation} guessed from a message created, not seen sent)` : ""}`; if (c.extractor === "communicates:db") return `${st.write_sites || 0} writes, ${st.read_sites || 0} reads of ${st.tables || 0} tables, ${st.links || 0} writer-to-reader links${st.in_tests || st.in_migrations ? `; ${(st.in_tests || 0) + (st.in_migrations || 0)} sites in tests and migrations left out` : ""}`; if (c.extractor === "communicates:rpc") return `${st.services || 0} services, ${st.call_sites || 0} calls to them, ${st.links || 0} linked${st.calls_to_services_outside ? `, ${st.calls_to_services_outside} to services outside` : ""}`; if (c.extractor === "systems:louvain") return Object.entries(st).map(([m, v]) => `${m}: ${v.systems ? v.systems + " groups" : "no clear split"}`).join(" · ") || "no module is large enough to split"; if (c.extractor === "flows:static") return `${st.flows || 0} flows, ${(st.steps || 0).toLocaleString()} steps`; return ""; }
+  return `<div class="eyebrow">Repository${WS ? ` <span class="tag">1 of ${REPOS.length} in this workspace</span>` : ""}</div><h2>${esc(N[ri].n)}</h2>
+    <div class="where">${esc(r.folder || "")}${r.url ? `<br>remote: ${esc(r.url)}` : ""}</div>
+    <div class="facts">${facts.map(([v, l]) => `<div><b>${v}</b><span>${l}</span></div>`).join("")}</div>
+    <p class="note">Each box is a module. An arrow from A to B means A depends on B, and its number counts the links behind it. Select a box or an arrow for detail.${WS ? " Modules of other repositories that this one links to are drawn dashed, named with their repository, and their arrows are in the colour of the key below the map." : ""}</p>
+    ${CHANGES.length && S.change == null ? `<p class="note">${CHANGES.length === 1 ? "One change is" : CHANGES.length + " changes are"} planned for this code. Open <b>Changes</b> to see on the map what ${CHANGES.length === 1 ? "it" : "each"} will write.</p>` : ""}
+    ${(() => { const by = new Map(); for (const [k, p] of PATTERN_AT) if (!p.tests && mine(p.marks[0].i)) (by.get(p.pattern) || by.set(p.pattern, []).get(p.pattern)).push(k); return by.size ? `<h3>Design patterns <span>${[...by.values()].reduce((a, b) => a + b.length, 0)}</span></h3><ul class="list">${[...by.entries()].sort((a, b) => b[1].length - a[1].length).map(([name, ks]) => `<li><button data-view="${ks[0]}"><span class="nm">${esc(name)}<small>${esc(PATTERN_AT.get(ks[0]).about)}</small></span><span class="ct">${ks.length}</span></button></li>`).join("")}</ul>` : ""; })()}
+    ${listHtml("State assigned from several places", (D.state || []).filter((f) => mine(f.i)).slice(0, 8).map((f) => ({ go: f.i, name: qual(f.i), sub: "assigned from " + f.from.slice(0, 4).join(", ") + (f.from.length > 4 ? " and " + (f.from.length - 4) + " more" : ""), ct: `${f.w} set · ${f.r} read` })), (D.state || []).filter((f) => mine(f.i)).length)}
+    ${listHtml("Systems", N.map((m, k) => k).filter((k) => N[k].k === "system" && mine(k)).map((k) => ({ go: k, name: N[k].n, sub: "in " + N[N[k].p].n + (NOTES[k] && NOTES[k].responsibility ? " · " + NOTES[k].responsibility.v : ""), ct: (unitsOf.get(k) || []).length + " types" })), here("system"))}
+    ${listHtml("Where execution starts", entries.slice(0, 12), entries.length)}
+    <h3>What was analyzed</h3><ul class="list">${stat}${nas}</ul>
+    <p class="note">A channel that was not analyzed may still exist in the code. Dependency injection, HTTP, queues, databases and shared files are not on this map yet.</p>`;
+}
+function nodeHtml(i, isFocus) {
+  const n = N[i], x = n.x || {};
+  const tags = [];
+  if (x.visibility) tags.push(`<span class="tag">${esc(x.visibility)}</span>`);
+  if (x.is_static && n.k !== "module") tags.push(`<span class="tag">static</span>`);
+  if (x.is_abstract && x.native_kind !== "interface") tags.push(`<span class="tag">abstract</span>`);
+  if (entryTargets.has(i)) tags.push(`<span class="tag entry">entry point: ${esc((N[entryOf.get(i)].x || {}).trigger || "")}</span>`);
+  if (n.l) tags.push(`<span class="tag">${esc(LANG[n.l] || n.l)}</span>`);
+  if (WS && repoOf[i] != null && n.k !== "repo") tags.push(`<span class="tag">${esc(N[repoOf[i]].n)}</span>`);
+  let h = `<div class="eyebrow">${esc(kindName(i))} ${tags.join("")}</div><h2>${esc(n.k === "callable" || n.k === "field" ? qual(i) : n.n)}</h2>`;
+  if (x.signature && n.k !== "file") h += `<div class="sig">${esc(x.signature)}</div>`;
+  if (n.k === "field" && x.declared_type) h += `<div class="sig">${esc(x.declared_type)} ${esc(n.n)}</div>`;
+  const w = where(i); if (w) h += `<div class="where">${esc(w)}${x.also_in ? " and " + x.also_in.map(esc).join(", ") : ""}</div>`;
+  h += notesHtml(i);
+  if (n.k === "type" || n.k === "callable") h += patternRows(patternsOf(i));
+  if (n.k === "system") {
+    const us = (unitsOf.get(i) || []).slice().sort((a, b) => count(b, "callable") - count(a, "callable")), x2 = n.x || {};
+    const named = NOTES[i] && NOTES[i].name;
+    h = `<div class="eyebrow">System <span class="tag heur">${named ? "grouped by clustering, named by inference" : "proposed by clustering"}</span></div><h2>${esc(n.n)}</h2><div class="where">in ${esc(N[n.p].n)}</div>` + notesHtml(i);
+    h += `<div class="facts"><div><b>${us.length}</b><span>types and files</span></div><div><b>${us.reduce((t, u) => t + count(u, "callable"), 0)}</b><span>functions</span></div><div><b>${x2.cohesion != null ? Math.round(x2.cohesion * 100) + "%" : "–"}</b><span>of its links stay inside</span></div></div>`;
+    if (!isFocus) h += `<button class="open" data-open="${i}">Open system</button>`;
+    if (!named) h += `<p class="note">This group has no real name yet. It is called after its most connected type.</p>`;
+    const dep = around(i, "out", bySystem(n.p)), usedBy = around(i, "in", bySystem(n.p));
+    h += listHtml("Members", us.slice(0, 40).map((u) => ({ go: u, name: N[u].n, ct: count(u, "callable") + " fn" })), us.length);
+    h += listHtml("Depends on", dep.slice(0, 12), dep.length) + listHtml("Used by", usedBy.slice(0, 12), usedBy.length);
+    return h;
+  }
+  if (n.k === "part") {
+    const subs = subsOf(i), fs = [...(PARTS.get(i) || [])].sort((a, b) => (N[b].b || 0) - (N[a].b || 0));
+    h = `<div class="eyebrow">Part <span class="tag heur">${esc(PART_KIND[x.kind] || x.kind || "part")}</span>${x.stale ? ` <span class="tag entry">its name may be stale</span>` : ""}</div><h2>${esc(n.n)}</h2><div class="where">${esc((x.label && x.label !== n.n ? x.label + " · " : "") + "in " + N[moduleOf[i]].n)}</div>`;
+    if (x.summary) h += `<p class="note">${esc(x.summary)}</p>`;
+    h += `<div class="facts"><div><b>${x.files || 0}</b><span>files</span></div><div><b>${(x.functions || 0).toLocaleString()}</b><span>functions</span></div><div><b>${big(x.lines || 0)}</b><span>lines</span></div></div>`;
+    if (!isFocus) h += `<button class="open" data-open="${i}">Open part</button>`;
+    if (!x.named) h += `<p class="note">This part has no name yet: it is called after its folder or its most linked file. An agent names parts after reading them (the leyline-explore-module skill, or <code>leyline name-part</code>).</p>`;
+    if (x.stale) h += `<p class="note">Its files have changed a lot since it was named (${esc(x.stale.replace(/^may be stale: /, ""))}).</p>`;
+    const dep = around(i, "out", byPart(i)), usedBy = around(i, "in", byPart(i));
+    h += listHtml("Parts", subs.map((c) => ({ go: c, name: N[c].n, sub: (N[c].x || {}).summary || "", ct: ((N[c].x || {}).files || 0) + " files" })), subs.length);
+    h += listHtml("Depends on", dep.slice(0, 12), dep.length) + listHtml("Used by", usedBy.slice(0, 12), usedBy.length);
+    h += listHtml("Files", fs.slice(0, 40).map((f) => ({ go: f, name: N[f].f || N[f].n, ct: (N[f].b || 0) + " lines" })), fs.length);
+    return h;
+  }
+  if (n.k === "external") return h + `<p class="note">Code from outside this repository${x.version ? `, version ${esc(x.version)}` : ""}.</p>` + listHtml("Used by", around(i, "in", byModule), around(i, "in", byModule).length);
+  if (n.k === "module") {
+    const types = []; const st = [...kids[i]]; while (st.length) { const c = st.pop(); if (N[c].k === "type" && unitOf[c] === c) types.push(c); else if (N[c].k === "file") st.push(...kids[c]); }
+    const pub = types.filter((t) => /public/.test((N[t].x || {}).visibility || "")).sort((a, b) => N[a].n.localeCompare(N[b].n));
+    const files = kids[i].filter((c) => N[c].k === "file");
+    h += `<div class="facts"><div><b>${files.length}</b><span>files</span></div><div><b>${linesOf(i).toLocaleString()}</b><span>lines</span></div><div><b>${types.length}</b><span>types</span></div><div><b>${count(i, "callable")}</b><span>functions</span></div></div>`;
+    if (!isFocus) h += `<button class="open" data-open="${i}">Open module</button>`;
+    const dep = around(i, "out", byModule), usedBy = around(i, "in", byModule);
+    h += listHtml("Depends on", dep.slice(0, 12), dep.length, "Nothing in this repository.");
+    h += listHtml("Used by", usedBy.slice(0, 12), usedBy.length, "Nothing in this repository.");
+    const eps = [...entryTargets].filter((t) => moduleOf[t] === i).map((t) => ({ go: t, name: qual(t), sub: N[t].f, ct: (N[entryOf.get(t)].x || {}).trigger }));
+    const syss = N.map((m, k) => k).filter((k) => N[k].k === "system" && N[k].p === i);
+    if (PARTED.has(i)) h += listHtml("Parts", subsOf(i).map((c) => ({ go: c, name: N[c].n, sub: (N[c].x || {}).summary || (N[c].x || {}).label || "", ct: ((N[c].x || {}).files || 0) + " files" })), subsOf(i).length);
+    h += listHtml("Systems", syss.map((k) => ({ go: k, name: N[k].n, sub: NOTES[k] && NOTES[k].responsibility ? NOTES[k].responsibility.v : "", ct: (unitsOf.get(k) || []).length + " types" })), syss.length);
+    h += listHtml("Entry points", eps.slice(0, 10), eps.length);
+    h += listHtml("Public types", pub.slice(0, 40).map((t) => ({ go: t, name: N[t].n, ct: (N[t].x || {}).native_kind })), pub.length);
+    if (types.length > pub.length) h += `<p class="note">${types.length - pub.length} more types are internal to this module.</p>`;
+    h += listHtml("Files", files.slice(0, 40).map((f) => ({ go: f, name: N[f].n, ct: (N[f].b || 0) + " lines" })), files.length);
+    return h;
+  }
+  const isUnit = unitOf[i] === i;
+  if (isUnit || n.k === "type") {
+    const fns = kids[i].filter((c) => N[c].k === "callable"), fields = kids[i].filter((c) => N[c].k === "field"), nested = kids[i].filter((c) => N[c].k === "type");
+    if (isUnit && !isFocus) h += `<button class="open" data-open="${i}">Open ${n.k === "file" ? "file" : "type"}</button>`;
+    if (sysOf.has(i)) h += listHtml("Part of", [{ go: sysOf.get(i), name: N[sysOf.get(i)].n, ct: "system" }], 1);
+    else if (PARTED.has(moduleOf[i]) && deepestPart(i) != null) h += listHtml("Part of", [{ go: deepestPart(i), name: N[deepestPart(i)].n, ct: "part" }], 1);
+    const bases = LINKS.filter((l) => l[1] === i && GROUPS[l[0]] === "inherit").map((l) => ({ go: l[2], name: N[l[2]].n, ct: LABEL[l[0]] }));
+    const subs = LINKS.filter((l) => l[2] === i && GROUPS[l[0]] === "inherit").map((l) => ({ go: l[1], name: N[l[1]].n, ct: l[0] === "implements" ? "implements this" : "extends this" }));
+    h += listHtml("Built on", bases, bases.length) + listHtml("Built on by", subs.slice(0, 20), subs.length);
+    const vis = (c) => /public/.test((N[c].x || {}).visibility || "") ? 0 : 1;
+    fns.sort((a, b) => vis(a) - vis(b) || (N[a].a || 0) - (N[b].a || 0));
+    h += listHtml("Functions", fns.slice(0, 60).map((c) => ({ go: c, name: short(c), sub: (N[c].x || {}).signature, ct: (N[c].x || {}).visibility === "public" ? "" : ((N[c].x || {}).visibility || "") })), fns.length);
+    h += listHtml("Fields", fields.slice(0, 40).map((c) => ({ go: c, name: c && N[c].n, ct: (N[c].x || {}).declared_type || "" })), fields.length);
+    h += accessHtml(i);
+    h += listHtml("Nested types", nested.map((c) => ({ go: c, name: N[c].n, ct: (N[c].x || {}).native_kind })), nested.length);
+    const dep = around(i, "out", byUnit), usedBy = around(i, "in", byUnit);
+    h += listHtml("Uses", dep.slice(0, 15), dep.length) + listHtml("Used by", usedBy.slice(0, 15), usedBy.length, "Nothing found. It may be reached through an entry point or a channel that was not analyzed.");
+    return h;
+  }
+  if (n.k === "test") {
+    const fi = FLOWS.findIndex((f) => f.entry === i);
+    if (fi >= 0 && S.mode !== "flows") h += `<button class="open" data-flow="${fi}">Trace this test</button>`;
+    const callees = around(i, "out", byMember).filter((r) => N[r.go].k === "callable");
+    h += listHtml("Calls", callees.slice(0, 40), callees.length);
+    h += accessHtml(i);
+  }
+  if (n.k === "field") h += accessHtml(i);
+  if (n.k === "callable") {
+    const callees = around(i, "out", byMember).filter((r) => N[r.go].k === "callable"), callers = around(i, "in", byMember).filter((r) => N[r.go].k === "callable");
+    const types = around(i, "out", byUnit).filter((r) => !callees.some((c) => unitOf[c.go] === r.go) );
+    const bases = basesOf.get(i) || [], impls = implsOf.get(i) || [];
+    const callersOf = (j) => LINKS.filter((l) => l[2] === j && l[0] === "calls").reduce((a, l) => a + l[4], 0);
+    h += listHtml("Calls", callees.slice(0, 30), callees.length, impls.length ? "" : "No calls into this repository were found.");
+    h += listHtml("Implements", bases.map((b) => ({ go: b, name: N[unitOf[b]].n + "." + short(b), sub: `${callersOf(b)} call sites go through it`, ct: "" })), bases.length);
+    h += listHtml("Implemented by", impls.slice(0, 20).map((m) => ({ go: m, name: N[unitOf[m]].n + "." + short(m), sub: moduleOf[m] !== moduleOf[i] ? "in " + N[moduleOf[m]].n : "", ct: "" })), impls.length);
+    h += listHtml("Called by", callers.slice(0, 30), callers.length, entryTargets.has(i) ? "Nothing calls it: execution starts here." : bases.length ? `No direct callers. Callers reach it through ${esc(N[unitOf[bases[0]]].n)}.${esc(short(bases[0]))}, listed above.` : "No callers found. It may be called through an event, a delegate or an outside framework.");
+    h += measuredHtml(i);
+    h += accessHtml(i);
+    h += listHtml("Other types it touches", types.slice(0, 12), types.length);
+    const fl = flowsOf.get(i) || [], tests = fl.filter((fi) => FLOWS[fi].kind === "test");
+    if (fl.length) h += `<h3>Flows through here <span>${fl.length} of ${FLOWS.length}</span></h3><ul class="list">${fl.slice(0, 12).map((fi) => `<li><button data-flow="${fi}" data-at="${i}"><span class="nm">${esc(flowName(FLOWS[fi]))}<small>${flowGroup(FLOWS[fi]).replace(/s$/, "").toLowerCase()}</small></span><span class="ct">step ${FLOWS[fi].steps.findIndex((s) => s[0] === i) + 1}</span></button></li>`).join("")}</ul>${fl.length > 12 ? `<div class="more">and ${fl.length - 12} more</div>` : ""}`;
+    else if (FLOWS.length) h += `<h3>Flows through here</h3><p class="note">None. No entry point or test reaches it through calls the indexer could resolve.</p>`;
+    if (fl.length && !tests.length) h += `<p class="note">No test reaches this function.</p>`;
+  }
+  const src = n.f ? D.sources[srcKey(i)] : null;
+  if (src && n.a) {
+    let lines = src.split(/\r?\n/).slice(n.a - 1, Math.min(n.b, n.a + 399)).map((ln) => ln.replace(/\t/g, "    "));
+    const indent = Math.min(...lines.filter((ln) => ln.trim()).map((ln) => ln.length - ln.trimStart().length));
+    if (indent > 0 && isFinite(indent)) lines = lines.map((ln) => ln.slice(indent));
+    h += `<h3>Source <span>${n.b - n.a + 1} lines</span></h3><pre class="code"><code>${lines.map((ln, k) => `<span class="ln">${n.a + k}</span>${esc(ln)}`).join("\n")}</code></pre>`;
+    if (n.b - n.a + 1 > 400) h += `<div class="more">First 400 lines shown.</div>`;
+  }
+  return h;
+}
+function edgeHtml(key) {
+  const e = S.view.edges.find((x) => x.key === key);
+  if (!e) return S.level === "ws" ? wsHtml() : repoHtml(S.focus != null && N[S.focus].k === "repo" ? S.focus : repoOf[S.focus] ?? repoIdx);
+  const kinds = Object.entries(e.kinds).sort((a, b) => b[1] - a[1]).map(([k, v]) => ({ name: k, ct: v }));
+  const pairs = new Map();
+  for (const Lk of e.links) { const k = Lk[1] + ">" + Lk[2] + ">" + Lk[0]; const p = pairs.get(k); if (p) p.n += Lk[4]; else pairs.set(k, { s: Lk[1], d: Lk[2], k: linkLabel(Lk), n: Lk[4], g: Lk[3] === 0, x: Lk[6] }); }
+  const rows = [...pairs.values()].sort((a, b) => b.n - a.n).map((p) => ({ go: p.s, name: `${qual(p.s)} → ${qual(p.d)}`, sub: [p.x ? "" : p.k, p.x && p.x.channel === "event" ? "event " + String(p.x.address).split(".").pop() : "", p.x && p.x.channel === "process" ? `the command mentions “${p.x.address}”${p.x.pipes ? " and wires up stdin and stdout" : ""}` : "", p.x && p.x.channel !== "event" && p.x.channel !== "process" && p.x.address ? `${p.x.channel} ${p.x.address}${p.x.created_only ? " (created, not seen sent)" : ""}` : "", p.g ? "guessed by name" : "", N[p.s].f || ""].filter(Boolean).join(" · "), ct: p.n > 1 ? "×" + p.n : "" }));
+  const heur = e.n - e.exact;
+  if (e.comm) return `<div class="eyebrow">Channel <span class="tag chan">${esc([...e.chans].join(", "))}</span><span class="tag heur">${e.guess ? "partly guessed" : "from syntax"}</span></div>
+    <h2>${esc(N[e.a].n)} → ${esc(N[e.b].n)}</h2>
+    <p class="note">${e.chans.has("process") ? `Code in ${esc(N[e.a].n)} starts ${esc(N[e.b].n)} as a separate program. No code reference connects them, so a compiler would not report this link.` : e.chans.has("event") ? `Code in ${esc(N[e.a].n)} raises an event that code in ${esc(N[e.b].n)} handles. ${esc(N[e.a].n)} does not depend on ${esc(N[e.b].n)}: the handler subscribes at run time.` : `Code in ${esc(N[e.a].n)} ${esc((CHAN[[...e.chans][0]] || ["reaches"])[0])} ${esc(N[e.b].n)}. The two ends meet by a name (${esc([...e.chans].join(", "))}), not a code reference, so a compiler would not report this link.`}</p>
+    ${listHtml("Links", rows.slice(0, 60), rows.length)}`;
+  return `<div class="eyebrow">Dependency ${heur ? `<span class="tag heur">${heur === e.n ? "from syntax" : "partly from syntax"}</span>` : `<span class="tag">exact</span>`}</div>
+    <h2>${esc(N[e.a].n)} → ${esc(N[e.b].n)}</h2>
+    <p class="note">${esc(N[e.a].n)} depends on ${esc(N[e.b].n)} through ${e.n.toLocaleString()} link${e.n === 1 ? "" : "s"}.${heur ? ` ${heur.toLocaleString()} of them were worked out from syntax alone and can be wrong.` : ""}${e.guess ? ` ${e.guess.toLocaleString()} of those are guesses: the target is the only function with that name.` : ""}</p>
+    ${listHtml("What crosses", kinds, kinds.length)}
+    ${listHtml("Links", rows.slice(0, 60), rows.length)}`;
+}
+
+/* ---------- matrix ---------- */
+function drawMatrix() {
+  const m = $("matrix");
+  const ids = [...L.boxes.values()].filter((b) => !b.stub && !b.dummy).sort((a, b) => b.y - a.y || a.x - b.x).map((b) => b.i);
+  const at = new Map(ids.map((i, j) => [i, j]));
+  const cell = new Map(S.view.edges.filter((e) => !e.comm && at.has(e.a) && at.has(e.b)).map((e) => [e.a + ">" + e.b, e]));
+  let backs = 0;
+  let h = `<table class="matrix"><thead><tr><th></th>${ids.map((i) => `<th class="col"><div>${esc(short(i))}</div></th>`).join("")}</tr></thead><tbody>`;
+  ids.forEach((r, ri) => {
+    h += `<tr><th class="row" title="${esc(N[r].n)}">${esc(short(r))}</th>`;
+    ids.forEach((c, ci) => {
+      if (r === c) { h += `<td class="diag"></td>`; return; }
+      const e = cell.get(r + ">" + c);
+      if (!e) { h += "<td></td>"; return; }
+      const back = ci > ri; if (back) backs++;
+      h += `<td class="on${back ? " back" : ""}" data-key="${e.key}" title="${esc(N[r].n)} depends on ${esc(N[c].n)}: ${e.n}">${e.n > 999 ? "1k+" : e.n}</td>`;
+    });
+    h += "</tr>";
+  });
+  h += "</tbody></table>";
+  const note = `<p class="matrix-note">Each row depends on the columns it has numbers in. Rows are ordered so that dependencies sit below the diagonal. ${backs ? `${backs} cell${backs === 1 ? "" : "s"} above it, tinted, point back up the order: those are cycles.` : "Nothing sits above it, so there are no cycles at this level."} Channels that are not calls (events, launches, messages, tables…) are left out, because they are not compile-time dependencies.</p>`;
+  m.innerHTML = note + h;
+  for (const td of m.querySelectorAll("td.on")) td.onclick = () => select({ edge: td.dataset.key });
+  mark();
+}
+/* ---------- flows ---------- */
+const flowGroup = (f) => (f.kind === "test" ? "Tests" : f.detail === "lifecycle" ? "Framework callbacks" : "Program starts");
+const flowName = (f) => (f.kind === "test" ? f.name : qual(f.entry) + (isBody(f.entry) ? "" : "  ·  " + N[moduleOf[f.entry]].n));
+function drawFlow() {
+  const v = $("flowview");
+  if (!FLOWS.length) { v.innerHTML = `<p class="note">No flows were found. A flow needs an entry point or a test to start from.</p>`; return; }
+  const f = FLOWS[S.flow];
+  const groups = {};
+  FLOWS.forEach((x, i) => (groups[flowGroup(x)] = groups[flowGroup(x)] || []).push(i));
+  // With thousands of flows a plain list is useless: filter by words in the flow's name or module.
+  const words = (S.flowFilter || "").toLowerCase().split(/\s+/).filter(Boolean);
+  const hay = (x) => (flowName(x) + " " + N[moduleOf[x.entry]].n + " " + (N[x.entry].f || "")).toLowerCase();
+  const CAP = 400; let shown = 0, matched = 0;
+  const optsFor = () => ["Program starts", "Tests", "Framework callbacks"].filter((g) => groups[g]).map((g) => {
+    const hit = groups[g].filter((i) => i === S.flow || !words.length || words.every((w) => hay(FLOWS[i]).includes(w)));
+    matched += hit.length;
+    const list = hit.slice(0, Math.max(0, CAP - shown)); if (hit.includes(S.flow) && !list.includes(S.flow)) list.push(S.flow); shown += list.length;
+    return list.length ? `<optgroup label="${g} (${hit.length})">${list.map((i) => `<option value="${i}"${i === S.flow ? " selected" : ""}>${esc(flowName(FLOWS[i]))} (${FLOWS[i].steps.length})</option>`).join("")}</optgroup>` : "";
+  }).join("");
+  const opts = optsFor();
+  const mods = [...new Set(f.steps.map((s) => moduleOf[s[0]]))];
+  const ranHere = f.kind === "test" ? RAN_IN.get(f.entry) : null;   // what this test ran when coverage was measured
+  let prev = null;
+  const rows = f.steps.map((s, k) => {
+    const [i, d, via] = s, m = moduleOf[i], showMod = m !== prev; prev = m;
+    const cur = S.sel && S.sel.node === i;
+    const idle = ranHere && k > 0 && WATCHED.has(fileNodeOf(i)) && !ranHere.has(i);
+    return `<li><button data-step="${i}" style="--d:${d}"${cur ? ` aria-current="true"` : ""}${idle ? ` class="idle"` : ""}><span class="seq">${k + 1}</span><span class="ind"></span><span class="dot lang-dot" style="background:var(--${langOf(i) === "python" ? "py" : langOf(i) === "csharp" ? "cs" : "edge"})"></span><span>${esc(N[i].k === "test" ? N[i].n : qual(i))}</span>${CHAN[via] || via === "dispatch" || via === "fixture" ? `<span class="via">${CHAN[via] ? CHAN[via][3] : via === "fixture" ? "test fixture" : "one implementation"}</span>` : ""}${idle ? `<span class="via">did not run</span>` : ""}${showMod ? `<span class="mod">${esc(N[m].n)}</span>` : ""}</button></li>`;
+  }).join("");
+  v.innerHTML = `<div class="flow-head">${FLOWS.length > 30 ? `<input id="flow-find" type="search" placeholder="Filter ${FLOWS.length.toLocaleString()} flows" aria-label="Filter flows" value="${esc(S.flowFilter || "")}">` : ""}<select id="flow-pick" aria-label="Flow">${opts}</select>${matched > shown ? `<span>first ${shown} of ${matched.toLocaleString()} listed; filter to narrow</span>` : ""}<span>${f.steps.length} steps across ${mods.length} module${mods.length === 1 ? "" : "s"}${f.truncated ? ", cut short" : ""}</span></div><ol class="steps" id="steps">${rows}</ol>`;
+  $("flow-pick").onchange = (e) => { S.flow = +e.target.value; S.sel = null; drawFlow(); side(); v.scrollTop = 0; };
+  if ($("flow-find")) $("flow-find").oninput = (e) => { S.flowFilter = e.target.value; const at = e.target.selectionStart; drawFlow(); const box = $("flow-find"); box.focus(); box.setSelectionRange(at, at); };
+  for (const b of v.querySelectorAll("[data-step]")) b.onclick = () => { S.sel = { node: +b.dataset.step }; for (const o of v.querySelectorAll("[aria-current]")) o.removeAttribute("aria-current"); b.setAttribute("aria-current", "true"); side(); };
+  $("steps").onkeydown = (e) => { if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return; const bs = [...v.querySelectorAll("[data-step]")], at = bs.indexOf(document.activeElement); const n = bs[at + (e.key === "ArrowDown" ? 1 : -1)]; if (n) { e.preventDefault(); n.focus(); n.click(); } };
+}
+function flowHtml() {
+  const f = FLOWS[S.flow]; if (!f) return "";
+  const mods = [...new Set(f.steps.map((s) => moduleOf[s[0]]))].map((m) => ({ go: m, name: N[m].n, ct: f.steps.filter((s) => moduleOf[s[0]] === m).length + " steps" }));
+  return `<div class="eyebrow">Flow <span class="tag">${f.kind === "test" ? "test" : esc(f.detail || "entry")}</span><span class="tag heur">static</span></div><h2>${esc(f.kind === "test" ? f.name : qual(f.entry))}</h2>
+    <div class="where">${esc(where(f.entry))}</div>
+    <p class="note">Everything this ${f.kind === "test" ? "test" : "entry point"} can reach, in the order the code is written. Each function appears once, at its first call. Indentation is call depth. Select a step to read its source here.</p>
+    ${f.truncated ? `<p class="note">The walk stopped at ${f.steps.length} steps or 8 calls deep, so the deepest parts are missing.</p>` : ""}
+    <p class="note">This is what can run, not what did run. Branches not taken at run time are still listed, and calls the indexer could not resolve are missing.</p>
+    ${listHtml("Modules it passes through", mods, mods.length)}${flowMeasuredHtml(f)}`;
+}
+function flowMeasuredHtml(f) {
+  const ran = f.kind === "test" ? RAN_IN.get(f.entry) : null;
+  if (!ran) return MEAS.any.length && f.kind === "test" ? `<h3>Measured</h3><p class="note">The coverage file has nothing for this test.</p>` : "";
+  const on = new Set(f.steps.map((s) => s[0]));
+  const watched = f.steps.filter((s, k) => k > 0 && WATCHED.has(fileNodeOf(s[0])));
+  const idle = watched.filter((s) => !ran.has(s[0]));
+  const extra = [...ran].filter((i) => !on.has(i) && !isBody(i));
+  return `<h3>Measured</h3><p class="note">When coverage was measured, ${watched.length - idle.length} of the ${watched.length} steps in watched files ran. Steps that did not run are dimmed: the test can reach them on paper and took another branch.</p>`
+    + listHtml("Ran, but not on this path", extra.slice(0, 40).map((i) => ({ go: i, name: qual(i), sub: N[moduleOf[i]] ? "in " + N[moduleOf[i]].n : "", ct: "" })), extra.length)
+    + (extra.length ? `<p class="note">These ran through a link the map does not have, such as a framework calling back into the code.</p>` : "");
+}
+/* ---------- saved views ---------- */
+function viewKey() {
+  const k = $("viewkey"); if (!VW) return;
+  const lg = (VIEWS[S.viewIdx] || {}).legend || {};
+  k.innerHTML = VW.roles.map((r) => `<i class="key"><b class="k-${VW.cls(r)}"></b>${esc(lg[r] || ROLE_LABEL[r] || r)}</i>`).join("") + `<i>Double-click a box to open it on the map.</i>`;
+}
+function viewHtml() {
+  const v = VIEWS[S.viewIdx];
+  if (!v) return `<div class="eyebrow">Views</div><h2>No saved views</h2><p class="note">A view is a set of nodes an agent marked for you: the reach of a proposed change, or any other slice of the code. Ask an agent connected to Leyline to assess a change, then re-open or refresh this page.</p>`;
+  const lvl = (r) => `<span class="tag ${r.level === "high" ? "risk-high" : r.level === "medium" ? "risk-medium" : ""}">${r.level} risk</span>`;
+  if (v.kind === "review" && v.review) return reviewHtml(v);
+  if (v.kind === "pattern") {
+    const p = v.pattern;
+    let h = `<div class="eyebrow">Design pattern <span class="tag heur">${esc(p.source === "structural matcher" ? "found by its shape" : "labelled by " + p.source)}</span>${p.stale ? `<span class="tag risk-medium">code changed since</span>` : ""}</div><h2>${esc(v.title)}</h2><p class="note">${esc(p.about)}</p><p class="note">${esc(p.rationale)}</p>`;
+    h += `<div class="facts"><div><b>${Math.round(p.c * 100)}%</b><span>confidence in the shape</span></div><div><b>${v.marks.length}</b><span>nodes involved</span></div></div>`;
+    for (const r of VW.roles) { const ms = v.marks.filter((m) => m.role === r); h += listHtml(esc(r), ms.slice(0, 40).map((m) => ({ go: m.i, name: N[m.i].k === "callable" || N[m.i].k === "field" ? qual(m.i) : N[m.i].n, sub: N[moduleOf[m.i]] ? "in " + N[moduleOf[m.i]].n : "", ct: "" })), ms.length); }
+    h += `<p class="note">The label says the code has this shape. It does not say the author meant the pattern, and a pattern built another way is not found.</p>`;
+    return h;
+  }
+  let h = `<div class="eyebrow">${v.kind === "change" ? "Proposed change" : "Saved view"} <span class="tag heur">${v.kind === "change" ? "static assessment" : "authored by an agent"}</span></div><h2>${esc(v.title)}</h2><p class="note">${esc(v.narrative || "")}</p>`;
+  if (v.summary) { const s = v.summary; h += `<div class="facts"><div><b>${s.changed + s.added}</b><span>changed</span></div><div><b>${s.must_edit}</b><span>must edit</span></div><div><b>${s.reached}</b><span>reached</span></div><div><b>${s.tests_to_run}</b><span>tests to run</span></div></div>`; }
+  if (v.risks && v.risks.length) h += `<h3>Risks</h3>` + v.risks.map((r) => `<p class="note">${lvl(r)} ${esc(r.what)}</p>`).join("");
+  else if (v.kind === "change") h += `<h3>Risks</h3><p class="note">None flagged by the static checks.</p>`;
+  if (v.new_nodes && v.new_nodes.length) h += listHtml("To be added", v.new_nodes.map((n) => ({ go: n.pi, name: n.name, sub: `in ${n.pi != null ? N[n.pi].n : "?"}${n.note ? " · " + n.note : ""}`, ct: "new" })), v.new_nodes.length);
+  const byRole = (r) => v.marks.filter((m) => m.role === r);
+  const row = (m) => ({ go: m.i, name: N[m.i].k === "callable" || N[m.i].k === "field" ? qual(m.i) : N[m.i].n, sub: [m.note, N[moduleOf[m.i]] ? "in " + N[moduleOf[m.i]].n : ""].filter(Boolean).join(" · "), ct: "" });
+  if (v.kind === "change") {
+    h += listHtml("Changed", byRole("changed").map(row), byRole("changed").length);
+    const must = [...byRole("contract"), ...byRole("must_edit")];
+    h += listHtml("Must be edited with it", must.slice(0, 40).map(row), must.length);
+    if (v.channels && v.channels.length) h += listHtml("Reached through a channel", v.channels.map((c) => ({ go: c.fi, name: `${c.from_name} → ${c.to_name}`, sub: c.channel + (c.guessed ? " · guessed" : ""), ct: "" })), v.channels.length);
+    h += listHtml("Tests to run", (v.tests_to_run || []).slice(0, 30).map((t) => ({ go: t.i, name: t.name, ct: t.touched_steps + " steps" })), (v.tests_to_run || []).length, "No test passes through the change.");
+    h += listHtml("Changed code no test reaches", (v.untested || []).map((t) => ({ go: t.i, name: t.name, ct: "" })), (v.untested || []).length);
+    h += listHtml("Entry points affected", (v.entry_points_affected || []).slice(0, 15).map((t) => ({ go: t.i, name: t.name, ct: t.trigger || "" })), (v.entry_points_affected || []).length);
+    h += listHtml("By system", (v.by_system || []).map((g) => ({ go: g.i, name: g.system, sub: [g.changed ? g.changed + " changed" : "", g.must_edit ? g.must_edit + " to edit" : "", g.reached ? g.reached + " reached" : ""].filter(Boolean).join(" · "), ct: "" })), (v.by_system || []).length);
+    h += listHtml("By module", (v.by_module || []).map((g) => ({ go: g.i, name: g.module, sub: [g.changed ? g.changed + " changed" : "", g.must_edit ? g.must_edit + " to edit" : "", g.reached ? g.reached + " reached" : ""].filter(Boolean).join(" · "), ct: "" })), (v.by_module || []).length);
+    const rest = [...byRole("direct"), ...byRole("indirect")];
+    h += listHtml("Reached, no edit needed", rest.slice(0, 30).map(row), rest.length);
+    if (v.limits) h += `<p class="note">${esc(v.limits)}</p>`;
+  } else {
+    for (const r of VW.roles) h += listHtml(esc((v.legend && v.legend[r]) || ROLE_LABEL[r] || r), byRole(r).slice(0, 40).map(row), byRole(r).length);
+  }
+  if (VW.trimmed) h += `<p class="note">The map leaves out the outer ring of indirectly reached code to stay readable. It is still listed here.</p>`;
+  return h;
+}
+/* ---------- tours ---------- */
+const TOURS = D.tours || [];
+function tourHtml() {
+  if (!S.tour) return "";
+  const t = TOURS[S.tour.idx], st = t.stops[S.tour.stop], n = t.stops.length;
+  const pick = TOURS.length > 1 ? `<select id="tour-pick" aria-label="Tour">${TOURS.map((x, k) => `<option value="${k}"${k === S.tour.idx ? " selected" : ""}>${esc(x.title)}</option>`).join("")}</select>` : `<b>${esc(t.title)}</b>`;
+  return `<section class="tour" aria-label="Tour"><div class="tour-top">${pick}<button id="tour-end" aria-label="End the tour">End</button></div>
+    <div class="eyebrow">Stop ${S.tour.stop + 1} of ${n}${t.source.startsWith("leyline-tour") ? ` <span class="tag">from the graph</span>` : ` <span class="tag heur">written by ${esc(t.source === "mcp" ? "an agent" : t.source)}</span>`}</div>
+    <h2>${esc(st.title || "Stop " + (S.tour.stop + 1))}</h2><p class="note">${esc(st.text)}</p>
+    <div class="tour-nav"><button id="tour-prev"${S.tour.stop === 0 ? " disabled" : ""}>Back</button><button id="tour-back">Show this stop</button><button id="tour-next" class="primary"${S.tour.stop === n - 1 ? " disabled" : ""}>Next</button></div></section>`;
+}
+// Put the map on whatever the current stop points at.
+function tourShow() {
+  const st = TOURS[S.tour.idx].stops[S.tour.stop];
+  $("tab-tour").setAttribute("aria-pressed", "true");
+  if (st.kind === "flow") { const fi = FLOWS.findIndex((f) => f.id === st.ref); if (fi >= 0) return openFlow(fi, null); }
+  if (st.kind === "pattern" || st.kind === "view") { const vi = VIEWS.findIndex((v) => v.id === st.ref); if (vi >= 0) { S.viewIdx = vi; S.sel = null; if (S.mode === "views") { viewSetup(); render(true); viewKey(); } else setMode("views"); return; } }
+  if (S.mode !== "map") setMode("map");
+  if (st.kind === "repo" || st.i == null) return top();
+  goTo(st.i);
+}
+function reviewHtml(v) {
+  const r = v.review, p = r.prediction, g = r.graph, t = r.tests;
+  const lvl = (x) => `<span class="tag ${x.level === "high" ? "risk-high" : x.level === "medium" ? "risk-medium" : ""}">${x.level}</span>`;
+  const nrow = (n, sub) => ({ go: n.i, name: n.name, sub: sub != null ? sub : [n.why, n.path ? n.path + (n.line ? ":" + n.line : "") : ""].filter(Boolean).join(" · "), ct: "" });
+  let h = `<div class="eyebrow">Change review <span class="tag heur">graph before and after</span></div><h2>${esc(v.title.replace(/^Review: /, ""))}</h2><p class="note">${esc(v.narrative || "")}</p>`;
+  h += `<div class="facts"><div><b>${p.as_predicted}/${p.predicted}</b><span>predicted edits made</span></div><div><b>${p.not_predicted}</b><span>not predicted</span></div><div><b>${g.structure.new_dependencies.length}</b><span>new module links</span></div><div><b>${t ? t.after.passed + "/" + t.after.total : "–"}</b><span>tests passing</span></div></div>`;
+  h += `<h3>Findings</h3>` + (r.verdict.length ? r.verdict.map((x) => `<p class="note">${lvl(x)} ${esc(x.what)}</p>`).join("") : `<p class="note">Nothing flagged: the edits match the proposal, no new links between modules, no rule or test newly failing.</p>`);
+  const byRole = (role) => v.marks.filter((m) => m.role === role).map((m) => ({ go: m.i, name: N[m.i].k === "callable" ? qual(m.i) : N[m.i].n, sub: [m.note, N[moduleOf[m.i]] ? "in " + N[moduleOf[m.i]].n : ""].filter(Boolean).join(" · "), ct: "" }));
+  h += listHtml("Edited, not in the proposal", r.not_predicted.map((n) => nrow(n)), r.not_predicted.length);
+  h += listHtml("In the proposal, not edited", r.predicted_untouched.map((n) => nrow(n, n.note)), r.predicted_untouched.length);
+  h += listHtml("Edited as predicted", byRole("edited as predicted"), byRole("edited as predicted").length);
+  h += listHtml("New, as declared", byRole("new, as declared"), byRole("new, as declared").length);
+  h += listHtml("Signatures changed", g.nodes.resigned.map((n) => nrow(n, `(${n.was}) → (${n.now})`)), g.nodes.resigned.length);
+  h += listHtml("New links between modules", g.structure.new_dependencies.map((d) => ({ go: d.fi, name: `${d.from} → ${d.to}`, sub: "", ct: d.links + (d.links === 1 ? " link" : " links") })), g.structure.new_dependencies.length);
+  h += listHtml("Links between modules that went away", g.structure.removed_dependencies.map((d) => ({ name: `${d.from} → ${d.to}`, sub: "", ct: d.links + "" })), g.structure.removed_dependencies.length);
+  if (g.flows.changed) {
+    h += listHtml(`Flows now pass through (${g.flows.changed} flows changed path)`, g.flows.now_pass_through.map((n) => ({ go: n.i, name: n.name, sub: "", ct: n.flows + " flows" })), g.flows.now_pass_through.length);
+    h += listHtml("Flows no longer pass through", g.flows.no_longer_pass_through.map((n) => ({ go: n.i, name: n.name, sub: "", ct: n.flows + " flows" })), g.flows.no_longer_pass_through.length);
+  }
+  const newly = new Set(r.rules.new_violations.map((x) => x.id));
+  const rules = r.rules.all || [];
+  if (rules.length) h += `<h3>Rules <span>${rules.length - r.rules.failing} of ${rules.length} hold</span></h3>` + rules.map((x) => `<p class="note"><span class="tag ${x.passes ? "" : newly.has(x.id) ? "risk-high" : "risk-medium"}">${x.passes ? "holds" : newly.has(x.id) ? "newly broken" : "broken before too"}</span> ${esc(x.kind === "forbid" ? `${x.from} must not use ${x.to}` : x.kind === "no_cycle" ? `no cycles between ${x.from}` : `${x.from} must be on a test's path`)}${x.status === "suggested" ? ` <span class="tag heur">suggested</span>` : ""}${x.passes ? "" : ` · ${x.violations} ${x.violations === 1 ? "violation" : "violations"}`}</p>`).join("");
+  if (t) {
+    h += `<h3>Tests</h3><p class="note">${t.before.passed} of ${t.before.total} passed before, ${t.after.passed} of ${t.after.total} after.</p>`;
+    h += listHtml("Now failing", t.newly_failing.map((x) => ({ name: x.name, sub: x.message || "", ct: "" })), t.newly_failing.length);
+    h += listHtml("Tests added", t.added.map((x) => ({ name: x, sub: "", ct: "" })), t.added.length);
+    h += listHtml("Tests removed", t.removed.map((x) => ({ name: x, sub: "", ct: "" })), t.removed.length);
+  } else h += `<h3>Tests</h3><p class="note">No test runs were recorded for this change.</p>`;
+  h += `<p class="note">${esc(r.limits || "")}</p>`;
+  return h;
+}
+function viewNodeHtml(i) {
+  const ms = VW.marksIn.get(i) || [];
+  const rows = ms.map((m) => ({ go: m.i, name: m.i === i ? N[i].n : qual(m.i), sub: m.note, ct: ROLE_LABEL[m.role] || m.role }));
+  return `<div class="eyebrow">In this view</div>` + listHtml("Why it is here", rows, rows.length).replace("<h3>", `<h3 style="margin-top:4px">`) + `<div style="height:14px"></div>` + nodeHtml(i);
+}
+function openFlow(fi, node) { S.flow = fi; S.sel = node != null ? { node } : null; setMode("flows"); const cur = $("flowview").querySelector("[aria-current]"); if (cur) cur.scrollIntoView({ block: "center" }); }
+// Map and Changes are on the first screen; the rest sits behind More.
+const MORE = { flows: "Flows", matrix: "Matrix", views: "Saved views" };
+const usesView = (mode) => mode === "views" || (mode === "change" && S.change != null);
+function setMode(mode) {
+  S.mode = mode; menu(false);
+  $("tab-map").setAttribute("aria-pressed", mode === "map"); $("tab-change").setAttribute("aria-pressed", mode === "change");
+  for (const m in MORE) $("tab-" + m).setAttribute("aria-pressed", mode === m);
+  $("tab-more").setAttribute("aria-pressed", mode in MORE); $("tab-more").textContent = mode in MORE ? "More: " + MORE[mode] : "More";
+  const onMap = mode === "map" || mode === "views" || mode === "change";
+  $("map").toggleAttribute("hidden", !onMap); $("matrix").hidden = mode !== "matrix"; $("flowview").hidden = mode !== "flows";
+  $("hint").hidden = mode !== "map"; $("viewkey").hidden = mode !== "views";
+  $("crumbs").style.visibility = mode === "flows" || usesView(mode) ? "hidden" : "";
+  if (usesView(mode)) { if (S.level !== "view") { S.prev = { level: S.level, focus: S.focus }; S.level = "view"; S.focus = null; } S.sel = null; viewSetup(); viewKey(); draw(); }
+  else if (S.level === "view") { S.level = S.prev ? S.prev.level : WS ? "ws" : "repo"; S.focus = S.prev ? S.prev.focus : WS ? null : repoIdx; S.sel = null; crumbs(); draw(); }
+  else if (mode === "map") draw();
+  tools();
+  if (mode === "matrix") drawMatrix(); else if (mode === "flows") drawFlow(); else requestAnimationFrame(fit);
+  side();
+}
+function menu(open) { $("menu").hidden = !open; $("tab-more").setAttribute("aria-expanded", open); }
+$("tab-map").onclick = () => setMode("map");
+$("tab-change").onclick = () => { if (S.mode === "change" && CHANGES.length > 1) S.change = null; else if (S.change == null && CHANGES.length === 1) return openChange(0); setMode("change"); };
+$("tab-more").onclick = (e) => { e.stopPropagation(); menu($("menu").hidden); };
+$("tab-matrix").onclick = () => setMode("matrix");
+$("tab-flows").onclick = () => { if (S.sel && S.sel.edge) S.sel = null; setMode("flows"); };
+$("tab-views").onclick = () => setMode("views");
+$("tab-tour").onclick = () => { menu(false); if (!TOURS.length) return; if (!S.tour) S.tour = { idx: 0, stop: 0 }; tourShow(); };
+if (!TOURS.length) $("tab-tour").hidden = true;
+document.addEventListener("click", (e) => { if (!e.target.closest(".morewrap")) menu(false); });
+document.addEventListener("keydown", (e) => { if (e.key === "Escape") menu(false); });
+
+/* ---------- changes ---------- */
+// A change planned with `leyline plan`: its page (leyline.md), its tasks tied to code, the view of what it
+// is expected to touch and, after `leyline check`, what it did touch.
+const CHANGES = D.changes || [];
+const viewById = (id) => VIEWS.find((v) => v.id === id);
+function changeView(c, phase) {
+  if (phase === "after" && c.after) return { kind: "change", title: c.title, marks: c.after, legend: {} };
+  const v = viewById(c.plan_view) || { marks: [] };
+  const marks = v.marks.slice();
+  // Code that is not written yet has no box: mark where it goes.
+  for (const t of c.tasks) for (const nw of t.new) if (nw.pi != null) marks.push({ i: nw.pi, role: "new", note: "new: " + nw.name });
+  // A test that runs through the change is shown as a test, as leyline.md counts it, not only as code it reaches.
+  const tests = new Set((v.tests_to_run || []).map((t) => t.i).filter((i) => i != null));
+  return { ...v, kind: "change", marks: marks.map((m) => (tests.has(m.i) && (m.role === "direct" || m.role === "indirect") ? { ...m, role: "test" } : m)) };
+}
+function curView() { return S.mode === "change" && S.change != null ? changeView(CHANGES[S.change], S.phase) : VIEWS[S.viewIdx]; }
+function openChange(k) {
+  S.change = k; S.phase = CHANGES[k].after ? "after" : "plan"; S.pick = null;
+  try { history.replaceState(null, "", "#change=" + encodeURIComponent(CHANGES[k].name)); } catch (e) { /* a sandboxed page */ }
+  setMode("change"); crumbs();
+}
+function setPhase(ph) { S.phase = ph; S.sel = null; viewSetup(); draw(); tools(); side(); requestAnimationFrame(fit); }
+// Every box that holds a marked node, with the strongest role inside it: the change drawn over the ordinary map.
+let overKey = null, overMap = null;
+function overlay() {
+  const key = S.change + ":" + S.phase;
+  if (key === overKey) return overMap;
+  const rank = (r) => { const k = ROLE_ORDER.indexOf(r); return k < 0 ? 99 : k; }, m = new Map();
+  const put = (c, r) => { if (!m.has(c) || rank(r) < rank(m.get(c))) m.set(c, r); };
+  for (const mk of changeView(CHANGES[S.change], S.phase).marks) for (let c = mk.i; c != null; c = N[c].p) { put(c, mk.role); if (sysOf.has(c)) put(sysOf.get(c), mk.role); }
+  overKey = key; overMap = m;
+  return m;
+}
+const normName = (x) => String(x).toLowerCase().replace(/test_/g, "").replace(/[^a-z0-9]+/g, " ").trim();
+const scenarioTest = (c, name) => { const sc = c.scenarios.find((x) => x.name === name); if (sc && sc.test != null) return sc.test; const k = N.findIndex((n) => (n.k === "test" || (n.k === "callable" && /^test/i.test(n.n))) && normName(n.n) === normName(name)); return k >= 0 ? k : null; };
+function pickNodes(c, p) {
+  if (!p) return [];
+  if (p.task) { const t = c.tasks.find((x) => x.key === p.task); return t ? [...t.nodes, ...t.into, ...t.new.map((x) => x.pi).filter((x) => x != null)] : []; }
+  const t = scenarioTest(c, p.scenario); return t != null ? [t] : [];
+}
+function picked() {
+  if (S.change == null || !S.pick) return null;
+  const set = new Set();
+  for (const i of pickNodes(CHANGES[S.change], S.pick)) for (let c = i; c != null; c = N[c].p) { set.add(c); if (sysOf.has(c)) set.add(sysOf.get(c)); }
+  return set;
+}
+// leyline.md as blocks. It is generated, so a small reader covers it: headings, paragraphs, lists, tables.
+function mdBlocks(text) {
+  const lines = text.replace(/<!--[\s\S]*?-->/g, "").split(/\r?\n/), out = [];
+  let k = 0, section = "";
+  while (k < lines.length) {
+    const ln = lines[k];
+    if (!ln.trim()) { k++; continue; }
+    if (ln.startsWith("# ")) { out.push({ t: "title", text: ln.slice(2) }); k++; continue; }
+    if (ln.startsWith("## ")) { section = ln.slice(3); out.push({ t: "h", text: section }); k++; continue; }
+    if (ln.startsWith("### ")) { out.push({ t: "sub", text: ln.slice(4) }); k++; continue; }
+    // A ```mermaid block (a sequence diagram drawn from the map): this page has no renderer, so it shows the source.
+    if (ln.startsWith("```")) { const code = []; k++; while (k < lines.length && !lines[k].startsWith("```")) code.push(lines[k++]); k++; out.push({ t: "pre", lang: ln.slice(3).trim(), text: code.join("\n") }); continue; }
+    if (ln.startsWith("|")) { const rows = []; while (k < lines.length && lines[k].startsWith("|")) rows.push(lines[k++]); out.push({ t: "table", rows: rows.map((r) => r.split("|").slice(1, -1).map((c) => c.trim())), section }); continue; }
+    if (/^\s*- /.test(ln)) { const items = []; while (k < lines.length && /^\s*- /.test(lines[k])) items.push(lines[k++].replace(/^\s*- /, "")); out.push({ t: "ul", items }); continue; }
+    const para = []; while (k < lines.length && lines[k].trim() && !/^(#|\||\s*- |```)/.test(lines[k])) para.push(lines[k++]);
+    out.push({ t: "p", text: para.join(" ") });
+  }
+  return out;
+}
+const inline = (t) => esc(t).replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>").replace(/(^|[^*\w])\*([^*\s][^*]*)\*/g, "$1<i>$2</i>");
+function tableHtml(b) {
+  const [head, , ...body] = b.rows;
+  const isTask = head[0] === "Task", isScen = head[0] === "Scenario", result = head[1] === "Result";
+  const cur = S.pick || {};
+  return `<div class="tbl"><table><thead><tr>${head.map((h) => `<th>${inline(h)}</th>`).join("")}</tr></thead><tbody>${body.map((r) => {
+    const key = isTask ? r[0].split(" ")[0] : isScen ? r[0] : null;
+    const on = key != null && (isTask ? cur.task === key : cur.scenario === key);
+    const attr = isTask ? ` data-task="${esc(key)}"` : isScen ? ` data-scenario="${esc(key)}"` : "";
+    return `<tr${attr}${on ? ` aria-current="true"` : ""}${attr ? ' tabindex="0"' : ""}>${r.map((c, j) => `<td${result && j === 1 ? ` class="res-${esc(c.split(" (")[0].replace(/\s+/g, "-"))}"` : ""}>${inline(c)}</td>`).join("")}</tr>`;
+  }).join("")}</tbody></table></div>`;
+}
+function keyHtml(c) {
+  const have = new Set(changeView(c, S.phase).marks.map((m) => m.role));
+  return `<ul class="keylist">${ROLE_ORDER.filter((r) => have.has(r)).map((r) => `<li><span class="key"><b class="k-${r}"></b></span>${esc(ROLE_LABEL[r])}</li>`).join("")}</ul>`;
+}
+function pickHtml(c) {
+  if (!S.pick) return `<p class="note">Select a task or a scenario below to outline its code on the map. Double-click a box to open it on the full map.</p>`;
+  const ns = pickNodes(c, S.pick), shown = picked(), onMap = [...L.boxes.keys()].some((i) => shown && shown.has(i));
+  const what = S.pick.task ? "Task " + S.pick.task : "Scenario " + S.pick.scenario;
+  const fi = S.pick.scenario && ns.length ? FLOWS.findIndex((f) => f.entry === ns[0]) : -1;
+  const t = S.pick.task ? c.tasks.find((x) => x.key === S.pick.task) : null;
+  const newOnly = t && !t.nodes.length && !t.into.length;
+  const why = !ns.length ? (S.pick.scenario ? "Its test is not on the map yet: it is to be written, with this name." : "It names no code on the map.") : !onMap ? (newOnly ? "Its code is new, so it is not on the map; its box shows where it goes once the plan is followed." : "Its code is not in this picture; open it on the full map.") : "";
+  return `<p class="note"><b>${esc(what)}</b> is outlined on the map. ${why} ${ns.length ? `<button class="chip" data-go="${ns[0]}">Show on the full map</button>` : ""} ${fi >= 0 ? `<button class="chip" data-flow="${fi}">Trace what the test runs</button>` : ""} <button class="chip" id="unpick">Clear</button></p>`;
+}
+function stateClass(text) { return /done as agreed\./.test(text) ? "ok" : /ready to implement\./.test(text) ? "ready" : "todo"; }
+function changeHtml() {
+  if (!CHANGES.length) return `<div class="eyebrow">Changes</div><h2>No change is planned yet</h2>
+    <p class="note">A change is planned as an OpenSpec folder, <code>openspec/changes/&lt;id&gt;/</code>, whose tasks say what code will be written and whose scenarios say how you will know it works. Ask your agent to write one (the leyline-spec skill says how), then run <code>leyline plan &lt;id&gt;</code>.</p>
+    <p class="note">The map page is then rewritten with the change on it: what will be written, what else must be edited with it, and which tests run through it. After <code>leyline check</code> it also shows what was done.</p>`;
+  if (S.change == null) return `<div class="eyebrow">Changes</div><h2>${CHANGES.length} planned changes</h2>
+    <p class="note">Pick one to see on the map what it will write and, once it has been checked, what was done.</p>
+    <ul class="changes">${CHANGES.map((c, k) => { const st = c.page && (c.page.match(/\*\*State:([^*]+)\*\*/) || [])[1]; return `<li><button data-change="${k}"><b>${esc(c.title)}</b><small>${st ? "State:" + esc(st) : c.after ? "checked" : "planned"}</small><small>${esc(c.folder || c.id)}</small></button></li>`; }).join("")}</ul>`;
+  const c = CHANGES[S.change];
+  let h = CHANGES.length > 1 ? `<div class="banner"><span>Change ${S.change + 1} of ${CHANGES.length}</span><button id="all-changes">All changes</button></div>` : "";
+  h += `<div class="eyebrow">Change <span class="tag">${esc(c.folder || c.id)}</span></div><h2>${esc(c.title)}</h2>`;
+  const onmap = `<section class="onmap" aria-label="On the map"><div class="eyebrow">On the map: ${S.phase === "after" ? "what was done, from the last check" : "what the plan will change"}</div>${keyHtml(c)}${pickHtml(c)}</section>`;
+  if (!c.page) {
+    const v = viewById(c.plan_view) || {};
+    return h + `<p class="note">${esc(v.narrative || "")}</p><p class="note">This change was assessed without a spec folder, so it has no leyline.md page.</p>` + onmap + `<div class="md">${listHtml("Tests to run", (v.tests_to_run || []).slice(0, 30).map((t) => ({ go: t.i, name: t.name, ct: "" })), (v.tests_to_run || []).length)}</div>`;
+  }
+  let body = "", placed = false;
+  for (const b of mdBlocks(c.page)) {
+    if (b.t === "title") continue;
+    if (b.t === "p" && b.text.startsWith("**State:")) { h += `<p class="state ${stateClass(b.text)}">${inline(b.text)}</p>`; continue; }
+    if (b.t === "p" && /^The one-page plan for/.test(b.text)) continue;
+    if (b.t === "h" && !placed) { body += onmap; placed = true; }
+    body += b.t === "h" ? `<h3>${inline(b.text)}</h3>` : b.t === "sub" ? `<h4>${inline(b.text)}</h4>` : b.t === "pre" ? `<pre class="code diagram" data-lang="${esc(b.lang)}"><code>${esc(b.text)}</code></pre>` : b.t === "p" ? `<p>${inline(b.text)}</p>` : b.t === "ul" ? `<ul>${b.items.map((x) => `<li>${inline(x)}</li>`).join("")}</ul>` : tableHtml(b);
+  }
+  if (!placed) body += onmap;
+  return h + `<div class="md">${body}<p class="note">This is <code>${esc(c.folder)}leyline.md</code>, written by <code>leyline plan</code> and <code>leyline check</code>. To change the plan, edit the spec files beside it and run <code>leyline plan ${esc(c.name)}</code> again.</p></div>`;
+}
+const backHtml = () => `<div class="banner"><span>${esc(CHANGES[S.change].title)}</span><button id="to-change">Back to the change</button></div>`;
+const shownHtml = () => `<div class="banner"><span>The map shows the change <b>${esc(CHANGES[S.change].title)}</b>: ${S.phase === "after" ? "what was done" : "what the plan will change"}.</span><button id="to-change">Back to the change</button><button id="hide-change">Hide</button></div>`;
+function wireChange(s) {
+  for (const b of s.querySelectorAll("[data-change]")) b.onclick = () => openChange(+b.dataset.change);
+  if ($("all-changes")) $("all-changes").onclick = () => { S.change = null; S.pick = null; setMode("change"); };
+  if ($("to-change")) $("to-change").onclick = () => { S.sel = null; if (S.mode === "change") { mark(); side(); } else setMode("change"); };
+  if ($("hide-change")) $("hide-change").onclick = () => { S.change = null; S.pick = null; draw(); side(); };
+  if ($("unpick")) $("unpick").onclick = () => { S.pick = null; mark(); side(); };
+  const choose = (p) => { const same = S.pick && S.pick.task === p.task && S.pick.scenario === p.scenario; S.pick = same ? null : p; mark(); const top = s.scrollTop; side(); s.scrollTop = top; };
+  for (const r of s.querySelectorAll("[data-task]")) { r.onclick = () => choose({ task: r.dataset.task }); r.onkeydown = (e) => { if (e.key === "Enter") r.click(); }; }
+  for (const r of s.querySelectorAll("[data-scenario]")) { r.onclick = () => choose({ scenario: r.dataset.scenario }); r.onkeydown = (e) => { if (e.key === "Enter") r.click(); }; }
+}
+/* ---------- workspace ---------- */
+function wsHtml() {
+  const pairs = new Map(), called = new Map();
+  for (const Lk of LINKS) {
+    const a = repoOf[Lk[1]], b = repoOf[Lk[2]];
+    if (a == null || b == null || a === b) continue;
+    const key = a + ">" + b; let p = pairs.get(key); if (!p) pairs.set(key, p = { a, b, n: 0, kinds: {} });
+    p.n += Lk[4]; p.kinds[linkLabel(Lk)] = (p.kinds[linkLabel(Lk)] || 0) + Lk[4];
+    if (Lk[0] === "calls") { const c = called.get(Lk[2]) || new Set(); c.add(Lk[1]); called.set(Lk[2], c); }
+  }
+  const crossing = FLOWS.filter((f) => f.steps.some((st) => repoOf[st[0]] !== repoOf[f.entry])).length;
+  const facts = [[REPOS.length, "repositories"], [N.filter((n) => n.k === "module").length, "modules"], [N.filter((n) => n.k === "file").length, "files"], [big(REPOS.reduce((t, r) => t + linesOf(r), 0)), "lines"]];
+  const prs = [...pairs.values()].sort((x, y) => y.n - x.n);
+  const top = [...called.entries()].sort((x, y) => y[1].size - x[1].size).slice(0, 12);
+  return `<div class="eyebrow">Workspace</div><h2>${REPOS.map((r) => esc(N[r].n)).join(" + ")}</h2>
+    <div class="facts">${facts.map(([v, l]) => `<div><b>${v}</b><span>${l}</span></div>`).join("")}</div>
+    <p class="note">One store holds ${REPOS.length} repositories, indexed together so that a call from one into another links to the code it reaches. Each box is a repository; an arrow from A to B means code in A uses code in B, and its number counts the links. Double-click a repository to see its modules; links into the others stay on that map, dashed and in their own colour.</p>
+    ${CHANGES.length && S.change == null ? `<p class="note">${CHANGES.length === 1 ? "One change is" : CHANGES.length + " changes are"} planned. Open <b>Changes</b> to see on the map what ${CHANGES.length === 1 ? "it" : "each"} will write.</p>` : ""}
+    ${listHtml("Repositories", REPOS.map((r) => ({ go: r, name: N[r].n, sub: repoMeta(r).folder || repoMeta(r).url || "", ct: big(linesOf(r)) + " lines" })), REPOS.length)}
+    <h3>Links between repositories <span>${prs.length}</span></h3>${prs.length ? `<ul class="list">${prs.map((p) => `<li><button data-edge="${p.a}>${p.b}"><span class="nm">${esc(N[p.a].n)} → ${esc(N[p.b].n)}<small>${esc(Object.entries(p.kinds).sort((x, y) => y[1] - x[1]).map(([k, v]) => `${k} ${v.toLocaleString()}`).join(" · "))}</small></span><span class="ct">${p.n.toLocaleString()}</span></button></li>`).join("")}</ul>` : `<p class="note">None found: no code in one repository uses code in another.</p>`}
+    ${listHtml("Most used from another repository", top.map(([d, cs]) => ({ go: d, name: qual(d), sub: "in " + N[repoOf[d]].n + " · called from " + [...new Set([...cs].map((c) => N[repoOf[c]].n))].join(", "), ct: cs.size + " callers" })), called.size)}
+    <h3>Flows that cross</h3><p class="note">${crossing.toLocaleString()} of ${FLOWS.length.toLocaleString()} flows (what a test or an entry point runs through) pass into another repository. Find them under More, Flows.</p>`;
+}
+
+/* ---------- search ---------- */
+const searchable = N.filter((n) => ["part", "system", "module", "file", "type", "callable", "field", "test"].includes(n.k) && n.n !== "<module>" && n.n !== "<top-level>");
+const rank = { part: 0, system: 0, module: 0, type: 1, file: 2, callable: 3, field: 4, test: 5 };
+$("q").addEventListener("input", () => {
+  const q = $("q").value.trim().toLowerCase(), box = $("results");
+  if (q.length < 2) { box.hidden = true; return; }
+  const words = q.split(/[\s.]+/).filter(Boolean);
+  const hits = [];
+  for (const n of searchable) {
+    const hay = (n.i.split(":").slice(2).join(":") + " " + (n.f || "")).toLowerCase(), name = n.n.toLowerCase();
+    if (!words.every((w) => hay.includes(w))) continue;
+    const last = words[words.length - 1];
+    hits.push([(name === q ? -2 : name.includes(q) && words.length > 1 ? -1 : name === last ? 0 : name.startsWith(last) ? 1 : name.includes(last) ? 2 : 3) * 10 + rank[n.k], n.i.length, n]);
+  }
+  hits.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  box.innerHTML = hits.slice(0, 14).map(([, , n]) => `<button data-go="${n.idx}"><b>${esc(n.k === "callable" || n.k === "field" ? qual(n.idx) : n.n)}</b><span>${esc(kindName(n.idx))}${WS && repoOf[n.idx] != null ? " · " + esc(N[repoOf[n.idx]].n) : ""} · ${esc(where(n.idx))}</span></button>`).join("") || `<button disabled><span>Nothing matches “${esc(q)}”.</span></button>`;
+  box.hidden = false;
+  for (const b of box.querySelectorAll("[data-go]")) b.onclick = () => { box.hidden = true; $("q").value = ""; if (S.mode === "matrix" || S.mode === "views" || S.mode === "change") setMode("map"); goTo(+b.dataset.go); };
+});
+$("q").addEventListener("keydown", (e) => { if (e.key === "Escape") { $("results").hidden = true; $("q").blur(); } if (e.key === "Enter") { const b = $("results").querySelector("[data-go]"); if (b) b.click(); } });
+document.addEventListener("click", (e) => { if (!e.target.closest(".search")) $("results").hidden = true; });
+
+/* ---------- start ---------- */
+$("hint-cross").hidden = !WS;
+$("change-count").textContent = CHANGES.length ? " " + CHANGES.length : "";
+const asked = decodeURIComponent((location.hash.match(/change=([^&]+)/) || [])[1] || "") || (D.start && D.start.change);
+const startAt = asked ? CHANGES.findIndex((c) => c.name === asked || c.id === asked) : -1;
+if (startAt >= 0) openChange(startAt); else render(true);
+window.addEventListener("resize", () => { if (S.mode === "map") fit(); });
+if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => { draw(); fit(); });
+})();
+</script>