thurview 0.6.0 → 0.8.0

package/dist/ui/app.js

@@ -162,6 +162,17 @@
   init_dom();
 
   // src/ui/state.ts
+  var VIEWS = {
+    review: ["review", "commits", "files", "map"],
+    explainer: ["review", "map", "coverage"]
+  };
+  function kind() {
+    return state.data?.review.kind === "explainer" ? "explainer" : "review";
+  }
+  function view() {
+    const allowed = VIEWS[kind()];
+    return allowed.includes(state.view) ? state.view : allowed[0];
+  }
   var NARROW = "(max-width: 900px)";
   function isNarrow() {
     return window.matchMedia(NARROW).matches;
@@ -196,16 +207,16 @@
     if (t.type === "map") return `map \xB7 ${t.node}`;
     return "review";
   }
-  function navigate(view, params = {}) {
+  function navigate(view2, params = {}) {
     const p = new URLSearchParams();
     for (const [k, v] of Object.entries(params)) if (v !== void 0 && v !== "") p.set(k, String(v));
     const q = p.toString();
-    location.hash = `#/${view}${q ? `?${q}` : ""}`;
+    location.hash = `#/${view2}${q ? `?${q}` : ""}`;
   }
   function readHash() {
     const m2 = /^#\/(\w+)(?:\?(.*))?$/.exec(location.hash);
-    const view = m2?.[1] ?? "review";
-    state.view = ["review", "commits", "files", "map"].includes(view) ? view : "review";
+    const v = m2?.[1] ?? "review";
+    state.view = ["review", "commits", "files", "map", "coverage"].includes(v) ? v : "review";
     state.params = new URLSearchParams(m2?.[2] ?? "");
   }
   function isTerminal() {
@@ -484,12 +495,14 @@
   }
   function submitDialog() {
     const pending = (state.data?.threads ?? []).filter((t) => !t.submitted).length;
+    const explainer = kind() === "explainer";
+    const words = explainer ? { title: "Send this back or finish", accept: "Done reading", back: "Send it back" } : { title: "Submit review", accept: "Approve", back: "Request changes" };
     const ta = h("textarea", { rows: 4, placeholder: "Summary for the agent (optional)" });
     const d = dialog(
       h(
         "div",
         null,
-        h("h3", null, "Submit review"),
+        h("h3", null, words.title),
         h(
           "p",
           { class: "muted" },
@@ -502,11 +515,14 @@
           h("button", { class: "ghost", onclick: () => d.close() }, "Cancel"),
           h(
             "button",
-            { title: "End the review without approving it", onclick: () => decide("close") },
+            {
+              title: explainer ? "End it without reading it through" : "End the review without approving it",
+              onclick: () => decide("close")
+            },
             "Close"
           ),
-          h("button", { onclick: () => decide("request-changes") }, "Request changes"),
-          h("button", { class: "ok", onclick: () => decide("approve") }, "Approve")
+          h("button", { onclick: () => decide("request-changes") }, words.back),
+          h("button", { class: "ok", onclick: () => decide("approve") }, words.accept)
         )
       )
     );
@@ -788,7 +804,7 @@
     const frame = h("div", { class: "code" });
     const draw = () => {
       frame.innerHTML = "";
-      const bar = (dir) => {
+      const bar2 = (dir) => {
         const can = dir === "up" ? p.from > 1 : p.to < p.total;
         return h(
           "div",
@@ -800,7 +816,7 @@
           ) : h("span", { class: "muted" }, dir === "up" ? "start of file" : "end of file")
         );
       };
-      frame.appendChild(bar("up"));
+      frame.appendChild(bar2("up"));
       frame.appendChild(
         codeTable({
           path: p.path,
@@ -811,7 +827,7 @@
           commentable: true
         })
       );
-      frame.appendChild(bar("down"));
+      frame.appendChild(bar2("down"));
     };
     const expand = async (dir) => {
       if (dir === "up") {
@@ -901,12 +917,12 @@
       } else {
         g.appendChild(svg("line", { x1, y1: y, x2: x2 + (x2 > x1 ? -4 : 4), y2: y }));
       }
-      const label = svg(
+      const label2 = svg(
         "text",
         { x: self ? x1 + 36 : (x1 + x2) / 2, y: y - 6, "text-anchor": self ? "start" : "middle" },
         `${i + 1}. ${m2.label}`
       );
-      label.addEventListener("click", (e) => {
+      label2.addEventListener("click", (e) => {
         if (m2.anchor) openAnchor(m2.anchor);
         else if (m2.code)
           popover(
@@ -918,7 +934,7 @@
             { x: e.pageX, y: e.pageY + 8 }
           );
       });
-      g.appendChild(label);
+      g.appendChild(label2);
       el.appendChild(g);
     });
     return h("div", { class: "diagram" }, h("div", { class: "dhead" }, b.label), el);
@@ -970,12 +986,12 @@
       );
       const uc = b.usecases[active];
       body.innerHTML = "";
-      const touched = /* @__PURE__ */ new Map();
+      const touched2 = /* @__PURE__ */ new Map();
       for (const op of uc.ops) {
         const [s, c, f] = op.store.split(".");
         const key = `${s}.${c}`;
-        if (!touched.has(key)) touched.set(key, /* @__PURE__ */ new Set());
-        if (f) touched.get(key).add(f);
+        if (!touched2.has(key)) touched2.set(key, /* @__PURE__ */ new Set());
+        if (f) touched2.get(key).add(f);
       }
       const actorIds = [...new Set(uc.ops.map((o) => o.actor))];
       body.appendChild(
@@ -996,7 +1012,7 @@
             { class: "store" },
             h("div", { class: "sname" }, s.label, " ", h("span", { class: "badge" }, s.kind)),
             Object.entries(colls).map(([cid, c]) => {
-              const hit = touched.get(`${sid}.${cid}`);
+              const hit = touched2.get(`${sid}.${cid}`);
               return h(
                 "div",
                 { class: `table ${hit ? "hit" : ""}` },
@@ -1067,7 +1083,9 @@
       );
       return;
     }
-    root.appendChild(interfaceDelta(doc.interfaces));
+    root.appendChild(
+      kind() === "explainer" ? coveragePanel(state.data?.coverage ?? null) : interfaceDelta(doc.interfaces)
+    );
     const layout = h("div", { class: "doc-layout" });
     const toc = h(
       "nav",
@@ -1140,6 +1158,7 @@
     docEl.querySelectorAll(".block.heading").forEach((el) => io.observe(el));
   }
   var DELTA_BLOCK = "interface-delta";
+  var COVERAGE_BLOCK = "coverage";
   var DELTA_SHOWN = 12;
   var CHANGE_CLASS = {
     removed: "del",
@@ -1216,6 +1235,71 @@
       wrap.appendChild(h("div", { class: "thread-pins" }, threads.map(threadPinRow)));
     return wrap;
   }
+  function coveragePanel(cov) {
+    const wrap = h("div", { class: "block ifd", "data-block": COVERAGE_BLOCK });
+    const threads = threadsFor((t) => t.type === "document" && t.blockId === COVERAGE_BLOCK);
+    if (threads.length) wrap.classList.add("has-threads");
+    const actions = h(
+      "div",
+      { class: "block-actions" },
+      h(
+        "button",
+        {
+          class: threads.length ? "count" : "",
+          title: "Comment on coverage",
+          onclick: (e) => {
+            if (state.viewingRevision !== null) return;
+            popover(commentPopover({ type: "document", blockId: COVERAGE_BLOCK }), {
+              x: e.pageX + 10,
+              y: e.pageY
+            });
+          }
+        },
+        threads.length ? String(threads.length) : "+"
+      )
+    );
+    const body = h("div", { class: "ifd-body" });
+    const toggle = h("span", { class: "heading-toggle" }, "hide");
+    toggle.addEventListener("click", () => {
+      const hidden = body.hidden;
+      body.hidden = !hidden;
+      toggle.textContent = hidden ? "hide" : "show";
+    });
+    wrap.appendChild(
+      h(
+        "div",
+        { class: "ifd-head" },
+        h("span", { class: "t" }, "Coverage"),
+        cov ? h("span", { class: "badge" }, `${cov.states.uncovered} not examined`) : null,
+        h("span", { class: "spacer" }),
+        toggle,
+        actions
+      )
+    );
+    body.appendChild(
+      h(
+        "p",
+        { class: "ifd-verdict" },
+        cov ? cov.verdict : "Unavailable: coverage could not be derived for this revision."
+      )
+    );
+    body.appendChild(
+      h(
+        "p",
+        { class: "ifd-verdict" },
+        "A codebase does not fit in one document, so this one selects. ",
+        h(
+          "button",
+          { class: "small", onclick: () => navigate("coverage") },
+          "See what it left out \u25B8"
+        )
+      )
+    );
+    wrap.appendChild(body);
+    if (threads.length)
+      wrap.appendChild(h("div", { class: "thread-pins" }, threads.map(threadPinRow)));
+    return wrap;
+  }
   function interfaceRow(e) {
     return h(
       "div",
@@ -1416,15 +1500,15 @@
       list.appendChild(
         h("div", { class: "empty-state" }, "No changed files: base and head are the same commit.")
       );
-    const view = h("div", { class: "file-view", "data-path": path });
-    root.appendChild(h("div", { class: "files-layout" }, list, view));
-    if (path) void renderDiff(view, path);
+    const view2 = h("div", { class: "file-view", "data-path": path });
+    root.appendChild(h("div", { class: "files-layout" }, list, view2));
+    if (path) void renderDiff(view2, path);
   }
-  async function renderDiff(view, path) {
+  async function renderDiff(view2, path) {
     const inChanges = state.data?.changes.some((c) => c.path === path);
     const line = Number(state.params.get("line") ?? 0);
     const side2 = state.params.get("side") === "base" ? "base" : "head";
-    view.appendChild(h("div", { class: "muted", style: { padding: "12px" } }, "Loading\u2026"));
+    view2.appendChild(h("div", { class: "muted", style: { padding: "12px" } }, "Loading\u2026"));
     let d;
     try {
       if (inChanges) d = await api.diff(state.id, path);
@@ -1453,11 +1537,11 @@
         };
       }
     } catch (e) {
-      view.innerHTML = "";
-      view.appendChild(h("div", { class: "empty-state" }, e.message));
+      view2.innerHTML = "";
+      view2.appendChild(h("div", { class: "empty-state" }, e.message));
       return;
     }
-    view.innerHTML = "";
+    view2.innerHTML = "";
     const split = state.splitDiff && inChanges && !isNarrow();
     const toggle = h(
       "button",
@@ -1466,8 +1550,8 @@
         onclick: () => {
           state.splitDiff = !state.splitDiff;
           localStorage.setItem("thurview.split", state.splitDiff ? "1" : "0");
-          view.innerHTML = "";
-          void renderDiff(view, path);
+          view2.innerHTML = "";
+          void renderDiff(view2, path);
         }
       },
       state.splitDiff ? "Unified" : "Split"
@@ -1475,7 +1559,7 @@
     const fileThreads = (state.data?.threads ?? []).filter(
       (t) => t.target.type === "file" && t.target.path === path && t.target.line === 0
     );
-    view.appendChild(
+    view2.appendChild(
       h(
         "div",
         { class: "file-head" },
@@ -1502,7 +1586,7 @@
       )
     );
     if (fileThreads.length)
-      view.appendChild(
+      view2.appendChild(
         h(
           "div",
           { class: "thread-pins", style: { margin: "8px 14px" } },
@@ -1510,15 +1594,15 @@
         )
       );
     if (d.binary) {
-      view.appendChild(h("div", { class: "empty-state" }, "Binary file"));
+      view2.appendChild(h("div", { class: "empty-state" }, "Binary file"));
       return;
     }
     const threads = (state.data?.threads ?? []).filter(
       (t) => t.target.type === "file" && t.target.path === path
     );
     const el = split ? splitView(d, threads) : unifiedView(d, threads);
-    view.appendChild(el);
-    codeSelectionHandler(view);
+    view2.appendChild(el);
+    codeSelectionHandler(view2);
     if (line) {
       const tr = el.querySelector(`tr[data-${side2}="${line}"]`);
       if (tr) {
@@ -1797,22 +1881,12 @@
 
   // src/ui/views/map.ts
   init_dom();
-  function renderMap(root) {
-    const map = state.data?.map;
-    if (!map) {
-      root.appendChild(
-        h(
-          "div",
-          { class: "empty-state" },
-          "No software map in this revision. The agent authors ",
-          h("code", null, "map.yaml"),
-          " and publishes again."
-        )
-      );
-      return;
-    }
-    const headNodes = new Map(map.head.nodes.map((n) => [n.id, n]));
-    const baseNodes = new Map((map.base?.nodes ?? []).map((n) => [n.id, n]));
+
+  // src/ui/views/map-model.ts
+  function parentOf(id) {
+    return id.includes(".") ? id.slice(0, id.lastIndexOf(".")) : "";
+  }
+  function collect(map) {
     const all = /* @__PURE__ */ new Map();
     for (const n of map.head.nodes)
       all.set(n.id, {
@@ -1820,145 +1894,297 @@
         status: map.diff.added.includes(n.id) ? "added" : map.diff.changed.includes(n.id) ? "changed" : ""
       });
     for (const id of map.diff.removed) {
-      const n = baseNodes.get(id);
+      const n = (map.base?.nodes ?? []).find((x) => x.id === id);
       if (n) all.set(id, { ...n, status: "removed" });
     }
+    return all;
+  }
+  function changedInside(all, id) {
+    let n = 0;
+    for (const item of all.values()) if (item.id.startsWith(id + ".") && item.status) n++;
+    return n;
+  }
+  function touched(all, item) {
+    return !!item.status || changedInside(all, item.id) > 0;
+  }
+  function childrenOf(all, parent, filesByNode) {
+    const kids = [...all.values()].filter((n) => parentOf(n.id) === parent);
+    const weight = (n) => (filesByNode[n.id]?.length ?? 0) + changedInside(all, n.id);
+    return kids.map((n, i) => ({ n, i })).sort((a, b) => {
+      const t = Number(touched(all, b.n)) - Number(touched(all, a.n));
+      if (t) return t;
+      const w = weight(b.n) - weight(a.n);
+      return w || a.i - b.i;
+    }).map((x) => x.n);
+  }
+  function routeIn(all, filesByNode) {
+    const changed = [...all.values()].filter((n) => n.status);
+    const hasChild = (id) => [...all.keys()].some((k) => parentOf(k) === id);
+    const leaves = changed.filter((n) => !hasChild(n.id));
+    const pool = leaves.length ? leaves : changed;
+    let best = null;
+    let bestFiles = -1;
+    for (const n of pool) {
+      const files = filesByNode[n.id]?.length ?? 0;
+      if (files > bestFiles) {
+        best = n;
+        bestFiles = files;
+      }
+    }
+    return best;
+  }
+  function neighboursOf(map, id) {
+    const out = [];
+    const into = [];
+    for (const e of allEdges(map)) {
+      if (e.from === id)
+        out.push({ dir: "out", other: e.to, ...e.label ? { label: e.label } : {} });
+      if (e.to === id)
+        into.push({ dir: "in", other: e.from, ...e.label ? { label: e.label } : {} });
+    }
+    return [...out, ...into];
+  }
+  function allEdges(map) {
     const edges = [...map.head.edges];
     for (const e of map.base?.edges ?? [])
       if (!edges.some((x) => x.from === e.from && x.to === e.to)) edges.push(e);
-    const selected = state.params.get("node") ?? "";
-    const parentOf = (id) => id.includes(".") ? id.slice(0, id.lastIndexOf(".")) : "";
-    let level = selected && all.has(selected) ? childrenOf(selected).length ? selected : parentOf(selected) : "";
-    function childrenOf(p) {
-      return [...all.values()].filter((n) => parentOf(n.id) === p);
-    }
-    function descendantsChanged(id) {
-      return [...all.values()].filter((n) => n.id.startsWith(id + ".") && n.status).length;
+    return edges;
+  }
+  function rankEdges(edges, all) {
+    const hot = (id) => {
+      const item = all.get(id);
+      return item && touched(all, item) ? 1 : 0;
+    };
+    return edges.map((edge, i) => ({ edge, i, ends: hot(edge.from) + hot(edge.to) })).sort((a, b) => b.ends - a.ends || a.i - b.i).map(({ edge, ends }) => ({ edge, touchesChange: ends > 0 }));
+  }
+
+  // src/ui/views/map.ts
+  var statusClass = (s) => s === "added" ? "ok" : s === "removed" ? "del" : "warn";
+  function renderMap(root) {
+    const map = state.data?.map;
+    const explainer = kind() === "explainer";
+    if (!map || !map.head.nodes.length) {
+      append(root, [
+        explainer ? h(
+          "div",
+          { class: "empty-state" },
+          h("p", null, "No map in this explainer."),
+          h(
+            "p",
+            null,
+            "The map is where an explainer carries breadth: it places the parts the prose ",
+            "had no room for. Without one, every file the document does not anchor counts ",
+            "as not examined on the Coverage tab."
+          )
+        ) : h(
+          "div",
+          { class: "empty-state" },
+          h("p", null, "No map in this review."),
+          h(
+            "p",
+            null,
+            "The map places a change inside the system and shows what sits next to it. ",
+            "A change that lands in one place, where the Files tab already answers that, ships without one."
+          )
+        )
+      ]);
+      return;
     }
+    const headNodes = new Map(map.head.nodes.map((n) => [n.id, n]));
+    const baseNodes = new Map((map.base?.nodes ?? []).map((n) => [n.id, n]));
+    const all = collect(map);
+    const edges = allEdges(map);
+    const route = routeIn(all, map.filesByNode);
+    const selected = state.params.get("node") ?? "";
+    const hasChildren = (id) => [...all.keys()].some((k) => parentOf(k) === id);
+    let level = selected && all.has(selected) ? hasChildren(selected) ? selected : parentOf(selected) : "";
     const canvas = h("div", { class: "map-canvas" });
     const side2 = h("div", { class: "map-side" });
     root.appendChild(h("div", { class: "map-layout" }, canvas, side2));
-    const draw = () => {
-      canvas.innerHTML = "";
-      const crumbs = h("div", { class: "crumbs" });
-      const parts = level ? level.split(".") : [];
-      crumbs.appendChild(
+    const openLevel = (id) => {
+      level = id;
+      draw();
+    };
+    const intro2 = () => {
+      if (explainer)
+        return h(
+          "div",
+          { class: "map-intro" },
+          h("h2", null, "The parts of the system"),
+          h(
+            "p",
+            null,
+            "The document carries depth on the parts it selected; this carries breadth over the",
+            " rest \u2014 what the parts are, what they own, and what they connect to at the pinned",
+            " commit. Open a part to see its files, its code and its neighbours."
+          ),
+          h(
+            "div",
+            { class: "map-route" },
+            h(
+              "button",
+              { class: "small", onclick: () => navigate("coverage") },
+              "What this explainer left out \u25B8"
+            )
+          )
+        );
+      const counts = [
+        [map.diff.added.length, "ok", "added"],
+        [map.diff.changed.length, "warn", "changed"],
+        [map.diff.removed.length, "del", "removed"]
+      ];
+      const marks = counts.filter(([n]) => n > 0);
+      return h(
+        "div",
+        { class: "map-intro" },
+        h("h2", null, "Where the change landed"),
         h(
-          "span",
-          {
-            onclick: () => {
-              level = "";
-              draw();
-            }
-          },
-          "System"
+          "p",
+          null,
+          "The Files tab has the lines. This has the parts of the system they landed in, and what",
+          " those parts connect to \u2014 the neighbours a diff never names. Marked parts are the change;",
+          " the rest is the context you need to judge it."
+        ),
+        h(
+          "div",
+          { class: "map-route" },
+          marks.length ? marks.map(([n, cls, word]) => h("span", { class: `badge ${cls}` }, `${n} ${word}`)) : h("span", { class: "muted" }, "This change touched no part of the map."),
+          route ? h(
+            "button",
+            {
+              class: "small",
+              onclick: () => navigate("map", { node: route.id })
+            },
+            `Start at ${route.label} \u203A`
+          ) : null,
+          map.base ? null : h(
+            "span",
+            { class: "muted" },
+            "No base map, so changed means touched by the diff and nothing reads as added or removed."
+          )
         )
       );
+    };
+    const crumbs = () => {
+      const el = h("div", { class: "crumbs" });
+      const parts = level ? level.split(".") : [];
+      el.appendChild(h("span", { onclick: () => openLevel("") }, "System"));
       parts.forEach((_, i) => {
         const id = parts.slice(0, i + 1).join(".");
-        crumbs.appendChild(document.createTextNode(" \u203A "));
-        crumbs.appendChild(
-          h(
-            "span",
-            {
-              onclick: () => {
-                level = id;
-                draw();
-              }
-            },
-            all.get(id)?.label ?? id
-          )
-        );
+        el.appendChild(document.createTextNode(" \u203A "));
+        el.appendChild(h("span", { onclick: () => openLevel(id) }, all.get(id)?.label ?? id));
       });
-      canvas.appendChild(crumbs);
-      const kids = childrenOf(level);
-      const legend = h(
+      return el;
+    };
+    const card = (n) => {
+      const inside = [...all.keys()].filter((k) => parentOf(k) === n.id).length;
+      const hidden = changedInside(all, n.id);
+      const files = map.filesByNode[n.id]?.length ?? 0;
+      return h(
         "div",
-        { class: "muted", style: { fontSize: "12px", marginBottom: "10px" } },
-        h("span", { class: "badge ok" }, `${map.diff.added.length} added`),
-        " ",
-        h("span", { class: "badge del" }, `${map.diff.removed.length} removed`),
-        " ",
-        h("span", { class: "badge warn" }, `${map.diff.changed.length} changed`),
-        map.base ? "" : "  (no base map: changed = touched by the diff)"
-      );
-      canvas.appendChild(legend);
-      const grid = h("div", { class: "map-grid" });
-      for (const n of kids) {
-        const nk = childrenOf(n.id).length;
-        const files = map.filesByNode[n.id]?.length ?? 0;
-        grid.appendChild(
-          h(
-            "div",
+        {
+          class: `map-node ${n.status} ${explainer || touched(all, n) ? "" : "quiet"} ${n.id === selected ? "selected" : ""}`,
+          onclick: () => navigate("map", { node: n.id }),
+          ondblclick: () => inside && openLevel(n.id)
+        },
+        n.status ? h("span", { class: `status badge ${statusClass(n.status)}` }, n.status) : null,
+        h("div", { class: "kind" }, n.kind),
+        h("div", { class: "label" }, n.label),
+        n.description ? h("div", { class: "desc" }, n.description) : null,
+        h(
+          "div",
+          { class: "meta" },
+          files ? h("span", { class: "warn-text" }, `${files} changed file${files > 1 ? "s" : ""}`) : null,
+          hidden ? h("span", { class: "warn-text" }, `${hidden} changed inside`) : null,
+          inside ? h(
+            "button",
             {
-              class: `map-node ${n.status} ${n.id === selected ? "selected" : ""}`,
-              onclick: () => {
-                navigate("map", { node: n.id });
-              },
-              ondblclick: () => {
-                if (nk) {
-                  level = n.id;
-                  draw();
-                }
+              class: "small drill",
+              onclick: (e) => {
+                e.stopPropagation();
+                openLevel(n.id);
               }
             },
-            n.status ? h(
-              "span",
-              {
-                class: `status badge ${n.status === "added" ? "ok" : n.status === "removed" ? "del" : "warn"}`
-              },
-              n.status
-            ) : null,
-            h("div", { class: "kind" }, n.kind),
-            h("div", { class: "label" }, n.label),
-            n.description ? h("div", { class: "desc" }, n.description) : null,
-            h(
-              "div",
-              { class: "children" },
-              nk ? `${nk} inside \xB7 dbl-click to open` : "",
-              nk && descendantsChanged(n.id) ? ` \xB7 ${descendantsChanged(n.id)} changed` : "",
-              files ? ` \xB7 ${files} changed file${files > 1 ? "s" : ""}` : ""
-            )
-          )
+            `Open ${inside} inside \u203A`
+          ) : null
+        )
+      );
+    };
+    const board = () => {
+      const kids = childrenOf(all, level, map.filesByNode);
+      if (!kids.length) return h("div", { class: "empty-state" }, "Nothing at this level.");
+      const hot = kids.filter((n) => touched(all, n));
+      const cold = kids.filter((n) => !touched(all, n));
+      const group = (title, items) => items.length ? h(
+        "div",
+        { class: "map-group" },
+        title ? h("h3", null, title) : null,
+        h("div", { class: "map-grid" }, items.map(card))
+      ) : null;
+      if (explainer) return group(null, kids) ?? h("div", null);
+      if (!hot.length)
+        return h(
+          "div",
+          null,
+          h("div", { class: "map-note muted" }, "Nothing here was touched. The change is elsewhere."),
+          group(null, cold)
         );
-      }
-      if (!kids.length)
-        grid.appendChild(h("div", { class: "empty-state" }, "Nothing at this level."));
-      canvas.appendChild(grid);
-      const here = new Set(kids.map((k) => k.id));
+      return h(
+        "div",
+        null,
+        group(cold.length ? "What the change touched" : null, hot),
+        group("Context \u2014 unchanged here", cold)
+      );
+    };
+    const links2 = () => {
+      const here = new Set(childrenOf(all, level, map.filesByNode).map((k) => k.id));
       const top = (id) => {
         let x = id;
         while (x && !here.has(x)) x = parentOf(x);
         return x;
       };
-      const shown = edges.filter((e) => here.has(top(e.from)) || here.has(top(e.to)));
-      if (shown.length) {
-        canvas.appendChild(
-          h(
+      const folded = [];
+      for (const e of edges) {
+        const from = top(e.from) || e.from;
+        const to = top(e.to) || e.to;
+        if (from === to) continue;
+        if (!here.has(from) && !here.has(to)) continue;
+        if (folded.some((x) => x.from === from && x.to === to)) continue;
+        folded.push({ from, to, ...e.label ? { label: e.label } : {} });
+      }
+      if (!folded.length) return null;
+      return h(
+        "div",
+        { class: "map-edges" },
+        h("h3", null, "What connects to what here"),
+        h(
+          "div",
+          { class: "muted map-note" },
+          explainer ? "A link is a dependency the parts have on each other, drawn as the author declared it." : "A link touching a changed part is where the two sides can fall out of step."
+        ),
+        rankEdges(folded, all).map(
+          ({ edge, touchesChange }) => h(
             "div",
-            { class: "map-edges" },
-            h("div", { class: "muted", style: { marginBottom: "4px" } }, "Relationships"),
-            shown.map(
-              (e) => h(
-                "div",
-                { class: "edge" },
-                h(
-                  "b",
-                  { onclick: () => navigate("map", { node: e.from }) },
-                  all.get(e.from)?.label ?? e.from
-                ),
-                "\u2192",
-                h(
-                  "b",
-                  { onclick: () => navigate("map", { node: e.to }) },
-                  all.get(e.to)?.label ?? e.to
-                ),
-                h("span", { class: "muted" }, e.label ?? "")
-              )
-            )
+            { class: `edge ${touchesChange ? "hot" : ""}` },
+            h(
+              "b",
+              { onclick: () => navigate("map", { node: edge.from }) },
+              all.get(edge.from)?.label ?? edge.from
+            ),
+            "\u2192",
+            h(
+              "b",
+              { onclick: () => navigate("map", { node: edge.to }) },
+              all.get(edge.to)?.label ?? edge.to
+            ),
+            h("span", { class: "muted" }, edge.label ?? "")
           )
-        );
-      }
+        )
+      );
+    };
+    const draw = () => {
+      canvas.innerHTML = "";
+      append(canvas, [intro2(), crumbs(), board(), links2()]);
       drawSide();
     };
     const drawSide = () => {
@@ -1969,7 +2195,7 @@
           h(
             "div",
             { class: "muted" },
-            "Select a node to see its files, code and relationships. Double-click to drill in."
+            explainer ? "Pick a part to see what it owns, the code behind it, and what it connects to." : "Pick a part to see what changed in it, the code behind it, and what it connects to."
           )
         );
         return;
@@ -1977,19 +2203,14 @@
       const anchor = n.anchor ? state.data?.document?.anchors[n.anchor] : null;
       const files = map.filesByNode[n.id] ?? [];
       const threads = threadsFor((t) => t.type === "map" && t.node === n.id);
+      const neighbours = neighboursOf(map, n.id);
       append(side2, [
         h(
           "div",
           { class: "kind muted", style: { fontSize: "11px", textTransform: "uppercase" } },
           n.kind,
           " ",
-          n.status ? h(
-            "span",
-            {
-              class: `badge ${n.status === "added" ? "ok" : n.status === "removed" ? "del" : "warn"}`
-            },
-            n.status
-          ) : ""
+          n.status ? h("span", { class: `badge ${statusClass(n.status)}` }, n.status) : ""
         ),
         h("h3", { style: { margin: "2px 0 6px" } }, n.label),
         h("div", { class: "mono muted", style: { fontSize: "11px" } }, n.id),
@@ -2015,6 +2236,31 @@
             (f) => h("span", { class: "file", onclick: () => navigate("files", { path: f }) }, f)
           )
         ) : null,
+        neighbours.length ? h(
+          "div",
+          { class: "neighbours", style: { marginTop: "12px" } },
+          h("b", null, "Next to it"),
+          h(
+            "div",
+            { class: "muted", style: { fontSize: "11px" } },
+            "\u2192 this reaches \xB7 \u2190 reaches this"
+          ),
+          neighbours.map((x) => {
+            const other = all.get(x.other);
+            return h(
+              "div",
+              { class: "neighbour" },
+              h("span", { class: "mono muted" }, x.dir === "out" ? "\u2192" : "\u2190"),
+              h(
+                "span",
+                { class: "nb", onclick: () => navigate("map", { node: x.other }) },
+                other?.label ?? x.other
+              ),
+              other?.status ? h("span", { class: `badge ${statusClass(other.status)}` }, other.status) : null,
+              x.label ? h("span", { class: "muted" }, x.label) : null
+            );
+          })
+        ) : null,
         h(
           "div",
           { style: { marginTop: "12px" } },
@@ -2055,30 +2301,300 @@
     draw();
   }
 
+  // src/ui/views/coverage.ts
+  init_dom();
+  var SHOWN = 8;
+  function renderCoverage(root) {
+    const cov = state.data?.coverage;
+    if (!cov) {
+      append(root, [
+        h(
+          "div",
+          { class: "empty-state" },
+          h("p", null, "No coverage recorded for this revision."),
+          h("p", null, "Coverage is derived when an explainer is published.")
+        )
+      ]);
+      return;
+    }
+    append(root, [intro(cov), clusters(cov), links(cov), sharedNames(cov), unread(cov)]);
+  }
+  function bar(cov) {
+    const total = Math.max(cov.files.total, 1);
+    const seg = (n, cls, label2) => n ? h("span", {
+      class: `cov-seg ${cls}`,
+      style: { width: `${n / total * 100}%` },
+      title: `${n} ${label2}`
+    }) : null;
+    return h(
+      "div",
+      { class: "cov-bar" },
+      seg(cov.states.explained, "explained", "anchored in the document"),
+      seg(cov.states.placed, "placed", "placed on the map only"),
+      seg(cov.states.uncovered, "uncovered", "not examined")
+    );
+  }
+  function intro(cov) {
+    const key = [
+      [cov.states.explained, "explained", "anchored in the document"],
+      [cov.states.placed, "placed", "placed on the map only"],
+      [cov.states.uncovered, "uncovered", "not examined"]
+    ];
+    return h(
+      "div",
+      { class: "cov-intro" },
+      h("h2", null, "What this explainer covers"),
+      h(
+        "p",
+        null,
+        "A codebase does not fit in a short document, so this one selects. Here is the",
+        " selection, counted rather than claimed: every file in scope at the pinned commit,",
+        " and which of the three states it is in."
+      ),
+      bar(cov),
+      h(
+        "div",
+        { class: "cov-key" },
+        key.map(
+          ([n, cls, label2]) => h("span", { class: "cov-key-item" }, h("i", { class: `cov-dot ${cls}` }), `${n} ${label2}`)
+        )
+      ),
+      h(
+        "div",
+        { class: "cov-facts" },
+        fact("scope", cov.scope === "**" ? "the whole repository" : cov.scope),
+        fact("commit", cov.commit.slice(0, 12)),
+        fact("files in scope", String(cov.files.total)),
+        fact("read by the code graph", `${cov.files.inGraph} of ${cov.files.total}`),
+        cov.unresolved ? fact("references the graph could not place", String(cov.unresolved)) : null,
+        cov.truncated ? fact("file list capped", "the graph is partial; treat every count as a floor") : null
+      )
+    );
+  }
+  function fact(label2, value) {
+    return h("div", { class: "cov-fact" }, h("b", null, value), h("span", { class: "muted" }, label2));
+  }
+  function fileList(files, cls) {
+    if (!files.length) return null;
+    const wrap = h("div", { class: `cov-files ${cls}` });
+    const chip = (f) => h("code", { class: "cov-file", title: f }, f.split("/").slice(-2).join("/"));
+    files.slice(0, SHOWN).forEach((f) => wrap.appendChild(chip(f)));
+    const rest = files.slice(SHOWN);
+    if (rest.length) {
+      const more = h(
+        "button",
+        {
+          class: "small ghost",
+          onclick: () => more.replaceWith(...rest.map(chip))
+        },
+        `show ${rest.length} more`
+      );
+      wrap.appendChild(more);
+    }
+    return wrap;
+  }
+  function clusterRow(c) {
+    const anchors = state.data?.document?.anchors ?? {};
+    const firstAnchor = c.explained.length ? Object.values(anchors).find((a) => a.peek && c.explained.includes(a.peek.file)) : void 0;
+    return h(
+      "div",
+      { class: "cov-cluster" },
+      h(
+        "div",
+        { class: "cov-cluster-head" },
+        h("code", { class: "cov-label" }, c.label),
+        h("span", { class: "muted" }, `${c.files} files \xB7 ${c.symbols} symbols`),
+        h("span", { class: "spacer" }),
+        c.explained.length ? h("span", { class: "badge cov-b-explained" }, `${c.explained.length} anchored`) : null,
+        c.placed.length ? h("span", { class: "badge cov-b-placed" }, `${c.placed.length} placed`) : null,
+        c.uncovered.length ? h("span", { class: "badge cov-b-uncovered" }, `${c.uncovered.length} not examined`) : null,
+        firstAnchor ? h("button", { class: "small", onclick: () => openAnchorPeek(firstAnchor) }, "Peek code \u25B8") : null
+      ),
+      c.hubs.length ? h(
+        "div",
+        { class: "muted cov-hubs" },
+        "most referenced here: ",
+        c.hubs.map((n) => h("code", null, n))
+      ) : null,
+      fileList(c.uncovered, "uncovered")
+    );
+  }
+  function clusters(cov) {
+    return h(
+      "div",
+      { class: "cov-section" },
+      h("h3", null, "By part of the system"),
+      h(
+        "p",
+        { class: "muted" },
+        "Files clustered by how they reference each other at the pinned commit, largest first.",
+        " The files listed under a part are the ones this explainer never examined."
+      ),
+      cov.clusters.map(clusterRow)
+    );
+  }
+  function links(cov) {
+    if (!cov.links.length) return null;
+    return h(
+      "div",
+      { class: "cov-section" },
+      h("h3", null, "What reaches what"),
+      h(
+        "p",
+        { class: "muted" },
+        "References that cross from one part to another, with how many there are.",
+        " A pair marked both ways references each other in both directions."
+      ),
+      h(
+        "div",
+        { class: "cov-links" },
+        cov.links.slice(0, 24).map(
+          (l) => h(
+            "div",
+            { class: "cov-link" },
+            h("code", null, label(cov, l.from)),
+            h("span", { class: "muted" }, "\u2192"),
+            h("code", null, label(cov, l.to)),
+            h("span", { class: "muted mono" }, `${l.references} refs`),
+            l.bothWays ? h("span", { class: "badge" }, "both ways") : null
+          )
+        )
+      )
+    );
+  }
+  function label(cov, id) {
+    return cov.clusters.find((c) => c.id === id)?.label ?? id;
+  }
+  function sharedNames(cov) {
+    if (!cov.sharedNames.length) return null;
+    return h(
+      "div",
+      { class: "cov-section" },
+      h("h3", null, "Names defined in more than one part"),
+      h(
+        "p",
+        { class: "muted" },
+        `${cov.sharedNamesTotal} name${cov.sharedNamesTotal === 1 ? " at this commit is" : "s at this commit are"}`,
+        " defined in two or more parts. What that means here - the same idea in two places,",
+        " two different ideas sharing a word, or a name too common to mean anything - is",
+        " what the code says and this page does not."
+      ),
+      h(
+        "div",
+        { class: "cov-shared" },
+        cov.sharedNames.map(
+          (n) => h(
+            "div",
+            { class: "cov-link" },
+            h("code", null, n.name),
+            h("span", { class: "muted mono" }, `${n.clusters.length} parts`),
+            h("span", { class: "muted" }, n.files.join(" \xB7 "))
+          )
+        )
+      )
+    );
+  }
+  function unread(cov) {
+    if (!cov.outsideGraph.length && !cov.files.capped && !cov.owners.length) return null;
+    return h(
+      "div",
+      { class: "cov-section" },
+      h("h3", null, "Outside the code graph"),
+      cov.outsideGraph.length ? h(
+        "div",
+        null,
+        h(
+          "p",
+          { class: "muted" },
+          `${cov.files.outsideGraph} files in scope are not in a language the graph reads,`,
+          " so they are in no part above. They are absent from the structure, not empty."
+        ),
+        h(
+          "div",
+          { class: "cov-links" },
+          cov.outsideGraph.slice(0, 16).map(
+            (e) => h(
+              "div",
+              { class: "cov-link" },
+              h("code", null, `.${e.extension}`),
+              h("span", { class: "muted mono" }, `${e.files} files`)
+            )
+          )
+        ),
+        fileList(
+          cov.unclustered.filter((u) => u.state === "uncovered" && u.reason === "outsideGraph").map((u) => u.file),
+          "uncovered"
+        )
+      ) : null,
+      cov.files.capped ? h(
+        "div",
+        null,
+        h(
+          "p",
+          { class: "muted" },
+          `${cov.files.capped} files in scope are in a language the graph reads, but the`,
+          " repo-wide file cap was hit before this scope was read, so they were never parsed."
+        ),
+        fileList(
+          cov.unclustered.filter((u) => u.state === "uncovered" && u.reason === "capped").map((u) => u.file),
+          "uncovered"
+        )
+      ) : null,
+      cov.owners.length ? h(
+        "div",
+        null,
+        h("h4", null, "What each map node owns"),
+        h(
+          "p",
+          { class: "muted" },
+          "A file counts as placed because a map node's globs match it. The globs are here",
+          " so a broad one is visible rather than silently inflating the count."
+        ),
+        h(
+          "div",
+          { class: "cov-links" },
+          cov.owners.map(
+            (o) => h(
+              "div",
+              {
+                class: "cov-link",
+                onclick: () => navigate("map", { node: o.node }),
+                style: { cursor: "pointer" }
+              },
+              h("code", null, o.node),
+              h("span", { class: "muted" }, o.globs.join(" ")),
+              h("span", { class: "muted mono" }, `${o.files} files`)
+            )
+          )
+        )
+      ) : null
+    );
+  }
+
   // src/ui/app.ts
   var app = document.getElementById("app");
   async function home() {
     clear(app);
     const reviews = await api.reviews();
-    const el = h("div", { class: "home" }, h("h2", null, "Reviews"));
+    const el = h("div", { class: "home" }, h("h2", null, "Reviews and explainers"));
     const active = reviews.filter((r) => !r.dismissed);
     const dismissed = reviews.filter((r) => r.dismissed);
     const item = (r) => h(
       "div",
       { class: "item", onclick: () => location.href = `/review/${r.id}` },
       h("span", { class: "t" }, r.title),
-      h("span", { class: `badge ${statusClass(r.status)}` }, r.status),
+      h("span", { class: `badge ${statusClass2(r.status)}` }, r.status),
       r.openThreads ? h("span", { class: "badge accent" }, `${r.openThreads} open`) : null,
-      h(
-        "span",
-        { class: "muted mono", style: { fontSize: "12px" } },
-        r.binding.kind === "pr" ? `PR #${r.binding.name}` : r.binding.name
-      ),
+      h("span", { class: "muted mono", style: { fontSize: "12px" } }, bindingLabel(r)),
       h("span", { class: "muted", style: { fontSize: "12px" } }, timeAgo(r.updatedAt))
     );
     if (!active.length)
       el.appendChild(
-        h("div", { class: "empty-state" }, "No reviews. Ask your agent to scaffold and publish one.")
+        h(
+          "div",
+          { class: "empty-state" },
+          "Nothing published yet. Ask your agent for a review of a change, or an explainer of the codebase."
+        )
       );
     active.forEach((r) => el.appendChild(item(r)));
     if (dismissed.length) {
@@ -2087,7 +2603,12 @@
     }
     app.appendChild(el);
   }
-  function statusClass(s) {
+  function bindingLabel(r) {
+    if (r.binding.kind === "pr") return `PR #${r.binding.name}`;
+    if (r.binding.kind === "codebase") return r.binding.name === "**" ? "codebase" : r.binding.name;
+    return r.binding.name;
+  }
+  function statusClass2(s) {
     return s === "accepted" ? "ok" : s === "awaiting-agent-updates" ? "warn" : s === "closed" ? "del" : s === "awaiting-review" ? "accent" : "";
   }
   var center;
@@ -2126,12 +2647,16 @@
     const r = d.review;
     const pending = d.threads.filter((t) => !t.submitted).length;
     const open = d.threads.filter((t) => t.status === "open").length;
-    const tabs = [
-      ["review", "Review"],
-      ["commits", "Commits"],
-      ["files", `Files${d.changes.length ? ` (${d.changes.length})` : ""}`],
-      ["map", "Map"]
-    ];
+    const explainer = kind() === "explainer";
+    const labels = {
+      review: explainer ? "Explainer" : "Review",
+      commits: "Commits",
+      files: `Files${d.changes.length ? ` (${d.changes.length})` : ""}`,
+      map: "Map",
+      coverage: "Coverage"
+    };
+    const current2 = view();
+    const tabs = VIEWS[kind()].map((v) => [v, labels[v]]);
     const revSel = h("select", {
       class: "small",
       style: { font: "inherit", fontSize: "12px" },
@@ -2153,7 +2678,7 @@
     const identity = h("div", { class: "bar-row bar-identity" }, [
       h("a", { href: "/", class: "brand", title: "All reviews" }, "thurview"),
       h("span", { class: "title", title: r.title }, r.title),
-      h("span", { class: `badge ${statusClass(r.status)}` }, r.status),
+      h("span", { class: `badge ${statusClass2(r.status)}` }, r.status),
       r.revision > 1 ? revSel : h("span", { class: "badge bar-rev" }, `rev ${r.revision}`),
       h(
         "span",
@@ -2162,7 +2687,7 @@
           style: { fontSize: "12px" },
           title: `${r.pins.base} \u2192 ${r.pins.head}`
         },
-        r.binding.kind === "pr" ? `PR #${r.binding.name}` : r.binding.name
+        bindingLabel(r)
       )
     ]);
     const actions = h("div", { class: "bar-row bar-actions" }, [
@@ -2170,7 +2695,7 @@
         "div",
         { class: "tabs" },
         tabs.map(
-          ([v, label]) => h("button", { class: v === state.view ? "active" : "", onclick: () => navigate(v) }, label)
+          ([v, label2]) => h("button", { class: v === current2 ? "active" : "", onclick: () => navigate(v) }, label2)
         )
       ),
       h("span", { class: "spacer" }),
@@ -2255,7 +2780,7 @@
       h(
         "div",
         { class: "item muted" },
-        `base ${r.pins.base.slice(0, 12)} \xB7 head ${r.pins.head.slice(0, 12)}`
+        kind() === "explainer" ? `commit ${r.pins.head.slice(0, 12)}` : `base ${r.pins.base.slice(0, 12)} \xB7 head ${r.pins.head.slice(0, 12)}`
       ),
       h(
         "div",
@@ -2268,7 +2793,7 @@
   function renderCenter() {
     const scroll = center.scrollTop;
     clear(center);
-    switch (state.view) {
+    switch (view()) {
       case "review":
         renderReview(center);
         break;
@@ -2281,6 +2806,9 @@
       case "map":
         renderMap(center);
         break;
+      case "coverage":
+        renderCoverage(center);
+        break;
     }
     center.scrollTop = scroll;
   }