feat(observability-map): show the score as a circular gauge

The observability map report now shows its score as a circular gauge, a
donut with the arc filled to the score and the number centred, in place
of the plain `19/100` line. The gauge is a small pre-generated image
referenced by the report comment; the `over N measured of M entry
points` detail and the base-comparison line stay beneath it, and the
number is still in the image's alt text.

Mono-RevId: 321358a4d0c0900670bbf280148178385b8872b2

Author: 1stvamp

internal-packages/observability-map/src/report/prComment.test.ts

@@ -31,6 +31,18 @@ describe("renderPrComment", () => {
     expect(renderPrComment(head, head).split("\n")[0]).toBe("<!-- observability-map-report -->");
   });
 
+  it("shows the score gauge image for a measured head", () => {
+    const head = buildReport([scanFile("api.v1.a.ts", brokenSource)!], []);
+    const out = renderPrComment(head, null);
+    expect(out).toContain(`static-scorecard-assets/gauge-${head.global}.png`);
+    expect(out).toContain('width="120" height="120"');
+    expect(out).toContain(`score ${head.global} out of 100`);
+    // The gauge replaces the bold headline; it must not also print alongside it.
+    expect(out).not.toContain(`**${head.global}/100**`);
+    // The measured-count detail stays.
+    expect(out).toContain(`over ${head.measured} measured of`);
+  });
+
   it("says the comparison is unavailable when base is null", () => {
     const head = buildReport([scanFile("api.v1.a.ts", brokenSource)!], []);
     const out = renderPrComment(head, null);

internal-packages/observability-map/src/report/prComment.ts

@@ -12,6 +12,28 @@ import {
 /** First line of every comment this job posts, so the upsert step can find its own comment again. */
 const MARKER = "<!-- observability-map-report -->";
 
+/**
+ * Pre-generated score gauges (`gauge-0.png` .. `gauge-100.png`), a donut for each whole-number score,
+ * served from the static-scorecard-assets repo over GitHub Pages. Pages so the images are publicly
+ * fetchable while that repo stays private, and PNG because Pages serves it `image/png`, which GitHub
+ * renders through camo; an inline `<svg>` is stripped from a comment and would not render.
+ */
+const GAUGE_BASE = "https://triggerdotdev.github.io/static-scorecard-assets";
+
+/**
+ * The gauge image line, empty when the head has no numeric score. Shown at 120px from a 2x source,
+ * and `<img>` rather than `![]()` so it can be sized. The score is still in the alt text and in the
+ * scoreLine beneath it.
+ */
+function gaugeLine(head: MapReport): string[] {
+  if (head.global === null) return [];
+  return [
+    `<img src="${GAUGE_BASE}/gauge-${head.global}.png" width="120" height="120" ` +
+      `alt="Observability map score ${head.global} out of 100">`,
+    "",
+  ];
+}
+
 /**
  * The commit a comment was rendered for. Data rather than something the renderers read for themselves,
  * so they stay pure and a run with no commit context renders the same comment without the line.
@@ -62,10 +84,12 @@ const MAX_DELEGATED_ROUTES = 15;
 const failingIds = (e: ScoredEntry) => scoredFailures(e).map((c) => c.id);
 
 function scoreLine(head: MapReport, base: MapReport | null): string {
+  // No `N/100` here when measured: the gauge above the line already shows it, and printing it twice
+  // is what this line used to do. The measured-count and base comparison stay.
   const headline =
     head.global === null
       ? `not measured over ${head.measured} measured of ${head.entries.length} entry points`
-      : `**${head.global}/100** over ${head.measured} measured of ${head.entries.length} entry points`;
+      : `over ${head.measured} measured of ${head.entries.length} entry points`;
 
   if (!base) return headline;
   // Head first: when this side has no score the headline already says so, and naming the base as the
@@ -302,6 +326,7 @@ export function renderPrComment(
     "## Observability map",
     "",
     ...commitLines(commit),
+    ...gaugeLine(head),
     scoreLine(head, base),
     "",
   ];