@bongos/core 1.24.94 → 1.24.96

package/modules/hall-ui/public/home-runner.js

@@ -0,0 +1,248 @@
+// modules/hall-ui/public/home-runner.js — your Autobongos runner on Home's city
+// (task 1005243, goal 1000142).
+//
+// WHY. Owner direction, 2026-11-12: running your runner should feel like putting a
+// builder on a building in a base-building game. In game mode you tap a tower (a
+// goal), the visor offers "Send runner here", and the tower then carries your
+// runner's marker; tap it again and the visor shows what it has done there and
+// "Recall runner". The owner chose that a runner works ONE tower at a time, so
+// sending it sets your goal picks to that one goal.
+//
+// THE RULES IT KEEPS.
+//   - ADR 0403: the scene is the view and the visor is the control. The tower only
+//     gets picked; every button is on the glass (OTBVisor.focus).
+//   - The server decides who may run a runner: GET /autonomy/fence answers
+//     scope.may_run, and only then is a tower pickable. Signed out, a rank without
+//     `autonomy.run`, or classic mode: towers stay plain links and nothing is new.
+//   - Every write is a route Settings already uses: PUT /autonomy/me/goals and
+//     POST /autonomy/runners/:host/run. The numbers come from GET
+//     /autonomy/me/goals/:id/stats (the ledger: runner claims shipped there, the
+//     tokens their sessions took, the tasks still ready).
+//   - The device's face (working, resting until, off…) is runner-button.js's
+//     buttonState, the same decision the Settings card draws.
+//
+// The decision (cardFor, stateOf) is PURE and exported for node tests; the wiring
+// below it only runs in a browser.
+(function (root) {
+  'use strict';
+
+  const RB = () => (root && root.OTBRunnerButton) || (typeof require === 'function' ? require('./runner-button.js') : null);
+
+  // ---------- pure ----------
+
+  // The device that speaks for "your runner": one that is working, else one that is
+  // switched on, else the most recently seen (the server's order).
+  function leadDevice(runners) {
+    const list = Array.isArray(runners) ? runners.filter(Boolean) : [];
+    return list.find((r) => r.health && r.health.workingTaskId) ||
+      list.find((r) => r.run_requested !== false) || list[0] || null;
+  }
+  function anyOn(runners) { return (Array.isArray(runners) ? runners : []).some((r) => r && r.run_requested !== false); }
+
+  // The goal the runner is sent to: exactly one pick. Several picks (made in Settings)
+  // is not one tower, so no tower carries the marker until the builder sends it.
+  function assignedGoal(fence) {
+    const g = fence && fence.scope && Array.isArray(fence.scope.goals) ? fence.scope.goals : [];
+    return g.length === 1 ? String(g[0]) : null;
+  }
+
+  // The marker's state, from the device's face: working | resting | starting | ready | off.
+  function stateOf({ runners, fence, nowMs } = {}) {
+    const d = leadDevice(runners);
+    if (!d || !anyOn(runners)) return 'off';
+    const b = RB().buttonState({ runner: d, fence, nowMs });
+    if (d.health && d.health.workingTaskId && b.status === 'Running') return 'working';
+    if (/^Resting/.test(b.status)) return 'resting';
+    if (b.status === 'Starting…' || b.status === 'Updating…') return 'starting';
+    if (b.status === 'Running' || b.status === 'Ready') return 'ready';
+    return 'off';
+  }
+
+  // 1.2M tokens, 340k tokens, 900 tokens.
+  function tokensText(n) {
+    const v = Number(n) || 0;
+    if (v >= 1e6) return `${(v / 1e6).toFixed(v >= 1e7 ? 0 : 1).replace(/\.0$/, '')}M tokens`;
+    if (v >= 1e3) return `${Math.round(v / 1e3)}k tokens`;
+    return `${Math.round(v)} tokens`;
+  }
+  // "about 40 min", "about 3 h", "about 2 days": an estimate, so rounded like one.
+  function aboutText(seconds) {
+    const s = Number(seconds);
+    if (!Number.isFinite(s) || s <= 0) return '';
+    const min = s / 60;
+    if (min < 60) return `about ${Math.max(5, Math.round(min / 5) * 5)} min`;
+    const h = min / 60;
+    if (h < 36) return `about ${Math.round(h)} h`;
+    return `about ${Math.round(h / 24)} days`;
+  }
+  function plural(n, one, many) { return `${n} ${n === 1 ? one : many}`; }
+
+  // What the visor's card says for one tower. Returns null when the viewer has no
+  // runner to send (the tower then stays a plain link), else
+  //   { title, status: { text, tone }, lines: [string], lead: { label, act } | null }
+  // act: 'send' | 'recall' | 'setup' | 'open'.
+  function cardFor({ goal, runners, fence, stats, nowMs = Date.now(), titleOf } = {}) {
+    if (!goal || !fence || !fence.scope || fence.scope.may_run !== true) return null;
+    const id = String(goal.id);
+    const title = goal.title || `Goal ${id}`;
+    const nameOf = (g) => (typeof titleOf === 'function' && titleOf(g)) || `goal ${g}`;
+    const list = Array.isArray(runners) ? runners : [];
+    const st = stats || null;
+    const done = st ? Number(st.tasks_done) || 0 : 0;
+    const left = st ? Number(st.tasks_left) || 0 : null;
+    const eta = st && left ? aboutText(left * (Number(st.avg_task_seconds) || 0)) : '';
+    const leftLine = left == null ? null : left === 0 ? 'Nothing ready to build here right now.' : `${plural(left, 'task', 'tasks')} ready${eta ? ` · ${eta} for your runner` : ''}`;
+    const doneLine = st && done ? `${plural(done, 'task', 'tasks')} done here · ${tokensText(st.tokens)}` : null;
+
+    if (!list.length) {
+      return { title, status: { text: 'No runner yet', tone: 'neutral' },
+        lines: ['Set it up on your PC once, then send it to any tower.'], lead: { label: 'Set up a runner', act: 'setup' } };
+    }
+    const allowed = fence.project && Array.isArray(fence.project.goals) ? fence.project.goals.map(String) : [];
+    if (!allowed.includes(id)) {
+      return { title, status: { text: 'Closed to runners', tone: 'neutral' },
+        lines: ['The project has not opened this goal to runners yet.'], lead: { label: 'Open the goal', act: 'open' } };
+    }
+    const here = assignedGoal(fence) === id;
+    const on = anyOn(list);
+    if (here && on) {
+      const b = RB().buttonState({ runner: leadDevice(list), fence, nowMs });
+      const face = b.status ? `${b.status}${b.countdown ? ` · ${b.countdown}` : ''}` : 'Off';
+      return { title, status: { text: face, tone: b.tone || 'neutral' },
+        lines: [b.sub, doneLine, leftLine].filter(Boolean), lead: { label: 'Recall runner', act: 'recall' } };
+    }
+    const where = on && assignedGoal(fence) ? `Your runner is at ${nameOf(assignedGoal(fence))}` :
+      on ? 'Your runner is working on several goals' : 'Your runner is resting';
+    return { title, status: { text: here ? 'Recalled' : where, tone: 'neutral' },
+      lines: [doneLine, leftLine].filter(Boolean), lead: { label: 'Send runner here', act: 'send' } };
+  }
+
+  const api = { cardFor, stateOf, assignedGoal, leadDevice, tokensText, aboutText };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  if (!root || typeof document === 'undefined') return;
+  root.OTBHomeRunnerLib = api;
+
+  // ---------- the wiring (browser only) ----------
+  const API = '/api/bongos';
+  const POLL_MS = 15000;
+  let fence = null, runners = [], picked = null, stats = null, busy = false, error = '', timer = null;
+  let client = null;
+  function http() {
+    if (!client && root.BongosClient) client = root.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+    return client;
+  }
+  async function req(method, path, body) {
+    const c = http();
+    if (!c) return null;
+    try { return await c.request(method, API + path, body ? { body } : undefined); } catch (_) { return null; }
+  }
+  function game() { return document.documentElement.dataset.game === 'on'; }
+  function mayRun() { return !!(fence && fence.scope && fence.scope.may_run === true); }
+  function active() { return game() && mayRun() && !!root.OTBVisor && typeof root.OTBVisor.focus === 'function'; }
+  function towerOf(id) { return document.querySelector(`.home-city .hc-tower[data-goal="${CSS.escape(String(id))}"]`); }
+  function titleOf(id) { const t = towerOf(id); return t ? t.getAttribute('data-tip') : null; }
+
+  // What home-city.js draws: the marker on the assigned tower, and the picked tower.
+  function marker() {
+    if (!active()) return null;
+    const goal = assignedGoal(fence);
+    return goal ? { goal, state: stateOf({ runners, fence, nowMs: Date.now() }) } : null;
+  }
+  function changed() { document.dispatchEvent(new CustomEvent('otb:home-runner')); }
+
+  async function readState() {
+    const [f, r] = await Promise.all([req('GET', '/autonomy/fence'), req('GET', '/autonomy/runners')]);
+    fence = f && f.ok && f.data ? f.data : null;
+    runners = r && r.ok && r.data && Array.isArray(r.data.runners) ? r.data.runners : [];
+  }
+  async function readStats() {
+    if (!picked) return;
+    const s = await req('GET', `/autonomy/me/goals/${encodeURIComponent(picked)}/stats`);
+    stats = s && s.ok && s.data ? s.data : null;
+  }
+
+  function show() {
+    const V = root.OTBVisor;
+    if (!V || typeof V.focus !== 'function') return;
+    if (!picked || !active()) { V.focus(null); return; }
+    const card = cardFor({ goal: { id: picked, title: titleOf(picked) }, runners, fence, stats, nowMs: Date.now(), titleOf });
+    if (!card) { V.focus(null); return; }
+    const lead = card.lead ? { label: busy ? (card.lead.act === 'recall' ? 'Recalling…' : 'Sending…') : card.lead.label, busy, run: () => act(card.lead.act) } : null;
+    V.focus({ key: `runner:${picked}`, title: card.title, status: card.status, lines: error ? [error].concat(card.lines) : card.lines, lead, onClose: unpick });
+  }
+
+  async function act(what) {
+    if (busy || !picked) return;
+    if (what === 'open') { root.location.assign(`/goals#/goal/${encodeURIComponent(picked)}`); return; }
+    if (what === 'setup') { root.location.assign('/settings#autobongos'); return; }
+    busy = true; error = ''; show();
+    let ok = true;
+    if (what === 'send') {
+      const g = await req('PUT', '/autonomy/me/goals', { goal_ids: [Number(picked)] });
+      ok = !!(g && g.ok);
+      if (ok) {
+        const outs = await Promise.all(runners.filter((r) => r.run_requested === false)
+          .map((r) => req('POST', `/autonomy/runners/${encodeURIComponent(r.host)}/run`, { run: true })));
+        ok = outs.every((o) => o && o.ok);
+      }
+    } else if (what === 'recall') {
+      const outs = await Promise.all(runners.filter((r) => r.run_requested !== false)
+        .map((r) => req('POST', `/autonomy/runners/${encodeURIComponent(r.host)}/run`, { run: false })));
+      ok = outs.every((o) => o && o.ok);
+    }
+    if (!ok) error = what === 'send' ? 'Could not send your runner. Try again.' : 'Could not recall your runner. Try again.';
+    await readState();
+    await readStats();
+    busy = false;
+    show();
+    changed();
+  }
+
+  function pick(id) {
+    picked = String(id); stats = null; error = '';
+    show(); changed();
+    readStats().then(() => { if (picked === String(id)) show(); });
+  }
+  // The visor's card closed (Escape, its close mark, or a tap on open ground).
+  function unpick() {
+    if (!picked) return;
+    picked = null; stats = null; error = '';
+    changed();
+  }
+
+  // A tap on a tower in game mode picks it instead of leaving the page; a tap on open
+  // ground lets the pick go. Capture, so it runs before the tower's own link.
+  function onClick(e) {
+    if (!active()) return;
+    const city = e.target.closest && e.target.closest('.home-city .hc-svg');
+    if (!city) return;
+    const t = e.target.closest('.hc-tower[data-goal], .hc-runner[data-goal]');
+    if (!t) { if (picked && !e.target.closest('a')) { root.OTBVisor.focus(null); unpick(); } return; }
+    e.preventDefault();
+    const id = t.getAttribute('data-goal');
+    if (picked === id) return;
+    pick(id);
+  }
+
+  async function refresh() {
+    await readState();
+    if (picked) await readStats();
+    if (picked) show();
+    changed();
+  }
+  function poll() {
+    clearTimeout(timer);
+    timer = setTimeout(async () => {
+      if (!document.hidden && game() && mayRun() && runners.length) await refresh();
+      poll();
+    }, POLL_MS);
+  }
+
+  function start() {
+    document.addEventListener('click', onClick, true);
+    refresh().then(poll);
+  }
+  root.OTBHomeRunner = { marker, picked: () => (active() ? picked : null), refresh };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+  else start();
+})(typeof window !== 'undefined' ? window : null);

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

