@bongos/core 1.21.113 → 1.21.115

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

@@ -0,0 +1,97 @@
+// modules/hall-ui/public/gov-positions.js — GOVERNING IS A POSITION, not a picked
+// craft (owner ruling 2026-10-09; task 1004685 drew it, task 1004713 made it real).
+//
+// WHAT THIS IS. You pick a craft, but you HOLD a seat in the government or you
+// don't. positionsFor() answers one question for the viewer: which seats do you
+// hold? The shell hides the governing surfaces from a builder who holds none, and
+// craft-mode.js names the Governing mode by the first seat ("Planning Lead").
+//
+//   positionsFor({ me, as })
+//     → { known, viewer_id, rank, as, sim_rank, positions[], title, has_position, _sources }
+//
+// THE ANSWER IS THE SERVER'S. GET /me carries `positions` — the seats resolved
+// server-side, per request, uncached (modules/government/positions.js: the owner
+// seat, a Lead in office, a seat on a building's sitting, the board under the
+// constitution in force). This file only reads that block; it re-derives nothing
+// from rank, craft, the constitution or the prototype overlay, so it can never
+// disagree with the server. A /me with no `positions` block (the module is off,
+// or a read failed) is UNKNOWN (`known: false`), and every caller keeps today's
+// nav: an unknown is never "none".
+//
+// COSMETIC NAV ONLY. Page gates stay server-side (serve-internal.js + auth.js),
+// and nothing here can open a page the server would refuse.
+//
+// `as: 'nobody'` looks at the hall as a builder who holds no seat (the shell
+// reads it from ?as=nobody, see shell.js). It can only TAKE AWAY: the stand-in
+// holds no seat and a rank no higher than thetes (a xenos stays a xenos), so it
+// can never widen what a viewer sees.
+//
+// PURE. No DOM, no fetch, no clock (tests/hall_my_agents.mjs holds it to that).
+
+(function (root) {
+  'use strict';
+
+  const R = 'real';
+  const D = 'derived';
+
+  const BUILDING_NAMES = Object.freeze({
+    charter: 'Charter', rules: 'Rules', disputes: 'Disputes', people: 'People', planning: 'Planning',
+    automation: 'Automation', review: 'Review', release: 'Release', treasury: 'Treasury',
+  });
+  // The kinds the server names (positions.js KINDS), in the order it sorts them.
+  const KINDS = Object.freeze(['lead', 'owner', 'seat', 'board']);
+  const NOBODY_ID = 'as:nobody';
+  const AS_VALUES = Object.freeze(['nobody']);
+
+  const str = (v) => (v == null ? '' : String(v));
+  const obj = (v) => (v && typeof v === 'object' && !Array.isArray(v) ? v : null);
+  const arr = (v) => (Array.isArray(v) ? v : []);
+
+  // The ?as= value the hall honours, or null.
+  function asValue(v) { return AS_VALUES.indexOf(str(v).toLowerCase()) >= 0 ? str(v).toLowerCase() : null; }
+
+  // The stand-in rank for `as: nobody`: thetes, but a xenos (or no rank) stays a
+  // xenos. Every gate below thetes is the same for thetes and any member rank, so
+  // this only ever takes away.
+  function nobodyRank(rank) {
+    const r = str(rank).toLowerCase();
+    return !r || r === 'xenos' ? 'xenos' : 'thetes';
+  }
+
+  // One seat as the server sent it, or null when it is not one the server names.
+  function seatOf(p) {
+    const s = obj(p);
+    if (!s || KINDS.indexOf(s.kind) < 0 || !s.title) return null;
+    return { kind: s.kind, seat: str(s.seat), building: s.building == null ? null : str(s.building), title: str(s.title), source: R };
+  }
+
+  function positionsFor(input) {
+    const o = obj(input) || {};
+    const me = obj(o.me);
+    const builder = me ? (obj(me.builder) || me) : null;
+    const as = asValue(o.as);
+    const realRank = builder && builder.rank ? String(builder.rank).toLowerCase() : null;
+    const rank = as === 'nobody' ? nobodyRank(realRank) : realRank;
+    const id = as === 'nobody' ? NOBODY_ID : (builder && builder.id != null ? String(builder.id) : null);
+    const sent = me ? obj(me.positions) : null;
+    // KNOWN ONLY WITH THE SERVER'S ANSWER (or the stand-in, which holds nothing).
+    const known = !!builder && (as === 'nobody' || (!!sent && Array.isArray(sent.held)));
+    const positions = known && as !== 'nobody' ? arr(sent.held).map(seatOf).filter(Boolean) : [];
+    return {
+      known,
+      viewer_id: id,
+      rank,
+      as,
+      // the rank the shell pretends for `as: nobody` (null when it pretends nothing)
+      sim_rank: as === 'nobody' ? rank : null,
+      positions,
+      title: positions.length ? positions[0].title : null,
+      has_position: positions.length > 0,
+      _sources: { known: D, viewer_id: R, rank: R, as: D, sim_rank: D, positions: R, title: R, has_position: R },
+    };
+  }
+
+  const api = { positionsFor, asValue, nobodyRank, BUILDING_NAMES, KINDS, NOBODY_ID };
+  root.GovPositions = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+}(typeof window !== 'undefined' ? window : globalThis));

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

