@bongos/core 1.19.929 → 1.19.931

package/modules/hall-ui/public/sky.js

@@ -0,0 +1,580 @@
+// modules/hall-ui/public/sky.js — THE SKY (task 1004105 / BV2.R26 of goal
+// 1000095, criterion `ideator-sky-tells-the-truth`; spec
+// docs/specs/bongos-v2-ideator-surface.md decisions 2, 4, 11, 12 and 20; the
+// agreed shape is docs/design/mocks/ideator-surface/Sky.dc.html and the visual
+// half is docs/design/ideator-surface-direction.md).
+//
+// "The ambient view: size compressed, brightness live, goals as gravity wells
+// and their criteria as the rings inside them."
+//
+// IT DRAWS NOTHING IT COMPUTES. Every fact on this page was already answered by
+// somebody else: `modules/ideas/idea-state.js` says WHICH of the five objects a
+// thought is (ADR 0322), `./idea-objects.js` says what that object is CALLED
+// and what sentence goes with it, and economy's `size.scale` is the compressed
+// figure a drawing is supposed to use. This file turns those three into
+// geometry and nothing more. The room (thinking.js) is its sibling and reads
+// the SAME endpoint — `GET /inbox/by-builder/:id` — which is the whole reason
+// the sky is cheap: it arrives last, over numbers the rest of the work already
+// produced.
+//
+// IT IS NEVER THE ONLY PATH TO ANYTHING IT SHOWS (spec decision 11, and the
+// direction's first refusal). That is not a slogan here, it is three concrete
+// properties this file has to keep:
+//   - every thought drawn is a real <button> carrying the whole sentence in its
+//     aria-label, so the picture is readable without seeing it;
+//   - the panel for the picked thought links out to its record, its well and
+//     its descent, so nothing terminates here;
+//   - the page says, in words and with a link, that the same trail is a LIST at
+//     /thinking. A reader who cannot use a map is not stranded on one.
+//
+// IT IS THE VIEWER'S OWN SKY, not the project's. The read is the author's own
+// trail — the id comes from GET /me and never from the URL, exactly as the room
+// does it — so the h1 says "your sky" rather than claiming to draw every
+// thought in the instance. A project-wide sky is a different read with a
+// different gate and is not this task.
+//
+// THE LAYOUT IS A GRID OF WELLS, not the mock's single continuous starfield.
+// The mock is a shape and not a pixel contract (mocks/ideator-surface/README):
+// what it fixes is that goals are wells, criteria are the rings inside them,
+// thoughts sit in the well that caught them, and the unclaimed float apart. A
+// continuous field of absolute coordinates keeps that at 1280px and loses all
+// of it at 320, where wells would overlap into one smear. One well per grid
+// cell keeps the reading at every width and restacks on a phone for free.
+
+(() => {
+  'use strict';
+
+  const API = '/api/bongos';
+  // baseUrl:'' — this page builds full paths itself through api.request, the
+  // same idiom the room takes and for the same reason: the trail read is
+  // reached by a path the generated namespaced client carries no method for.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const { escapeHtml, $ } = window.OTB;
+  const objects = window.OTBIdeaObjects;
+
+  const hallBase = () => (location.hostname.startsWith('builders.') ? '' : '/builders');
+  const ideaHref = (id) => `${hallBase()}/idea/${encodeURIComponent(id)}`;
+  const taskHref = (id) => `${hallBase()}/task/${encodeURIComponent(id)}`;
+  const goalHref = (id) => `${hallBase()}/goals#/goal/${encodeURIComponent(id)}`;
+  const roomHref = () => `${hallBase()}/thinking`;
+
+  // The route's own ceiling and the room's own cap, restated rather than
+  // shared: the two pages read the same endpoint and a sky that stopped at a
+  // different row than the room would be a second, quieter claim about the same
+  // trail. If one of these moves the other has to.
+  const PAGE = 100;
+  const CAP = 300;
+  // Criteria are one extra read PER WELL, so the number of wells is the number
+  // of extra requests. Past this the rings are simply not drawn: a well with no
+  // rings is an honest well (it says nothing about its criteria), where twelve
+  // background reads on page load would be the sky making filing slower, which
+  // is the one thing spec decision 12 forbids it to do.
+  const WELL_DETAIL_MAX = 8;
+
+  const state = {
+    ideas: [],
+    total: 0,
+    capped: false,
+    loading: false,
+    // goalId → title. Absent until /goals answers; an absent title is drawn as
+    // the id, never as a blank well.
+    goals: new Map(),
+    // goalId → [{ satisfied }] in sort order. Absent means "not read", which is
+    // drawn as no rings — never as a goal with zero criteria.
+    criteria: new Map(),
+    picked: null,
+  };
+
+  // ---- geometry ------------------------------------------------------------
+  //
+  // Every number below is a PERCENTAGE of the well's own box, so one placement
+  // serves 1440, 390 and 320 without a second breakpoint's worth of arithmetic.
+
+  // The golden angle. Successive multiples of it never repeat and never bunch,
+  // which is what puts n thoughts round a well evenly for every n without a
+  // per-n table — the same reason a sunflower uses it.
+  const GOLDEN = 137.50776405003785;
+
+  // A stable per-idea jitter so two thoughts at the same spiral index in two
+  // different wells do not sit at pixel-identical spots, and so the field does
+  // not visibly re-shuffle when a background page lands. Derived from the id
+  // and nothing else: the same trail draws the same sky on every load, which
+  // matters because a screenshot pass has to be reproducible.
+  function hash(id) {
+    let h = 2166136261;
+    const s = String(id);
+    for (let i = 0; i < s.length; i += 1) {
+      h ^= s.charCodeAt(i);
+      h = Math.imul(h, 16777619);
+    }
+    return ((h >>> 0) % 1000) / 1000;
+  }
+
+  // Where thought `i` of `n` sits inside a circular field, as { left, top } in
+  // per cent. The innermost ring is left clear: a thought sitting on the well's
+  // own centre reads as the goal rather than as something inside it.
+  function place(id, i, n) {
+    const a = ((i * GOLDEN) + hash(id) * 24) * (Math.PI / 180);
+    // Spread over the annulus rather than filling the disc — with one thought
+    // the fraction is 0.5, which is mid-annulus, not dead centre.
+    const frac = n <= 1 ? 0.5 : (i / (n - 1));
+    const r = 14 + 24 * frac;
+    return { left: 50 + r * Math.cos(a), top: 50 + r * Math.sin(a) };
+  }
+
+  // A satellite is drawn ON the thought it was folded into, a fixed short step
+  // away at a stable angle. "It orbits that one now" is a claim about POSITION
+  // that the mark alone cannot make: a satellite dropped into its host's well
+  // at the next free spiral slot can land on the far side of the field from the
+  // thought it belongs to, which draws the opposite of what the design says.
+  // The step is fixed rather than scaled by either body, so two thoughts never
+  // resolve to the same point however large the host is.
+  function orbit(around, satelliteId) {
+    const a = (hash(satelliteId) * 360) * (Math.PI / 180);
+    return { left: around.left + 8 * Math.cos(a), top: around.top + 8 * Math.sin(a) };
+  }
+
+  // The drawn diameter, in px, from the server's compressed scale.
+  //
+  // THE CURVE IS THE SERVER'S AND THERE IS NOT A SECOND ONE HERE. Size is
+  // long-tailed, economy compresses it once at the read
+  // (modules/economy/idea-size.js compressIdeaSize) and the direction is
+  // explicit that the compressed value is what a drawing uses. A log taken here
+  // on top of that one is exactly how the sky and the room end up drawing the
+  // same thought at two different sizes — the failure idea-objects.js exists to
+  // prevent, one axis over.
+  const D_MIN = 9;
+  const D_MAX = 32;
+  function diameter(idea) {
+    const size = idea.size;
+    if (!size || typeof size.credits !== 'number') return D_MIN;
+    const scale = Number(size.scale);
+    if (!Number.isFinite(scale) || scale <= 0) return D_MIN;
+    return Math.round(D_MIN + (D_MAX - D_MIN) * Math.min(1, Math.max(0, scale)));
+  }
+
+  // `--lit` is the live share, and it rides the glyph exactly as it does in the
+  // room: a brightness that could not be READ leaves the glyph FULL and puts
+  // the doubt in words. Dimming on `brightness: null` would state that work is
+  // gone when the only thing that happened is that nobody could look.
+  function litOf(st) {
+    return (st && st.hasWork === true && st.attributable === true && typeof st.brightness === 'number')
+      ? st.brightness
+      : 1;
+  }
+
+  // ---- what a thought says -------------------------------------------------
+
+  // The whole sentence, for the aria-label and the title. A glyph in a field is
+  // the one thing on this page that carries no text of its own, so everything
+  // the picture encodes — the object, the size, the live share, the position —
+  // has to be here or it is only available to someone who can see it.
+  function sentence(idea) {
+    const st = idea.state;
+    const o = objects.objectFor(st && st.state);
+    const bits = [idea.title || `Idea ${idea.id}`, o.label];
+    const pos = objects.positionWord(st);
+    if (pos) bits.push(pos);
+    const size = idea.size;
+    if (!size || typeof size.credits !== 'number') bits.push('size unknown');
+    else if (size.credits > 0) bits.push(`size ${size.credits}`);
+    const bright = objects.brightnessWord(st);
+    if (bright) bits.push(bright);
+    return bits.join(' — ');
+  }
+
+  // `grow` is the panel's magnification and nothing else: the picked thought is
+  // drawn from the SAME diameter the field drew, multiplied, so the panel can
+  // never show a thought at a size the field disagrees with.
+  function glyphHtml(idea, grow) {
+    const st = idea.state;
+    const d = Math.round(diameter(idea) * (grow || 1));
+    const lit = litOf(st);
+    const size = idea.size;
+    // `size: null` is "the reward port could not be asked", not "it earned
+    // nothing" (trail-size.js). Drawn at the floor diameter, because inventing
+    // a middle one would be a claim — and marked, so the floor is not read as a
+    // measured zero.
+    const unknown = !size || typeof size.credits !== 'number';
+    return `<span class="sky-glyph" data-object="${escapeHtml(String((st && st.state) || 'unknown'))}"${unknown ? ' data-size="unknown"' : ''} style="--d:${d}px;--lit:${lit.toFixed(2)}" aria-hidden="true"></span>`;
+  }
+
+  function thoughtHtml(idea, p) {
+    const label = sentence(idea);
+    const picked = String(state.picked) === String(idea.id);
+    return `<button type="button" class="sky-body" data-idea="${escapeHtml(String(idea.id))}"
+        ${picked ? 'data-picked="1" ' : ''}aria-pressed="${picked ? 'true' : 'false'}"
+        style="left:${p.left.toFixed(2)}%;top:${p.top.toFixed(2)}%"
+        title="${escapeHtml(label)}" aria-label="${escapeHtml(label)}">${glyphHtml(idea)}</button>`;
+  }
+
+  // ---- the wells -----------------------------------------------------------
+
+  // A well is a GOAL THAT HOLDS ONE OF THIS THOUGHT'S TASKS — `wellGoalId`,
+  // which idea-state.js derives from `tasks.goal_id` and is emphatic is not
+  // `suggested_goal_id` (that one is strictly advisory and would draw a
+  // protostar inside a well that never caught it). Nothing is re-derived here;
+  // this only groups by the answer.
+  //
+  // A SATELLITE SITS BESIDE THE THOUGHT IT WAS FOLDED INTO when that thought is
+  // in view, because "it orbits that one now" is a statement about POSITION and
+  // the object's mark alone cannot make it. When the parent is not in the
+  // trail — folded into somebody else's thought — it falls back to its own
+  // well, or to open space.
+  function group() {
+    const byId = new Map(state.ideas.map((i) => [String(i.id), i]));
+    const wells = new Map();
+    const open = [];
+    // The thought a row is DRAWN WITH: itself, unless it was folded into one
+    // that is also in view. `hostOf` is the whole of the satellite rule and is
+    // asked once, so the well it lands in and the point it is drawn at cannot
+    // come from two different answers.
+    const hostOf = (idea) => {
+      if (idea.merged_into_idea_id == null) return null;
+      return byId.get(String(idea.merged_into_idea_id)) || null;
+    };
+    for (const idea of state.ideas) {
+      const host = hostOf(idea);
+      const g = ((host || idea).state && (host || idea).state.wellGoalId) || null;
+      const entry = { idea, hostId: host ? String(host.id) : null };
+      if (!g) { open.push(entry); continue; }
+      if (!wells.has(g)) wells.set(g, []);
+      wells.get(g).push(entry);
+    }
+    // Biggest well first, then by goal id — stable, so the field does not
+    // re-order itself when a background page lands and the reader loses the
+    // thought they were looking at.
+    const ordered = [...wells.entries()].sort((a, b) => (b[1].length - a[1].length) || (a[0] < b[0] ? -1 : 1));
+    return { wells: ordered, open };
+  }
+
+  // Entries → markup. The spiral index counts only the thoughts that take a
+  // slot of their own: a satellite is drawn ON its host, so counting it would
+  // push every other thought out by one notch for a body that occupies none.
+  // A satellite whose host is in ANOTHER well (its host had no well of its own,
+  // or the reverse) falls back to a slot, because the point it would orbit does
+  // not exist on this field.
+  function fieldHtml(entries) {
+    const here = new Set(entries.map((e) => String(e.idea.id)));
+    // Anchored = takes a slot. A thought with no host does; so does one whose
+    // host is not on this field, and so does a satellite OF a satellite — the
+    // chain is followed exactly one hop, which is what makes it impossible for
+    // a cycle in the merge ledger to hang the render.
+    const anchored = new Set();
+    for (const e of entries) if (!e.hostId || !here.has(e.hostId)) anchored.add(String(e.idea.id));
+    for (const e of entries) if (e.hostId && !anchored.has(e.hostId)) anchored.add(String(e.idea.id));
+
+    const slots = new Map();
+    let i = 0;
+    const n = entries.filter((e) => anchored.has(String(e.idea.id))).length;
+    for (const e of entries) {
+      if (anchored.has(String(e.idea.id))) slots.set(String(e.idea.id), place(e.idea.id, i++, n));
+    }
+    return entries.map((e) => {
+      const id = String(e.idea.id);
+      const p = anchored.has(id) ? slots.get(id) : orbit(slots.get(e.hostId), e.idea.id);
+      return thoughtHtml(e.idea, p);
+    }).join('');
+  }
+
+  // The rings. One per criterion, innermost first, closing as each is
+  // satisfied: a satisfied criterion is drawn solid, an open one faint. A goal
+  // whose criteria have not been READ gets no rings at all rather than an empty
+  // circle — "we did not look" and "this goal has no criteria" are different
+  // answers and the second one would be a lie about the project's own shape.
+  function ringsHtml(goalId) {
+    const list = state.criteria.get(String(goalId));
+    if (!Array.isArray(list) || list.length === 0) return '';
+    const n = Math.min(list.length, 6);
+    return list.slice(0, n).map((c, i) => {
+      const pct = 32 + (92 - 32) * (n === 1 ? 1 : i / (n - 1));
+      return `<span class="sky-ring"${c && c.satisfied ? ' data-closed="1"' : ''} style="--r:${pct.toFixed(1)}%" aria-hidden="true"></span>`;
+    }).join('');
+  }
+
+  function wellHtml(goalId, entries) {
+    const title = state.goals.get(String(goalId)) || `Goal ${goalId}`;
+    const crit = state.criteria.get(String(goalId));
+    const closed = Array.isArray(crit) ? crit.filter((c) => c && c.satisfied).length : 0;
+    const note = Array.isArray(crit) && crit.length > 0
+      ? `${closed} of ${crit.length} criteria met`
+      : `${entries.length} thought${entries.length === 1 ? '' : 's'}`;
+    return `<section class="sky-well" aria-labelledby="sky-w-${escapeHtml(String(goalId))}">
+      <h3 class="sky-well__h" id="sky-w-${escapeHtml(String(goalId))}">
+        <a href="${goalHref(goalId)}">${escapeHtml(title)}</a>
+      </h3>
+      <p class="sky-well__note">${escapeHtml(note)}</p>
+      <div class="sky-field">
+        ${ringsHtml(goalId)}
+        ${fieldHtml(entries)}
+      </div>
+    </section>`;
+  }
+
+  function openHtml(entries) {
+    if (entries.length === 0) return '';
+    return `<section class="sky-well sky-well--open" aria-labelledby="sky-w-open">
+      <h3 class="sky-well__h" id="sky-w-open">Open space</h3>
+      <p class="sky-well__note">no goal has claimed ${entries.length === 1 ? 'this one' : 'these'}</p>
+      <div class="sky-field">
+        ${fieldHtml(entries)}
+      </div>
+    </section>`;
+  }
+
+  // ---- the panel -----------------------------------------------------------
+  //
+  // The picked thought in words. It is the page's answer to "never the only
+  // path": every fact here names where it is read in full, and the three links
+  // out — the record, the well, the descent — are the whole of the escape.
+
+  function factRow(label, valueHtml) {
+    return `<div class="sky-fact"><span class="sky-fact__k">${escapeHtml(label)}</span><span class="sky-fact__v">${valueHtml}</span></div>`;
+  }
+
+  // What a thought became, from the LEDGER facts on the row and never from the
+  // state — the same rule the room's `becameHtml` keeps, so a disagreement
+  // between the two shows up as a visibly odd row instead of being smoothed
+  // into agreement.
+  function becameHtml(idea) {
+    if (idea.merged_into_idea_id) {
+      const t = idea.merged_into_idea_title || `idea ${idea.merged_into_idea_id}`;
+      return `folded into <a href="${ideaHref(idea.merged_into_idea_id)}">${escapeHtml(t)}</a>`;
+    }
+    const lineage = Array.isArray(idea.lineage_tasks) ? idea.lineage_tasks : [];
+    const roots = new Set();
+    for (const t of lineage) if (t && t.task_id != null) roots.add(String(t.task_id));
+    if (roots.size === 0 && idea.promoted_to_task_id != null) roots.add(String(idea.promoted_to_task_id));
+    if (roots.size === 0) {
+      if (idea.status === 'discarded') return 'declined at triage';
+      return '<span class="sky-quiet">nothing yet</span>';
+    }
+    const bits = [];
+    if (roots.size === 1) {
+      const id = [...roots][0];
+      const named = lineage.find((t) => t && String(t.task_id) === id);
+      const t = (named && named.title) || idea.promoted_task_title || `task ${id}`;
+      bits.push(`<a href="${taskHref(id)}">${escapeHtml(t)}</a>`);
+    } else {
+      bits.push(`${roots.size} tasks`);
+    }
+    const descent = Array.isArray(idea.descent_tasks) ? idea.descent_tasks : [];
+    if (descent.length > 0) bits.push(`<span class="sky-quiet">and ${descent.length} more below</span>`);
+    return bits.join(' · ');
+  }
+
+  function sizeHtml(idea) {
+    const size = idea.size;
+    if (!size || typeof size.credits !== 'number') {
+      return '<span class="sky-quiet" title="the ledger could not be read">unknown</span>';
+    }
+    if (size.credits <= 0) return '<span class="sky-quiet">none yet</span>';
+    // A size computed from the descent an idea already had, rather than from
+    // payouts actually made (spec decision 17). The marker rides wherever the
+    // number is shown, or the number quietly claims to be money that was spent.
+    const mark = size.historical === true
+      ? ' <abbr class="sky-hist" title="computed from the descent this idea already had — not payouts that were made">part historical</abbr>'
+      : '';
+    return `${escapeHtml(String(size.credits))}${mark}`;
+  }
+
+  function brightHtml(idea) {
+    const st = idea.state;
+    const word = objects.brightnessWord(st);
+    if (!word) return '<span class="sky-quiet">nothing to be alive yet</span>';
+    const known = st && st.attributable === true && typeof st.brightness === 'number';
+    const pct = known ? Math.round(Number(st.brightness) * 100) : 0;
+    // The bar is drawn only when the share was actually read. An unreadable
+    // brightness gets the words alone: a bar at zero and a bar that could not
+    // be measured look identical, and one of them is a claim nobody checked.
+    const bar = known
+      ? `<span class="sky-bar" style="--w:${pct}%"${pct === 0 ? ' data-lit="out"' : ''}></span>`
+      : '';
+    return `${bar}<span class="sky-brightword">${escapeHtml(word)}</span>`;
+  }
+
+  function panelHtml() {
+    const idea = state.ideas.find((i) => String(i.id) === String(state.picked));
+    if (!idea) {
+      return `<p class="sky-pick">Pick a thought to read it. Every one of them is also a row in
+        <a href="${roomHref()}">your thinking</a>, which is the same trail as a list.</p>`;
+    }
+    const st = idea.state;
+    const o = objects.objectFor(st && st.state);
+    const pos = objects.positionWord(st);
+    const well = st && st.wellGoalId
+      ? `<a href="${goalHref(st.wellGoalId)}">${escapeHtml(state.goals.get(String(st.wellGoalId)) || `Goal ${st.wellGoalId}`)}</a>`
+      : '<span class="sky-quiet">open space</span>';
+    return `<div class="sky-panel__head">
+        ${glyphHtml(idea, 1.5)}
+        <span class="sky-panel__object">${escapeHtml(o.label)}</span>
+      </div>
+      <p class="sky-panel__title"><a href="${ideaHref(idea.id)}">${escapeHtml(idea.title || `Idea ${idea.id}`)}</a></p>
+      <div class="sky-facts">
+        ${factRow('gravity', well)}
+        ${factRow('became', becameHtml(idea))}
+        ${factRow('size — the work it caused', sizeHtml(idea))}
+        ${factRow('brightness — still alive', brightHtml(idea))}
+      </div>
+      ${pos ? `<p class="sky-panel__pos">${escapeHtml(pos)}</p>` : ''}
+      <p class="sky-panel__blurb">${escapeHtml(o.blurb)}</p>
+      <p class="sky-panel__out"><a class="btn-ghost" href="${ideaHref(idea.id)}">Open its descent</a></p>`;
+  }
+
+  // ---- the legend ----------------------------------------------------------
+  //
+  // The five objects, in the shared order, with the shared blurbs. It is drawn
+  // from idea-objects.js ORDER rather than a list written here, so the page
+  // cannot grow a sixth object the resolver does not emit or lose one it does.
+  function legendHtml() {
+    return objects.ORDER.map((id) => {
+      const o = objects.objectFor(id);
+      return `<div class="sky-leg">
+        <span class="sky-glyph" data-object="${escapeHtml(id)}" style="--d:${id === 'remnant' ? 16 : 11}px;--lit:1" aria-hidden="true"></span>
+        <div class="sky-leg__body">
+          <span class="sky-leg__name">${escapeHtml(o.label)} — ${escapeHtml(o.noun)}</span>
+          <span class="sky-leg__what">${escapeHtml(o.blurb)}</span>
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  // ---- painting ------------------------------------------------------------
+
+  function headline() {
+    const rows = state.ideas;
+    const n = (k) => rows.filter((i) => i.state && i.state.state === k).length;
+    const burning = n('star');
+    const out = n('remnant');
+    if (rows.length === 0) return 'Nothing filed yet';
+    return `${burning} burning, ${out} burned out, ${rows.length} in all`;
+  }
+
+  function paint() {
+    const { wells, open } = group();
+    const sky = $('#sky-map');
+    if (wells.length === 0 && open.length === 0) {
+      sky.innerHTML = `<p class="sky-empty">You have not filed anything yet, so there is nothing in your sky.
+        <a href="${hallBase()}/ideas">File a thought</a> — it takes one line.</p>`;
+    } else {
+      sky.innerHTML = wells.map(([g, list]) => wellHtml(g, list)).join('') + openHtml(open);
+    }
+    $('#sky-panel').innerHTML = panelHtml();
+    const sub = $('#sky-sub');
+    if (sub) sub.textContent = headline();
+    const foot = $('#sky-foot');
+    const bits = [];
+    if (state.loading) bits.push(`Drawing the rest of your trail — ${state.ideas.length} of ${state.total} so far.`);
+    else if (state.capped) bits.push(`Showing your newest ${state.ideas.length} of ${state.total}.`);
+    bits.push('Size is the work a thought caused and never falls; brightness is how much of that work is still alive.');
+    foot.textContent = bits.join(' ');
+    foot.hidden = false;
+  }
+
+  // ---- the reads -----------------------------------------------------------
+
+  async function fetchPage(builderId, offset) {
+    const r = await api.request('GET',
+      `${API}/inbox/by-builder/${encodeURIComponent(builderId)}?limit=${PAGE}&offset=${offset}`);
+    if (r.status === 401) { window.location.assign(`${API}/auth/web/start`); return null; }
+    if (!r.ok || !r.data) throw new Error(`idea trail → ${r.status}`);
+    return r.data;
+  }
+
+  // The wells' names and their rings, AFTER the field is already on screen.
+  // Spec decision 12 — the sky redraws in the background — is about filing, but
+  // the same posture applies to the sky's own load: a field drawn with goal ids
+  // for labels and no rings is useful, and blocking on two more round trips to
+  // avoid showing it for a moment is not.
+  async function loadWells(goalIds) {
+    try {
+      const r = await api.request('GET', `${API}/goals`);
+      if (r.ok && r.data && Array.isArray(r.data.goals)) {
+        for (const g of r.data.goals) if (g && g.id != null) state.goals.set(String(g.id), g.title || null);
+        paint();
+      }
+    } catch (_) { /* a well keeps its id for a label; nothing else changes */ }
+
+    const want = goalIds.slice(0, WELL_DETAIL_MAX);
+    await Promise.all(want.map(async (id) => {
+      try {
+        const r = await api.request('GET', `${API}/goals/${encodeURIComponent(id)}`);
+        if (r.ok && r.data && Array.isArray(r.data.criteria)) state.criteria.set(String(id), r.data.criteria);
+      } catch (_) { /* no rings on this well, which is the honest drawing */ }
+    }));
+    paint();
+  }
+
+  function fail(msg) {
+    $('#sky-map').innerHTML = `<p class="sky-empty">${escapeHtml(msg)}</p>`;
+    $('#sky-foot').hidden = true;
+  }
+
+  function wire() {
+    const sky = $('#sky-map');
+    if (!sky || !sky.addEventListener) return;
+    // One delegated listener on the field rather than one per body: a trail of
+    // 300 thoughts is 300 buttons, and the field is repainted on every
+    // background page.
+    sky.addEventListener('click', (ev) => {
+      const btn = ev.target && ev.target.closest && ev.target.closest('[data-idea]');
+      if (!btn) return;
+      const id = btn.getAttribute('data-idea');
+      state.picked = String(state.picked) === String(id) ? null : id;
+      paint();
+    });
+  }
+
+  async function main() {
+    // Who is looking. The sky is the AUTHOR's own view, so the id is the
+    // viewer's and never a query parameter — the same rule the room keeps.
+    const me = await api.request('GET', `${API}/me`);
+    if (me.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }
+    if (!me.ok || !me.data || !me.data.builder) return fail('Could not work out who you are — try signing in again.');
+    const builderId = me.data.builder.id;
+
+    let first;
+    try {
+      first = await fetchPage(builderId, 0);
+    } catch (_) {
+      return fail('Could not read your idea trail.');
+    }
+    if (!first) return;
+
+    state.ideas = Array.isArray(first.ideas) ? first.ideas : [];
+    state.total = Number(first.total) || state.ideas.length;
+    state.loading = state.ideas.length < state.total && state.ideas.length < CAP;
+    wire();
+    paint();
+
+    while (state.loading) {
+      let next;
+      try {
+        next = await fetchPage(builderId, state.ideas.length);
+      } catch (_) {
+        state.loading = false;
+        state.capped = true;
+        break;
+      }
+      if (!next) return;
+      const batch = Array.isArray(next.ideas) ? next.ideas : [];
+      state.total = Number(next.total) || state.total;
+      if (batch.length === 0) { state.loading = false; break; }
+      state.ideas = state.ideas.concat(batch);
+      if (state.ideas.length >= CAP && state.ideas.length < state.total) {
+        state.capped = true;
+        state.loading = false;
+      } else if (state.ideas.length >= state.total) {
+        state.loading = false;
+      }
+      paint();
+    }
+    paint();
+
+    const goalIds = group().wells.map(([g]) => g);
+    if (goalIds.length > 0) await loadWells(goalIds);
+  }
+
+  $('#sky-legend').innerHTML = legendHtml();
+  main();
+})();

package/modules/hall-ui/public/sky.states.json

@@ -0,0 +1,20 @@
+{
+  "_": "THE SKY (task 1004105 / BV2.R26) through modules/ui-design/kit/render.js. Like the room, every thought on this page comes from ONE authenticated read, so against the kit's own stub it renders its signed-out / empty state — which is a state the floors must hold in and is rendered here deliberately. To look at the populated field, run it against the hall-preview harness, whose inbox__by-builder.json fixture carries one of each of the five objects plus a historical size, and whose goals.json + goals__<id>.json name the wells and give them their criterion rings:\n\n  node scripts/hall-preview/server.js --port 4615 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/sky.states.json --base-in http://localhost:4615 --base-out http://localhost:4615",
+  "page": "/builders/sky",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "ignoreRequests": ["/api/(gds|bongos)/"],
+  "ignoreConsole": ["/api/(gds|bongos)/", "\\b401\\b", "\\b404\\b", "Unauthorized", "Not Found", "load failed"],
+  "states": {
+    "sky": { "auth": true, "actions": [["wait", 1200]], "expect": { "visible": ["#sky-map", "#sky-legend"] } },
+    "picked": {
+      "auth": true,
+      "_": "A thought picked, which is the page's only control and the state the panel exists for. clickIfVisible and not click: against the kit's own stub the field renders empty, so there is no body to press and a bare click would fail the state rather than render it.",
+      "actions": [["wait", 1200], ["clickIfVisible", ".sky-body"], ["wait", 200]],
+      "expect": { "visible": ["#sky-panel"] }
+    },
+    "out": { "auth": false, "actions": [["wait", 600]] }
+  },
+  "reducedMotion": { "auth": true, "actions": [["wait", 1200]] }
+}

package/modules/hall-ui/public/style.css

@@ -3163,10 +3163,20 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 /* tab strip — the .setup__tab idiom in the .setup__toggle frame, promoted */
 /* A tab strip is hairlines, not a segmented box: one rule under the row and a
    2px accent underline on the open tab, the lit-step grammar again. */
+/* Both axes are named on purpose, and the pair is load-bearing — do not
+   "simplify" this back to the single `overflow-x`. Per the overflow spec a
+   non-`visible` value on one axis computes the OTHER axis to `auto` too, so
+   `overflow-x: auto` alone made the strip a scroll container vertically as
+   well; `.setup__tab`'s `margin-bottom: -1px` (the underline sitting on the
+   strip's hairline, below) then overflowed it by exactly 1px and every hall
+   page with tabs grew a vertical scrollbar it could never scroll. `hidden` is
+   the fix and `visible` is not: `visible` beside an `auto` is the value the
+   spec rewrites, which would put the bug straight back (task 1004130). */
 .kit-tabs {
   display: flex;
   max-width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
   border: 0;
   border-bottom: 1px solid var(--rule);
   border-radius: 0;

package/modules/hall-ui/public/thinking.css

@@ -61,15 +61,6 @@
    the kit's own margin assumes a panel directly beneath and here a table
    follows. */
 .tr-filters { margin: 0 0 var(--sp-sm); }
-/* `.kit-tabs` sets `overflow-x: auto`, which per spec makes the OTHER axis
-   `auto` too — and the strip's own `.setup__tab { margin-bottom: -1px }` leaves
-   it exactly 1px taller than its box, so a vertical scrollbar appears beside a
-   horizontal strip that cannot scroll vertically. It is the shared component's
-   defect rather than this page's, and it is not fixed in style.css from here:
-   that rule is on every page carrying a tab strip, and quietly changing the
-   hall's chrome inside a page's task is how a sheet stops being reviewable.
-   Scoped to this page, with the shared fix filed separately. */
-.tr-filters .kit-tabs { overflow-y: hidden; }
 
 /* ---- the rows ------------------------------------------------------------ */
 /* The four short columns are pinned and the two prose ones share what is left,

package/modules/hall-ui/public/thinking.html

@@ -41,7 +41,8 @@
           <p class="scroll__lede">
             Your own view of your own thinking. Size is the work a thought caused and
             never falls; brightness is how much of that work is still alive — that is
-            the part that can go out.
+            the part that can go out. The same trail is also a map, in
+            <a href="/builders/sky">your sky</a>.
           </p>
 
           <!-- The figures, the filters and the rows are all written by

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.19.929",
+  "version": "1.19.931",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.19.929",
+      "version": "1.19.931",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",