@bongos/core 1.18.3 → 1.18.19

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

@@ -1,29 +1,30 @@
-// roadmap.js — the Roadmap page (task 1757, owner request from the task-1723
-// review): every declared version's progress, with its goals nested
-// underneath (status, criteria, inline join/leave). Carved out of the Work
-// Board's "Versions, by progress" section (work.js) so the board stays about
-// claimable work and this page owns the bigger picture. Server gate is
-// SIGNEDIN_BUILDERS_PAGE_RE in serve-internal.js.
+// roadmap.js — the Roadmap page, "Command deck" layout (task 1002426, owner-
+// approved redesign from the mockup review; supersedes the flat progress-bar
+// stack introduced in task 1757).
 //
-// Reads: GET /me (viewer id + rank — rank gates the task-1760 drag handle so
-// only an Archon sees it, though the server is the real enforcement), GET
-// /public/progress (version lifecycle rollup — public, never gated), GET
-// /goals?version=X + GET /goals/:id (per-version goals + members/criteria).
-// Writes: POST /goals/:id/join | /leave, POST /goals/reorder (Archon-only,
-// task 1760 — persists a version's goal priority order via drag-to-reorder).
+// Shape: a program-level hero (whole-build rollup) → versions GROUPED BY their
+// real status (planning=Staged · building=In flight · frozen=Parked ·
+// shipped=Shipped), with the dominant in-flight version featured full-width. The
+// goal layer is SUMMARIZED per version — a status bar (achieved / in progress /
+// not started) plus only the goals active right now — instead of nesting every
+// goal + criterion inline (BONGOS-V1 alone carries ~30 goals; the old flat list
+// was the big-picture killer). The full per-version goal list, inline join/leave,
+// and Archon drag-to-reorder now live on the Goals page, which "See all N goals"
+// links to.
+//
+// Reads (all GET): /public/progress (lifecycle rollup + counts + %, public),
+// /public/versions (track + started/shipped dates, public), and — for every
+// non-shipped version only — /goals?version=X + /goals/:id (per-goal criteria to
+// split in-progress from not-started). Shipped versions render as a pill strip
+// with no goal fetch. No writes. Server page gate: SIGNEDIN_BUILDERS_PAGE_RE.
 (() => {
   'use strict';
 
   const API = '/api/bongos';
-  // Generated typed client (task 1996 / R09), served as window.BongosClient by
-  // /lib/bongos-client.js. baseUrl:'' passes the full same-origin paths this file
-  // builds through unchanged; result-mode ({ status, ok, data }) preserves control flow 1:1.
   const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
   const { escapeHtml, $, fmtNum } = window.OTB;
   const toast = (msg) => window.OTB.toast(msg, { duration: 2200, clear: true });
 
-  const viewer = { id: null, isArchon: false };
-
   async function getJSON(path) {
     const res = await api.request('GET', path);
     if (res.status === 401) {
@@ -34,342 +35,354 @@
     if (!res.ok) { const e = new Error(`${path} → ${res.status}`); e.status = res.status; e.data = data; throw e; }
     return data;
   }
-  async function postJSON(path, body) {
-    const res = await api.request('POST', path, { body: body || {} });
-    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw new Error('redirecting to auth'); }
-    const data = res.data || {};
-    if (!res.ok) { const e = new Error(`${path} → ${res.status}`); e.status = res.status; e.data = data; throw e; }
-    return data;
-  }
 
-  // ---- version + goal rendering (moved from work.js, task 1757) ------------
+  const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const TRACK = {
+    product:  { label: 'Product',  cls: 'product' },
+    internal: { label: 'Platform', cls: 'internal' },
+    default:  { label: 'Dogfood',  cls: 'dogfood' },
+  };
+  const PHASE = {
+    building: { label: 'In flight', cls: 'building' },
+    planning: { label: 'Staged',    cls: 'planning' },
+    frozen:   { label: 'Parked',    cls: 'frozen' },
+  };
+  // The instance's Goals page (root-relative — resolves on the builders host).
+  const GOALS_URL = '/goals';
+  const goalDeepLink = (id) => `/goals#/goal/${encodeURIComponent(String(id))}`;
 
-  function goalBadge(status) {
-    const cls = status === 'achieved' ? 'goal-badge--achieved'
-      : (status === 'archived' ? 'goal-badge--archived' : 'goal-badge--open');
-    return `<span class="goal-badge ${cls}">${escapeHtml(status)}</span>`;
-  }
+  const pctOf = (n, d) => (d > 0 ? (n / d) * 100 : 0);
+  const ym = (s) => { if (!s) return ''; const d = new Date(s); return Number.isNaN(d.getTime()) ? '' : `${MON[d.getMonth()]} ${d.getFullYear()}`; };
+  const trackOf = (v) => TRACK[v.track] || TRACK.internal;
 
-  function critListHtml(criteria) {
-    return `<ul class="vbar__crit-list">${criteria.map((c) => {
-      const { label, detail } = window.OTB.splitCriterion(c.criterion_md || '');
-      const text = detail
-        ? `<details class="vbar__crit-d"><summary class="vbar__crit-text">${escapeHtml(label)}</summary><div class="vbar__crit-full">${escapeHtml(detail)}</div></details>`
-        : `<span class="vbar__crit-text">${escapeHtml(label)}</span>`;
-      return `<li class="vbar__crit${c.satisfied ? ' vbar__crit--done' : ''}"><span class="vbar__crit-mark" aria-hidden="true">${c.satisfied ? '✓' : '○'}</span>${text}</li>`;
-    }).join('')}</ul>`;
+  const chip = (v) => { const t = trackOf(v); return `<span class="rm-chip rm-chip--${t.cls}"><span class="rm-sq"></span>${t.label}</span>`; };
+  const phase = (v) => { const p = PHASE[v.status]; return p ? `<span class="rm-phase rm-phase--${p.cls}"><span class="rm-pd"></span>${p.label}</span>` : ''; };
+
+  function ring(v) {
+    const done = v.pct >= 100;
+    return `<div class="rm-ring" style="--p:${v.pct};--rc:${done ? 'var(--ok)' : 'var(--accent)'}" role="img" aria-label="${v.pct}% of tasks complete"><b>${v.pct}<i>%</i></b></div>`;
+  }
+  function lbar(v) {
+    const t = v.total, l = v.life, r = Math.max(0, t - (l.sh + l.co + l.cm));
+    return `<div class="rm-lbar" role="img" aria-label="${l.sh} shipped, ${l.co} confirmed, ${l.cm} completed, ${r} remaining of ${t}">
+      <span class="rm-lbar__s rm-lbar__s--sh" style="width:${pctOf(l.sh, t)}%"></span>
+      <span class="rm-lbar__s rm-lbar__s--co" style="width:${pctOf(l.co, t)}%"></span>
+      <span class="rm-lbar__s rm-lbar__s--cm" style="width:${pctOf(l.cm, t)}%"></span></div>`;
+  }
+  function gbar(g) {
+    return `<div class="rm-gbar" role="img" aria-label="${g.ach} achieved, ${g.prog} in progress, ${g.plan} not started of ${g.total} goals">
+      <span class="rm-gbar__s rm-gbar__s--ach"  style="width:${pctOf(g.ach, g.total)}%"></span>
+      <span class="rm-gbar__s rm-gbar__s--prog" style="width:${pctOf(g.prog, g.total)}%"></span>
+      <span class="rm-gbar__s rm-gbar__s--plan" style="width:${pctOf(g.plan, g.total)}%"></span></div>`;
   }
 
-  // One goal under a version: expandable to its criteria, with inline Join/Leave.
-  // d = { goal, members, criteria }. `priority` is this goal's 1-based rank
-  // within its version's list (the server's sort_order order, task 1760).
-  function goalItemHtml(d, priority) {
-    const g = d.goal;
-    const crit = Array.isArray(d.criteria) ? d.criteria : [];
-    const sat = crit.filter((c) => c.satisfied).length;
-    const achieved = g.status === 'achieved';
-    const joined = (d.members || []).some((m) => String(m.builder_id) === String(viewer.id));
-    // task 1761: an open goal blocked by a not-yet-achieved prerequisite goal is
-    // greyed + flagged (the tooltip names the goals it waits on).
-    const unmetDeps = (Array.isArray(d.dependencies) ? d.dependencies : []).filter((dep) => !dep.satisfied);
-    const blocked = g.status === 'open' && unmetDeps.length > 0;
-    const blockedBadge = blocked
-      ? `<span class="goal-badge goal-badge--blocked" title="Blocked until achieved: ${escapeHtml(unmetDeps.map((u) => u.title || ('goal ' + u.id)).join(', '))}">🔒 blocked</span>`
-      : '';
-    // Expanded by default when mid-flight (some but not all criteria met).
-    const expanded = crit.length && sat > 0 && sat < crit.length;
-    const critBlock = crit.length ? critListHtml(crit) : '<p class="vgoal__nocrit">No criteria yet.</p>';
-    const action = joined
-      ? `<button type="button" class="vgoal-action vgoal-leave" data-act="leave" data-id="${escapeHtml(String(g.id))}">Leave</button>`
-      : (g.status === 'open'
-        ? `<button type="button" class="vgoal-action vgoal-join" data-act="join" data-id="${escapeHtml(String(g.id))}">Join</button>`
-        : '');
-    // Priority is always visible ("sees order"); the drag handle is Archon-only
-    // ("can't change it" for everyone else) — the server-side rank gate on
-    // POST /goals/reorder is the real enforcement, this is just the affordance.
-    const handle = viewer.isArchon
-      ? `<span class="vgoal__handle" draggable="true" title="Drag to reprioritize within ${escapeHtml(g.version_id || 'this version')}" aria-hidden="true">⠿</span>`
-      : '';
-    // A custom disclosure (not <details>/<summary>): the criteria toggle is its own
-    // button and Join/Leave is a plain sibling button — so neither click target is
-    // nested in a <summary>, where the native details-toggle makes buttons flaky.
-    return `
-      <div class="vgoal${achieved ? ' vgoal--achieved' : ''}${blocked ? ' vgoal--blocked' : ''}" data-goal-id="${escapeHtml(String(g.id))}" data-version-id="${escapeHtml(String(g.version_id || ''))}"${viewer.isArchon ? ' draggable="true"' : ''}>
-        <div class="vgoal__head">
-          ${handle}
-          <span class="vgoal__priority" title="Priority within this version">${priority}</span>
-          <button type="button" class="vgoal__toggle" aria-expanded="${expanded ? 'true' : 'false'}">
-            <span class="vgoal__caret${expanded ? ' vgoal__caret--open' : ''}" aria-hidden="true">▸</span>
-          </button>
-          <a class="vgoal__title vgoal__title--link" href="/goals#/goal/${escapeHtml(String(g.id))}" title="Open goal #${escapeHtml(String(g.id))} detail">${escapeHtml(g.title || 'Untitled goal')}</a>
-          ${goalBadge(g.status)}
-          ${blockedBadge}
-          <span class="vgoal__prog">${sat}/${crit.length}</span>
-          ${action}
-        </div>
-        <div class="vgoal__body"${expanded ? '' : ' hidden'}>
-          <span class="vgoal__err" data-err="${escapeHtml(String(g.id))}" hidden></span>
-          ${critBlock}
-        </div>
+  const arrowSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>';
+
+  // The goals block that sits inside an in-flight / featured card. `active` are
+  // the in-progress goals (sat>0), already sorted; we show up to 4 and let
+  // "See all" carry the rest.
+  function goalsBlock(v) {
+    const g = v.goals;
+    if (!g || g.total === 0) {
+      return `<div class="rm-goals__frame"><div class="rm-goals__h"><span class="t">Goals</span></div>
+        <p class="rm-gnone">No goals declared yet — this version is tracked by its ${fmtNum(v.criteria)} done-when criteria.</p></div>`;
+    }
+    const active = g.active.slice(0, 4);
+    const rows = active.map((x) => {
+      const ready = x.total > 0 && x.sat >= x.total;
+      return `<div class="rm-goal">
+        <span class="rm-goal__dot"></span>
+        <a class="rm-goal__t" href="${goalDeepLink(x.id)}" title="Open goal #${escapeHtml(String(x.id))}">${escapeHtml(x.title || 'Untitled goal')}</a>
+        ${ready ? '<span class="rm-goal__ready">criteria met</span>' : ''}
+        <span class="rm-goal__meter"><i style="width:${pctOf(x.sat, x.total)}%"></i></span>
+        <span class="rm-goal__n">${x.sat}/${x.total}</span>
       </div>`;
+    }).join('');
+    return `<div class="rm-goals__frame">
+      <div class="rm-goals__h"><span class="t">Goals</span><span class="n">${g.total} total</span></div>
+      ${gbar(g)}
+      <div class="rm-gdist">
+        <span><i class="rm-ach"></i><b>${g.ach}</b> achieved</span>
+        <span><i class="rm-prog"></i><b>${g.prog}</b> in progress</span>
+        <span><i class="rm-plan"></i><b>${g.plan}</b> not started</span>
+      </div>
+      ${active.length ? `<div class="rm-ginp"><div class="rm-ginp__cap">Active right now</div>${rows}</div>`
+        : '<p class="rm-gnone" style="margin-top:12px">No goal has criteria met yet — work is in the task queue.</p>'}
+      <a class="rm-gmore" href="${GOALS_URL}">See all ${g.total} goals ${arrowSvg}</a>
+    </div>`;
   }
 
-  function renderGoals(details, desc) {
-    const goals = Array.isArray(details) ? details : [];
-    const description = (desc || '').trim();
-    if (!goals.length && !description) return '';
-    const achieved = goals.filter((d) => d.goal.status === 'achieved').length;
-    const summary = goals.length ? `${achieved} of ${goals.length} goals achieved` : 'The work, in brief';
-    const descBlock = description ? `<p class="vbar__desc">${escapeHtml(description)}</p>` : '';
-    const list = goals.length ? `<div class="vgoal-list">${goals.map((d, i) => goalItemHtml(d, i + 1)).join('')}</div>` : '';
-    // Auto-open when mid-flight (some but not all goals achieved).
-    const open = goals.length && achieved > 0 && achieved < goals.length ? ' open' : '';
-    return `
-      <details class="vbar__criteria"${open}>
-        <summary>${summary}</summary>
-        <div class="vbar__details-body">${descBlock}${list}</div>
-      </details>`;
+  // ---- card renderers -------------------------------------------------------
+
+  function featCard(v) {
+    return `<article class="rm-card rm-card--feat">
+      <div class="rm-featgrid">
+        <div class="rm-featgrid__l">
+          <div class="rm-feat-top">
+            <div class="rt">
+              <div class="rm-row">${chip(v)}${phase(v)}<span class="rm-id">${escapeHtml(v.id)}</span></div>
+              <h3 class="rm-name">${escapeHtml(v.name)}</h3>
+              <p class="rm-desc rm-desc--clamp">${escapeHtml(v.desc)}</p>
+            </div>
+            ${ring(v)}
+          </div>
+          <div class="rm-cardprog">
+            <div class="rm-count"><span><b>${fmtNum(v.shipped)}</b> of <b>${fmtNum(v.total)}</b> tasks</span><span>${fmtNum(v.criteria)} criteria · since ${ym(v.start)}</span></div>
+            ${lbar(v)}
+          </div>
+        </div>
+        <div class="rm-goals">${goalsBlock(v)}</div>
+      </div>
+    </article>`;
   }
 
-  // One version's progress card. Pulled out so the same markup serves both the
-  // live, in-flight versions (rendered inline) and the shipped ones (folded away
-  // below). `done=true` adds the "shipped" badge and a softened look.
-  function versionBarHtml(v, goalsByVersion, done) {
-    const total = Number(v.total_count) || 0;
-    const cShipped = Number(v.lifecycle_shipped_count) || 0;
-    const cConfirmed = Number(v.lifecycle_confirmed_count) || 0;
-    const cCompleted = Number(v.lifecycle_completed_count) || 0;
-    const pctOf = (n) => (total > 0 ? (n / total) * 100 : 0);
-    const pct = Number(v.percent_complete) || 0;
-    const tail = (cConfirmed + cCompleted > 0)
-      ? `  ·  ${cShipped} shipped, ${cConfirmed} confirmed, ${cCompleted} completed`
-      : '';
-    const detailsBlock = renderGoals(goalsByVersion.get(v.version_id), v.done_when);
-    const badge = done
-      ? ' <span class="vbar__done-badge" title="shipped — no work remains">shipped</span>'
-      : '';
-    return `
-      <div class="vbar${done ? ' vbar--done' : ''}">
-        <div class="vbar__top">
-          <span class="vbar__name">${escapeHtml(v.version_id)} · ${escapeHtml(v.name || '')}${badge}
-          </span>
-          <span class="vbar__count">${fmtNum(v.shipped_count)} of ${fmtNum(v.total_count)} shipped</span>
+  function flightCard(v) {
+    return `<article class="rm-card">
+      <div class="rm-feat-top">
+        <div class="rt">
+          <div class="rm-row">${chip(v)}${phase(v)}<span class="rm-id">${escapeHtml(v.id)}</span></div>
+          <h3 class="rm-name">${escapeHtml(v.name)}</h3>
+          <p class="rm-desc rm-desc--clamp">${escapeHtml(v.desc)}</p>
         </div>
-        <div class="vbar__bar">
-          <div class="vbar__seg vbar__seg--shipped"   style="width:${pctOf(cShipped)}%"   title="${cShipped} shipped (live)"></div>
-          <div class="vbar__seg vbar__seg--confirmed" style="width:${pctOf(cConfirmed)}%" title="${cConfirmed} confirmed (awaiting merge)"></div>
-          <div class="vbar__seg vbar__seg--completed" style="width:${pctOf(cCompleted)}%" title="${cCompleted} completed (awaiting verification)"></div>
+        ${ring(v)}
+      </div>
+      <div class="rm-cardprog">
+        <div class="rm-count"><span><b>${fmtNum(v.shipped)}</b> of <b>${fmtNum(v.total)}</b> tasks</span><span>${fmtNum(v.criteria)} criteria · since ${ym(v.start)}</span></div>
+        ${lbar(v)}
+      </div>
+      <div style="margin-top:13px">${goalsBlock(v)}</div>
+    </article>`;
+  }
+
+  // Staged (planning) card — goals-forward. No task progress yet, so it leads
+  // with the seeded plan instead of a lifecycle bar.
+  function stagedCard(v) {
+    const g = v.goals;
+    const seeded = (g && g.all ? g.all : []).slice(0, 4);
+    const rows = seeded.map((x) => `
+      <div class="rm-goal"><span class="rm-goal__dot" style="background:var(--rm-plan)"></span>
+        <a class="rm-goal__t" href="${goalDeepLink(x.id)}">${escapeHtml(x.title || 'Untitled goal')}</a>
+        <span class="rm-goal__seed">seeded</span></div>`).join('');
+    const totalGoals = g ? g.total : 0;
+    const goalsFrame = totalGoals === 0
+      ? `<div class="rm-goals__frame"><div class="rm-goals__h"><span class="t">Goals</span></div>
+          <p class="rm-gnone">No goals seeded yet.</p></div>`
+      : `<div class="rm-goals__frame">
+          <div class="rm-goals__h"><span class="t">Goals</span><span class="n">${totalGoals} seeded</span></div>
+          ${gbar(g)}
+          <div class="rm-gdist">
+            <span><i class="rm-ach"></i><b>${g.ach}</b> achieved</span>
+            <span><i class="rm-prog"></i><b>${g.prog}</b> in progress</span>
+            <span><i class="rm-plan"></i><b>${g.plan}</b> seeded</span>
+          </div>
+          <div class="rm-ginp"><div class="rm-ginp__cap">The seeded plan</div>${rows}</div>
+          <a class="rm-gmore" href="${GOALS_URL}">See all ${totalGoals} goals ${arrowSvg}</a>
+        </div>`;
+    return `<article class="rm-card rm-card--staged" style="grid-column:1 / -1">
+      <div class="rm-featgrid">
+        <div class="rm-featgrid__l">
+          <div class="rm-row">${chip(v)}${phase(v)}<span class="rm-id">${escapeHtml(v.id)}</span></div>
+          <h3 class="rm-name">${escapeHtml(v.name)}</h3>
+          <p class="rm-desc rm-desc--clamp">${escapeHtml(v.desc)}</p>
+          <div class="rm-staged-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v4M9 6l3-3 3 3"/><rect x="4" y="9" width="16" height="12" rx="2"/></svg>
+            <div><div class="s1">Goals seeded — awaiting kickoff</div>
+            <div class="s2"><b>${totalGoals}</b> goals · <b>${fmtNum(v.criteria)}</b> criteria planned · no tasks yet</div></div>
+          </div>
         </div>
-        <div class="vbar__pct">${pct}% complete · weighted by priority${tail}</div>
-        ${detailsBlock}
+        <div class="rm-goals">${goalsFrame}</div>
       </div>
-    `;
+    </article>`;
   }
 
-  function renderVersionBars(progress, goalsByVersion) {
-    const root = $('#roadmap-versions');
-    if (!root) return;
-    const rows = Array.isArray(progress) ? progress : [];
-    const gbv = goalsByVersion instanceof Map ? goalsByVersion : new Map();
-    if (!rows.length) {
-      root.innerHTML = `<div class="profile__placeholder">No versions declared yet.</div>`;
-      return;
-    }
-    // A version with status 'shipped' is history — its bar reads 100% and it
-    // only crowds out the live work. Render the open versions inline; fold the
-    // finished ones into one collapsed reveal the reader can expand.
-    const live = rows.filter((v) => v.status !== 'shipped');
-    const done = rows.filter((v) => v.status === 'shipped');
+  function parkedCard(v) {
+    return `<article class="rm-card rm-card--parked" style="grid-column:1 / -1">
+      <div class="rm-feat-top">
+        <div class="rt">
+          <div class="rm-row">${chip(v)}${phase(v)}<span class="rm-id">${escapeHtml(v.id)}</span></div>
+          <h3 class="rm-name">${escapeHtml(v.name)}</h3>
+          <p class="rm-desc rm-desc--clamp">${escapeHtml(v.desc)}</p>
+        </div>
+        ${ring(v)}
+      </div>
+      <div class="rm-cardprog">
+        <div class="rm-count"><span><b>${fmtNum(v.shipped)}</b> of <b>${fmtNum(v.total)}</b> tasks</span><span>${fmtNum(v.criteria)} criteria · started ${ym(v.start)}</span></div>
+        ${lbar(v)}
+      </div>
+      <div class="rm-parknote">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="6" height="16" rx="1"/><rect x="14" y="4" width="6" height="16" rx="1"/></svg>
+        <div>Work is complete but the version is held — no tasks are being claimed here right now.</div>
+      </div>
+    </article>`;
+  }
 
-    const liveHtml = live.length
-      ? live.map((v) => versionBarHtml(v, gbv, false)).join('')
-      : `<div class="profile__placeholder">Every declared version has shipped — nothing is in flight right now.</div>`;
+  function sectionHtml(dotCls, title, count, note, inner) {
+    return `<section class="rm-sec">
+      <div class="rm-sec__h"><span class="rm-sec__dot rm-sec__dot--${dotCls}"></span><span class="rm-sec__t">${title}</span><span class="rm-sec__n">${count}</span><span class="rm-sec__rule"></span></div>
+      ${note ? `<p class="rm-gnone" style="margin:-4px 2px 13px">${note}</p>` : ''}
+      ${inner}
+    </section>`;
+  }
 
-    let doneHtml = '';
-    if (done.length) {
-      const n = done.length;
-      const noun = n === 1 ? 'version' : 'versions';
-      doneHtml = `
-        <details class="vbar__done-fold">
-          <summary>${n} ${noun} already shipped — collapsed to keep the focus on live work. <span class="vbar__done-cta">Show ${n === 1 ? 'it' : 'them'}.</span></summary>
-          <div class="vbars vbar__done-body">
-            ${done.map((v) => versionBarHtml(v, gbv, true)).join('')}
+  function heroHtml(flight) {
+    const A = flight.reduce((a, v) => ({
+      total: a.total + v.total, shipped: a.shipped + v.shipped,
+      sh: a.sh + v.life.sh, co: a.co + v.life.co, cm: a.cm + v.life.cm,
+    }), { total: 0, shipped: 0, sh: 0, co: 0, cm: 0 });
+    const G = flight.reduce((a, v) => ({
+      total: a.total + (v.goals ? v.goals.total : 0), ach: a.ach + (v.goals ? v.goals.ach : 0),
+      prog: a.prog + (v.goals ? v.goals.prog : 0), plan: a.plan + (v.goals ? v.goals.plan : 0),
+    }), { total: 0, ach: 0, prog: 0, plan: 0 });
+    const heroPct = Math.round(pctOf(A.shipped, A.total));
+    const heroRem = A.total - A.shipped;
+    const goalsRow = G.total > 0 ? `
+      <div class="rm-hgoals">
+        <span class="glab">Goals</span>
+        <div class="rm-gbar">
+          <span class="rm-gbar__s rm-gbar__s--ach"  style="width:${pctOf(G.ach, G.total)}%"></span>
+          <span class="rm-gbar__s rm-gbar__s--prog" style="width:${pctOf(G.prog, G.total)}%"></span>
+          <span class="rm-gbar__s rm-gbar__s--plan" style="width:${pctOf(G.plan, G.total)}%"></span>
+        </div>
+        <span class="gleg"><b>${G.ach}</b> achieved · <b>${G.prog}</b> in progress · <b>${G.plan}</b> not started <span style="color:var(--ink-faint)">of ${G.total}</span></span>
+      </div>` : '';
+    return `<div class="rm-hero">
+      <div class="rm-hero__top">
+        <div>
+          <div class="rm-big"><span class="n">${heroPct}</span><span class="u">%</span></div>
+          <div class="rm-lab">of all in-flight tasks shipped</div>
+        </div>
+        <div>
+          <div class="rm-lbar rm-hbar" role="img" aria-label="${A.sh} shipped, ${A.co} confirmed, ${A.cm} completed, ${heroRem} remaining of ${A.total}">
+            <span class="rm-lbar__s rm-lbar__s--sh" style="width:${pctOf(A.sh, A.total)}%"></span>
+            <span class="rm-lbar__s rm-lbar__s--co" style="width:${pctOf(A.co, A.total)}%"></span>
+            <span class="rm-lbar__s rm-lbar__s--cm" style="width:${pctOf(A.cm, A.total)}%"></span>
           </div>
-        </details>`;
-    }
-
-    root.innerHTML = liveHtml + doneHtml;
+          <div class="rm-stats">
+            <div class="rm-stat"><span class="v">${flight.length}</span><span class="k">versions in flight</span></div>
+            <div class="rm-stat"><span class="v sh">${fmtNum(A.sh)}</span><span class="k">shipped (live)</span></div>
+            <div class="rm-stat"><span class="v co">${fmtNum(A.co)}</span><span class="k">confirmed</span></div>
+            <div class="rm-stat"><span class="v cm">${fmtNum(A.cm)}</span><span class="k">completed</span></div>
+            <div class="rm-stat"><span class="v">${fmtNum(heroRem)}</span><span class="k">tasks remaining</span></div>
+          </div>
+        </div>
+      </div>
+      ${goalsRow}
+    </div>`;
   }
 
-  // Fetch a version's goals, each enriched with its members + criteria (so the
-  // page can show goals under the version, expand to criteria, and offer join/leave).
-  // GET /goals?version lists them; GET /goals/:id carries members + criteria. Returns
-  // [] on any failure so a hiccup never blanks the bars.
-  async function fetchGoals(versionId) {
+  // ---- data ------------------------------------------------------------------
+
+  // Enrich a version with its goal summary. `list` gives titles + status +
+  // sort_order (1 request); `/goals/:id` gives per-goal criteria (needed to split
+  // in-progress from not-started + to fill the "active now" list).
+  async function goalSummary(versionId) {
     try {
       const list = await getJSON(`${API}/goals?version=${encodeURIComponent(versionId)}`);
       const goals = (list.goals || []).filter((g) => g.status !== 'archived');
-      const details = await Promise.all(goals.map((g) =>
-        getJSON(`${API}/goals/${encodeURIComponent(g.id)}`).catch(() => null)));
-      return details.filter(Boolean);
+      if (!goals.length) return { total: 0, ach: 0, prog: 0, plan: 0, active: [], all: [] };
+      const details = await Promise.all(goals.map((g) => getJSON(`${API}/goals/${encodeURIComponent(g.id)}`).catch(() => null)));
+      const enriched = goals.map((g, i) => {
+        const d = details[i];
+        const crit = d && Array.isArray(d.criteria) ? d.criteria : [];
+        const sat = crit.filter((c) => c.satisfied).length;
+        return { id: g.id, title: g.title, status: g.status, sort: Number(g.sort_order) || 0, sat, total: crit.length };
+      }).sort((a, b) => a.sort - b.sort);
+      const ach = enriched.filter((g) => g.status === 'achieved').length;
+      const active = enriched.filter((g) => g.status !== 'achieved' && g.sat > 0);
+      const plan = enriched.filter((g) => g.status !== 'achieved' && g.sat === 0).length;
+      return { total: enriched.length, ach, prog: active.length, plan, active, all: enriched };
     } catch (_) {
-      return [];
+      return { total: 0, ach: 0, prog: 0, plan: 0, active: [], all: [] };
     }
   }
 
-  // Load (or reload) the version progress bars + their goals. Extracted so a
-  // join/leave can re-render the section. Public progress read; goals per version.
-  async function loadVersionBars() {
-    try {
-      const prog = await getJSON(`${API}/public/progress`);
-      const versions = prog.progress || [];
-      const goalsByVersion = new Map();
-      await Promise.all(versions.map(async (v) => {
-        goalsByVersion.set(v.version_id, await fetchGoals(v.version_id));
-      }));
-      renderVersionBars(versions, goalsByVersion);
-    } catch (err) {
-      const root = $('#roadmap-versions');
-      if (root) root.innerHTML = `<div class="profile__placeholder">Version progress could not be loaded right now.</div>`;
-    }
+  // Merge /public/progress (counts, %, lifecycle) with /public/versions (track,
+  // dates) into one version model the renderers consume.
+  function mergeVersions(progress, versions) {
+    const meta = new Map();
+    (versions || []).forEach((v) => meta.set(v.id, v));
+    return (progress || []).map((p) => {
+      const m = meta.get(p.version_id) || {};
+      return {
+        id: p.version_id,
+        name: p.name || m.name || p.version_id,
+        track: m.track || 'internal',
+        status: p.status || m.status || 'building',
+        desc: (p.done_when || m.done_when || '').trim(),
+        shipped: Number(p.shipped_count) || 0,
+        total: Number(p.total_count) || 0,
+        pct: Number(p.percent_complete) || 0,
+        criteria: Number(p.criteria_count) || 0,
+        life: {
+          sh: Number(p.lifecycle_shipped_count) || 0,
+          co: Number(p.lifecycle_confirmed_count) || 0,
+          cm: Number(p.lifecycle_completed_count) || 0,
+        },
+        start: m.started_at || null,
+        ship: m.shipped_at || null,
+      };
+    });
   }
 
-  // Join or leave a goal, then re-render the version bars so the goal moves
-  // between "joined" (Leave) and joinable (Join). Errors surface inline.
-  async function doGoalMembership(goalId, act, btn) {
-    if (btn.disabled) return;
-    btn.disabled = true;
-    const goalEl = btn.closest('.vgoal');
-    const errEl = goalEl ? goalEl.querySelector('.vgoal__err') : null;
-    if (errEl) { errEl.hidden = true; errEl.textContent = ''; }
-    try {
-      await postJSON(`${API}/goals/${encodeURIComponent(goalId)}/${act}`);
-      toast(act === 'join' ? 'Joined the goal.' : 'Left the goal.');
-      // Re-render just this goal's row in place — join/leave changes only this goal's
-      // membership, so repainting (and collapsing) the whole version section would be
-      // both wasteful and jarring. Re-fetch the one goal for its fresh member list; the
-      // delegated #roadmap-versions handler catches clicks on the replacement button.
-      const detail = await getJSON(`${API}/goals/${encodeURIComponent(goalId)}`).catch(() => null);
-      if (detail && goalEl) {
-        // Join/leave never changes order — carry the row's current priority
-        // number over rather than re-deriving it (a single row has no view of
-        // its siblings to recompute a rank from).
-        const priority = goalEl.querySelector('.vgoal__priority')?.textContent || '';
-        goalEl.outerHTML = goalItemHtml(detail, priority);
-      } else if (goalEl) {
-        // Couldn't refetch — flip the button optimistically so the UI isn't stuck.
-        btn.outerHTML = act === 'join'
-          ? `<button type="button" class="vgoal-action vgoal-leave" data-act="leave" data-id="${escapeHtml(String(goalId))}">Leave</button>`
-          : `<button type="button" class="vgoal-action vgoal-join" data-act="join" data-id="${escapeHtml(String(goalId))}">Join</button>`;
-      }
-    } catch (err) {
-      const code = err && err.data ? err.data.error : null;
-      const msg = code === 'archon_approval_required' ? 'This goal needs an Archon\'s approval to join.'
-        : code === 'goal_not_open' ? 'This goal is no longer open to join.'
-        : code === 'not_a_member' ? 'You are not a member of this goal.'
-        : (err && err.data && err.data.message) || `Could not ${act} the goal.`;
-      if (errEl) { errEl.textContent = msg; errEl.hidden = false; }
-      btn.disabled = false;
-    }
-  }
+  async function render() {
+    const root = $('#rm-root');
+    const [progress, versions] = await Promise.all([
+      getJSON(`${API}/public/progress`).then((d) => d.progress || []),
+      getJSON(`${API}/public/versions`).then((d) => d.versions || []).catch(() => []),
+    ]);
+    const all = mergeVersions(progress, versions);
 
-  // ---- drag-to-reorder (task 1760, Archon-only) ------------------------------
-  // Native HTML5 drag-and-drop, scoped to one version's .vgoal-list (a goal
-  // never crosses versions here — dragging never removes it from its list, it
-  // only reorders siblings). On drop, persist the WHOLE list's new order via
-  // POST /goals/reorder; the server is the real gate (route-rank archon) — this
-  // is only reached by viewer.isArchon builders, matching the affordance.
-  let dragEl = null;
+    // Goal summaries only for versions we actually show goals on (everything but
+    // shipped) — a real perf win over fetching goals for the whole history.
+    const needGoals = all.filter((v) => v.status !== 'shipped');
+    await Promise.all(needGoals.map(async (v) => { v.goals = await goalSummary(v.id); }));
 
-  function wireDragReorder() {
-    const root = $('#roadmap-versions');
-    if (!root) return;
-    root.addEventListener('dragstart', (e) => {
-      const el = e.target.closest('.vgoal');
-      if (!el || !viewer.isArchon) return;
-      dragEl = el;
-      el.classList.add('vgoal--dragging');
-      e.dataTransfer.effectAllowed = 'move';
-    });
-    root.addEventListener('dragover', (e) => {
-      if (!dragEl) return;
-      const over = e.target.closest('.vgoal');
-      const list = dragEl.closest('.vgoal-list');
-      if (!over || !list || over === dragEl || !list.contains(over)) return;
-      e.preventDefault();
-      const rect = over.getBoundingClientRect();
-      const after = (e.clientY - rect.top) > rect.height / 2;
-      list.insertBefore(dragEl, after ? over.nextSibling : over);
-    });
-    root.addEventListener('drop', (e) => {
-      if (dragEl) e.preventDefault();
-    });
-    root.addEventListener('dragend', async () => {
-      if (!dragEl) return;
-      const el = dragEl;
-      const list = el.closest('.vgoal-list');
-      el.classList.remove('vgoal--dragging');
-      dragEl = null;
-      if (!list) return;
-      const versionId = el.dataset.versionId;
-      const rows = [...list.querySelectorAll('.vgoal')];
-      rows.forEach((row, i) => {
-        const num = row.querySelector('.vgoal__priority');
-        if (num) num.textContent = String(i + 1);
-      });
-      const orderedIds = rows.map((row) => Number(row.dataset.goalId));
-      try {
-        await postJSON(`${API}/goals/reorder`, { version_id: versionId, ordered_ids: orderedIds });
-        toast('Priority order saved.');
-      } catch (err) {
-        toast((err && err.data && err.data.message) || 'Could not save the new order — reloading.');
-        await loadVersionBars();
-      }
-    });
-  }
+    const flight = all.filter((v) => v.status === 'building').sort((a, b) => b.total - a.total);
+    const staged = all.filter((v) => v.status === 'planning').sort((a, b) => b.total - a.total);
+    const parked = all.filter((v) => v.status === 'frozen').sort((a, b) => b.pct - a.pct);
+    const shipped = all.filter((v) => v.status === 'shipped')
+      .sort((a, b) => (new Date(b.ship || 0)) - (new Date(a.ship || 0)));
 
-  // ---- wiring + bootstrap ---------------------------------------------------
+    let html = '';
 
-  function wireEvents() {
-    // A criteria toggle (custom disclosure) and inline join/leave. Plain
-    // buttons — no <summary> nesting.
-    $('#roadmap-versions')?.addEventListener('click', (e) => {
-      const toggle = e.target.closest('.vgoal__toggle');
-      if (toggle) {
-        const goalEl = toggle.closest('.vgoal');
-        const body = goalEl ? goalEl.querySelector('.vgoal__body') : null;
-        const nowOpen = toggle.getAttribute('aria-expanded') !== 'true';
-        toggle.setAttribute('aria-expanded', String(nowOpen));
-        toggle.querySelector('.vgoal__caret')?.classList.toggle('vgoal__caret--open', nowOpen);
-        if (body) body.hidden = !nowOpen;
-        return;
-      }
-      const act = e.target.closest('.vgoal-action');
-      if (act) doGoalMembership(act.dataset.id, act.dataset.act, act);
-    });
-    wireDragReorder();
+    if (flight.length) {
+      html += heroHtml(flight);
+      const feat = flight[0];                 // dominant in-flight version (most tasks)
+      const rest = flight.slice(1);
+      const inner = featCard(feat) + (rest.length ? `<div class="rm-grid" style="margin-top:16px">${rest.map(flightCard).join('')}</div>` : '');
+      html += sectionHtml('flight', 'In flight', flight.length, '', inner);
+    } else {
+      html += `<div class="rm-hero"><div class="rm-lab" style="max-width:none">No version is in flight right now.</div></div>`;
+    }
+
+    if (staged.length) {
+      html += sectionHtml('staged', 'Staged', staged.length, 'Seeded with goals, not yet started.', `<div class="rm-grid">${staged.map(stagedCard).join('')}</div>`);
+    }
+    if (parked.length) {
+      html += sectionHtml('parked', 'Parked', parked.length, '', `<div class="rm-grid">${parked.map(parkedCard).join('')}</div>`);
+    }
+    if (shipped.length) {
+      const pills = shipped.map((v) => `<a class="rm-shippill" href="${GOALS_URL}" title="${escapeHtml(v.name)}"><span class="ok">✓</span><span class="nm">${escapeHtml(v.id)}</span><span class="mt">${fmtNum(v.shipped)} tasks · ${ym(v.ship)}</span></a>`).join('');
+      html += sectionHtml('shipped', 'Shipped', shipped.length, '', `<div class="rm-shipstrip">${pills}</div>`);
+    }
+
+    if (!all.length) html = `<div class="profile__placeholder">No versions declared yet.</div>`;
+    root.innerHTML = html;
   }
 
   async function boot() {
-    // /me settles the viewer id + rank (so a joined goal shows "Leave" not
-    // "Join", and only an Archon sees the drag handle). Best-effort: a stale/
-    // expired session still renders the public progress.
-    try {
-      const me = await getJSON(`${API}/me`).catch(() => null);
-      viewer.id = me?.builder?.id ?? null;
-      viewer.isArchon = (me?.builder?.rank || '').toLowerCase() === 'archon';
-    } catch (_) { /* cosmetic only */ }
-
     const sub = $('#roadmap-sub');
-    if (sub) sub.textContent = 'Every declared version, its progress, and the goals building toward it.';
-
-    await loadVersionBars();
+    if (sub) sub.textContent = 'How the whole build is doing — the program at a glance, then each version. Shipped work stays out of the way.';
+    try {
+      await render();
+    } catch (err) {
+      if (err && err.message === 'redirecting to auth') return;
+      console.error('[roadmap] load failed:', err);
+      const root = $('#rm-root');
+      if (root) root.innerHTML = `<div class="profile__placeholder">The roadmap could not be loaded right now. Reload to try again.</div>`;
+      toast('The roadmap failed to load. Reload to try again.');
+    }
   }
 
-  wireEvents();
-  boot().catch((err) => {
-    if (err && err.message === 'redirecting to auth') return;
-    console.error('[roadmap] load failed:', err);
-    toast('The roadmap failed to load. Reload to try again.');
-  });
+  boot();
 })();