@@ -135,8 +135,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-16-gate"></script>

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

@@ -224,6 +224,9 @@
       // task 1004422: project founding mode — passed here for the same reason as the
       // three above, or the index would be the one page the band never appears on.
       founding: (ctx.lastMeState && ctx.lastMeState.founding_mode) || null,
+      // task 1004713: the government positions this builder holds, server-resolved —
+      // passed here too, or the index would keep the governing tabs for a seatless builder.
+      positions: (ctx.lastMeState && ctx.lastMeState.positions) || null,
       builder,
     });
 

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

@@ -51,8 +51,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib" defer></script>
 <!-- task-detail.js still owns the #/idea/N and #/blocker/N overlay, so a ref

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

@@ -226,8 +226,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
 <!-- task 1003069 (R08) — the quick-filing form's routed result links a task

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

@@ -107,8 +107,8 @@
 <!-- The app shell (sidebar + top bar + view router). Dependency-free; loaded
      BEFORE builders.js so the chrome ids exist when events are wired. -->
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab" defer></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab" defer></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix" defer></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3" defer></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1" 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.
@@ -139,7 +139,7 @@
      window.OTBHallRender(ctx) once during its own setup. The module
      hall-widget tags the server injects still anchor on builders.js's tag
      below (it matches by filename), so they land between the two. -->
-<script src="/builders/hall-render.js?v=2026-08-24-hallrender1" defer></script>
+<script src="/builders/hall-render.js?v=2026-10-09-positions1" defer></script>
 <!-- task 1002802 (P06): the profile-completion nudge slice. Exposes
      window.OTBProfileNudge; goal-inbox.js's mount() calls it once it has
      created the #attention-profile div, so load order is not load-bearing. -->

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

@@ -102,8 +102,8 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/craft-mode.js?v=2026-10-08-city-tab"></script>
-<script src="/builders/shell.js?v=2026-10-08-glyph-fix"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>

package/modules/hall-ui/public/my-agents.css

