@bongos/core 1.21.112 → 1.21.114

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

@@ -173,9 +173,11 @@
     recheck: 'check again',
     // task 1004580: a work category renamed, retired, brought back, or a new one added
     rename: 'rename', retire: 'retire', restore: 'bring back', add: 'add',
+    // task 1004712: a dry pot's borrow from the reserve: lend it, lend half, or say no
+    answer: 'answer',
   });
   // What a row's chips ask, per act (a reason or an option is one tap, never text).
-  const ASKS = Object.freeze({ recheck: 'why', budget: 'monthly limit', unsign: 'why', decide: 'pick one', ratify_goal: 'which version', check: 'check', take_core: 'move to', rot: 'stale after', module_off: 'sure', invite: 'their GitHub name', object: 'why', force: 'why', switch_off: 'why', pause: 'why', deactivate: 'why', signoff: 'confirm', record: 'the recording', allow: 'which goal', tier: 'which tier', give: 'to whom', take: 'from whom', rename: 'new name', add: 'its name' });
+  const ASKS = Object.freeze({ recheck: 'why', budget: 'monthly limit', unsign: 'why', decide: 'pick one', ratify_goal: 'which version', check: 'check', take_core: 'move to', rot: 'stale after', module_off: 'sure', invite: 'their GitHub name', object: 'why', force: 'why', switch_off: 'why', pause: 'why', deactivate: 'why', signoff: 'confirm', record: 'the recording', allow: 'which goal', tier: 'which tier', give: 'to whom', take: 'from whom', rename: 'new name', add: 'its name', answer: 'lend from the reserve?' });
   // How a floor counts rows nobody is waiting on (desk rows), by its desk.
   const DESK_NOUNS = Object.freeze({
     'people.builders': 'builders', 'people.ranks': 'ranks', 'disputes.confirmed': 'to fix',
@@ -326,7 +328,8 @@
     });
     const first = actions.find((a) => a.ask);
     // deciding a blocker is picking one of its options: its chips stand open
-    const show = first && first.key === 'decide' && choices.decide ? 'decide' : null;
+    // (so is answering a borrow: lend, half or no, task 1004712)
+    const show = first && (first.key === 'decide' || first.key === 'answer') && choices[first.key] ? first.key : null;
     return { actions: actions, chips: first ? choices[first.key] : null, choices: choices, show: show, wait: actions.length ? '' : 'not from here', card: card };
   }
 

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

@@ -107,9 +107,11 @@
   function rect(x, y, w, h) { return 'M' + x + ' ' + y + 'h' + w + 'v' + h + 'h' + (-w) + 'Z'; }
   function ellipse(cx, cy, rx, ry) { return 'M' + (cx - rx) + ' ' + cy + 'a' + rx + ' ' + ry + ' 0 1 0 ' + (2 * rx) + ' 0a' + rx + ' ' + ry + ' 0 1 0 ' + (-2 * rx) + ' 0Z'; }
 
+  // T.depth (the living street's deeper side face, task 1004685) is the side's
+  // depth when a box names none; the prototype's theme has none, so 7.
   function box(out, T, x, G, w, h, tone, o) {
     o = o || {};
-    const d = o.d === undefined ? 7 : o.d, z = o.z || 0, base = G - z, y = base - h, dash = tone.dash || 'none';
+    const d = o.d === undefined ? (T && T.depth ? T.depth : 7) : o.d, z = o.z || 0, base = G - z, y = base - h, dash = tone.dash || 'none';
     push(out, 'M' + (x + w) + ' ' + y + 'L' + (x + w + d) + ' ' + (y - d) + 'L' + (x + w + d) + ' ' + (base - d) + 'L' + (x + w) + ' ' + base + 'Z', tone.r, tone.s, dash);
     push(out, 'M' + x + ' ' + y + 'L' + (x + d) + ' ' + (y - d) + 'L' + (x + w + d) + ' ' + (y - d) + 'L' + (x + w) + ' ' + y + 'Z', tone.t, tone.s, dash);
     push(out, rect(x, y, w, h), tone.f, tone.s, dash);
@@ -136,8 +138,8 @@
     if (o.brace) push(out, 'M' + x + ' ' + y + 'L' + (x + w) + ' ' + base + 'M' + (x + w) + ' ' + y + 'L' + x + ' ' + base, 'none', tone.s, '3 3');
   }
 
