@bongos/core 1.19.281 → 1.19.282

package/modules/hall-ui/public/goals-page.js

@@ -168,6 +168,8 @@
     active: { label: 'recently active', cmp: (a, b) => goalActivityMs(b) - goalActivityMs(a), stamp: (g) => ({ label: 'last work', ms: goalActivityMs(g) }) },
   };
   const GOAL_SORT_PREF = 'otb.goals.sort';
+  // task 1003136 — the list|cards view choice, persisted like the sort above.
+  const GOAL_VIEW_PREF = 'otb.goals.view';
   const currentGoalSort = () => GOAL_SORTS[$('#f-goal-order')?.value] || GOAL_SORTS.priority;
 
   // Stable: filteredGoals already returns the server's priority order, and
@@ -262,11 +264,10 @@
     }
   }
 
-  // task 1760 — priority is a WITHIN-version ordering, so the drag affordance
-  // only makes sense once the grid is narrowed to exactly one version (the
-  // "any" filter mixes versions and dragging across them would be meaningless).
-  // Priority is always visible in that state; only an Archon gets the handle —
-  // the server-side rank gate on POST /goals/reorder is the real enforcement.
+  // Archon check for the detail view's manage/visibility affordances (the
+  // server-side rank gates are the real enforcement). The task-1760 drag-reorder
+  // affordance this once also served is retired — see the note where
+  // wireDragReorder used to live (task 1003136).
   const isArchon = () => (state.me?.builder?.rank || '').toLowerCase() === 'archon';
 
   // task 1002164 — confirming a criterion is Metic+ (POST /done-when/:id/satisfy,
@@ -321,13 +322,16 @@
     return ` · ${escapeHtml(label)} ${escapeHtml(ms ? fmtDate(new Date(ms).toISOString()) : '—')}`;
   }
 
