@bongos/core 1.24.19 → 1.24.21

package/modules/ai-studio/studio.js

@@ -100,7 +100,7 @@ function buildContext({ branding, projectDoc, designDoc }) {
   const palette = branding && branding.theme && branding.theme.colors ? JSON.stringify(branding.theme.colors).slice(0, 800) : '';
   const parts = [
     `You are the art director's assistant for ${id.productName || 'this project'}${id.worldName && id.worldName !== id.productName ? `, set in the world of ${id.worldName}` : ''}.`,
-    'An artist on the project has sent a sketch or reference images with a request. Answer as a thoughtful collaborator: say what you see, what works, and how to take it further, in plain words.',
+    'An artist on the project has sent a sketch or reference images with a request. Answer as a thoughtful collaborator: say what you see, what works, and how to take it further, in plain words. Keep it short and friendly for a visual artist: a few short paragraphs or a brief list, no code, no markup symbols, and no technical file formats unless they asked for one.',
     'Keep everything you suggest consistent with the project as described below.',
   ];
   if (palette) parts.push(`## Brand colours\n${palette}`);

package/modules/autonomy/governor-docket.js

@@ -58,6 +58,9 @@ function fenceDocketMatters(project, mayManage) {
     tally: null,
     href: '/watch',
     ref: { type: 'autonomy_fence', id: 'project' },
+    context: project.enabled === false
+      ? 'Unattended building lets AI runners claim and build tasks on their own, with nobody at the keyboard. It is switched off, so no runner builds anything until someone turns it on.'
+      : 'Unattended building lets AI runners claim and build tasks on their own. It is on, but no goal is on its allowed list, so the runners have nothing they may work on yet.',
     ...(detail ? { detail } : {}),
     // The floor desk's acts (task 1004559), only for the switch's own atom.
     ...(mayManage ? { acts: project.enabled === false ? [{ key: 'switch_on' }] : [{ key: 'allow', pick: 'open_goals', except: [] }, { key: 'switch_off', options: OFF_REASONS }] } : {}),

package/modules/government/docket.js

@@ -165,12 +165,44 @@ function tally(t) {
   };
 }
 
+// WHAT A CARD IS ABOUT (task 1005013). A matter may carry `context`: a few plain
+// sentences from the module that owns it saying what kind of thing this is, what
+// it belongs to (a goal, a task, a module, by name), why it waits and what
+// answering does — so a card is never only a bare title. A matter that brings
+// none gets its source's sentence below; every source the design names has one.
+// It may also carry `question`: the plain question a card asks when no agent
+// stored an ask, in place of the raw title.
+const SOURCE_CONTEXT = Object.freeze({
+  board: 'A sitting of the board. Its members vote, and the result is decided by the rule in the charter.',
+  blockers: 'A blocker: work that cannot go on until a person decides something. Deciding it releases the work that waits on it.',
+  access_requests: 'Someone asked to join this project as a builder. Admitting them lets them sign in and claim work; nobody joins until someone with the right says yes.',
+  goal_join_requests: 'Someone asked to join a goal team. Members of a goal may claim its tasks.',
+  override_requests: 'A request to let finished work through although it failed its automatic check or grade. Approving it treats the work as passed.',
+  removal_proposals: 'A later change deleted work that had already shipped. A person confirms whether that work is really gone, or keeps it counted.',
+  redteam_reports: 'A security report: someone says they found a flaw in the project itself. Confirming it means the flaw is real and needs a fix; disputing it means it is not.',
+  criteria_uat: 'A done-when promise of a goal. The work for it has shipped; a person checks it on the live site and signs it off, which closes the promise.',
+  core_update: 'A newer version of Bongos, the software this project runs on, is available. Taking it updates the project to that version.',
+  autobongos_fence: 'The switch for unattended building: whether AI runners may build on their own, and which goals they may work on.',
+  module_rechecks: 'A module (an add-on to the project) is being checked again for safety. One that failed waits for someone to run the check again.',
+  treasury_spending: 'A goal has used up its money for the month and asks to borrow from the reserve so its work can go on.',
+});
+const MAX_CONTEXT = 600;
+const MAX_QUESTION = 160;
+function clip(v, max) {
+  if (typeof v !== 'string') return null;
+  const t = v.replace(/\s+/g, ' ').trim();
+  if (!t) return null;
+  return t.length <= max ? t : t.slice(0, max - 1).replace(/\s+\S*$/, '') + '…';
+}
+
 // One matter as a contributor handed it → the docket's one shape. Pure. Unknown
 // rule → null (the card says so), unknown state → 'moving' (never a false
 // "needs you"), unknown building → the source's own building.
 function normalizeMatter(raw, { source, building }) {
   if (!raw || typeof raw !== 'object' || raw.id == null || !raw.title) return null;
   const b = vocab.BUILDING_KEYS.includes(raw.building) ? raw.building : building;
+  const context = clip(raw.context, MAX_CONTEXT) || SOURCE_CONTEXT[source] || null;
+  const question = clip(raw.question, MAX_QUESTION);
   return {
     id: `${source}:${raw.id}`,
     source,
@@ -186,6 +218,8 @@ function normalizeMatter(raw, { source, building }) {
     tally: tally(raw.tally),
     href: raw.href ? String(raw.href) : null,
     ref: raw.ref && typeof raw.ref === 'object' ? { type: String(raw.ref.type), id: String(raw.ref.id) } : null,
+    ...(context ? { context } : {}),
+    ...(question ? { question } : {}),
     ...actsField(raw.acts),
     ...detailField(raw.detail),
   };
@@ -364,6 +398,13 @@ const PASS_RULE_NEEDS = Object.freeze({
   majority: 'needs more than half',
   unanimous: 'needs everyone who votes',
 });
+// the same rule as the last sentence of a sitting's context (task 1005013)
+const PASS_RULE_SENTENCE = Object.freeze({
+  first_ratifier: 'One yes decides it.',
+  consent: 'It passes unless someone objects.',
+  majority: 'It needs a yes from more than half the members.',
+  unanimous: 'It needs a yes from everyone who votes.',
+});
 
 // One open or recently closed sitting, for one viewer. Pure.
 //
@@ -402,6 +443,14 @@ function boardMatter(item, { viewerId, members }) {
     : item.subject_type === 'constitutional_amendment' ? 'charter · amendment'
     : item.subject_type === 'genesis_stage' ? 'charter · founding'
       : 'planning · idea to ratify';
+  const passWords = PASS_RULE_SENTENCE[constitution.pass_rule] ? ' ' + PASS_RULE_SENTENCE[constitution.pass_rule] : '';
+  const context = (matterArea
+    ? `A decision put to a vote at ${building}: the charter says matters here are decided by a sitting, not by one person acting alone. A yes carries out what it proposes.`
+    : item.subject_type === 'constitutional_amendment'
+      ? 'A proposed change to the charter, the rules for who decides what in this project. If it passes, the new rule takes effect at once.'
+      : item.subject_type === 'genesis_stage'
+        ? 'A founding stage of this project has finished its work. Closing it moves the project on to the next stage.'
+        : 'A full idea someone wrote up, put to the board. If it passes, it becomes part of the plan: a new goal or a done-when promise of one.') + passWords;
   const forN = votes.filter((v) => v.direction === 'yes').length;
   const againstN = votes.filter((v) => v.direction === 'no').length;
   const castIds = new Set(votes.map((v) => String(v.voter_id)));
@@ -433,6 +482,7 @@ function boardMatter(item, { viewerId, members }) {
     tally: { for: forN, against: againstN, open: isOpen ? open : 0, needs: PASS_RULE_NEEDS[constitution.pass_rule] || null },
     href: `/board-room?item=${encodeURIComponent(item.id)}`,
     ref: { type: 'board_item', id: item.id },
+    context,
   };
 }
 
@@ -962,6 +1012,7 @@ module.exports = {
   normalizeDeskRow,
   loadGovernment,
   normalizeMatter,
+  SOURCE_CONTEXT,
   gateAllows,
   homeLine,
   boardMatter,

package/modules/government/treasury.js

@@ -227,6 +227,8 @@ function borrowMatter(borrow, { title, canAnswer = false } = {}) {
     deadline: null,
     href: `/goal/${b.goal_id}`,
     ref: { type: 'pot_borrow', id: b.id },
+    question: `Lend ${name} ${usd(b.amount_usd)} from the reserve?`,
+    context: `Each goal gets a monthly pot of money for its AI work. ${name} has spent ${usd(b.spent_usd)} of its ${usd(b.budget_usd)} this month, so its work stops until it gets more. Lending from the reserve lets it go on; saying no pauses it until next month.`,
     detail: `${name} has spent ${usd(b.spent_usd)} of its ${usd(b.budget_usd)} pot this month and asks the reserve for ${usd(b.amount_usd)}.`,
     ...(canAnswer ? { acts: [{ key: ACT_KEY, options: [
       { key: 'lend', label: `Lend ${usd(b.amount_usd)}` }, { key: 'half', label: `Lend ${usd(half)}` }, { key: 'no', label: 'Say no' },

package/modules/hall-ui/public/ai-studio-lib.js

@@ -98,6 +98,48 @@
     }));
   }
 
+  // What a request will probably cost, from this builder's own finished ones
+  // paid the same way: the median of what we billed (ours) or of the cost the
+  // provider reported (their own key). max is the most one can ever cost on
+  // our key (max_cost_micro).
+  // typical is null when there is no history yet: the page then says so
+  // instead of inventing a number.
+  function estimate(requests, maxMicro, ours) {
+    const costs = (requests || [])
+      .filter((r) => r && r.status === 'done' && (r.key_source === 'ours') === !!ours)
+      .map((r) => (ours ? r.price_micro : r.provider_cost_micro))
+      .filter((n) => isMicro(n) && n > 0)
+      .sort((a, b) => a - b);
+    const max = isMicro(maxMicro) ? maxMicro : null;
+    if (!costs.length) return { typical: null, max, basis: 0 };
+    const mid = Math.floor(costs.length / 2);
+    const median = costs.length % 2 ? costs[mid] : Math.round((costs[mid - 1] + costs[mid]) / 2);
+    return { typical: max === null ? median : Math.min(median, max), max, basis: costs.length };
+  }
+
+  // Google reports no price on a builder's own Gemini key, so the page says
+  // "about" and works it out from Google's published rates: a written reply
+  // (gemini-2.5-pro, a few thousand tokens in and about a thousand out) and
+  // each picture (gemini-2.5-flash-image, about $0.039 each). The two numbers
+  // are named here and spelled nowhere else; update them if Google's change.
+  const GEMINI_REPLY_MICRO = 25000;
+  const GEMINI_IMAGE_MICRO = 39000;
+  function geminiEstimate(imageCount) {
+    const n = Math.max(1, Math.floor(Number(imageCount) || 0));
+    return GEMINI_REPLY_MICRO + n * GEMINI_IMAGE_MICRO;
+  }
+  const outputCount = (r) => ((r && r.files) || []).filter((f) => f.role === 'output').length;
+
+  // The headline cost on the result: one sentence an artist can read at a glance.
+  function costHeadline(req) {
+    const r = req || {};
+    if (r.status !== 'done') return '';
+    if (r.key_source === 'ours' && isMicro(r.price_micro)) return `This cost ${usd(r.price_micro)}, taken from your balance.`;
+    if (r.key_source === 'own' && isMicro(r.provider_cost_micro)) return `This cost ${usd(r.provider_cost_micro)}, billed to your own key.`;
+    if (r.key_source === 'own') return `This cost about ${usd(geminiEstimate(outputCount(r)))} on your Gemini key.`;
+    return '';
+  }
+
   // The prompt as one quoted line for step 3's summary row.
   function quoteLine(prompt, max) {
     const t = String(prompt || '').replace(/\s+/g, ' ').trim();
@@ -189,8 +231,8 @@
     }
     if (r.key_source === 'own') {
       return {
-        rows: [['Paid with', 'your own Gemini key'], ['Cost', 'not reported']],
-        note: "Google doesn't tell us the price on your own key, so check your Google bill. We charged nothing.",
+        rows: [['Paid with', 'your own Gemini key'], ['Cost', `about ${usd(geminiEstimate(outputCount(r)))}`]],
+        note: "Google doesn't tell us the exact price on your own key, so this is an estimate. Your Google bill has the real figure. We charged nothing.",
       };
     }
     return { rows: [], note: '' };
@@ -238,15 +280,38 @@
     }
   }
 
-  // The model's reply as paragraphs, **bold** kept, everything else escaped by
-  // the hall's ONE escaper, handed in (window.OTB.escapeHtml in the page).
+  // The model's reply read the way an artist wants to see it: headings as
+  // headings, bullets as a list, **bold** and `names` kept, divider dashes
+  // dropped, and any code listing folded away behind one line instead of
+  // pouring down the page. Every character of text goes through the hall's ONE
+  // escaper, handed in (window.OTB.escapeHtml in the page), before any tag is
+  // added.
   function replyHtml(md, escape) {
     const text = String(md || '').replace(/\r\n/g, '\n').trim();
     if (!text || typeof escape !== 'function') return '';
-    return text.split(/\n{2,}/).map((para) => {
-      const safe = escape(para.trim()).replace(/\*\*([^*\n]+)\*\*/g, '<b>$1</b>').replace(/\n/g, '<br>');
-      return `<p>${safe}</p>`;
-    }).join('');
+    const inline = (s) => escape(s).replace(/\*\*([^*\n]+)\*\*/g, '<b>$1</b>').replace(/`([^`\n]+)`/g, '<code>$1</code>');
+    const out = [];
+    let para = [];
+    let list = [];
+    let code = null;
+    const flushPara = () => { if (para.length) out.push(`<p>${para.map(inline).join('<br>')}</p>`); para = []; };
+    const flushList = () => { if (list.length) out.push(`<ul>${list.map((t) => `<li>${inline(t)}</li>`).join('')}</ul>`); list = []; };
+    for (const raw of text.split('\n')) {
+      const line = raw.trimEnd();
+      if (/^\s*```/.test(line)) {
+        if (code) { out.push(`<details class="ais-code"><summary>Code from the answer</summary><pre>${escape(code.join('\n'))}</pre></details>`); code = null; } else { flushPara(); flushList(); code = []; }
+        continue;
+      }
+      if (code) { code.push(raw); continue; }
+      const head = /^#{1,6}\s+(.+)$/.exec(line);
+      const item = /^\s*[*•-]\s+(.+)$/.exec(line);
+      if (!line.trim()) { flushPara(); flushList(); } else if (/^\s*-{2,}\s*$/.test(line)) { flushPara(); flushList(); } else if (head) {
+        flushPara(); flushList(); out.push(`<h3 class="ais-rh">${inline(head[1].replace(/\*\*/g, ''))}</h3>`);
+      } else if (item) { flushPara(); list.push(item[1]); } else { flushList(); para.push(line.trim()); }
+    }
+    if (code) out.push(`<details class="ais-code"><summary>Code from the answer</summary><pre>${escape(code.join('\n'))}</pre></details>`);
+    flushPara(); flushList();
+    return out.join('');
   }
 
   // The home's AI action line: the newest request, while it is being made or
@@ -266,7 +331,7 @@
 
   const lib = {
     MAX_FILES, MAX_IMAGE_BYTES, MAX_PDF_BYTES, IMAGE_TYPES, PDF_TYPE, STEPS, TOPUP_CHOICES, ANSWER_AFTER_SEC,
-    usd, balanceUsd, sizeText, routeOf, checkFile, isImage, stepMarks, quoteLine, ownKey, ownKeys, payChoices,
+    usd, balanceUsd, sizeText, routeOf, checkFile, isImage, stepMarks, quoteLine, ownKey, ownKeys, payChoices, estimate, geminiEstimate, costHeadline,
     waitSteps, clock, isFinished, receipt, againLine, monthSummary, ledgerLine, replyHtml, homeLine,
   };
   if (typeof module !== 'undefined' && module.exports) module.exports = lib;

package/modules/hall-ui/public/ai-studio.css

@@ -138,12 +138,24 @@
 .ais-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
 .ais-pick--on { outline: 2px solid var(--st-accent); outline-offset: 0; }
 .ais-reply p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--st-ink-sub); font-weight: 300; }
