@bongos/core 1.19.516 → 1.19.518

package/docs/module-api-changelog.md

@@ -1469,5 +1469,9 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.514 with no explicit bump. run 33797825811. (task 1002620)
   1.19.516 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.515 with no explicit bump. run 33798954769. (task 1002620)
+  1.19.517 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.516 with no explicit bump. run 33799755382. (task 1002620)
+  1.19.518 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.517 with no explicit bump. run 33801792364. (task 1002620)
 ---------------------------------------------------------------------------
 ```

package/modules/builder-settings/builder-needs.js

@@ -191,7 +191,33 @@ function boardVotesNeed(ctx) {
   };
 }
 
-const NEEDS = [artKeyNeed, helpRequestsNeed, taskRecommendationsNeed, boardVotesNeed];
+// task 1003178 (C08, goal 1000075): an open mingle INTRODUCTION waiting on you.
+// Third sibling of the two collab needs above, here for the same reason and with
+// the same posture — an introduction nobody surfaces is merely stored, and the
+// needs roster is how a collab feature reaches the whole hall instead of sitting
+// on a page of its own (which is the thing C08's criterion refuses).
+//
+// 'info' and NEVER a demand, and the wording carries that: mingle is declinable
+// without penalty (C07, ADR 0187 §5), so copy that pressured the reader would BE
+// the penalty the decision forbids. The same argument the recommendation need
+// makes, applied to a social invitation, where it matters more.
+function mingleIntroductionsNeed(ctx) {
+  const n = Number(ctx.openMingleIntroductions) || 0;
+  if (n <= 0) return null;
+  const subject = n === 1 ? 'An introduction is' : `${n} introductions are`;
+  return {
+    id: 'mingle_introductions',
+    title: n === 1 ? 'Someone from another craft was introduced to you' : 'You have introductions waiting',
+    what: 'Mingle pairs builders across crafts — you opted in, and a pairing is waiting on your answer.',
+    state: 'action_needed',
+    severity: 'info',
+    message: `${subject} waiting on you. Saying no costs nothing at all — no rank, no karma, no streak, `
+      + 'and it does not change how often you are paired again.',
+    action: { label: n === 1 ? 'See the introduction' : 'See the introductions', href: '/#/collab' },
+  };
+}
+
+const NEEDS = [artKeyNeed, helpRequestsNeed, taskRecommendationsNeed, boardVotesNeed, mingleIntroductionsNeed];
 
 // ---- founding grace (task 1002739 / direction §5.6, idea 1000701) -----------
 //
@@ -269,7 +295,7 @@ module.exports = {
   computeNeeds,
   // exported for tests / direct reuse
   artKeyNeed,
-  helpRequestsNeed, taskRecommendationsNeed, boardVotesNeed,
+  helpRequestsNeed, taskRecommendationsNeed, boardVotesNeed, mingleIntroductionsNeed,
   foundingGraceActive,
   FOUNDING_GRACE_DAYS,
   SETTINGS_PATH,

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

@@ -46,6 +46,25 @@
           </div>
         </section>
 
+        <!-- SOCIAL MODE ONLY (task 1003178 / C08). Not a page and not a nav item:
+             this panel is part of Collab, and it appears because the hall is in
+             social mode — the shell stamps data-social="on" on the document root
+             from /me, and collab.js reveals this section from that. With social
+             off the page is exactly what it was, which is the point: the hall
+             changes, it does not gain a destination. -->
+        <section class="scroll" id="cb-mingle-section" aria-labelledby="cb-mingle-h" hidden>
+          <h2 class="scroll__h" id="cb-mingle-h">Introductions</h2>
+          <p class="scroll__lede" id="cb-mingle-note">
+            Mingle pairs you with someone from a different craft. Saying no costs nothing
+            at all — no rank, no karma, no streak, and it does not change how often you
+            are paired again.
+          </p>
+          <ul class="ov-rows" id="cb-mingle"></ul>
+          <div class="empty-state" id="cb-mingle-empty" hidden>
+            <p>No introductions right now. You will see one here when a pairing round runs.</p>
+          </div>
+        </section>
+
         <section class="scroll" aria-labelledby="cb-mine-h">
           <h2 class="scroll__h" id="cb-mine-h">Your asks</h2>
           <p class="scroll__lede">

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

@@ -143,6 +143,78 @@
         ? `Matching your craft: ${crafts.join(', ')}.`
         : 'You have not set a craft, so only requests addressed to you by name reach you.';
     }
+
+    // The social half. Best-effort and LAST: an introductions read that fails
+    // must never take the help requests down with it — those are the page.
+    try { await loadMingle(); } catch (_) { /* the panel stays as it was */ }
+  }
+
+  // ---- social mode: introductions (task 1003178 / C08) ----------------------
+  //
+  // READ THE MODE OFF THE DOCUMENT, never re-derive it. The shell stamps
+  // data-social="on" from /me's resolved pair of switches (C07: the project
+  // enabled mingle AND this builder opted in). Asking the server again here would
+  // be a second answer to one question, and a page that decided for itself
+  // whether social was on could disagree with the rest of the hall.
+  const socialOn = () => document.documentElement.dataset.social === 'on';
+
+  // The other person in the pair — the row is written from the VIEWER's side, so
+  // it names who they were introduced to rather than echoing both ids back.
+  function otherOf(pair, meId) {
+    const lo = String(pair.builder_lo), hi = String(pair.builder_hi);
+    return String(meId) === lo
+      ? { id: hi, login: pair.hi_login, name: pair.hi_name, craft: pair.craft_hi, myCraft: pair.craft_lo }
+      : { id: lo, login: pair.lo_login, name: pair.lo_name, craft: pair.craft_lo, myCraft: pair.craft_hi };
+  }
+
+  function mingleRow(pair, meId) {
+    const o = otherOf(pair, meId);
+    const who = escapeHtml(o.name || o.login || `builder ${o.id}`);
+    return `<li class="ov-row">
+      <div class="ov-row__main">
+        <a class="ov-row__title" href="/builders/profile?id=${escapeHtml(String(o.id))}">${who}</a>
+        <p class="ov-row__sub">A ${escapeHtml(String(o.craft))} — you are a ${escapeHtml(String(o.myCraft))}. Mingle pairs across crafts.</p>
+      </div>
+      <div class="ov-row__right">
+        <div class="ov-row__actions">
+          <button class="btn-accent" data-mingle="accepted" data-id="${escapeHtml(String(pair.id))}">Say yes</button>
+          <button class="btn-ghost" data-mingle="declined" data-id="${escapeHtml(String(pair.id))}">Not now</button>
+        </div>
+      </div>
+    </li>`;
+  }
+
+  async function loadMingle() {
+    const section = $('#cb-mingle-section');
+    if (!section) return;
+    // Off is off: the section stays hidden and nothing is fetched. A page that
+    // fetched anyway would make "social is off" cost a request on every load.
+    if (!socialOn()) { section.hidden = true; return; }
+    section.hidden = false;
+
+    const r = await api.request('GET', '/mingle');
+    const pairs = (r.ok && r.data && r.data.open_pairs) || [];
+    const meId = (r.ok && r.data && r.data.you) || null;
+    paint('#cb-mingle', '#cb-mingle-empty', pairs.map((p) => mingleRow(p, meId)).join(''), pairs.length);
+  }
+
+  async function decideMingle(id, decision) {
+    if (settling) return;
+    settling = true;
+    try {
+      const r = await api.request('POST', `/mingle/pairs/${id}/decide`, { decision });
+      if (!r.ok) {
+        toast(window.OTB.errMessage ? window.OTB.errMessage(r.data) : 'Could not answer that introduction.');
+        return;
+      }
+      // Neutral either way. "Declined" must not read as a failure — declining is
+      // free, and a toast that sounded disappointed would be the penalty C07's
+      // decision forbids, delivered by the UI instead of the schema.
+      toast(decision === 'accepted' ? 'Said yes — say hello.' : 'Not now. Nothing changes for you.');
+      await load();
+    } finally {
+      settling = false;
+    }
   }
 
   async function settle(id, status) {
@@ -162,6 +234,12 @@
   }
 
   document.addEventListener('click', (ev) => {
+    const mingleBtn = ev.target && ev.target.closest ? ev.target.closest('[data-mingle]') : null;
+    if (mingleBtn) {
+      ev.preventDefault();
+      decideMingle(Number(mingleBtn.getAttribute('data-id')), mingleBtn.getAttribute('data-mingle'));
+      return;
+    }
     const btn = ev.target && ev.target.closest ? ev.target.closest('[data-settle]') : null;
     if (!btn) return;
     ev.preventDefault();

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

@@ -102,6 +102,9 @@
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/md-reader.js?v=2026-09-02-mdreader-2"></script>
+<!-- The chart primitive, for the treasury section (task 1003446). Before
+     drachmae.js, which reads window.OTBKit when it inserts that section. -->
+<script src="/builders/hall-kit.js" defer></script>
 <script src="/builders/drachmae.js?v=2026-09-02-drachmae-2" defer></script>
 <script src="/builders/copy-on-click.js?v=2026-06-01-copy-1" defer></script>
 </body>

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

@@ -31,6 +31,15 @@
   // The doc lives at docs/onboarding/, so relative links resolve against it.
   const DOC_DIR = 'docs/onboarding/';
   const BOUNTY_URL = '/api/gds/public/bounty-table';
+  // task 1003446: the treasury feed. NOT a new endpoint — this is the same
+  // /public/cost-summary the signed-out status page already draws as a
+  // cumulative line and the Work board already fetches to read ONE scalar off
+  // (`total_value_credits`). Its own route comment calls `daily[]` "the
+  // treasury chart's cumulative line"; the series was in the payload the whole
+  // time, and the stranger got the chart while the builder got the number.
+  const TREASURY_URL = '/api/gds/public/cost-summary';
+  const TREASURY_SECTION_ID = 'the-treasury';
+  const TREASURY_SECTION_TITLE = 'The treasury, so far';
   const BOUNTY_SECTION_ID = 'security-bounty-rates';
   const BOUNTY_SECTION_TITLE = 'Security bounty rates';
   // The section the live table is inserted AHEAD of: the doc's closing links.
@@ -109,6 +118,129 @@
     return true;
   }
 
+  // ---- the treasury (task 1003446) -----------------------------------------
+
+  // One cumulative figure: the plot, the number it ends on, and the table twin
+  // that keeps it out of picture-only territory. `fmt` renders a value for a
+  // human; `rows` is the twin's own text, so the money and the credits can read
+  // differently without the chart knowing about either.
+  function treasuryFigure({ id, title, points, fmt, foot }) {
+    const kit = window.OTBKit;
+    const esc = window.OTBMdReader.escapeHtml;
+    if (!points.length) return '';
+    const last = points[points.length - 1];
+    const series = kit.timeStepSeriesHtml(points, {
+      x0: points[0].x,
+      x1: last.x,
+      yMax: last.value,
+    });
+    const { endX, endY } = series.geometry;
+    const day = (t) => new Date(t).toISOString().slice(0, 10);
+    // Every 7th day plus the last: a twin with one row per calendar day since
+    // May would be ~120 rows behind a disclosure nobody finishes reading.
+    const twinRows = points.filter((p, i) => i % 7 === 0 || i === points.length - 1);
+    return `<figure class="pchart" id="${esc(id)}">
+      <figcaption class="pchart__title">${esc(title)}</figcaption>
+      ${kit.plotSvgHtml({
+    series: series.body,
+    // No readout is wired here, so no focus stop and no dead crosshair.
+    interactive: false,
+    ariaLabel: `${title}: ${fmt(last.value)} as of ${day(last.x)}`,
+    label: kit.plotValueLabelHtml(endX, endY - 8, fmt(last.value), 'end'),
+    leftTick: day(points[0].x),
+    rightTick: day(last.x),
+  })}
+      <details class="pchart__twin">
+        <summary>Read it as a table</summary>
+        <table class="ledger pchart__table"><thead><tr><th>Day</th><th>${esc(title)}</th></tr></thead><tbody>
+        ${twinRows.map((p) => `<tr><td>${esc(day(p.x))}</td><td>${esc(fmt(p.value))}</td></tr>`).join('')}
+        </tbody></table>
+      </details>
+      <p class="pchart__foot">${esc(foot)}</p>
+    </figure>`;
+  }
+
+  // The live treasury as a real section of the article, ahead of the rate card.
+  // Returns false when the summary can't be read: the prose stays and no empty
+  // panel or outline entry that leads nowhere is rendered — the same contract
+  // insertBountySection keeps.
+  async function insertTreasurySection(article) {
+    if (!window.OTBKit) {
+      console.warn('[drachmae] OTBKit missing — the treasury section needs the chart primitive');
+      return false;
+    }
+    let payload;
+    try {
+      const r = await fetch(TREASURY_URL, { credentials: 'same-origin' });
+      if (!r.ok) throw new Error(`${TREASURY_URL} → ${r.status}`);
+      payload = await r.json();
+    } catch (err) {
+      console.warn('[drachmae] cost summary unavailable:', err.message);
+      return false;
+    }
+    const esc = window.OTBMdReader.escapeHtml;
+    const kit = window.OTBKit;
+    const currency = (window.__BRANDING__ && window.__BRANDING__.currency
+      && window.__BRANDING__.currency.label) || 'credits';
+    const Currency = currency.charAt(0).toUpperCase() + currency.slice(1);
+    const usd = (n) => `$${Number(n || 0).toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
+    const num = (n) => Number(n || 0).toLocaleString();
+
+    // The server already ran generate_series, so every calendar day is present
+    // and a flat run is a real flat run rather than a missing sample.
+    const spend = kit.cumulateByDay(payload.daily, { valueOf: (r) => r.amount_usd });
+    const earned = kit.cumulateByDay(payload.daily_credits, { valueOf: (r) => r.credits });
+    // Both series empty is a treasury with nothing in it yet — one honest line,
+    // not two empty plots.
+    if (!spend.length && !earned.length) return false;
+
+    const figures = [
+      treasuryFigure({
+        id: 'treasury-spend',
+        title: 'Spent, cumulative',
+        points: spend,
+        fmt: usd,
+        foot: 'Every recorded cost — API, infra, compute, art — added up day by day.',
+      }),
+      treasuryFigure({
+        id: 'treasury-earned',
+        title: `${Currency} awarded, cumulative`,
+        points: earned,
+        fmt: num,
+        foot: `What the project has paid builders, in ${esc(currency)}, day by day.`,
+      }),
+    ].filter(Boolean).join('');
+
+    // Where the money went, as the kit's bar series rather than a fourth
+    // hand-rolled one. Categories arrive sorted biggest-first.
+    const byCategory = (payload.by_category || []).slice(0, 8);
+    const categories = byCategory.length
+      ? `<h3 id="treasury-by-category">Where it went</h3>`
+        + kit.barSeriesHtml(
+          byCategory.map((c) => ({ label: c.category, value: c.total_usd, valueLabel: usd(c.total_usd) })),
+          { list: true, ariaLabel: 'Spend by category', valueWidth: '84px' },
+        )
+      : '';
+
+    const section = document.createElement('section');
+    section.innerHTML =
+      `<h2 id="${esc(TREASURY_SECTION_ID)}">${esc(TREASURY_SECTION_TITLE)}</h2>`
+      + `<p>These are this project's real numbers, read from the server when you `
+      + `opened this page. It has spent <strong>${esc(usd(payload.total_usd))}</strong> `
+      + `and awarded <strong>${esc(num(payload.total_value_credits))} ${esc(currency)}</strong> `
+      + `for the work that money bought.</p>`
+      + `<div class="pcharts">${figures}</div>`
+      + categories;
+
+    const bounty = article.querySelector(`#${BOUNTY_SECTION_ID}`);
+    const closing = [...article.querySelectorAll('h2')].find((h) => CLOSING_H2.test(h.textContent.trim()));
+    // Ahead of the rate card if it landed first, else ahead of the closing
+    // links, else appended: the doc keeps ending on "dig deeper" either way.
+    const before = (bounty && bounty.parentElement === article ? bounty : null) || closing;
+    if (before) article.insertBefore(section, before); else article.appendChild(section);
+    return true;
+  }
+
   // The outline is read from the RENDERED headings rather than the parser's raw
   // text, so `*not*` and a [link](…) in a heading arrive as plain words, and so
   // the live section inserted above is simply one more heading in order.