-  function goalRowHtml(g) {
+  // The facts a goal row/card renders, computed ONCE so the two views (task
+  // 1003136) can't drift: ring, meta line, roll line, and the single
+  // next-action ladder (achieved → criteria-met → claim-next → drill → quiet).
+  function goalRenderFacts(g, ringSize) {
     const d = state.details.get(String(g.id));
     const crit = d ? (d.criteria || []) : [];
     const sat = crit.filter((c) => c.satisfied).length;
     const r = rollupOf(g.id);
     const achieved = g.status === 'achieved';
-    const ringHtml = crit.length ? ring(sat, crit.length, achieved, 44)
+    const ringHtml = crit.length ? ring(sat, crit.length, achieved, ringSize)
       : `<span class="gr-crit-none" aria-hidden="true">—</span>`;
     const goalHref = `#/goal/${escapeHtml(String(g.id))}`;
     let right;
@@ -343,6 +347,12 @@
     } else {
       right = `<span class="gr-quiet">No tasks yet</span>`;
     }
+    const metaHtml = `#${escapeHtml(String(g.id))} · ${escapeHtml(g.version_id || '')}${(achieved || g.status === 'open') ? '' : ' · ' + escapeHtml(g.status)}${goalStampHtml(g)}`;
+    return { r, achieved, ringHtml, goalHref, right, metaHtml };
+  }
+
+  function goalRowHtml(g) {
+    const { r, achieved, ringHtml, goalHref, right, metaHtml } = goalRenderFacts(g, 44);
     // NOTE: a rollup row nests real links (title → goal, Claim → task overlay,
     // drill → goal), so the row itself is a <div>, not an <a> — nested anchors
     // are invalid. Only the explicit links navigate.
@@ -350,13 +360,31 @@
       <div class="gr-ringcol">${ringHtml}</div>
       <div class="gr-main">
         <a class="gr-title" href="${goalHref}">${escapeHtml(g.title || 'Untitled goal')}</a>
-        <div class="gr-meta">#${escapeHtml(String(g.id))} · ${escapeHtml(g.version_id || '')}${(achieved || g.status === 'open') ? '' : ' · ' + escapeHtml(g.status)}${goalStampHtml(g)}</div>
+        <div class="gr-meta">${metaHtml}</div>
         ${achieved ? '' : goalRollLine(r)}
       </div>
       <div class="gr-right">${right}</div>
     </div>`;
   }
 
+  // task 1003136 — the same goal as a CARD: identical facts as the row via
+  // goalRenderFacts, so nothing is lost switching views. Reuses the surviving
+  // .goal-card* CSS (goals.css — task 1002439 neutralised it, never deleted it).
+  // Deliberately emits NO draggable attribute: drag-to-reorder is retired, see
+  // the note where wireDragReorder used to live.
+  function goalCardHtml(g) {
+    const { r, achieved, ringHtml, goalHref, right, metaHtml } = goalRenderFacts(g, 36);
+    return `<div class="goal-card" data-goal-id="${escapeHtml(String(g.id))}">
+      <div class="goal-card__head">
+        <div class="gr-ringcol">${ringHtml}</div>
+        <a class="goal-card__title gr-title" href="${goalHref}">${escapeHtml(g.title || 'Untitled goal')}</a>
+      </div>
+      <div class="goal-card__meta">${metaHtml}</div>
+      ${achieved ? '' : goalRollLine(r)}
+      <div class="goal-card__foot">${right}</div>
+    </div>`;
+  }
+
   // task 1002439 — the Goals page, reorganised around momentum: a task-readiness
   // summary, then goals grouped Active (has ready/in-progress work) · Blocked
   // (only waiting-on-upstream tasks) · Achieved. "Blocked" here is a DERIVED
@@ -399,7 +427,15 @@
     </div>`;
 
     const sec = (label, n) => `<div class="gr-sec"><b>${label}</b><span class="gr-sec__n">${n}</span></div>`;
-    const listOf = (arr) => `<div class="gr-list">${arr.map(goalRowHtml).join('')}</div>`;
+    // task 1003136 — the list|cards toggle swaps how the open groups render;
+    // grouping, filters, and sort run above the fork so both views share them.
+    // Achieved/archived pills stay pills (already the compact form). The inner
+    // div is class-only .goal-grid on purpose: task 1002439's block override
+    // targets #goal-grid.goal-grid, so the original card-grid CSS applies here.
+    const cardsView = ($('#f-goal-view')?.value || 'list') === 'cards';
+    const listOf = cardsView
+      ? (arr) => `<div class="goal-grid">${arr.map(goalCardHtml).join('')}</div>`
+      : (arr) => `<div class="gr-list">${arr.map(goalRowHtml).join('')}</div>`;
     // task 1002965 — an achieved/archived goal is a compact pill, so its sort
     // date rides as its own muted span (the row's `gr-meta` equivalent). The
     // pills row already wraps, so the extra text can't widen the page.
@@ -418,63 +454,14 @@
       + (archived.length ? sec('Archived', archived.length) + `<div class="gr-pills gr-pills--muted">${archived.map(pill).join('')}</div>` : '');
   }
 
