@intentius/behold 0.17.0 → 0.18.0

package/web/cross-env.js

@@ -0,0 +1,58 @@
+// #234's last remainder — the cross-environment half of "is prod running what
+// staging tested", the pure half (tested the way web/release.js and
+// web/run-playhead.js are — no DOM). The payload is /api/components/compare's
+// `{env, to, comparisons}`, each comparison chant's own CrossEnvComparison:
+// `same` decided on the COMPARABLE identity (inputDigest ?? digest per side —
+// a pinned helm deploy's bytes legitimately differ per cluster), `comparedOn`
+// present when the input side spoke, digests always visible.
+
+/** Tone vocabulary matches the component palette: good / warn / neutral. */
+export function comparisonRow(c) {
+  const missingA = !c.digestA;
+  const missingB = !c.digestB;
+  if (missingA && missingB) {
+    return { component: c.component, tone: "neutral", verdict: "unrecorded", detail: `no release recorded in ${c.envA} or ${c.envB}` };
+  }
+  if (missingA || missingB) {
+    const where = missingA ? c.envA : c.envB;
+    return { component: c.component, tone: "neutral", verdict: "unrecorded", detail: `no release recorded in ${where}` };
+  }
+  if (c.same) {
+    // The honest wording: matching inputs with differing bytes is still
+    // "same" — that is chant#1243's contract, and saying "same bytes" here
+    // would claim more than the ledger does.
+    const inputDecided = !!c.comparedOn && c.comparedOn.a === c.comparedOn.b && c.digestA !== c.digestB;
+    return {
+      component: c.component,
+      tone: "good",
+      verdict: inputDecided ? "same inputs" : "same",
+      detail: inputDecided
+        ? `built from the same inputs (${short(c.comparedOn.a)}); rendered bytes differ per cluster, as pinned deploys do`
+        : `same digest in both (${short(c.digestA)})`,
+    };
+  }
+  return {
+    component: c.component,
+    tone: "warn",
+    verdict: "differs",
+    detail: `${c.envA}: ${short(c.digestA)} · ${c.envB}: ${short(c.digestB)}`,
+  };
+}
+
+/** One line for the section header: the counts, worst-tone-first. */
+export function comparisonSummary(payload) {
+  const rows = (payload.comparisons || []).map(comparisonRow);
+  if (!rows.length) return { text: `no components recorded in ${payload.env} or ${payload.to}`, tone: "neutral" };
+  const differs = rows.filter((r) => r.tone === "warn").length;
+  const unrecorded = rows.filter((r) => r.tone === "neutral").length;
+  const same = rows.length - differs - unrecorded;
+  if (differs) return { text: `${differs} of ${rows.length} differ from ${payload.to}`, tone: "warn" };
+  if (same === rows.length) return { text: `all ${rows.length} running what ${payload.to} tested`, tone: "good" };
+  return { text: `${same} same as ${payload.to}, ${unrecorded} unrecorded`, tone: "neutral" };
+}
+
+function short(digest) {
+  if (!digest) return "—";
+  const hex = digest.startsWith("sha256:") ? digest.slice(7) : digest;
+  return hex.slice(0, 12);
+}

package/web/cross-env.test.js

@@ -0,0 +1,61 @@
+import { describe, it, expect } from "vitest";
+import { comparisonRow, comparisonSummary } from "./cross-env.js";
+
+const cmp = (over) => ({ component: "web", envA: "prod", envB: "staging", digestA: "sha256:aaaa1111bbbb2222", digestB: "sha256:aaaa1111bbbb2222", same: true, ...over });
+
+describe("comparisonRow (#234 — is prod running what staging tested)", () => {
+  it("same digest in both reads good, with the digest named", () => {
+    const r = comparisonRow(cmp({}));
+    expect(r).toMatchObject({ tone: "good", verdict: "same" });
+    expect(r.detail).toContain("aaaa1111bbbb");
+  });
+
+  it("matching inputs with differing bytes says SAME INPUTS — never claims same bytes (pinned helm, chant#1243)", () => {
+    const r = comparisonRow(cmp({
+      digestA: "sha256:prod-bytes",
+      digestB: "sha256:staging-bytes",
+      same: true,
+      comparedOn: { a: "sha256:inputs", b: "sha256:inputs" },
+    }));
+    expect(r.tone).toBe("good");
+    expect(r.verdict).toBe("same inputs");
+    expect(r.detail).toContain("rendered bytes differ per cluster");
+  });
+
+  it("differing identities read warn, both digests visible", () => {
+    const r = comparisonRow(cmp({ digestB: "sha256:other", same: false }));
+    expect(r).toMatchObject({ tone: "warn", verdict: "differs" });
+    expect(r.detail).toContain("prod");
+    expect(r.detail).toContain("staging");
+  });
+
+  it("a missing side is UNRECORDED (neutral) and names where — never painted as drift", () => {
+    const r = comparisonRow(cmp({ digestB: undefined, same: false }));
+    expect(r).toMatchObject({ tone: "neutral", verdict: "unrecorded" });
+    expect(r.detail).toContain("staging");
+    expect(comparisonRow(cmp({ digestA: undefined, digestB: undefined, same: false })).detail).toContain("prod or staging");
+  });
+});
+
+describe("comparisonSummary", () => {
+  const payload = (comparisons) => ({ env: "prod", to: "staging", comparisons });
+
+  it("worst tone first: any differ makes the line warn with the count", () => {
+    const s = comparisonSummary(payload([cmp({}), cmp({ component: "api", digestB: "sha256:x", same: false })]));
+    expect(s).toEqual({ text: "1 of 2 differ from staging", tone: "warn" });
+  });
+
+  it("all same is the good line the question wants answered", () => {
+    const s = comparisonSummary(payload([cmp({}), cmp({ component: "api" })]));
+    expect(s).toEqual({ text: "all 2 running what staging tested", tone: "good" });
+  });
+
+  it("unrecorded components temper the claim instead of hiding in either count", () => {
+    const s = comparisonSummary(payload([cmp({}), cmp({ component: "api", digestB: undefined, same: false })]));
+    expect(s).toEqual({ text: "1 same as staging, 1 unrecorded", tone: "neutral" });
+  });
+
+  it("an empty ledger pair says so", () => {
+    expect(comparisonSummary(payload([]))).toEqual({ text: "no components recorded in prod or staging", tone: "neutral" });
+  });
+});