@@ -276,9 +408,13 @@
     article.innerHTML = parsed.html.replace(/^\s*<h1\b[^>]*>[\s\S]*?<\/h1>\s*/, '');
     article.removeAttribute('aria-busy');
     show('article');
-    // Awaited before the outline is built so the rate card gets its entry and a
-    // scrollspy target; the article itself is already on screen by now.
+    // Awaited before the outline is built so both live sections get their
+    // entries and scrollspy targets; the article itself is already on screen by
+    // now. The rate card goes in FIRST so the treasury can land ahead of it by
+    // id — the doc then reads prose, then what actually happened, then the
+    // published rates, then "dig deeper".
     await insertBountySection(article);
+    await insertTreasurySection(article);
     addAnchors(article);
     setupTocToggle();
     setupScrollspy(renderToc(collectHeadings(article)));

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

@@ -663,6 +663,35 @@
     return chartNums(values).map((v) => (run += v));
   }
 
+  // Timestamped rows → [{ x, value }] ascending, one point per calendar day
+  // that HAS a row, value cumulative. The third consumer of this shape put it
+  // here (task 1003446): the profile's works and credits lines, and
+  // /drachmae's treasury. Two callers is a coincidence; three is a primitive.
+  //
+  // `dateOf`/`valueOf` are the caller's, because only the caller knows which
+  // column is the date — `shipped_at` on an activity row, `recorded_at` on a
+  // credits row, `day` on a gap-filled daily feed. A row whose date will not
+  // parse is DROPPED rather than counted at the epoch, where it would stretch
+  // the axis back to 1970 and flatten every real point against the floor.
+  function cumulateByDay(rows, opts = {}) {
+    const dateOf = opts.dateOf || ((r) => r && r.day);
+    const valueOf = opts.valueOf || ((r) => r && r.value);
+    const byDay = new Map();
+    for (const r of rows || []) {
+      const t = Date.parse(dateOf(r));
+      if (!Number.isFinite(t)) continue;
+      // The epoch-day floor — UTC midnight, so two rows on one day land on one
+      // point. Same value as setUTCHours(0,0,0,0) without a Date per row, and
+      // the same expression profile-charts.js's own `midnight` used before this
+      // moved, so no series shifts by a day.
+      const d = Math.floor(t / 86400000) * 86400000;
+      byDay.set(d, (byDay.get(d) || 0) + (Number(valueOf(r)) || 0));
+    }
+    const days = [...byDay.keys()].sort((a, b) => a - b);
+    const totals = cumulate(days.map((d) => byDay.get(d)));
+    return days.map((d, i) => ({ x: d, value: totals[i] }));
+  }
+
   // The line geometry, separated from the markup so a chart that needs the
   // maths without this SVG can take just this. Returns { points, x, y, nums }.
   //