-  // ---- drag-to-reorder (task 1760, Archon-only, one version at a time) ------
-  let dragEl = null;
-
-  function wireDragReorder() {
-    const grid = $('#goal-grid');
-    if (!grid) return;
-    grid.addEventListener('dragstart', (e) => {
-      const el = e.target.closest('.goal-card');
-      if (!el || !el.hasAttribute('draggable')) return;
-      dragEl = el;
-      el.classList.add('goal-card--dragging');
-      e.dataTransfer.effectAllowed = 'move';
-    });
-    grid.addEventListener('dragover', (e) => {
-      if (!dragEl) return;
-      const over = e.target.closest('.goal-card');
-      if (!over || over === dragEl || !grid.contains(over)) return;
-      e.preventDefault();
-      const rect = over.getBoundingClientRect();
-      const after = (e.clientX - rect.left) > rect.width / 2;
-      grid.insertBefore(dragEl, after ? over.nextSibling : over);
-    });
-    grid.addEventListener('drop', (e) => { if (dragEl) e.preventDefault(); });
-    grid.addEventListener('dragend', async () => {
-      if (!dragEl) return;
-      const el = dragEl;
-      el.classList.remove('goal-card--dragging');
-      dragEl = null;
-      const ver = $('#f-goal-version')?.value || '';
-      if (!ver) return;
-      // task 1932 — with pagination the grid shows only the current PAGE, so the
-      // reorder must submit the FULL version order: the goals before this page +
-      // the page's cards in their new DOM order + the goals after it. Without
-      // this, POSTing only the visible page's ids would corrupt the priorities
-      // of the goals on other pages. Priority numbers reflect the global
-      // position (start + i + 1).
-      const filtered = filteredGoals();
-      const start = (pagers.list.page - 1) * pagers.list.perPage;
-      const cards = [...grid.querySelectorAll('.goal-card')];
-      cards.forEach((card, i) => {
-        const num = card.querySelector('.goal-card__priority');
-        if (num) num.textContent = String(start + i + 1);
-      });
-      const pageIds = cards.map((card) => Number(card.dataset.goalId));
-      const beforeIds = filtered.slice(0, start).map((g) => Number(g.id));
-      const afterIds = filtered.slice(start + pageIds.length).map((g) => Number(g.id));
-      const orderedIds = [...beforeIds, ...pageIds, ...afterIds];
-      try {
-        await postJSON(`${API}/goals/reorder`, { version_id: ver, ordered_ids: orderedIds });
-        toast('Priority order saved.');
-      } catch (err) {
-        toast((err && err.data && err.data.message) || 'Could not save the new order — reloading.');
-        state.goals = (await getJSON(`${API}/goals`).catch(() => ({ goals: state.goals }))).goals || state.goals;
-        renderList();
-      }
-    });
-  }
+  // ---- drag-to-reorder: RETIRED (task 1003136; was task 1760) ---------------
+  // wireDragReorder() lived here, dead since task 1002439's grouped rollup (its
+  // .goal-card selector matched nothing). The card view revives .goal-card
+  // markup, so the decision is now DELIBERATE: the listener is DELETED — both
+  // views render grouped, sorted, filtered sets, so DOM order no longer
+  // expresses the version priority the old dragend POSTed to /goals/reorder;
+  // re-enabling it would submit a corrupted order. Cards emit no draggable
+  // attribute. POST /goals/reorder itself is untouched (Archon, pinned).
 
   /* ---------------- detail view ---------------- */
 
@@ -1822,7 +1809,12 @@
   // reads it, so keeping the pref off the URL leaves deep links shareable and
   // unchanged. Private-mode writes throw — swallowed, the pref is a nicety.
   const onListFilterChange = () => {
-    try { window.localStorage.setItem(GOAL_SORT_PREF, $('#f-goal-order')?.value || 'priority'); } catch (_) { /* private mode */ }
+    try {
+      window.localStorage.setItem(GOAL_SORT_PREF, $('#f-goal-order')?.value || 'priority');
+      // task 1003136 — the list|cards view choice survives reload, same
+      // precedent (localStorage, never the URL).
+      window.localStorage.setItem(GOAL_VIEW_PREF, $('#f-goal-view')?.value || 'list');
+    } catch (_) { /* private mode */ }
     pagers.list.page = 1;
     renderList();
   };
@@ -1833,7 +1825,11 @@
   // task 1002965 adds Sort (f-goal-order — NOT f-goal-sort, which is already
   // taken by the goal-detail To-do bar further down this file).
   let savedGoalSort = null;
-  try { savedGoalSort = window.localStorage.getItem(GOAL_SORT_PREF); } catch (_) { /* private mode */ }
+  let savedGoalView = null;
+  try {
+    savedGoalSort = window.localStorage.getItem(GOAL_SORT_PREF);
+    savedGoalView = window.localStorage.getItem(GOAL_VIEW_PREF);
+  } catch (_) { /* private mode */ }
   // task 1003135 — Search declared on the kit spec (live 'input' listener comes
   // free, hall-kit.js:273; no debounce needed, the match is pure client-side over
   // the already-loaded state.goals). Id is f-goals-search — f-goal-search is
@@ -1853,6 +1849,12 @@
         label: 'Sort',
         value: GOAL_SORTS[savedGoalSort] ? savedGoalSort : undefined,
         options: Object.entries(GOAL_SORTS).map(([value, { label }]) => ({ value, label })) },
+      // task 1003136 — list|cards toggle; renderList forks its group renderer
+      // on this. Persisted via GOAL_VIEW_PREF, never the URL.
+      { id: 'f-goal-view',
+        label: 'View',
+        value: savedGoalView === 'cards' ? 'cards' : undefined,
+        options: [{ value: 'list', label: 'list' }, { value: 'cards', label: 'cards' }] },
     ],
     onChange: onListFilterChange,
   });