+.ais-rh { margin: 18px 0 6px; font-size: 16px; font-weight: 500; color: var(--st-ink); }
+.ais-reply ul { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--st-ink-sub); font-weight: 300; }
+.ais-reply code { font-size: 13.5px; }
+.ais-code { margin: 0 0 12px; font-size: 13.5px; color: var(--st-ink-faint); }
+.ais-code summary { cursor: pointer; min-height: 24px; }
+.ais-code pre { margin: 8px 0 0; padding: 12px; overflow-x: auto; border-radius: 12px; background: var(--st-glass); white-space: pre; }
 .ais-reply b { color: var(--st-ink); font-weight: 500; }
 .ais-again { display: flex; flex-direction: column; gap: 8px; }
 .ais-receipt, .ais-topup {
   display: flex; flex-direction: column; padding: 10px 20px; border-radius: 22px;
   background: var(--st-glass); border: 1px solid var(--st-glass-edge);
 }
+.ais-confirm {
+  display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-radius: 22px;
+  background: var(--st-glass); border: 1px solid var(--st-glass-edge);
+}
+.ais-confirm__head { margin: 0; font-size: 20px; font-weight: 500; color: var(--st-ink); }
+.ais-cost { margin: 0 0 12px; font-size: 17px; font-weight: 500; color: var(--st-ink); }
 .ais-line { display: flex; align-items: center; gap: 14px; min-height: 40px; border-top: 1px solid var(--st-track); font-size: 14px; color: var(--st-ink); }
 .ais-line:first-child, .ais-head + .ais-line { border-top: 0; }
 .ais-line a { color: var(--st-link); display: inline-flex; align-items: center; min-height: 24px; }