@@ -867,21 +896,30 @@
     return { body, xs, base, py, max };
   }
 
-  // The plot itself: the series a geometry built, on the axis, with the hidden
-  // crosshair a caller's readout moves and the two end ticks. `tabindex="0"` is
-  // deliberate and paired with the readout — the chart is walkable by arrow
-  // key, so it has to be reachable by tab.
+  // The plot itself: the series a geometry built, on the axis, with the two end
+  // ticks — and, when the caller wires a readout, the hidden crosshair it moves
+  // plus the `tabindex` that makes an arrow-key-walkable chart reachable by tab.
+  //
+  // `interactive: false` (task 1003446) drops BOTH of those, and the pairing is
+  // the point: a `role="img"` with a `tabindex="0"` is a focus stop a keyboard
+  // reader lands on with nothing to do there, and a crosshair nothing moves is
+  // markup that only looks like a feature. A plot whose whole reading is its
+  // aria-label and its table twin says so.
   function plotSvgHtml(opts = {}) {
     const { width, height, pad, base } = plotBox(opts);
+    const interactive = opts.interactive !== false;
     const tick = (x, text, anchor) => (text
       ? `<text class="kit-plot__tick" x="${x}" y="${height - 6}"`
         + `${anchor ? ` text-anchor="${anchor}"` : ''}>${esc(text)}</text>`
       : '');
-    return `<svg class="kit-plot" viewBox="0 0 ${width} ${height}" role="img" tabindex="0"`
+    return `<svg class="kit-plot" viewBox="0 0 ${width} ${height}" role="img"`
+      + (interactive ? ' tabindex="0"' : '')
       + ` aria-label="${esc(opts.ariaLabel || '')}">`
       + (opts.series || '')
       + `<line class="kit-plot__axis" x1="${pad.l}" y1="${base}" x2="${width - pad.r}" y2="${base}"></line>`
-      + `<line class="kit-plot__hair" x1="0" y1="${pad.t}" x2="0" y2="${base}" style="visibility:hidden"></line>`
+      + (interactive
+        ? `<line class="kit-plot__hair" x1="0" y1="${pad.t}" x2="0" y2="${base}" style="visibility:hidden"></line>`
+        : '')
       + (opts.label || '')
       + tick(pad.l, opts.leftTick)
       + tick(width - pad.r, opts.rightTick, 'end')
@@ -918,7 +956,7 @@
     // charts (task 1003445) — the ONE place the hall draws a series.
     // linePoints/cumulate are the maths on their own, for a chart that wants
     // the geometry without this SVG (the profile's timeChart).
-    sparklineHtml, barSeriesHtml, chartCardHtml, linePoints, cumulate,
+    sparklineHtml, barSeriesHtml, chartCardHtml, linePoints, cumulate, cumulateByDay,
     // plotted charts: the axis frame + the two series shapes that ride it
     plotSvgHtml, plotValueLabelHtml, timeStepSeriesHtml, timeStepGeometry, columnSeriesHtml,
     // plotBox is exported so a caller mapping pointer x back into viewBox

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

@@ -205,6 +205,12 @@
       rank: normalizeRank(builder?.rank),
       graduated,
       showWork: shipStepCurrent,
+      // task 1003178 (C08): the index owns its own /me, so it passes the social
+      // mode through too — otherwise the hall's busiest page would be the one
+      // page the mode never reached. Read off ctx.lastMeState (the live getter),
+      // not a local: renderNav takes (builder, onboarding) and is called from
+      // five sites, so there is no `me` in scope here.
+      social: (ctx.lastMeState && ctx.lastMeState.social) || null,
       builder,
     });
 

