@bongos/core 1.19.455 → 1.19.456

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

@@ -13,8 +13,8 @@
   margin: 6px 0 22px;
 }
 .gate-stat {
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--surface); padding: 12px 14px;
+  border: var(--line) solid var(--rule-soft); border-radius: var(--radius-sm);
+  background: var(--bg-card); padding: 12px 14px;
 }
 .gate-stat__label {
   font-size: 11.5px; font-weight: 600;
@@ -28,8 +28,8 @@
 .gate-list { display: flex; flex-direction: column; gap: 16px; }
 
 .gate-crate {
-  border: 1px solid var(--border); border-radius: var(--radius);
-  background: var(--surface); overflow: hidden;
+  border: var(--line) solid var(--rule-soft); border-radius: var(--radius);
+  background: var(--bg-card); overflow: hidden;
 }
 /* Verdict band along the top, painted by the held-verdict. */
 .gate-crate__seal { height: 4px; background-color: var(--danger); }
@@ -40,45 +40,40 @@
 .gate-crate__title a { color: inherit; text-decoration: none; }
 .gate-crate__title a:hover { text-decoration: underline; }
 .gate-crate__meta { color: var(--ink-soft); font-size: 12.5px; }
-.gate-crate__meta a { color: var(--accent-text); }
+.gate-crate__meta a { color: var(--accent-ink); }
 
-.gate-pill {
-  font-size: 11px; font-weight: 600;
-  letter-spacing: 0.04em; text-transform: uppercase;
-  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
-  border: 1px solid var(--border); color: var(--ink-soft); background: var(--surface-2);
-}
-.gate-pill--escalate { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
-.gate-pill--needs_trust { background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
-.gate-pill--trusted { background: var(--info-weak); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
+/* Base: the shell's .fact-pill (task 1003307). States are hairlines, not fills. */
+.gate-pill--escalate { color: var(--danger); }
+.gate-pill--needs_trust { color: var(--warn); }
+.gate-pill--trusted { color: var(--info); }
 
 .gate-reasons { list-style: none; padding: 0; margin: 0; }
 .gate-reasons li {
-  padding: 6px 0; border-bottom: 1px solid var(--border);
+  padding: 6px 0; border-bottom: var(--line) solid var(--rule-soft);
   font-size: 13px; color: var(--ink);
 }
 .gate-reasons li:last-child { border-bottom: 0; }
 .gate-reasons code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
-  color: var(--accent-text); background: var(--surface-2);
+  font-family: var(--font-mono); font-size: 12px;
+  color: var(--accent-ink); background: var(--glass);
   padding: 1px 5px; border-radius: 4px;
 }
 .gate-reasons .floor { color: var(--danger); font-weight: 600; }
 
 .gate-files { font-size: 12.5px; color: var(--ink-soft); }
-.gate-files code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.gate-files code { font-family: var(--font-mono); }
 
 .gate-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
 .gate-btn {
   font: inherit; font-size: 13px; font-weight: 600;
-  padding: 7px 16px; border: 1px solid var(--accent);
-  background: var(--accent); color: #fff;
+  padding: 7px 16px; border: var(--line) solid var(--accent);
+  background: var(--accent); color: var(--accent-on);
   border-radius: var(--radius-sm); cursor: pointer;
 }
-.gate-btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
+.gate-btn:hover:not(:disabled) { background: var(--accent-lift); border-color: var(--accent-lift); }
 .gate-btn:disabled { opacity: 0.45; cursor: default; }
-.gate-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
-.gate-btn--ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
+.gate-btn--ghost { background: var(--bg-card); color: var(--ink); border-color: var(--rule); }
+.gate-btn--ghost:hover:not(:disabled) { background: var(--glass); border-color: var(--rule); }
 .gate-approved-note { color: var(--ok); font-size: 13px; }
 
 .gate-empty, .gate-sealed { color: var(--ink-soft); padding: 16px 0; }
@@ -87,10 +82,10 @@
 /* Lightweight confirm modal (mirrors harbor). */
 .gate-modal-bg {
   position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 40%, transparent);
-  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
+  display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 20px;
 }
 .gate-modal {
-  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
+  background: var(--bg-card); border: var(--line) solid var(--rule); border-radius: var(--radius);
   max-width: 480px; width: 100%; padding: 20px 22px; box-shadow: var(--shadow-pop);
 }
 .gate-modal h2 { color: var(--ink); margin: 0 0 8px; font-size: 17px; font-weight: 600; }

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

@@ -19,7 +19,15 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <div class="page-head"><p class="page-head__sub" id="gate-sub">Loading…</p></div>
+      <!-- task 1003307: the board page head. Gate shipped with NO <h1> at all
+           (one-header-main-h1 measured 0 on every render), so the re-skin
+           carries the structural fix rather than porting the hole. The heading
+           is the LABEL voice, not a display line: on a working surface the
+           page's own name is the least interesting thing on it. -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Gate</h1>
+        <p class="page-head__sub" id="gate-sub">Loading…</p>
+      </div>
 
       <main id="hall-main">
         <p class="gate-sealed" id="gate-sealed" hidden>Archons only.</p>

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

@@ -0,0 +1,60 @@
+{
+  "_": "Gate — the access-request queue behind requireGovernmentPage. Same confirm-modal component as harbor, which is why the two had guessed two different z-indexes for it. Written with the re-skin (task 1003307) so this page is MEASURED at three widths in both modes rather than looked at once.",
+  "page": "/builders/gate",
+  "surface": "hall-ui",
+  "stub": {
+    "prefix": "/builders/"
+  },
+  "modeQuery": false,
+  "_feeds": "The kit's own stub carries no feed for this page, so against it the page renders its EMPTY and SKELETON states — which is the point: those are states the floors must hold in. Against the hall-preview harness the same states render populated. Every declared 404 below is a fixture the harness does not carry, named rather than hidden.",
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox/",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/gate-approvals",
+    "/api/(gds|bongos)/builders",
+    "/api/(gds|bongos)/access-requests"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b403\\b",
+    "\\b404\\b",
+    "\\b501\\b",
+    "Unauthorized",
+    "Forbidden",
+    "Not Found",
+    "Not Implemented",
+    "load failed"
+  ],
+  "states": {
+    "queue": {
+      "auth": true,
+      "actions": [
+        [
+          "wait",
+          700
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#gate-body"
+        ]
+      }
+    },
+    "out": {
+      "auth": false
+    }
+  },
+  "reducedMotion": {
+    "auth": true,
+    "actions": [
+      [
+        "wait",
+        600
+      ]
+    ]
+  }
+}

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

@@ -90,15 +90,32 @@
   // goals.html loads task-lib.js before this file (the render-family order).
   const { msOf, taskActivityMs } = window.OTBTaskLib;
 
-  // task 1003224 — on a LIST, a goal's subtitle is a TOOLTIP, never a second
-  // visible line. The board's job there is to let someone find a goal by name;
-  // rendering every explanation inline is what led 29 of 38 titles to carry
-  // their own after a dash. Escaped because it lands inside an attribute.
+  // task 1003224 made a goal's subtitle a TOOLTIP on a list, because 29 of 38
+  // titles already carried their own explanation after a dash and a row would
+  // then say the same thing twice.
+  //
+  // Task 1003307 REVERSES that for the row, on the owner's call, against the
+  // approved archetype (docs/design/mocks/hall/goals/v3.html, .goal__sub). Two
+  // things changed under 1003224's reasoning: the dash-in-title rate fell to 17
+  // of 72, and 35 of those 72 goals now carry a real subtitle that a tooltip
+  // hides from anyone reading — and hides COMPLETELY from anyone on a touch
+  // screen, where there is no hover. A duplicated explanation is a copy-desk
+  // fix; an invisible one is not fixable at all.
+  //
+  // subtitleAttr survives for the CARD view, which has no room for a line.
   function subtitleAttr(g) {
     const t = (g && g.subtitle ? String(g.subtitle) : '').trim();
     return t ? ` title="${window.OTB.escapeHtml(t)}"` : '';
   }
 
+  // The row's visible subtitle. Empty string when the goal has none, so the row
+  // collapses to title + facts rather than reserving a blank line — the card's
+  // "every region hides on null" grammar, applied to a row.
+  function subtitleLine(g) {
+    const t = (g && g.subtitle ? String(g.subtitle) : '').trim();
+    return t ? `<p class="gr-sub">${window.OTB.escapeHtml(t)}</p>` : '';
+  }
+
   // task 1003224 — the three-layer prose rules for a goal's detail head, kept
   // here rather than in goals-page.js because that file is 500 lines over the
   // excess-lines ratchet and this one exists for exactly that reason. It WRITES
@@ -120,6 +137,6 @@
     ring, memberName,
     readinessOf, EMPTY_ROLLUP, goalRollLine,
     matchesTodoSearch, msOf, taskActivityMs,
-    subtitleAttr, applyGoalProse,
+    subtitleAttr, subtitleLine, applyGoalProse,
   };
 })();

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