@@ -19,11 +19,11 @@
   <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-11-11-helm4d">
-  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-11-helm4c">
+  <link rel="stylesheet" href="/builders/visor.css?v=2026-11-12-runner">
   <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-07-brand-mark">
   <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-11-view2">
   <link rel="stylesheet" href="/builders/hall-ask.css">
-  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-11-helm4c">
+  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-12-runner">
   <link rel="stylesheet" href="/builders/home-gallery.css">
   <link rel="stylesheet" href="/builders/home-idea-box.css">
 </head>
@@ -116,7 +116,7 @@
 <script src="/builders/shell.js?v=2026-11-11-view2" defer></script>
 <script src="/builders/hall-dialog.js" defer></script>
 <!-- task 1005148: the visor (glass over the scene, game mode only; ADR 0399), after the shell and hall-dialog.js -->
-<script src="/builders/visor.js?v=2026-11-11-helm3" defer></script>
+<script src="/builders/visor.js?v=2026-11-12-runner" defer></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task 2166: the shared component kit (window.OTBKit) — pager/ledger/rail.
@@ -138,10 +138,13 @@
 <script src="/builders/city-draw.js" defer></script>
 <!-- task 1005196: the hour of the city's sky (sets the --sky-now-* tokens the city spends) -->
 <script src="/builders/sky-time.js?v=2026-11-11-helm4" defer></script>