package/modules/hall-ui/public/profile-charts.js

@@ -101,20 +101,13 @@
   // point; a row with no parsable date is skipped, not zeroed. The lookback
   // clips this for drawing (clipToWindow) rather than re-accumulating, so the
   // running total stays true.
+  // The grouping AND the running total are the kit's since task 1003446, when
+  // /drachmae's treasury became the third caller of this shape. This wrapper
+  // survives only to keep the `{ day, value }` key this page's callers and
+  // clipToWindow already read; the arithmetic has one home.
   function cumulativeByDay(rows, valueOf, dateOf = (r) => r && r.shipped_at) {
-    const byDay = new Map();
-    for (const r of rows || []) {
-      const t = Date.parse(dateOf(r));
-      if (!Number.isFinite(t)) continue;
-      const d = midnight(t);
-      byDay.set(d, (byDay.get(d) || 0) + Number(valueOf(r)) || 0);
-    }
-    // The grouping is this function's; the running total is the kit's
-    // (task 1003445), so the hall has ONE accumulator rather than two that
-    // could disagree about what a hole in the series means.
-    const days = [...byDay.keys()].sort((a, b) => a - b);
-    const totals = window.OTBKit.cumulate(days.map((d) => byDay.get(d)));
-    return days.map((d, i) => ({ day: d, value: totals[i] }));
+    return window.OTBKit.cumulateByDay(rows, { dateOf, valueOf })
+      .map((p) => ({ day: p.x, value: p.value }));
   }
 
   // Clip a cumulative series to [windowStart, ∞) for drawing. The line must

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