-  function gable(out, x, yTop, w, hr, tone) {
-    const d = 7;
+  function gable(out, x, yTop, w, hr, tone, depth) {
+    const d = depth || 7;
     push(out, 'M' + (x + w / 2) + ' ' + (yTop - hr) + 'L' + (x + w / 2 + d) + ' ' + (yTop - hr - d) + 'L' + (x + w + d) + ' ' + (yTop - d) + 'L' + (x + w) + ' ' + yTop + 'Z', tone.r, tone.s);
     push(out, 'M' + x + ' ' + yTop + 'L' + (x + w / 2) + ' ' + (yTop - hr) + 'L' + (x + w) + ' ' + yTop + 'Z', tone.f, tone.s);
   }
@@ -183,15 +185,15 @@
     if (kind === 'disputes') {
       box(out, T, x, G, 24, 40, C, { win: true, lit: lit });
       box(out, T, x + 24, G, 32, 84, C, { fins: 3, door: true });
-      gable(out, x + 24, G - 84, 32, 16, R);
+      gable(out, x + 24, G - 84, 32, 16, R, T.depth);
       box(out, T, x + 56, G, 24, 40, C, { win: true, lit: lit });
       return 102;
     }
     if (kind === 'people') {
       box(out, T, x, G, 34, 28, C, { door: true });
-      gable(out, x, G - 28, 34, 15, R);
+      gable(out, x, G - 28, 34, 15, R, T.depth);
       box(out, T, x + 40, G, 40, 36, C, { door: true, win: true, lit: lit });
-      gable(out, x + 40, G - 36, 40, 18, R);
+      gable(out, x + 40, G - 36, 40, 18, R, T.depth);
       return 58;
     }
     if (kind === 'planning') {
@@ -398,6 +400,14 @@
     return 'nothing open';
   }
 
+  // A district's name under its plot: a working area by its number (the title is
+  // the door's label and the hover), anything else its first words.
+  function districtName(title) {
+    const t = String(title || '');
+    const m = /^working area\s+(\d+)/i.exec(t);
+    return m ? 'area ' + m[1] : t.split(/\s+[—–:-]\s+/)[0];
+  }
+
   function pinState(state) {
     return state === 'needs' || state === 'moving' || state === 'settled' ? state : 'moving';
   }
@@ -479,6 +489,14 @@
 
   const FALLBACK_LINE = 'the docket could not be read just now';
 
+  // ---------- THE DEPTH lives in street-depth.js (task 1004685) ----------
+  // The living street's three planes (the goals' skyline, the civic row's
+  // structure and construction, the skylanes, the road, the readings as tiles)
+  // are GovStreetDepth's, found on its global when a street is drawn deep: it
+  // requires this file, so this file never requires it (no require cycle), and
+  // without it a deep street is drawn flat.
+  const depthKit = () => root.GovStreetDepth || null;
+
   // The whole street view as data.
   //   docket    GET /government/docket body, or null when it failed
   //   goals     GET /goals goals[] (only 'open' ones are drawn)
@@ -487,6 +505,11 @@
   //   mode      'dark' | 'light'
   //   now       ms since the epoch (for deadlines and the month)
   //   here      parseHash() of the address, or null
+  //   depth     true: the living street (task 1004685), in three planes; the
+  //             model gains `depth` and the civic row its deeper side face
+  //   living    GovLiving.livingModel() over the same feeds, or null (no Leads,
+  //             no agents, no construction: the deep street with real data only)
+  //   roster    GET /builders/roster body, or null (the people reading)
   function streetModel(input) {
     const opts = input || {};
     const docket = opts.docket && typeof opts.docket === 'object' && Array.isArray(opts.docket.matters) ? opts.docket : null;
@@ -495,8 +518,13 @@
     const now = Number(opts.now) || 0;
     const here = opts.here || null;
     const counts = docket && docket.counts ? docket.counts : { needs: 0, moving: 0, settled: 0 };
-    const needs = Math.max(0, Number(counts.needs) || 0);
-    const evening = !!docket && needs === 0;
+    // THE COUNTS (task 1004685): `counts` is gov-living.js countsOf, the numbers the
+    // city, the deck and the shell print; the header reads it when it is given
+    // (null: still reading, so "—"), and the docket's own counts only without it.
+    const shared = opts.counts !== undefined;
+    const sc = opts.counts || null;
+    const needs = shared ? Math.max(0, Number(sc && sc.on_you) || 0) : Math.max(0, Number(counts.needs) || 0);
+    const evening = !!docket && (shared ? !!sc && sc.on_you === 0 : needs === 0);
 
     const goals = (Array.isArray(opts.goals) ? opts.goals : []).filter((g) => g && g.status === 'open' && g.id != null);
     const byGoal = {};
@@ -512,6 +540,32 @@
     const reviewHeld = reviewHeldOf(docket);
     const queue = matters.filter((m) => m.building === 'review' && pinState(m.state) !== 'settled');
 
+    // the living street (task 1004685): the deeper civic row and its structure
+    const Dp = opts.depth ? depthKit() : null;
+    const deep = !!Dp;
+    const TD = deep ? Object.assign({}, T, { depth: Dp.DEPTH.side }) : T;
+    const living = deep && opts.living && Array.isArray(opts.living.buildings) ? opts.living : null;
+    const lb = {};
+    if (living) living.buildings.forEach((b) => { if (b && b.key) lb[b.key] = b; });
+    const struct = {};
+    const askById = {};
+    if (living && living.city && Array.isArray(living.city.asks)) living.city.asks.forEach((a) => { if (a && a.id) askById[a.id] = a; });
+    // SALMON ONLY FOR WHAT NEEDS YOU: on the living street a matter the government
+    // routes to another seat waits on someone else, so its pin and its windows stand
+    // in ink (the docket's own 'needs' is the viewer's before anyone was seated)
+    const seen = living ? matters.map((m) => (m.state === 'needs' && askById[m.id] && !askById[m.id].needs_you ? Object.assign({}, m, { state: 'moving' }) : m)) : matters;
+    const boardSeats = Math.max(1, ((bInfo.charter && Array.isArray(bInfo.charter.holders)) ? bInfo.charter.holders.length : 0) || 5);
+    const depthCtx = {
+      // a vote's tally: its matter's (real) or its ask's, over the seats that decide it
+      tallyOf: (c) => {
+        const m = c.sitting_id != null ? matters.find((x) => x.source === 'board' && x.ref && String(x.ref.id) === String(c.sitting_id)) : null;
+        const t = (m && m.tally) || (c.ask_id && askById[c.ask_id] && askById[c.ask_id].tally) || null;
+        const f = t ? Math.max(0, Number(t.for) || 0) : 0, ag = t ? Math.max(0, Number(t.against) || 0) : 0, op = t ? Math.max(0, Number(t.open) || 0) : 0;
+        const seats = Math.max(boardSeats, f + ag + op, 1);
+        return { for: f, against: ag, seats: Math.min(seats, 12) };
+      },
+    };
+
     // the road
     const flat = [];
     push(flat, rect(32, G, W - 64, 30), T.road, 'none');
@@ -525,7 +579,16 @@
       if (T.shadow !== 'none') push(flat, ellipse(s.x + s.w / 2 + 4, G + 2, s.w * 0.56, 5), T.shadow, 'none');
       if (s.k) {
         const polys = [];
-        roofs[s.k] = civic(polys, T, s.k, s.x, G, s.w, { evening: evening, reviewHeld: reviewHeld, fixes: City.rulesAtWork(docket) });
+        const st = { evening: evening, reviewHeld: reviewHeld, fixes: City.rulesAtWork(docket) };
+        if (deep) {
+          // the structure stands ON the roof, in front of its deeper top face,
+          // so it is drawn after the recipe (its core's foot plugs into the roof)
+          const r = civic(polys, TD, s.k, s.x, G, s.w, st) + (Dp.DEPTH.side - 7);
+          const sp = Dp.structureOf(TD, s.k, s.x, lb[s.k] || null, depthCtx);
+          sp.polys.forEach((p) => polys.push(p));
+          roofs[s.k] = Math.max(r, sp.top);
+          struct[s.k] = sp;
+        } else roofs[s.k] = civic(polys, T, s.k, s.x, G, s.w, st);
         blds.push({ key: s.k, polys: polys });
       } else {
         let wx = s.x + 2;
@@ -557,12 +620,21 @@
       if (k === 'review') return !reviewHeld ? 'empty seat' : queue.length ? queue.length + ' waiting' : 'nothing waiting';
       if (k === 'planning') return goals.length + (goals.length === 1 ? ' goal open' : ' goals open');
       if (readingFor[k]) return readingFor[k].figure;
+      // on the living street a building's line counts as the header does (needs you
+      // is what waits on your seats; what the government routed elsewhere waits on others)
+      const b = living ? lb[k] : null;
+      if (b && Array.isArray(b.asks)) {
+        const you = b.asks.filter((a) => a && a.state === 'needs' && a.needs_you).length;
+        const others = b.asks.filter((a) => a && a.state === 'needs' && !a.needs_you).length;
+        if (you) return you + ' to do';
+        if (others) return others + (others === 1 ? ' waits on others' : ' wait on others');
+      }
       return countsLine(bInfo[k] ? bInfo[k].counts : null);
     }
     const cols = segs.map((s) => s.k
       ? { key: s.k, x: s.x - 10, w: s.w + 20, name: s.k, title: s.k, state: civicState(s.k), strong: s.k === 'review' && !reviewHeld }
       // districts stand 10 apart, so their names keep to their own plot (and ellipsis there)
-      : { key: 'd:' + s.d, x: s.x - 4, w: s.w + 8, name: s.title, title: s.title, state: s.more ? 'on the goals page' : districtLine(byGoal[s.d]), strong: false });
+      : { key: 'd:' + s.d, x: s.x - 4, w: s.w + 8, name: districtName(s.title), title: s.title, state: s.more ? 'on the goals page' : districtLine(byGoal[s.d]), strong: false });
     const groups = GROUP_NAMES.map((n, gi) => {
       const mem = segs.filter((s) => s.g === gi);
       const x0 = mem[0].x, x1 = mem[mem.length - 1].x + mem[mem.length - 1].w;
@@ -572,7 +644,7 @@
     // one pin per building, in the tier of its most important matter (task 1004569)
     const pins = [];
     const byB = {};
-    matters.forEach((m) => { if (m.building !== 'review') (byB[m.building] = byB[m.building] || []).push(m); });
+    seen.forEach((m) => { if (m.building !== 'review') (byB[m.building] = byB[m.building] || []).push(m); });
     CIVIC_KEYS.forEach((k) => {
       const bp = City.buildingPin(byB[k], now);
       if (!bp) return;
@@ -616,20 +688,40 @@
       return { key: k, label: label, figure: figure, line: line, building: b, href: buildingHref(b), hot: !!docket && (r.hot === true || bNeeds), here: !!here && here.kind === 'building' && here.key === b, aria: label + ': ' + figure + '. Go to ' + b };
     });
 
-    const moving = Math.max(0, Number(counts.moving) || 0), settled = Math.max(0, Number(counts.settled) || 0);
+    const moving = shared ? (sc && sc.moving != null ? Math.max(0, Number(sc.moving) || 0) : null) : Math.max(0, Number(counts.moving) || 0);
+    const settled = Math.max(0, Number(counts.settled) || 0);
     const share = monthShare(opts.earnings, now);
     const pinCount = { needs: 0, moving: 0, settled: 0 };
     pins.forEach((p) => { const t = p.state === 'urgent' ? 'needs' : p.state; if (pinCount[t] != null) pinCount[t] += 1; });
-    return {
+    const hudNeeds = !docket || (shared && (!sc || sc.on_you == null)) ? '—' : String(needs);
+    const out = {
       mode: mode, width: W, evening: evening, reviewHeld: reviewHeld,
       flat: flat, blds: blds, crates: crates, cols: cols, groups: groups, pins: pins, doors: doors, signs: signs,
-      hud: { needs: docket ? String(needs) : '—', moving: docket ? String(moving) : '—', share: money(share), hot: needs > 0 },
+      hud: { needs: hudNeeds, moving: !docket || moving == null ? '—' : String(moving), share: money(share), hot: hudNeeds !== '—' && needs > 0, shared: shared },
       line: docket ? String(docket.line || '') : FALLBACK_LINE,
-      eveningLine: 'this month · ' + moving + ' moving · ' + settled + ' settled · ' + money(share) + ' to your share',
+      eveningLine: 'this month · ' + (moving == null ? '—' : moving) + ' moving · ' + settled + ' settled · ' + money(share) + ' to your share',
       label: 'The street: the nine civic buildings in the order work moves, and '
         + (goals.length === 1 ? 'one district' : goals.length + ' districts') + ', one for each open goal'
         + (docket ? '. Pins: ' + pinCount.needs + ' need you, ' + pinCount.moving + ' moving, ' + pinCount.settled + ' settled.' : '.'),
     };
+    if (!deep) return out;
+    // the living street: the depth layers, the deck behind "need you", and a
+    // door that says who holds its building
+    out.depth = Dp.depthOf({ segs: segs, at: at, roofs: roofs, struct: struct, living: living, lb: lb, docket: docket, goals: goals, byGoal: byGoal, roster: opts.roster || null, W: W, now: now, matters: living ? seen : null });
+    out.hud.deck = { href: Dp.DECK_HREF, aria: hudNeeds !== '—' ? needs + ' to do. Decide them in a row.' : 'Decide what is yours to do, in a row.' };
+    out.label += ' ' + out.depth.label;
+    // who holds it: a Lead, or the owner's seat — the real read (GET /government/leads,
+    // task 1004709); without it, nobody is named
+    if (living && living.seats_real) {
+      const viewerId = living.viewer ? String(living.viewer.id) : null;
+      out.doors.forEach((d) => {
+        const b = lb[d.key];
+        if (!b) return;
+        const who = b.lead ? (viewerId && String(b.lead.id) === viewerId ? 'you' : String(b.lead.name || 'its Lead')) : 'the owner';
+        d.aria += b.lead ? ', led by ' + who : ', held by ' + who;
+      });
+    }
+    return out;
   }
 
   // The short card a pin opens (task 1004528 makes it act). null for an unknown key.
@@ -657,7 +749,8 @@
     theme: theme, push: push, rect: rect, ellipse: ellipse, box: box, gable: gable, sawtooth: sawtooth, tree: tree, light: light, civic: civic, work: work,
     layout: layout, districtWidth: districtWidth, districtItems: districtItems, districtLine: districtLine, countsLine: countsLine,
     whenWord: whenWord, reviewHeldOf: reviewHeldOf, monthShare: monthShare, money: money, parseHash: parseHash, buildingHref: buildingHref, districtHref: districtHref,
-    streetModel: streetModel, cardFor: cardFor, placeLabels: placeLabels, labelBox: labelBox, shownLabels: shownLabels, pinLabel: pinLabel,
+    streetModel: streetModel, cardFor: cardFor, districtName: districtName, placeLabels: placeLabels, labelBox: labelBox, shownLabels: shownLabels, pinLabel: pinLabel,
+    count: count, MORE_KEY: MORE_KEY,
     G: G, SEGS: SEGS, GROUP_NAMES: GROUP_NAMES, CIVIC_KEYS: CIVIC_KEYS, READING_KEYS: READING_KEYS, ARTBOARD_W: ARTBOARD_W,
     PIN_W: PIN_W, PIN_LABEL: PIN_LABEL, LABEL_MAX_W: LABEL_MAX_W, PIN_STACK: PIN_STACK, MAX_CRATES: MAX_CRATES, MAX_DISTRICTS: MAX_DISTRICTS, GOALS_HREF: GOALS_HREF, FALLBACK_LINE: FALLBACK_LINE, HOME_HREF: '/builders/city',
   };

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

@@ -183,13 +183,25 @@
     const vacant = !!st.vacant;
     const dark = T.bg === '#000000';
     const X = 130, W = 460, FH = 52, GY = 676;
-    const occ = b.floors.length, cap = Math.max(b.cap, occ), top = GY - cap * FH;
+    // THE LEAD'S OFFICE AND THE BUILD-OUTS (task 1004685, the living-city
+    // prototype). Opt-in: with no st.office and no st.works the drawing is the
+    // prototype's to the pixel (tests/hall_street_inside.mjs). The office is one
+    // storey on top of the building's floors; a floor being built (a live site)
+    // or proposed (a vote is open) takes the next empty storey; an annex or a
+    // district stands on the annex lot. officeDraw() and worksDraw() below.
+    const office = st.office || null;
+    const works = Array.isArray(st.works) ? st.works : [];
+    const sites = works.filter((w) => w && w.kind === 'floor');
+    const capFloors = Math.max(b.cap, b.floors.length + sites.length);
+    const occ = b.floors.length, cap = office || works.length ? capFloors + (office ? 1 : 0) : Math.max(b.cap, occ), top = GY - cap * FH;
+    const officeIdx = office ? cap - 1 : -1;
+    const officeSel = !!office && st.floor === 'office';
     const firstPending = b.floors.findIndex((f) => f.status === 'pending' || f.status === 'proposed');
-    const pick = st.floor === null || st.floor === undefined ? null : Number(st.floor);
+    const pick = officeSel || st.floor === null || st.floor === undefined ? null : Number(st.floor);
     const selFloor = pick === null || !isFinite(pick) ? (firstPending >= 0 ? firstPending : occ - 1) : Math.max(0, Math.min(pick, occ - 1));
     const M2 = dark
-      ? { slab: '#4a4a52', wall: '#2c2c32', room: '#121215', roomLit: '#2b2219', lamp: '#55565a', lampLit: '#ffd9a8', glow: 'rgba(255,217,168,0.10)', pane: 'rgba(150,170,255,0.22)', paneLit: 'rgba(255,214,170,0.55)', kit: 'rgba(255,255,255,0.34)', kitFill: 'rgba(255,255,255,0.05)', name: '#ffffff', line: '#c0c0c0', faint: '#8e8e93' }
-      : { slab: '#b9b8be', wall: '#e2e1e5', room: '#f8f7f9', roomLit: '#fdf0e2', lamp: '#a9a8ad', lampLit: '#f0a86a', glow: 'rgba(240,168,106,0.12)', pane: 'rgba(91,111,208,0.20)', paneLit: 'rgba(240,168,106,0.45)', kit: 'rgba(23,24,26,0.40)', kitFill: 'rgba(23,24,26,0.05)', name: '#17181a', line: '#55565a', faint: '#65656a' };
+      ? { slab: '#4a4a52', wall: '#2c2c32', room: '#121215', roomSel: '#202025', lampSel: '#e6e6ea', glowSel: 'rgba(255,255,255,0.07)', paneSel: 'rgba(220,224,240,0.40)', roomLit: '#2b2219', lamp: '#55565a', lampLit: '#ffd9a8', glow: 'rgba(255,217,168,0.10)', pane: 'rgba(150,170,255,0.22)', paneLit: 'rgba(255,214,170,0.55)', kit: 'rgba(255,255,255,0.34)', kitFill: 'rgba(255,255,255,0.05)', name: '#ffffff', line: '#c0c0c0', faint: '#8e8e93' }
+      : { slab: '#b9b8be', wall: '#e2e1e5', room: '#f8f7f9', roomSel: '#ebeaee', lampSel: '#55565a', glowSel: 'rgba(23,24,26,0.06)', paneSel: 'rgba(23,24,26,0.22)', roomLit: '#fdf0e2', lamp: '#a9a8ad', lampLit: '#f0a86a', glow: 'rgba(240,168,106,0.12)', pane: 'rgba(91,111,208,0.20)', paneLit: 'rgba(240,168,106,0.45)', kit: 'rgba(23,24,26,0.40)', kitFill: 'rgba(23,24,26,0.05)', name: '#17181a', line: '#55565a', faint: '#65656a' };
     if (key === 'review' && st.reviewHeld) { M2.room = dark ? '#121722' : '#f1f3fb'; M2.pane = dark ? 'rgba(150,170,255,0.35)' : 'rgba(91,111,208,0.30)'; }
     const shapes = [], texts = [], syms = [];
     const sans = "Manrope, 'Segoe UI', system-ui, sans-serif", mono = "'JetBrains Mono', ui-monospace, Consolas, monospace";
@@ -205,20 +217,26 @@
     }
     for (let i = 0; i < cap; i++) {
       const y0 = GY - (i + 1) * FH, y1 = y0 + FH, fl = b.floors[i];
-      const used = !!fl, sel = used && i === selFloor;
+      if (i === officeIdx) { officeDraw(y0, y1, i); continue; }
+      if (!fl && i >= occ && sites[i - occ]) { siteDraw(sites[i - occ], y0, y1, i); continue; }
+      const used = !!fl, sel = used && i === selFloor && !officeSel;
       const pend = used && fl.status === 'pending';
       const prop = used && (fl.status === 'proposed' || QUIET[fl.status] !== undefined);
       // a floor you cleared this visit lights its windows and shows a tick (task 1004558)
       const clr = used && Array.isArray(st.cleared) && st.cleared.indexOf(i) >= 0;
-      const lit = sel || clr || (used && st.evening);
+      // the chosen floor lights in ink (a cool, neutral light), never the warm lit wash:
+      // salmon and its warmth mean "needs you" only (task 1004718). A floor you cleared,
+      // or every floor in the evening, still lights warm.
+      const lit = clr || (used && st.evening), on = lit || sel;
+      const room = lit ? M2.roomLit : sel ? M2.roomSel : M2.room;
       push(shapes, rect(X - 6, y1 - 5, W + 12, 5), fillOr(M2.slab), line, dash);
-      push(shapes, rect(X + 9, y0, W - 18, FH - 5), fillOr(lit ? M2.roomLit : M2.room), line, dash);
+      push(shapes, rect(X + 9, y0, W - 18, FH - 5), fillOr(room), line, dash);
       [X, X + W - 9].forEach((wx) => {
         push(shapes, rect(wx, y0, 9, FH - 5), fillOr(M2.wall), line, dash);
-        if (!ghost) push(shapes, rect(wx + 3, y0 + 9, 3, FH - 23), lit ? M2.paneLit : M2.pane, 'none');
+        if (!ghost) push(shapes, rect(wx + 3, y0 + 9, 3, FH - 23), lit ? M2.paneLit : sel ? M2.paneSel : M2.pane, 'none');
       });
-      if (i === 0 && !ghost) push(shapes, rect(X, y1 - 33, 9, 28), lit ? M2.roomLit : M2.room, 'none');
-      txt(X - 50, y0 + 30, String(i + 1).padStart(2, '0'), sel ? T.accentText : M2.faint, 11, 400, 'end', mono, '0.08em');
+      if (i === 0 && !ghost) push(shapes, rect(X, y1 - 33, 9, 28), room, 'none');
+      txt(X - 50, y0 + 30, String(i + 1).padStart(2, '0'), sel ? M2.name : M2.faint, 11, 400, 'end', mono, '0.08em');
       if (!used) {
         if (!ghost) txt(X + 24, y0 + 30, 'empty floor', M2.faint, 12.5, 400);
         continue;
@@ -228,14 +246,14 @@
       [0.2, 0.45, 0.8].forEach((f) => {
         const lx = Math.round(X + W * f);
         push(shapes, 'M' + lx + ' ' + y0 + 'V' + (y0 + 7), 'none', ghost ? T.ghost.s : M2.kit);
-        push(shapes, ellipse(lx, y0 + 9, 2.4, 2.4), lit ? M2.lampLit : M2.lamp, 'none');
-        if (lit) push(shapes, ellipse(lx, y0 + 12, 12, 7), M2.glow, 'none');
+        push(shapes, ellipse(lx, y0 + 9, 2.4, 2.4), lit ? M2.lampLit : sel ? M2.lampSel : M2.lamp, 'none');
+        if (on) push(shapes, ellipse(lx, y0 + 12, 12, 7), lit ? M2.glow : M2.glowSel, 'none');
       });
       // the floor's sign: a plate on the wall carrying the one symbol that says what this floor is
       const sx0 = px + 16, sy0 = y0 + 5;
       push(shapes, rect(sx0 - 4, sy0 - 1, 44, 40), ghost ? 'none' : M2.wall, ghost ? T.ghost.s : M2.kit, dash);
       const sp = symbolPath(floorSymbol(fl.name));
-      syms.push({ key: 's' + i, x: sx0 + 2, y: sy0 + 2, k: 1.333, d: sp.d, f: sp.f, c: sel ? '#fb9569' : pend ? T.accentText : (ghost || prop ? M2.faint : M2.line), w: sel ? 1.9 : 1.5 });
+      syms.push({ key: 's' + i, x: sx0 + 2, y: sy0 + 2, k: 1.333, d: sp.d, f: sp.f, c: sel ? M2.name : pend ? T.accentText : (ghost || prop ? M2.faint : M2.line), w: sel ? 1.9 : 1.5 });
       if (pend) push(shapes, rect(X + 11, y0 + 2, W - 22, FH - 9), 'none', '#fb9569', '4 4');
       txt(X + 24, y0 + 24, cut(fl.name, 34), ghost || prop ? M2.faint : M2.name, 14.5, 500);
       txt(X + 24, y0 + 40, cut(fl.line, 44), pend ? T.accentText : M2.line, 12, 400);
@@ -244,13 +262,96 @@
       else if (pend) txt(X + W - 22, y0 + 32, 'being decided', T.accentText, 11.5, 500, 'end');
       else if (QUIET[fl.status]) txt(X + W - 22, y0 + 32, QUIET[fl.status], M2.faint, 11.5, 400, 'end');
     }
-    // the chosen floor gets a frame, and a lift runs in its shaft beside the building to meet it
-    if (b.floors[selFloor]) push(shapes, rect(X - 3, GY - (selFloor + 1) * FH - 2, W + 6, FH - 1), 'none', '#fb9569', 'none', 1.5);
+    // the chosen floor gets an ink frame, and a lift runs in its shaft beside the building to meet it
+    if (officeSel) push(shapes, rect(X - 3, GY - (officeIdx + 1) * FH - 2, W + 6, FH - 1), 'none', M2.name, 'none', 1.5);
+    else if (b.floors[selFloor]) push(shapes, rect(X - 3, GY - (selFloor + 1) * FH - 2, W + 6, FH - 1), 'none', M2.name, 'none', 1.5);
     push(shapes, rect(X - 40, top, 22, cap * FH), 'none', ghost ? T.ghost.s : M2.kit, ghost ? '4 4' : 'none');
     let rungs = '';
     for (let i = 1; i < cap; i++) rungs += 'M' + (X - 40) + ' ' + (GY - i * FH) + 'h22';
     push(shapes, rungs, 'none', M2.kit, '2 3');
-    const floors = b.floors.map((f, i) => ({ key: f.name, index: i, x: X, y: GY - (i + 1) * FH, w: W, h: FH - 5, aria: 'Open ' + f.name, selected: i === selFloor }));
+    works.forEach((w) => { if (w && (w.kind === 'annex' || w.kind === 'district')) lotDraw(w); });
+    const floors = b.floors.map((f, i) => ({ key: f.name, index: i, x: X, y: GY - (i + 1) * FH, w: W, h: FH - 5, aria: 'Open ' + f.name, selected: i === selFloor && !officeSel }));
+    if (office) floors.push({ key: 'office', index: 'office', x: X, y: GY - (officeIdx + 1) * FH, w: W, h: FH - 5, aria: 'Open the Lead\'s office', selected: officeSel });
+    sites.forEach((s, j) => floors.push({ key: 'site:' + j, index: 'office', x: X, y: GY - (occ + j + 1) * FH, w: W, h: FH - 5, aria: 'Open the build: ' + s.label, selected: false }));
+
+    // ---- the office, a floor going up, and the annex lot (tasks 1004685, 1004711) ----
+    function officeDraw(y0, y1, i) {
+      // THE LEAD'S OFFICE: its lamps lit while a Lead sits in it, a dashed vacancy
+      // while the owner holds the building; its committees are rooms on its back
+      // wall (a room the Lead has asked for, dashed); the sign is the hall.
+      const seated = !!office.seated, oDash = seated ? 'none' : '4 4';
+      push(shapes, rect(X - 6, y1 - 5, W + 12, 5), M2.slab, 'none');
+      push(shapes, rect(X + 9, y0, W - 18, FH - 5), officeSel ? M2.roomSel : seated ? M2.room : 'none', seated ? 'none' : T.ghost.s, oDash);
+      [X, X + W - 9].forEach((wx) => {
+        push(shapes, rect(wx, y0, 9, FH - 5), M2.wall, 'none');
+        push(shapes, rect(wx + 3, y0 + 9, 3, FH - 23), seated ? M2.paneLit : M2.pane, 'none');
+      });
+      txt(X - 50, y0 + 30, String(i + 1).padStart(2, '0'), officeSel ? M2.name : M2.faint, 11, 400, 'end', mono, '0.08em');
+      const px = Math.round(X + W * 0.62);
+      push(shapes, 'M' + px + ' ' + y0 + 'V' + (y1 - 25), 'none', seated ? M2.kit : T.ghost.s, oDash);
+      [0.2, 0.45].forEach((f) => {
+        const lx = Math.round(X + W * f);
+        push(shapes, 'M' + lx + ' ' + y0 + 'V' + (y0 + 7), 'none', M2.kit);
+        push(shapes, ellipse(lx, y0 + 9, 2.4, 2.4), seated ? M2.lampLit : M2.lamp, 'none');
+        if (seated) push(shapes, ellipse(lx, y0 + 12, 12, 7), M2.glow, 'none');
+      });
+      const sx0 = px + 16, sy0 = y0 + 5;
+      push(shapes, rect(sx0 - 4, sy0 - 1, 44, 40), seated ? M2.wall : 'none', seated ? M2.kit : T.ghost.s, oDash);
+      const sp = symbolPath('hall');
+      syms.push({ key: 'so', x: sx0 + 2, y: sy0 + 2, k: 1.333, d: sp.d, f: sp.f, c: officeSel ? M2.name : seated ? M2.line : M2.faint, w: officeSel ? 1.9 : 1.5 });
+      txt(X + 24, y0 + 24, 'Lead\'s office', seated ? M2.name : M2.faint, 14.5, 500);
+      txt(X + 24, y0 + 40, cut(String(office.line || ''), 44), M2.line, 12, 400);
+      const rooms = Array.isArray(office.rooms) ? office.rooms.slice(0, 2) : [];
+      rooms.forEach((r, j) => {
+        const rx = sx0 + 48 + j * 48;
+        push(shapes, rect(rx, y0 + 6, 44, FH - 17), r.proposed ? 'none' : M2.kitFill, r.proposed ? T.ghost.s : M2.kit, r.proposed ? '3 3' : 'none');
+        txt(rx + 22, y0 + 29, cut(String(r.name || ''), 7), r.proposed ? M2.faint : M2.line, 9.5, 400, 'middle', mono);
+      });
+      if (!rooms.length && office.ini) txt(X + W - 22, y0 + 34, office.ini, seated ? M2.name : M2.faint, 20, 300, 'end', sans, '-0.02em');
+    }
+    function siteDraw(site, y0, y1, i) {
+      // A FLOOR GOING UP: a live site where the form of government lets it build (the
+      // floor fills from its slab as the work goes), a dashed ghost while a vote
+      // is open on it. The crane over a live site is the page's (CSS motion).
+      const live = site.state === 'site';
+      const p = live && site.progress != null ? Math.max(0, Math.min(1, Number(site.progress) || 0)) : null;
+      push(shapes, rect(X - 6, y1 - 5, W + 12, 5), live ? M2.slab : 'none', live ? 'none' : T.ghost.s, live ? 'none' : '4 4');
+      if (p) push(shapes, rect(X + 9, y1 - 5 - Math.round((FH - 5) * p), W - 18, Math.round((FH - 5) * p)), M2.kitFill, 'none');
+      push(shapes, rect(X + 9, y0, W - 18, FH - 5), 'none', live ? M2.kit : T.ghost.s, '4 3');
+      const px = Math.round(X + W * 0.62);
+      let br = '';
+      for (let bx = px; bx + 30 <= X + W - 70; bx += 30) br += 'M' + bx + ' ' + (y1 - 5) + 'L' + (bx + 30) + ' ' + y0 + 'M' + bx + ' ' + y0 + 'L' + (bx + 30) + ' ' + (y1 - 5);
+      push(shapes, br, 'none', live ? M2.kit : T.ghost.s, live ? 'none' : '3 4');
+      txt(X - 50, y0 + 30, String(i + 1).padStart(2, '0'), M2.faint, 11, 400, 'end', mono, '0.08em');
+      txt(X + 24, y0 + 24, cut(String(site.label || 'A new floor'), 30), live ? M2.name : M2.faint, 14.5, 500);
+      txt(X + 24, y0 + 40, cut(String(site.line || (live ? 'being built' : 'a vote is open')), 34), M2.line, 12, 400);
+      if (p != null) txt(X + W - 22, y0 + 34, Math.round(p * 100) + '%', M2.name, 20, 300, 'end', sans, '-0.02em');
+      else txt(X + W - 22, y0 + 32, live ? 'going up' : 'vote open', M2.faint, 11.5, 400, 'end');
+    }
+    function lotDraw(w) {
+      // THE ANNEX LOT: a proposed annex (or district) is a dashed-glass ghost with
+      // a parked crane, joined by a dashed bridge; once built it stands solid.
+      const built = w.state === 'built';
+      const ax = 628, aw = 160;
+      const tone = built ? T.civic : T.glass;
+      const dashLot = built ? 'none' : '5 4';
+      const blocks = w.kind === 'district' ? [[ax + 6, 44, 96], [ax + 58, 44, 136], [ax + 110, 44, 72]] : [[ax, aw, 156]];
+      blocks.forEach((bk) => {
+        push(shapes, rect(bk[0], GY - bk[2], bk[1], bk[2]), tone.f, tone.s, dashLot);
+        let panes = '';
+        for (let yy = GY - bk[2] + 14; yy < GY - 14; yy += 22) for (let xx = bk[0] + 10; xx + 10 <= bk[0] + bk[1] - 8; xx += 18) panes += 'M' + xx + ' ' + yy + 'h8v10h-8Z';
+        push(shapes, panes, built ? M2.paneLit : M2.pane, built ? 'none' : tone.s, built ? 'none' : '2 2');
+      });
+      push(shapes, rect(X + W + 16, GY - 64, ax - (X + W + 16), 10), built ? T.civic.f : 'none', built ? T.civic.s : T.glass.s, dashLot);
+      const topY = GY - (w.kind === 'district' ? 136 : 156);
+      if (!built) {
+        // the parked crane: a mast, its jib and a hook, standing still
+        const mx = ax + aw - 14, jy = topY - 64;
+        push(shapes, 'M' + mx + ' ' + GY + 'V' + jy + 'M' + (ax + 8) + ' ' + jy + 'H' + (mx + 14) + 'M' + (ax + 40) + ' ' + jy + 'V' + (topY - 28) + 'M' + mx + ' ' + (jy - 14) + 'L' + (ax + 8) + ' ' + jy + 'M' + mx + ' ' + (jy - 14) + 'L' + (mx + 14) + ' ' + jy, 'none', M2.kit);
+      }
+      txt(ax + aw / 2, topY - (built ? 26 : 92), cut(String(w.label || 'An annex'), 22), built ? M2.name : M2.faint, 12.5, 500, 'middle');
+      txt(ax + aw / 2, topY - (built ? 10 : 76), built ? 'built' : String(w.line || 'proposed · a vote is open'), M2.faint, 11, 400, 'middle');
+    }
     const record = Array.isArray(b.record) ? b.record : [];
     const selDrawer = record.length ? Math.max(0, Math.min(st.drawer === null || st.drawer === undefined ? 0 : Number(st.drawer) || 0, record.length - 1)) : -1;
     const seatOf = (s) => s === 'you'
@@ -258,14 +359,16 @@
       : s === '—' ? { key: s, init: '', bg: 'transparent', fg: T.faint, border: '1px dashed ' + T.seatOpen }
         : { key: s, init: s, bg: T.seatFor.bg, fg: T.seatFor.fg, border: 'none' };
     const g = City.glyph(b.rule, 9, 9, 16);
-    const pct = Math.round(occ / cap * 100);
+    // the floors in use, out of the floors there are (the office is not one)
+    const capOf = office || works.length ? capFloors : cap;
+    const pct = Math.round(occ / capOf * 100);
     const f = b.floors[selFloor];
     const quietWord = f && QUIET[f.status] !== undefined ? ' · ' + (f.status === 'proposed' ? 'proposed' : QUIET[f.status]) : '';
     return {
       kicker: b.group + ' · ' + b.name.toLowerCase(), name: b.name, holds: b.holds,
       seats: b.seats.map(seatOf), whoText: b.who, gf: g.fill, gl: g.line, howText: b.how,
       fill: pct, fillColor: pct >= 80 ? '#fb9569' : T.line,
-      growth: (vacant ? 'Not built yet. ' : occ + ' of ' + cap + ' floors in use. ') + b.growth,
+      growth: (vacant ? 'Not built yet. ' : occ + ' of ' + capOf + ' floors in use. ') + b.growth,
       openKicker: 'floor ' + (selFloor + 1) + (f && f.status === 'pending' ? ' · being decided' : quietWord),
       sym: f ? Object.assign(symbolPath(floorSymbol(f.name)), { c: '#fb9569' }) : { d: '', f: '', c: 'none' },
       flipA: ((st.picks || 0) % 2) === 0, flipB: ((st.picks || 0) % 2) === 1,
@@ -273,9 +376,12 @@
       drawers: record.map((r, i) => ({ key: r.label, index: i, label: r.label, count: r.count == null ? r.items.length : r.count, aria: 'Open the ' + r.label + ' drawer', selected: i === selDrawer, bg: i === selDrawer ? T.wash : 'transparent', border: i === selDrawer ? T.ink : T.ruleStrong, handle: i === selDrawer ? T.ink : T.ruleStrong, color: T.ink })),
       drawerItems: selDrawer >= 0 ? record[selDrawer].items.map((it, i) => ({ key: 'r' + i, text: it[0], meta: it[1] })) : [],
       onFile: b.onFile, shapes: shapes, texts: texts, syms: syms, floors: floors,
-      lift: { x: X - 38, y: GY - FH + 6, ty: -(selFloor * FH), h: FH - 16 },
-      hasAnnex: !!b.annex, annex: b.annex ? { x: 628, y: GY - 156, w: 160, h: 156, text: b.annex } : { x: 0, y: 0, w: 0, h: 0, text: '' },
+      lift: { x: X - 38, y: GY - FH + 6, ty: -((officeSel ? officeIdx : selFloor) * FH), h: FH - 16 },
+      hasAnnex: !!b.annex && !works.some((w) => w && (w.kind === 'annex' || w.kind === 'district')), annex: b.annex ? { x: 628, y: GY - 156, w: 160, h: 156, text: b.annex } : { x: 0, y: 0, w: 0, h: 0, text: '' },
       selFloor: selFloor, selDrawer: selDrawer, cap: cap, occ: occ,
+      officeSel: officeSel, officeIdx: officeIdx, capFloors: capOf, builtSel: !officeSel && !!(f && f.built),
+      // where a live site stands, for the page's crane (CSS motion over the drawing)
+      sites: sites.map((s, j) => ({ label: s.label, state: s.state, x: X, y: GY - (occ + j + 1) * FH, w: W, h: FH - 5 })),
     };
   }
 
@@ -539,6 +645,11 @@
   // The building interior as data: civicInfo() drawn by buildingView().
   //   input { key, docket, goals, mode, now, floor, drawer, picks, cleared }
   //   cleared: the floor indexes the viewer cleared at the desk this visit (street-desk.js)
+  // The living-city prototype (task 1004685, street-office.js) may add:
+  //   office       { seated, line, ini, rooms[{ name, proposed }] } — the Lead's office on top
+  //   works        [{ kind: floor|annex|district, state: site|proposed|built, label, line, progress }]
+  //   extraFloors  [{ name, line }] — floors a build-out put up (GET /government/leads structure)
+  //   floor        may be 'office'
   function buildingModel(input) {
     const o = input || {};
     if (S.CIVIC_KEYS.indexOf(o.key) < 0) return null;
@@ -546,11 +657,15 @@
     const T = S.theme(mode);
     const goals = (Array.isArray(o.goals) ? o.goals : []).filter((g) => g && g.status === 'open');
     const b = civicInfo(o.key, { docket: o.docket, goals: goals, now: o.now });
+    if (Array.isArray(o.extraFloors) && o.extraFloors.length) {
+      o.extraFloors.forEach((x) => { const fl = F(String(x.name || 'A new floor'), String(x.line || 'built by a build-out'), '', 'ok', [[String(x.line || 'built by a build-out'), 'now']]); fl.built = true; b.floors.push(fl); });
+      b.annex = !b.vacant && b.floors.length >= PLAN[o.key].cap ? PLAN[o.key].annex : null;
+    }
     const docket = o.docket && Array.isArray(o.docket.matters) ? o.docket : null;
     const evening = !!docket && !(docket.counts && Number(docket.counts.needs) > 0);
-    const bv = buildingView(T, o.key, b, { floor: o.floor, drawer: o.drawer, picks: o.picks, vacant: b.vacant, reviewHeld: !b.vacant, evening: evening, cleared: o.cleared });
+    const bv = buildingView(T, o.key, b, { floor: o.floor, drawer: o.drawer, picks: o.picks, vacant: b.vacant, reviewHeld: !b.vacant, evening: evening, cleared: o.cleared, office: o.office || null, works: o.works || null });
     bv.key = o.key; bv.mode = mode; bv.vacant = b.vacant;
-    bv.label = b.name + ' in section: ' + b.floors.length + ' of ' + bv.cap + ' floors in use.';
+    bv.label = b.name + ' in section: ' + b.floors.length + ' of ' + bv.capFloors + ' floors in use' + (o.office ? ', the Lead\'s office on top' : '') + '.';
     return bv;
   }