package/modules/hall-ui/public/ai-studio.js

@@ -352,13 +352,47 @@
       <h1 class="ais-ask" data-head tabindex="-1">How do you want to pay?</h1>
       <div class="ais-row ais-row--summary">${thumbs}<span class="ais-grow ais-soft">${esc(lib.quoteLine(state.draft.prompt))}</span><a class="ais-link" href="/builders/ai-studio?step=describe" data-nav="step=describe">change</a></div>
       ${ownCard || balanceCard ? `<div class="ais-cards">${ownCard}${balanceCard}</div>` : ''}
+      <div class="ais-confirm" id="ais-confirm" role="group" aria-label="Confirm the cost" hidden></div>
       <p class="ais-faint">${esc(foot)}</p>
       ${extra}
       <p class="ais-err" id="ais-err" role="alert" hidden></p>`;
-    page.querySelectorAll('[data-pay]').forEach((b) => b.addEventListener('click', () => sendRequest(b.getAttribute('data-pay'), state.draft.prompt, readyFiles(), b)));
+    page.querySelectorAll('[data-pay]').forEach((b) => b.addEventListener('click', () => askToConfirm(b.getAttribute('data-pay'), c)));
     wireNavLinks();
   }
 
+  // Before anything is sent or set aside: say what it will probably cost and
+  // wait for a yes. Past runs set the guess; the ceiling is what a run can
+  // never exceed.
+  async function askToConfirm(payWith, choices) {
+    if (state.busy) return;
+    const own = payWith !== 'ours';
+    if (payWith !== 'gemini' && !state.history) {
+      const res = await api.request('GET', `${API}/ai-studio/requests`);
+      state.history = res.ok && res.data ? res.data.requests : [];
+    }
+    const est = lib.estimate(state.history || [], state.balance && state.balance.max_cost_micro, !own);
+    const typical = payWith === 'gemini' ? lib.geminiEstimate(1) : est.typical;
+    const guess = typical === null ? 'A few cents' : `About ${lib.usd(typical)}`;
+    const ceiling = own || est.max === null ? '' : `It will never cost more than ${lib.usd(est.max)}.`;
+    const who = own ? 'Your own key pays, so nothing comes out of your balance here.' : `Taken from your balance (${choices.left}), and anything unused comes back.`;
+    const basis = payWith === 'gemini' ? 'Google reports no price on your own key, so this is worked out from its published rates: one reply and one picture.' : est.basis ? `Based on your last ${est.basis === 1 ? 'request' : `${est.basis} requests`}.` : 'You have no finished requests yet, so this is a rough guess.';
+    const box = page.querySelector('#ais-confirm');
+    if (!box) return;
+    box.hidden = false;
+    box.innerHTML = `
+      <h2 class="ais-confirm__head" data-confirm-head tabindex="-1">${esc(guess)} to make this</h2>
+      <p class="ais-soft">${esc([ceiling, who].filter(Boolean).join(' '))}</p>
+      <p class="ais-faint">${esc(basis)}</p>
+      <div class="ais-go ais-go--wrap">
+        <button type="button" class="ais-btn" id="ais-confirm-go">Make it</button>
+        <button type="button" class="ais-ghost" id="ais-confirm-cancel">Not yet</button>
+      </div>`;
+    const head = box.querySelector('[data-confirm-head]');
+    if (head) head.focus();
+    box.querySelector('#ais-confirm-cancel').addEventListener('click', () => { box.hidden = true; box.innerHTML = ''; });
+    box.querySelector('#ais-confirm-go').addEventListener('click', (ev) => sendRequest(payWith, state.draft.prompt, readyFiles(), ev.currentTarget));
+  }
+
   // Same-page links move through history, so the steps keep the back button.
   function wireNavLinks() {
     page.querySelectorAll('[data-nav]').forEach((a) => a.addEventListener('click', (ev) => {
@@ -465,6 +499,7 @@
     const rc = lib.receipt(req, state.balance && state.balance.price_multiplier);
     const receiptHtml = rc.rows.length ? `<div class="ais-receipt">${rc.rows.map(([k, v]) => `<div class="ais-line"><span class="ais-grow">${esc(k)}</span><span>${esc(v)}</span></div>`).join('')}${rc.note ? `<div class="ais-line"><span class="ais-grow ais-faint ais-wrap">${esc(rc.note)}</span></div>` : ''}</div>` : '';
     const failed = req.status !== 'done';
+    const headline = lib.costHeadline(req);
     main.setAttribute('data-view', 'result');
     page.innerHTML = `
       <h1 class="ais-sr" data-head tabindex="-1">${failed ? 'That did not work' : 'Your result'}</h1>
