@bongos/core 1.17.1 → 1.17.3

package/modules/hall-ui/public/goal-inbox.js

@@ -0,0 +1,232 @@
+// goal-inbox.js — the Home "Needs your attention" card (task 2169), grown from
+// the two-sided goal-membership inbox (task 1954, ADR 0112).
+//
+// This card is the SINGLE landing place for actionable items on Home: it owns
+// the section (id 'attention-scroll'), renders the goal-membership slice
+// itself, and hosts the idea-triage slice (#attention-ideas, rendered by
+// builders.js). New actionable item classes join as line-item slices here —
+// never as new Home cards (the anti-accretion rule).
+//
+// The goal slice surfaces a builder's private-goals queue:
+//   • "Invitations to you" — pending invites addressed to me (Accept / Decline).
+//   • "Requests to approve" — pending join-requests on goals I own or manage
+//                             (Approve / Deny).
+//   • a quiet "your pending requests" line for my own outstanding asks.
+// Reads GET /goals/inbox (task 1952) which already scopes each bucket to the caller.
+// Registers into the window.OTB hall-widget registry (dom-utils.js) exactly like
+// goals.js — same IIFE guard, same BongosClient result-mode getJSON, view:'home'.
+//
+// The whole card is HIDDEN when the inbox is empty, so a quiet home page pays nothing
+// for it. On an older server without the route (404) — or a signed-out visitor (401) —
+// it renders nothing (feature-detect), never an error card.
+(function () {
+  'use strict';
+  if (!window.OTB || typeof window.OTB.contributeHallWidget !== 'function') return;
+  const { escapeHtml, toast, rankLabel } = window.OTB;
+  const API = '/api/bongos';
+  // The generated typed client (served as window.BongosClient), result-mode so the
+  // status-inspecting control flow below (401/404 → render nothing) reads 1:1.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+
+  async function getJSON(path) {
+    const res = await api.request('GET', path);
+    if (res.status === 401) { const e = new Error('auth-needed'); e.code = 'auth-needed'; throw e; }
+    if (res.status === 404) { const e = new Error('not-found'); e.code = 'not-found'; throw e; }
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.data;
+  }
+  async function postJSON(path, body) {
+    const res = await api.request('POST', path, { body: body || {} });
+    if (!res.ok) { const e = new Error(`${path} → ${res.status}`); e.status = res.status; e.data = res.data; throw e; }
+    return res.data;
+  }
+
+  let host = null;
+  let busy = false;
+
+  // The goal-detail hash route on the Goals page (matches goals.js's row link).
+  const goalHref = (goalId) => `/goals#/goal/${encodeURIComponent(goalId)}`;
+  const noteHtml = (note) => (note ? `<p class="ginbox__note">“${escapeHtml(note)}”</p>` : '');
+
+  function invitationRow(inv) {
+    const who = inv.invited_by_name || inv.invited_by_login || 'someone';
+    return `<li class="ginbox__item" data-goal="${escapeHtml(String(inv.goal_id))}">
+        <div class="ginbox__body">
+          <a class="ginbox__goal" href="${goalHref(inv.goal_id)}" title="Open ${escapeHtml(inv.goal_title || 'goal')}">${escapeHtml(inv.goal_title || 'a goal')}</a>
+          <span class="ginbox__sub">invited by ${escapeHtml(who)}</span>
+          ${noteHtml(inv.note)}
+        </div>
+        <div class="ginbox__actions">
+          <button class="btn-ghost" type="button" data-accept-inv="${escapeHtml(String(inv.id))}">Accept</button>
+          <button class="btn-ghost" type="button" data-decline-inv="${escapeHtml(String(inv.id))}">Decline</button>
+        </div>
+      </li>`;
+  }
+
+  function requestRow(r) {
+    const who = r.display_name || r.github_login || 'a builder';
+    const rank = r.rank ? ` · ${escapeHtml(rankLabel(r.rank, { empty: '' }))}` : '';
+    return `<li class="ginbox__item" data-goal="${escapeHtml(String(r.goal_id))}">
+        <div class="ginbox__body">
+          <a class="ginbox__goal" href="${goalHref(r.goal_id)}" title="Open ${escapeHtml(r.goal_title || 'goal')}">${escapeHtml(r.goal_title || 'a goal')}</a>
+          <span class="ginbox__sub">${escapeHtml(who)}${rank} asks to join</span>
+          ${noteHtml(r.note)}
+        </div>
+        <div class="ginbox__actions">
+          <button class="btn-ghost" type="button" data-approve-req="${escapeHtml(String(r.id))}">Approve</button>
+          <button class="btn-ghost" type="button" data-deny-req="${escapeHtml(String(r.id))}">Deny</button>
+        </div>
+      </li>`;
+  }
+
+  function pendingLine(myPending) {
+    if (!myPending.length) return '';
+    const links = myPending
+      .map((r) => `<a href="${goalHref(r.goal_id)}">${escapeHtml(r.goal_title || 'a goal')}</a>`)
+      .join(', ');
+    const noun = myPending.length === 1 ? 'request' : 'requests';
+    return `<p class="ginbox__pending card-foot">Your pending join ${noun}: ${links} — awaiting approval.</p>`;
+  }
+
+  // task 2169: this render fills ONLY the goals slice (#attention-goals) — the
+  // ideas slice (#attention-ideas) belongs to builders.js's triage renderer.
+  // Card visibility + the headline count derive from BOTH via OTBAttention.
+  const MAX_GOAL_ROWS = 5;
+  function render(inbox) {
+    const box = host && host.querySelector('#attention-goals');
+    if (!box) return;
+    const invitations = inbox.invitations || [];
+    const joinRequests = inbox.joinRequests || [];
+    const myPending = inbox.myPendingRequests || [];
+    if (!invitations.length && !joinRequests.length && !myPending.length) {
+      box.innerHTML = '';
+      window.OTBAttention.refresh();
+      return;
+    }
+    // Cap the card at a handful of rows — it is a summary, not the queue.
+    let budget = MAX_GOAL_ROWS;
+    const inv = invitations.slice(0, budget); budget -= inv.length;
+    const reqs = joinRequests.slice(0, Math.max(0, budget));
+    const overflow = (invitations.length - inv.length) + (joinRequests.length - reqs.length);
+    let html = '';
+    if (inv.length) {
+      html += '<h3 class="ginbox__sec-h">Goal invitations to you</h3>';
+      html += `<ul class="ginbox">${inv.map(invitationRow).join('')}</ul>`;
+    }
+    if (reqs.length) {
+      html += '<h3 class="ginbox__sec-h">Join-requests to approve</h3>';
+      html += `<ul class="ginbox">${reqs.map(requestRow).join('')}</ul>`;
+    }
+    if (overflow > 0) {
+      html += `<p class="ginbox__pending">…and ${overflow} more waiting — <a href="/goals">open your goals</a>.</p>`;
+    }
+    html += pendingLine(myPending);
+    box.innerHTML = html;
+    window.OTBAttention.refresh();
+  }
+
+  async function load() {
+    if (!host) return;
+    try {
+      const inbox = await getJSON(`${API}/goals/inbox`);
+      render(inbox);
+    } catch (err) {
+      // Signed out (401) or an older server without the route (404) → render
+      // nothing in the goals slice; the ideas slice may still have content.
+      const box = host.querySelector('#attention-goals');
+      if (box) box.innerHTML = '';
+      window.OTBAttention.refresh();
+      if (err.code !== 'auth-needed' && err.code !== 'not-found') {
+        console.error('[hall] goal inbox load failed', err);
+      }
+    }
+  }
+
+  // One action, then refresh the widget (the row it acted on disappears, and the
+  // count-pill/live counter re-derive from the fresh inbox). Disable while in flight
+  // so a double-click can't fire the resolve twice (the server 409s a re-resolve, but
+  // the UI shouldn't invite it).
+  async function act(fn, okMsg) {
+    if (busy) return;
+    busy = true;
+    host.querySelectorAll('button').forEach((b) => { b.disabled = true; });
+    try {
+      await fn();
+      toast(okMsg);
+      await load();
+    } catch (err) {
+      toast((err && err.data && err.data.message) || 'Could not do that just now — refresh and retry.');
+      host.querySelectorAll('button').forEach((b) => { b.disabled = false; });
+    } finally {
+      busy = false;
+    }
+  }
+
+  function onClick(e) {
+    const item = e.target.closest('.ginbox__item');
+    const goalId = item && item.dataset.goal;
+    if (!goalId) return;
+
+    const accept = e.target.closest('[data-accept-inv]');
+    if (accept) {
+      act(() => postJSON(`${API}/goals/${encodeURIComponent(goalId)}/invitations/${encodeURIComponent(accept.dataset.acceptInv)}/respond`, { action: 'accept' }),
+        'Invitation accepted — you’re now a member.');
+      return;
+    }
+    const decline = e.target.closest('[data-decline-inv]');
+    if (decline) {
+      act(() => postJSON(`${API}/goals/${encodeURIComponent(goalId)}/invitations/${encodeURIComponent(decline.dataset.declineInv)}/respond`, { action: 'decline' }),
+        'Invitation declined.');
+      return;
+    }
+    const approve = e.target.closest('[data-approve-req]');
+    if (approve) {
+      act(() => postJSON(`${API}/goals/${encodeURIComponent(goalId)}/requests/${encodeURIComponent(approve.dataset.approveReq)}/respond`, { action: 'approve' }),
+        'Approved — they’re now a member.');
+      return;
+    }
+    const deny = e.target.closest('[data-deny-req]');
+    if (deny) {
+      act(() => postJSON(`${API}/goals/${encodeURIComponent(goalId)}/requests/${encodeURIComponent(deny.dataset.denyReq)}/respond`, { action: 'deny' }),
+        'Request denied.');
+    }
+  }
+
+  // task 2169: this widget IS the "Needs your attention" card — ONE capped
+  // summary hosting every actionable item class: goal invitations +
+  // join-requests (this file) and ideas awaiting triage (builders.js renders
+  // into #attention-ideas). Future actionable item classes add a slice div
+  // here + call OTBAttention.refresh() — never a new Home card.
+  function mount(hostEl) {
+    host = hostEl;
+    host.hidden = true; // stays hidden until a slice finds something actionable
+    host.innerHTML =
+      '<h2 id="attention-h" class="scroll__h">Needs your attention<span class="count-pill" id="attention-count" hidden></span></h2>' +
+      '<div id="attention-goals"></div>' +
+      '<div id="attention-ideas"></div>';
+    host.addEventListener('click', onClick);
+    load();
+  }
+
+  // The card's shared visibility contract: any slice renderer calls refresh()
+  // after painting; the card shows iff any slice has actionable rows, and the
+  // headline pill is the cross-slice total.
+  window.OTBAttention = {
+    refresh() {
+      const sec = document.getElementById('attention-scroll');
+      if (!sec) return;
+      const n = sec.querySelectorAll('.ginbox__item, .triage-inbox__item').length;
+      const pending = sec.querySelector('.ginbox__pending');
+      const pill = document.getElementById('attention-count');
+      if (pill) { pill.hidden = !n; pill.textContent = String(n); }
+      sec.hidden = n === 0 && !pending;
+    },
+  };
+
+  // order 20 → the top of the Home main zone: personal + actionable beats
+  // informational. hiddenByDefault so a quiet inbox costs nothing.
+  window.OTB.contributeHallWidget({
+    id: 'attention-scroll', label: 'Needs your attention', order: 20, mount,
+    labelledby: 'attention-h', view: 'home', zone: 'home-main', hiddenByDefault: true,
+  });
+})();

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

