@bongos/core 1.21.113 → 1.21.115

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

@@ -1,19 +1,28 @@
 // modules/hall-ui/public/city.js — THE GOVERNOR CITY's home, wired (task
-// 1004524, goal 1000125, R02).
+// 1004524, goal 1000125, R02; alive since task 1004685).
 //
-// city-draw.js computes the city as data; this file reads the three feeds,
-// hands them to GovCity.cityModel(), and turns its lists into DOM: SVG paths
-// for the ground and the buildings, one span per parcel (CSS offset-path) and
-// one per pin. It also owns the sun/moon switch and the stage's fit to the
-// window. No innerHTML anywhere: every node is created, and every docket string
-// lands as text or an attribute.
+// city-draw.js computes the city as data; this file reads the feeds, hands
+// them to GovCity.cityModel(), and turns its lists into DOM: SVG paths for
+// the ground and the buildings, one span per parcel and per sky pod (CSS
+// offset-path), one per pin, light shaft and Lead plate, and one button per
+// civic building that opens its card in place. It also owns the sun/moon
+// switch and the stage's fit to the window. No innerHTML anywhere: every node
+// is created, and every docket string lands as text or an attribute.
 //
 // THE FEEDS (all GETs, all gated server-side):
 //   /api/bongos/government/docket  the pins and the one line (task 1004523)
 //   /api/bongos/goals              the open goals: one district each
 //   /api/bongos/goals/rollups      each goal's task counts: a building per task
-// A feed that fails leaves its part of the city out (no pins, or no districts)
-// and the line says the docket could not be read; it never draws sample data.
+// and, for the living city (task 1004685), the reads gov-living.js takes:
+//   government/constitution (the plaque's form of government), tasks/claimable
+//   (the active claims: one sky pod each), tasks?status=active (which goal a
+//   claim's task is in), public/cost-summary (the spend conduit and the
+//   plaque), builders/roster and /me (who leads, who the viewer is), blockers,
+//   autonomy/fence, moving, and the government's own reads (laws, Leads, the
+//   treasury, the presets, the counts). All of it is real: the prototype
+//   overlay is gone (task 1004717).
+// A feed that fails leaves its part of the city out; it never draws sample
+// data. Without gov-living.js the page draws the city it drew before.
 //
 // THE SWITCH. Light and dark use the hall's own preference ('hall-theme' in
 // localStorage, else the OS setting) and the hall's own attribute
@@ -22,7 +31,12 @@
 // the mode, so a toggle redraws the city from the last feeds (no refetch).
 //
 // MOTION is CSS only (city.css); nothing here animates. The scale write on
