thurview 0.17.1 → 0.18.0

package/dist/ui/app.js

@@ -980,13 +980,48 @@
     if (a) openAnchorPeek(a);
   }
   function sequenceDiagram(b) {
-    const colW = 170;
-    const top = 44;
-    const rowH = 34;
-    const n = b.actors.length;
-    const width = Math.max(colW * n, 320);
-    const height = top + rowH * (b.messages.length + 1) + 10;
+    const charW = 12 * 0.605;
+    const lineH = 15;
+    const wrap = (text, room) => {
+      const max = Math.max(8, Math.floor(room / charW));
+      const lines = [];
+      for (const word of text.split(" ")) {
+        const last = lines.length - 1;
+        if (last >= 0 && lines[last].length + 1 + word.length <= max) lines[last] += ` ${word}`;
+        else lines.push(word);
+      }
+      return lines;
+    };
+    const widest = (lines) => Math.max(...lines.map((l) => l.length)) * charW;
+    const names = b.actors.map((a) => wrap(a.label, 20 * charW));
+    const nameLines = Math.max(...names.map((l) => l.length));
+    const boxH2 = 13 + nameLines * lineH;
+    const top = 6 + boxH2 + 10;
+    const boxes = names.map((l) => Math.max(120, widest(l) + 20));
+    const cols = boxes.map((w) => Math.max(150, w + 16));
+    const centres = cols.map((w, i) => cols.slice(0, i).reduce((s, c) => s + c, 0) + w / 2);
+    const x = (id) => centres[b.actors.findIndex((a) => a.id === id)];
+    let y = top;
+    const rows = b.messages.map((m2, i) => {
+      const x1 = x(m2.from);
+      const x2 = x(m2.to);
+      const self = x1 === x2;
+      const start = self ? x1 + 36 : Math.min(x1, x2) + 8;
+      const lines = wrap(`${i + 1}. ${m2.label}`, Math.max(180, Math.abs(x2 - x1) - 16));
+      y += 20 + lines.length * lineH;
+      return { x1, x2, self, start, lines, y, end: start + widest(lines) };
+    });
+    const width = Math.ceil(
+      Math.max(
+        320,
+        cols.reduce((s, c) => s + c, 0),
+        ...rows.map((r) => r.end + 12)
+      )
+    );
+    const height = y + 24;
     const el = svg("svg", { viewBox: `0 0 ${width} ${height}`, class: "seq" });
+    el.style.maxWidth = `${width}px`;
+    el.style.minWidth = `${Math.ceil(width * 0.9)}px`;
     el.appendChild(
       svg(
         "defs",
@@ -1006,39 +1041,35 @@
         )
       )
     );
