thurview 0.5.1 → 0.7.0

package/dist/ui/app.js

@@ -970,12 +970,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 +996,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,6 +1067,7 @@
       );
       return;
     }
+    root.appendChild(interfaceDelta(doc.interfaces));
     const layout = h("div", { class: "doc-layout" });
     const toc = h(
       "nav",
@@ -1138,6 +1139,102 @@
     );
     docEl.querySelectorAll(".block.heading").forEach((el) => io.observe(el));
   }
+  var DELTA_BLOCK = "interface-delta";
+  var DELTA_SHOWN = 12;
+  var CHANGE_CLASS = {
+    removed: "del",
+    changed: "warn",
+    added: "ok"
+  };
+  function interfaceDelta(delta) {
+    const wrap = h("div", { class: "block ifd", "data-block": DELTA_BLOCK });
+    const threads = threadsFor((t) => t.type === "document" && t.blockId === DELTA_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 the interface delta",
+          onclick: (e) => {
+            if (state.viewingRevision !== null) return;
+            popover(commentPopover({ type: "document", blockId: DELTA_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";
+    });
+    const counts = delta ? ["removed", "changed", "added"].map((c) => [c, delta.entries.filter((e) => e.change === c).length]).filter(([, n]) => n > 0) : [];
+    wrap.appendChild(
+      h(
+        "div",
+        { class: "ifd-head" },
+        h("span", { class: "t" }, "Interface delta"),
+        counts.map(([c, n]) => h("span", { class: `badge ${CHANGE_CLASS[c]}` }, `${n} ${c}`)),
+        h("span", { class: "spacer" }),
+        toggle,
+        actions
+      )
+    );
+    body.appendChild(
+      h(
+        "p",
+        { class: "ifd-verdict" },
+        delta ? delta.verdict : "Unavailable: the code graph could not be built for these commits."
+      )
+    );
+    const entries = delta?.entries ?? [];
+    const rest = entries.slice(DELTA_SHOWN);
+    for (const e of entries.slice(0, DELTA_SHOWN)) body.appendChild(interfaceRow(e));
+    if (rest.length) {
+      const more = h(
+        "button",
+        {
+          class: "small ghost",
+          onclick: () => {
+            more.replaceWith(...rest.map(interfaceRow));
+          }
+        },
+        `show ${rest.length} more`
+      );
+      body.appendChild(more);
+    }
+    wrap.appendChild(body);
+    if (threads.length)
+      wrap.appendChild(h("div", { class: "thread-pins" }, threads.map(threadPinRow)));
+    return wrap;
+  }
+  function interfaceRow(e) {
+    return h(
+      "div",
+      {
+        class: `ifd-entry ifd-${e.change}`,
+        title: "Open in Files",
+        onclick: () => navigate("files", { path: e.file, line: e.line, side: e.graph })
+      },
+      h("span", { class: `badge ${CHANGE_CLASS[e.change]}` }, e.change),
+      h(
+        "div",
+        { class: "ifd-what" },
+        e.was ? h("div", { class: "ifd-was" }, h("code", null, e.was)) : null,
+        h("code", { class: "ifd-name" }, e.name),
+        e.capability ? h("div", { class: "ifd-cap" }, e.capability) : null
+      ),
+      h("span", { class: "ifd-where mono" }, `${e.file}:${e.line}`)
+    );
+  }
   function scrollToBlock(id) {
     const el = document.querySelector(`[data-block="${id}"]`);
     if (!el) return;
@@ -1700,22 +1797,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, {
@@ -1723,145 +1810,262 @@
         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;
+    if (!map || !map.head.nodes.length) {
+      append(root, [
+        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 intro = () => {
+      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} ${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 (!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 links = () => {
+      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" },
+          "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, [intro(), crumbs(), board(), links()]);
       drawSide();
     };
     const drawSide = () => {
@@ -1872,7 +2076,7 @@
           h(
             "div",
             { class: "muted" },
-            "Select a node to see its files, code and relationships. Double-click to drill in."
+            "Pick a part to see what changed in it, the code behind it, and what it connects to."
           )
         );
         return;
@@ -1880,19 +2084,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),
@@ -1918,6 +2117,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" } },
@@ -1970,7 +2194,7 @@
       "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",
@@ -1990,7 +2214,7 @@
     }
     app.appendChild(el);
   }
-  function statusClass(s) {
+  function statusClass2(s) {
     return s === "accepted" ? "ok" : s === "awaiting-agent-updates" ? "warn" : s === "closed" ? "del" : s === "awaiting-review" ? "accent" : "";
   }
   var center;
@@ -2056,7 +2280,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",