-// resize is layout, not motion.
+// resize is layout, not motion; the card changes a class.
+//
+// ANSWERING. A building's card takes its first ask in place (task 1004702, the
+// owner's pick) through the deck's own sender (street-deck.js GovDeck.sendAnswer:
+// the desk row's real route, never a new one); its door leads to the decision
+// deck on the street (/street#deck=<building>) for the rest.
 
 (function () {
   'use strict';
@@ -36,10 +50,33 @@
     goals: '/api/bongos/goals',
     rollups: '/api/bongos/goals/rollups',
   };
+  // the living city's reads (task 1004685), fetched only when gov-living.js is on the page
+  var LIVING_FEEDS = {
+    // the counts every surface prints, answered once by the server (task 1004716)
+    counts: '/api/bongos/government/counts',
+    constitution: '/api/bongos/government/constitution',
+    // the project's laws in force (task 1004706)
+    laws: '/api/bongos/government/laws',
+    // who leads each building, and the owner seat an unseated one falls to (task 1004709)
+    leads: '/api/bongos/government/leads',
+    // the pots each goal draws from, the reserve, the spend cap (task 1004712)
+    treasury: '/api/bongos/government/treasury',
+    claims: '/api/bongos/tasks/claimable?limit=1',
+    tasks: '/api/bongos/tasks?status=active&limit=200',
+    cost: '/api/bongos/public/cost-summary',
+    roster: '/api/bongos/builders/roster',
+    me: '/api/bongos/me',
+    blockers: '/api/bongos/blockers?limit=100',
+    fence: '/api/bongos/autonomy/fence',
+    moving: '/api/bongos/moving',
+  };
 
   var $ = function (id) { return document.getElementById(id); };
   var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
-  var data = { docket: null, goals: [], rollups: [], loaded: false };
+  var data = { docket: null, goals: [], rollups: [], loaded: false, raw: {} };
+  var model = null;
+  var openKey = null;
+  var drewLiving = false;
 
   // ---------- light / dark ----------
   // A choice made on this page when storage is blocked (private mode) still
@@ -95,7 +132,9 @@
     // (task 1004544); the full-screen switch resizes it and fires a resize.
     var main = $('hall-main');
     var w = (main && main.clientWidth) || window.innerWidth || 1440, h = (main && main.clientHeight) || window.innerHeight || 900;
-    var s = Math.min(w / 1000, h / 900);
+    // On a phone the city stands closer (task 1004685): the civic quarter fills the
+    // width and the far corners of the ground bleed off, as a plate would.
+    var s = Math.min(w < 640 ? w / 700 : w / 1000, h / 900);
     stage.style.setProperty('--city-scale', String(Math.round(s * 1000) / 1000));
   }
 
@@ -105,15 +144,50 @@
       .then(function (r) { return r && r.ok ? r.json() : null; })
       .catch(function () { return null; });
   }
