@hublo/sentinel 1.5.0-alpha.12 → 1.5.0-alpha.13

package/dist/bin/sentinel.js

@@ -15,7 +15,7 @@ import {
   palette,
   registerAdapters,
   resolve
-} from "../chunk-RH7TOWSN.js";
+} from "../chunk-JXI6UJ5I.js";
 import {
   resolveContext
 } from "../chunk-KLEXJFJ6.js";

package/dist/{chunk-RH7TOWSN.js → chunk-JXI6UJ5I.js}

@@ -4934,6 +4934,9 @@ function renderJson(report) {
   return `${JSON.stringify({ ...report, rows }, null, 2)}
 `;
 }
+function prose(text) {
+  return escape(text).replace(/`([^`]+)`/g, "<code>$1</code>");
+}
 function escape(text) {
   return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
 }
@@ -4943,14 +4946,21 @@ function renderHtml(report) {
     return `      <tr>
         <th scope="row">${escape(help?.label ?? row.metric)}</th>
         <td class="num">${escape(shown(row))} <span class="unit">${escape(row.unit)}</span></td>
-        <td class="caveat">${escape(help?.caveat ?? "")}</td>
       </tr>`;
   }).join("\n");
+  const reserves = report.rows.map((row) => ({ row, help: helpFor(row.metric) })).filter((entry) => entry.help).map(
+    ({ row, help }) => `    <details>
+      <summary>${escape(help?.label ?? row.metric)}<span class="what">${prose(help?.what ?? "")}</span></summary>
+      <p class="read"><b>How to read it.</b> ${prose(help?.read ?? "")}</p>
+      <p><b>What it does not say.</b> ${prose(help?.caveat ?? "")}</p>
+      <p class="source">Source: ${prose(help?.source ?? "")}</p>
+    </details>`
+  ).join("\n");
   const settings = report.settings.map(
     (setting) => `      <tr>
         <th scope="row"><code>${escape(setting.key)}</code></th>
         <td class="num">${escape(setting.value)}</td>
-        <td>${setting.moved ? '<span class="moved">overridden in this module</span>' : ""}</td>
+        <td>${setting.moved ? '<span class="moved">overridden here</span>' : ""}</td>
       </tr>`
   ).join("\n");
   const groups = /* @__PURE__ */ new Map();
@@ -4972,16 +4982,19 @@ function renderHtml(report) {
         <td class="num">${finding.confidence ?? ""}</td>
       </tr>`
     ).join("\n");
-    return `  <h2>${escape(label)}: where to look</h2>
-  <table>
-    <thead>
-      <tr><th scope="col">File</th><th scope="col">Name</th><th scope="col">Lines</th><th scope="col">Confidence</th></tr>
-    </thead>
-    <tbody>
+    return `
+  <h2>${escape(label)} &middot; where to look</h2>
+  <section>
+    <table class="places">
+      <thead>
+        <tr><th scope="col">File</th><th scope="col">Name</th><th scope="col">Lines</th><th scope="col">Confidence</th></tr>
+      </thead>
+      <tbody>
 ${rows2}