@@ -476,6 +511,7 @@
         </div>
         <div class="ais-result__words">
           ${failed ? `<p class="ais-err">${esc(req.error || 'It did not work, and nothing was charged.')}</p>` : ''}
+          ${headline ? `<p class="ais-cost" data-cost>${esc(headline)}</p>` : ''}
           <div class="ais-reply">${lib.replyHtml(req.reply_md, esc)}</div>
           <div class="ais-again">
             <label class="ais-head" for="ais-again">Your request</label>

package/modules/hall-ui/public/city-decide.js

@@ -83,6 +83,7 @@
     var lines = ['I need to make a decision in my project and want help understanding it.', ''];
     lines.push('Where: the ' + str(cv.buildingName) + ' building' + (cv.waits ? ' (' + str(cv.waits) + ')' : '') + '.');
     lines.push('The question: ' + str(cv.question));
+    if (cv.context) lines.push('What it is: ' + str(cv.context));
     if (cv.said) lines.push('What it says: ' + str(cv.said));
     var card = cv.card || {};
     var more = card.more && card.more.text ? str(card.more.text) : str(card.fact || '');
@@ -255,8 +256,10 @@
   function drawCard(doc, K, cv, on, o) {
     var shown = answerable(cv);
     var matter = matterOf(on.docket && on.docket(), cv.id);
-    // the question in full: a matter with no stored card is titled by its own words, cut to fit the deck
-    if (matter && !cv.askReal && matter.title) shown.question = questionOf(matter.title);
+    // the question in full: a matter with no stored card asks its own plain question
+    // when it wrote one (task 1005013), else is titled by its own words, cut to fit the deck
+    if (matter && !cv.askReal && matter.question) shown.question = questionOf(matter.question);
+    else if (matter && !cv.askReal && matter.title) shown.question = questionOf(matter.title);
     var art = K.drawAsk(doc, shown, on, o);
     // and everything else it says, one tap away rather than cut
     var full = fullText(matter, shown);

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

@@ -231,6 +231,7 @@ html[data-fullscreen="on"] .city-top { right: 184px; }
 .city-card .city-ask.ask { padding: 14px 16px; gap: 10px; }
 .city-card .city-ask .ask__q { font-size: 17px; line-height: 1.3; font-weight: 400; }
 .city-card .city-ask .ask__said { font-size: 13px; }
+.city-card .city-ask .ask__ctx { font-size: 13px; line-height: 1.45; }
 .city-card .city-ask .ask__opt { min-height: 44px; padding: 6px 12px 6px 10px; border-radius: 14px; }
 .city-card .city-ask .ask__label { font-size: 14px; }
 .city-card .city-ask .ask__result { font-size: 12px; }

package/modules/hall-ui/public/gov-living.js

@@ -338,6 +338,9 @@
 
   // ---------- one ask card ----------
   const STATE_ORDER = Object.freeze({ needs: 1, moving: 2, settled: 3 });
+  // a blocker read straight from GET /blockers carries no docket context; this is
+  // the docket's own sentence for one (modules/government/docket.js SOURCE_CONTEXT)
+  const BLOCKER_CONTEXT = 'A blocker: work that cannot go on until a person decides something. Deciding it releases the work that waits on it.';
   function makeAsk(base, human, ctx, sources) {
     const opened = time(base.opened_at);
     const deadline = time(base.deadline);
@@ -375,7 +378,8 @@
       href: base.href || null,
       acts: base.acts || [],
       tally: base.tally || null,
-      raw: { title: str(base.raw_title), detail: str(base.raw_detail), slop: slopScore(rawText) },
+      // what the card is about and the plain question it asks (task 1005013)
+      raw: { title: str(base.raw_title), detail: str(base.raw_detail), slop: slopScore(rawText), context: str(base.raw_context), question: str(base.raw_question) },
       human: human || null,
       format,
       shown: format.ok ? human : null,
@@ -661,7 +665,7 @@
       const stored = storedOf(m.ask);
       asks.push(makeAsk({
         id: m.id, source: m.source, building, state: m.state, opened_at: m.opened_at, deadline: m.deadline,
-        rule: m.rule, ref: m.ref, href: m.href, acts: m.acts, tally: m.tally, raw_title: m.title, raw_detail: m.detail, from_docket: true, ask_real: !!stored, route: m.route,
+        rule: m.rule, ref: m.ref, href: m.href, acts: m.acts, tally: m.tally, raw_title: m.title, raw_detail: m.detail, raw_context: m.context, raw_question: m.question, from_docket: true, ask_real: !!stored, route: m.route,
       }, humanOf(stored), ctx, ASK_SOURCES));
     });
     arr(o.blockers, 'blockers').forEach((b) => {
@@ -672,7 +676,7 @@
       const stored = storedOf(b.ask);
       asks.push(makeAsk({
         id, source: 'blockers', building: 'planning', state: 'needs', opened_at: b.created_at, deadline: null,
-        rule: 'decide', ref: { type: 'blocker', id: String(b.id) }, href: '/blockers#blocker-' + b.id, acts: [], raw_title: b.title, raw_detail: b.body_md, ask_real: !!stored,
+        rule: 'decide', ref: { type: 'blocker', id: String(b.id) }, href: '/blockers#blocker-' + b.id, acts: [], raw_title: b.title, raw_detail: b.body_md, raw_context: BLOCKER_CONTEXT, ask_real: !!stored,
       }, humanOf(stored), ctx, ASK_SOURCES));
     });
     asks.sort(compareAsks);

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