-<script src="/builders/home-city-draw.js?v=2026-11-11-helm4d" defer></script>
+<script src="/builders/home-city-draw.js?v=2026-11-12-runner" defer></script>
 <script src="/builders/home-gallery.js" defer></script>
 <script src="/builders/home-idea-box.js" defer></script>
-<script src="/builders/home-city.js?v=2026-11-10-visor" defer></script>
+<!-- task 1005243: your runner on Home's towers (game mode; the visor carries its card and button) -->
+<script src="/builders/runner-button.js" defer></script>
+<script src="/builders/home-runner.js" defer></script>
+<script src="/builders/home-city.js?v=2026-11-12-runner" defer></script>
 <!-- task 1003455: the shared blocker-row renderer (window.OTBBlockersLib), read by
      both goal-inbox.js's attention-inbox slice below and the /blockers page.
      Loaded BEFORE goal-inbox.js, which calls it while rendering. -->

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

@@ -1587,15 +1587,28 @@ html.opt-window-open { overflow: hidden; }
 
 /* THE CHARACTER (task 1005147). A builder who holds a character wears its sprite in
    the top bar in place of the switch: one button, which offers "Change character"
-   (signing out). The sprites are pixel art, so they scale by whole pixels. */
+   (signing out). The sprites are pixel art, so they scale by whole pixels.
+   EACH CHARACTER HAS ONE COLOUR (task 1005218; --char-*): the Artisan's is the hall's own
+   accent, the Artist's violet and the Patron's gold are the two colours the second look
+   added, the same three the pictures are drawn in (docs/design/characters/v2). In game mode
+   the visor wears the held character's (visor.css). */
+html {
+  --char-artisan: var(--accent);
+  --char-artist: color-mix(in oklch, color-mix(in oklch, var(--sea) 82%, var(--accent)) 72%, var(--ink));
+  --char-patron: color-mix(in srgb, var(--warn) 72%, var(--ink));
+}
 .craft-sprite { display: block; image-rendering: pixelated; object-fit: contain; }
 .craft-switch__me { padding: 0 10px 0 4px; color: var(--ink); }