@@ -119,41 +119,12 @@
    (glass on the card, like settings' quote), the series in the accent and every
    word in ink. The SVG scales with its card; the axis band is inside the
    viewBox, so the card grows with its content and never scrolls. */
-.pcharts {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--sp-sm);
-}
-.pchart {
-  margin: 0;
-  padding: var(--sp-xs) var(--sp-sm) var(--sp-xs);
-  background: var(--glass);
-  border: var(--line) solid var(--glass-edge);
-  border-radius: var(--radius-sm);
-  min-width: 0;
-}
-.pchart__title { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
-.pchart__read { margin: 2px 0 var(--sp-hair); font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); min-height: 1.4em; }
-/* The plot itself — the svg, the line, the columns, the axis, the crosshair,
-   the ticks — is OTBKit's `.kit-plot*` in style.css (task 1003445). It was
-   written twice in this file's own script, and the goal's next charts want it
-   again. The dataviz spec moved verbatim; what stays below is this page's
-   FIGURE: the caption, the live readout, the table twin and the foot. */
-.pchart__twin { margin-top: var(--sp-hair); }
-.pchart__twin > summary { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px; margin: 0 -4px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm); }
-.pchart__twin > summary:hover { color: var(--ink); background: var(--glass-strong); }
-.pchart__table { margin-top: var(--sp-hair); font-size: 12.5px; }
-.pchart__table td, .pchart__table th { padding: 3px 6px; }
-.pchart__foot { margin: var(--sp-hair) 0 0; font-size: 12px; color: var(--ink-faint); }
-.pchart__note { margin: 0; font-size: 14px; color: var(--ink-soft); }
-/* the craft mix: label, bar, count — a row is its own table row */
-/* The craft mix is OTBKit.barSeriesHtml (task 1003445) — the .pmix family was
-   the hall's third copy of one horizontal bar. Only the vertical air around it
-   is this page's; the row, the track and the 24px floor are the kit's. */
-.pchart .kit-bars { margin: var(--sp-hair) 0; }
-@media (max-width: 720px) {
-  .pcharts { grid-template-columns: minmax(0, 1fr); }
-}
+/* The plot is OTBKit's `.kit-plot*` (task 1003445) and the FIGURE around it —
+   `.pcharts` / `.pchart` / `__title` / `__read` / `__twin` / `__table` /
+   `__foot` — moved to style.css beside it in task 1003446, when /drachmae's
+   treasury became its second consumer. The names did not change: they are
+   spelled into profile.js AND drachmae.js. What stays in this sheet is the one
+   thing only this page has, the lookback control below. */
 
 /* the lookback control (task 1003489, owner request) — one segmented row above
    the grid, scoping every chart. The pressed side takes the accent TINT the

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

@@ -522,7 +522,32 @@
     }
   }
 
-  // applyAccess({ authed, rank, graduated, showWork }) — settle nav visibility.
+  // SOCIAL MODE (task 1003178 / C08, goal 1000075). The owner's directive is that
+  // social is "scoped into the ENTIRE builders hall, not a single social tab", and
+  // the criterion says outright that a /social route with the same hall around it
+  // does NOT satisfy it. So social is a MODE stamped on the document root, beside
+  // data-theme and for the same reason: every hall page loads this shell, so one
+  // attribute lets any surface — a stylesheet, a page script, a widget — read the
+  // mode without a route, a nav item, or a second fetch.
+  //
+  // OFF is the default and the fallback. `/me.social` is null when lifecycle is
+  // disabled or the read failed, and null is OFF: a mode that cannot be read is
+  // not on. It is only ON when BOTH of C07's switches are (the project enabled
+  // mingle AND this builder opted in) — the server resolves that pair, this never
+  // re-derives it.
+  //
+  // Written as an attribute rather than kept in `access` on purpose: CSS can hit
+  // it (`:root[data-social="on"] …`), which is what lets a surface change how it
+  // READS without every page script learning about social.
+  function applySocial(social) {
+    var on = !!(social && social.enabled === true);
+    var root = document.documentElement;
+    if (on) root.dataset.social = 'on';
+    else delete root.dataset.social;
+  }
+
+  // applyAccess({ authed, rank, graduated, showWork, social }) — settle nav
+  // visibility and the social mode.
   // Called by builders.js on the index (it owns /me there) and by the shell's own
   // probe elsewhere. Cosmetic only; the server enforces (ADR 0016).
   function applyAccess(state) {
@@ -531,6 +556,7 @@
       if ('rank' in state) access.rank = state.rank ? String(state.rank).toLowerCase() : null;
       if ('graduated' in state) access.graduated = !!state.graduated;
       if ('showWork' in state) access.showWork = !!state.showWork;
+      if ('social' in state) applySocial(state.social);
       if (state.builder) renderUser(state.builder);
     }
     document.querySelectorAll('#app-sidebar [data-gate]').forEach(function (el) {
@@ -744,6 +770,9 @@
         rank: me.builder.rank,
         graduated: !!(me.onboarding && me.onboarding.graduated),
         showWork: showWork,
+        // task 1003178 (C08): the mode rides the identity every page already
+        // fetches, so no surface needs a route or a second call to know.
+        social: me.social || null,
         builder: me.builder,
       });
     }).catch(function () { /* cosmetic only */ });

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