@@ -0,0 +1,334 @@
+/* modules/hall-ui/public/my-agents.css — MY AGENTS (task 1004685, the living-city
+   prototype; round-3 boards 6-8). Rides the oversight family's sheet
+   (oversight.css, linked first): its group head and foot line are used as they
+   are, and the row here is that family's hairline row at the owner's desk density
+   (a name, one fact, at most two buttons; choices as one-tap chips).
+
+   Colour: the fifteen pack tokens and the shell's derived tiers, as var() and
+   color-mix() only. The accent is not spent here: nothing on this page waits on
+   the reader, and on the governing surfaces salmon means exactly that. A chosen
+   chip is ink on glass, a lock is a dashed hairline, a law band is an ink wash.
+   No :root here (tests/hall_reading_world.mjs): page tokens live on the body.
+   The two dark blocks are byte-identical twins (the hall's switch is
+   html[data-theme]; the media block is first paint). Light mode cannot glow, so
+   the lit pip is a solid ink fill there and gains a soft ink halo only in dark.
+
+   Motion is CSS only, on transform alone, and one-shot: a lit pip pops in when it
+   is drawn, a saved row's tick scales in when my-agents.js sets data-saved. The
+   kill switch at the foot stops both, and the still frame is the same page. */
+
+body[data-page="my-agents"] {
+  --ma-pip-glow: none;
+  --ma-law-wash: color-mix(in srgb, var(--ink) 4%, transparent);
+  --ma-ease: cubic-bezier(.16, 1, .3, 1);
+}
+html[data-theme="dark"] body[data-page="my-agents"] {
+  --ma-pip-glow: 0 0 9px color-mix(in srgb, var(--ink) 34%, transparent);
+  --ma-law-wash: color-mix(in srgb, var(--ink) 6%, transparent);
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) body[data-page="my-agents"] {
+    --ma-pip-glow: 0 0 9px color-mix(in srgb, var(--ink) 34%, transparent);
+    --ma-law-wash: color-mix(in srgb, var(--ink) 6%, transparent);
+  }
+}
+
+/* ---- the "viewing as nobody" line ---- */
+.ma-as {
+  margin: 0 0 var(--sp-sm);
+  padding: 8px 14px;
+  border: var(--line) dashed var(--rule);
+  border-radius: var(--radius-pill);
+  font-size: 13px;
+  color: var(--ink-soft);
+}
+.ma-as a { display: inline-block; min-height: 24px; min-width: 24px; padding: 3px 4px; margin: -3px 0; line-height: 18px; color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
+
+/* ---- your seats ---- */
+.ma-seat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13.5px; }
+.ma-seat__l {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  margin-right: 4px;
+}
+.ma-seat .fact-pill { color: var(--ink-soft); }
+.ma-seat .ma-seat__lead { color: var(--ink); }
+.ma-seat__none { color: var(--ink-soft); }
+
+/* ---- the strictness strip: the project's preset, and a preview of the others ---- */
+.ma-strict { margin: 0 0 var(--sp-md); }
+.ma-strict__band {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 16px 28px;
+  align-items: center;
+  padding: 18px 22px;
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+}
+.ma-strict__h {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 4px;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 26px;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+.ma-strict__eyebrow {
+  margin: 0 0 2px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.ma-strict__line { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-soft); }
+.ma-strict__who { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
+.ma-strict__presets { display: flex; gap: 8px; }
+.ma-preset {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-height: 44px;
+  min-width: 118px;
+  padding: 6px 14px;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink-soft);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ma-preset:hover { color: var(--ink); border-color: var(--ink-faint); }
+.ma-preset[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-soft); background: var(--glass-strong); }
+.ma-preset__name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
+.ma-preset__ours {
+  font-family: var(--label-face);
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.ma-preset__n { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.ma-strict__vote { margin: 10px 0 0; }
+.ma-strict__locks { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
+.ma-tile { display: inline-flex; align-items: baseline; gap: 8px; }
+.ma-tile__n {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 34px;
+  line-height: 1;
+  letter-spacing: -0.035em;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+.ma-tile__l { font-size: 12.5px; color: var(--ink-faint); }
+/* one pip per setting a law could lock; a lit pip is a locked one */
+.ma-pips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.ma-pip { position: relative; width: 10px; height: 10px; border: var(--line) solid var(--rule); border-radius: 3px; box-sizing: border-box; }
+.ma-pip[data-on]::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: 2px;
+  background: var(--ink);
+  box-shadow: var(--ma-pip-glow);
+  animation: ma-pop 420ms var(--ma-ease) both;
+}
+@keyframes ma-pop { from { transform: scale(0); } to { transform: scale(1); } }
+
+/* ---- two columns: the desk, and what the agent reads first ---- */
+.ma-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--sp-md); align-items: start; }
+.ma-reads { position: sticky; top: calc(var(--topbar-h) + 16px); }
+@media (max-width: 1100px) {
+  .ma-grid { grid-template-columns: minmax(0, 1fr); }
+  .ma-reads { position: static; }
+}
+
+/* ---- the row: a name, one fact, the chips ---- */
+.ma-group { margin-top: var(--sp-md); }
+.ma-group:first-child { margin-top: 4px; }
+.ma-rows { list-style: none; margin: 0; padding: 0; }
+.ma-row {
+  display: grid;
+  grid-template-columns: minmax(118px, 160px) minmax(0, 1fr) auto;
+  gap: 6px 18px;
+  align-items: center;
+  min-height: 48px;
+  padding: 8px 0;
+  border-top: var(--line) solid var(--rule-soft);
+}
+.ma-rows > .ma-row:first-child { border-top: 0; }
+.ma-row__name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); min-width: 0; }
+/* the fact, and under it what YOU chose when a law holds the row */
+.ma-row__fact { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; font-size: 14px; color: var(--ink-soft); }
+.ma-row__yours { font-size: 12px; color: var(--ink-faint); }
+.ma-row__act { justify-self: end; display: flex; align-items: center; min-width: 0; }
+.ma-row--locked .ma-row__fact { color: var(--ink); }
+.ma-row__link {
+  display: inline-block;
+  min-height: 24px;
+  min-width: 24px;
+  padding: 3px 4px;
+  margin: -3px -4px;
+  line-height: 18px;
+  font-size: 12.5px;
+  color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px;
+}
+.ma-mono { font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; }
+
+/* the lit tick: scales in when a choice saves, stays on a proposed habit */
+.ma-tick { width: 14px; height: 14px; flex: none; color: var(--ok); transform: scale(0); transition: transform 320ms var(--ma-ease); }
+.ma-row[data-saved] .ma-tick, .ma-row--done .ma-tick { transform: scale(1); }
+
+/* one-tap chips: a hairline pill; the chosen one is ink on glass */
+.ma-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
+.ma-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  min-width: 28px;
+  padding: 0 12px;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: none;
+  color: var(--ink-soft);
+  font: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ma-chip:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); }
+.ma-chip[aria-pressed="true"] { color: var(--ink); background: var(--glass-strong); border-color: var(--ink-soft); cursor: default; }
+.ma-chip:disabled { cursor: default; }
+
+/* a lock: the law that holds this row, on a dashed hairline */
+.ma-lock {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 3px 12px;
+  border: var(--line) dashed var(--rule);
+  border-radius: var(--radius-pill);
+  font-size: 12.5px;
+  line-height: 1.35;
+  color: var(--ink-soft);
+}
+.ma-lock__icon { width: 13px; height: 13px; flex: none; }
+
+/* a cap (task 1004714): the law that caps a row, under its fact; the chips offer the rest */
+.ma-row__cap { display: inline-flex; align-items: center; gap: 4px; }
+
+/* the per-skill list, opened in place */
+.ma-sub { padding: 0 0 6px 18px; border-left: 2px solid var(--rule-soft); margin: 0 0 6px; }
+.ma-row--sub { min-height: 40px; padding: 4px 0; }
+.ma-row--sub .ma-row__fact { font-size: 13px; }
+
+/* ---- what the agent reads first ---- */
+.ma-read { margin: 0 0 12px; }
+.ma-read--project { padding: 12px 14px; background: var(--ma-law-wash); border-radius: var(--radius-sm); }
+.ma-read--mine { padding: 12px 14px 4px; }
+.ma-read__l {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 0 0 6px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink);
+}
+.ma-read__n {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0;
+  color: var(--ink-soft);
+  flex: none;
+}
+.ma-read__who { margin-left: auto; font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
+.ma-laws { list-style: none; margin: 0; padding: 0; }
+.ma-law { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 8px; padding: 6px 0; border-top: var(--line) solid var(--rule-soft); }
+.ma-law:first-child { border-top: 0; }
+.ma-law__no { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 1px; }
+.ma-law__t { font-size: 13.5px; font-weight: 500; color: var(--ink); }
+.ma-law__e { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
+.ma-said { margin: 0 0 10px; }
+.ma-said__t { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--ink); }
+.ma-said__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.ma-said__lines li {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--ink-soft);
+}
+.ma-said__lines--all li { display: block; -webkit-line-clamp: unset; overflow: visible; }
+.ma-said__lines b { font-weight: 500; color: var(--ink); }
+.ma-said__note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-faint); }
+.ma-readall { margin: 0 0 8px; }
+
+/* ---- quiet lines ---- */
+.ma-quiet { margin: 6px 0; font-size: 13.5px; color: var(--ink-faint); }
+.ma-quiet a { display: inline-block; min-height: 24px; min-width: 24px; padding: 3px 4px; margin: -3px 0; line-height: 18px; color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
+
+/* ---- narrow: the presets take their own line, then the strip stacks; a row puts
+   its chips under its name and fact, and on the smallest phone each part its own line ---- */
+@media (max-width: 1240px) {
+  .ma-strict__band { grid-template-columns: minmax(0, 1fr) auto; }
+  .ma-strict__presets { grid-column: 1 / -1; order: 3; }
+}
+@media (max-width: 640px) {
+  .ma-strict__band { grid-template-columns: minmax(0, 1fr); padding: 16px; }
+  .ma-strict__locks { justify-content: flex-start; }
+  .ma-preset { flex: 1 1 0; min-width: 0; padding: 6px 10px; }
+  .ma-preset__name { white-space: normal; flex-wrap: wrap; }
+  .ma-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "name fact" "act act";
+    gap: 6px 12px;
+  }
+  .ma-row__name { grid-area: name; }
+  .ma-row__fact { grid-area: fact; align-items: flex-end; text-align: right; }
+  .ma-row__act { grid-area: act; justify-self: start; }
+  .ma-chips { justify-content: flex-start; }
+}
+@media (max-width: 420px) {
+  .ma-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "fact" "act"; gap: 4px; }
+  .ma-row__name { flex-wrap: wrap; }
+  .ma-row__fact { align-items: flex-start; text-align: left; }
+}
+
+/* ---- the kill switch: nothing on this page moves under reduced motion ---- */
+@media (prefers-reduced-motion: reduce) {
+  body[data-page="my-agents"] *,
+  body[data-page="my-agents"] *::before,
+  body[data-page="my-agents"] *::after { animation: none !important; transition: none !important; }
+}

