Checks keep their width and refresh in place; live parts share one fetch a2ef53c5db26

// data-live="<topic>" data-fragment="<name>" are refreshed from this page's

// own route when the hub says their topic changed (one fetch for all of

// them; ?fragment=<name> serves a single part to anyone else). Someone typing inside one is not interrupted:

  // Stale parts are gathered for a moment, then the page is fetched once

  // and each part swapped from it: one render however many parts and

  // events (a slow repository's page costs the server seconds each time).

  var stale = [], timer = null, fetching = false;

  var swapFrom = function (doc) {

    var todo = stale;

    stale = [];

    todo.forEach(function (el) {

      if (typingIn(el)) {

        el.addEventListener("focusout", function again() {

          el.removeEventListener("focusout", again);

          refresh(el);

        });

        return;

      }

      var name = el.getAttribute("data-fragment");

      var fresh = doc.querySelector('[data-fragment="' + name + '"]');

      if (fresh) el.innerHTML = fresh.innerHTML;

    });

  };

  var flush = function () {

    timer = null;

    if (fetching || !stale.length) return;

    fetching = true;

    fetch(location.href, { credentials: "same-origin", headers: { "X-Fragment": "page" } })

        fetching = false;

        if (html !== null) swapFrom(new DOMParser().parseFromString(html, "text/html"));

        if (stale.length) timer = setTimeout(flush, 300);

      .catch(function () { fetching = false; });

  };

  var refresh = function (el) {

    if (stale.indexOf(el) < 0) stale.push(el);

    if (!timer) timer = setTimeout(flush, 300);

    // A summary carrying whole hashes shows them by their ends, so the

    // Checks panel keeps its width (a pin mismatch's message, 2026-10-16).

    let (a, b) = (

        "6ea27b1d35037a4e4d0f6208b1ca99630df40888bd21fd55c8f8aba51dcdd7cb",

        "f7495d7689da3ac5b68684f26fce28b91ce55e6b8131c5e484ad2aab90c3020f",

    );

    let summary = format!("could not run: flow-init has BLAKE3 {a}, but {b} is pinned");

    let body = serde_json::json!({ "state": state, "name": "lint", "status": "failed", "summary": summary }).to_string();

    let (st, v) = api(app, "POST", "/api/v1/repos/andy/demo/checks", Some(&bob_rw), Some(&body)).await;

    assert_eq!(st, StatusCode::CREATED, "{v}");

    let page = call(app, "GET", "/andy/demo/proposal/2", None, Some(&andy), None, None).await.body;

    assert!(page.contains("6ea27b1d…1dcdd7cb") && page.contains(&format!("data-full=\"{a}\"")), "{page}");

    assert!(!page.contains(&format!("BLAKE3 {a},")), "never the whole hash inline");

    // The Checks section refreshes itself; nothing reloads the whole page.

    assert!(!page.contains("location.reload()"), "no full reload on a check");

    let part = call(app, "GET", "/andy/demo/proposal/2?fragment=checks", None, Some(&andy), None, None).await.body;

    assert!(part.contains("<h3>Checks</h3>") && part.contains("6ea27b1d…1dcdd7cb") && !part.contains("<html"), "{part}");

    // The state is written a moment before the timeline's event: wait for it.

    let mut events = vec![];

    for _ in 0..100 {

        events = db::proposals::events(&h.app.db, p.id).await.unwrap();

        if events.iter().any(|e| e.event == "landed") {

            break;

        }

        tokio::time::sleep(std::time::Duration::from_millis(20)).await;

    }

  <section class="side-sec" data-live="{{ live_topic }} {{ repo_topic }}" data-fragment="checks"><!--frag:checks-->

  <ul class="plain">{% for c in checks %}<li><span class="sig{% if c.status == "passed" %} sig-valid{% else if c.status == "failed" %} sig-invalid{% else %} sig-unsigned{% endif %}">{% if c.status == "passed" %}✔{% else if c.status == "failed" %}✘{% else if c.status == "running" %}…{% else %}○{% endif %}</span> {% if c.url.is_empty() %}{{ c.name }}{% else %}<a href="{{ c.url }}">{{ c.name }}</a>{% endif %} <span class="mute small">{{ c.status }}{% if !c.summary.is_empty() %} · {{ c.summary|addresses }}{% endif %}{% if !c.seal.is_empty() %} · sealed{% endif %}</span></li>{% endfor %}</ul>{% endif %}

  <!--/frag:checks--></section>

/* A long hash or path in a side panel (a check's summary) wraps rather

   than pushing the panel wider. */

.side-sections .side-sec { min-width: 0; overflow-wrap: anywhere; }