-    </tbody>
-  </table>
-${rest > 0 ? `  <p class="sub">The ${HTML_GROUP_LIMIT} longest are listed; ${rest} more are in <code>${SCRIPTS.json}</code>.</p>` : ""}`;
+      </tbody>
+    </table>
+${rest > 0 ? `    <p class="sub">The ${HTML_GROUP_LIMIT} longest are listed; ${rest} more are in <code>${SCRIPTS.json}</code>.</p>` : ""}
+  </section>`;
   }).join("\n");
   return `<!doctype html>
 <html lang="en">
@@ -4989,49 +5002,165 @@ ${rest > 0 ? `  <p class="sub">The ${HTML_GROUP_LIMIT} longest are listed; ${res
 <meta charset="utf-8">
 <title>Static analysis: ${escape(report.module)}</title>
 <style>
-  :root { color-scheme: light dark; --ink: #1a1a1a; --bg: #fdfdfc; --rule: #e2e0da; --warn: #9a3412; --dim: #6b6b6b; }
-  @media (prefers-color-scheme: dark) {
-    :root { --ink: #e8e6e1; --bg: #1b1b1a; --rule: #35332e; --warn: #fb923c; --dim: #9b9892; }
-  }
-  body { margin: 0; padding: 2rem 1rem; background: var(--bg); color: var(--ink);
-         font: 15px/1.55 ui-sans-serif, system-ui, sans-serif; }
-  main { max-width: 60rem; margin: 0 auto; }
-  h1 { font-size: 1.25rem; margin: 0 0 0.25rem; }
-  p.sub { color: var(--dim); margin: 0 0 1.5rem; }
-  h2 { font-size: 0.95rem; margin: 2.5rem 0 0.5rem; }
+  /*
+   * The Hublo palette, token by token, read from "libs/front/theme/src/branding/definitions/hublo"
+   * rather than approximated: "commonColors.ts" holds the values and "colorTokens.ts" the semantic
+   * names used in the comments below.
+   *
+   * \u26D4 One theme, and that is a decision rather than an omission: the charter has no dark palette,
+   * zero occurrences of "prefers-color-scheme" in the whole theme package, so a dark variant here
+   * would be charter this page invented. Every colour is painted explicitly instead, so the page
+   * holds on whatever ground opens it.
+   */
+  :root {
+    color-scheme: light;
+    --page: #f5f8fd;      /* neutral5,  background.page-header */
+    --surface: #ffffff;   /* neutral0,  background.surface */
+    --ink: #131415;       /* neutral35, text.primary */
+    --ink-soft: #5e6972;  /* neutral30, text.secondary */
+    --label: #72808e;     /* neutral25, text.label-default */
+    --rule: #ced7e0;      /* neutral15, border.page-header */
+    --brand: #3a4392;     /* blue15,    text.brand */
+    --brand-bg: #e5ecff;  /* blue0,     background.brand */
+    --moved: #c83c3c;     /* red15,     text.destructive */
+  }
+  /*
+   * The brand faces first, then Inter, then the system. They are loaded at runtime from a branding
+   * artefact in the applications, so they cannot be embedded here without an external request, and
+   * an external request is the one thing this page must not make. A viewer who has them sees them.
+   */
+  body {
+    margin: 0;
+    padding: 2.5rem 1rem 4rem;
+    background: var(--page);
+    color: var(--ink);
+    font: 15px/1.6 'Brand Sans', Inter, ui-sans-serif, system-ui, sans-serif;
+  }
+  main { max-width: 64rem; margin: 0 auto; }
+  header { border-left: 3px solid var(--brand); padding-left: 0.9rem; margin-bottom: 2rem; }
+  h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
+  h2 {
+    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--label); margin: 2.5rem 0 0.6rem; font-weight: 600;
+  }
+  p.sub { color: var(--ink-soft); margin: 0; font-size: 0.9rem; }
+  section {
+    background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
+    padding: 0.25rem 1.1rem; overflow-x: auto;
+  }
   table { width: 100%; border-collapse: collapse; }
-  th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule);
-           vertical-align: top; }
-  thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
-  td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
-  code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; }
-  .unit { color: var(--dim); font-size: 0.85em; }
-  .moved { color: var(--warn); font-size: 0.85em; }
-  .caveat { color: var(--dim); font-size: 0.9em; }
+  th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
+  tr:last-child th, tr:last-child td { border-bottom: 0; }
+  thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--label); font-weight: 600; }
+  tbody th { font-weight: 500; white-space: nowrap; }
+  td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
+  /*
+   * Which column absorbs the slack, per table. One global rule on the shared class got this
+   * wrong in all three at once: the figures read well and the settings table clipped its origin
+   * column while the findings table crushed its file paths into three lines.
+   */
+  table.figures td.num { width: 100%; }
+  /*
+   * The settings table does NOT force its value column wide. One of its values is the test glob,
+   * long enough to push the table past the card, and the origin column then slid out of view and
+   * was clipped: "overridden in this mo". Long values wrap instead, and the origin stays readable.
+   */
+  table.settings td.num { white-space: normal; overflow-wrap: anywhere; }
+  table.settings td:last-child { text-align: right; white-space: nowrap; }
+  table.places td:first-child { width: 100%; }
+  table.places td.num { text-align: right; }
+  td.read { color: var(--ink-soft); font-size: 0.88rem; }
+  tbody th { color: var(--ink); }
+  code { font: 0.86em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); }
+  .unit { color: var(--label); font-size: 0.82em; font-weight: 400; }
+  .moved {
+    color: var(--moved); font-size: 0.78rem; font-weight: 500;
+    white-space: nowrap;
+  }
+  /* The collapsed reserves. Closed by default: the figures are what the page opens on. */
+  details { border-bottom: 1px solid var(--rule); }
+  details:last-of-type { border-bottom: 0; }
+  summary {
+    cursor: pointer; padding: 0.7rem 0.6rem; font-size: 0.9rem; font-weight: 500;
+    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
+  }
+  /*
+   * The chevron is drawn, not inherited: "display: flex" on a summary removes the native marker,
+   * and a collapsed block with no affordance is a block nobody opens.
+   */
+  summary { list-style: none; }
+  summary::-webkit-details-marker { display: none; }
+  summary::before {
+    content: ''; flex: none; width: 0.38rem; height: 0.38rem; margin: 0.3rem 0.1rem 0 0;
+    border-right: 1.5px solid var(--label); border-bottom: 1.5px solid var(--label);
+    transform: rotate(-45deg); transition: transform 0.15s ease;
+  }
+  details[open] summary::before { transform: rotate(45deg); border-color: var(--brand); }
+  @media (prefers-reduced-motion: reduce) { summary::before { transition: none; } }
+  summary:hover { color: var(--brand); }
+  /* One line, truncated: the summary is a hint, the body is the text. Opening it shows all. */
+  summary .what {
+    color: var(--label); font-size: 0.82rem; font-weight: 400;
+    flex: 1 1 18rem; min-width: 0;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  details[open] summary .what { white-space: normal; overflow: visible; }
+  details[open] summary { color: var(--brand); }
+  details p.read { color: var(--ink-soft); }
+  details p b { color: var(--ink); font-weight: 600; }
+  details p { margin: 0 0 0.7rem; padding: 0 0.6rem; color: var(--ink-soft); font-size: 0.88rem; max-width: 52rem; }
+  details p.source { color: var(--label); font-size: 0.8rem; }
+  footer { color: var(--label); font-size: 0.78rem; margin-top: 2.5rem; }
+  @media (max-width: 40rem) {
+    section { padding: 0.25rem 0.6rem; }
+    summary .what { display: none; }
+  }
 </style>
 </head>
 <body>
 <main>
-  <h1>Static analysis: ${escape(report.module)}</h1>
-  <p class="sub">Passes: ${escape(report.passes.join(", "))}</p>
-  <table>
-    <thead>
-      <tr><th scope="col">Metric</th><th scope="col">Value</th><th scope="col">What it does not say</th></tr>
-    </thead>
-    <tbody>
+  <header>
+    <h1>${escape(report.module)}</h1>
+    <p class="sub">Static analysis, ${escape(report.passes.join(" / "))}</p>
+  </header>
+
+  <h2>Measured</h2>
+  <section>
+    <table class="figures">
+      <thead>
+        <tr><th scope="col">Metric</th><th scope="col">Value</th></tr>
+      </thead>
+      <tbody>
 ${rows}
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+  </section>
+${report.notes.length > 0 ? `
+  <h2>Not measured</h2>
+  <section>
+    <table><tbody>
+${report.notes.map((note) => `      <tr><td class="read">${escape(note)}</td></tr>`).join("\n")}
+    </tbody></table>
+  </section>
+` : ""}
+  <h2>What these numbers do not say</h2>
+  <section>
+${reserves}
+  </section>
+
   <h2>Measured with</h2>
-  <table>
-    <thead>
-      <tr><th scope="col">Setting</th><th scope="col">Value</th><th scope="col">Origin</th></tr>
-    </thead>
-    <tbody>
+  <section>
+    <table class="settings">
+      <thead>
+        <tr><th scope="col">Setting</th><th scope="col">Value</th><th scope="col">Origin</th></tr>
+      </thead>
+      <tbody>
 ${settings}
-    </tbody>
-  </table>
+      </tbody>
+    </table>
+  </section>
 ${findings}
+  <footer>sentinel static-analysis</footer>
 </main>
 </body>
 </html>

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   registerAdapters,
   resolve,
   setDefaultRunner
-} from "./chunk-RH7TOWSN.js";
+} from "./chunk-JXI6UJ5I.js";
 import {
   BaseAdapter
 } from "./chunk-KLEXJFJ6.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hublo/sentinel",
-  "version": "1.5.0-alpha.12",
+  "version": "1.5.0-alpha.13",
   "description": "One CLI that guards code health across Hublo repos: shared lint/typescript/build/test presets, static & dynamic analysis, and architecture checks.",
   "type": "module",
   "license": "MIT",