@@ -52,3 +52,46 @@
   font-size: 11.5px;
   color: var(--ink-faint);
 }
+
+/* ---- the circuit divider (task 1005032, the owner's Studio idea 1001297; mock:
+   docs/design/mocks/builders-leaderboard/) -----------------------------------
+   A trace between the column headings and the first row: a fixed cap at each
+   end, a hairline stretched between them, and orange nodes on the traces. It is
+   drawn on the FIRST BODY ROW (its top 30px, which the row's own top padding
+   makes room for) rather than under the sticky heading, so it scrolls with the
+   rows and never strands a blank band under a stuck header. Two masks, two
+   tokens: the traces are --ink-faint, the nodes --accent, so both modes follow
+   the world. The empty-state row has no trace. Pure decoration, no markup. */
+#roster-body .ledger th { border-bottom-color: transparent; }
+#roster-body .ledger tbody tr:first-child:not(:has(.ledger__empty)) { position: relative; }
+#roster-body .ledger tbody tr:first-child:not(:has(.ledger__empty)) td { padding-top: 44px; }
+#roster-body .ledger tbody tr:first-child:not(:has(.ledger__empty)) td:first-child::before,
+#roster-body .ledger tbody tr:first-child:not(:has(.ledger__empty)) td:first-child::after {
+  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px;
+  pointer-events: none;
+  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
+}
+#roster-body .ledger tbody tr:first-child:not(:has(.ledger__empty)) td:first-child::before {
+  background: var(--ink-faint);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18H88V6H100V14H156V18H300'/%3E%3Cpath stroke-opacity='.55' stroke-width='1.2' d='M12 22H80M104 12H124M132 14H152M160 16H180M92 10V24'/%3E%3C/g%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg transform='matrix(-1 0 0 1 300 0)' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18H88V22H168V28H196V18H300'/%3E%3Cpath stroke-opacity='.55' stroke-width='1.2' d='M12 14H70M110 10H128M136 16H160M170 4V14M200 8V24'/%3E%3C/g%3E%3C/svg%3E"),
+    linear-gradient(black, black);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18H88V6H100V14H156V18H300'/%3E%3Cpath stroke-opacity='.55' stroke-width='1.2' d='M12 22H80M104 12H124M132 14H152M160 16H180M92 10V24'/%3E%3C/g%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg transform='matrix(-1 0 0 1 300 0)' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 18H88V22H168V28H196V18H300'/%3E%3Cpath stroke-opacity='.55' stroke-width='1.2' d='M12 14H70M110 10H128M136 16H160M170 4V14M200 8V24'/%3E%3C/g%3E%3C/svg%3E"),
+    linear-gradient(black, black);
+  -webkit-mask-size: 300px 30px, 300px 30px, calc(100% - 598px) 1.5px;
+  mask-size: 300px 30px, 300px 30px, calc(100% - 598px) 1.5px;
+  -webkit-mask-position: left top, right top, 299px 17.25px;
+  mask-position: left top, right top, 299px 17.25px;
+}
+#roster-body .ledger tbody tr:first-child:not(:has(.ledger__empty)) td:first-child::after {
+  background: var(--accent);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg fill='black'%3E%3Ccircle cx='6' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='88' cy='6' r='7' fill-opacity='.25'/%3E%3Ccircle cx='296' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='6' cy='18' r='3.5'/%3E%3Ccircle cx='88' cy='6' r='3.5'/%3E%3Ccircle cx='296' cy='18' r='3.5'/%3E%3C/g%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg transform='matrix(-1 0 0 1 300 0)' fill='black'%3E%3Ccircle cx='6' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='196' cy='28' r='7' fill-opacity='.25'/%3E%3Ccircle cx='296' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='6' cy='18' r='3.5'/%3E%3Ccircle cx='196' cy='28' r='3.5'/%3E%3Ccircle cx='296' cy='18' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg fill='black'%3E%3Ccircle cx='6' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='88' cy='6' r='7' fill-opacity='.25'/%3E%3Ccircle cx='296' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='6' cy='18' r='3.5'/%3E%3Ccircle cx='88' cy='6' r='3.5'/%3E%3Ccircle cx='296' cy='18' r='3.5'/%3E%3C/g%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cg transform='matrix(-1 0 0 1 300 0)' fill='black'%3E%3Ccircle cx='6' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='196' cy='28' r='7' fill-opacity='.25'/%3E%3Ccircle cx='296' cy='18' r='7' fill-opacity='.25'/%3E%3Ccircle cx='6' cy='18' r='3.5'/%3E%3Ccircle cx='196' cy='28' r='3.5'/%3E%3Ccircle cx='296' cy='18' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
+  -webkit-mask-size: 300px 30px, 300px 30px;
+  mask-size: 300px 30px, 300px 30px;
+  -webkit-mask-position: left top, right top;
+  mask-position: left top, right top;
+}