-    const x = (id) => b.actors.findIndex((a) => a.id === id) * colW + colW / 2;
-    b.actors.forEach((a, i) => {
-      const cx = i * colW + colW / 2;
+    const tspans = (at, baseline, text) => text.map((l, i) => svg("tspan", { x: at, y: baseline - (text.length - 1 - i) * lineH }, l));
+    b.actors.forEach((_, i) => {
+      const cx = centres[i];
+      const w = boxes[i];
+      const name = names[i];
       const g = svg("g", { class: "actor" });
-      g.appendChild(svg("rect", { x: cx - 70, y: 6, width: 140, height: 28, rx: 6 }));
-      g.appendChild(svg("text", { x: cx, y: 25, "text-anchor": "middle" }, a.label));
-      g.appendChild(svg("line", { class: "life", x1: cx, y1: 34, x2: cx, y2: height - 6 }));
+      g.appendChild(svg("rect", { x: cx - w / 2, y: 6, width: w, height: boxH2, rx: 6 }));
+      const baseline = 6 + (boxH2 + name.length * lineH) / 2 - 4;
+      g.appendChild(svg("text", { "text-anchor": "middle" }, ...tspans(cx, baseline, name)));
+      g.appendChild(svg("line", { class: "life", x1: cx, y1: 6 + boxH2, x2: cx, y2: height - 6 }));
       el.appendChild(g);
     });
     b.messages.forEach((m2, i) => {
-      const y = top + rowH * (i + 1);
-      const x1 = x(m2.from);
-      const x2 = x(m2.to);
+      const { x1, x2, self, start, y: y2 } = rows[i];
       const g = svg("g", { class: "msg" });
-      const self = x1 === x2;
       if (self) {
         g.appendChild(
           svg("path", {
-            d: `M${x1},${y - 10} h30 v20 h-30`,
+            d: `M${x1},${y2 - 10} h30 v20 h-30`,
             fill: "none",
             stroke: "currentColor",
             "marker-end": "url(#arr)"
           })
         );
       } else {
-        g.appendChild(svg("line", { x1, y1: y, x2: x2 + (x2 > x1 ? -4 : 4), y2: y }));
+        g.appendChild(svg("line", { x1, y1: y2, x2: x2 + (x2 > x1 ? -4 : 4), y2 }));
       }
-      const label2 = svg(
-        "text",
-        { x: self ? x1 + 36 : (x1 + x2) / 2, y: y - 6, "text-anchor": self ? "start" : "middle" },
-        `${i + 1}. ${m2.label}`
-      );
-      label2.addEventListener("click", (e) => {
+      const label = svg("text", {}, ...tspans(start, y2 - 6, rows[i].lines));
+      const open = (at) => {
         if (m2.anchor) openAnchor(m2.anchor);
         else if (m2.code)
           popover(
@@ -1047,13 +1078,28 @@
               { class: "def-popover" },
               h("pre", { style: { margin: "0", border: "none" } }, m2.code.text)
             ),
-            { x: e.pageX, y: e.pageY + 8 }
+            at
           );
+      };
+      label.addEventListener("click", (e) => open({ x: e.pageX, y: e.pageY + 8 }));
+      label.setAttribute("role", "button");
+      label.setAttribute("tabindex", "0");
+      label.addEventListener("keydown", (e) => {
+        const k = e.key;
+        if (k !== "Enter" && k !== " ") return;
+        e.preventDefault();
+        const r = label.getBoundingClientRect();
+        open({ x: r.left + window.scrollX, y: r.bottom + window.scrollY + 8 });
       });
-      g.appendChild(label2);
+      g.appendChild(label);
       el.appendChild(g);
     });
-    return h("div", { class: "diagram" }, h("div", { class: "dhead" }, b.label), el);
+    return h(
+      "div",
+      { class: "diagram" },
+      h("div", { class: "dhead" }, b.label),
+      h("div", { class: "seq-scroll" }, el)
+    );
   }
   function callstackDiff(b, doc) {
     const rows = b.rows.map((r, i) => {
@@ -1209,11 +1255,11 @@
         )
       )
     );
-    for (const { edge, d, back, label: label2 } of edges) {
+    for (const { edge, d, back, label } of edges) {
       const g = svg("g", { class: back ? "edge back" : "edge" });
       g.appendChild(svg("path", { d, fill: "none", "marker-end": "url(#flow-arr)" }));
       if (edge.case)
-        g.appendChild(svg("text", { x: label2.x, y: label2.y, "text-anchor": label2.at }, edge.case));
+        g.appendChild(svg("text", { x: label.x, y: label.y, "text-anchor": label.at }, edge.case));
       el.appendChild(g);
     }
     for (const s of b.steps) {
@@ -1408,7 +1454,7 @@
       h(
         "p",
         { class: "ifd-verdict" },
-        delta ? delta.verdict : design ? "Unavailable: this revision declared no proposal." : "Unavailable: the code graph could not be built for these commits."
+        delta ? delta.verdict : design ? "Unavailable: this revision declared no proposal." : "Unavailable: this revision recorded no interface delta."
       )
     );
     const entries = delta?.entries ?? [];
@@ -1913,7 +1959,7 @@
   }
   function gapRow(d, from, to, colspan, onExpand) {
     if (to < from) return null;
-    const count = to - from + 1;
+    const count2 = to - from + 1;
     return h(
       "tr",
       { class: "gap" },
@@ -1933,7 +1979,7 @@
             );
           }
         },
-        `\u22EF ${count} unchanged line${count > 1 ? "s" : ""}`
+        `\u22EF ${count2} unchanged line${count2 > 1 ? "s" : ""}`
       )
     );
   }
@@ -2055,9 +2101,9 @@
     let prevEnd = 0;
     const gapBoth = (from, to) => {
       if (to < from) return;
-      const count = to - from + 1;
-      const lg = h("tr", { class: "gap" }, h("td", { colspan: 2 }, `\u22EF ${count} unchanged`));
-      const rg = h("tr", { class: "gap" }, h("td", { colspan: 2 }, `\u22EF ${count} unchanged`));
+      const count2 = to - from + 1;
+      const lg = h("tr", { class: "gap" }, h("td", { colspan: 2 }, `\u22EF ${count2} unchanged`));
+      const rg = h("tr", { class: "gap" }, h("td", { colspan: 2 }, `\u22EF ${count2} unchanged`));
       const expand = async () => {
         const f = await api.file(state.id, d.path, "head", from, to);
         const off = gapOffset(d, from) ?? 0;
@@ -2430,7 +2476,7 @@
         group(design ? "Context \u2014 untouched by the design" : "Context \u2014 unchanged here", cold)
       );
     };