@@ -1981,7 +1983,6 @@
     if (denyBtn) { respondToJoinRequest(state.current, denyBtn.dataset.denyReq, 'deny', denyBtn); return; }
   });
   window.addEventListener('hashchange', route);
-  wireDragReorder();
 
   boot();
 })();

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

@@ -6,10 +6,12 @@
    are in style.css's hall-kit section. Everything derives from the shared
    design tokens so instance packs reskin this page along with the rest. */
 
-/* ---- goal-card grid (list view) ----
+/* ---- goal-card grid (the CARDS view) ----
    task 2171 density pass: minmax 300→230 (four across at desktop width),
-   tighter gaps/padding/type — the grid holds ~26 goals, so card height is
-   what sets the page height. */
+   tighter gaps/padding/type. Retired by task 1002439's grouped rollup, REVIVED
+   by task 1003136 as the list|cards toggle's card view: renderList nests
+   id-less .goal-grid wrappers per group, which this rule styles — the
+   #goal-grid override further down only flattens the OUTER container. */
 .goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
 .goal-card {
   display: flex; flex-direction: column; gap: 7px;
@@ -19,16 +21,9 @@
 }
 a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); background: var(--surface-2); }
 .goal-card__head { display: flex; align-items: flex-start; gap: 9px; }
-/* task 1760 — priority (visible once narrowed to one version) + Archon
-   drag-to-reorder handle (server enforces the write; this is the affordance). */
-.goal-card__handle { flex: none; cursor: grab; color: var(--ink-faint); font-size: 14px; line-height: 1.2; touch-action: none; }
-.goal-card__handle:active { cursor: grabbing; }
-.goal-card__priority {
-  flex: none; min-width: 1.4em; text-align: center;
-  font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
-  font-variant-numeric: tabular-nums;
-}
-.goal-card--dragging { opacity: 0.45; }
+/* task 1003136: the task-1760 drag handle/priority/dragging rules that lived
+   here are deleted with wireDragReorder (see goals-page.js) — the revived
+   cards deliberately carry no drag affordance. */
 /* task 1761: a goal blocked by an unachieved prerequisite is dimmed + hue-shifted. */
 .goal-card--blocked { opacity: 0.62; border-style: dashed; }
 .goal-card--blocked:hover { opacity: 0.85; }
@@ -209,8 +204,10 @@ a.goal-card:hover { text-decoration: none; border-color: var(--border-strong); b
    tasks up into ready/in-progress/blocked; the task→task dependency
    graph itself lives on the Tasks page. Uses the shared style.css tokens.
    ============================================================ */
-/* The list container used to be an auto-fill CARD grid; the rollup renders
-   grouped full-width blocks into it, so flip it to normal block flow. */
+/* The OUTER container renders grouped full-width blocks (summary + section
+   heads), so flip it to normal block flow. Id-selected on purpose: the cards
+   view (task 1003136) nests id-less .goal-grid wrappers per group, which keep
+   the real card grid above. */
 #goal-grid.goal-grid { display: block; gap: 0; }
 .gr-summary { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 20px; }
 .gr-sm { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-soft); }

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

@@ -199,6 +199,6 @@
 <script src="/builders/task-detail.js?v=2026-07-03-taskdetail"></script>
 <script src="/builders/brand-apply.js?v=2026-06-27-r75"></script>
 <script src="/builders/goals-lib.js?v=2026-08-21-goalslib1"></script>
-<script src="/builders/goals-page.js?v=2026-08-21-goals6"></script>
+<script src="/builders/goals-page.js?v=2026-08-21-goals7"></script>
 </body>
 </html>

package/package-lock.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.19.281",
+  "version": "1.19.282",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/src/module-api.js