@@ -28,7 +28,7 @@
       emptyStateHtml, skeletonRows } = window.OTBKit;
     const { DONE_STATUSES, CUT_STATUSES, isTodoStatus, ring, memberName,
       readinessOf, EMPTY_ROLLUP, goalRollLine, matchesTodoSearch,
-      msOf, taskActivityMs, subtitleAttr, applyGoalProse } = window.OTBGoalsLib;
+      msOf, taskActivityMs, subtitleAttr, subtitleLine, applyGoalProse } = window.OTBGoalsLib;
 
   const CONFLICT_CAP = 3;
   // task 1828 — the band's Completion / Members / Conflicts columns each cap
@@ -150,21 +150,43 @@
       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)}`;
+    // task 1003307 — the archetype's fact line: the goal's STATE as a pill, then
+    // one chip per scope module and one for the version. The mock argues rows
+    // over cards precisely because a goal carries this many facts; the row was
+    // showing two of them as one run of grey text.
+    const stampHtml = goalStampHtml(g);
+    const idHtml = `<span class="gr-title__id">#${escapeHtml(String(g.id))}</span>`;
+    const chips = [];
+    for (const m of (Array.isArray(g.scope_modules) ? g.scope_modules : []).slice(0, 3)) {
+      chips.push(`<span class="fact-chip">${escapeHtml(String(m))}</span>`);
+    }
+    if (g.version_id) chips.push(`<span class="fact-chip">${escapeHtml(g.version_id)}</span>`);
+    const factsHtml = `<div class="gr-facts">`
+      + `<span class="fact-pill fact-pill--${escapeHtml(g.status || 'open')}">${escapeHtml(g.status || 'open')}</span>`
+      + chips.join('')
+      + `</div>`;
     // task 1003276 — the category chip. Computed here with the rest of the facts
     // so the row and the card (task 1003136) cannot drift on it.
     const catHtml = categoryChip(g.category);
