Release trust page: badges of what is signed and attested, a graph drawn at its own size bf5101d394c0

- **A clearer release trust page (#79).** A row of badges at the top says whether the tag is signed and by whom, how many changes are signed or sealed, and how many assets an attested OxygenFlow build produced. The graph is drawn at its own size (it filled the screen), drops the builds column when nothing was built, and marks every box: a lock where the claim is signed and checked, `!` where it is not (unsigned, uploaded by hand), `✘` where it fails, with the reason underneath and the details on hover. Each asset's heading carries its badge too. The GitHub look no longer strokes the graph's text.

/* The history and lanes graphs' dots and cards only: other graphs (the

   release trust graph) use .node on groups holding text. */

:root[data-look="github"] :is(circle, rect).node { fill: var(--panel); stroke: var(--mute); }

:root[data-look="github"] :is(circle, rect).node.head { fill: var(--acc); stroke: var(--acc); }

/// One claim of the trust summary: `pass`, `warn` or `fail`, and what it says.

pub struct TrustBadge {

    pub class: &'static str,

    pub text: String,

}

    }

    /// The page's trust summary, one badge per claim: the tag's signature,

    /// how many changes are authenticated, and how many assets an attested

    /// OxygenFlow build produced (oxygenhub#79).

    pub fn summary(&self) -> Vec<TrustBadge> {

        let tag = match self.tag_signature.as_str() {

            "valid" => ("pass", format!("Tag signed by {}", self.tag_signer.as_ref().map(|k| k.name.as_str()).unwrap_or("its signer"))),

            "unsigned" => ("warn", "Tag unsigned".to_string()),

            other => ("fail", format!("Tag signature {other}")),

        };

        let authenticated: usize = self.authors.iter().map(|a| a.signed + a.sealed).sum();

        let bad: usize = self.authors.iter().map(|a| a.invalid + a.revoked).sum();

        let changes = (

            if bad > 0 {

                "fail"

            } else if authenticated < self.changes {

                "warn"

            } else {

                "pass"

            },

            format!("{authenticated} of {} changes signed or sealed", self.changes),

        );

        let attested =

            self.assets.iter().filter(|a| a.build.as_ref().is_some_and(|b| b.receipt.is_some() && b.receipt_problem.is_none())).count();

        let assets = (

            if attested == self.assets.len() { "pass" } else { "warn" },

            if self.assets.is_empty() {

                "No assets".to_string()

            } else {

                format!("{attested} of {} assets built and attested by OxygenFlow", self.assets.len())

            },

        );

        [tag, changes, assets].into_iter().map(|(class, text)| TrustBadge { class, text }).collect()

/// The report as a graph: authors, the tagged state, the builds (when any

/// job built an asset) and the assets, as inline SVG drawn at its own size.

/// Each node carries a badge: a lock where the claim is signed and checked,

/// `!` where it is not (unsigned, uploaded by hand), `✘` where it fails;

/// its second line says why, and its title says it in full (oxygenhub#79).

    const W: f64 = 220.0;

    const H: f64 = 40.0;

    const GAP: f64 = 10.0;

    const COL: f64 = W + 48.0;

    struct Node {

        col: usize,

        row: usize,

        title: String,

        sub: String,

        class: &'static str,

        tip: String,

    }

    let mut nodes: Vec<Node> = Vec::new();

    let any_build = t.assets.iter().any(|a| a.build.is_some());

    let asset_col = if any_build { 3 } else { 2 };

            let (class, why) = if a.invalid + a.revoked > 0 {

                ("fail", format!("{} invalid or revoked", a.invalid + a.revoked))

            } else if a.unsigned > 0 {

                ("warn", format!("{} of {} unsigned", a.unsigned, a.changes))

            } else {

                ("pass", "all signed".to_string())

            };

            let linked = if a.who.account.is_some() { "key linked to an account" } else { "key not linked to an account" };

            nodes.push(Node {

                col: 0,

                row: i,

                title: name.clone(),

                sub: format!("{} change{} · {why}", a.changes, if a.changes == 1 { "" } else { "s" }),

                class,

                tip: format!("{name}: {} changes, {} signed, {} sealed, {} unsigned; {linked}", a.changes, a.signed, a.sealed, a.unsigned),

            });

    let signer = t.tag_signer.as_ref().map(|k| k.name.clone()).unwrap_or_default();

    let (tag_class, tag_sub) = match t.tag_signature.as_str() {

        "valid" => ("pass", format!("signed by {signer}")),

        "unsigned" => ("warn", "unsigned".to_string()),

        other => ("fail", other.to_string()),

    nodes.push(Node {

        col: 1,

        row: 0,

        title: format!("tag {}", t.tag),

        sub: tag_sub.clone(),

        class: tag_class,

        tip: format!("tag {}: {} changes; {tag_sub}", t.tag, t.changes),

    });

    let mut build_rows = 0;

                let runner = b.runner.as_ref().map(|r| r.name.clone()).unwrap_or_default();

                let (class, why) = match (&b.receipt, &b.receipt_problem) {

                    (Some(_), None) => ("pass", format!("receipt verified · {runner}")),

                    (Some(_), Some(p)) => ("fail", p.clone()),

                    _ => ("warn", "no signed receipt".to_string()),

                nodes.push(Node {

                    col: 2,

                    row: build_rows,

                    title: format!("run #{} {}", b.run, b.job),

                    sub: why.clone(),

                    tip: format!(

                        "run #{} job {}: {why}{}",

                        b.run,

                        b.job,

                        if b.same_state_as_tag { ", from the tagged state" } else { ", from another state than the tag's" }

                    ),

                });

                build_rows += 1;

        let size = crate::render::bytes(a.size as u64);

        let (class, why) = match &a.build {

            Some(b) if b.receipt.is_some() && b.receipt_problem.is_none() => ("pass", "attested build"),

            Some(_) => ("warn", "built, not attested"),

            None => ("warn", "uploaded by hand"),

        };

        nodes.push(Node {

            col: asset_col,

            row: i,

            title: a.name.clone(),

            sub: format!("{size} · {why}"),

            class,

            tip: format!("{}: {size}, {why}", a.name),

        });

    let x = |n: &Node| 1.0 + n.col as f64 * COL;

    let y = |n: &Node| 1.0 + n.row as f64 * (H + GAP);

    let width = 2.0 + asset_col as f64 * COL + W;

    let height = nodes.iter().map(y).fold(0.0, f64::max) + H + 2.0;

    let mut svg = format!(

        r#"<svg class="trust-graph" width="{width}" height="{height}" viewBox="0 0 {width} {height}" role="img" aria-label="Release trust graph">"#

    );

        let (x1, y1) = (x(&nodes[*a]) + W, y(&nodes[*a]) + H / 2.0);

        let (x2, y2) = (x(&nodes[*b]), y(&nodes[*b]) + H / 2.0);

    for n in &nodes {

        let (nx, ny) = (x(n), y(n));

        // The badge, in a circle at the node's right.

        let (cx, cy) = (nx + W - 16.0, ny + H / 2.0);

        let badge = match n.class {

            // A padlock: the shackle, then the body.

            "pass" => format!(

                r#"<path class="shackle" d="M{},{} v-3 a3.5,3.5 0 0 1 7,0 v3"/><rect class="lock" x="{}" y="{}" width="10" height="7.5" rx="1.5"/>"#,

                cx - 3.5,

                cy - 0.5,

                cx - 5.0,

                cy - 0.5

            ),

            "warn" => format!(r#"<text class="mark" x="{cx}" y="{}" text-anchor="middle">!</text>"#, cy + 4.0),

            _ => format!(r#"<text class="mark" x="{cx}" y="{}" text-anchor="middle">✘</text>"#, cy + 4.0),

        };

            r#"<g class="node {}"><title>{}</title><rect x="{nx}" y="{ny}" width="{W}" height="{H}" rx="6"/><circle class="badge" cx="{cx}" cy="{cy}" r="10"/>{badge}<text x="{}" y="{}" class="t">{}</text><text x="{}" y="{}" class="s">{}</text></g>"#,

            n.class,

            esc(&n.tip),

            nx + 10.0,

            ny + 17.0,

            esc(&truncate(&n.title, 28)),

            nx + 10.0,

            ny + 31.0,

            esc(&truncate(&n.sub, 32)),

        // oxygenhub#79: a summary of badges, badges in the graph, and the

        // graph drawn at its own size rather than stretched to the page.

        "Tag signed by",

        "1 of 1 changes signed or sealed",

        "1 of 2 assets built and attested by OxygenFlow",

        "attested build",

        "uploaded by hand",

        "receipt verified",

        "class=\"shackle\"",

        "<title>notes.txt:",

    let svg = &page[page.find("<svg class=\"trust-graph\"").unwrap()..];

    assert!(svg[..200].contains(" width=\"") && svg[..200].contains(" height=\""), "the graph has its own size: {}", &svg[..200]);

<ul class="plain trust-summary">{% for b in t.summary() %}<li class="tb tb-{{ b.class }}"><span class="tb-mark" aria-hidden="true">{% if b.class == "pass" %}<svg viewBox="0 0 16 16" width="14" height="14"><path d="M5 7V5a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" stroke-width="1.6"/><rect x="3.5" y="7" width="9" height="7" rx="1.5" fill="currentColor"/></svg>{% else if b.class == "warn" %}!{% else %}✘{% endif %}</span>{{ b.text }}</li>{% endfor %}</ul>

  <p class="small mute">Authors → the tagged state → the jobs that built the assets → the assets. A lock marks what is signed and checked, <strong>!</strong> what is not (unsigned, or uploaded by hand), <strong>✘</strong> what fails. A dashed line is a build from another state than the tag's. Hover a box for the details.</p>

  <h3><a href="{{ a.url }}">{{ a.name }}</a> {% if let Some(b) = a.build %}{% if b.receipt.is_some() && b.receipt_problem.is_none() %}<span class="tb tb-pass tb-sm">attested build</span>{% else %}<span class="tb tb-warn tb-sm">built, not attested</span>{% endif %}{% else %}<span class="tb tb-warn tb-sm">uploaded by hand</span>{% endif %} <span class="small mute">{{ a.size|bytes }} · blake3 <code title="{{ a.blake3 }}">{{ a.blake3|short }}</code></span></h3>

svg.trust-graph { max-width: 100%; height: auto; display: block; }

svg.trust-graph .node .badge { fill: var(--bg); stroke: none; }

svg.trust-graph .node.pass .badge { fill: color-mix(in srgb, var(--ok) 15%, var(--panel)); }

svg.trust-graph .node.warn .badge { fill: color-mix(in srgb, var(--warn) 18%, var(--panel)); }

svg.trust-graph .node.fail .badge { fill: color-mix(in srgb, var(--bad) 15%, var(--panel)); }

svg.trust-graph .node .lock { fill: var(--ok); stroke: none; }

svg.trust-graph .node .shackle { fill: none; stroke: var(--ok); stroke-width: 1.6; }

svg.trust-graph .node.warn .mark { fill: var(--warn); font-weight: 700; font-size: 13px; }

svg.trust-graph .node.fail .mark { fill: var(--bad); font-weight: 700; font-size: 12px; }

svg.trust-graph text.t { font-weight: 600; }

/* Trust badges: the page's summary, and the assets' headings. */

.trust-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.tb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 500; }

.tb-sm { padding: 1px 8px; font-size: 12px; vertical-align: middle; }

.tb-mark { display: inline-flex; font-weight: 700; }

.tb-pass { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, transparent); }

.tb-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, transparent); }

.tb-fail { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, transparent); }