package/modules/hall-ui/public/street-deck.css

@@ -123,6 +123,8 @@ body[data-page="street"] .street-toast { z-index: 13; }
    it is not a control, so it draws no ring */
 .ask__q:focus, .ask__q:focus-visible { outline: none; box-shadow: none; }
 .ask__said { margin: -4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
+/* what the card is about, under its question (task 1005013) */
+.ask__ctx { margin: -4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
 .ask__likes { margin: -2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
 .ask__likes li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
 .ask__likes li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--ink-faint); }
@@ -160,6 +162,7 @@ body[data-page="street"] .street-toast { z-index: 13; }
 .ask--here { gap: 14px; padding: 18px 18px 16px; border-radius: 22px; background: var(--gov-chip); border: 1px solid var(--gov-chip-edge); }
 .ask--here .ask__q { font-size: 23px; }
 .ask--here .ask__said { font-size: 14.5px; }
+.ask--here .ask__ctx { font-size: 14px; }
 .ask--here .ask__opt { min-height: 54px; border-radius: 15px; }
 
 /* a building's card on the street: glass beside its pin */

package/modules/hall-ui/public/street-deck.js

@@ -213,11 +213,14 @@
       routing: shown && shown.routing_note ? str(shown.routing_note) : '', tally: ask.tally || null, kind: ask.kind || null,
       // a board's vote shows its seats, one pip each, lit as the sitting's tally says
       seats: boardSeats(c.docket, ask.waits_on ? str(ask.waits_on.seat) : ''),
+      // what this is and what it belongs to, in plain words (task 1005013)
+      context: ask.raw ? plain(ask.raw.context) : '',
       card: cv,
     };
     if (!shown) {
       // no stored ask: the matter in its own words, and its floor's desk, where its acts are
-      view.question = fit(plain(ask.raw ? ask.raw.title : ''), 90);
+      // the matter's own plain question when it wrote one, else its title (task 1005013)
+      view.question = ask.raw && ask.raw.question ? fit(plain(ask.raw.question), 120) : fit(plain(ask.raw ? ask.raw.title : ''), 90);
       view.desk = '/builders/street#building=' + str(ask.building);
       view.foot = footOf(ask, '');
       return view;
@@ -436,6 +439,7 @@
     q.setAttribute('tabindex', '-1');
     if (o.qid) q.setAttribute('id', o.qid);
     card.appendChild(q);
+    if (cv.context) card.appendChild(h('p', 'ask__ctx', cv.context));
     if (cv.batch && cv.likes) {
       const list = h('ul', 'ask__likes');
       cv.likes.forEach((l) => list.appendChild(h('li', '', l.question)));

package/modules/hall-ui/records/builders-roster.md

@@ -28,3 +28,12 @@ Pinned by `tests/leaderboard_roles.mjs` (the read, the route, the REAL roster.js
 - **The roster keeps its live columns**: place with the builder's number, rank, karma and tokens, the founding mark and the laurels, and its search and sort lenses. The mock draws the leaderboard bare; the live hall's chrome wins (the blend rule).
 - **The column is "Roles", not "Preferred roles"**: it lists roles the builder has earned in as well as the one they chose, so "preferred" would understate it.
 - **The status page has the roles but not the toggle.** It is a one-glance public dashboard of the top builders on its own palette; the toggle lives on the roster, which is the leaderboard a builder works from.
+
+## The circuit divider (task 1005032)
+
+The owner's Studio idea 1001297 (a circuit-trace image as a table divider; mock `docs/design/mocks/builders-leaderboard/`, task 1005030) now sits between the roster's column headings and its first row. It is **CSS only, in `roster.css`**: the ledger kit is untouched and no markup was added.
+
+- **It is drawn on the first BODY row, not under the sticky heading.** A divider hung under the sticky `th` would stay stuck while the rows scrolled away, leaving a blank band; on the first row it scrolls with the data. The row's top padding makes room for it.
+- **The pseudo-elements sit on the row's first `td`, never on the `tr`.** On the `tr` they became two extra table cells and pushed every cell in the row two columns right (seen in the first render). The `tr` only carries `position: relative`, so the `td`'s absolute children size against the whole row.
+- **Two masks, two tokens.** Traces are `--ink-faint` and the orange nodes `--accent`, each shown through an SVG mask, so light and dark follow the world with no hard-coded colour. Left cap, right cap and the stretching hairline are three layers of one mask.
+- **The empty-state row has no trace** (`:not(:has(.ledger__empty))`). Checked at desktop and 375px, light and dark: the table scrolls inside its card on a phone and the divider spans it; the page does not scroll sideways.

package/modules/ideas/governor-docket.js

@@ -45,6 +45,9 @@ function blockerDocketMatter(b, mayResolve) {
     tally: null,
     href: `/blockers#blocker-${b.id}`,
     ref: { type: 'blocker', id: b.id },
+    context: holds
+      ? `A blocker: ${holds === 1 ? 'one task is' : `${holds} tasks are`} stopped until a person decides this. Deciding it lets that work go on.`
+      : 'A blocker: an AI session or a builder is stuck until a person decides this. Deciding it lets the work go on.',
     // the card's "more" (task 1004566): the body GET /blockers shows everyone
     detail: b.body_md || null,
     // the floor desk's one act (task 1004560): decide, by one of its options

package/modules/lifecycle/governor-docket.js

@@ -41,6 +41,8 @@ function overrideMatter(r, mayDecide) {
     tally: null,
     href: `/task/${encodeURIComponent(r.task_id)}`,
     ref: { type: 'override_request', id: r.id },
+    question: 'Let this work through although it failed its check?',
+    context: `${r.requester_display_name || r.requester_login || 'A builder'} asks to let the task "${r.task_title || r.task_id}" through. Its automatic check or grade failed it, so it cannot land on its own. Approving treats the work as passed; holding it keeps it out until it is fixed.`,
     // the card's "more" (task 1004566): the reason GET /override-requests shows
     detail: r.rationale || null,
   };
@@ -60,6 +62,8 @@ function removalMatter(r) {
     tally: null,
     href: `/task/${encodeURIComponent(r.proposal_task_id)}`,
     ref: { type: 'task', id: r.proposal_task_id },
+    question: 'Is this shipped work really gone?',
+    context: `A later change deleted files that earlier shipped work put there${r.goal_title ? `, in the goal "${r.goal_title}"` : ''}. Moves and rewrites can look like deletions, so a person decides: Remove means that work no longer counts as alive; Keep means it still does. Nothing is undone either way.`,
     // the card's "more" (task 1004566): the proposal's own text, from the same read
     detail: r.description || null,
     // POST /removal-proposals/:id/decide, the docket source's own atom (task 1004559)
@@ -84,12 +88,31 @@ function uatActs(c, { force = false } = {}) {
   return acts;
 }
 
+// What a Review card says (task 1005013): the promise in quotes, the goal it
+// belongs to, that its work shipped, and what the sign-off closes. Pure.
+function quoteOf(md) {
+  // the promise's own last full stop goes: the sentence around it supplies one
+  const t = String(md || '').replace(/[*_`#>]+/g, '').replace(/\s+/g, ' ').trim().replace(/\.+$/, '');
+  return t.length <= 220 ? t : t.slice(0, 219).replace(/\s+\S*$/, '') + '…';
+}
+function uatContext(c) {
+  const n = Number(c.shipped_total) || 0;
+  const goal = c.goal_title ? `the goal "${c.goal_title}"` : 'this version';
+  const built = n === 1 ? 'The one task built for it has shipped.' : n > 1 ? `All ${n} tasks built for it have shipped.` : 'Its work has shipped.';
+  const how = c.backend_only === true
+    ? 'It has nothing to see on screen, so check it works and sign it off.'
+    : "Try it on the live site, then record a short video of it working and sign it off on the goal's page.";
+  return `The promise: "${quoteOf(c.criterion_md)}". It is one of the done-when promises of ${goal}. ${built} ${how} That closes the promise; the goal is achieved once all its promises are closed.`;
+}
+
 function uatMatter(c, opts) {
   return {
     id: c.id,
     rule: 'signoff',
     state: 'needs',
     title: c.criterion_md,
+    question: c.backend_only === true ? 'Is this promise kept? Check it and sign it off.' : 'Does this work on the live site now?',
+    context: uatContext(c),
     short: 'waiting for a tester',
     where: c.goal_title ? `review · ${c.goal_title}` : 'review · a promise to sign off',
     opened_at: null,
@@ -118,6 +141,9 @@ function joinRequestMatter(r, mine) {
     tally: null,
     href: r.goal_id ? `/goals#/goal/${encodeURIComponent(r.goal_id)}` : '/goals',
     ref: { type: 'goal_membership_request', id: r.id },
+    context: mine
+      ? `You asked to join the team of the goal "${r.goal_title || r.goal_id}". Its lead decides; once you are in, you can claim its tasks.`
+      : `${r.display_name || r.github_login || 'Someone'} asks to join the team of the goal "${r.goal_title || r.goal_id}". Members of a goal may claim its tasks; its lead decides who joins.`,
   };
 }
 

package/modules/onboarding/routes/access-requests.js

@@ -258,6 +258,8 @@ function accessRequestDocketMatter(r) {
     tally: null,
     href: '/watch',
     ref: { type: 'access_request', id: r.id },
+    question: `Let ${r.display_name || r.github_login} join this project?`,
+    context: `${r.display_name || r.github_login} (GitHub: ${r.github_login}) asked to join this project as a builder${r.vouched ? ', signed in through Bongos so the name is really theirs' : ''}. Admitting them lets them sign in and claim work; declining keeps them out.`,
     // the card's "more" (task 1004566): their note, as GET /access-requests shows it
     detail: r.note || null,
   };

package/modules/security/routes/reports.js

@@ -56,6 +56,8 @@ function redteamDocketMatter(r) {
     tally: null,
     href: '/watch',
     ref: { type: 'vulnerability_report', id: r.id },
+    question: 'Is this security flaw real?',
+    context: `A security report: someone found what they say is a flaw in this project itself${r.target ? ` (in ${r.target})` : ''}${r.severity ? `, rated ${r.severity}` : ''}. "${r.title}". ${r.status === 'repro_attempted' ? 'Someone has tried to reproduce it. ' : ''}Confirm it if it is real, so it is fixed and the reporter earns the bounty; dispute it if it is not.`,
     // the card's "more" (task 1004566): what GET /security/reports shows this
     // same atom — what it targets and the report's description
     detail: [r.target ? `Target: ${r.target}` : '', r.description || ''].filter(Boolean).join('\n\n') || null,