-/* The chip is the figure's head: the portrait cropped to its top third. */
-.craft-sprite--chip { width: 26px; height: 26px; border-radius: var(--radius-pill); object-fit: cover; object-position: 50% 22%; }
+/* The chip is the figure's head: its own 32px picture. */
+.craft-sprite--chip { width: 26px; height: 26px; border-radius: var(--radius-pill); object-fit: cover; background: var(--bg-deep); }
 /* Character creation: each door is the owner's portrait — the figure on its plinth
    in the torch-lit hall — filling the top of the door, the words beneath it. */
-.craft-plinth { display: block; overflow: hidden; }
-.craft-sprite--door { width: 100%; height: auto; aspect-ratio: 250 / 290; transition: transform var(--ds-dur-base) var(--ds-ease); }
+.craft-plinth { display: block; overflow: hidden; background: var(--bg-deep); }
+.craft-sprite--door { width: 100%; height: auto; aspect-ratio: 1; transition: transform var(--ds-dur-base) var(--ds-ease); }
+.craft-door--artisan { --char: var(--char-artisan); }
+.craft-door--artist { --char: var(--char-artist); }
+.craft-door--patron { --char: var(--char-patron); }
+.craft-door--character .craft-door__name { color: var(--char); }
 .craft-door--character:hover .craft-sprite--door,
 .craft-door--character:focus-visible .craft-sprite--door { transform: scale(1.03); }
 

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

@@ -18,6 +18,21 @@ html[data-game="on"] .visor:not([hidden]) {
   color: var(--ink); font-family: var(--font-body);
 }
 
+/* THE GLASS TAKES YOUR CHARACTER'S COLOUR (task 1005218). --char is the held character's one
+   colour (style.css --char-*): the frame's lines, the sight, your name and the rim of your
+   picture wear it, and the accent on the glass (the one button, the segment being built, a
+   hovered row) IS it, so nothing here names a colour of its own. The Artisan's is the hall's
+   accent, so an Artisan's glass is the accent it always was. */
+.visor[data-character="artisan"] { --char: var(--char-artisan, var(--accent)); }
+.visor[data-character="artist"] { --char: var(--char-artist, var(--accent)); }
+.visor[data-character="patron"] { --char: var(--char-patron, var(--accent)); }
+/* on the glass's parts, not the glass: --char reads the hall's accent above, so re-pointing
+   the accent on the same element would be a cycle */
+.visor[data-character] > * {
+  --accent: var(--char); --accent-ink: var(--char);
+  --accent-lift: color-mix(in srgb, var(--char) 58%, var(--ink));
+}
+
 /* the frame: each arc is stretched across the stage, every stroke one hairline at any size. The
    top arc, its notch and the place all sit inside the top inset, above where a scene starts its
    own top row; the foot arc runs under the foot row. */