package/modules/hall-ui/public/my-agents.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>My agents — {{worldName}}</title>
+  <meta name="description" content="How your own Claude works for you: how it talks, how far it wanders and which models run.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <!-- The oversight family's archetype: a titled row with facts and actions, the
+       group head and the foot line (records/oversight-family.md). This page's
+       repeated thing is that row at the desk's one-line density. -->
+  <link rel="stylesheet" href="/builders/oversight.css">
+  <link rel="stylesheet" href="/builders/my-agents.css">
+</head>
+<body data-page="my-agents" data-page-title="My agents">
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+      <!-- task 1004685 (the living-city prototype, round-3 boards 6-8): the personal
+           half of "the city steers everyone, My agents steers yours". Every row is
+           filled by my-agents.js from GET /me and its prefs; the strictness strip
+           from GET /government/presets (all real, task 1004715). -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">My agents</h1>
+        <p class="page-head__sub" id="ma-sub">How your Claude works for you. Tap a setting to change it.</p>
+      </div>
+
+      <main id="hall-main" class="ma-main" aria-busy="true">
+        <p class="ma-as" id="ma-as" role="status" hidden></p>
+
+        <section class="ma-strict" id="ma-strict" aria-labelledby="ma-strict-h" hidden></section>
+
+        <div class="ma-grid">
+          <section class="scroll ma-desk" id="ma-desk" aria-labelledby="ma-desk-h">
+            <h2 class="scroll__h" id="ma-desk-h">Your agents</h2>
+            <p class="scroll__lede" id="ma-desk-lede">One line each. Tap to change; it saves straight away.</p>
+            <div id="ma-rows" aria-live="polite"><p class="ma-quiet">Reading your settings…</p></div>
+          </section>
+
+          <aside class="scroll ma-reads" id="ma-reads" aria-labelledby="ma-reads-h">
+            <h2 class="scroll__h" id="ma-reads-h">What your agent reads first</h2>
+            <p class="scroll__lede">At the start of every session, in this order.</p>
+            <div id="ma-reads-body" aria-live="polite"><p class="ma-quiet">Reading…</p></div>
+          </aside>
+        </div>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-10-hall-keys1"></script>
+<!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
+<script src="/builders/gov-living.js?v=2026-10-10-real1"></script>
+<script src="/builders/gov-positions.js?v=2026-10-09-positions1"></script>
+<script src="/builders/my-agents.js?v=2026-10-10-real1"></script>
+</body>
+</html>