-    return { r, achieved, ringHtml, goalHref, right, metaHtml, catHtml };
+    return { r, achieved, ringHtml, goalHref, right, metaHtml, catHtml, idHtml, stampHtml, factsHtml };
   }
   function goalRowHtml(g) {
-    const { r, achieved, ringHtml, goalHref, right, metaHtml, catHtml } = goalRenderFacts(g, 44);
+    const { r, achieved, ringHtml, goalHref, right, catHtml, idHtml, stampHtml, factsHtml } = 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.
+    // task 1003307 — the archetype's row (mock .goal): the id rides INSIDE the
+    // title, mono and quiet, so the name starts at the same x on every row; the
+    // subtitle is a real line; the state and the scope are pills and chips
+    // rather than a grey run-on. The sort stamp is all that is left of .gr-meta,
+    // and it renders only while a date sort is active.
     return `<div class="gr-row" data-goal-id="${escapeHtml(String(g.id))}">
       <div class="gr-ringcol">${ringHtml}</div>
       <div class="gr-main">
-        <a class="gr-title" href="${goalHref}"${subtitleAttr(g)}>${escapeHtml(g.title || 'Untitled goal')}</a>
-        <div class="gr-meta">${metaHtml}${catHtml}</div>
+        <a class="gr-title" href="${goalHref}">${idHtml}${escapeHtml(g.title || 'Untitled goal')}</a>
+        ${subtitleLine(g)}
+        ${factsHtml}
+        ${stampHtml ? `<div class="gr-meta">${stampHtml.replace(/^ · /, '')}${catHtml}</div>` : (catHtml ? `<div class="gr-meta">${catHtml}</div>` : '')}
         ${achieved ? '' : goalRollLine(r)}
       </div>
       <div class="gr-right">${right}</div>