@bongos/core 1.24.79 → 1.24.80

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

@@ -0,0 +1,80 @@
+/* visor.css — the first-person visor (task 1005148, visor.js; ADR 0399). Glass over the scene:
+   the frame lines, the place, three pills and the actions sheet. It shows in game mode only, and
+   it is an overlay, never layout, so the stage under it never changes size (ADR 0399 §2.1).
+   Colours are the hall's tokens; the frame is hairline ink, never a glow (DESIGN.md: no
+   near-black-plus-neon HUD). Record: modules/hall-ui/records/visor.md. */
+.visor { display: none; }
+html[data-game="on"] .visor:not([hidden]) {
+  display: block; position: fixed; inset: 0; z-index: 4; pointer-events: none;
+  /* where the glass sits, so a scene's pop-up can keep clear of it (ADR 0399 §2.3) */
+  --visor-inset-top: 64px; --visor-inset-right: 40px; --visor-inset-bottom: 76px; --visor-inset-left: 40px;
+  color: var(--ink); font-family: var(--font-body);
+}
+
+/* the frame: stretched over the stage, every stroke one hairline at any size */
+.visor__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.visor__frame path { vector-effect: non-scaling-stroke; }
+.visor__line { fill: none; stroke: var(--rule); stroke-width: var(--ds-line); }
+.visor__line--side { stroke: var(--rule-soft); }
+.visor__cell { fill: color-mix(in srgb, var(--ink) 12%, transparent); stroke: var(--rule); stroke-width: var(--ds-line); }
+.visor__mark { fill: var(--accent); stroke: none; }
+
+/* the place, under the compass */
+.visor__place {
+  position: absolute; left: 50%; top: max(9.5%, 84px); transform: translateX(-50%); margin: 0;
+  font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .14em; text-transform: uppercase;
+  color: var(--ink-soft); white-space: nowrap;
+}
+
+/* the pills: the only parts of the glass that take a pointer */
+.visor__pill, .visor__me {
+  position: absolute; pointer-events: auto; box-sizing: border-box;
+  display: inline-flex; align-items: center; gap: var(--ds-space-xs);
+  min-height: 46px; padding: 0 var(--ds-space-sm);
+  background: var(--bg-card); color: var(--ink); border: var(--ds-line) solid var(--rule);
+  border-radius: var(--ds-radius-pill); font: inherit; font-size: var(--ds-text-sm); text-decoration: none;
+}
+.visor__pill { cursor: pointer; }
+.visor__pill:hover { border-color: var(--ink-faint); }
+.visor__pill:focus-visible, .visor__row:focus-visible, .visor__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.visor__pill--main { left: var(--visor-inset-left); bottom: var(--visor-inset-bottom); background: var(--accent); color: var(--accent-on); border-color: var(--accent); font-weight: 500; }
+.visor__pill--main:hover { border-color: var(--accent-deep); }
+.visor__pill--actions { right: var(--visor-inset-right); top: var(--visor-inset-top); }
+.visor__pill[hidden] { display: none; }
+.visor__dots { width: 14px; height: 4px; background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0 / 5px 4px repeat-x; }
+.visor__me { right: var(--visor-inset-right); bottom: var(--visor-inset-bottom); padding: 4px var(--ds-space-sm) 4px 4px; pointer-events: none; }
+.visor__sprite { width: 38px; height: 38px; border-radius: var(--ds-radius-pill); object-fit: cover; object-position: 50% 12%; background: var(--bg-deep); }
+.visor__who { display: flex; flex-direction: column; line-height: 1.2; }
+.visor__name { font-weight: 500; }
+.visor__credits { font-size: var(--ds-text-2xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.visor__key {
+  font-family: var(--font-mono); font-size: var(--ds-text-2xs); line-height: 1; padding: 3px 5px;
+  border: var(--ds-line) solid currentColor; border-radius: var(--ds-radius-pill); opacity: .75;
+}
+
+/* the sheet: above the scene's pop-ups, under the modals (ADR 0399 §2.3 layer 4) */
+.visor__sheet {
+  position: absolute; right: var(--visor-inset-right); top: var(--visor-inset-top); z-index: 1;
+  pointer-events: auto; box-sizing: border-box; width: min(18rem, calc(100vw - 2 * var(--ds-space-gutter-narrow)));
+  max-height: calc(100% - var(--visor-inset-top) - var(--visor-inset-bottom)); overflow-y: auto;
+  padding: var(--ds-space-sm); background: var(--bg-card); border: var(--ds-line) solid var(--rule);
+  border-radius: var(--ds-radius-panel); box-shadow: var(--ds-shadow-pop);
+}
+.visor__sheet-head { display: flex; align-items: center; justify-content: space-between; }
+.visor__sheet-title { margin: 0; font-size: var(--ds-text-md); font-weight: 500; }
+.visor__close { min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; }
+.visor__cap { margin: var(--ds-space-xs) 0 2px; font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
+.visor__rows { list-style: none; margin: 0; padding: 0; }
+.visor__rows + .visor__rows { margin-top: var(--ds-space-xs); }
+.visor__row {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-xs);
+  box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 2px;
+  background: none; border: 0; border-top: var(--ds-line) solid var(--rule-soft);
+  color: var(--ink); font: inherit; font-size: var(--ds-text-sm); text-align: left; text-decoration: none; cursor: pointer;
+}
+.visor__row:hover { color: var(--accent-deep); }
+.visor__row--hint { cursor: default; color: var(--ink-soft); }
+.visor__row--hint:hover { color: var(--ink-soft); }
+
+/* a phone (640px and narrower): the rules live in style.css’s shared phone block, so the
+   visor adds no breakpoint of its own (the design-count ratchet). */

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

@@ -0,0 +1,316 @@
+// visor.js — the first-person visor: glass over the scene (task 1005148, BONGOS-V3 R08,
+// goal 1000142, criterion `you-are-a-character-in-first-person`). Built to ADR 0399.
+//
+// What is on the glass (the design the owner agreed on 2026-11-10, task 1005148):
+//   - the frame: thin curved visor lines at the top, the bottom and both sides, a small
+//     centre cross, and a compass of nine slanted cells along the top line with the one
+//     salmon marker under its centre. Drawn once as SVG; it is ornament, never a control.
+//   - the place, in a mono line under the compass ("THE SKY", "GOVERNOR CITY", …).
+//   - bottom-left: your character's main action, the one accent pill, with its key.
+//   - bottom-right: your sprite (third person) with your character's name and your credits
+//     (builders.total_credits — credits only, never a payout; the spec's "does not exist").
+//   - top-right: "Actions" (key A), which opens the sheet: your character's actions, then
+//     the keys of the place you are in, then Options on Escape.
+//
+// The rules it keeps (ADR 0399):
+//   - one overlay, #visor, with pointer-events: none; only its pills take a pointer, so a
+//     drag, a wheel or a click on the world reaches the scene unchanged (§2.1).
+//   - no camera: a scene registers itself once with OTBVisor.scene({ name, place, actions,
+//     keys }) and a movement action calls the scene's own function (§2.2). A page with no
+//     scene registered shows no visor.
+//   - Escape (§2.4): an OPEN SHEET takes the press in capture and stops it (row 4), so the
+//     star under it stays picked; the ambient glass never takes one, so the last press
+//     still reaches the options menu (shell-game.js onEscape).
+//   - it hides nothing and gates nothing (§2.5): every action is a link or tool a page
+//     already offers, and the server's rank checks answer exactly as before.
+//   - game mode only: html[data-game="on"] shows it (visor.css). Outside it, the hall is
+//     exactly as it was.
+//
+// The character comes from craft-mode.js (task 1005147): the held character, or this
+// session's mode on a core that has no characters yet. With neither, no visor.
+// R09 (task 1005149) turns the keys below into the one rebindable registry.
+(function () {
+  'use strict';
+
+  // ---------- each character's actions ----------
+  // `href` opens a page the hall already has; `tool` opens one of craft-mode's tools on
+  // this page. The first is the character's main action (the accent pill).
+  var ACTIONS = {
+    artisan: [
+      { id: 'claim', label: 'Claim a task', key: 'c', href: '/work' },
+      { id: 'blockers', label: 'Blockers', key: 'b', href: '/blockers' },
+      { id: 'sky', label: 'Goal sky', key: 'g', href: '/goal-map' },
+      { id: 'thinking', label: 'Your thinking', key: 't', href: '/thinking' },
+    ],
+    artist: [
+      { id: 'review', label: 'Review this page', key: 'r', tool: 'palette' },
+      { id: 'words', label: 'Edit its words', key: 'e', tool: 'paintbrush' },
+      { id: 'idea', label: 'Write an idea', key: 'i', tool: 'lightbulb' },
+      { id: 'studio', label: 'Studio', key: 's', href: '/studio' },
+    ],
+    patron: [
+      { id: 'board', label: 'Board room', key: 'o', href: '/board-room' },
+      { id: 'city', label: 'Governor city', key: 'v', href: '/city' },
+      { id: 'blockers', label: 'Blockers', key: 'b', href: '/blockers' },
+      { id: 'watch', label: 'Watch', key: 'w', href: '/watch' },
+    ],
+  };
+  var SHEET_KEY = 'a';
+  var NAMES = { artisan: 'Artisan', artist: 'Artist', patron: 'Patron' };
+
+  function esc(v) { return window.OTB && window.OTB.escapeHtml ? window.OTB.escapeHtml(v) : String(v == null ? '' : v).replace(/[^\w .,:'-]/g, ''); }
+  function craft() { return window.OTBCraftMode || null; }
+  // The character on the glass: the held one, else this session's mode, else none.
+  function character() {
+    var C = craft();
+    if (!C) return null;
+    var held = typeof C.character === 'function' ? C.character() : undefined;
+    if (typeof held === 'string' && ACTIONS[held]) return held;
+    var mode = typeof C.current === 'function' ? C.current() : null;
+    return ACTIONS[mode] ? mode : null;
+  }
+  function actionsFor(id) { return ACTIONS[id] ? ACTIONS[id].slice() : []; }
+  function credits() {
+    var C = craft();
+    var me = C && typeof C.me === 'function' ? C.me() : null;
+    var n = me && me.builder ? Number(me.builder.total_credits) : NaN;
+    return isFinite(n) ? n : null;
+  }
+  function creditsText(n) {
+    if (n == null) return '';
+    var v = Math.round(n);
+    var s = String(Math.abs(v)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return (v < 0 ? '−' : '') + s + (Math.abs(v) === 1 ? ' credit' : ' credits');
+  }
+  // A link on the hall's own host: '/work' on the builders host, '/builders/work' on the apex.
+  function hallHref(p) {
+    var here = String((window.location && window.location.pathname) || '');
+    return (here.indexOf('/builders/') === 0 || here === '/builders' ? '/builders' : '') + p;
+  }
+
+  // ---------- the scene ----------
+  var scene = null;
+  // A scene says what it is and, if it has a camera, the actions that move it (ADR 0399
+  // §2.2). `keys` are lines for the sheet's "this place" list: keys the scene already binds.
+  function registerScene(s) {
+    if (!s || typeof s !== 'object') return;
+    scene = {
+      name: String(s.name || ''),
+      place: String(s.place || ''),
+      actions: (Array.isArray(s.actions) ? s.actions : []).filter(function (a) { return a && a.label && typeof a.run === 'function'; }),
+      keys: (Array.isArray(s.keys) ? s.keys : []).filter(function (k) { return k && k.label && k.key; }),
+    };
+    render();
+  }
+
+  // ---------- drawing ----------
+  var root = null, sheet = null, returnFocus = null;
+  var NS = 'http://www.w3.org/2000/svg';
+  // The frame is drawn in a 1000×1000 box stretched over the stage (preserveAspectRatio
+  // none), with non-scaling strokes so every line stays one hairline at any size.
+  function frameSvg() {
+    var cells = '';
+    for (var i = -4; i <= 4; i++) {
+      var x = 500 + i * 38, y = 30 + Math.pow(i / 4, 2) * 14, s = i * 2;
+      cells += '<path class="visor__cell" d="M' + (x - 15) + ' ' + (y + 4 - s / 2) + 'l30 ' + s + 'l-6 15l-30 ' + (-s) + 'z"/>';
+    }
+    return '<svg class="visor__frame" viewBox="0 0 1000 1000" preserveAspectRatio="none" aria-hidden="true" focusable="false" xmlns="' + NS + '">' +
+      '<path class="visor__line" d="M0 120Q500 -10 1000 120"/>' +
+      '<path class="visor__line" d="M0 880Q500 1010 1000 880"/>' +
+      '<path class="visor__line visor__line--side" d="M18 120Q4 500 18 880M982 120Q996 500 982 880"/>' +
+      '<path class="visor__line" d="M490 500h-12M510 500h12M500 490v-14M500 510v14"/>' +
+      cells + '<path class="visor__mark" d="M494 76l6 9l6 -9z"/>' +
+    '</svg>';
+  }
+  function keyHtml(k) { k = String(k); return '<kbd class="visor__key">' + esc(k.length === 1 ? k.toUpperCase() : k) + '</kbd>'; }
+  function actionAttrs(a) {
+    return a.href ? 'href="' + esc(hallHref(a.href)) + '"' : 'href="#" role="button"';
+  }
+  function glassHtml(id) {
+    var acts = actionsFor(id), main = acts[0], C = craft();
+    var sprite = C && typeof C.spriteSrc === 'function' ? C.spriteSrc(id) : '';
+    var n = credits();
+    return frameSvg() +
+      (scene.place ? '<p class="visor__place">' + esc(scene.place) + '</p>' : '') +
+      '<a class="visor__pill visor__pill--main" data-visor-act="' + esc(main.id) + '" ' + actionAttrs(main) + '>' +
+        '<span>' + esc(main.label) + '</span>' + keyHtml(main.key) + '</a>' +
+      '<button class="visor__pill visor__pill--actions" type="button" data-visor-sheet aria-expanded="false" aria-controls="visor-sheet">' +
+        '<span class="visor__dots" aria-hidden="true"></span><span>Actions</span>' + keyHtml(SHEET_KEY) + '</button>' +
+      '<div class="visor__me">' +
+        (sprite ? '<img class="visor__sprite" src="' + esc(sprite) + '" alt="" width="250" height="290" decoding="async">' : '') +
+        '<span class="visor__who"><span class="visor__name">' + esc(NAMES[id]) + '</span>' +
+        '<span class="visor__credits" data-visor-credits>' + esc(creditsText(n)) + '</span></span>' +
+      '</div>';
+  }
+  function sheetHtml(id) {
+    var rows = actionsFor(id).map(function (a) {
+      return '<li><a class="visor__row" data-visor-act="' + esc(a.id) + '" ' + actionAttrs(a) + '><span>' + esc(a.label) + '</span>' + keyHtml(a.key) + '</a></li>';
+    }).join('');
+    var place = scene.actions.map(function (a, i) {
+      return '<li><button class="visor__row" type="button" data-visor-scene="' + i + '"><span>' + esc(a.label) + '</span>' + (a.key ? keyHtml(a.key) : '') + '</button></li>';
+    }).concat(scene.keys.map(function (k) {
+      return '<li><span class="visor__row visor__row--hint"><span>' + esc(k.label) + '</span>' + keyHtml(k.key) + '</span></li>';
+    })).join('');
+    return '<div class="visor__sheet-head"><h2 class="visor__sheet-title" id="visor-sheet-title">Actions</h2>' +
+        '<button class="visor__close" type="button" data-visor-close aria-label="Close actions">' + keyHtml('Esc') + '</button></div>' +
+      '<p class="visor__cap">' + esc(NAMES[id]) + '</p><ul class="visor__rows">' + rows + '</ul>' +
+      (place ? '<p class="visor__cap">This place</p><ul class="visor__rows">' + place + '</ul>' : '') +
+      '<ul class="visor__rows"><li><a class="visor__row" href="' + esc(hallHref('/settings')) + '"><span>Options</span>' + keyHtml('Esc') + '</a></li></ul>';
+  }
+  function shown() { return !!(root && !root.hidden); }
+  function render() {
+    if (!document.body) return;
+    var id = scene && !embedded() ? character() : null;
+    var html = document.documentElement;
+    if (!id) { if (html.classList) html.classList.remove('visor-on'); if (root) { closeSheet(false); root.hidden = true; } return; }
+    // A scene's own layers read this to keep clear of the glass (thinking.css), in game mode only.
+    if (html.classList) html.classList.toggle('visor-on', html.dataset.game === 'on');
+    if (!root) {
+      root = document.createElement('div');
+      root.id = 'visor';
+      root.className = 'visor';
+      root.setAttribute('role', 'region');
+      root.setAttribute('aria-label', 'Visor');
+      root.addEventListener('click', onClick);
+      document.body.appendChild(root);
+    }
+    var open = !!sheet;
+    closeSheet(false);
+    root.hidden = false;
+    root.setAttribute('data-character', id);
+    root.innerHTML = glassHtml(id);
+    if (open) openSheet();
+  }
+  function embedded() {
+    var G = window.OTBShellGame;
+    return !!(G && typeof G.embedded === 'function' && G.embedded());
+  }
+
+  // ---------- the sheet ----------
+  function openSheet() {
+    var id = character();
+    if (!shown() || sheet || !id) return;
+    returnFocus = document.activeElement;
+    sheet = document.createElement('div');
+    sheet.id = 'visor-sheet';
+    sheet.className = 'visor__sheet';
+    sheet.setAttribute('role', 'dialog');
+    sheet.setAttribute('aria-labelledby', 'visor-sheet-title');
+    sheet.innerHTML = sheetHtml(id);
+    sheet.addEventListener('click', onClick);
+    root.appendChild(sheet);
+    var btn = root.querySelector('[data-visor-sheet]');
+    if (btn) { btn.setAttribute('aria-expanded', 'true'); btn.hidden = true; }
+    document.addEventListener('keydown', onSheetKey, true);
+    var first = sheet.querySelector('.visor__rows a, .visor__rows button');
+    if (first && first.focus) first.focus();
+  }
+  function closeSheet(refocus) {
+    if (!sheet) return;
+    document.removeEventListener('keydown', onSheetKey, true);
+    if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
+    sheet = null;
+    var btn = root && root.querySelector('[data-visor-sheet]');
+    if (btn) { btn.setAttribute('aria-expanded', 'false'); btn.hidden = false; }
+    if (refocus !== false) {
+      var to = returnFocus && returnFocus.isConnected !== false && returnFocus !== document.body ? returnFocus : btn;
+      if (to && to.focus) { try { to.focus(); } catch (_) { /* gone */ } }
+    }
+    returnFocus = null;
+  }
+  // ADR 0399 §2.4 row 4: capture on document, and stop the press, so no scene listener
+  // below (the sky's unpick) and not the options menu also spends it.
+  function onSheetKey(e) {
+    if (!sheet || e.key !== 'Escape') return;
+    e.preventDefault();
+    e.stopPropagation();
+    closeSheet(true);
+  }
+
+  // ---------- running an action ----------
+  function run(a) {
+    if (!a) return;
+    if (a.tool) {
+      var C = craft();
+      if (C && typeof C.openTool === 'function') C.openTool(a.tool);
+      return;
+    }
+    if (a.href) window.location.assign(hallHref(a.href));
+  }
+  function find(id) {
+    var acts = actionsFor(character());
+    for (var i = 0; i < acts.length; i++) if (acts[i].id === id) return acts[i];
+    return null;
+  }
+  function onClick(e) {
+    var t = e.target && e.target.closest ? e.target : null;
+    if (!t) return;
+    if (t.closest('[data-visor-close]')) { closeSheet(true); return; }
+    if (t.closest('[data-visor-sheet]')) { openSheet(); return; }
+    var sc = t.closest('[data-visor-scene]');
+    if (sc && scene) { var a = scene.actions[Number(sc.getAttribute('data-visor-scene'))]; closeSheet(false); if (a) a.run(); return; }
+    var act = t.closest('[data-visor-act]');
+    if (!act) return;
+    var found = find(act.getAttribute('data-visor-act'));
+    if (found && found.tool) { e.preventDefault(); closeSheet(false); run(found); }
+    else closeSheet(false); // a link: the browser follows it
+  }
+
+  // ---------- the keys ----------
+  function inField(el) {
+    var tag = el && el.tagName ? String(el.tagName).toLowerCase() : '';
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || !!(el && el.isContentEditable);
+  }
+  // Something above the glass has the keyboard: the character picker, a modal dialog, the
+  // palette, the start screen. The visor's keys wait while any of them is up.
+  function busy() {
+    var html = document.documentElement;
+    if (html.classList && (html.classList.contains('craft-picker-open') || html.classList.contains('gs-open'))) return true;
+    return !!document.querySelector('dialog[open], [aria-modal="true"]');
+  }
+  // Which action (or the sheet) a key press means, or null. Pure, for the tests.
+  function keyFor(id, e) {
+    if (!e || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || typeof e.key !== 'string' || e.key.length !== 1) return null;
+    var k = e.key.toLowerCase();
+    if (k === SHEET_KEY) return 'sheet';
+    var acts = actionsFor(id);
+    for (var i = 0; i < acts.length; i++) if (acts[i].key === k) return acts[i];
+    return null;
+  }
+  // Bubble, on window: a scene or pop-up that used the key has called preventDefault by now.
+  function onKey(e) {
+    if (!shown() || inField(e.target) || busy()) return;
+    var hit = keyFor(character(), e);
+    if (!hit) return;
+    e.preventDefault();
+    if (hit === 'sheet') { if (sheet) closeSheet(true); else openSheet(); return; }
+    closeSheet(false);
+    run(hit);
+  }
+
+  function start() {
+    window.addEventListener('keydown', onKey);
+    // A scene whose script ran before this file left its registration here.
+    if (window.__visorScene && !scene) registerScene(window.__visorScene);
+    // The character and the credits settle when /me answers (craft-mode.js), after this file.
+    document.addEventListener('otbcraft:me', render);
+    document.addEventListener('otb:craft', render);
+    render();
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+  else start();
+
+  window.OTBVisor = {
+    scene: registerScene,
+    render: render,
+    open: openSheet,
+    close: function () { closeSheet(true); },
+    isOpen: function () { return !!sheet; },
+    // pure parts, for the tests
+    ACTIONS: ACTIONS,
+    actionsFor: actionsFor,
+    keyFor: keyFor,
+    creditsText: creditsText,
+    character: character,
+  };
+})();

package/modules/hall-ui/public/watch-repo-invite.js

@@ -0,0 +1,159 @@
+/* watch-repo-invite.js — the GitHub repository half of an invite, for the Gate on /watch.
+ *
+ * A hall invite admits someone to THIS hall. It never puts the project's repository on
+ * their GitHub: that is a separate invite, sent with the owner's own GitHub account and
+ * accepted by the person on GitHub. This file holds the pieces of that second door so
+ * watch.js (at its line cap) only wires them:
+ *   • formFieldsHtml() / explainerHtml() / readForm() — the "also invite to the
+ *                         repository" tick in the invite box, and the words under it
+ *   • inviteToRepo()    — POST /github/repo-invite; the form runs it AFTER the hall invite
+ *                         landed, so a GitHub refusal never undoes the admission
+ *   • showRepoNote()    — the form's result, kept where the owner can read it after the
+ *                         queue redraws
+ *   • rowButtonHtml() / gateGithubStep() — one admitted row's GitHub status, in place:
+ *                         on the repository, waiting for them to accept, or not on it
+ *
+ * Access is always read-only (owner decision, 2026-11-04): a builder ships through the
+ * server's own publish and needs no write access, so there is no access choice at all.
+ * The server holds the same line (POST /github/repo-invite allows only 'pull').
+ *
+ * It is a factory over the page's own helpers, so it makes no request of its own that the
+ * page's sign-in bounce and error envelope do not already cover.
+ */
+(function () {
+  'use strict';
+
+  // A real GitHub username (the rule the server applies), so the repository button never
+  // shows for a Google-only member's stand-in name.
+  const GH_LOGIN_RE = /^[A-Za-z0-9](?:[A-Za-z0-9]|-(?=[A-Za-z0-9])){0,38}$/;
+
+  // The one word for this access level, so every sentence says it the same way.
+  const READ_ONLY = 'read-only';
+
+  function make({ api, API, postJson, $ }) {
+    function formFieldsHtml() {
+      return (
+        '<div class="ov-field">' +
+        `<label class="ov-field__l"><input type="checkbox" id="gate-invite-repo" checked> Also invite them to the project’s GitHub repository (${READ_ONLY} — they can see the code, not change it)</label>` +
+        '</div>'
+      );
+    }
+
+    // The sentences under the form: what each invite does, and where the result lands.
+    function explainerHtml() {
+      return (
+        '<p class="ov-form__why">The hall invite lets them sign in here. The GitHub invite is separate: GitHub emails them, and the repository only shows on their GitHub after they accept it (github.com/notifications). Neither changes their rank.</p>' +
+        '<p class="ov-form__why" id="gate-invite-note" role="status"></p>'
+      );
+    }
+
+    // Reads the form's tick: { want }. There is no access choice; it is always read-only.
+    function readForm(form) {
+      const tick = form.querySelector('#gate-invite-repo');
+      return { want: !!(tick && tick.checked) };
+    }
+
+    // Resolves { ok, text, signin } and never throws except for a signed-out 401, which
+    // postJson has already bounced to sign-in. The words say nothing about the hall
+    // invite: this runs from the form (after one) and from a row (with none).
+    async function inviteToRepo(login) {
+      try {
+        // No access level is sent: the server offers read-only and nothing else.
+        const out = await postJson('/github/repo-invite', { github_login: login });
+        if (out.state === 'already_collaborator') {
+          return { ok: true, text: `@${login} already has access to the GitHub repository.` };
+        }
+        return { ok: true, text: `GitHub repository invite sent to @${login} (${READ_ONLY}). They must accept it: GitHub emails them, or they can open github.com/notifications.` };
+      } catch (err) {
+        if (err && err.kind === '401') throw err;
+        return {
+          ok: false,
+          signin: !!(err && err.code === 'repo_scope_required'),
+          text: `The GitHub repository invite did not go through: ${(err && err.message) || err}`,
+        };
+      }
+    }
+
+    // Writes a result into an element. A sign-in link is added only when GitHub access is
+    // what is missing; it opens the same GitHub sign-in with the repository permission asked
+    // for. Used by the form's note and by a row's status line alike.
+    function paint(el, res) {
+      if (!el) return;
+      el.textContent = res.text;
+      if (res.signin) {
+        const a = document.createElement('a');
+        a.href = `${API}/auth/web/start?return=${encodeURIComponent('/watch')}&repos=1`;
+        a.textContent = ' Reconnect GitHub with repository access, then try again.';
+        el.appendChild(a);
+      }
+    }
+
+    // The form's result. When the repository step failed, the owner is told the hall
+    // invite still stands, because the form sent that one first.
+    function showRepoNote(res) {
+      paint($('#gate-invite-note'), res.ok ? res : { ...res, text: `The hall invite went through. ${res.text}` });
+    }
+
+    // The button an admitted row offers, and the span its answer is written into.
+    function rowButtonHtml(r, ghost) {
+      return GH_LOGIN_RE.test(String(r.github_login || ''))
+        ? ghost(`data-gate-gh data-gh-mode="check" data-login="${String(r.github_login).replace(/[^A-Za-z0-9-]/g, '')}"`, 'GitHub repository')
+        : '';
+    }
+    // The span a row's answer is written into: drawn only where the button is.
+    function rowStateHtml(r) {
+      return r.status === 'invited' && !r.expired && GH_LOGIN_RE.test(String(r.github_login || ''))
+        ? '<span class="ov-row__when" data-gh-state role="status"></span>'
+        : '';
+    }
+
+    // One row's GitHub status, in place; and a button to send (or send again) read-only access.
+    async function gateGithubStep(btn) {
+      const login = btn.getAttribute('data-login');
+      const mode = btn.getAttribute('data-gh-mode') || 'check';
+      const row = btn.closest('.ov-row');
+      const out = row && row.querySelector('[data-gh-state]');
+      const say = (t) => paint(out, { ok: true, text: t });
+      try {
+        if (mode === 'send') {
+          const sent = await inviteToRepo(login);
+          paint(out, sent);
+          if (sent.ok) { // a failed send stays a send, so the retry is one click
+            btn.textContent = 'Check GitHub again';
+            btn.setAttribute('data-gh-mode', 'check');
+          }
+          return;
+        }
+        const res = await api.request('GET', `${API}/github/repo-invite?github_login=${encodeURIComponent(login)}`);
+        if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+        const s = res.data || {};
+        if (!res.ok) {
+          const env = s.error && typeof s.error === 'object' ? s.error : null;
+          paint(out, { ok: false, signin: !!(env && env.code === 'repo_scope_required'), text: (env && env.message) || 'Could not read the GitHub repository. Try again in a moment.' });
+          return;
+        }
+        if (s.state === 'collaborator') {
+          say('On the GitHub repository.');
+          btn.textContent = 'Check GitHub again';
+        } else if (s.state === 'pending') {
+          say('GitHub invite sent, waiting for them to accept it.');
+          btn.textContent = 'Send the invite again';
+          btn.setAttribute('data-gh-mode', 'send');
+        } else {
+          say('Not on the GitHub repository.');
+          btn.textContent = `Send ${READ_ONLY} repository invite`;
+          btn.setAttribute('data-gh-mode', 'send');
+        }
+      } catch (err) {
+        if (err && err.kind === '401') throw err;
+        say((err && err.message) || 'Could not reach GitHub. Try again in a moment.');
+      } finally {
+        btn.disabled = false;
+      }
+    }
+
+    return { formFieldsHtml, explainerHtml, readForm, inviteToRepo, showRepoNote, rowButtonHtml, rowStateHtml, gateGithubStep };
+  }
+
+  window.OTBWatchRepoInvite = { make };
+})();

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

@@ -11,7 +11,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
   <!-- The oversight family's sheet (task 1003469): the figure band, the group
        head, the row, the form. Then the page's own: severities, the report
        reader, the grade trend. The attention tiles + tabs come from style.css's
@@ -269,20 +269,21 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
-<script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
-<script src="/builders/shell.js?v=2026-11-09-game-mode"></script>
+<script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
+<script src="/builders/shell.js?v=2026-11-10-character"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared component kit (window.OTBKit) — tabs, ledger, pager (task 2166). -->
 <script src="/builders/hall-kit.js"></script>
-<script src="/builders/task-detail.js?v=2026-07-03-taskdetail"></script>
+<script src="/builders/task-detail.js?v=2026-11-10-options"></script>
 <script src="/builders/brand-apply.js?v=2026-06-19-r56"></script>
 <!-- task 1005049: the two tabs' scripts, booted by watch.js when their tab first opens. -->
 <script src="/builders/sessions.js?v=2026-11-05-tab"></script>
 <script src="/builders/gate.js?v=2026-11-05-tab"></script>
+<script src="/builders/watch-repo-invite.js?v=2026-11-04-repoinvite"></script>
 <script src="/builders/watch.js?v=2026-11-05-tabs"></script>
 </body>
 </html>