@@ -25,9 +40,9 @@ html[data-game="on"] .visor:not([hidden]) {
 .visor__frame--top { top: calc(var(--visor-arc) - 50px); height: 42px; }
 .visor__frame--foot { bottom: calc(var(--visor-inset-bottom) - 44px); height: 18px; }
 .visor__frame path { vector-effect: non-scaling-stroke; }
-.visor__line { fill: none; stroke: var(--ink-soft); stroke-opacity: .6; stroke-width: var(--line-strong); }
+.visor__line { fill: none; stroke: var(--char, var(--ink-soft)); stroke-opacity: .7; stroke-width: var(--line-strong); }
 .visor__line--under { stroke: var(--bg); stroke-opacity: 1; stroke-width: 5px; }
-.visor__dot { fill: var(--ink-soft); stroke: var(--bg); stroke-width: var(--line-strong); }
+.visor__dot { fill: var(--char, var(--ink-soft)); stroke: var(--bg); stroke-width: var(--line-strong); }
 .visor__notch, .visor__sight { position: absolute; left: 50%; transform: translate(-50%, -50%); overflow: visible; }
 .visor__notch { top: calc(var(--visor-arc) - 36px); width: 12px; height: 9px; }
 .visor__sight { top: 50%; width: 24px; height: 24px; }
@@ -76,12 +91,12 @@ html[data-game="on"] .visor:not([hidden]) {
   transform: perspective(900px) rotateY(16deg); transform-origin: left center;
 }
 .visor__sprite {
-  flex: none; width: 56px; height: 56px; object-fit: cover; object-position: 50% 12%;
-  background: var(--glass-strong); clip-path: var(--cut-path-sm);
+  flex: none; box-sizing: border-box; width: 56px; height: 56px; object-fit: cover; image-rendering: pixelated;
+  background: var(--bg-card); border: var(--line-strong) solid var(--char, var(--ink-soft)); clip-path: var(--cut-path-sm);
 }
 /* your name and credits stand in a box of the night, cut like the sprite beside it */
 .visor__who { display: flex; flex-direction: column; gap: 2px; padding: var(--ds-space-hair) var(--ds-space-xs); }
-.visor__name { font-size: var(--ds-text-xs); letter-spacing: var(--name-space); line-height: 1; color: var(--ink-soft); }
+.visor__name { font-size: var(--ds-text-xs); letter-spacing: var(--name-space); line-height: 1; color: var(--char, var(--ink-soft)); }
 .visor__credits { display: flex; align-items: baseline; gap: var(--ds-space-xs); white-space: nowrap; }
 .visor__num { font-family: var(--name-face); font-size: var(--ds-text-headline); font-weight: 400; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
 .visor__unit { font-size: var(--ds-text-md); letter-spacing: var(--name-space); color: var(--ink-soft); }
@@ -154,5 +169,32 @@ html[data-game="on"] .visor:not([hidden]) {
 .visor__row--hint:hover { color: var(--ink-soft); }
 .visor__sheet .visor__key { color: var(--ink-soft); background: none; }
 
+/* the card for what the scene picked (task 1005243): Home's tower and your runner on it. Centred
+   over the accent button it hands its one action to, the night panel between two strong
+   hairlines like the sheet, never wider than a short paragraph. The words are the scene's facts;
+   the status dot is the hall's status vocabulary (--ok / --warn / --info), never a colour of its own. */
+.visor__focus {
+  position: absolute; left: 50%; bottom: calc(var(--visor-inset-bottom) + 72px); transform: translateX(-50%);
+  pointer-events: auto; box-sizing: border-box; width: min(20rem, calc(100vw - 2 * var(--ds-space-gutter-narrow)));
+  padding: var(--ds-space-xs) var(--ds-space-sm) var(--ds-space-sm); background: var(--bg-card);
+  border: 0 solid var(--rule); border-left-width: var(--line-strong); border-right-width: var(--line-strong);
+}
+.visor__focus-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-xs); }
+.visor__focus-title {
+  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-family: var(--name-face); font-weight: var(--name-weight); text-transform: var(--name-case);
+  font-size: var(--ds-text-xl); letter-spacing: var(--name-space); color: var(--ink);
+}
+.visor__focus-status { display: flex; align-items: center; gap: var(--ds-space-xs); margin: 2px 0 0; font-size: var(--ds-text-md); color: var(--ink); }
+.visor__focus-status i { width: 10px; height: 10px; flex: none; background: var(--rule); }
+.visor__focus-status--ok i { background: var(--ok); }
+.visor__focus-status--warn i { background: var(--warn); }
+.visor__focus-status--info i { background: var(--info); }
+.visor__focus-status--danger i { background: var(--danger); }
+.visor__focus-lines { list-style: none; margin: var(--ds-space-xs) 0 0; padding: 0; color: var(--ink-soft); font-size: var(--ds-text-sm); line-height: 1.45; }
+.visor__focus-lines li + li { margin-top: 2px; }
+.visor__focus .visor__key { color: var(--ink-soft); background: none; }
+.visor__main--lead[aria-busy="true"] { cursor: progress; background: var(--accent-lift); }
+
 /* 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

@@ -7,7 +7,8 @@
 //     a small notch under the top arc and a ring-and-dot sight at the centre. Drawn as SVG;
 //     it is ornament, never a control.
 //   - the place, in the name voice under the top arc ("THE SKY", "GOVERNOR CITY", …).
-//   - the foot row. Left: your sprite (third person), your character's name and your credits
+//   - the foot row. Left: your sprite (your character's head, wearing the visor, its rim in
+//     the character's colour; task 1005218), your character's name and your credits
 //     (builders.total_credits — credits only, never a payout; the spec's "does not exist").
 //     Centre: your character's main action, the one accent button, with its key. Right: the
 //     quiet key hints, no boxes: your other actions, "Actions" (key A), which opens the
@@ -150,6 +151,64 @@
     render();
   }
 
+  // ---------- what the scene has picked (task 1005243) ----------
+  // A scene that picks something (Home's tower) hands the visor a small card about it:
+  // a title, one status, a few lines, and at most one action. The action becomes the
+  // accent button while the card is up (ADR 0403 §4: a scene's lead action reaches the
+  // accent button); the character's own main action is back when the card closes.
+  // The scene paints the pick; the visor paints the words and the button.
+  var focus = null;
+  function setFocus(f) {
+    var was = focus;
+    if (!f || typeof f !== 'object' || !f.title) focus = null;
+    else {
+      var lead = f.lead && f.lead.label && typeof f.lead.run === 'function' ? { label: String(f.lead.label), run: f.lead.run, busy: !!f.lead.busy } : null;
+      focus = {
+        key: String(f.key || f.title), title: String(f.title),
+        status: f.status && f.status.text ? { text: String(f.status.text), tone: String(f.status.tone || 'neutral') } : null,
+        lines: (Array.isArray(f.lines) ? f.lines : []).filter(Boolean).map(String).slice(0, 4),
+        lead: lead, onClose: typeof f.onClose === 'function' ? f.onClose : null,
+      };
+    }
+    if (focus && !was) document.addEventListener('keydown', onFocusKey, true);
+    if (!focus && was) document.removeEventListener('keydown', onFocusKey, true);
+    render();
+  }
+  // Closed by the person (Escape or the close mark): the scene is told, so it unpicks.
+  function dropFocus() {
+    var f = focus;
+    if (!f) return;
+    setFocus(null);
+    if (f.onClose) f.onClose();
+  }
+  // Escape closes the card before it reaches the options menu, but never while the sheet
+  // is open: the sheet's own capture listener takes that press.
+  function onFocusKey(e) {
+    if (!focus || sheet || e.key !== 'Escape' || !shown()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    dropFocus();
+  }
+  var TONES = { ok: 1, warn: 1, info: 1, neutral: 1, danger: 1 };
+  function focusHtml() {
+    if (!focus) return '';
+    var st = focus.status;
+    return '<div class="visor__focus" role="group" aria-label="' + esc(focus.title) + '" aria-live="polite" data-visor-focus>' +
+      '<div class="visor__focus-head"><p class="visor__focus-title">' + esc(focus.title) + '</p>' +
+        '<button class="visor__close" type="button" data-visor-unfocus aria-label="Close">' + keyHtml('Esc') + '</button></div>' +
+      (st ? '<p class="visor__focus-status visor__focus-status--' + (TONES[st.tone] ? st.tone : 'neutral') + '"><i aria-hidden="true"></i>' + esc(st.text) + '</p>' : '') +
+      (focus.lines.length ? '<ul class="visor__focus-lines">' + focus.lines.map(function (l) { return '<li>' + esc(l) + '</li>'; }).join('') + '</ul>' : '') +
+      '</div>';
+  }
+  function mainHtml(main) {
+    if (focus && focus.lead) {
+      return '<button class="visor__main visor__main--lead" type="button" data-visor-lead' + (focus.lead.busy ? ' aria-busy="true"' : '') + '>' +
+        '<span>' + esc(focus.lead.label) + '</span></button>';
+    }
+    return '<a class="visor__main" data-visor-act="' + esc(main.id) + '" ' + actionAttrs(main) + '>' +
+      '<span>' + esc(main.label) + '</span>' + keyHtml(main.key) + '</a>';
+  }
+
   // ---------- drawing ----------
   var root = null, sheet = null, returnFocus = null;
   var NS = 'http://www.w3.org/2000/svg';
@@ -189,19 +248,21 @@
   }
   function glassHtml(id) {
     var acts = actionsFor(id), main = acts[0], C = craft();
-    var sprite = C && typeof C.spriteSrc === 'function' ? C.spriteSrc(id) : '';
+    // Your picture on the glass is you wearing the visor (task 1005218); an older craft-mode
+    // without that picture still hands over the whole figure.
+    var sprite = C && typeof C.portraitSrc === 'function' ? C.portraitSrc(id) : (C && typeof C.spriteSrc === 'function' ? C.spriteSrc(id) : '');
     var n = credits();
     return frameSvg() +
       (scene.place ? '<p class="visor__place">' + esc(scene.place) + '</p>' : '') +
       progressHtml() +
+      focusHtml() +
       '<div class="visor__foot">' +
         '<div class="visor__me">' +
-          (sprite ? '<img class="visor__sprite" src="' + esc(sprite) + '" alt="" width="250" height="290" decoding="async">' : '') +
+          (sprite ? '<img class="visor__sprite" src="' + esc(sprite) + '" alt="" width="32" height="32" decoding="async">' : '') +
           '<span class="visor__who"><span class="visor__name">' + esc(NAMES[id]) + '</span>' +
           '<span class="visor__credits" data-visor-credits>' + creditsHtml(n) + '</span></span>' +
         '</div>' +
-        '<a class="visor__main" data-visor-act="' + esc(main.id) + '" ' + actionAttrs(main) + '>' +
-          '<span>' + esc(main.label) + '</span>' + keyHtml(main.key) + '</a>' +
+        mainHtml(main) +
         '<div class="visor__hints">' + scene.actions.map(function (a, i) { return a.lead ? placeHintHtml(a, i) : ''; }).join('') + acts.slice(1).map(hintHtml).join('') +
           '<button class="visor__hint visor__hint--sheet" type="button" data-visor-sheet aria-expanded="false" aria-controls="visor-sheet">' +
             '<span class="visor__dots" aria-hidden="true"></span>' + keyHtml(SHEET_KEY) + '<span>Actions</span></button>' +
@@ -325,6 +386,8 @@
     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-unfocus]')) { dropFocus(); return; }
+    if (t.closest('[data-visor-lead]')) { if (focus && focus.lead && !focus.lead.busy) { closeSheet(false); focus.lead.run(); } 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; }
@@ -386,6 +449,9 @@
 
   window.OTBVisor = {
     scene: registerScene,
+    // a scene's pick: OTBVisor.focus({ title, status, lines, lead: { label, run }, onClose }) or focus(null)
+    focus: setFocus,
+    focused: function () { return focus ? focus.key : null; },
     render: render,
     open: openSheet,
     close: function () { closeSheet(true); },

package/modules/hall-ui/records/characters.md

@@ -0,0 +1,19 @@
+# The characters — the three pictures, their colours, and where each is worn (task 1005218; ADR 0405)
+
+Covers: `public/characters/*.png`, the character parts of `craft-mode.js` (creation doors, the top-bar chip), the `--char-*` tokens in `style.css`, and the character's colour on the visor (`visor.css`). The visor itself is in `visor.md`; character creation's behaviour is task 1005147's and is unchanged.
+
+## What it settled
+
+- **The second look.** 64 by 64 pixel art, two animals in one body, as aliens in the Helm night. One animal gives the whole head, the other the whole body: Artisan a ram on a lizard with the long spanner, Artist an ibis on an octopus with the light-brush, Patron a falcon on a lion with the staff of office. They stand three-quarters to the viewer on a lit disc. The six rules the owner's feedback set (recognisable animals, not childish, a role tool, a 2.5D stance, simple shapes, one light) are the header of the drawing script.
+- **The pictures are drawn, never edited.** `node docs/design/characters/v2/draw-characters.js --hall` writes all nine files: `<id>.png` (the whole figure, 64 by 64: the creation doors), `<id>-face.png` (the head, 32 by 32: the top-bar chip) and `<id>-visor.png` (the head wearing the visor, 32 by 32: the visor's corner). `craft-mode.js` hands them out as `spriteSrc`, `faceSrc` and `portraitSrc`.
+- **One colour each** (`style.css`, on `html`, beside the sprite rules): `--char-artisan` is the accent, `--char-artist` a violet and `--char-patron` a gold, both mixed from the hall's own tokens (ADR 0405 §2). No colour is typed in.
+- **Where the colour is worn.** The creation door's name; and, in game mode, the visor: `.visor[data-character]` sets `--char` and re-points `--accent`, `--accent-ink` and `--accent-lift` at it, so the frame's lines, the sight, the name, the picture's rim, the one button and the segment being built all follow with no rule of their own. An Artisan's glass is exactly what it was.
+- **Pixel art scales by nearest pixel** (`image-rendering: pixelated`) everywhere a picture is shown.
+
+## Not done
+
+- A scene's own buttons keep the hall's accent under a violet or gold glass (the Governor City's "decide" button). ADR 0403's follow-up tasks move them to the visor.
+- The visor shows the 32px head at 56px (36px on a phone), which is not a whole multiple, so a few pixels are uneven.
+- The pictures keep their own fixed colours when a host re-themes its accent.
+
+Tests: `tests/character_creation.mjs` (the nine files, their sizes, the chip's picture) and `tests/hall_visor.mjs` (the portrait, the colour on the glass per character).

package/modules/hall-ui/records/home-runner.md

@@ -0,0 +1,19 @@
+# Your runner on Home's towers — send it, see it, recall it (task 1005243, goal 1000142)
+
+Covers: `home-runner.js` (new), the tower pick and runner marker in `home-city-draw.js` / `home-city.css`, the visor's card (`visor.js` `OTBVisor.focus`, `visor.css` `.visor__focus*`), and the read `GET /api/bongos/autonomy/me/goals/:goalId/stats` (`modules/autonomy`). Game mode only.
+
+## What it settled
+
+- **The owner's brief (2026-11-12):** putting your Autobongos runner to work should feel like putting a builder on a building in a base-building game, and stay uncluttered. In game mode you tap a tower on Home (a tower is a goal), the visor offers **Send runner here**, and the tower then carries your runner. Tap it again for what it has done there and **Recall runner**.
+- **One tower at a time (owner, 2026-11-12).** Sending sets your goal picks to that one goal (`PUT /autonomy/me/goals`) and switches on any of your devices that are stopped (`POST /autonomy/runners/:host/run`). Recall switches them off and leaves the pick. Several picks made in Settings are "working on several goals": no tower carries the marker until you send it somewhere.
+- **ADR 0403 kept:** the scene only gets picked (the tower is lit and edged in the accent); the words and the one button are the visor's. `OTBVisor.focus({ title, status, lines, lead: { label, run }, onClose })` is the general mechanism: a scene's pick puts a small card on the glass and its action takes the accent button; Escape (or the card's Esc mark, or a tap on open ground) closes it before the options menu sees the press, and the character's own main action comes back. This answers ADR 0403 §4's open question for one action.
+- **Who sees it:** only a viewer the server says may run a runner (`GET /autonomy/fence` → `scope.may_run`, the `autonomy.run` atom). Signed out, without the atom, or in classic mode a tower stays the plain link to its goal and nothing is new.
+- **The marker** is the agent's robot face in the accent colour (yours, not anyone's agent), ringed by its state: working (accent ring that turns, CSS only, stilled by the hall's reduced-motion rule), starting, resting (dotted info ring), ready (soft ring), recalled (faded). It replaces the agent face `/home/city` would draw on that tower. Tapping it picks its tower.
+- **The numbers are the ledger's**, never the runner's own report: tasks the caller's runner shipped in that goal (`claims.autonomous` + outcome `shipped`), the tokens their sessions took (`session_records.total_tokens`), their average length, and the goal's `ready`/`active` tasks. Time left is that count × the average and is shown only when there is an average ("about 3 h"); with no runner history there it promises no time. The device's face (Running, Resting until 12:31 · 42 min, Device is off…) is `runner-button.js` `buttonState`, the same decision the Settings card draws.
+- **Not yet:** the percent of your Claude usage limit. That number lives only on the runner's PC; task 1005244 has the runner report it in its check-in.
+
+## Looking at it
+
+`hall-preview-fixture` in `.claude/launch.json` (port 4602, `--fixture-me`; the plain preview borrows the live `/me`, whose character may not be the Artisan). Set `localStorage hall-game=on`, `OTBCraftMode.setCharacter('artisan')`, and edit `autonomy__fence.json` / `autonomy__runners.json` to a project that allows goals (the checked-in fence has the switch off and no goals, which renders "Closed to runners" — a real state). The harness reads fixtures per request, so `OTBHomeRunner.refresh()` picks a change up without a restart. Fixtures added: `autonomy__me__goals__stats.json`, `autonomy__me__goals.put.json`.
+
+Tests: `tests/home_runner.mjs` (the card and marker decisions, run for real), `tests/autonomy_runner_goal_stats.mjs` (the read and route), `tests/hall_visor.mjs` (the card on the glass, its button, Escape order).

package/modules/hall-ui/records/visor.md

@@ -20,6 +20,9 @@ The visor is the control and the scene is the view: every main call to action in
 - **A visor fix that came with it.** The sheet had a click listener of its own inside `#visor`'s, so every row ran twice; a toggle row undid itself. The sheet's listener is gone.
 - **Not done:** the tour still spots the pills it explains, which are off the glass in game mode. Tests: `tests/hall_sky_visor.mjs` (both pages' own markup, the real visor and sheets, in a real browser).
 
+## The glass wears your character’s colour (task 1005218, ADR 0405)
+
+The frame’s lines, the sight, your name, the rim of your picture and the accent on the glass (the one button, the segment being built) are the held character’s one colour, and the picture is your character’s head wearing the visor. Where the sections below say the lines are ice or the button is the accent, read "the character’s colour"; for an Artisan the two are the same. The detail is in `characters.md`.
 ## Home's gallery on the glass (task 1005211)
 
 - **What left the gallery in game mode** (`home-gallery.css`, under `html.visor-on`): the order tabs (Most popular, Latest), the ways (The full gallery, Your studio), the two arrows and the full-screen button. A work's label, its heart and a piece in the full gallery stay: they are looking at the art, not leaving it.
@@ -39,6 +42,10 @@ The glass was redrawn to the owner's mock-up "Cloud city: in the visor, minimal"
 - **Scenes.** The top arc, the notch and the place sit inside the top 64px (`--visor-arc`; the segments under them take the inset to 88px, `--visor-inset-top`), so no scene's top row is struck through. Home no longer shifts its greeting row left (there is no pill top-right to clear). The city's door rises above the foot row at every width, because the accent button is centred where the door stood. The sky's `visor-on` offsets are unchanged.
 - **Looking at it.** The stand-in scene in `tests/hall_visor.mjs` over the hall's real sheets; put a bright gradient behind it to check midday.
 
+## A scene's pick on the glass (task 1005243)
+
+`OTBVisor.focus({ key, title, status: { text, tone }, lines, lead: { label, run }, onClose })` puts a small card above the accent button (the night panel between two strong hairlines, like the sheet) and hands `lead` the accent button while it is up; `focus(null)` takes both away. Escape closes it in capture before the options menu, but never while the sheet is open. First user: Home's towers and your runner (`records/home-runner.md`).
+
 ## What it settled (task 1005148)
 
 - **The first look (2026-11-10, five mock-up rounds; replaced by the minimal visor above).** A quiet layout with "hairline instruments" from the helmet round: thin curved visor lines across the top, 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. No tracker or radar (tried and dropped), no clipped corners: the pills stay round (DESIGN.md "pill or nothing"). No glow (DESIGN.md's rejected near-black-plus-neon HUD). The frame is one SVG in a 1000×1000 box stretched over the stage with non-scaling strokes, so it is a hairline at every size.

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.94",
+  "version": "1.24.96",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.94",
+      "version": "1.24.96",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.94",
+  "version": "1.24.96",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",