@@ -2047,6 +2047,41 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .kit-plot__end { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; fill: var(--ink); }
 .kit-plot__tick { font-family: var(--label-face); font-size: 10px; letter-spacing: var(--label-space); text-transform: var(--label-case); fill: var(--ink-faint); }
 
+/* The FIGURE a plot sits in — a card one tonal step down from the panel (glass
+   on the card, like settings' quote), its caption, its live readout, its
+   <details> table twin and its foot. Moved here from profile.css in task
+   1003446, when /drachmae's treasury became the second consumer; the `.pchart`
+   names are unchanged because they are spelled into profile.js and drachmae.js.
+   The kit does NOT emit these — a page composes its own figure and the kit
+   draws the series inside it. */
+.pcharts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sp-sm);
+}
+.pchart {
+  margin: 0;
+  padding: var(--sp-xs) var(--sp-sm) var(--sp-xs);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-sm);
+  min-width: 0;
+}
+.pchart__title { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
+.pchart__read { margin: 2px 0 var(--sp-hair); font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); min-height: 1.4em; }
+.pchart__twin { margin-top: var(--sp-hair); }
+.pchart__twin > summary { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px; margin: 0 -4px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm); }
+.pchart__twin > summary:hover { color: var(--ink); background: var(--glass-strong); }
+.pchart__table { margin-top: var(--sp-hair); font-size: 12.5px; }
+.pchart__table td, .pchart__table th { padding: 3px 6px; }
+.pchart__foot { margin: var(--sp-hair) 0 0; font-size: 12px; color: var(--ink-faint); }
+.pchart__note { margin: 0; font-size: 14px; color: var(--ink-soft); }
+/* The bar series inside a figure keeps the figure's own vertical air. */
+.pchart .kit-bars { margin: var(--sp-hair) 0; }
+@media (max-width: 720px) {
+  .pcharts { grid-template-columns: minmax(0, 1fr); }
+}
+
 .curve__kinds { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
 
 /* ---------- onboarding checklist ---------- */

package/modules/lifecycle/lifecycle.js

@@ -22,6 +22,7 @@ const goalSuggest = require('./goal-suggest');
 const helpRequests = require('./help-requests');
 const taskRecommendations = require('./task-recommendations');
 const activity = require('./activity');
+const mingle = require('./mingle');
 
 module.exports = {
   // --- retired doorway leaks (ADR 0093 §3) ---------------------------------
@@ -52,6 +53,13 @@ module.exports = {
   // builder, exposed the same way and for the same reason — a recommendation
   // nobody surfaces is merely stored.
   openTaskRecommendationsFor: (...a) => taskRecommendations.countOpenForRecipient(...a),
+  // task 1003178 (C08): social MODE, and the count of open introductions. The
+  // mode is the pair of switches C07 resolved (project enabled AND this builder
+  // opted in) — the kernel's /me carries it so every hall surface can read the
+  // mode WITHOUT importing this module, which is what makes social a mode rather
+  // than a page. The count feeds the needs roster, the same slot C01 and C03 use.
+  socialModeFor: (...a) => mingle.mingleStateFor(...a),
+  openMingleIntroductionsFor: (...a) => mingle.countOpenPairsFor(...a),
   getTask: (...a) => db.getTask(...a),
   // findTaskBySourceRef: the create-vector idempotency read (task 1003114 / R03
   // of goal 1000074). copy-desk turns an artist's copy proposal into a task and