-    const links2 = () => {
+    const links = () => {
       const here = new Set(childrenOf(all, level, map.filesByNode).map((k) => k.id));
       const top = (id) => {
         let x = id;
@@ -2478,7 +2524,7 @@
     };
     const draw = () => {
       canvas.innerHTML = "";
-      append(canvas, [intro2(), crumbs(), board(), links2()]);
+      append(canvas, [intro2(), crumbs(), board(), links()]);
       drawSide();
     };
     const drawSide = () => {
@@ -2598,6 +2644,12 @@
   // src/ui/views/coverage.ts
   init_dom();
   var SHOWN = 8;
+  var LABELS = [
+    ["explained", "anchored in the document"],
+    ["placed", "placed on the map only"],
+    ["searched", "matched by a recorded search only"],
+    ["uncovered", "not examined"]
+  ];
   function renderCoverage(root) {
     const cov = state.data?.coverage;
     if (!cov) {
@@ -2611,29 +2663,23 @@
       ]);
       return;
     }
-    append(root, [intro(cov), clusters(cov), links(cov), sharedNames(cov), unread(cov)]);
+    append(root, [intro(cov), searches(cov), clusters(cov), owners(cov)]);
   }
+  var count = (cov, s) => cov.states[s] ?? 0;
   function bar(cov) {
     const total = Math.max(cov.files.total, 1);
-    const seg = (n, cls, label2) => n ? h("span", {
+    const seg = (n, cls, label) => n ? h("span", {
       class: `cov-seg ${cls}`,
       style: { width: `${n / total * 100}%` },
-      title: `${n} ${label2}`
+      title: `${n} ${label}`
     }) : 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")
+      LABELS.map(([s, label]) => seg(count(cov, s), s, label))
     );
   }
   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" },
@@ -2643,14 +2689,19 @@
         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."
+        " and which of the four 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}`)
+        LABELS.map(
+          ([s, label]) => h(
+            "span",
+            { class: "cov-key-item" },
+            h("i", { class: `cov-dot ${s}` }),
+            `${count(cov, s)} ${label}`
+          )
         )
       ),
       h(
@@ -2658,15 +2709,12 @@
         { 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
+        fact("files in scope", String(cov.files.total))
       )
     );
   }
-  function fact(label2, value) {
-    return h("div", { class: "cov-fact" }, h("b", null, value), h("span", { class: "muted" }, label2));
+  function fact(label, value) {
+    return h("div", { class: "cov-fact" }, h("b", null, value), h("span", { class: "muted" }, label));
   }
   function fileList(files, cls) {
     if (!files.length) return null;
@@ -2687,9 +2735,49 @@
     }
     return wrap;
   }
+  function command(cov, s) {
+    const quote = (v) => `'${v.replace(/'/g, `'\\''`)}'`;
+    const paths = s.paths.map((p) => ` ${quote(p)}`).join("");
+    return `git grep -I -n -E -e ${quote(s.pattern)} ${cov.commit.slice(0, 12)} --${paths}`;
+  }
+  function searches(cov) {
+    const list = cov.searches ?? [];
+    if (!list.length) return null;
+    return h(
+      "div",
+      { class: "cov-section" },
+      h("h3", null, "What the agent searched"),
+      h(
+        "p",
+        { class: "muted" },
+        "Each search the agent recorded, re-run at the pinned commit. A search that matched",
+        " nothing is listed too: that zero is what a claim like \u201Cnothing else calls it\u201D rests on."
+      ),
+      h(
+        "div",
+        { class: "cov-links" },
+        list.map(
+          (s) => h(
+            "div",
+            { class: "cov-link" },
+            h("code", null, s.key),
+            s.why ? h("span", null, s.why) : null,
+            h(
+              "span",
+              { class: "muted mono" },
+              `${s.hits} line${s.hits === 1 ? "" : "s"} in ${s.files.length} file${s.files.length === 1 ? "" : "s"}`
+            ),
+            h("code", { class: "muted" }, command(cov, s)),
+            fileList(s.files, "searched")
+          )
+        )
+      )
+    );
+  }
   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;
+    const badge = (files, cls, label) => files?.length ? h("span", { class: `badge cov-b-${cls}` }, `${files.length} ${label}`) : null;
     return h(
       "div",
       { class: "cov-cluster" },
@@ -2697,19 +2785,14 @@
         "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: "muted" }, `${c.files} files`),
         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,
+        badge(c.explained, "explained", "anchored"),
+        badge(c.placed, "placed", "placed"),
+        badge(c.searched, "searched", "searched"),
+        badge(c.uncovered, "uncovered", "not examined"),
         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")
     );
   }
@@ -2717,153 +2800,47 @@
     return h(
       "div",
       { class: "cov-section" },
-      h("h3", null, "By part of the system"),
+      h("h3", null, "By directory"),
       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."
+        "The files in scope by the directory they sit in, largest first.",
+        " The files listed under a directory are the ones nothing in this explainer reached."
       ),
       cov.clusters.map(clusterRow)
     );
   }
-  function links(cov) {
-    if (!cov.links.length) return null;
+  function owners(cov) {
+    if (!cov.owners.length) return null;
     return h(
       "div",
       { class: "cov-section" },
-      h("h3", null, "What reaches what"),
+      h("h3", null, "What each map node owns"),
       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."
+        "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.links.slice(0, 24).map(
-          (l) => h(
+        cov.owners.map(
+          (o) => 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 "))
+            {
+              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`)
           )
         )
       )
     );
   }
-  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");
@@ -3042,7 +3019,7 @@
         "div",
         { class: "tabs" },
         tabs.map(
-          ([v, label2]) => h("button", { class: v === current2 ? "active" : "", onclick: () => navigate(v) }, label2)
+          ([v, label]) => h("button", { class: v === current2 ? "active" : "", onclick: () => navigate(v) }, label)
         )
       ),
       h("span", { class: "spacer" }),