5c0aaf0 · f6fbac9 · 64e1c1c
@@ -0,0 +1,9 @@
# Space
The repository space (`/:owner/:name/space`, `docs/features/space.md`): one full-screen canvas with a few controls over it. Buttons are the forge's `btn()`; the panel's facts are a `status-rows` `dl`.
- `.space` — the full-screen surface the canvas, bar, panel and time controls sit on.
- `.space-bar` — the row of buttons at the top; shown only when the script runs.
- `.space-time` — the scrubber along the bottom; shown only when the script runs.
- `.space-panel` — what a tapped issue or crew member is on: a heading and rows, on the page background with one hairline.
- `.space-list` — the pillar list the server draws; hidden when the script runs.
@@ -0,0 +1,29 @@
# The space
`/:owner/:name/space` is the map as a plane you move through (#10444). It is
linked from the map page ("The same work as a space to move through"). Its data
is `/:owner/:name/space.json`, the same plane for an agent. In the terminal it is the `space` entry in the palette (`src/tui/screens/space.ts`): pillars with their counts, issues by state, who of the crew is on what, and the week's landings, from the same `spaceOf` and so the same gate as the page (a guest sees what is public, an admin everything).
## Use
- **Move.** Drag (or two fingers) to pan; pinch, wheel or `+`/`-` (also with ⌘/Ctrl) to zoom; arrows pan; `0` or **Fit** shows the whole plane; `n` or **Now** returns to live. No page scroll fights it (`touch-action: none`).
- **Semantic zoom.** Out: pillars are regions whose area follows open work, with a progress bar (landed ÷ open + landed over the week) and whether they moved. In: each region's issues sit in clusters by state (ready, building, in review, waiting, landed). Further in: an issue is a card with its title, then its pull, checks and the crew member on it. Words are set at a fixed pixel size at every level; detail is added, nothing shrinks.
- **Time.** The scrubber replays the last 7 days: issues appear when opened, slide from "in review" to "landed" when they close, and crew members sit on what they were running then. **Play** runs the week in 20 seconds. At **Now** the view is live: any run, issue or pull event of the repository fetches the plane again.
- **Crew.** Their avatars sit on the issue they are working; tap one (or its name in the bar) to see what they are on.
- **Share.** The view is in the address hash: `#x=…&y=…&z=…` (centre in world units, zoom relative to Fit) and `&t=` (minutes since the epoch) when scrubbed back.
## How it is built
- `src/web/space_model.ts` — pure placement: treemap of regions, grid of cells per cluster. Plain data in, compact arrays out.
- `src/web/space_read.ts` — reads what the map page reads (graph, words, pillars, runs) and keeps the answer by the write clock (`map_snapshot.ts`).
- `src/web/space_view.ts` — the client's arithmetic (placement over time, crew at a time, address hash, tap picking) as plain functions; the page ships their source, the tests call them.
- `src/web/space_client.ts` — one 2D canvas, drawn only when the view changed; culls to the viewport.
- `src/web/pages/space.ts` — the page (server-rendered pillar list under the canvas for no-JS readers) and the JSON.
`space.json` carries an ETag (the body's hash): a refetch after an event whose change the plane does not draw is answered 304, and the body is encoded by the server (`http/compress.ts`) otherwise. About 1.5 MB at forge scale before encoding.
Without script the page is the pillar list alone: the canvas, bars and scrubber show only once the script sets `space-on`. If the first load fails the list stays and says so. State is told by a cluster's label and position and by weight (muted as work ages), not by hue; the accent is for the crew and the controls.
Assumptions shown: the week's landed work is the closed issues the map's graph still carries (those on an edge); issues closed more than 7 days ago are not drawn. Before an issue landed, it is drawn in review, its slot there reserved by the layout (history of earlier states is not stored).
Test: `test/space-model.test.ts` places 12,000 issues and checks the size of the JSON (under 3 MB; the time is logged, not asserted); `test/space-view.test.ts` tests the client's placement, crew, hash and tap functions, which the page ships from `src/web/space_view.ts`; the canvas's own paint is measured by hand on a device, not in a test.
@@ -231,6 +231,7 @@
import { issuePicture } from "../web/studio/picture.ts";
import { tellHerePage } from "../web/studio/tell_here.ts";
import { globalMapPage } from "../web/pages/global-map.ts";
import { mapPage } from "../web/pages/map.ts";
import { spaceJson, spacePage } from "../web/pages/space.ts";
import { firstSubmit } from "../web/pages/first.ts";
import { nextPage, nextSubmit } from "../web/pages/next.ts";
import { weekPage, weekSubmit } from "../web/pages/week.ts";
@@ -1194,6 +1195,8 @@
export function buildRouter(): Router<Handler> {
  router.add("GET", "/:owner/:name/held", heldPage);
  router.add("POST", "/:owner/:name/held/apply", heldApply);
  router.add("GET", "/:owner/:name/map", mapPage);
  router.add("GET", "/:owner/:name/space", spacePage);
  router.add("GET", "/:owner/:name/space.json", spaceJson);
  router.add("GET", "/:owner/:name/next", nextPage);
  router.add("POST", "/:owner/:name/next", nextSubmit);
  router.add("GET", "/:owner/:name/week", weekPage);
@@ -20,6 +20,7 @@
import { packsCommand } from "./screens/packs.ts";
import { shellsScreen } from "./screens/shells.ts";
import { forkTreeScreen } from "./screens/fork_tree.ts";
import { roadmapScreen } from "./screens/roadmap.ts";
import { spaceScreen } from "./screens/space.ts";
import { App, type Ctx, type Screen } from "./app/app.ts";
import type { Command, PaletteItem, PaletteSearch } from "./app/palette.ts";
import { G } from "./term/screen.ts";
@@ -141,6 +142,11 @@
const REPO_VERBS: readonly {
    title: "Roadmap of a repository",
    open: (f, ctx, repo) => roadmapScreen(f, ctx, repo),
  },
  {
    id: "space",
    title: "Space of a repository",
    open: (f, ctx, repo) => spaceScreen(f, ctx, repo),
  },
  {
    id: "pulls",
    title: "Pull requests in a repository",
@@ -0,0 +1,80 @@
/**
 * The space in the terminal (#10444): the plane the page draws, as text. The
 * same `spaceOf` the page and `space.json` read, so a guest sees what is
 * public and an admin everything. Per pillar: its counts, its issues by state,
 * then who of the crew is on what, and the week's landings.
 */
import type { Repo } from "../../core/repos.ts";
import { spaceOf } from "../../web/space_read.ts";
import type { ClusterRow, IssueRow, Region, State } from "../../web/space_model.ts";
import type { Ctx, Screen } from "../app/app.ts";
import { binding } from "../app/keys.ts";
import type { Session } from "../session.ts";
import { style } from "../term/style.ts";
import { wrap } from "../term/width.ts";
import { Scroll } from "./common.ts";
const NAMES: Record<State, string> = { ready: "Ready", building: "Building", review: "In review", waiting: "Waiting", landed: "Landed" };
/** The space as text lines, wrapped to `width`. */
export function spaceLines(space: Record<string, unknown>, width = 80): string[] {
  const w = Math.max(20, width);
  const regions = space.regions as Region[];
  const clusters = space.clusters as ClusterRow[];
  const states = space.states as State[];
  const issues = space.issues as IssueRow[];
  const crew = space.crew as { name: string; runs: [number, number, number][] }[];
  const now = space.now as number;
  const out: string[] = [];
  regions.forEach((r, ri) => {
    out.push(`${r.name}  ${r.open} open, ${r.ready} ready, ${r.landed} landed this week${r.moving ? "" : ", still"}`);
    const by = new Map<State, IssueRow[]>();
    for (const row of issues) {
      const c = clusters[row[1]];
      if (c === undefined || c[0] !== ri) continue;
      const st = states[c[1]!]!;
      by.set(st, [...(by.get(st) ?? []), row]);
    }
    for (const st of states) {
      const rows = by.get(st);
      if (rows === undefined) continue;
      out.push(`  ${NAMES[st]} (${rows.length})`);
      for (const row of rows) out.push(...wrap(`    #${row[0]} ${row[6]}${row[7] ? ` (pull #${row[7]}${row[12] ? `, checks ${row[12]}` : ""})` : ""}`, w));
    }
    out.push("");
  });
  const on = crew.flatMap((m) => {
    const cur = m.runs.find((run) => run[1] <= now && (run[2] === 0 || run[2] > now));
    return cur === undefined ? [] : [`  ${m.name} is on #${cur[0]}`];
  });
  out.push("The crew", ...(on.length === 0 ? ["  Nobody is building right now."] : on), "");
  const landed = issues.filter((row) => row[5] > 0).sort((a, b) => b[5] - a[5]);
  out.push(`Landed this week (${landed.length})`, ...landed.flatMap((row) => wrap(`  #${row[0]} ${row[6]}`, w)));
  return out;
}
export function spaceScreen(f: Session, ctx: Ctx, repo: Repo): Screen {
  const scroll = new Scroll();
  let lines: string[] = [];
  return {
    title: `Space · ${repo.ownerName}/${repo.name}`,
    keys: [binding(["j", "k"], "scroll"), binding(["esc"], "back")],
    render(area, s) {
      const c = ctx.theme.c;
      lines = spaceLines(spaceOf(f.app, repo, f.user), area.w - 4);
      const from = scroll.window(area.h, lines.length);
      for (let i = 0; i < area.h; i++) {
        const line = lines[from + i];
        if (line !== undefined) s.text(area.x + 1, area.y + i, line, style(c.fg, c.bg), area.x + area.w);
      }
    },
    key(e) {
      if (e.key === "esc" || e.key === "q") {
        ctx.pop();
        return true;
      }
      return scroll.key(e, lines.length);
    },
  };
}
@@ -28,14 +28,14 @@
export function mapSnapshots(db: Database): Stamped<Record<string, unknown>> {
/** `build()` once per repository, scope and minute while nothing has been written. */
export function cachedMap(
  db: Database,
  key: { repoId: string; scope: { sealed?: true; sealedBy?: string }; now: Date },
  key: { repoId: string; scope: { sealed?: true; sealedBy?: string }; now: Date; kind?: string },
  build: () => Record<string, unknown>,
): { value: Record<string, unknown>; hit: boolean } {
  const stamp = writeStamp(db);
  if (stamp === undefined) return { value: build(), hit: false };
  const cache = mapSnapshots(db);
  const before = cache.hits;
  const k = `map:${key.repoId}:${scopeKey(key.scope)}:${key.now.toISOString().slice(0, 16)}`;
  const k = `${key.kind ?? "map"}:${key.repoId}:${scopeKey(key.scope)}:${key.now.toISOString().slice(0, 16)}`;
  const value = cache.get(k, stamp, build);
  return { value, hit: cache.hits > before };
}
@@ -1439,7 +1439,7 @@
export async function mapPage(ctx: Ctx): Promise<Response> {
        body: html`${repoHeader(ctx, repo, "map")}
          <div class="page-head mt">
            <h1>Roadmap</h1>
            <p class="muted small"><a href="${base}/map?view=graph">The graph</a></p>
            <p class="muted small"><a href="${base}/map?view=graph">The graph</a> · <a href="${base}/space">The space</a></p>
          </div>
          <div
            class="rm"
@@ -1500,6 +1500,7 @@
export async function mapPage(ctx: Ctx): Promise<Response> {
      <p class="muted">
        What waits for what. The top edge is ready now; the chain in the accent
        is the least work that still has to happen in order.
        <a href="${repoBase(repo)}/space">The same work as a space to move through</a>.
        <a href="${repoBase(repo)}/milestones">How far each milestone is</a>.
        <a href="${repoBase(repo)}/next">Next up</a> is the one ranked list the crew builds from.
      </p>
@@ -0,0 +1,92 @@
/**
 * The space (#10444): `/:owner/:name/space`, the map as a full-screen plane
 * you move through, and `/:owner/:name/space.json`, the same plane as data.
 * The page server-renders the pillars as a list (what you see before the
 * script runs, and what a reader without it gets), then the canvas
 * (`space_client.ts`) takes the screen. The view is in the address hash, so
 * a link reproduces it.
 */
import type { Ctx } from "../../http/context.ts";
import { notePhase, takeSessionTime, timePhase } from "../../core/route_timing.ts";
import { holds, weakEtag } from "../../http/etag.ts";
import { loadRepo, notFoundPage, repoBase } from "../chrome.ts";
import { html } from "../html.ts";
import { page } from "../layout.ts";
import { btn } from "../ui.ts";
import { spaceCss, spaceJs } from "../space_client.ts";
import type { Region } from "../space_model.ts";
import { spaceOf } from "../space_read.ts";
/** The plane as JSON: for the canvas, and for an agent that wants the numbers. */
export function spaceJson(ctx: Ctx): Response {
  notePhase(ctx.request, "session", takeSessionTime(ctx.request));
  const repo = loadRepo(ctx);
  if (!repo) return notFoundPage(ctx);
  const space = timePhase(ctx.request, "space", () => spaceOf(ctx.app, repo, ctx.auth.user));
  // The tag is the body's bytes: a run, issue or pull event refetches the plane,
  // and when nothing it draws moved the answer is a header, not ~1.5 MB. The
  // body is encoded by the server for every response (`http/compress.ts`).
  const body = JSON.stringify(space);
  const etag = weakEtag(body);
  const headers = { "cache-control": "private, no-cache", etag };
  if (holds(ctx.request, etag)) return new Response(null, { status: 304, headers });
  return new Response(body, { headers: { "content-type": "application/json", ...headers } });
}
export function spacePage(ctx: Ctx): Response {
  notePhase(ctx.request, "session", takeSessionTime(ctx.request));
  const repo = loadRepo(ctx);
  if (!repo) return notFoundPage(ctx);
  const base = repoBase(repo);
  const space = timePhase(ctx.request, "space", () => spaceOf(ctx.app, repo, ctx.auth.user));
  const regions = space.regions as Region[];
  const rendering = performance.now();
  const response = page({
    ctx,
    title: `Space · ${repo.name}`,
    bare: true,
    body: html`<div
      class="space"
      id="space"
      data-base="${base}"
      data-repo="${repo.ownerName}/${repo.name}"
      data-src="${base}/space.json"
    >
      <canvas
        id="space-cv"
        tabindex="0"
        role="img"
        aria-label="${repo.name}: ${regions.length} pillars, drawn by open work. Zoom in for issues."
      ></canvas>
      <div class="space-bar">
        ${btn("Map", { href: `${base}/map`, variant: "outline", size: "sm" })}
        ${btn("Fit", { type: "button", id: "space-fit", variant: "outline", size: "sm" })}
        ${btn("+", { type: "button", id: "space-in", label: "Zoom in", variant: "outline", size: "sm" })}
        ${btn("−", { type: "button", id: "space-out", label: "Zoom out", variant: "outline", size: "sm" })}
        <span id="space-crew"></span>
      </div>
      
        sentinelcrew
        1d ago
        outdated
      
      Principle 3/1 and JS-off: the control bars above are inert without script, and this caveat repeats the docs. Render controls only when the script runs; say the caveat once.
    
      <aside class="space-panel" id="space-panel" hidden></aside>
      <div class="space-time">
        ${btn("Play", { type: "button", id: "space-play", variant: "outline", size: "sm" })}
        <input type="range" id="space-t" min="0" max="10080" step="1" value="10080" aria-label="Time, the last 7 days" />
        <output id="space-clock">Now</output>
        ${btn("Now", { type: "button", id: "space-now", variant: "outline", size: "sm" })}
      </div>
      <div class="space-list">
        <h1>${repo.name}</h1>
        <p id="space-error" class="muted" hidden>The canvas could not load the space. The pillars are below.</p>
        <ul>
          ${regions.map(
            (r) =>
              html`<li><strong>${r.name}</strong> ${r.open} open, ${r.ready} ready, ${r.landed} landed this week</li>`,
          )}
        </ul>
      </div>
    </div>`,
    styleCss: spaceCss,
    scriptJs: spaceJs,
  });
  notePhase(ctx.request, "render", performance.now() - rendering);
  return response;
}
@@ -0,0 +1,461 @@
/**
 * The space's canvas (#10444): one full-screen 2D canvas, drawn only when
 * something changed, from the compact arrays `space_model.ts` places. The
 * script is a hashed file the page ships (`layout.ts`, `scriptJs`); the
 * data is `space.json`, fetched once and again when the live channel says
 * the repository moved.
 *
 * Detail appears as you zoom rather than shrinking: what is drawn is chosen
 * by the size of a cluster's cell on the screen, and every word is set at a
 * fixed pixel size so it stays readable at each level. Nothing here builds
 * markup from data: text goes to the canvas or to `textContent`.
 */
import { viewJs } from "./space_view.ts";
export const spaceCss = /* css */ `
html.space-on, html.space-on body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.space { position: fixed; inset: 0; background: var(--bg); color: var(--fg); overflow: auto; }
.space canvas, .space-bar, .space-time { display: none; }
html.space-on .space { overflow: hidden; }
html.space-on .space canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
html.space-on .space canvas:active { cursor: grabbing; }
      
        sentinelcrew
        1d ago
        outdated
      
      Principle 6 and 5: every button/link gets a bordered box with an accent hover. Use the named button component; a hairline only where a thing ends.
    
html.space-on .space-bar { display: flex; position: absolute; left: 0; right: 0; top: 0; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .5rem .75rem; pointer-events: none; }
.space-bar > *, .space-bar span > * { pointer-events: auto; }
.space-bar span { display: contents; }
html.space-on .space-time { display: flex; position: absolute; left: 0; right: 0; bottom: 0; gap: .6rem; align-items: center; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 60%); }
.space-time input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.space-time output { font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
.space-panel { position: absolute; right: .75rem; top: 3.5rem; width: min(22rem, calc(100% - 1.5rem)); background: var(--bg); border-left: 1px solid var(--border); padding: .75rem 1rem; }
      
        sentinelcrew
        1d ago
        outdated
      
      Principle 7 and 6: the panel is a bordered card. Make it rows (a dl) on the page background with at most a hairline.
    
.space-panel[hidden] { display: none; }
.space-panel h2 { font-size: 1rem; margin: 0 0 .35rem; }
.space-panel .status-rows { margin-top: 0; border-top: 0; }
html.space-on .space-list { display: none; }
.space-list { padding: 4rem 1rem 2rem; max-width: 40rem; }
.space-list ul { list-style: none; padding: 0; margin: 0; }
`;
export const spaceJs = /* js */ `
(function () {
${viewJs}
  var root = document.getElementById('space');
  var cv = document.getElementById('space-cv');
  if (!root || !cv || !cv.getContext) return;
  document.documentElement.classList.add('space-on');
  var g = cv.getContext('2d');
  var base = root.getAttribute('data-base');
  var repo = root.getAttribute('data-repo');
  var dataUrl = root.getAttribute('data-src');
  var panel = document.getElementById('space-panel');
  var slider = document.getElementById('space-t');
  var clock = document.getElementById('space-clock');
  var crewBox = document.getElementById('space-crew');
  var playBtn = document.getElementById('space-play');
  var S = null, rows = [], W = 0, H = 0, dpr = 1;
  var view = { x: 0, y: 0, k: 1 };          // world point at the centre, pixels per world unit
  var fitK = 1, T = 0, live = true, dirty = true, playing = false, flight = null;
  var GLIDE = 4 * 3600000;                  // a landing slides from review to landed over this much time
  var NAMES = { ready: 'Ready', building: 'Building', review: 'In review', waiting: 'Waiting', landed: 'Landed' };
  var style = getComputedStyle(root);
  function token(name, fallback) { return style.getPropertyValue(name).trim() || fallback; }
  var fg = style.color || 'currentColor';
  var accent = token('--accent', fg);
  var accentFg = token('--accent-fg', fg);
  var ground = token('--bg', 'Canvas');
  // One accent, for interaction (the crew). A state is told by its cluster's label and position; its weight is muted as it ages.
  var WEIGHT = { ready: 1, building: 1, review: 0.7, waiting: 0.5, landed: 0.35 };
  var sans = style.fontFamily || 'system-ui, sans-serif';
  var picked = null;                        // {kind:'issue'|'crew', ...}
  function ago(ms) {
    var m = Math.round(ms / 60000);
    if (m < 1) return 'just now';
    if (m < 90) return m + ' min ago';
    var h = Math.round(m / 60);
    return h < 48 ? h + ' h ago' : Math.round(h / 24) + ' d ago';
  }
  // ---- data ----
  function load(first) {
    return fetch(dataUrl, { credentials: 'same-origin', headers: { accept: 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : Promise.reject(r); })
      .then(function (data) {
        S = data; rows = data.issues;
        slider.max = String(Math.max(1, Math.round((S.now - S.weekStart) / 60000)));
        if (live) T = S.now;
        slider.value = String(Math.round((T - S.weekStart) / 60000));
        crewChips();
        if (first) { resize(); fit(true); fromHash(); }
        if (picked) refreshPanel();
        dirty = true;
      })
      .catch(function () {
        // The list the server drew is the page; say why the canvas is not.
        if (first) { document.documentElement.classList.remove('space-on'); root.setAttribute('data-failed', ''); }
        clock.textContent = 'Could not load';
        var note = document.getElementById('space-error'); if (note) note.hidden = false;
      });
  }
  // placement, crew, hash and picking are space_view.ts, shipped ahead of this script
  function crewNow() { return S ? crewAt(S.crew, rows, T) : []; }
  function at(r) { return placeAt(r, T); }
  // ---- view ----
  function resize() {
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    W = root.clientWidth; H = root.clientHeight;
    cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
    if (S) { var old = fitK; computeFit(); if (old !== fitK && view.k === old) view.k = fitK; }
    dirty = true;
  }
  function computeFit() {
    fitK = Math.min(W / S.world.w, H / S.world.h) * 0.94;
  }
  function limits() { return [fitK * 0.5, Math.max(fitK * 60, 6)]; }
  function fit(now) {
    computeFit();
    fly({ x: S.world.w / 2, y: S.world.h / 2, k: fitK }, now);
  }
  function fly(to, instant) {
    if (instant) { view.x = to.x; view.y = to.y; view.k = to.k; flight = null; dirty = true; hashSoon(); return; }
    flight = { from: { x: view.x, y: view.y, k: view.k }, to: to, t0: performance.now() };
    dirty = true;
  }
  function step(now) {
    if (flight) {
      var p = clamp((now - flight.t0) / 420, 0, 1), e = ease(p), f = flight.from, t = flight.to;
      // Zoom in log space so the motion feels even.
      view.k = f.k * Math.pow(t.k / f.k, e);
      view.x = f.x + (t.x - f.x) * e; view.y = f.y + (t.y - f.y) * e;
      if (p >= 1) { flight = null; hashSoon(); }
      dirty = true;
    }
    if (playing && S) {
      T += (7 * 86400000 / 20000) * Math.min(now - (step.last || now), 100);
      if (T >= S.now) { T = S.now; playing = false; live = true; playBtn.textContent = 'Play'; }
      else live = false;
      slider.value = String(Math.round((T - S.weekStart) / 60000));
      dirty = true; hashSoon();
    }
    step.last = now;
    if (dirty && S) { dirty = false; draw(); }
    requestAnimationFrame(step);
  }
  function toScreen(x, y) { return [(x - view.x) * view.k + W / 2, (y - view.y) * view.k + H / 2]; }
  function toWorld(sx, sy) { return [(sx - W / 2) / view.k + view.x, (sy - H / 2) / view.k + view.y]; }
  function zoomAt(sx, sy, factor) {
    var l = limits(), k2 = clamp(view.k * factor, l[0], l[1]);
    var w = toWorld(sx, sy);
    view.k = k2;
    view.x = w[0] - (sx - W / 2) / k2; view.y = w[1] - (sy - H / 2) / k2;
    flight = null; dirty = true; hashSoon();
  }
  // ---- drawing ----
  function font(px, weight) { g.font = (weight || 400) + ' ' + px + 'px ' + sans; }
  function wrap(text, width, maxLines) {
    var words = text.split(' '), lines = [], line = '';
    for (var i = 0; i < words.length; i++) {
      var t = line ? line + ' ' + words[i] : words[i];
      if (g.measureText(t).width <= width || !line) line = t;
      else { lines.push(line); line = words[i]; if (lines.length === maxLines) break; }
    }
    if (lines.length < maxLines && line) lines.push(line);
    else if (line && lines.length === maxLines) lines[maxLines - 1] += '\\u2026';
    return lines.map(function (l) {
      while (g.measureText(l).width > width && l.length > 1) l = l.slice(0, -2) + '\\u2026';
      return l;
    });
  }
  function fitText(text, width) {
    if (g.measureText(text).width <= width) return text;
    while (text.length > 1 && g.measureText(text + '\\u2026').width > width) text = text.slice(0, -1);
    return text + '\\u2026';
  }
  function draw() {
    g.setTransform(dpr, 0, 0, dpr, 0, 0);
    g.clearRect(0, 0, W, H);
    var k = view.k, tl = toWorld(0, 0), br = toWorld(W, H);
    g.textBaseline = 'alphabetic';
    // Regions: the pillars.
    S.regions.forEach(function (r) {
      if (r.x > br[0] || r.y > br[1] || r.x + r.w < tl[0] || r.y + r.h < tl[1]) return;
      var p = toScreen(r.x, r.y), rw = r.w * k, rh = r.h * k;
      g.globalAlpha = 0.07; g.fillStyle = fg; g.fillRect(p[0], p[1], rw, rh);
      g.globalAlpha = 0.22; g.strokeStyle = fg; g.lineWidth = 1; g.strokeRect(p[0] + 0.5, p[1] + 0.5, rw - 1, rh - 1);
      g.globalAlpha = 1;
      // The label sticks to the top of the region's visible part, so it is readable at every depth.
      var ly = Math.max(p[1], 0) + 4;
      if (ly > p[1] + rh - 22) ly = p[1] + 4;
      var lx = Math.max(p[0], 0) + 10;
      var room = Math.min(p[0] + rw, W) - lx - 8;
      if (room > 30) {
        var size = clamp(rw / 14, 13, 24);
        g.save(); g.beginPath(); g.rect(p[0], p[1], rw, rh); g.clip();
        font(size, 700); g.fillStyle = fg;
        g.fillText(fitText(r.name, room), lx, ly + size);
        if (room > 150) {
          font(12, 400); g.globalAlpha = 0.7;
          var bits = r.open + ' open \\u00b7 ' + r.ready + ' ready';
          if (r.landed) bits += ' \\u00b7 ' + r.landed + ' landed';
          g.fillText(fitText(bits + (r.moving ? '' : ' \\u00b7 still'), room), lx, ly + size + 17);
          g.globalAlpha = 1;
          var bw = Math.min(room, 180), by = ly + size + 26;
          g.globalAlpha = 0.2; g.fillRect(lx, by, bw, 4);
          g.globalAlpha = 1; g.fillStyle = fg; g.fillRect(lx, by, bw * r.progress, 4);
        }
        g.restore();
      }
    });
    // Clusters: the states inside a pillar.
    S.clusters.forEach(function (c) {
      var cw = c[4] * k;
      if (cw < 80 || c[2] > br[0] || c[3] > br[1] || c[2] + c[4] < tl[0] || c[3] + c[5] < tl[1]) return;
      var p = toScreen(c[2], c[3]), name = NAMES[S.states[c[1]]];
      g.globalAlpha = 0.3; g.strokeStyle = fg; g.lineWidth = 1;
      g.beginPath(); g.moveTo(p[0] + 2, p[1] + 2); g.lineTo(p[0] + cw - 2, p[1] + 2); g.stroke();
      g.globalAlpha = 1; g.fillStyle = fg; font(12, 600);
      var lx = Math.max(p[0], 0) + 6;
      g.fillText(fitText(name + ' \\u00b7 ' + c[7], Math.min(p[0] + cw, W) - lx - 6), lx, Math.max(p[1], 0) + 20);
    });
    // Issues, at the level the cell size on the screen allows.
    var buckets = {};
    var cards = [];
    for (var i = 0; i < rows.length; i++) {
      var r = rows[i], pos = at(r);
      if (!pos) continue;
      var s = toScreen(pos[0], pos[1]), cl = S.clusters[pos[2]], cell = cl[6] * k;
      if (s[0] < -cell || s[1] < -cell || s[0] > W + cell || s[1] > H + cell) continue;
      var st = S.states[cl[1]];
      if (cell >= 60) { cards.push([r, s, cell, st, pos]); continue; }
      var d = Math.max(1.5, cell * 0.7);
      (buckets[st] = buckets[st] || []).push(s[0] - d / 2, s[1] - d / 2, d);
    }
    Object.keys(buckets).forEach(function (st) {
      g.globalAlpha = WEIGHT[st]; g.fillStyle = fg; var b = buckets[st];
      for (var j = 0; j < b.length; j += 3) g.fillRect(b[j], b[j + 1], b[j + 2], b[j + 2]);
      g.globalAlpha = 1;
    });
    cards.forEach(function (c) { card(c[0], c[1], c[2], c[3], c[4]); });
    // Crew: where they are working.
    var crew = crewNow();
    crew.forEach(function (m) {
      var s = toScreen(m.x, m.y), x = s[0] + 10 + m.slot * 26, y = s[1] - 10;
      if (x < -20 || y < -20 || x > W + 20 || y > H + 20) return;
      g.beginPath(); g.arc(x, y, 12, 0, 6.2832);
      g.fillStyle = accent; g.fill();
      g.lineWidth = 2; g.strokeStyle = picked && picked.kind === 'crew' && picked.name === m.name ? fg : ground; g.stroke();
      g.fillStyle = accentFg; font(11, 700); g.textAlign = 'center';
      g.fillText(m.name.slice(0, 1).toUpperCase(), x, y + 4); g.textAlign = 'start';
      m.sx = x; m.sy = y;
    });
    lastCrew = crew;
  }
  var lastCrew = [];
  function card(r, s, cell, st, pos) {
    var size = cell * 0.92, x = s[0] - size / 2, y = s[1] - size / 2;
    g.globalAlpha = 1; g.fillStyle = fg; g.globalAlpha = 0.06; g.fillRect(x, y, size, size);
    g.globalAlpha = 0.25; g.strokeStyle = fg; g.lineWidth = 1; g.strokeRect(x + 0.5, y + 0.5, size - 1, size - 1);
    g.globalAlpha = WEIGHT[st];
    var open = !(r[5] && r[5] <= T);
    if (!open) { g.globalAlpha = 0.75 * WEIGHT[st]; }
    var pad = 10, tw = size - pad - 8;
    g.fillStyle = fg; font(12, 700);
    g.fillText('#' + r[0], x + pad, y + 18);
    font(12, 400);
    var lines = wrap(r[6], tw, size >= 170 ? 5 : 3);
    for (var i = 0; i < lines.length; i++) g.fillText(lines[i], x + pad, y + 36 + i * 15);
    if (size >= 170) {
      var yy = y + 36 + lines.length * 15 + 8;
      font(11, 400); g.globalAlpha = 0.75;
      var bits = [NAMES[st], 'opened ' + ago(T - r[4])];
      if (r[7]) bits.push('pull #' + r[7] + (r[12] ? ' \\u00b7 checks ' + r[12] : ''));
      if (r[11]) bits.push(r[11]);
      bits.forEach(function (b, n) { g.fillText(fitText(b, tw), x + pad, yy + n * 15); });
    }
    g.globalAlpha = 1;
  }
  // ---- input ----
  var pointers = {}, gesture = null, moved = 0, downAt = 0, downPos = null;
  function count() { return Object.keys(pointers).length; }
  function pinchState() {
    var ids = Object.keys(pointers), a = pointers[ids[0]], b = pointers[ids[1]];
    return { cx: (a.x + b.x) / 2, cy: (a.y + b.y) / 2, d: Math.max(10, Math.hypot(a.x - b.x, a.y - b.y)) };
  }
  cv.addEventListener('pointerdown', function (e) {
    cv.setPointerCapture(e.pointerId);
    pointers[e.pointerId] = { x: e.offsetX, y: e.offsetY };
    flight = null;
    if (count() === 1) { moved = 0; downAt = e.timeStamp; downPos = { x: e.offsetX, y: e.offsetY }; }
    if (count() === 2) gesture = pinchState();
  });
  cv.addEventListener('pointermove', function (e) {
    var p = pointers[e.pointerId];
    if (!p) return;
    var dx = e.offsetX - p.x, dy = e.offsetY - p.y;
    p.x = e.offsetX; p.y = e.offsetY;
    moved += Math.abs(dx) + Math.abs(dy);
    if (count() === 1) {
      view.x -= dx / view.k; view.y -= dy / view.k;
    } else if (count() === 2 && gesture) {
      var now = pinchState();
      view.x -= (now.cx - gesture.cx) / view.k; view.y -= (now.cy - gesture.cy) / view.k;
      zoomAt(now.cx, now.cy, now.d / gesture.d);
      gesture = pinchState();
    }
    dirty = true; hashSoon();
  });
  function up(e) {
    var had = pointers[e.pointerId];
    delete pointers[e.pointerId];
    if (count() === 1) { gesture = null; moved = 99; }
    if (count() === 0) {
      gesture = null;
      if (had && e.type === 'pointerup' && moved < 8 && e.timeStamp - downAt < 600) tap(downPos.x, downPos.y);
    }
  }
  cv.addEventListener('pointerup', up);
  cv.addEventListener('pointercancel', up);
  cv.addEventListener('wheel', function (e) {
    e.preventDefault();
    var unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
    var d = e.deltaY * unit;
    zoomAt(e.offsetX, e.offsetY, Math.exp(-d * (e.ctrlKey ? 0.01 : 0.0016)));
  }, { passive: false });
  cv.addEventListener('keydown', function (e) {
    var step = 80 / view.k, mod = e.metaKey || e.ctrlKey, key = e.key;
    if (key === '+' || key === '=') zoomAt(W / 2, H / 2, 1.4);
    else if (key === '-' || key === '_') zoomAt(W / 2, H / 2, 1 / 1.4);
    else if (!mod && key === '0') fit();
    else if (!mod && key === 'n') goNow();
    else if (key === 'ArrowLeft') view.x -= step;
    else if (key === 'ArrowRight') view.x += step;
    else if (key === 'ArrowUp') view.y -= step;
    else if (key === 'ArrowDown') view.y += step;
    else return;
    e.preventDefault(); dirty = true; hashSoon();
  });
  window.addEventListener('resize', resize);
  // ---- picking ----
  function tap(sx, sy) {
    for (var i = 0; i < lastCrew.length; i++) {
      var m = lastCrew[i];
      if (Math.hypot(sx - m.sx, sy - m.sy) <= 16) { pick({ kind: 'crew', name: m.name }); return; }
    }
    var w = toWorld(sx, sy), best = pickIssue(rows, S.clusters, T, w[0], w[1]);
    if (best) pick({ kind: 'issue', number: best[0] });
    else { picked = null; panel.hidden = true; dirty = true; }
  }
  function pick(p) { picked = p; refreshPanel(); dirty = true; }
  function row(term, text, href) {
    var r = document.createElement('div'); r.className = 'status-row';
    var dt = document.createElement('dt'); dt.textContent = term;
    var dd = document.createElement('dd');
    if (href) { var a = document.createElement('a'); a.href = href; a.textContent = text; dd.appendChild(a); }
    else dd.textContent = text;
    r.appendChild(dt); r.appendChild(dd); list.appendChild(r);
  }
  var list = null;
  function refreshPanel() {
    if (!picked) { panel.hidden = true; return; }
    panel.textContent = '';
    var h = document.createElement('h2');
    list = document.createElement('dl'); list.className = 'status-rows';
    if (picked.kind === 'issue') {
      var r = rows.filter(function (x) { return x[0] === picked.number; })[0];
      if (!r) { panel.hidden = true; return; }
      var pos = at(r);
      h.textContent = '#' + r[0] + ' ' + r[6];
      var st = pos ? S.states[S.clusters[pos[2]][1]] : 'not yet opened';
      row('State', NAMES[st] || st);
      row('Opened', ago(T - r[4]));
      if (r[5] && r[5] <= T) row('Landed', ago(T - r[5]));
      if (r[7]) row('Pull', '#' + r[7] + (r[12] ? ' \\u00b7 checks ' + r[12] : ''), base + '/pulls/' + r[7]);
      if (r[11]) row('Held', r[11]);
      crewNow().filter(function (m) { return m.issue === r[0]; }).forEach(function (m) { row('On it', m.name); });
      row('Issue', 'Open it', base + '/issues/' + r[0]);
    } else {
      h.textContent = picked.name;
      var on = crewNow().filter(function (m) { return m.name === picked.name; })[0];
      if (!on) row('On', 'Nothing ' + (live ? 'right now' : 'then'));
      else {
        var rr = rows.filter(function (x) { return x[0] === on.issue; })[0];
        row('On', '#' + on.issue + (rr ? ' ' + rr[6] : ''), base + '/issues/' + on.issue);
        row('Since', ago(T - on.since));
      }
    }
    panel.appendChild(h); panel.appendChild(list);
    panel.hidden = false;
  }
  function crewChips() {
    crewBox.textContent = '';
    S.crew.forEach(function (m) {
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'btn'; b.setAttribute('data-variant', 'outline'); b.setAttribute('data-size', 'sm'); b.textContent = m.name;
      b.addEventListener('click', function () {
        var on = crewNow().filter(function (c) { return c.name === m.name; })[0];
        pick({ kind: 'crew', name: m.name });
        if (on) fly({ x: on.x, y: on.y, k: Math.max(view.k, fitK * 24) });
      });
      crewBox.appendChild(b);
    });
  }
  // ---- time ----
  function showClock() {
    clock.textContent = live ? 'Now' : new Date(T).toLocaleString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
  }
  function setT(ms) {
    T = ms; live = S && T >= S.now; if (live) T = S.now;
    slider.value = String(Math.round((T - S.weekStart) / 60000));
    showClock(); if (picked) refreshPanel(); dirty = true; hashSoon();
  }
  function goNow() { playing = false; playBtn.textContent = 'Play'; setT(S.now); }
  slider.addEventListener('input', function () { playing = false; playBtn.textContent = 'Play'; setT(S.weekStart + Number(slider.value) * 60000); });
  playBtn.addEventListener('click', function () {
    playing = !playing; playBtn.textContent = playing ? 'Pause' : 'Play';
    if (playing && live) { T = S.weekStart; live = false; }
  });
  document.getElementById('space-now').addEventListener('click', function () { goNow(); });
  document.getElementById('space-fit').addEventListener('click', function () { fit(); });
  document.getElementById('space-in').addEventListener('click', function () { zoomAt(W / 2, H / 2, 1.5); });
  document.getElementById('space-out').addEventListener('click', function () { zoomAt(W / 2, H / 2, 1 / 1.5); });
  setInterval(showClock, 1000);
  // ---- the view in the address ----
  var hashTimer = 0;
  function hashSoon() {
    if (hashTimer) return;
    hashTimer = setTimeout(function () {
      hashTimer = 0;
      if (!S) return;
      var h = hashOf(view, fitK, live, T);
      try { history.replaceState(null, '', '#' + h); } catch (err) {}
    }, 250);
  }
  function fromHash() {
    var h = parseHash(location.hash, S, fitK, limits());
    if (h.k !== undefined) { view.x = h.x; view.y = h.y; view.k = h.k; }
    if (h.t !== undefined) setT(h.t); else showClock();
  }
  // ---- the live channel: any event of this repository fetches the space again ----
  var refetch = 0;
  if (window.EventSource) {
    var es = new EventSource('/events');
    es.addEventListener('forge', function (ev) {
      var d; try { d = JSON.parse(ev.data); } catch (err) { return; }
      if (d.repo !== repo || !/^(run|issue|pull)\\./.test(d.kind || '')) return;
      if (refetch) return;
      refetch = setTimeout(function () { refetch = 0; if (!document.hidden) load(false); }, 1200);
    });
  }
  resize();
  requestAnimationFrame(step);
  load(true);
})();
`;
@@ -0,0 +1,313 @@
/**
 * The space (#10444): the map as a plane to move through. This module is
 * the whole of its arithmetic and nothing else: plain data in (a
 * repository's work, as `space_read.ts` gathers it), plain data out (every
 * region, cluster and issue placed in one world, in compact arrays the
 * canvas draws from). No database, no HTML.
 *
 * The world is one rectangle. Pillars are regions of it, cut by recursive
 * bisection (a treemap) so that area follows open work. Inside a region the
 * issues sit in clusters by state, each cluster a grid of square cells. An
 * issue that landed this week also has a slot in the "in review" cluster of
 * its region, where it was before it landed, so the scrubber can move it.
 * Units are world units; the client scales them to pixels.
 */
/** Where an issue sits in its pillar's life, left to right on the page. */
export const STATES = ["ready", "building", "review", "waiting", "landed"] as const;
export type State = (typeof STATES)[number];
/** The words the map page uses for a card, mapped to a cluster. */
export function stateOf(word: string): State {
  switch (word) {
    case "done":
      return "landed";
    case "working":
      return "building";
    case "held":
    case "waiting":
      return "review";
    case "ready":
      return "ready";
    default:
      return "waiting"; // blocked, deferred, parked
  }
}
export const DAY_MS = 86_400_000;
/** How far back the scrubber goes. */
export const WEEK_MS = 7 * DAY_MS;
export interface SpaceIssue {
  readonly number: number;
  readonly title: string;
  /** Index into `SpaceInput.pillars`; -1 for work that serves none. */
  readonly pillar: number;
  readonly state: State;
  readonly createdAt: number;
  /** Epoch ms; 0 while open. */
  readonly closedAt: number;
  /** The open pull that would close it, or 0. */
  readonly pull: number;
  /** Why a person holds that pull, or "". */
  readonly hold: string;
  /** Latest check verdict of that pull's head: "ok", "failed", "running" or "". */
  readonly check: string;
}
export interface SpaceRun {
  readonly actor: string;
  readonly issue: number;
  readonly startedAt: number;
  /** Epoch ms; 0 while it runs. */
  readonly endedAt: number;
}
export interface SpaceInput {
  readonly repo: string;
  readonly now: number;
  /** Pillar names in order; "No pillar" is appended by the reader when needed. */
  readonly pillars: readonly { name: string; merged: number }[];
  /** Open issues, and those closed in the last week. Nothing older. */
  readonly issues: readonly SpaceIssue[];
  /** Agent runs of the last week, newest first. */
  readonly runs: readonly SpaceRun[];
}
export interface Region {
  readonly name: string;
  readonly x: number;
  readonly y: number;
  readonly w: number;
  readonly h: number;
  readonly open: number;
  readonly ready: number;
  readonly blocked: number;
  readonly landed: number;
  readonly merged: number;
  /** landed ÷ (open + landed) over the window, 0..1. */
  readonly progress: number;
  /** Whether anything moved in the window: a landing, or someone building. */
  readonly moving: boolean;
}
/** [region, state index, x, y, w, h, cell, count] */
export type ClusterRow = [number, number, number, number, number, number, number, number];
/** [number, cluster, x, y, created, closed, title, pull, bx, by, bcluster, hold, check] */
export type IssueRow = [number, number, number, number, number, number, string, number, number, number, number, string, string];
export interface Space {
  readonly repo: string;
  readonly now: number;
  readonly weekStart: number;
  readonly world: { readonly w: number; readonly h: number };
  readonly states: readonly State[];
  readonly regions: Region[];
  readonly clusters: ClusterRow[];
  readonly issues: IssueRow[];
  readonly crew: { name: string; runs: [number, number, number][] }[];
}
interface Rect {
  x: number;
  y: number;
  w: number;
  h: number;
}
/**
 * Slice-and-dice by recursive bisection: `weights` (descending) cut `rect`
 * into one rectangle each, areas in proportion. The list is split where the
 * two halves weigh most nearly alike, along the longer side.
 */
export function treemap(weights: readonly number[], rect: Rect): Rect[] {
  if (weights.length === 0) return [];
  if (weights.length === 1) return [{ ...rect }];
  const total = weights.reduce((a, b) => a + b, 0);
  let cut = 1;
  let acc = weights[0]!;
  let best = Math.abs(total - 2 * acc);
  for (let i = 1; i < weights.length - 1; i++) {
    acc += weights[i]!;
    const gap = Math.abs(total - 2 * acc);
    if (gap < best) {
      best = gap;
      cut = i + 1;
    }
  }
  const left = weights.slice(0, cut);
  const lw = left.reduce((a, b) => a + b, 0);
  const share = total === 0 ? 0.5 : lw / total;
  if (rect.w >= rect.h) {
    const w = rect.w * share;
    return [
      ...treemap(left, { x: rect.x, y: rect.y, w, h: rect.h }),
      ...treemap(weights.slice(cut), { x: rect.x + w, y: rect.y, w: rect.w - w, h: rect.h }),
    ];
  }
  const h = rect.h * share;
  return [
    ...treemap(left, { x: rect.x, y: rect.y, w: rect.w, h }),
    ...treemap(weights.slice(cut), { x: rect.x, y: rect.y + h, w: rect.w, h: rect.h - h }),
  ];
}
/** The largest square cell with which `n` of them fit a `w`×`h` rectangle, and the columns that gives. */
export function gridFor(n: number, w: number, h: number): { cell: number; cols: number } {
  if (n <= 0 || w <= 0 || h <= 0) return { cell: Math.max(0, Math.min(w, h)), cols: 1 };
  let cell = Math.sqrt((w * h) / n);
  while (cell > 0.01 && Math.floor(w / cell) * Math.floor(h / cell) < n) cell *= 0.97;
  return { cell, cols: Math.max(1, Math.floor(w / cell)) };
}
/** Room above a region's or cluster's contents, for its words. */
const REGION_HEAD = 70;
const CLUSTER_HEAD = 30;
const GAP = 14;
/** The smallest cell a card is legible in, at the deepest zoom the page allows for it. */
const MIN_CELL = 40;
/** The world's size for `n` slots: a 1.6 : 1 plane with room for every cell at `MIN_CELL`. */
export function worldFor(n: number): { w: number; h: number } {
  const area = Math.max(1_600_000, n * MIN_CELL * MIN_CELL * 2.4);
  const h = Math.sqrt(area / 1.6);
  return { w: Math.round(h * 1.6), h: Math.round(h) };
}
const inset = (r: Rect, top: number, pad: number): Rect => ({
  x: r.x + pad,
  y: r.y + top,
  w: Math.max(1, r.w - 2 * pad),
  h: Math.max(1, r.h - top - pad),
});
/** Place the work of one repository. Pure: the same input gives the same space. */
export function buildSpace(input: SpaceInput): Space {
  const weekStart = input.now - WEEK_MS;
  const names = input.pillars.map((p) => p.name);
  const loose = input.issues.some((i) => i.pillar < 0);
  if (loose) names.push("No pillar");
  if (names.length === 0) names.push("All work");
  const regionOf = (i: SpaceIssue): number => (i.pillar >= 0 ? i.pillar : loose ? names.length - 1 : 0);
  // Which issue sits in which region and cluster. A landed one also holds a
  // "before" slot in review.
  const per = names.map(() => STATES.map(() => [] as { issue: SpaceIssue; before: boolean }[]));
  const tally = names.map(() => ({ open: 0, ready: 0, blocked: 0, landed: 0 }));
  for (const issue of input.issues) {
    const r = regionOf(issue);
    const s = STATES.indexOf(issue.state);
    per[r]![s]!.push({ issue, before: false });
    const t = tally[r]!;
    if (issue.state === "landed") {
      t.landed++;
      per[r]![STATES.indexOf("review")]!.push({ issue, before: true });
    } else {
      t.open++;
      if (issue.state === "ready") t.ready++;
      if (issue.state === "waiting") t.blocked++;
    }
  }
  const slots = per.reduce((a, r) => a + r.reduce((b, c) => b + c.length, 0), 0);
  const world = worldFor(slots);
  const weights = tally.map((t) => Math.max(1, t.open) + t.landed * 0.5);
  const order = weights.map((w, i) => i).sort((a, b) => weights[b]! - weights[a]! || a - b);
  const rects = treemap(
    order.map((i) => weights[i]!),
    { x: 0, y: 0, w: world.w, h: world.h },
  );
  const runsByActor = new Map<string, [number, number, number][]>();
  for (const run of input.runs) {
    const list = runsByActor.get(run.actor) ?? [];
    list.push([run.issue, run.startedAt, run.endedAt]);
    runsByActor.set(run.actor, list);
  }
  const regions: Region[] = names.map((name, i) => {
    const t = tally[i]!;
    const building = per[i]![STATES.indexOf("building")]!.length;
    return {
      name,
      x: 0,
      y: 0,
      w: 0,
      h: 0,
      open: t.open,
      ready: t.ready,
      blocked: t.blocked,
      landed: t.landed,
      merged: input.pillars[i]?.merged ?? 0,
      progress: t.open + t.landed === 0 ? 0 : t.landed / (t.open + t.landed),
      moving: t.landed > 0 || building > 0,
    };
  });
  const clusters: ClusterRow[] = [];
  const issues: IssueRow[] = [];
  const byNumber = new Map<number, IssueRow>();
  const befores: [number, number, number, number][] = [];
  order.forEach((ri, k) => {
    const rect = rects[k]!;
    const placed = regions[ri]!;
    regions[ri] = { ...placed, x: rect.x, y: rect.y, w: rect.w, h: rect.h };
    const inner = inset(rect, REGION_HEAD, GAP);
    const used = STATES.map((_, s) => s).filter((s) => per[ri]![s]!.length > 0);
    const cutRects = treemap(
      used.map((s) => per[ri]![s]!.length).sort((a, b) => b - a),
      inner,
    );
    // The treemap wants descending weights; give each rectangle to the
    // cluster of that size, ties in state order.
    const bySize = [...used].sort((a, b) => per[ri]![b]!.length - per[ri]![a]!.length || a - b);
    const home = new Map<number, number>(); // state -> cluster index
    bySize.forEach((s, j) => {
      const box = cutRects[j]!;
      const body = inset(box, CLUSTER_HEAD, 4);
      const list = per[ri]![s]!;
      const { cell, cols } = gridFor(list.length, body.w, body.h);
      const ci = clusters.length;
      home.set(s, ci);
      clusters.push([ri, s, box.x, box.y, box.w, box.h, cell, list.length]);
      // Sort so the newest sit first, and "before" slots come last.
      const ordered = [...list].sort(
        (a, b) => Number(a.before) - Number(b.before) || b.issue.number - a.issue.number,
      );
      ordered.forEach((entry, n) => {
        const x = body.x + (n % cols) * cell + cell / 2;
        const y = body.y + Math.floor(n / cols) * cell + cell / 2;
        if (entry.before) {
          befores.push([entry.issue.number, x, y, ci]);
          return;
        }
        const i = entry.issue;
        const row: IssueRow = [i.number, ci, x, y, i.createdAt, i.closedAt, i.title, i.pull, 0, 0, -1, i.hold, i.check];
        byNumber.set(i.number, row);
        issues.push(row);
      });
    });
  });
  for (const [n, x, y, ci] of befores) {
    const row = byNumber.get(n);
    if (row) [row[8], row[9], row[10]] = [x, y, ci];
  }
  // An issue with no before slot starts where it ended.
  for (const row of issues) if (row[10] < 0) [row[8], row[9], row[10]] = [row[2], row[3], row[1]];
  const known = new Set(issues.map((r) => r[0]));
  return {
    repo: input.repo,
    now: input.now,
    weekStart,
    world,
    states: STATES,
    regions,
    clusters,
    issues,
    crew: [...runsByActor].map(([name, runs]) => ({
      name,
      runs: runs.filter((r) => known.has(r[0])),
    })),
  };
}
@@ -0,0 +1,107 @@
/**
 * What the space draws, read from the forge: one repository's work as
 * `SpaceInput` (`space_model.ts` places it). Reads exactly what the map page
 * reads — the graph, the words, the pillars, the crew's runs — so the two
 * never disagree about what an issue is doing. Respects the viewer's sealed
 * scope; the answer is kept by the forge's write clock like the map's.
 *
 * Assumption shown on the page: the week's landed work is the closed issues
 * the graph still carries (those on an edge), not every close.
 */
import type { App } from "../app.ts";
import { proposedWork } from "../crew/direct.ts";
import { holdsFor } from "../core/holds.ts";
import { readyNow, repoGraph } from "../core/dependencies.ts";
import { isStructural, pillarView } from "../core/pillars.ts";
import type { Repo } from "../core/repos.ts";
import { listActiveRuns, listRuns, verdictForHead, type Run } from "../core/runs.ts";
import { sealedScope } from "../core/sealed.ts";
import { getUsersByIds, type User } from "../core/users.ts";
import { cachedMap } from "./map_snapshot.ts";
import { marksFor, wordFor } from "./pages/map.ts";
import { buildSpace, WEEK_MS, stateOf, type SpaceInput, type SpaceIssue, type SpaceRun } from "./space_model.ts";
const ms = (iso: string | null): number => (iso === null ? 0 : Date.parse(iso) || 0);
/** A pull head's checks in one word: failed beats running beats ok. */
function checkWord(runs: readonly Run[]): string {
  if (runs.length === 0) return "";
  if (runs.some((r) => r.state === "failed")) return "failed";
  if (runs.some((r) => r.state === "running" || r.state === "queued")) return "running";
  return runs.every((r) => r.state === "ok") ? "ok" : "";
}
export function spaceInput(app: App, repo: Repo, viewer: User | undefined, now: Date): SpaceInput {
  const db = app.db;
  const scope = sealedScope(db, repo, viewer);
  const graph = repoGraph(db, repo.id, { ...scope, lean: true });
  const flying = listActiveRuns(db, [repo.id]);
  const marks = marksFor(db, repo.id, graph, flying);
  const ready = new Set(readyNow(graph).map((r) => r.issue.id));
  const view = pillarView(db, repo, now);
  const index = new Map((view?.names ?? []).map((n, i) => [n, i]));
  const since = now.getTime() - WEEK_MS;
  const pulls = proposedWork(db, repo);
  const holds = holdsFor(db, [...pulls.values()].map((p) => p.id));
  const issues: SpaceIssue[] = [];
  for (const issue of graph.issues) {
    if (view !== undefined && isStructural(view.set, issue.id)) continue;
    if (issue.id === repo.directionIssueId) continue;
    const closedAt = ms(issue.closedAt);
    if (issue.state === "closed" && closedAt < since) continue;
    const name = view?.of.get(issue.id);
    const pull = issue.state === "open" ? pulls.get(issue.number) : undefined;
    issues.push({
      number: issue.number,
      title: issue.title.slice(0, 140),
      pillar: name === undefined ? -1 : (index.get(name) ?? -1),
      state: stateOf(wordFor(issue, ready, marks)),
      createdAt: ms(issue.createdAt),
      closedAt: issue.state === "closed" ? closedAt : 0,
      pull: pull?.number ?? 0,
      hold: pull === undefined ? "" : (holds.get(pull.id)?.why ?? ""),
      check: pull === undefined ? "" : checkWord(verdictForHead(db, pull.id, pull.headOid)),
    });
  }
  const numbers = new Map(graph.issues.map((i) => [i.id, i.number]));
  const runs = listRuns(db, repo.id, { kind: "agent", limit: 200 }).filter(
    (r) => r.actorId !== null && r.issueId !== null && (r.finishedAt === null || ms(r.finishedAt) >= since),
  );
  const who = getUsersByIds(db, runs.map((r) => r.actorId!));
  const crew: SpaceRun[] = [];
  for (const run of runs) {
    const number = numbers.get(run.issueId!);
    const name = who.get(run.actorId!)?.username;
    if (number === undefined || name === undefined) continue;
    const started = ms(run.startedAt) || ms(run.createdAt);
    crew.push({
      actor: name,
      issue: number,
      startedAt: Math.max(started, since),
      endedAt: run.state === "running" || run.state === "queued" ? 0 : ms(run.finishedAt),
    });
  }
  return {
    repo: `${repo.ownerName}/${repo.name}`,
    now: now.getTime(),
    pillars: (view?.names ?? []).map((name) => ({
      name,
      merged: view?.merged.find((m) => m.pillar === name)?.merged ?? 0,
    })),
    issues,
    runs: crew,
  };
}
/** The placed space of `repo` for `viewer`, once per minute while nothing is written. */
export function spaceOf(app: App, repo: Repo, viewer: User | undefined, now = new Date()): Record<string, unknown> {
  return cachedMap(
    app.db,
    { repoId: repo.id, scope: sealedScope(app.db, repo, viewer), now, kind: "space" },
    () => ({ ...buildSpace(spaceInput(app, repo, viewer, now)) }),
  ).value;
}
@@ -0,0 +1,119 @@
/**
 * The space's pure arithmetic on the client (#10444): where an issue is at a
 * time, who of the crew is on what, how the view reads and writes the address
 * hash, and which issue a tap lands on. Plain data in, plain data out, no DOM.
 *
 * These are written as ordinary functions so a test can call them; the page
 * ships their source (`fn.toString()`, as `palette.ts` does), so what is
 * tested is what runs. Each is self-contained: it uses only its arguments
 * and the other functions here, by name.
 */
/** A landing slides from "in review" to "landed" over this much time (4 h). */
export const GLIDE_MS = 4 * 3600000;
export function clamp(v: number, lo: number, hi: number): number {
  return v < lo ? lo : v > hi ? hi : v;
}
/** Ease in and out, 0..1 to 0..1. */
export function ease(p: number): number {
  return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
}
/**
 * Where issue row `r` is at time `T`: [x, y, cluster, landed 0..1], or null
 * before it was opened. Row: [number, cluster, x, y, created, closed, title,
 * pull, bx, by, bcluster, hold, check]; (bx, by, bcluster) is where it sat
 * in review before it landed.
 */
export function placeAt(r: any[], T: number): number[] | null {
  if (r[4] > T) return null;
  const c = r[5];
  if (!c) return [r[2], r[3], r[1], 0];
  if (c > T) return [r[8], r[9], r[10], 0];
  const p = ease(clamp((T - c) / (4 * 3600000), 0, 1));
  return [r[8] + (r[2] - r[8]) * p, r[9] + (r[3] - r[9]) * p, p > 0.5 ? r[1] : r[10], p];
}
/**
 * The crew members on an issue at `T`: each one's latest run that started by
 * `T` and had not ended. `crew` is [{name, runs: [[issue, start, end]]}]
 * (end 0 while running); `slot` numbers those sharing an issue.
 */
export function crewAt(crew: any[], rows: any[][], T: number): any[] {
  const out: any[] = [];
  const byNum: Record<number, number> = {};
  crew.forEach(function (m: any, mi: number) {
    let cur: any = null;
    m.runs.forEach(function (run: any) {
      if (run[1] <= T && (run[2] === 0 || run[2] > T) && (!cur || run[1] > cur[1])) cur = run;
    });
    if (!cur) return;
    let row: any[] | null = null;
    for (let i = 0; i < rows.length; i++)
      if (rows[i]![0] === cur[0]) {
        row = rows[i]!;
        break;
      }
    if (!row) return;
    const pos = placeAt(row, T);
    if (!pos) return;
    const n = (byNum[cur[0]] = (byNum[cur[0]] || 0) + 1);
    out.push({ name: m.name, issue: cur[0], x: pos[0], y: pos[1], slot: n - 1, since: cur[1], mi: mi });
  });
  return out;
}
/**
 * The view an address hash names: `#x=…&y=…&z=…` (centre in world units, zoom
 * relative to Fit) and `&t=` (minutes since the epoch). `S` is
 * {world:{w,h}, weekStart, now}; `lim` is [min k, max k]. Missing or
 * non-numeric parts are left out; numbers are clamped into the plane.
 */
export function parseHash(hash: string, S: any, fitK: number, lim: number[]): any {
  const m: Record<string, number> = {};
  hash
    .replace(/^#/, "")
    .split("&")
    .forEach(function (kv: string) {
      const p = kv.split("=");
      m[p[0]!] = p[1] === undefined || p[1] === "" ? NaN : Number(p[1]);
    });
  const out: any = {};
  if (isFinite(m.x!) && isFinite(m.y!) && isFinite(m.z!) && m.z! > 0) {
    out.x = clamp(m.x!, 0, S.world.w);
    out.y = clamp(m.y!, 0, S.world.h);
    out.k = clamp(m.z! * fitK, lim[0]!, lim[1]!);
  }
  if (isFinite(m.t!) && m.t! * 60000 >= S.weekStart && m.t! * 60000 < S.now) out.t = m.t! * 60000;
  return out;
}
/** The hash for a view: the inverse of `parseHash` (centre rounded, zoom to 3 places). */
export function hashOf(view: any, fitK: number, live: boolean, T: number): string {
  let h = "x=" + Math.round(view.x) + "&y=" + Math.round(view.y) + "&z=" + (view.k / fitK).toFixed(3);
  if (!live) h += "&t=" + Math.round(T / 60000);
  return h;
}
/** The issue row whose cell holds world point (wx, wy) at `T`, nearest the centre; or null. */
export function pickIssue(rows: any[][], clusters: any[][], T: number, wx: number, wy: number): any[] | null {
  let best: any[] | null = null;
  let bd = 1e18;
  for (let j = 0; j < rows.length; j++) {
    const pos = placeAt(rows[j]!, T);
    if (!pos) continue;
    const cell = clusters[pos[2]!]![6];
    const dx = Math.abs(wx - pos[0]!);
    const dy = Math.abs(wy - pos[1]!);
    if (dx <= cell / 2 && dy <= cell / 2 && dx + dy < bd) {
      bd = dx + dy;
      best = rows[j]!;
    }
  }
  return best;
}
/** The source the page ships for these functions. */
export const viewJs = [clamp, ease, placeAt, crewAt, parseHash, hashOf, pickIssue].map((f) => f.toString()).join("\n");
@@ -12,6 +12,7 @@
const ALLOWED: Record<string, { allow: string[]; why: string }> = {
  "src/web/sw.ts": { allow: ['http-equiv="refresh"'], why: "the restart page: the forge is down, so there is no /events to hear" },
  "src/web/pages/talk.ts": { allow: ["setInterval"], why: "server side: the stream of one turn watches the run's row, which has no event to hear" },
  "src/web/client.ts": { allow: ["data-live-every", "setInterval"], why: "the data-live-every mechanism itself, and clocks that only redraw text" },
  "src/web/space_client.ts": { allow: ["setInterval"], why: "the map clock label only redraws text; it fetches and reloads nothing" },
};
const PATTERNS: [string, RegExp][] = [
@@ -61,6 +61,7 @@
test("a site-admin person is offered the whole roster", () => {
    ["held", "Held by the Later gate", "owner/name"],
    ["fork-tree", "Fork tree of a repository", "owner/name"],
    ["roadmap", "Roadmap of a repository", "owner/name"],
    ["space", "Space of a repository", "owner/name"],
    ["pulls", "Pull requests in a repository", "owner/name"],
    ["milestones", "Milestones in a repository", "owner/name"],
    ["next-up", "Next up in a repository", "owner/name"],
@@ -184,6 +185,7 @@
test("a site-admin agent is offered the roster without the person-only entries",
    ["held", "Held by the Later gate", "owner/name"],
    ["fork-tree", "Fork tree of a repository", "owner/name"],
    ["roadmap", "Roadmap of a repository", "owner/name"],
    ["space", "Space of a repository", "owner/name"],
    ["pulls", "Pull requests in a repository", "owner/name"],
    ["milestones", "Milestones in a repository", "owner/name"],
    ["next-up", "Next up in a repository", "owner/name"],
@@ -259,6 +261,7 @@
test("a member person is offered the signed-in roster without the admin entries"
    ["held", "Held by the Later gate", "owner/name"],
    ["fork-tree", "Fork tree of a repository", "owner/name"],
    ["roadmap", "Roadmap of a repository", "owner/name"],
    ["space", "Space of a repository", "owner/name"],
    ["pulls", "Pull requests in a repository", "owner/name"],
    ["milestones", "Milestones in a repository", "owner/name"],
    ["next-up", "Next up in a repository", "owner/name"],
@@ -328,6 +331,7 @@
test("signed out, the palette offers sign-in and the public entries", () => {
    ["held", "Held by the Later gate", "owner/name"],
    ["fork-tree", "Fork tree of a repository", "owner/name"],
    ["roadmap", "Roadmap of a repository", "owner/name"],
    ["space", "Space of a repository", "owner/name"],
    ["pulls", "Pull requests in a repository", "owner/name"],
    ["milestones", "Milestones in a repository", "owner/name"],
    ["next-up", "Next up in a repository", "owner/name"],
@@ -0,0 +1,139 @@
/**
 * The space's arithmetic (#10444): areas follow open work, cells fit their
 * rectangle, a landing has a place to come from, and the whole forge's
 * twelve thousand issues are placed and serialized inside the first-draw
 * budget. Expected values are worked by hand in the comments.
 */
import { expect, test } from "bun:test";
import {
  buildSpace,
  gridFor,
  stateOf,
  treemap,
  WEEK_MS,
  type SpaceInput,
  type SpaceIssue,
  type State,
} from "../src/web/space_model.ts";
const NOW = Date.parse("2026-11-10T12:00:00Z");
function issue(number: number, pillar: number, state: State, over: Partial<SpaceIssue> = {}): SpaceIssue {
  return {
    number,
    title: `Issue ${number}`,
    pillar,
    state,
    createdAt: NOW - 3 * 86_400_000,
    closedAt: state === "landed" ? NOW - 3_600_000 : 0,
    pull: 0,
    hold: "",
    check: "",
    ...over,
  };
}
test("treemap: areas are in proportion to weights and tile the rectangle", () => {
  // 3:1 over 400×100 = 40000 → 30000 and 10000.
  const [a, b] = treemap([3, 1], { x: 0, y: 0, w: 400, h: 100 });
  expect(a!.w * a!.h).toBeCloseTo(30000, 6);
  expect(b!.w * b!.h).toBeCloseTo(10000, 6);
  const many = treemap([8, 5, 3, 2, 1, 1], { x: 0, y: 0, w: 1600, h: 1000 });
  expect(many.reduce((s, r) => s + r.w * r.h, 0)).toBeCloseTo(1_600_000, 3);
  // 8/20 of 1.6M = 640000.
  expect(many[0]!.w * many[0]!.h).toBeCloseTo(640_000, 3);
});
test("gridFor: n square cells fit the rectangle", () => {
  for (const [n, w, h] of [[1, 100, 100], [7, 300, 90], [1000, 800, 500], [12_000, 5000, 3000]] as const) {
    const { cell, cols } = gridFor(n, w, h);
    const rows = Math.ceil(n / cols);
    expect(cols * cell).toBeLessThanOrEqual(w + 1e-6);
    expect(rows * cell).toBeLessThanOrEqual(h + 1e-6);
  }
});
test("stateOf maps the map's words to the five clusters", () => {
  expect(["done", "working", "held", "waiting", "ready", "blocked", "deferred", "parked"].map(stateOf)).toEqual([
    "landed", "building", "review", "review", "ready", "waiting", "waiting", "waiting",
  ]);
});
test("a pillar's progress and region size follow its work; a landing has a before slot in review", () => {
  const input: SpaceInput = {
    repo: "o/r",
    now: NOW,
    pillars: [{ name: "P0 Trust", merged: 4 }, { name: "P1 Feed", merged: 0 }],
    issues: [
      issue(1, 0, "ready"), issue(2, 0, "building"), issue(3, 0, "waiting"), issue(4, 0, "landed"),
      issue(5, 1, "ready"),
    ],
    runs: [{ actor: "torque", issue: 2, startedAt: NOW - 3_600_000, endedAt: 0 }],
  };
  const s = buildSpace(input);
  const p0 = s.regions[0]!;
  // 1 landed of (3 open + 1 landed) = 0.25.
  expect(p0.open).toBe(3);
  expect(p0.landed).toBe(1);
  expect(p0.progress).toBeCloseTo(0.25, 10);
  expect(p0.moving).toBe(true);
  expect(s.regions[1]!.moving).toBe(false);
  expect(p0.w * p0.h).toBeGreaterThan(s.regions[1]!.w * s.regions[1]!.h);
  expect(s.regions[0]!.merged).toBe(4);
  // #4 landed: its row is in the landed cluster, its before slot in a review cluster of its region.
  const row = s.issues.find((r) => r[0] === 4)!;
  expect(s.states[s.clusters[row[1]]![1]!]).toBe("landed");
  expect(s.states[s.clusters[row[10]]![1]!]).toBe("review");
  expect(s.clusters[row[10]]![0]).toBe(s.clusters[row[1]]![0]);
  // An open issue starts where it ends.
  const open = s.issues.find((r) => r[0] === 1)!;
  expect([open[8], open[9], open[10]]).toEqual([open[2], open[3], open[1]]);
  expect(s.crew).toEqual([{ name: "torque", runs: [[2, NOW - 3_600_000, 0]] }]);
  expect(s.weekStart).toBe(NOW - WEEK_MS);
});
test("every issue lies inside its cluster, and clusters inside the world", () => {
  const issues: SpaceIssue[] = [];
  const kinds = ["ready", "building", "review", "waiting", "landed"] as const;
  for (let n = 1; n <= 500; n++) issues.push(issue(n, n % 3 === 2 ? -1 : n % 3, kinds[n % 5]!));
  const s = buildSpace({ repo: "o/r", now: NOW, pillars: [{ name: "A", merged: 0 }, { name: "B", merged: 0 }], issues, runs: [] });
  expect(s.regions.map((r) => r.name)).toEqual(["A", "B", "No pillar"]);
  for (const c of s.clusters) {
    expect(c[2]).toBeGreaterThanOrEqual(-1e-6);
    expect(c[2] + c[4]).toBeLessThanOrEqual(s.world.w + 1e-6);
    expect(c[3] + c[5]).toBeLessThanOrEqual(s.world.h + 1e-6);
  }
  for (const r of s.issues) {
    const c = s.clusters[r[1]]!;
    expect(r[2]).toBeGreaterThan(c[2]);
    expect(r[2]).toBeLessThan(c[2] + c[4]);
    expect(r[3]).toBeGreaterThan(c[3]);
    expect(r[3]).toBeLessThan(c[3] + c[5]);
  }
});
test("the whole forge (12,000 issues) is placed and serialized in a size a phone can take", () => {
  const states = ["ready", "building", "review", "waiting", "landed"] as const;
  const issues: SpaceIssue[] = [];
  for (let n = 1; n <= 12_000; n++) {
    // trevato/forge's shape: most history is closed, ~300 open; only the week's closes are kept.
    const state = n % 40 === 0 ? states[n % 4]! : "landed";
    issues.push(issue(n, n % 10, state, state === "landed" ? { closedAt: NOW - (n % 7) * 86_400_000 - 1000 } : {}));
  }
  const input: SpaceInput = {
    repo: "trevato/forge",
    now: NOW,
    pillars: Array.from({ length: 10 }, (_, i) => ({ name: `P${i} Pillar`, merged: i })),
    issues,
    runs: [],
  };
  buildSpace(input); // warm the JIT, as a running server is
  const started = performance.now();
  const space = buildSpace(input);
  const body = JSON.stringify(space);
  const ms = performance.now() - started;
  console.log(`space: ${space.issues.length} issues, ${(body.length / 1024).toFixed(0)} KB, ${ms.toFixed(1)} ms`);
  expect(space.issues.length).toBe(12_000);
  // Shape and size, not a wall-clock: the time is logged above for a person to read.
  expect(body.length).toBeLessThan(3 * 1024 * 1024);
});
@@ -0,0 +1,113 @@
/**
 * The space is reachable and safe (#10444): the page and its JSON answer for
 * who may read the repository and no one else, carry the security floor,
 * the map links to it, and the canvas script is well-formed.
 */
import { afterAll, beforeAll, expect, test } from "bun:test";
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { seedFixture, type Fixture, type Shape } from "../bench/map-home.ts";
import { serve, type Servers } from "../src/http/server.ts";
import { clearMapCache } from "../src/web/map_cache.ts";
import { spaceCss, spaceJs } from "../src/web/space_client.ts";
import { quietLogs } from "./helpers/globals.ts";
quietLogs();
const SMALL: Shape = {
  repos: 3, bigIssues: 40, bigOpen: 12, bigGraph: 20, bigEdges: 24, bigPulls: 2,
  lanes: [5, 3], privateLanes: 1, sealed: 1, runs: 2, comments: 1, events: 50,
};
let dir = "";
let f: Fixture;
let servers: Servers;
beforeAll(async () => {
  dir = mkdtempSync(join(tmpdir(), "forge-space-"));
  clearMapCache();
  f = await seedFixture(dir, SMALL);
  servers = await serve(f.app);
}, 120_000);
afterAll(() => {
  servers?.stop();
  f?.app.close();
  rmSync(dir, { recursive: true, force: true });
});
const get = (path: string, cookie = f.ownerCookie) => fetch(`${servers.url}${path}`, { headers: { cookie } });
test("the page answers with a canvas, the controls and the security floor", async () => {
  const res = await get("/keeper/forge/space");
  expect(res.status).toBe(200);
  expect(res.headers.get("x-content-type-options")).toBe("nosniff");
  expect(res.headers.get("content-security-policy")).toContain("default-src");
  const body = await res.text();
  for (const id of ["space-cv", "space-fit", "space-now", "space-t", "space-crew", "space-panel"]) expect(body).toContain(`id="${id}"`);
  expect(body).toContain('data-src="/keeper/forge/space.json"');
});
test("space.json places the repository's work in one world", async () => {
  const res = await get("/keeper/forge/space.json");
  expect(res.status).toBe(200);
  const s = (await res.json()) as { repo: string; world: { w: number; h: number }; issues: unknown[][]; clusters: number[][]; regions: { name: string }[] };
  expect(s.repo).toBe("keeper/forge");
  expect(s.world.w).toBeGreaterThan(s.world.h);
  expect(s.issues.length).toBeGreaterThan(0);
  expect(s.regions.length).toBeGreaterThan(0);
  for (const row of s.issues) expect(row[1]).toBeLessThan(s.clusters.length);
});
test("a private repository is not found by one who may not read it", async () => {
  const priv = f.privateRepos[0]!;
  expect((await get(`/${priv}/space`, f.strangerCookie)).status).toBe(404);
  expect((await get(`/${priv}/space.json`, f.strangerCookie)).status).toBe(404);
  expect((await get(`/${priv}/space.json`, "")).status).toBe(404);
});
test("the map offers the way in", async () => {
  const body = await (await get("/keeper/forge/map?view=graph")).text();
  expect(body).toContain('href="/keeper/forge/space"');
});
test("the canvas script parses and builds no markup from data", () => {
  new Bun.Transpiler({ loader: "js" }).transformSync(spaceJs);
  expect(spaceJs).not.toContain("innerHTML");
  expect(spaceJs).not.toContain("eval(");
  expect(spaceCss).toContain("touch-action: none");
});
test("without script the page is the pillar list: controls are hidden unless the script runs", async () => {
  const body = await (await get("/keeper/forge/space")).text();
  expect(body).toContain('class="space-list"');
  // The bars show only under html.space-on, which the script sets.
  expect(spaceCss).toMatch(/\.space canvas, \.space-bar, \.space-time \{ display: none; \}/);
  expect(spaceCss).toContain("html.space-on .space-bar { display: flex");
  expect(spaceCss).toContain("html.space-on .space-time { display: flex");
  // Buttons are the forge's own, and the caveat is said once (in the docs), not on the page.
  expect(body).toContain('id="space-fit"');
  expect(body).toMatch(/class="btn"[^>]*data-variant="outline"/);
  expect(body).not.toContain("no longer carries");
});
test("space.json carries an ETag; the same tag is answered 304 without a body", async () => {
  const first = await get("/keeper/forge/space.json");
  const tag = first.headers.get("etag")!;
  expect(tag).toMatch(/^W\//);
  await first.arrayBuffer();
  const again = await fetch(`${servers.url}/keeper/forge/space.json`, { headers: { cookie: f.ownerCookie, "if-none-match": tag } });
  expect(again.status).toBe(304);
  expect(await again.text()).toBe("");
  const other = await fetch(`${servers.url}/keeper/forge/space.json`, { headers: { cookie: f.ownerCookie, "if-none-match": 'W/"nope"' } });
  expect(other.status).toBe(200);
});
test("the script starts its frame loop before the data arrives, and says when it failed", () => {
  expect(spaceJs).toMatch(/requestAnimationFrame\(step\);\s*load\(true\);/);
  expect(spaceJs).toContain("space-error");
});
test("the one accent is for interaction: the canvas paints no state hues", () => {
  for (const token of ["--series-1", "--attn", "--series-4", "--success"]) expect(spaceJs).not.toContain(token);
});
@@ -0,0 +1,32 @@
/** The space in the terminal (#10444): the same plane as text. */
import { expect, test } from "bun:test";
import { buildSpace, type SpaceInput } from "../src/web/space_model.ts";
import { spaceLines } from "../src/tui/screens/space.ts";
const NOW = Date.UTC(2026, 10, 10, 12);
const input: SpaceInput = {
  repo: "a/b",
  now: NOW,
  pillars: [{ name: "Speed", merged: 1 }, { name: "Trust", merged: 0 }],
  issues: [
    { number: 1, title: "Cache it", pillar: 0, state: "ready", createdAt: NOW - 1e8, closedAt: 0, pull: 0, hold: "", check: "" },
    { number: 2, title: "Build it", pillar: 0, state: "building", createdAt: NOW - 1e8, closedAt: 0, pull: 7, hold: "", check: "running" },
    { number: 3, title: "Shipped", pillar: 1, state: "landed", createdAt: NOW - 2e8, closedAt: NOW - 1e7, pull: 0, hold: "", check: "" },
  ],
  runs: [{ actor: "torque", issue: 2, startedAt: NOW - 1e6, endedAt: 0 }],
};
test("spaceLines: pillars with counts, issues by state, the crew, the week's landings", () => {
  const text = spaceLines({ ...buildSpace(input) }, 80).join("\n");
  expect(text).toContain("Speed  2 open, 1 ready");
  expect(text).toContain("  Ready (1)\n    #1 Cache it");
  expect(text).toContain("#2 Build it (pull #7, checks running)");
  expect(text).toContain("torque is on #2");
  expect(text).toContain("Landed this week (1)\n  #3 Shipped");
});
test("spaceLines: a quiet repository says so", () => {
  const text = spaceLines({ ...buildSpace({ ...input, issues: [], runs: [] }) }, 80).join("\n");
  expect(text).toContain("Nobody is building right now.");
  expect(text).toContain("Landed this week (0)");
});
@@ -0,0 +1,84 @@
/**
 * The space's client arithmetic (#10444), the same functions the page ships
 * (`space_view.ts`): placement over time, the crew at a time, the address
 * hash both ways, and which issue a tap lands on.
 */
import { expect, test } from "bun:test";
import { crewAt, hashOf, parseHash, pickIssue, placeAt } from "../src/web/space_view.ts";
import { spaceJs } from "../src/web/space_client.ts";
// [number, cluster, x, y, created, closed, title, pull, bx, by, bcluster, hold, check]
const open = [1, 0, 100, 100, 1000, 0, "open", 0, 0, 0, 0, "", ""];
const closed = [2, 1, 300, 100, 1000, 5000, "closed", 0, 100, 100, 2, "", ""];
const GLIDE = 4 * 3600000;
test("placeAt: not there before it is opened; open issues sit in place", () => {
  expect(placeAt(open, 999)).toBeNull();
  expect(placeAt(open, 1000)).toEqual([100, 100, 0, 0]);
});
test("placeAt: an issue waits in review until it closes, then glides to landed", () => {
  expect(placeAt(closed, 4999)).toEqual([100, 100, 2, 0]);
  expect(placeAt(closed, 5000)).toEqual([100, 100, 2, 0]);
  const mid = placeAt(closed, 5000 + GLIDE / 2)!;
  expect(mid[0]).toBeCloseTo(200, 6); // ease(.5) = .5, halfway from 100 to 300
  expect(mid[3]).toBeCloseTo(0.5, 6);
  expect(placeAt(closed, 5000 + GLIDE / 4)![2]).toBe(2); // before half-way: still counted in review
  expect(placeAt(closed, 5000 + GLIDE)).toEqual([300, 100, 1, 1]);
});
test("crewAt: a member is on the latest run that had started and not ended", () => {
  const crew = [
    { name: "torque", runs: [[1, 1000, 3000], [2, 6000, 0]] },
    { name: "mason", runs: [[1, 1500, 0]] },
  ];
  const rows = [open, closed];
  expect(crewAt(crew, rows, 500)).toEqual([]);
  const at2000 = crewAt(crew, rows, 2000);
  expect(at2000.map((m) => [m.name, m.issue, m.slot])).toEqual([["torque", 1, 0], ["mason", 1, 1]]); // two on one issue take slots
  expect(crewAt(crew, rows, 4000).map((m) => m.name)).toEqual(["mason"]); // torque's run ended
  const late = crewAt(crew, rows, 7000);
  expect(late.map((m) => [m.name, m.issue])).toEqual([["torque", 2], ["mason", 1]]);
  expect(late[0]!.x).toBeCloseTo(100, 3); // issue 2 has only begun to glide from review
});
const S = { world: { w: 1000, h: 500 }, weekStart: 60_000_000, now: 66_000_000 };
test("parseHash: reads the view, clamps it into the plane, drops what is not a number", () => {
  const v = parseHash("#x=250&y=125&z=2", S, 0.5, [0.25, 30]);
  expect(v).toEqual({ x: 250, y: 125, k: 1 });
  expect(parseHash("#x=-50&y=9999&z=1000", S, 0.5, [0.25, 30])).toEqual({ x: 0, y: 500, k: 30 });
  expect(parseHash("#x=abc&y=1&z=1", S, 1, [0.5, 9])).toEqual({});
  expect(parseHash("#x=1&y=1&z=0", S, 1, [0.5, 9])).toEqual({});
  expect(parseHash("", S, 1, [0.5, 9])).toEqual({});
});
test("parseHash: a time is minutes since the epoch, kept only inside the week", () => {
  expect(parseHash("#t=1050", S, 1, [1, 2]).t).toBe(63_000_000);
  expect(parseHash("#t=1", S, 1, [1, 2])).toEqual({});
  expect(parseHash(`#t=${S.now / 60000}`, S, 1, [1, 2])).toEqual({}); // now is live, not a time
});
test("hashOf and parseHash are inverses", () => {
  const view = { x: 412, y: 77, k: 3 };
  const h = hashOf(view, 1.5, false, 63_000_000);
  expect(h).toBe("x=412&y=77&z=2.000&t=1050");
  expect(parseHash(h, S, 1.5, [0.1, 100])).toEqual({ x: 412, y: 77, k: 3, t: 63_000_000 });
  expect(hashOf(view, 1.5, true, 0)).not.toContain("t=");
});
test("pickIssue: the cell under the tap, the nearest centre, none where the plane is empty", () => {
  const clusters = [[0, 0, 0, 0, 0, 0, 40, 0], [0, 1, 0, 0, 0, 0, 40, 0], [0, 2, 0, 0, 0, 0, 40, 0]];
  const a = [1, 0, 100, 100, 0, 0, "a", 0, 0, 0, 0, "", ""];
  const b = [2, 0, 130, 100, 0, 0, "b", 0, 0, 0, 0, "", ""];
  const later = [3, 0, 100, 100, 9000, 0, "later", 0, 0, 0, 0, "", ""];
  expect(pickIssue([a, b], clusters, 1, 120, 100)![0]).toBe(2); // both cells hold x=120; b's centre is nearer
  expect(pickIssue([a, b], clusters, 1, 105, 100)![0]).toBe(1);
  expect(pickIssue([a, b], clusters, 1, 500, 500)).toBeNull();
  expect(pickIssue([later], clusters, 1, 100, 100)).toBeNull(); // not opened yet at T=1
});
test("the page ships these functions, not a second copy", () => {
  for (const name of ["placeAt", "crewAt", "parseHash", "hashOf", "pickIssue"]) expect(spaceJs).toContain(`function ${name}(`);
  new Bun.Transpiler({ loader: "js" }).transformSync(spaceJs);
});
		@@ -0,0 +1,9 @@
	1	# Space
	2
	3	The repository space (`/:owner/:name/space`, `docs/features/space.md`): one full-screen canvas with a few controls over it. Buttons are the forge's `btn()`; the panel's facts are a `status-rows` `dl`.
	4
	5	- `.space` — the full-screen surface the canvas, bar, panel and time controls sit on.
	6	- `.space-bar` — the row of buttons at the top; shown only when the script runs.
	7	- `.space-time` — the scrubber along the bottom; shown only when the script runs.
	8	- `.space-panel` — what a tapped issue or crew member is on: a heading and rows, on the page background with one hairline.
	9	- `.space-list` — the pillar list the server draws; hidden when the script runs.
		@@ -0,0 +1,29 @@
	1	# The space
	2
	3	`/:owner/:name/space` is the map as a plane you move through (#10444). It is
	4	linked from the map page ("The same work as a space to move through"). Its data
	5	is `/:owner/:name/space.json`, the same plane for an agent. In the terminal it is the `space` entry in the palette (`src/tui/screens/space.ts`): pillars with their counts, issues by state, who of the crew is on what, and the week's landings, from the same `spaceOf` and so the same gate as the page (a guest sees what is public, an admin everything).
	6
	7	## Use
	8
	9	- Move. Drag (or two fingers) to pan; pinch, wheel or `+`/`-` (also with ⌘/Ctrl) to zoom; arrows pan; `0` or Fit shows the whole plane; `n` or Now returns to live. No page scroll fights it (`touch-action: none`).
	10	- Semantic zoom. Out: pillars are regions whose area follows open work, with a progress bar (landed ÷ open + landed over the week) and whether they moved. In: each region's issues sit in clusters by state (ready, building, in review, waiting, landed). Further in: an issue is a card with its title, then its pull, checks and the crew member on it. Words are set at a fixed pixel size at every level; detail is added, nothing shrinks.
	11	- Time. The scrubber replays the last 7 days: issues appear when opened, slide from "in review" to "landed" when they close, and crew members sit on what they were running then. Play runs the week in 20 seconds. At Now the view is live: any run, issue or pull event of the repository fetches the plane again.
	12	- Crew. Their avatars sit on the issue they are working; tap one (or its name in the bar) to see what they are on.
	13	- Share. The view is in the address hash: `#x=…&y=…&z=…` (centre in world units, zoom relative to Fit) and `&t=` (minutes since the epoch) when scrubbed back.
	14
	15	## How it is built
	16
	17	- `src/web/space_model.ts` — pure placement: treemap of regions, grid of cells per cluster. Plain data in, compact arrays out.
	18	- `src/web/space_read.ts` — reads what the map page reads (graph, words, pillars, runs) and keeps the answer by the write clock (`map_snapshot.ts`).
	19	- `src/web/space_view.ts` — the client's arithmetic (placement over time, crew at a time, address hash, tap picking) as plain functions; the page ships their source, the tests call them.
	20	- `src/web/space_client.ts` — one 2D canvas, drawn only when the view changed; culls to the viewport.
	21	- `src/web/pages/space.ts` — the page (server-rendered pillar list under the canvas for no-JS readers) and the JSON.
	22
	23	`space.json` carries an ETag (the body's hash): a refetch after an event whose change the plane does not draw is answered 304, and the body is encoded by the server (`http/compress.ts`) otherwise. About 1.5 MB at forge scale before encoding.
	24
	25	Without script the page is the pillar list alone: the canvas, bars and scrubber show only once the script sets `space-on`. If the first load fails the list stays and says so. State is told by a cluster's label and position and by weight (muted as work ages), not by hue; the accent is for the crew and the controls.
	26
	27	Assumptions shown: the week's landed work is the closed issues the map's graph still carries (those on an edge); issues closed more than 7 days ago are not drawn. Before an issue landed, it is drawn in review, its slot there reserved by the layout (history of earlier states is not stored).
	28
	29	Test: `test/space-model.test.ts` places 12,000 issues and checks the size of the JSON (under 3 MB; the time is logged, not asserted); `test/space-view.test.ts` tests the client's placement, crew, hash and tap functions, which the page ships from `src/web/space_view.ts`; the canvas's own paint is measured by hand on a device, not in a test.
		@@ -231,6 +231,7 @@ import { issuePicture } from "../web/studio/picture.ts";
231	231	import { tellHerePage } from "../web/studio/tell_here.ts";
232	232	import { globalMapPage } from "../web/pages/global-map.ts";
233	233	import { mapPage } from "../web/pages/map.ts";
	234	import { spaceJson, spacePage } from "../web/pages/space.ts";
234	235	import { firstSubmit } from "../web/pages/first.ts";
235	236	import { nextPage, nextSubmit } from "../web/pages/next.ts";
236	237	import { weekPage, weekSubmit } from "../web/pages/week.ts";
		@@ -1194,6 +1195,8 @@ export function buildRouter(): Router<Handler> {
1194	1195	router.add("GET", "/:owner/:name/held", heldPage);
1195	1196	router.add("POST", "/:owner/:name/held/apply", heldApply);
1196	1197	router.add("GET", "/:owner/:name/map", mapPage);
	1198	router.add("GET", "/:owner/:name/space", spacePage);
	1199	router.add("GET", "/:owner/:name/space.json", spaceJson);
1197	1200	router.add("GET", "/:owner/:name/next", nextPage);
1198	1201	router.add("POST", "/:owner/:name/next", nextSubmit);
1199	1202	router.add("GET", "/:owner/:name/week", weekPage);
		@@ -20,6 +20,7 @@ import { packsCommand } from "./screens/packs.ts";
20	20	import { shellsScreen } from "./screens/shells.ts";
21	21	import { forkTreeScreen } from "./screens/fork_tree.ts";
22	22	import { roadmapScreen } from "./screens/roadmap.ts";
	23	import { spaceScreen } from "./screens/space.ts";
23	24	import { App, type Ctx, type Screen } from "./app/app.ts";
24	25	import type { Command, PaletteItem, PaletteSearch } from "./app/palette.ts";
25	26	import { G } from "./term/screen.ts";
		@@ -141,6 +142,11 @@ const REPO_VERBS: readonly {
141	142	title: "Roadmap of a repository",
142	143	open: (f, ctx, repo) => roadmapScreen(f, ctx, repo),
143	144	},
	145	{
	146	id: "space",
	147	title: "Space of a repository",
	148	open: (f, ctx, repo) => spaceScreen(f, ctx, repo),
	149	},
144	150	{
145	151	id: "pulls",
146	152	title: "Pull requests in a repository",
		@@ -0,0 +1,80 @@
	1	/**
	2	* The space in the terminal (#10444): the plane the page draws, as text. The
	3	* same `spaceOf` the page and `space.json` read, so a guest sees what is
	4	* public and an admin everything. Per pillar: its counts, its issues by state,
	5	* then who of the crew is on what, and the week's landings.
	6	*/
	7
	8	import type { Repo } from "../../core/repos.ts";
	9	import { spaceOf } from "../../web/space_read.ts";
	10	import type { ClusterRow, IssueRow, Region, State } from "../../web/space_model.ts";
	11	import type { Ctx, Screen } from "../app/app.ts";
	12	import { binding } from "../app/keys.ts";
	13	import type { Session } from "../session.ts";
	14	import { style } from "../term/style.ts";
	15	import { wrap } from "../term/width.ts";
	16	import { Scroll } from "./common.ts";
	17
	18	const NAMES: Record<State, string> = { ready: "Ready", building: "Building", review: "In review", waiting: "Waiting", landed: "Landed" };
	19
	20	/** The space as text lines, wrapped to `width`. */
	21	export function spaceLines(space: Record<string, unknown>, width = 80): string[] {
	22	const w = Math.max(20, width);
	23	const regions = space.regions as Region[];
	24	const clusters = space.clusters as ClusterRow[];
	25	const states = space.states as State[];
	26	const issues = space.issues as IssueRow[];
	27	const crew = space.crew as { name: string; runs: [number, number, number][] }[];
	28	const now = space.now as number;
	29	const out: string[] = [];
	30	regions.forEach((r, ri) => {
	31	out.push(`${r.name} ${r.open} open, ${r.ready} ready, ${r.landed} landed this week${r.moving ? "" : ", still"}`);
	32	const by = new Map<State, IssueRow[]>();
	33	for (const row of issues) {
	34	const c = clusters[row[1]];
	35	if (c === undefined \|\| c[0] !== ri) continue;
	36	const st = states[c[1]!]!;
	37	by.set(st, [...(by.get(st) ?? []), row]);
	38	}
	39	for (const st of states) {
	40	const rows = by.get(st);
	41	if (rows === undefined) continue;
	42	out.push(` ${NAMES[st]} (${rows.length})`);
	43	for (const row of rows) out.push(...wrap(` #${row[0]} ${row[6]}${row[7] ? ` (pull #${row[7]}${row[12] ? `, checks ${row[12]}` : ""})` : ""}`, w));
	44	}
	45	out.push("");
	46	});
	47	const on = crew.flatMap((m) => {
	48	const cur = m.runs.find((run) => run[1] <= now && (run[2] === 0 \|\| run[2] > now));
	49	return cur === undefined ? [] : [` ${m.name} is on #${cur[0]}`];
	50	});
	51	out.push("The crew", ...(on.length === 0 ? [" Nobody is building right now."] : on), "");
	52	const landed = issues.filter((row) => row[5] > 0).sort((a, b) => b[5] - a[5]);
	53	out.push(`Landed this week (${landed.length})`, ...landed.flatMap((row) => wrap(` #${row[0]} ${row[6]}`, w)));
	54	return out;
	55	}
	56
	57	export function spaceScreen(f: Session, ctx: Ctx, repo: Repo): Screen {
	58	const scroll = new Scroll();
	59	let lines: string[] = [];
	60	return {
	61	title: `Space · ${repo.ownerName}/${repo.name}`,
	62	keys: [binding(["j", "k"], "scroll"), binding(["esc"], "back")],
	63	render(area, s) {
	64	const c = ctx.theme.c;
	65	lines = spaceLines(spaceOf(f.app, repo, f.user), area.w - 4);
	66	const from = scroll.window(area.h, lines.length);
	67	for (let i = 0; i < area.h; i++) {
	68	const line = lines[from + i];
	69	if (line !== undefined) s.text(area.x + 1, area.y + i, line, style(c.fg, c.bg), area.x + area.w);
	70	}
	71	},
	72	key(e) {
	73	if (e.key === "esc" \|\| e.key === "q") {
	74	ctx.pop();
	75	return true;
	76	}
	77	return scroll.key(e, lines.length);
	78	},
	79	};
	80	}
		@@ -28,14 +28,14 @@ export function mapSnapshots(db: Database): Stamped<Record<string, unknown>> {
28	28	/** `build()` once per repository, scope and minute while nothing has been written. */
29	29	export function cachedMap(
30	30	db: Database,
31		key: { repoId: string; scope: { sealed?: true; sealedBy?: string }; now: Date },
	31	key: { repoId: string; scope: { sealed?: true; sealedBy?: string }; now: Date; kind?: string },
32	32	build: () => Record<string, unknown>,
33	33	): { value: Record<string, unknown>; hit: boolean } {
34	34	const stamp = writeStamp(db);
35	35	if (stamp === undefined) return { value: build(), hit: false };
36	36	const cache = mapSnapshots(db);
37	37	const before = cache.hits;
38		const k = `map:${key.repoId}:${scopeKey(key.scope)}:${key.now.toISOString().slice(0, 16)}`;
	38	const k = `${key.kind ?? "map"}:${key.repoId}:${scopeKey(key.scope)}:${key.now.toISOString().slice(0, 16)}`;
39	39	const value = cache.get(k, stamp, build);
40	40	return { value, hit: cache.hits > before };
41	41	}
		@@ -1439,7 +1439,7 @@ export async function mapPage(ctx: Ctx): Promise<Response> {
1439	1439	body: html`${repoHeader(ctx, repo, "map")}
1440	1440	<div class="page-head mt">
1441	1441	<h1>Roadmap</h1>
1442		<p class="muted small"><a href="${base}/map?view=graph">The graph</a></p>
	1442	<p class="muted small"><a href="${base}/map?view=graph">The graph</a> · <a href="${base}/space">The space</a></p>
1443	1443	</div>
1444	1444	<div
1445	1445	class="rm"
		@@ -1500,6 +1500,7 @@ export async function mapPage(ctx: Ctx): Promise<Response> {
1500	1500	<p class="muted">
1501	1501	What waits for what. The top edge is ready now; the chain in the accent
1502	1502	is the least work that still has to happen in order.
	1503	<a href="${repoBase(repo)}/space">The same work as a space to move through</a>.
1503	1504	<a href="${repoBase(repo)}/milestones">How far each milestone is</a>.
1504	1505	<a href="${repoBase(repo)}/next">Next up</a> is the one ranked list the crew builds from.
1505	1506	</p>
		@@ -0,0 +1,92 @@
	1	/**
	2	* The space (#10444): `/:owner/:name/space`, the map as a full-screen plane
	3	* you move through, and `/:owner/:name/space.json`, the same plane as data.
	4	* The page server-renders the pillars as a list (what you see before the
	5	* script runs, and what a reader without it gets), then the canvas
	6	* (`space_client.ts`) takes the screen. The view is in the address hash, so
	7	* a link reproduces it.
	8	*/
	9
	10	import type { Ctx } from "../../http/context.ts";
	11	import { notePhase, takeSessionTime, timePhase } from "../../core/route_timing.ts";
	12	import { holds, weakEtag } from "../../http/etag.ts";
	13	import { loadRepo, notFoundPage, repoBase } from "../chrome.ts";
	14	import { html } from "../html.ts";
	15	import { page } from "../layout.ts";
	16	import { btn } from "../ui.ts";
	17	import { spaceCss, spaceJs } from "../space_client.ts";
	18	import type { Region } from "../space_model.ts";
	19	import { spaceOf } from "../space_read.ts";
	20
	21	/** The plane as JSON: for the canvas, and for an agent that wants the numbers. */
	22	export function spaceJson(ctx: Ctx): Response {
	23	notePhase(ctx.request, "session", takeSessionTime(ctx.request));
	24	const repo = loadRepo(ctx);
	25	if (!repo) return notFoundPage(ctx);
	26	const space = timePhase(ctx.request, "space", () => spaceOf(ctx.app, repo, ctx.auth.user));
	27	// The tag is the body's bytes: a run, issue or pull event refetches the plane,
	28	// and when nothing it draws moved the answer is a header, not ~1.5 MB. The
	29	// body is encoded by the server for every response (`http/compress.ts`).
	30	const body = JSON.stringify(space);
	31	const etag = weakEtag(body);
	32	const headers = { "cache-control": "private, no-cache", etag };
	33	if (holds(ctx.request, etag)) return new Response(null, { status: 304, headers });
	34	return new Response(body, { headers: { "content-type": "application/json", ...headers } });
	35	}
	36
	37	export function spacePage(ctx: Ctx): Response {
	38	notePhase(ctx.request, "session", takeSessionTime(ctx.request));
	39	const repo = loadRepo(ctx);
	40	if (!repo) return notFoundPage(ctx);
	41	const base = repoBase(repo);
	42	const space = timePhase(ctx.request, "space", () => spaceOf(ctx.app, repo, ctx.auth.user));
	43	const regions = space.regions as Region[];
	44	const rendering = performance.now();
	45	const response = page({
	46	ctx,
	47	title: `Space · ${repo.name}`,
	48	bare: true,
	49	body: html`<div
	50	class="space"
	51	id="space"
	52	data-base="${base}"
	53	data-repo="${repo.ownerName}/${repo.name}"
	54	data-src="${base}/space.json"
	55	>
	56	<canvas
	57	id="space-cv"
	58	tabindex="0"
	59	role="img"
	60	aria-label="${repo.name}: ${regions.length} pillars, drawn by open work. Zoom in for issues."
	61	></canvas>
	62	<div class="space-bar">
	63	${btn("Map", { href: `${base}/map`, variant: "outline", size: "sm" })}
	64	${btn("Fit", { type: "button", id: "space-fit", variant: "outline", size: "sm" })}
	65	${btn("+", { type: "button", id: "space-in", label: "Zoom in", variant: "outline", size: "sm" })}
	66	${btn("−", { type: "button", id: "space-out", label: "Zoom out", variant: "outline", size: "sm" })}
	67	<span id="space-crew"></span>
	68	</div>
		sentinelcrew 1d ago outdated Principle 3/1 and JS-off: the control bars above are inert without script, and this caveat repeats the docs. Render controls only when the script runs; say the caveat once.
	69	<aside class="space-panel" id="space-panel" hidden></aside>
	70	<div class="space-time">
	71	${btn("Play", { type: "button", id: "space-play", variant: "outline", size: "sm" })}
	72	<input type="range" id="space-t" min="0" max="10080" step="1" value="10080" aria-label="Time, the last 7 days" />
	73	<output id="space-clock">Now</output>
	74	${btn("Now", { type: "button", id: "space-now", variant: "outline", size: "sm" })}
	75	</div>
	76	<div class="space-list">
	77	<h1>${repo.name}</h1>
	78	<p id="space-error" class="muted" hidden>The canvas could not load the space. The pillars are below.</p>
	79	<ul>
	80	${regions.map(
	81	(r) =>
	82	html`<li><strong>${r.name}</strong> ${r.open} open, ${r.ready} ready, ${r.landed} landed this week</li>`,
	83	)}
	84	</ul>
	85	</div>
	86	</div>`,
	87	styleCss: spaceCss,
	88	scriptJs: spaceJs,
	89	});
	90	notePhase(ctx.request, "render", performance.now() - rendering);
	91	return response;
	92	}
		@@ -0,0 +1,313 @@
	1	/**
	2	* The space (#10444): the map as a plane to move through. This module is
	3	* the whole of its arithmetic and nothing else: plain data in (a
	4	* repository's work, as `space_read.ts` gathers it), plain data out (every
	5	* region, cluster and issue placed in one world, in compact arrays the
	6	* canvas draws from). No database, no HTML.
	7	*
	8	* The world is one rectangle. Pillars are regions of it, cut by recursive
	9	* bisection (a treemap) so that area follows open work. Inside a region the
	10	* issues sit in clusters by state, each cluster a grid of square cells. An
	11	* issue that landed this week also has a slot in the "in review" cluster of
	12	* its region, where it was before it landed, so the scrubber can move it.
	13	* Units are world units; the client scales them to pixels.
	14	*/
	15
	16	/** Where an issue sits in its pillar's life, left to right on the page. */
	17	export const STATES = ["ready", "building", "review", "waiting", "landed"] as const;
	18	export type State = (typeof STATES)[number];
	19
	20	/** The words the map page uses for a card, mapped to a cluster. */
	21	export function stateOf(word: string): State {
	22	switch (word) {
	23	case "done":
	24	return "landed";
	25	case "working":
	26	return "building";
	27	case "held":
	28	case "waiting":
	29	return "review";
	30	case "ready":
	31	return "ready";
	32	default:
	33	return "waiting"; // blocked, deferred, parked
	34	}
	35	}
	36
	37	export const DAY_MS = 86_400_000;
	38	/** How far back the scrubber goes. */
	39	export const WEEK_MS = 7 * DAY_MS;
	40
	41	export interface SpaceIssue {
	42	readonly number: number;
	43	readonly title: string;
	44	/** Index into `SpaceInput.pillars`; -1 for work that serves none. */
	45	readonly pillar: number;
	46	readonly state: State;
	47	readonly createdAt: number;
	48	/** Epoch ms; 0 while open. */
	49	readonly closedAt: number;
	50	/** The open pull that would close it, or 0. */
	51	readonly pull: number;
	52	/** Why a person holds that pull, or "". */
	53	readonly hold: string;
	54	/** Latest check verdict of that pull's head: "ok", "failed", "running" or "". */
	55	readonly check: string;
	56	}
	57
	58	export interface SpaceRun {
	59	readonly actor: string;
	60	readonly issue: number;
	61	readonly startedAt: number;
	62	/** Epoch ms; 0 while it runs. */
	63	readonly endedAt: number;
	64	}
	65
	66	export interface SpaceInput {
	67	readonly repo: string;
	68	readonly now: number;
	69	/** Pillar names in order; "No pillar" is appended by the reader when needed. */
	70	readonly pillars: readonly { name: string; merged: number }[];
	71	/** Open issues, and those closed in the last week. Nothing older. */
	72	readonly issues: readonly SpaceIssue[];
	73	/** Agent runs of the last week, newest first. */
	74	readonly runs: readonly SpaceRun[];
	75	}
	76
	77	export interface Region {
	78	readonly name: string;
	79	readonly x: number;
	80	readonly y: number;
	81	readonly w: number;
	82	readonly h: number;
	83	readonly open: number;
	84	readonly ready: number;
	85	readonly blocked: number;
	86	readonly landed: number;
	87	readonly merged: number;
	88	/** landed ÷ (open + landed) over the window, 0..1. */
	89	readonly progress: number;
	90	/** Whether anything moved in the window: a landing, or someone building. */
	91	readonly moving: boolean;
	92	}
	93
	94	/** [region, state index, x, y, w, h, cell, count] */
	95	export type ClusterRow = [number, number, number, number, number, number, number, number];
	96	/** [number, cluster, x, y, created, closed, title, pull, bx, by, bcluster, hold, check] */
	97	export type IssueRow = [number, number, number, number, number, number, string, number, number, number, number, string, string];
	98
	99	export interface Space {
	100	readonly repo: string;
	101	readonly now: number;
	102	readonly weekStart: number;
	103	readonly world: { readonly w: number; readonly h: number };
	104	readonly states: readonly State[];
	105	readonly regions: Region[];
	106	readonly clusters: ClusterRow[];
	107	readonly issues: IssueRow[];
	108	readonly crew: { name: string; runs: [number, number, number][] }[];
	109	}
	110
	111	interface Rect {
	112	x: number;
	113	y: number;
	114	w: number;
	115	h: number;
	116	}
	117
	118	/**
	119	* Slice-and-dice by recursive bisection: `weights` (descending) cut `rect`
	120	* into one rectangle each, areas in proportion. The list is split where the
	121	* two halves weigh most nearly alike, along the longer side.
	122	*/
	123	export function treemap(weights: readonly number[], rect: Rect): Rect[] {
	124	if (weights.length === 0) return [];
	125	if (weights.length === 1) return [{ ...rect }];
	126	const total = weights.reduce((a, b) => a + b, 0);
	127	let cut = 1;
	128	let acc = weights[0]!;
	129	let best = Math.abs(total - 2 * acc);
	130	for (let i = 1; i < weights.length - 1; i++) {
	131	acc += weights[i]!;
	132	const gap = Math.abs(total - 2 * acc);
	133	if (gap < best) {
	134	best = gap;
	135	cut = i + 1;
	136	}
	137	}
	138	const left = weights.slice(0, cut);
	139	const lw = left.reduce((a, b) => a + b, 0);
	140	const share = total === 0 ? 0.5 : lw / total;
	141	if (rect.w >= rect.h) {
	142	const w = rect.w * share;
	143	return [
	144	...treemap(left, { x: rect.x, y: rect.y, w, h: rect.h }),
	145	...treemap(weights.slice(cut), { x: rect.x + w, y: rect.y, w: rect.w - w, h: rect.h }),
	146	];
	147	}
	148	const h = rect.h * share;
	149	return [
	150	...treemap(left, { x: rect.x, y: rect.y, w: rect.w, h }),
	151	...treemap(weights.slice(cut), { x: rect.x, y: rect.y + h, w: rect.w, h: rect.h - h }),
	152	];
	153	}
	154
	155	/** The largest square cell with which `n` of them fit a `w`×`h` rectangle, and the columns that gives. */
	156	export function gridFor(n: number, w: number, h: number): { cell: number; cols: number } {
	157	if (n <= 0 \|\| w <= 0 \|\| h <= 0) return { cell: Math.max(0, Math.min(w, h)), cols: 1 };
	158	let cell = Math.sqrt((w * h) / n);
	159	while (cell > 0.01 && Math.floor(w / cell) * Math.floor(h / cell) < n) cell *= 0.97;
	160	return { cell, cols: Math.max(1, Math.floor(w / cell)) };
	161	}
	162
	163	/** Room above a region's or cluster's contents, for its words. */
	164	const REGION_HEAD = 70;
	165	const CLUSTER_HEAD = 30;
	166	const GAP = 14;
	167	/** The smallest cell a card is legible in, at the deepest zoom the page allows for it. */
	168	const MIN_CELL = 40;
	169
	170	/** The world's size for `n` slots: a 1.6 : 1 plane with room for every cell at `MIN_CELL`. */
	171	export function worldFor(n: number): { w: number; h: number } {
	172	const area = Math.max(1_600_000, n * MIN_CELL * MIN_CELL * 2.4);
	173	const h = Math.sqrt(area / 1.6);
	174	return { w: Math.round(h * 1.6), h: Math.round(h) };
	175	}
	176
	177	const inset = (r: Rect, top: number, pad: number): Rect => ({
	178	x: r.x + pad,
	179	y: r.y + top,
	180	w: Math.max(1, r.w - 2 * pad),
	181	h: Math.max(1, r.h - top - pad),
	182	});
	183
	184	/** Place the work of one repository. Pure: the same input gives the same space. */
	185	export function buildSpace(input: SpaceInput): Space {
	186	const weekStart = input.now - WEEK_MS;
	187	const names = input.pillars.map((p) => p.name);
	188	const loose = input.issues.some((i) => i.pillar < 0);
	189	if (loose) names.push("No pillar");
	190	if (names.length === 0) names.push("All work");
	191	const regionOf = (i: SpaceIssue): number => (i.pillar >= 0 ? i.pillar : loose ? names.length - 1 : 0);
	192
	193	// Which issue sits in which region and cluster. A landed one also holds a
	194	// "before" slot in review.
	195	const per = names.map(() => STATES.map(() => [] as { issue: SpaceIssue; before: boolean }[]));
	196	const tally = names.map(() => ({ open: 0, ready: 0, blocked: 0, landed: 0 }));
	197	for (const issue of input.issues) {
	198	const r = regionOf(issue);
	199	const s = STATES.indexOf(issue.state);
	200	per[r]![s]!.push({ issue, before: false });
	201	const t = tally[r]!;
	202	if (issue.state === "landed") {
	203	t.landed++;
	204	per[r]![STATES.indexOf("review")]!.push({ issue, before: true });
	205	} else {
	206	t.open++;
	207	if (issue.state === "ready") t.ready++;
	208	if (issue.state === "waiting") t.blocked++;
	209	}
	210	}
	211
	212	const slots = per.reduce((a, r) => a + r.reduce((b, c) => b + c.length, 0), 0);
	213	const world = worldFor(slots);
	214	const weights = tally.map((t) => Math.max(1, t.open) + t.landed * 0.5);
	215	const order = weights.map((w, i) => i).sort((a, b) => weights[b]! - weights[a]! \|\| a - b);
	216	const rects = treemap(
	217	order.map((i) => weights[i]!),
	218	{ x: 0, y: 0, w: world.w, h: world.h },
	219	);
	220
	221	const runsByActor = new Map<string, [number, number, number][]>();
	222	for (const run of input.runs) {
	223	const list = runsByActor.get(run.actor) ?? [];
	224	list.push([run.issue, run.startedAt, run.endedAt]);
	225	runsByActor.set(run.actor, list);
	226	}
	227
	228	const regions: Region[] = names.map((name, i) => {
	229	const t = tally[i]!;
	230	const building = per[i]![STATES.indexOf("building")]!.length;
	231	return {
	232	name,
	233	x: 0,
	234	y: 0,
	235	w: 0,
	236	h: 0,
	237	open: t.open,
	238	ready: t.ready,
	239	blocked: t.blocked,
	240	landed: t.landed,
	241	merged: input.pillars[i]?.merged ?? 0,
	242	progress: t.open + t.landed === 0 ? 0 : t.landed / (t.open + t.landed),
	243	moving: t.landed > 0 \|\| building > 0,
	244	};
	245	});
	246	const clusters: ClusterRow[] = [];
	247	const issues: IssueRow[] = [];
	248	const byNumber = new Map<number, IssueRow>();
	249	const befores: [number, number, number, number][] = [];
	250
	251	order.forEach((ri, k) => {
	252	const rect = rects[k]!;
	253	const placed = regions[ri]!;
	254	regions[ri] = { ...placed, x: rect.x, y: rect.y, w: rect.w, h: rect.h };
	255	const inner = inset(rect, REGION_HEAD, GAP);
	256	const used = STATES.map((_, s) => s).filter((s) => per[ri]![s]!.length > 0);
	257	const cutRects = treemap(
	258	used.map((s) => per[ri]![s]!.length).sort((a, b) => b - a),
	259	inner,
	260	);
	261	// The treemap wants descending weights; give each rectangle to the
	262	// cluster of that size, ties in state order.
	263	const bySize = [...used].sort((a, b) => per[ri]![b]!.length - per[ri]![a]!.length \|\| a - b);
	264	const home = new Map<number, number>(); // state -> cluster index
	265	bySize.forEach((s, j) => {
	266	const box = cutRects[j]!;
	267	const body = inset(box, CLUSTER_HEAD, 4);
	268	const list = per[ri]![s]!;
	269	const { cell, cols } = gridFor(list.length, body.w, body.h);
	270	const ci = clusters.length;
	271	home.set(s, ci);
	272	clusters.push([ri, s, box.x, box.y, box.w, box.h, cell, list.length]);
	273	// Sort so the newest sit first, and "before" slots come last.
	274	const ordered = [...list].sort(
	275	(a, b) => Number(a.before) - Number(b.before) \|\| b.issue.number - a.issue.number,
	276	);
	277	ordered.forEach((entry, n) => {
	278	const x = body.x + (n % cols) * cell + cell / 2;
	279	const y = body.y + Math.floor(n / cols) * cell + cell / 2;
	280	if (entry.before) {
	281	befores.push([entry.issue.number, x, y, ci]);
	282	return;
	283	}
	284	const i = entry.issue;
	285	const row: IssueRow = [i.number, ci, x, y, i.createdAt, i.closedAt, i.title, i.pull, 0, 0, -1, i.hold, i.check];
	286	byNumber.set(i.number, row);
	287	issues.push(row);
	288	});
	289	});
	290	});
	291	for (const [n, x, y, ci] of befores) {
	292	const row = byNumber.get(n);
	293	if (row) [row[8], row[9], row[10]] = [x, y, ci];
	294	}
	295	// An issue with no before slot starts where it ended.
	296	for (const row of issues) if (row[10] < 0) [row[8], row[9], row[10]] = [row[2], row[3], row[1]];
	297
	298	const known = new Set(issues.map((r) => r[0]));
	299	return {
	300	repo: input.repo,
	301	now: input.now,
	302	weekStart,
	303	world,
	304	states: STATES,
	305	regions,
	306	clusters,
	307	issues,
	308	crew: [...runsByActor].map(([name, runs]) => ({
	309	name,
	310	runs: runs.filter((r) => known.has(r[0])),
	311	})),
	312	};
	313	}
		@@ -0,0 +1,107 @@
	1	/**
	2	* What the space draws, read from the forge: one repository's work as
	3	* `SpaceInput` (`space_model.ts` places it). Reads exactly what the map page
	4	* reads — the graph, the words, the pillars, the crew's runs — so the two
	5	* never disagree about what an issue is doing. Respects the viewer's sealed
	6	* scope; the answer is kept by the forge's write clock like the map's.
	7	*
	8	* Assumption shown on the page: the week's landed work is the closed issues
	9	* the graph still carries (those on an edge), not every close.
	10	*/
	11
	12	import type { App } from "../app.ts";
	13	import { proposedWork } from "../crew/direct.ts";
	14	import { holdsFor } from "../core/holds.ts";
	15	import { readyNow, repoGraph } from "../core/dependencies.ts";
	16	import { isStructural, pillarView } from "../core/pillars.ts";
	17	import type { Repo } from "../core/repos.ts";
	18	import { listActiveRuns, listRuns, verdictForHead, type Run } from "../core/runs.ts";
	19	import { sealedScope } from "../core/sealed.ts";
	20	import { getUsersByIds, type User } from "../core/users.ts";
	21	import { cachedMap } from "./map_snapshot.ts";
	22	import { marksFor, wordFor } from "./pages/map.ts";
	23	import { buildSpace, WEEK_MS, stateOf, type SpaceInput, type SpaceIssue, type SpaceRun } from "./space_model.ts";
	24
	25	const ms = (iso: string \| null): number => (iso === null ? 0 : Date.parse(iso) \|\| 0);
	26
	27	/** A pull head's checks in one word: failed beats running beats ok. */
	28	function checkWord(runs: readonly Run[]): string {
	29	if (runs.length === 0) return "";
	30	if (runs.some((r) => r.state === "failed")) return "failed";
	31	if (runs.some((r) => r.state === "running" \|\| r.state === "queued")) return "running";
	32	return runs.every((r) => r.state === "ok") ? "ok" : "";
	33	}
	34
	35	export function spaceInput(app: App, repo: Repo, viewer: User \| undefined, now: Date): SpaceInput {
	36	const db = app.db;
	37	const scope = sealedScope(db, repo, viewer);
	38	const graph = repoGraph(db, repo.id, { ...scope, lean: true });
	39	const flying = listActiveRuns(db, [repo.id]);
	40	const marks = marksFor(db, repo.id, graph, flying);
	41	const ready = new Set(readyNow(graph).map((r) => r.issue.id));
	42	const view = pillarView(db, repo, now);
	43	const index = new Map((view?.names ?? []).map((n, i) => [n, i]));
	44	const since = now.getTime() - WEEK_MS;
	45
	46	const pulls = proposedWork(db, repo);
	47	const holds = holdsFor(db, [...pulls.values()].map((p) => p.id));
	48	const issues: SpaceIssue[] = [];
	49	for (const issue of graph.issues) {
	50	if (view !== undefined && isStructural(view.set, issue.id)) continue;
	51	if (issue.id === repo.directionIssueId) continue;
	52	const closedAt = ms(issue.closedAt);
	53	if (issue.state === "closed" && closedAt < since) continue;
	54	const name = view?.of.get(issue.id);
	55	const pull = issue.state === "open" ? pulls.get(issue.number) : undefined;
	56	issues.push({
	57	number: issue.number,
	58	title: issue.title.slice(0, 140),
	59	pillar: name === undefined ? -1 : (index.get(name) ?? -1),
	60	state: stateOf(wordFor(issue, ready, marks)),
	61	createdAt: ms(issue.createdAt),
	62	closedAt: issue.state === "closed" ? closedAt : 0,
	63	pull: pull?.number ?? 0,
	64	hold: pull === undefined ? "" : (holds.get(pull.id)?.why ?? ""),
	65	check: pull === undefined ? "" : checkWord(verdictForHead(db, pull.id, pull.headOid)),
	66	});
	67	}
	68
	69	const numbers = new Map(graph.issues.map((i) => [i.id, i.number]));
	70	const runs = listRuns(db, repo.id, { kind: "agent", limit: 200 }).filter(
	71	(r) => r.actorId !== null && r.issueId !== null && (r.finishedAt === null \|\| ms(r.finishedAt) >= since),
	72	);
	73	const who = getUsersByIds(db, runs.map((r) => r.actorId!));
	74	const crew: SpaceRun[] = [];
	75	for (const run of runs) {
	76	const number = numbers.get(run.issueId!);
	77	const name = who.get(run.actorId!)?.username;
	78	if (number === undefined \|\| name === undefined) continue;
	79	const started = ms(run.startedAt) \|\| ms(run.createdAt);
	80	crew.push({
	81	actor: name,
	82	issue: number,
	83	startedAt: Math.max(started, since),
	84	endedAt: run.state === "running" \|\| run.state === "queued" ? 0 : ms(run.finishedAt),
	85	});
	86	}
	87
	88	return {
	89	repo: `${repo.ownerName}/${repo.name}`,
	90	now: now.getTime(),
	91	pillars: (view?.names ?? []).map((name) => ({
	92	name,
	93	merged: view?.merged.find((m) => m.pillar === name)?.merged ?? 0,
	94	})),
	95	issues,
	96	runs: crew,
	97	};
	98	}
	99
	100	/** The placed space of `repo` for `viewer`, once per minute while nothing is written. */
	101	export function spaceOf(app: App, repo: Repo, viewer: User \| undefined, now = new Date()): Record<string, unknown> {
	102	return cachedMap(
	103	app.db,
	104	{ repoId: repo.id, scope: sealedScope(app.db, repo, viewer), now, kind: "space" },
	105	() => ({ ...buildSpace(spaceInput(app, repo, viewer, now)) }),
	106	).value;
	107	}