Profile: the year as a signal 2a0c09c09716

-- The agent token a push came through, when it was one marked as an

-- agent's (oxygenhub#217: the profile pulse's "via agents" trace).

ALTER TABLE pushes ADD COLUMN via TEXT NOT NULL DEFAULT '';

{# The year as a signal (oxygenhub#217): changes pushed each day of the

   last year, coloured by repository, the share pushed via agent tokens as a

   violet trace, releases on the peaks. Drawn by the script below from the

   page's JSON; nothing is fetched. #}

<section class="card-box pulse-box" aria-label="Changes over the last year">

  <div class="card-head"><h2>The year</h2><span class="pulse-total" id="pulse-total" data-total="{{ pulse_total }}">{{ pulse_total }}</span><span class="small mute">changes pushed</span>

    <div class="pulse-legend more" id="pulse-legend"></div></div>

  {% if pulse_total == 0 %}<p class="empty small">No changes pushed in the last year.</p>{% else %}

  <div class="pulse-stage" id="pulse-stage"><div class="pulse-card" id="pulse-card" aria-live="polite"></div></div>

  <script type="application/json" id="pulse-data">{{ pulse|safe }}</script>

  <script>

(() => {

"use strict";

const data = JSON.parse(document.getElementById("pulse-data").textContent);

const stage = document.getElementById("pulse-stage"), card = document.getElementById("pulse-card");

const NS = "http://www.w3.org/2000/svg", reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;

const el = (t, a, p) => { const e = document.createElementNS(NS, t); for (const k in a) e.setAttribute(k, a[k]); if (p) p.appendChild(e); return e; };

const PAL = 7, col = r => r < PAL ? `var(--pu${r + 1})` : "var(--pu8)";

const days = data.days.map((d, i) => ({ t: d[0], via: d[1], by: d[2], date: new Date(data.start + i * 864e5) }));

const W = 1000, H = 300, L = 40, R = 14, T = 26, B = 58, base = H - B, X = i => L + i * ((W - L - R) / 364);

const s = el("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": "Changes pushed each day over the last year" });

stage.prepend(s);

const defs = el("defs", {}, s);

const grad = el("linearGradient", { id: "pu-grad", x1: L, x2: W - R, y1: 0, y2: 0, gradientUnits: "userSpaceOnUse" }, defs);

const fade = el("linearGradient", { id: "pu-fade", x1: 0, x2: 0, y1: 0, y2: 1 }, defs);

el("stop", { offset: "0", "stop-color": "#fff", "stop-opacity": ".5" }, fade); el("stop", { offset: "1", "stop-color": "#fff", "stop-opacity": "0" }, fade);

const fm = el("mask", { id: "pu-fm", maskUnits: "userSpaceOnUse", x: 0, y: 0, width: W, height: H }, defs); el("rect", { width: W, height: H, fill: "url(#pu-fade)" }, fm);

const glow = el("filter", { id: "pu-glow", x: "-5%", y: "-30%", width: "110%", height: "160%" }, defs);

el("feGaussianBlur", { stdDeviation: "2.6", result: "b" }, glow); const mg = el("feMerge", {}, glow); el("feMergeNode", { in: "b" }, mg); el("feMergeNode", { in: "SourceGraphic" }, mg);

const spot = el("radialGradient", { id: "pu-spot", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse" }, defs);

el("stop", { offset: "0", "stop-color": "#fff", "stop-opacity": "1" }, spot); el("stop", { offset: "1", "stop-color": "#fff", "stop-opacity": ".4" }, spot);

const sm = el("mask", { id: "pu-sm", maskUnits: "userSpaceOnUse", x: 0, y: 0, width: W, height: H }, defs);

const spotRect = el("rect", { width: W, height: H, fill: "#fff" }, sm);

const clip = el("clipPath", { id: "pu-clip" }, defs), clipRect = el("rect", { width: reduce ? W : 0, height: H }, clip);

const grid = el("g", {}, s), ylab = [];

for (let k = 0; k <= 4; k++) { const y = T + (base - T) * k / 4; el("line", { x1: L, x2: W - R, y1: y, y2: y, stroke: "var(--line)", "stroke-opacity": ".5" }, grid); ylab.push(el("text", { x: L - 6, y: y + 4, "text-anchor": "end", class: "pu-axis" }, grid)); }

days.forEach((d, i) => { if (d.date.getUTCDate() !== 1) return; el("line", { x1: X(i), x2: X(i), y1: base, y2: base + 5, stroke: "var(--line)" }, grid); const t = el("text", { x: X(i) + 3, y: base + 18, class: "pu-axis" }, grid); t.textContent = d.date.toLocaleDateString("en-GB", { month: "short", timeZone: "UTC" }); });

const plot = el("g", { mask: "url(#pu-sm)", "clip-path": "url(#pu-clip)" }, s);

const area = el("path", { fill: "url(#pu-grad)", mask: "url(#pu-fm)" }, plot);

const line = el("path", { fill: "none", stroke: "url(#pu-grad)", "stroke-width": 2.2, "stroke-linejoin": "round", filter: "url(#pu-glow)" }, plot);

const viaLine = el("path", { fill: "none", stroke: "var(--pu-agent)", "stroke-width": 1.3, "stroke-dasharray": "1 3", "stroke-linecap": "round" }, plot);

const strip = el("g", {}, plot), peakG = el("g", {}, s);

const beat = el("circle", { r: 4.5, fill: "var(--panel)", stroke: "var(--acc)", "stroke-width": 2, filter: "url(#pu-glow)", opacity: 0 }, s);

const scan = el("line", { y1: T - 4, y2: base, stroke: "var(--ink)", "stroke-dasharray": "2 3", opacity: 0 }, s);

const dot = el("circle", { r: 5, fill: "var(--panel)", "stroke-width": 2.5, opacity: 0 }, s);

let only = -1, ys = [];

const val = d => only < 0 ? d.t : (d.by.find(p => p[0] === only) || [0, 0])[1];

const top = d => d.by.length ? d.by.reduce((a, b) => b[1] > a[1] ? b : a)[0] : 0;

const smooth = pts => pts.reduce((acc, [x, y], i) => { if (!i) return `M${x},${y}`; const [x0, y0] = pts[i - 1], cx = (x0 + x) / 2; return acc + `C${cx},${y0} ${cx},${y} ${x},${y}`; }, "");

function build() {

  const v = days.map(val), max = Math.max(1, ...v);

  ys = v.map(n => base - (base - T) * n / max);

  const d = smooth(ys.map((y, i) => [X(i), y]));

  line.setAttribute("d", d); area.setAttribute("d", d + `L${X(364)},${base}L${X(0)},${base}Z`);

  viaLine.setAttribute("d", smooth(days.map((x, i) => [X(i), base - (base - T) * (only < 0 ? x.via : Math.round(val(x) * x.via / (x.t || 1))) / max])));

  grad.textContent = "";

  for (let i = 0; i <= 364; i += 7) el("stop", { offset: (i / 364).toFixed(4), style: `stop-color:${col(only < 0 ? top(days[i]) : only)}` }, grad);

  strip.textContent = "";

  days.forEach((x, i) => { if (!val(x)) return; el("rect", { x: X(i) - .9, y: base + 28, width: 1.8, height: 9, rx: .9, style: `fill:${col(only < 0 ? top(x) : only)}` }, strip); });

  ylab.forEach((t, k) => { t.textContent = Math.round(max * (4 - k) / 4); });

  peakG.textContent = "";

  if (only < 0) (data.peaks || []).forEach(([i, label]) => {

    if (i < 0 || i > 364) return;

    const y = ys[i], right = X(i) < W - 160;

    el("circle", { cx: X(i), cy: y, r: 4, fill: "none", stroke: "var(--ink)", class: "pu-ring" }, peakG);

    el("circle", { cx: X(i), cy: y, r: 3.2, fill: "var(--ink)" }, peakG);

    const t = el("text", { x: X(i) + (right ? 8 : -8), y: Math.max(T - 8, y - 8), "text-anchor": right ? "start" : "end", class: "pu-peak" }, peakG); t.textContent = label;

  });

}

build();

// Legend: a repository's own year.

const lg = document.getElementById("pulse-legend");

const btn = (label, c, idx) => { const b = document.createElement("button"); b.type = "button"; b.className = "pu-chip"; b.setAttribute("aria-pressed", String(idx === -1)); b.innerHTML = `<i style="background:${c}"></i>`; b.append(label); b.addEventListener("click", () => { only = idx; [...lg.children].forEach(c => c.setAttribute("aria-pressed", "false")); b.setAttribute("aria-pressed", "true"); build(); }); lg.appendChild(b); };

btn("all", "var(--ink)", -1);

data.repos.slice(0, PAL).forEach((n, i) => btn(n.split("/").pop(), col(i), i));

// The total counts up; the line draws itself in; then a heartbeat while idle.

const totalEl = document.getElementById("pulse-total"), total = Number(totalEl.dataset.total);

if (!reduce) { const t0 = performance.now(); const tick = now => { const p = Math.min(1, (now - t0) / 900); totalEl.textContent = Math.round(total * (1 - Math.pow(1 - p, 3))).toLocaleString("en-GB"); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }

else totalEl.textContent = total.toLocaleString("en-GB");

let idle = true, timer = 0;

function heartbeat() {

  if (reduce) return;

  clearTimeout(timer);

  timer = setTimeout(function run() {

    if (!idle || document.hidden) { timer = setTimeout(run, 2000); return; }

    const len = line.getTotalLength(), t0 = performance.now();

    const go = now => { const p = Math.min(1, (now - t0) / 2600), pt = line.getPointAtLength(len * p); beat.setAttribute("cx", pt.x); beat.setAttribute("cy", pt.y); beat.setAttribute("opacity", idle ? String(Math.sin(p * Math.PI)) : "0"); if (p < 1 && idle) requestAnimationFrame(go); else { beat.setAttribute("opacity", "0"); timer = setTimeout(run, 4500); } };

    requestAnimationFrame(go);

  }, 800);

}

if (!reduce) {

  const t0 = performance.now();

  const reveal = now => { const p = Math.min(1, (now - t0) / 1600); clipRect.setAttribute("width", L + (W - L) * (1 - Math.pow(1 - p, 3))); if (p < 1) requestAnimationFrame(reveal); };

  requestAnimationFrame(reveal);

  setTimeout(() => { clipRect.setAttribute("width", W); heartbeat(); }, 1700);

}

// Pointer: spotlight, scan line and the day's card.

const fmt = d => d.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short", year: "numeric", timeZone: "UTC" });

s.addEventListener("pointermove", e => {

  idle = false; beat.setAttribute("opacity", "0");

  const r = s.getBoundingClientRect(), x = (e.clientX - r.left) * (W / r.width);

  const i = Math.max(0, Math.min(364, Math.round((x - L) / ((W - L - R) / 364)))), d = days[i];

  spotRect.setAttribute("fill", "url(#pu-spot)"); spot.setAttribute("gradientTransform", `translate(${X(i)} ${ys[i]}) scale(160 240)`);

  scan.setAttribute("x1", X(i)); scan.setAttribute("x2", X(i)); scan.setAttribute("opacity", ".45");

  dot.setAttribute("cx", X(i)); dot.setAttribute("cy", ys[i]); dot.style.stroke = col(only < 0 ? top(d) : only); dot.setAttribute("opacity", "1");

  const n = val(d), share = d.t ? Math.round(100 * d.via / d.t) : 0;

  const bar = d.t ? d.by.map(([k, m]) => `<i style="width:${100 * m / d.t}%;background:${col(k)}"></i>`).join("") : "";

  const repos = d.by.slice().sort((a, b) => b[1] - a[1]).slice(0, 3).map(([k, m]) => `<div class="row"><span>${(data.repos[k] || "").split("/").pop()}</span><span>${m}</span></div>`).join("");

  card.innerHTML = `<b>${fmt(d.date)}</b><div class="row"><span>changes</span><span>${n}</span></div><div class="row"><span>via agents</span><span>${share}%</span></div>${only < 0 ? repos : ""}${bar ? `<div class="bar">${bar}</div>` : ""}`;

  card.style.opacity = "1";

  const px = e.clientX - r.left, cw = card.offsetWidth;

  card.style.left = Math.max(0, Math.min(r.width - cw, px + (px > r.width * .6 ? -cw - 14 : 14))) + "px";

});

s.addEventListener("pointerleave", () => { idle = true; spotRect.setAttribute("fill", "#fff"); scan.setAttribute("opacity", "0"); dot.setAttribute("opacity", "0"); card.style.opacity = "0"; });

document.addEventListener("visibilitychange", () => { if (!document.hidden) heartbeat(); });

})();

  </script>

  {% endif %}

</section>

/// One account's pushes of the last year in the repositories a viewer may

/// see, for the profile's pulse (#217): `(repo_id, at_ms, changes, via)`.

/// Landings are left out (their changes were pushed once already), as are

/// failed pushes and pushes that brought nothing.

pub async fn pulse(pool: &Pool, account_id: i64, repo_ids: &[i64], since_ms: i64) -> sqlx::Result<Vec<(i64, i64, i64, String)>> {

    let ids = serde_json::to_string(repo_ids).unwrap_or_else(|_| "[]".into());

    sqlx::query_as(

        "SELECT repo_id, at_ms, changes, via FROM pushes \

         WHERE account_id = ? AND ok = 1 AND changes > 0 AND at_ms >= ? AND reason NOT LIKE 'landed%' \

           AND repo_id IN (SELECT value FROM json_each(?)) ORDER BY at_ms",

    )

    .bind(account_id)

    .bind(since_ms)

    .bind(ids)

    .fetch_all(pool)

    .await

}

/// Releases an account made in the last year in repositories a viewer may

/// see: `(repo_id, tag, created_ms)`, to label the pulse's peaks.

pub async fn releases_by(pool: &Pool, account_id: i64, repo_ids: &[i64], since_ms: i64) -> sqlx::Result<Vec<(i64, String, i64)>> {

    let ids = serde_json::to_string(repo_ids).unwrap_or_else(|_| "[]".into());

    sqlx::query_as(

        "SELECT repo_id, tag, created_ms FROM releases WHERE author_id = ? AND created_ms >= ? \

           AND repo_id IN (SELECT value FROM json_each(?)) ORDER BY created_ms",

    )

    .bind(account_id)

    .bind(since_ms)

    .bind(ids)

    .fetch_all(pool)

    .await

}

    record_push_via(pool, id, pusher, "", results).await

}

/// [`record_push`], naming the agent token the push came through (#217).

pub async fn record_push_via(pool: &Pool, id: i64, pusher: Option<(i64, &str)>, via: &str, results: &[PushOutcome]) -> sqlx::Result<()> {

        sqlx::query("INSERT INTO pushes (repo_id, at_ms, reference, ok, reason, old_state, new_state, heads, changes, account_id, pusher, via) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)")

            .bind(via)

        let (pusher, via) = match self.caller(headers) {

            Ok(Caller::Token(account, token)) => {

                (Some((account.id, account.username)), if token.agent { token.name.clone() } else { String::new() })

            }

            Ok(Caller::Site) => (Some((0, "site token".to_string())), String::new()),

            _ => (None, String::new()),

            if let Err(e) = db::repos::record_push_via(&pool, row.id, who, &via, &results).await {

    /// The year's pulse as JSON for the page's script (#217); `<` escaped.

    pulse: String,

    /// Changes pushed in the last year, shown beside the pulse.

    pulse_total: i64,

const DAY_MS: i64 = 86_400_000;

/// The profile's pulse (#217): changes this account pushed each day of the

/// last year, in repositories the viewer may see, with the share pushed

/// through agent tokens, per repository, and its releases to label peaks.

/// `{"start": MS, "repos": [NAME], "days": [[TOTAL, VIA, [[REPO, N]..]]..],

/// "peaks": [[DAY, LABEL]..]}`, 365 days ending today (UTC).

async fn pulse_json(app: &Shared, account: &db::accounts::Account, seen: &[db::repos::RepoRow]) -> sqlx::Result<(String, i64)> {

    let today = db::now_ms() / DAY_MS;

    let first = today - 364;

    let ids: Vec<i64> = seen.iter().map(|r| r.id).collect();

    let rows = db::activity::pulse(&app.db, account.id, &ids, first * DAY_MS).await?;

    let (pulse, total) = pulse_of(&rows, seen, first);

    let mut value = pulse;

    let mut peaks = Vec::new();

    for (repo_id, tag, at) in db::activity::releases_by(&app.db, account.id, &ids, first * DAY_MS).await? {

        let name = seen.iter().find(|r| r.id == repo_id).map(|r| r.name.as_str()).unwrap_or("");

        peaks.push(serde_json::json!([at / DAY_MS - first, format!("{name} {tag}")]));

    }

    value["peaks"] = serde_json::Value::Array(peaks);

    Ok((value.to_string().replace('<', "\\u003c"), total))

}

/// The days of a pulse from push rows `(repo_id, at_ms, changes, via)`:

/// repositories ordered by how much went to them, most first.

fn pulse_of(rows: &[(i64, i64, i64, String)], seen: &[db::repos::RepoRow], first: i64) -> (serde_json::Value, i64) {

    let mut per_repo: std::collections::BTreeMap<i64, i64> = std::collections::BTreeMap::new();

    for (repo, _, n, _) in rows {

        *per_repo.entry(*repo).or_default() += n;

    }

    let mut order: Vec<(i64, i64)> = per_repo.into_iter().collect();

    order.sort_by(|a, b| b.1.cmp(&a.1).then(a.0.cmp(&b.0)));

    let names: Vec<String> = order

        .iter()

        .map(|(id, _)| seen.iter().find(|r| r.id == *id).map(|r| format!("{}/{}", r.owner, r.name)).unwrap_or_default())

        .collect();

    let slot = |id: i64| order.iter().position(|(r, _)| *r == id).unwrap_or(0);

    let mut days: Vec<(i64, i64, std::collections::BTreeMap<usize, i64>)> = vec![(0, 0, Default::default()); 365];

    let mut total = 0;

    for (repo, at, n, via) in rows {

        let d = at / DAY_MS - first;

        if !(0..365).contains(&d) {

            continue;

        }

        let day = &mut days[d as usize];

        day.0 += n;

        if !via.is_empty() {

            day.1 += n;

        }

        *day.2.entry(slot(*repo)).or_default() += n;

        total += n;

    }

    let days: Vec<serde_json::Value> = days

        .into_iter()

        .map(|(t, v, by)| serde_json::json!([t, v, by.into_iter().map(|(r, n)| serde_json::json!([r, n])).collect::<Vec<_>>()]))

        .collect();

    (serde_json::json!({ "start": first * DAY_MS, "repos": names, "days": days }), total)

}

        let (pulse, pulse_total) = pulse_json(&app, &account, &all).await.map_err(db_err)?;

        return Ok(Page(ProfilePage { shell, account, keys, orgs, repos, feed, is_me, pulse, pulse_total }).into_response());

/// #217: a profile shows the year's pulse: changes pushed per day in

/// repositories the viewer may see, the share via agent tokens, releases on

/// the peaks; landings and private repositories the viewer cannot see are

/// left out.

#[tokio::test(flavor = "multi_thread")]

async fn a_profile_shows_the_year_as_a_signal() {

    let h = hub().await;

    let app = &h.app;

    register(app, "andy", "").await;

    let andy = db::accounts::account_by_name(&app.db, "andy").await.unwrap().unwrap();

    let game = db::repos::create(&app.db, "andy", "game", "", hub_api::Visibility::Public).await.unwrap();

    let secret = db::repos::create(&app.db, "andy", "secret", "", hub_api::Visibility::Private).await.unwrap();

    let now = db::now_ms();

    for (repo, ago_days, changes, reason, via) in [

        (game.id, 3, 5, "", ""),

        (game.id, 3, 2, "", "Claude"),

        (game.id, 40, 4, "", ""),

        (game.id, 2, 9, "landed #1 (web)", ""),

        (secret.id, 1, 50, "", ""),

    ] {

        sqlx::query("INSERT INTO pushes (repo_id, at_ms, reference, ok, reason, changes, account_id, pusher, via) VALUES (?, ?, 'main', 1, ?, ?, ?, 'andy', ?)")

            .bind(repo)

            .bind(now - ago_days * 86_400_000)

            .bind(reason)

            .bind(changes)

            .bind(andy.id)

            .bind(via)

            .execute(&app.db)

            .await

            .unwrap();

    }

    sqlx::query("INSERT INTO releases (repo_id, tag, title, author_id, author, created_ms) VALUES (?, 'v1.0', 'One', ?, 'andy', ?)")

        .bind(game.id)

        .bind(andy.id)

        .bind(now - 3 * 86_400_000)

        .execute(&app.db)

        .await

        .unwrap();

    // A stranger sees the public repository only, and no landing counts.

    let page = get(app, "/andy", None).await.body;

    let start = page.find("id=\"pulse-data\">").expect("the pulse is on the profile") + "id=\"pulse-data\">".len();

    let json: serde_json::Value = serde_json::from_str(&page[start..start + page[start..].find("</script>").unwrap()]).unwrap();

    assert_eq!(json["repos"], serde_json::json!(["andy/game"]));

    let days = json["days"].as_array().unwrap();

    assert_eq!(days.len(), 365);

    let total: i64 = days.iter().map(|d| d[0].as_i64().unwrap()).sum();

    let via: i64 = days.iter().map(|d| d[1].as_i64().unwrap()).sum();

    assert_eq!((total, via), (11, 2), "5 + 2 + 4 changes, 2 via an agent; the landing and the private push left out");

    assert_eq!(days[361], serde_json::json!([7, 2, [[0, 7]]]), "three days ago");

    assert_eq!(json["peaks"][0], serde_json::json!([361, "game v1.0"]));

    assert!(

        page.contains("data-total=\"11\"") && page.find("pulse-box").unwrap() < page.find("<h2>Repositories</h2>").unwrap(),

        "above the repositories"

    );

}

    {% include "pulse.html" %}

/* The profile's pulse (oxygenhub#217): repository colours that read on

   both looks and both themes, and the agents' violet. */

:root { --pu1: #2f81f7; --pu2: #0fb5c9; --pu3: #2da44e; --pu4: #e3832a; --pu5: #d1453b; --pu6: #c2307a; --pu7: #b08800; --pu8: #8c959f; --pu-agent: #8a63d2; }

.pulse-box .card-head { flex-wrap: wrap; row-gap: 6px; }

.pulse-total { font-weight: 700; font-variant-numeric: tabular-nums; }

.pulse-legend { display: flex; flex-wrap: wrap; gap: 4px; }

button.pu-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 11.5px; border-radius: 999px; text-transform: none; letter-spacing: 0; }

button.pu-chip::first-letter { text-transform: none; }

button.pu-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

button.pu-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }

.pulse-stage { position: relative; padding: 8px 12px 4px; }

.pulse-stage svg { width: 100%; height: auto; display: block; touch-action: pan-y; }

.pulse-stage .pu-axis { font: 10px var(--mono, ui-monospace, monospace); fill: var(--mute); }

.pulse-stage .pu-peak { font: 11px var(--mono, ui-monospace, monospace); fill: var(--ink); }

.pulse-card { position: absolute; top: 6px; pointer-events: none; opacity: 0; transition: opacity .15s; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 170px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }

.pulse-card b { display: block; margin-bottom: 3px; }

.pulse-card .row { display: flex; justify-content: space-between; gap: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }

.pulse-card .row span:last-child { color: var(--ink); }

.pulse-card .bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 6px; background: var(--soft); }

@keyframes pu-ring { from { r: 4; opacity: .9; } to { r: 15; opacity: 0; } }

.pu-ring { animation: pu-ring 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) { .pu-ring { animation: none; opacity: 0; } }