@@ -989,8 +989,10 @@ const { validateOrRespond, LIMITS, parseId, asyncHandler, corsPublicGet, parsePa
 //         landed since 1.19.279 with no explicit bump. run 32523185119. (task 1002620)
 //   1.19.281 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
 //         landed since 1.19.280 with no explicit bump. run 32525071763. (task 1002620)
+//   1.19.282 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+//         landed since 1.19.281 with no explicit bump. run 32526392955. (task 1002620)
 // ---------------------------------------------------------------------------
-const CORE_VERSION = '1.19.281'; // CI auto-patch carrier (ADR 0161); see changelog above
+const CORE_VERSION = '1.19.282'; // CI auto-patch carrier (ADR 0161); see changelog above
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('dev-box'); log.info('mounted');

package/tests/goals_card_view.mjs

@@ -0,0 +1,61 @@
+// tests/goals_card_view.mjs — the Goals page list|cards toggle (task 1003136).
+//
+// Source-contract pins over goals-page.js: the DONE-WHEN properties that a DOM
+// harness can't cheaply hold are exactly the ones that rot silently — the two
+// views sharing one fact source, the drag landmine staying DELIBERATELY dead,
+// and the view choice persisting off-URL. The interactive render itself is
+// exercised by tests/goal_criterion_confirm_ui.mjs, which runs the real page.
+//
+// Run:  node tests/goals_card_view.mjs
+
+import { strict as assert } from 'node:assert';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { makeRunner } from './helpers.mjs';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/goals-page.js'), 'utf8');
+const CSS = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/goals.css'), 'utf8');
+const { test, summary } = makeRunner();
+
+await test('both views render from ONE fact source (goalRenderFacts) so they cannot drift', () => {
+  assert.match(SRC, /function goalRenderFacts\(/, 'the shared fact fn must exist');
+  const rowBody = SRC.slice(SRC.indexOf('function goalRowHtml'), SRC.indexOf('function goalCardHtml'));
+  assert.match(rowBody, /goalRenderFacts\(g/, 'the row must consume the shared facts');
+  const cardBody = SRC.slice(SRC.indexOf('function goalCardHtml'));
+  assert.match(cardBody.slice(0, 1200), /goalRenderFacts\(g/, 'the card must consume the shared facts');
+});
+
+await test('renderList forks on the f-goal-view toggle AFTER grouping/filter/sort (both views share them)', () => {
+  const body = SRC.slice(SRC.indexOf('function renderList'), SRC.indexOf('drag-to-reorder: RETIRED'));
+  assert.match(body, /#f-goal-view/, 'the fork reads the toggle');
+  const sortIdx = body.indexOf('sortGoals(');
+  const forkIdx = body.indexOf('#f-goal-view');
+  assert.ok(sortIdx >= 0 && forkIdx > sortIdx, 'grouping/sort must run before the view fork');
+  assert.match(body, /goalCardHtml/, 'cards view renders goalCardHtml');
+  assert.match(body, /goalRowHtml/, 'list view still renders goalRowHtml');
+  assert.match(body, /<div class="goal-grid">/, 'cards nest an id-less .goal-grid so the block override does not flatten them');
+});
+
+await test('the view choice persists via localStorage (otb.goals.view), never the URL', () => {
+  assert.match(SRC, /GOAL_VIEW_PREF = 'otb\.goals\.view'/);
+  assert.match(SRC, /setItem\(GOAL_VIEW_PREF/, 'onChange writes the pref');
+  assert.match(SRC, /getItem\(GOAL_VIEW_PREF\)/, 'boot reads the pref back');
+});
+
+await test('drag-to-reorder is deliberately retired: no listener, no draggable cards, decision stated', () => {
+  assert.ok(!/function wireDragReorder/.test(SRC), 'wireDragReorder must stay deleted');
+  assert.ok(!/addEventListener\('drag/.test(SRC), 'no drag listeners anywhere on the page');
+  const cardBody = SRC.slice(SRC.indexOf('function goalCardHtml'), SRC.indexOf('function renderList'));
+  assert.ok(!/draggable/.test(cardBody), 'goalCardHtml must not emit a draggable attribute');
+  assert.match(SRC, /RETIRED \(task 1003136/, 'the retirement decision is stated where the code lived');
+});
+
+await test('goals.css: the block override stays id-scoped so inner .goal-grid card grids survive', () => {
+  assert.match(CSS, /#goal-grid\.goal-grid \{ display: block/, 'the outer flatten must stay id-selected');
+  assert.match(CSS, /\.goal-grid \{ display: grid; grid-template-columns: repeat\(auto-fill/, 'the card grid rule must survive');
+  assert.ok(!/goal-card__handle|goal-card--dragging/.test(CSS), 'the drag affordance CSS is gone with the listener');
+});
+
+summary();