feat(web): a denser sky, every change and run a mark; short links; the name above (refs #157) df5c69cbd047

    } else if (vshape < 4.5) {

        d = abs(length(uv) - 0.85) - 0.12;          // a repository: a thin ring

        d = max(a.x, a.y) * 1.15 - 1.0;             // a Flow run: a square

    /// The name above the cluster a cursor rests by (§4): faded in and out

    /// by CSS, which centres it on `left` and sets its foot on `top`.

                let _ = style.set_property("left", &format!("{}px", x as i32));

                let _ = style.set_property("top", &format!("{}px", y as i32));

/// The page's data (§5): `{now, repos: [name], events: [[repo, kind, at_ms, n]]}`.

            let n = e.get(3).as_f64().unwrap_or(1.0).max(1.0) as u32;

            Some(Event { repo, kind, age_days: ((now - at) / 86_400_000.0).max(0.0) as f32, n })

/// The longest link: only marks that happened one after another and sit

/// near each other are joined, so a busy repository reads as a

/// constellation, not a scribble.

const LINK_MAX: f32 = 70.0;

/// The most marks one push makes (one a change), and in all.

const PER_PUSH: u32 = 40;

const MAX_MARKS: usize = 3000;

    /// A Flow run.

    Run,

    /// The code the page's data uses: 0 a push's change, 1 a proposal

    /// event, 2 an issue event, 3 a release, 4 a Flow run.

            4 => Kind::Run,

    /// 3 four-point star, 4 thin ring (a repository), 5 square.

            Kind::Run => 5.0,

            Kind::Push => 2.0,

            Kind::Run => 2.2,

/// repositories), its kind, how old it is, and how many marks it makes (a

/// push's changes; one otherwise).

    pub n: u32,

        // Each event's marks: a push is a dot for each change it brought.

        let expanded: Vec<Event> = events

            .iter()

            .filter(|e| e.repo < repos.len() && e.age_days <= DAYS)

            .flat_map(|e| std::iter::repeat_n(*e, if e.kind == Kind::Push { e.n.clamp(1, PER_PUSH) as usize } else { 1 }))

            .take(MAX_MARKS)

            .collect();

        // A busy repository gets more lanes, so its marks spread out.

        let mut count = vec![0u32; repos.len()];

        for e in &expanded {

            count[e.repo] += 1;

        }

        for e in &expanded {

            let lanes = (6 + count[e.repo] / 30).min(14);

            let radius = 20.0 + (k % lanes) as f32 * 9.0 + unit(h, 0) * 6.0;

                if (a.0 - b.0).hypot(a.1 - b.1) > LINK_MAX {

    }

    /// How far a cluster's marks reach from its core.

    fn reach(&self, c: usize) -> f32 {

        self.marks.iter().filter(|m| m.cluster == c).map(|m| m.radius).fold(0.0, f32::max)

    /// The name to show for a resting cursor, and where: centred just

    /// above the nearest cluster within reach, clear of its marks.

            .map(|(i, cx, cy, _)| (self.clusters[i].name.as_str(), cx, cy - self.reach(i) - 10.0))

            Event { repo: 0, kind: Kind::Push, age_days: 0.0, n: 3 },

            Event { repo: 0, kind: Kind::Proposal, age_days: 2.0, n: 1 },

            Event { repo: 1, kind: Kind::Release, age_days: 29.0, n: 1 },

            Event { repo: 1, kind: Kind::Issue, age_days: 45.0, n: 1 },

        // A core per repository, a dot per change pushed, and one mark per

        // other event of the last 30 days.

        assert_eq!(a.marks.len(), 2 + 3 + 1 + 1);

/// One event of Your sky (docs/backgrounds.md §5): its repository, when,

/// its kind (0 a push, 1 a proposal event, 2 an issue event, 3 a release,

/// 4 a Flow run) and how many marks it makes: a push's changes, else one.

#[derive(Clone, Debug, FromRow)]

pub struct SkyEvent {

    pub repo_id: i64,

    pub at_ms: i64,

    pub kind: i64,

    pub n: i64,

}

/// The events since `since_ms` in `repo_ids`, newest first, at most `limit`.

pub async fn sky(pool: &Pool, repo_ids: &[i64], since_ms: i64, limit: i64) -> sqlx::Result<Vec<SkyEvent>> {

    sqlx::query_as(

        "WITH seen(id) AS (SELECT value FROM json_each(?)), ev AS ( \

           SELECT repo_id, at_ms, 0 AS kind, MAX(changes, 1) AS n FROM pushes WHERE ok = 1 \

           UNION ALL SELECT p.repo_id, e.at_ms, 1, 1 FROM proposal_events e JOIN proposals p ON p.id = e.proposal_id \

           UNION ALL SELECT i.repo_id, e.at_ms, 2, 1 FROM issue_events e JOIN issues i ON i.id = e.issue_id \

           UNION ALL SELECT repo_id, created_ms, 3, 1 FROM releases \

           UNION ALL SELECT repo_id, created_ms, 4, 1 FROM flow_runs) \

         SELECT repo_id, at_ms, kind, n FROM ev WHERE repo_id IN (SELECT id FROM seen) AND at_ms >= ? \

         ORDER BY at_ms DESC LIMIT ?",

    )

    .bind(ids_json(repo_ids))

    .bind(since_ms)

    .bind(limit)

    .fetch_all(pool)

    .await

}

/// The most events Your sky reads, and how far back (docs/backgrounds.md §5).

const SKY_EVENTS: i64 = 1500;

/// `{now, repos: [slug], events: [[repo, kind, at_ms, n]]}` with kinds 0 a

/// push of `n` changes, 1 a proposal event, 2 an issue event, 3 a release,

/// 4 a Flow run. Only the database is read, never a repository's store;

/// `<` is escaped so the JSON is safe in a script.

fn sky_json(mine: &[db::repos::RepoRow], events: &[db::activity::SkyEvent], now: i64) -> String {

            let repo = mine.iter().position(|r| r.id == e.repo_id)?;

            Some(serde_json::json!([repo, e.kind, e.at_ms, e.n]))

    let now = db::now_ms();

    let sky = db::activity::sky(&app.db, &mine_ids, now - SKY_DAYS * 86_400_000, SKY_EVENTS).await.map_err(db_err)?;

    let backdrop = sky_json(&mine, &sky, now);

Status: the engine and the dashboard's Your sky are built (oxygenhub#157,

2026-10-13); the other scenes are proposed (oxygenhub#156).

| `--bd-mark` | a resting mark | `--mute` at 16% | `--mute` at 14% | `--acc` at 12% |

  marks only when they belong together in the data: events of the same

  repository that happened one after another and sit within 70 px of

  each other, so a busy repository reads as a constellation, not a

  scribble. Lines fade as the cursor moves on or rests for 2 s.

  fades in just above the cluster's outer ring in `--mute`, small. This is the only text a backdrop

- the repositories in Your repositories, by name;

- up to 1,500 events from the last 30 days across them (pushes,

  proposal and issue events, releases, Flow runs), each with its

  repository, kind and time, and for a push the number of changes it

  brought. A push draws one dot for each change, up to 40, and the sky

  draws up to 3,000 marks.

- The most active repositories sit in the front layer and the quiet ones

  further back.

- Kinds differ by shape, not colour: a change pushed is a dot, a

  proposal event a small diamond, an issue event a ring, a release a

  four-point star, a Flow run a small square, and the repository itself a

  thin ring at the cluster's core.

- A busy repository gets more orbit lanes (6 to 14), so its marks spread

  out instead of piling up.

The engine is Rust compiled to WebAssembly (Andy's choice, 2026-10-13):

`crates/backdrop`, a workspace of its own outside the hub's. `sky.rs` is

the scene with no browser in it, tested natively; `gl.rs` draws it;

`lib.rs` is the browser glue. `make backdrop` builds it for

`wasm32-unknown-unknown` and runs `wasm-bindgen --target web` into

`assets/backdrop/` (about 186 KB of wasm, 60 KB gzipped, and the glue),

which is committed and embedded in the hub, as `make ts` commits the API

types, so neither the hub build nor its offline CI needs the wasm

toolchain. `make backdrop-check` runs its fmt, clippy (wasm32) and tests.

- **Drawing.** WebGL2 with instanced quads for marks (one draw for all,

  each shape a signed distance in the fragment shader) and one line

  buffer for links. Without WebGL2 there is no backdrop, and nothing

**Why Rust and WASM.** A small script would have done for a few hundred

marks; Rust keeps the whole of Oxygen in one language, lets the scene be

tested like the rest, and is ready for scenes with heavy layout (a

repository's full change graph) where sharing oxy-core's own types would

pay. The cost is kept out of the hub's build by committing the output.

.bd-label { position: fixed; z-index: -1; pointer-events: none; transform: translate(-50%, -100%); font-size: 12px; color: var(--mute); opacity: 0; transition: opacity .3s; white-space: nowrap; }