package/web/index.html

@@ -4,6 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>behold</title>
+    <!-- #393: "nothing in the browser console" includes the 404 every page
+         load has always fetched for itself. behold ships no icon file and its
+         static export copies only web/, so the mark is a data URI rather than a
+         route or an asset: no request, and the exported page keeps it. -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23a6adc8' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23a6adc8'/%3E%3C/svg%3E"
+    />
     <style>
       /* Pre-paint fallback (#229). These are the DEFAULT theme's tokens —
          Catppuccin Mocha run through theme.js's tokensFor() — not a palette of
@@ -313,6 +321,25 @@
       #panel .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       #panel .tag { color: var(--muted); font: var(--t-caption)/1.5 var(--font-mono); white-space: nowrap; }
 
+      /* The provenance badge (#401, M4 of #397): who stated this figure, to
+         what tolerance, and whether it is modeled from list prices or
+         validated against a bill. Boxed rather than plain muted text, because
+         it rides BESIDE a number and has to read as a label on that number
+         rather than as more of it — and it sits on every figure the behaviour
+         overlay shows, in the panel and in the inspect pane alike, so it is
+         styled for both. `help` cursor: the hover carries "modeled, not
+         billed", which is the sentence #397 turns on. */
+      .behaviour-badge { color: var(--muted); font: var(--t-caption)/1.4 var(--font-mono);
+        border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 5px;
+        white-space: nowrap; cursor: help; flex: none; }
+      #panel .behaviour-total { display: flex; flex-direction: column; gap: 1px; padding: 3px 0;
+        font: var(--t-caption)/1.5 var(--font-mono); }
+      #panel .behaviour-ramp { margin: 4px 0 2px; }
+      /* A card nothing priced keeps the drift overlay's neutral fill (#399) —
+         and says so, faintly, so the grey is legible as "not looked at" rather
+         than as the low end of the scale. */
+      #graph [data-unpriced="1"] { opacity: 0.82; }
+
       /* Substrate readiness (M5, #54) — one row per substrate on the panel's
          Substrates tab: status dot + name + state, with its actions (bring up /
          reset / run pipeline) visible inline again. #73 moved those into ⌘K;
@@ -424,6 +451,13 @@
          here", not "something is wrong". */
       #graph [data-node-id].operator-home rect:first-of-type { stroke: var(--pending); stroke-width: 2; }
 
+      /* #404: a bound choudoufu card the plan would change in place. A DASHED
+         --degraded edge, deliberately not a fill: the fill is the ownership
+         verdict and attribute drift never moves it, so the two signals have to
+         live in different channels. Dashed rather than solid so it reads apart
+         from .carved's and .operator-home's solid strokes at a glance. */
+      #graph [data-node-id].plan-drifted rect:first-of-type { stroke: var(--degraded); stroke-width: 2; stroke-dasharray: 4 3; }
+
       /* The step the playhead sits on, on the graph itself — the ops lens marks
          it `_playhead` and the card wears a dashed edge, so "here" reads
          differently from "this one is done". */
@@ -515,6 +549,10 @@
         font: var(--t-body)/1.5 var(--font-mono);
         cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
       #pal-list .row.sel { background: var(--pending); color: var(--pal-sel-fg, var(--fg)); }
+      /* A node row's second line (#393): the member and the kind, which is what
+         tells two same-named addresses in two members apart. Inherits the row's
+         colour so the selected row stays readable on --pending. */
+      #pal-list .row .sub { font-size: var(--t-caption); opacity: 0.66; margin-top: 1px; }
       #pal-list .empty { padding: 8px 11px; color: var(--muted); font-size: var(--t-body); }
     </style>
   </head>
@@ -577,7 +615,7 @@
     <!-- Command palette (⌘K / Ctrl+K, #73) — the spicypath FG-036 shape
          (../spicypath/src/index.html): input + filtered list, driven entirely
          by app.js's paletteCommands()/palRender()/openPalette()/closePalette(). -->
-    <div id="palette"><div class="box"><input id="pal-input" placeholder="type a command…   (Esc to close)" autocomplete="off"><div id="pal-list"></div></div></div>
+    <div id="palette"><div class="box"><input id="pal-input" placeholder="type a command, or an address…   (Esc to close)" autocomplete="off"><div id="pal-list"></div></div></div>
     <script type="module" src="./app.js"></script>
   </body>
 </html>