@@ -280,6 +280,7 @@
           <span class="goal-card__title">${escapeHtml(g.title || 'Untitled goal')}</span>
         </div>
         <div class="goal-card__meta">
+          <span class="goal-card__id" title="Goal id — use this to reference the goal (e.g. 'goal ${escapeHtml(String(g.id))}'). Distinct from the priority position on the left.">#${escapeHtml(String(g.id))}</span>
           <span>${escapeHtml(g.version_id || '')}</span>
           ${statusBadge(g.status)}
           ${blockedPill}
@@ -857,7 +858,9 @@
     const iAmLead = members.some((m) => sameId(m.builder_id, selfId()) && m.role === 'lead');
 
     const h = $('#goal-detail-h');
-    if (h) h.textContent = g.title || 'Untitled goal';
+    // task 2163 — surface the numeric goal id alongside the title (escaped title,
+    // so switching from textContent to innerHTML stays injection-safe).
+    if (h) h.innerHTML = `<span class="goal-detail__id" title="Goal id">#${escapeHtml(String(g.id))}</span> ${escapeHtml(g.title || 'Untitled goal')}`;
     const desc = $('#goal-detail-desc');
     if (desc) desc.textContent = g.description || '';
     const meta = $('#goal-detail-meta');

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

@@ -38,6 +38,14 @@
     .goal-deps--blocked { color: var(--warn); font-weight: 600; }
     .goal-card__title { font-weight: 650; font-size: 14px; flex: 1; min-width: 0; }
     .goal-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-faint); }
+    /* task 2163 — the real goal id, shown as a monospace #NNN token so it reads as
+       an identifier and never gets confused with the priority ordinal on the left. */
+    .goal-card__id, .goal-detail__id {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-faint);
+    }
+    .goal-card__id { padding: 0 5px; border: 1px solid var(--rule-soft); border-radius: 5px; }
+    .goal-detail__id { font-size: 0.72em; vertical-align: 0.12em; margin-right: 4px; }
     .goal-card__foot { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-soft); }
     .goal-card__foot strong { font-variant-numeric: tabular-nums; }