+  // Through gov-feeds.js when it is on the page: one read per feed per page view,
+  // shared with the shell's Governing tally, which therefore prints these counts.
+  function readFeeds() {
+    var F = window.GovFeeds;
+    var keys = ['docket', 'goals', 'rollups'];
+    if (window.GovLiving) Object.keys(LIVING_FEEDS).forEach(function (k) { keys.push(k); });
+    if (F && typeof F.read === 'function') return F.read(keys);
+    return Promise.all(keys.map(function (k) { return getJson(FEEDS[k] || LIVING_FEEDS[k]); })).then(function (res) {
+      var raw = {};
+      keys.forEach(function (k, i) { raw[k] = res[i]; });
+      return raw;
+    });
+  }
   function load() {
-    return Promise.all([getJson(FEEDS.docket), getJson(FEEDS.goals), getJson(FEEDS.rollups)]).then(function (res) {
-      data.docket = res[0] && Array.isArray(res[0].matters) ? res[0] : null;
-      data.goals = res[1] && Array.isArray(res[1].goals) ? res[1].goals : [];
-      data.rollups = res[2] && Array.isArray(res[2].rollups) ? res[2].rollups : [];
+    return readFeeds().then(function (raw) {
+      data.raw = raw;
+      data.docket = raw.docket && Array.isArray(raw.docket.matters) ? raw.docket : null;
+      data.goals = raw.goals && Array.isArray(raw.goals.goals) ? raw.goals.goals : [];
+      data.rollups = raw.rollups && Array.isArray(raw.rollups.rollups) ? raw.rollups.rollups : [];
+      data.living = livingOf(raw);
       data.loaded = true;
       draw(effectiveTheme());
     });
   }
+  // The living model (gov-living.js) over the same reads; null when the page has no model.
+  function livingOf(raw) {
+    var G = window.GovLiving;
+    if (!G || typeof G.livingModel !== 'function') return null;
+    if (window.GovFeeds) return window.GovFeeds.model(raw, Date.now());
+    try {
+      return G.livingModel({
+        docket: raw.docket, constitution: raw.constitution, goals: raw.goals, rollups: raw.rollups, blockers: raw.blockers,
+        fence: raw.fence, claims: raw.claims, tasks: raw.tasks, moving: raw.moving, cost: raw.cost, roster: raw.roster,
+        me: raw.me, laws: raw.laws, leads: raw.leads, counts: raw.counts, now: Date.now(),
+      });
+    } catch (_) { return null; }
+  }
+  // the counts this page prints: the one rule
+  function countsNow() {
+    var F = window.GovFeeds, L = window.GovLiving;
+    if (!data.living) return null;
+    if (F) return F.countsFrom(data.living);
+    return L ? L.countsOf(data.living) : null;
+  }
 
   // ---------- drawing ----------
   function clear(el) { while (el && el.firstChild) el.removeChild(el.firstChild); }
@@ -124,9 +198,19 @@
     el.setAttribute('stroke', p.s);
     if (p.dash && p.dash !== 'none') el.setAttribute('stroke-dasharray', p.dash);
     el.setAttribute('stroke-width', String(p.w || 1));
+    if (p.cls) el.setAttribute('class', p.cls);
     return el;
   }
+  // A part of a building that moves (or stands at its still frame) is its own group.
+  function partEl(part) {
+    var g = document.createElementNS(SVG_NS, 'g');
+    if (part.cls) g.setAttribute('class', part.cls);
+    if (part.style) Object.keys(part.style).forEach(function (k) { g.style.setProperty(k, part.style[k]); });
+    part.polys.forEach(function (p) { g.appendChild(pathEl(p)); });
+    return g;
+  }
   function span(cls) { var el = document.createElement('span'); el.className = cls; return el; }
+  function node(tag, cls, text) { var el = document.createElement(tag); if (cls) el.className = cls; if (text != null) el.textContent = String(text); return el; }
 
   function drawPin(pin) {
     var el = span('city-pin city-pin--' + pin.state);
@@ -140,6 +224,24 @@
     var head = span('city-pin__head');
     // only the urgent tier pulses; a settled pin is a plain grey dot, no mark (task 1004569)
     if (pin.state === 'urgent') head.appendChild(span('city-pin__ring'));
+    // the age ring: how long the oldest ask on you has waited, full at two weeks (task 1004685)
+    if (pin.age != null) {
+      var ring = document.createElementNS(SVG_NS, 'svg');
+      ring.setAttribute('class', 'city-pin__age');
+      ring.setAttribute('viewBox', '0 0 32 32');
+      ring.setAttribute('aria-hidden', 'true');
+      var track = document.createElementNS(SVG_NS, 'circle');
+      track.setAttribute('cx', '16'); track.setAttribute('cy', '16'); track.setAttribute('r', '14');
+      track.setAttribute('class', 'city-pin__age-track');
+      var arc = document.createElementNS(SVG_NS, 'circle');
+      arc.setAttribute('cx', '16'); arc.setAttribute('cy', '16'); arc.setAttribute('r', '14');
+      arc.setAttribute('class', 'city-pin__age-arc');
+      arc.setAttribute('pathLength', '100');
+      arc.setAttribute('stroke-dasharray', Math.round(pin.age * 100) + ' 100');
+      ring.appendChild(track);
+      ring.appendChild(arc);
+      head.appendChild(ring);
+    }
     if (pin.state !== 'settled') {
       var svg = document.createElementNS(SVG_NS, 'svg');
       svg.setAttribute('width', '14');
@@ -172,26 +274,333 @@
     return el;
   }
 
+  // one chrome pod per agent; its still frame stands at --pod-at along the lane
+  function drawPod(lane, pod) {
+    var el = span(lane.orbit ? 'city-pod city-pod--orbit' : 'city-pod');
+    el.setAttribute('data-lane', lane.key);
+    if (pod.task_id) el.setAttribute('data-task', pod.task_id);
+    el.style.offsetPath = "path('" + lane.d + "')";
+    el.style.setProperty('--pod-at', pod.at + '%');
+    el.style.animationDuration = pod.dur + 's';
+    el.style.animationDelay = pod.delay + 's';
+    return el;
+  }
+
+  function drawShaft(sh) {
+    var el = span('city-shaft');
+    el.setAttribute('data-building', sh.building);
+    el.style.left = sh.x + 'px';
+    el.style.top = (sh.y - sh.h) + 'px';
+    el.style.height = sh.h + 'px';
+    el.appendChild(span('city-shaft__ring'));
+    return el;
+  }
+
+  // A seated Lead's plate stands at rest; "owner" (a building nobody leads yet)
+  // shows only while its building is pointed at or focused, or its card is open,
+  // so five plates saying "owner" do not crowd the quarter (a class, no motion).
+  function showPlate(key, on) {
+    var sky = $('citySky');
+    var el = sky && sky.querySelector ? sky.querySelector('.city-plate--owner[data-building="' + key + '"]') : null;
+    if (!el) return;
+    var base = String(el.className || '').replace(/\s*\bcity-plate--shown\b/g, '');
+    el.className = on || openKey === key ? base + ' city-plate--shown' : base;
+  }
+  function hoverReveals(el, key) {
+    el.addEventListener('mouseenter', function () { showPlate(key, true); });
+    el.addEventListener('mouseleave', function () { showPlate(key, false); });
+    el.addEventListener('focus', function () { showPlate(key, true); });
+    el.addEventListener('blur', function () { showPlate(key, false); });
+  }
+  function drawPlate(c) {
+    var el = span(c.plate.lead ? 'city-plate' : 'city-plate city-plate--owner' + (openKey === c.key ? ' city-plate--shown' : ''));
+    el.setAttribute('data-building', c.key);
+    el.style.left = c.plate.x + 'px';
+    el.style.top = c.plate.y + 'px';
+    el.textContent = c.plate.text;
+    el.addEventListener('click', function () { openCard(c.key); });
+    return el;
+  }
+
+  // a count in the label every surface prints (gov-living.js COUNT_WORDS)
+  function countText(c) {
+    var L = window.GovLiving;
+    var w = function (k, n) { return L ? L.countWords(k, n) : k === 'on_you' ? 'to do' : 'wait on others'; };
+    return c.on_you ? c.on_you + ' ' + w('on_you', c.on_you) : c.on_others ? c.on_others + ' ' + w('on_others', c.on_others) : c.open ? c.open + ' moving' : 'nothing open';
+  }
+  // who holds it: a Lead, or the owner's seat (GET /government/leads); unknown names nobody
+  function hitLabel(c) {
+    var who = c.card.lead ? ', led by ' + c.card.plate : c.card.plate ? ', held by the owner' : '';
+    return c.name + who + ': ' + c.card.fact.text + ', ' + countText(c);
+  }
+  function drawHit(c) {
+    var el = node('button', 'city-hit');
+    el.setAttribute('type', 'button');
+    el.setAttribute('data-building', c.key);
+    el.setAttribute('aria-label', hitLabel(c));
+    el.setAttribute('aria-haspopup', 'dialog');
+    el.style.left = c.hit.x + 'px';
+    el.style.top = c.hit.y + 'px';
+    el.style.width = c.hit.w + 'px';
+    el.style.height = c.hit.h + 'px';
+    el.addEventListener('click', function () { openCard(c.key, el); });
+    hoverReveals(el, c.key);
+    return el;
+  }
+
+  function drawPlaque(tiles) {
+    var el = $('cityPlaque');
+    if (!el) return;
+    clear(el);
+    (tiles || []).forEach(function (t) {
+      var tile = node('span', 'city-plaque__tile');
+      tile.setAttribute('data-key', t.key);
+      tile.appendChild(node('span', 'city-plaque__figure', t.figure));
+      tile.appendChild(node('span', 'city-plaque__words', t.words));
+      el.appendChild(tile);
+    });
+    if (tiles && tiles.length) el.removeAttribute('hidden'); else el.setAttribute('hidden', '');
+  }
+
   function draw(mode) {
-    var model = City.cityModel({ docket: data.docket, goals: data.goals, rollups: data.rollups, mode: mode, now: Date.now() });
-    var flat = $('cityFlat'), blds = $('cityBlds'), parcels = $('cityParcels'), pins = $('cityPins');
-    clear(flat); clear(blds); clear(parcels); clear(pins);
+    model = City.cityModel({
+      docket: data.docket, goals: data.goals, rollups: data.rollups, mode: mode, now: Date.now(),
+      living: data.living || null, constitution: data.raw.constitution || null, counts: countsNow(),
+    });
+    var flat = $('cityFlat'), blds = $('cityBlds'), sky = $('citySkyLanes'), parcels = $('cityParcels'), pods = $('citySky'), pins = $('cityPins'), hits = $('cityHits');
+    clear(flat); clear(blds); clear(sky); clear(parcels); clear(pods); clear(pins); clear(hits);
     model.flat.forEach(function (p) { flat.appendChild(pathEl(p)); });
+    var civicKeys = {};
+    (model.civic || []).forEach(function (c) { civicKeys[c.key] = true; });
     model.blds.forEach(function (b) {
       var g = document.createElementNS(SVG_NS, 'g');
       g.setAttribute('data-key', b.key);
+      if (b.quiet) g.setAttribute('data-quiet', '');
+      // a pointer finds a building by its own painted faces, so the one in front wins
+      if (civicKeys[b.key]) { g.setAttribute('data-civic', b.key); g.addEventListener('click', function () { openCard(b.key); }); hoverReveals(g, b.key); }
       b.polys.forEach(function (p) { g.appendChild(pathEl(p)); });
+      (b.parts || []).forEach(function (part) { g.appendChild(partEl(part)); });
       blds.appendChild(g);
     });
     model.parcels.forEach(function (pc) { parcels.appendChild(drawParcel(pc)); });
-    model.pins.forEach(function (pin) { pins.appendChild(drawPin(pin)); });
+    if (model.living) {
+      // the capsules plug in once, on the first living drawing; a redraw does not replay it
+      var st = $('cityStage');
+      if (drewLiving && st) st.setAttribute('data-drawn', '');
+      drewLiving = true;
+      if (sky) model.sky.forEach(function (p) { sky.appendChild(pathEl(p)); });
+      if (pods) {
+        model.shafts.forEach(function (sh) { pods.appendChild(drawShaft(sh)); });
+        model.lanes.forEach(function (L) {
+          L.pods.forEach(function (pod) { pods.appendChild(drawPod(L, pod)); });
+          // a lane past its convoy says how many more agents ride it
+          if (L.more && L.more.x != null) {
+            var more = span('city-lane__more');
+            more.textContent = '+' + L.more.n;
+            more.style.left = L.more.x + 'px';
+            more.style.top = L.more.y + 'px';
+            pods.appendChild(more);
+          }
+        });
+        model.civic.forEach(function (c) { if (!c.plate.hidden) pods.appendChild(drawPlate(c)); });
+      }
+      if (hits) model.civic.forEach(function (c) { hits.appendChild(drawHit(c)); });
+    }
+    model.pins.forEach(function (pin) {
+      var el = drawPin(pin);
+      if (model.living) el.firstChild.addEventListener('click', function () { openCard(pin.building); });
+      pins.appendChild(el);
+    });
     var lineEl = $('cityLine');
     if (lineEl && data.loaded) lineEl.textContent = model.line;
     var stage = $('cityStage');
     if (stage) stage.setAttribute('aria-label', model.label);
+    var start = $('cityStart');
+    if (start && model.cta) {
+      start.textContent = model.cta.label;
+      start.setAttribute('href', model.cta.href);
+      start.setAttribute('aria-label', model.cta.aria);
+    }
+    drawPlaque(model.plaque || null);
+    if (openKey) renderCard(openKey);
     return model;
   }
 
+  // ---------- the card a building opens in place (task 1004702) ----------
+  // A glass panel beside the building, over a light hush with the building left
+  // clear: its name, who holds it, one fact and what waits there; the building's
+  // first ask, answered in place (the owner's pick, 2026-10-13) through the same
+  // route the deck takes (GovDeck.sendAnswer: the desk row's own request); then
+  // two doors, "decide all N in a row" to the deck and "go inside" to the
+  // building on the street. Without the deck's scripts it is the row and doors.
+  var here = { done: {}, busy: false, said: '', room: null, roomAsked: false, cv: null };
+  function civicOf(key) { return model && model.civic ? model.civic.filter(function (c) { return c.key === key; })[0] || null : null; }
+  // The building's button: the keyboard's way in, and where the card is placed beside.
+  function hitFor(key) {
+    var hits = $('cityHits');
+    return hits && hits.querySelector ? hits.querySelector('[data-building="' + key + '"]') : null;
+  }
+  // the building's pin head, else its button: what the hairline and the halo find
+  function anchorFor(key) {
+    var pins = $('cityPins');
+    var pin = pins && pins.querySelector ? pins.querySelector('[data-building="' + key + '"]') : null;
+    return (pin && pin.firstChild) || hitFor(key);
+  }
+  function openCard(key, from) {
+    var was = openKey;
+    openKey = key;
+    if (was !== key) { here.said = ''; here.cv = null; }
+    if (was && was !== key) showPlate(was, false);
+    showPlate(key, true);
+    var el = renderCard(key);
+    if (!el) return;
+    place(el, from || hitFor(key));
+    var first = el.querySelector ? el.querySelector('.ask__opt, .city-card__go, .city-card__enter') : null;
+    if (first && first.focus) first.focus();
+  }
+  function closeCard() {
+    var el = $('cityCard');
+    var key = openKey;
+    openKey = null;
+    here.said = ''; here.cv = null;
+    if (key) showPlate(key, false);
+    if (el) { clear(el); el.setAttribute('hidden', ''); }
+    clear($('citySpot'));
+    var hits = $('cityHits');
+    if (key && hits && hits.querySelector) { var b = hits.querySelector('[data-building="' + key + '"]'); if (b && b.focus) b.focus(); }
+  }
+  // the building's first ask, as the deck draws it (needs-you first, then the oldest)
+  function firstAsk(key) {
+    var K = window.GovDeck;
+    if (!K || !K.drawAsk || !data.living || !data.docket) return null;
+    var q = K.queueOf(data.living, { done: here.done, delegated: {}, skipped: [], extra: [] }, key);
+    if (!q.length) return null;
+    var cv = K.cardView(q[0], { docket: data.docket, room: here.room, constitution: data.raw.constitution, goals: (data.goals || []).filter(function (g) { return g && g.status === 'open'; }), now: Date.now(), viewerId: data.docket.viewer ? String(data.docket.viewer.id) : null });
+    // a sitting's ballot is read once, when a vote's card first needs it
+    if (cv && cv.card && cv.card.loading && !here.roomAsked) {
+      here.roomAsked = true;
+      getJson('/api/bongos/government/board/items').then(function (r) {
+        here.room = r && (Array.isArray(r.open) || Array.isArray(r.closed)) ? r : { open: [], closed: [] };
+        if (openKey) renderCard(openKey);
+      });
+    }
+    return cv;
+  }
+  function sentence(s) { var t = String(s || '').trim(); return t ? t.charAt(0).toUpperCase() + t.slice(1) + (/[.!?]$/.test(t) ? '' : '.') : ''; }
+  function renderCard(key) {
+    var el = $('cityCard');
+    var c = civicOf(key);
+    if (!el || !c) return null;
+    var card = c.card, K = window.GovDeck;
+    clear(el);
+    el.removeAttribute('hidden');
+    el.className = 'city-card gov-glass';
+    el.setAttribute('data-building', key);
+    el.setAttribute('aria-label', card.name);
+    var head = node('div', 'city-card__head');
+    var top = node('div', 'city-card__top');
+    top.appendChild(node('p', 'city-card__name', card.name));
+    var close = node('button', 'city-card__close');
+    close.setAttribute('type', 'button');
+    close.setAttribute('aria-label', 'Close');
+    close.setAttribute('aria-keyshortcuts', 'Escape');
+    close.appendChild(node('kbd', null, 'esc'));
+    close.addEventListener('click', closeCard);
+    top.appendChild(close);
+    head.appendChild(top);
+    // who holds it, one fact, and what waits there (salmon only while it is yours)
+    var hold = K && K.holdWords ? K.holdWords(data.living, key) : card.plate ? (card.lead ? 'Led by ' + card.plate + '.' : 'The owner holds it until a Lead is seated.') : '';
+    var words = [hold, card.fact && card.fact.text ? sentence(card.fact.text) : ''].filter(Boolean).join(' ');
+    var line = node('p', 'city-card__f', words);
+    var waits = K && K.waitWords ? K.waitWords(card.on_you, card.on_others) : sentence(countText(card));
+    line.appendChild(node('span', card.on_you ? 'city-card__count city-card__count--you' : 'city-card__count', (words ? ' ' : '') + waits));
+    head.appendChild(line);
+    el.appendChild(head);
+    var cv = firstAsk(key);
+    here.cv = cv;
+    if (cv) el.appendChild(K.drawAsk(document, cv, { pick: function (op) { answer(key, cv, op); } }, { inner: true, busy: here.busy, cls: 'city-ask' }));
+    if (here.said) {
+      var said = node('p', 'city-card__said', here.said);
+      said.setAttribute('role', 'status');
+      el.appendChild(said);
+    }
+    var acts = node('div', 'city-card__acts');
+    var n = card.on_you || card.on_others;
+    if (n) {
+      var go = node('a', 'city-card__go', n === 1 ? 'decide it on the deck' : 'decide all ' + n + ' in a row');
+      go.setAttribute('href', card.deck_href);
+      acts.appendChild(go);
+    }
+    var enter = node('a', 'city-card__enter', 'go inside');
+    enter.setAttribute('href', card.enter_href);
+    acts.appendChild(enter);
+    el.appendChild(acts);
+    return el;
+  }
+  // One answer, through the deck's own sender: the same request its desk row sends.
+  function send(req) {
+    return fetch(req.url, { method: req.method, credentials: 'same-origin', headers: { accept: 'application/json', 'content-type': 'application/json' }, body: JSON.stringify(req.body || {}) })
+      .then(function (r) {
+        return Promise.resolve(r && r.json ? r.json() : {}).catch(function () { return {}; })
+          .then(function (b) { return { ok: !!(r && r.ok), status: r ? r.status : 0, body: b || {} }; });
+      })
+      .catch(function () { return { ok: false, status: 0, body: {} }; });
+  }
+  function answer(key, cv, op) {
+    var K = window.GovDeck;
+    if (!K || here.busy || !op) return Promise.resolve(false);
+    if (op.plan && op.plan.mode === 'record') { here.said = 'This one is signed off with a recording: decide it on the deck.'; renderCard(key); return Promise.resolve(false); }
+    here.busy = true;
+    renderCard(key);
+    return K.sendAnswer(op, send).then(function (res) {
+      here.busy = false;
+      here.said = res.toast;
+      if (res.ok) {
+        here.done[cv.id] = true;
+        // every count on the page leaves out what was answered here (gov-feeds.js)
+        if (window.GovFeeds && window.GovFeeds.changed) window.GovFeeds.changed();
+      }
+      if (res.ok && res.stored) return load().then(function () { return true; });
+      if (openKey) { draw(painted || effectiveTheme()); var f = $('cityCard'); var first = f && f.querySelector ? f.querySelector('.ask__opt, .city-card__go') : null; if (first && first.focus) first.focus(); }
+      return res.ok;
+    });
+  }
+  // 1 / 2 / 3 answer the card's ask, as on the deck
+  function cardKey(e) {
+    if (!e) return;
+    if (e.key === 'Escape') { closeCard(); return; }
+    if (!here.cv || !openKey || e.ctrlKey || e.metaKey || e.altKey || !/^[1-3]$/.test(String(e.key))) return;
+    var op = here.cv.options[Number(e.key) - 1];
+    if (!op) return;
+    if (e.preventDefault) e.preventDefault();
+    answer(openKey, here.cv, op);
+  }
+  // Beside the building on a wide stage, over a light hush with the building
+  // clear and a hairline to its pin; a sheet along the foot on a phone (city.css).
+  function place(el, from) {
+    var main = $('hall-main');
+    if (!from || !main || typeof from.getBoundingClientRect !== 'function' || typeof main.getBoundingClientRect !== 'function') return;
+    var narrow = window.matchMedia ? window.matchMedia('(max-width: 640px)').matches : false;
+    if (narrow) { el.style.left = ''; el.style.top = ''; }
+    var K = window.GovDeck, layer = $('citySpot');
+    if (!layer && K && K.spot) {
+      layer = node('div', 'gov-spot city-spot');
+      layer.setAttribute('id', 'citySpot');
+      layer.setAttribute('aria-hidden', 'true');
+      main.appendChild(layer);
+    }
+    var c = civicOf(openKey);
+    if (K && K.spot && layer) { K.spot(document, layer, main, anchorFor(openKey) || from, el, { place: narrow ? null : el, top: 62, you: !!(c && c.card.on_you) }); return; }
+    if (narrow) return;
+    var r = from.getBoundingClientRect(), m = main.getBoundingClientRect();
+    var w = el.offsetWidth || 360, h = el.offsetHeight || 320;
+    var left = r.right - m.left + 14;
+    if (left + w > m.width - 16) left = r.left - m.left - w - 14;
+    var top = Math.max(76, Math.min(r.top - m.top - 12, m.height - h - 16));
+    el.style.left = Math.max(16, Math.round(left)) + 'px';
+    el.style.top = Math.round(top) + 'px';
+  }
+
   function boot() {
     var start = $('cityStart');
     if (start) start.setAttribute('href', City.STREET_HREF);
@@ -199,6 +608,17 @@
     if (btn) btn.addEventListener('click', toggleTheme);
     if (media && media.addEventListener) media.addEventListener('change', function () { if (!storedTheme()) draw(applyTheme()); });
     window.addEventListener('resize', fit);
+    var card = $('cityCard');
+    if (card) card.addEventListener('keydown', cardKey);
+    // the page's counts leave out what the card answered (gov-feeds.js)
+    if (window.GovFeeds && typeof window.GovFeeds.useSession === 'function') window.GovFeeds.useSession(function () { return { answered: Object.keys(here.done), extra: [] }; });
+    var frame = $('cityFrame');
+    // a click anywhere on the city but a building (its faces, its pin, its plate) closes the card
+    if (frame) frame.addEventListener('click', function (e) {
+      var t = e && e.target;
+      if (!openKey || (t && t.closest && t.closest('.city-hit, [data-civic], .city-pin__head, .city-plate'))) return;
+      closeCard();
+    });
     fit();
     painted = applyTheme();
     draw(painted);
@@ -206,6 +626,6 @@
     return load();
   }
 
-  window.GovCityPage = { boot: boot, draw: draw, load: load, fit: fit, FEEDS: FEEDS, THEME_KEY: THEME_KEY };
+  window.GovCityPage = { boot: boot, draw: draw, load: load, fit: fit, openCard: openCard, closeCard: closeCard, FEEDS: FEEDS, LIVING_FEEDS: LIVING_FEEDS, THEME_KEY: THEME_KEY };
   window.GovCityPage.ready = boot();
 }());