@bongos/core 1.21.112 → 1.21.114

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

@@ -0,0 +1,603 @@
+// modules/hall-ui/public/my-agents.js — MY AGENTS: how your own Claude works for
+// you, and which of those settings the project's laws lock (task 1004685, the
+// living-city prototype; round-3 boards 6 "the city and My agents", 7 "how strict"
+// and 8 "governance is a position"; made real by task 1004714).
+//
+// THE SPLIT THIS PAGE EXISTS TO SHOW. The city steers everyone; My agents steers
+// yours. Every row is one of your agent settings, and a project law can LOCK it.
+// Every part of it is a real read (task 1004717: the prototype overlay is gone):
+//   real   EVERY ROW (task 1004714). GET /me's interaction profile, wandering,
+//          model allocation and session cards; GET /me/skill-prefs; GET
+//          /specialities; the sounds switch (off by the owner's call,
+//          .claude/sounds/play.js). Writes go to the real routes (PATCH
+//          /me/interaction|wandering|model-allocation|render|skill-prefs, POST
+//          /specialities/:id/adopt), so in the preview harness they reach its
+//          recorder (scripts/hall-preview/pref-writes.js).
+//   real   the project's laws and the locks they put on your settings (task
+//          1004707): GET /me's `laws` block — the very words every session reads —
+//          and `laws.locks`, what each lock did to you, enforced by the server. A
+//          lock that FIXES a value locks the row; one that only CAPS it offers the
+//          values under the cap (`allowed`, law-locks.js). Only a law in force
+//          locks a row.
+//   real   "Make it a law": a habit of yours proposed as a law files a real laws
+//          vote (POST /government/board/laws, task 1004706) — offered only to a
+//          builder /me says may open a board item (`permissions['board.item.open']`).
+//   real   the strictness preset strip (task 1004715): GET /government/presets —
+//          the three presets (Open workshop, Guild, Factory), which one the laws
+//          in force amount to, and the locks a switch to each would leave in force
+//          (modules/government/presets.js). A preview counts those locks against
+//          your rows; it never locks a row. "Put it to a vote" files the switch as
+//          ONE laws vote (POST /government/board/presets), offered only to a
+//          builder who may open a board item; only the vote passing changes a law.
+//   gone   the five agent settings no table held (when stuck, when it asks, how it
+//          asks, at once, going live): dropped from this page by task 1004714 rather
+//          than shown as settings nothing stores or obeys. How an agent asks is a
+//          project rule now (the ask shape, ADR 0372-0373), not a personal choice.
+//
+// THE DESK LINE RULE (the owner's, records/governor-street.md): a row is a name of
+// at most three words, one fact and at most two buttons; choices are one-tap chips;
+// a tile is one number and two words, hidden at zero; it acts in place. Motion is
+// CSS only (my-agents.css): JS sets an attribute, CSS plays the one-shot.
+//
+// TWO HALVES, the roadmap-timeline.js seam: the top is PURE (buildView, no DOM, no
+// fetch, no clock — tests/hall_my_agents.mjs requires it in node and runs it over
+// the real fixtures), the bottom wires the page and only runs where a document is.
+
+(function (root) {
+  'use strict';
+
+  // ---------- words (the desk's voice: short, plain) ----------
+  // A setting's row name (three words at most) and what each value reads as.
+  const SETTING = {
+    technical_level: { name: 'Technical level', words: { non_technical: 'plain words', mixed: 'some tech', engineer: 'engineer' } },
+    toolchain_familiarity: { name: 'Your tooling', words: { new: 'walk me through', comfortable: 'I know it' } },
+    verbosity: { name: 'Reply length', words: { concise: 'short', detailed: 'detailed' } },
+    machinery: { name: 'Machinery', words: { show: 'shows the work', quiet: 'hidden' } },
+    wandering: { name: 'Off-task', words: { locked: 'never', focused: 'one note', balanced: 'asks first', exploratory: 'roams' } },
+    'model.main': { name: 'Main session' },
+    'model.subagentDefault': { name: 'Helpers' },
+    'model.subagentRoutine': { name: 'Routine helpers' },
+    render: { name: 'Session cards', words: { minimal: 'one line', text: 'plain text', standard: 'rich card', rich: 'rich, open' } },
+  };
+  // The law a habit would become, in the ask-format voice: a short plain sentence.
+  const LAW_LINES = {
+    technical_level: { non_technical: 'Agents talk in plain words', mixed: 'Agents assume some tech', engineer: 'Agents talk like engineers' },
+    toolchain_familiarity: { new: 'Agents walk people through tools', comfortable: 'Agents skip the tool basics' },
+    verbosity: { concise: 'Agents keep replies short', detailed: 'Agents reply in detail' },
+    machinery: { show: 'Agents show their work', quiet: 'Agents hide the machinery' },
+  };
+  const GROUPS = [
+    { key: 'talk', title: 'How it talks to you', keys: ['technical_level', 'toolchain_familiarity', 'verbosity', 'machinery', 'render', 'sounds'] },
+    { key: 'work', title: 'How your agents work', keys: ['wandering'] },
+    { key: 'models', title: 'Which models run', keys: ['model.main', 'model.subagentDefault', 'model.subagentRoutine', 'skills'] },
+    { key: 'know', title: 'What it knows', keys: ['specialities'] },
+  ];
+  // the permission atom that may file a laws vote (POST /government/board/laws)
+  const PROPOSE_ATOM = 'board.item.open';
+
+  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 : []);
+  const wordFor = (key, value) => {
+    const s = SETTING[key];
+    if (s && s.words && Object.prototype.hasOwnProperty.call(s.words, String(value))) return s.words[String(value)];
+    return str(value);
+  };
+  const nameFor = (key) => (SETTING[key] ? SETTING[key].name : key);
+
+  // ---------- the pure view ----------
+  //   buildView({ me, constitution, presets, skills, specialities, preview,
+  //               proposed, switched, adopted, as, project, now }, { GovLiving, GovPositions })
+  //     → { project, positions, strict, groups[], habits[], canPropose, reads, counts }
+  // `preview` is a strictness preset key to look at instead of the project's own;
+  // `presets` is GET /government/presets' body (task 1004715); `switched` maps a
+  // preset key to the board item its switch was filed as.
+  function buildView(input, libs) {
+    const o = obj(input) || {};
+    const L = obj(libs) || {};
+    const me = obj(o.me) || {};
+    const project = str(o.project) || 'The project';
+    const presetsRead = obj(o.presets) && Array.isArray(o.presets.presets) ? o.presets : null;
+    const presets = presetsRead ? presetsRead.presets.filter((p) => obj(p) && p.key) : [];
+    const currentKey = presetsRead && presets.some((p) => p.key === presetsRead.current) ? str(presetsRead.current) : null;
+    const previewKey = o.preview && o.preview !== currentKey && presets.some((p) => p.key === o.preview) ? o.preview : null;
+    const shownKey = previewKey || currentKey;
+
+    // THE ROWS: /me's settings and the locks the laws in force put on them (task 1004714)
+    const real = L.GovLiving ? L.GovLiving.livingModel({ me, constitution: o.constitution, now: o.now }) : null;
+    const byKey = {};
+    (real ? real.myAgents.settings : []).forEach((s) => { byKey[s.key] = s; });
+
+    // ---- rows ----
+    const lawText = (by) => project + ': ' + by.text + (by.no ? ' · Law ' + by.no : '');
+    const settingRow = (key) => {
+      const s = byKey[key];
+      if (!s) return null;
+      const lock = s.locked && s.lockedBy && s.lockedBy.real
+        ? { law_id: s.lockedBy.law_id || null, no: s.lockedBy.no || null, text: lawText(s.lockedBy), real: true } : null;
+      const cap = !lock && s.cappedBy ? { law_id: s.cappedBy.law_id || null, no: s.cappedBy.no || null, text: lawText(s.cappedBy), max: s.cappedBy.max, real: true } : null;
+      const value = s.value;
+      const row = {
+        key, name: nameFor(key), fact: wordFor(key, s.effective),
+        yours: (lock || cap) && String(value) !== String(s.effective) ? wordFor(key, value) : null,
+        locked: !!lock, lock, cap, control: 'chips', value, effective: s.effective,
+        options: arr(s.options).map((v) => ({ value: v, label: wordFor(key, v), pressed: String(v) === String(s.effective) })),
+      };
+      if (key.indexOf('model.') === 0) row.options.forEach((x) => { x.label = str(x.value); });
+      return row;
+    };
+    const extraRow = (key) => {
+      if (key === 'render') {
+        const r = obj(me.render);
+        if (!r) return null;
+        const levels = arr(r.levels).map((l) => l.value);
+        const level = str(r.level || r.derived_level);
+        return {
+          key, name: nameFor(key), fact: wordFor(key, level), locked: false, lock: null, cap: null, control: 'chips',
+          value: level, effective: level, options: levels.map((v) => ({ value: v, label: wordFor(key, v), pressed: v === level })),
+        };
+      }
+      if (key === 'sounds') {
+        // .claude/sounds/play.js SOUNDS_ON = false (task 1004554, the owner's call).
+        return { key, name: 'Sounds', fact: 'all off for now', locked: false, lock: null, cap: null, control: 'none', options: [] };
+      }
+      if (key === 'skills') {
+        const sk = obj(o.skills);
+        if (!sk) return null;
+        const eff = arr(sk.effective);
+        const changed = eff.filter((e) => e.override_model != null).length;
+        return {
+          key, name: 'Per skill', fact: eff.length + ' skills' + (changed ? ' · ' + changed + ' yours' : ' · all default'),
+          locked: false, lock: null, cap: null, control: 'expand', options: [],
+          skills: eff.map((e) => ({
+            key: 'skill.' + e.skill, skill: e.skill, value: e.effective_model,
+            options: arr(sk.allowed_models).map((v) => ({ value: v, label: v, pressed: v === e.effective_model })),
+          })),
+        };
+      }
+      if (key === 'specialities') {
+        const adopted = arr(me.specialities).map((x) => str(x.name)).filter(Boolean)
+          .concat(arr(o.adopted).map(str)).filter((v, i, a) => a.indexOf(v) === i);
+        const offer = arr(o.specialities && o.specialities.specialities).filter((x) => x && x.adoptable !== false).slice(0, 3);
+        return {
+          key, name: 'Specialities', fact: adopted.length ? adopted.join(', ') : 'none yet', locked: false, lock: null, cap: null, control: 'adopt',
+          options: offer.map((x) => ({ value: String(x.id), label: str(x.name).toLowerCase(), pressed: adopted.indexOf(str(x.name)) >= 0 })),
+        };
+      }
+      return null;
+    };
+    const groups = GROUPS.map((g) => {
+      const rows = g.keys.map((k) => settingRow(k) || extraRow(k)).filter(Boolean);
+      return { key: g.key, title: g.title, rows, source: 'real', locked: rows.filter((r) => r.locked).length };
+    }).filter((g) => g.rows.length);
+    const lockableKeys = groups.reduce((a, g) => a.concat(g.rows.filter((r) => r.key !== 'sounds' && r.key !== 'specialities').map((r) => r.key)), []);
+    const total = lockableKeys.length;
+    const lockedNow = groups.reduce((n, g) => n + g.locked, 0);
+
+    // ---- strictness (REAL, task 1004715): what each preset WOULD lock of these
+    // rows — the server's locks after a switch to it (GET /government/presets),
+    // fixed or capped, counted against the rows. It previews; it never locks a
+    // row: only a passed vote changes a law. ----
+    const wouldLock = (key) => {
+      const p = presets.find((x) => x.key === key);
+      const held = arr(p && p.locks).filter((l) => l && l.setting).map((l) => String(l.setting));
+      return lockableKeys.map((k) => held.indexOf(k) >= 0);
+    };
+    const shownPips = shownKey ? wouldLock(shownKey) : lockableKeys.map(() => false);
+    const canSwitch = !!(obj(me.permissions) && me.permissions[PROPOSE_ATOM] === true);
+    const switched = obj(o.switched) || {};
+    const strict = presets.length ? {
+      current: presets.find((p) => p.key === currentKey) || null,
+      shown: presets.find((p) => p.key === shownKey) || null,
+      previewing: !!previewKey,
+      presets: presets.map((p) => ({ key: p.key, name: str(p.name), line: str(p.line), locks: wouldLock(p.key).filter(Boolean).length, current: p.key === currentKey, shown: p.key === shownKey })),
+      locked: shownPips.filter(Boolean).length,
+      total,
+      pips: shownPips,
+      // the switch: one laws vote, for a builder who may open one
+      canSwitch: canSwitch && !!previewKey,
+      filed: previewKey && switched[previewKey] ? (switched[previewKey] === true ? '' : str(switched[previewKey])) : null,
+      real: true,
+    } : null;
+
+    // ---- habits: your own non-default choices that a law could make everyone's ----
+    // Real (task 1004714): proposing one files a laws vote whose law locks the
+    // setting to your value. Offered only to a builder who may open a board item.
+    const canPropose = !!(obj(me.permissions) && me.permissions[PROPOSE_ATOM] === true);
+    const habits = [];
+    const proposed = obj(o.proposed) || {};
+    const habit = (key, value, law) => ({
+      key, name: nameFor(key) + ' ' + wordFor(key, value), fact: proposed[key] ? 'proposed' : 'only you, for now',
+      law, lock: { setting: key, value }, proposed: !!proposed[key], item: proposed[key] && proposed[key] !== true ? str(proposed[key]) : null,
+    });
+    const held = (key) => !!(byKey[key] && (byKey[key].locked || byKey[key].cappedBy));
+    const inter = obj(me.interaction);
+    if (inter) {
+      const stored = obj(inter.stored) || {};
+      arr(inter.fields).forEach((f) => {
+        const v = stored[f.field];
+        if (v == null || v === f.default_value || held(f.field)) return;
+        habits.push(habit(f.field, v, (LAW_LINES[f.field] && LAW_LINES[f.field][v]) || ('Every agent: ' + nameFor(f.field).toLowerCase() + ' ' + wordFor(f.field, v))));
+      });
+    }
+    const wand = obj(me.wandering);
+    if (wand && wand.override_level != null && !held('wandering')) {
+      const v = wand.effective_key;
+      habits.push(habit('wandering', v, 'Agents go off-task: ' + wordFor('wandering', v)));
+    }
+
+    // ---- what the agent reads first: the project's laws, then yours — both real ----
+    // The laws are GET /me's `laws` block: exactly what the Conductor sends every
+    // session (task 1004707).
+    const sent = obj(me.laws);
+    const laws = arr(sent && sent.laws).map((l, i) => ({ id: str(l.id), no: Number(l.no) || i + 1, text: str(l.text), effect: str(l.effect_on_ai) }));
+    const mine = [];
+    if (inter) mine.push({ key: 'interaction', title: 'How it talks to you', sent: !!inter.inject, text: inter.inject ? str(inter.contract) : '' });
+    if (wand) {
+      mine.push({
+        key: 'wandering', title: 'Off-task', sent: !!wand.inject,
+        text: wand.inject ? str(wand.contract) : '',
+        note: wand.inject ? '' : 'Not sent: ' + str(wand.effective_label || wand.effective_key).toLowerCase() + ' is what an agent does anyway.',
+      });
+    }
+    arr(me.specialities).forEach((x) => {
+      if (x && x.inject && x.contract) mine.push({ key: 'speciality:' + str(x.discipline), title: str(x.name) || 'Speciality', sent: true, text: str(x.contract), note: 'Only on a claim in its craft.' });
+    });
+
+    // task 1004713: the seats are /me's server-resolved `positions` block.
+    const positions = L.GovPositions ? L.GovPositions.positionsFor({ me, as: o.as }) : null;
+    return {
+      project, positions, strict, groups, habits: canPropose ? habits : [], canPropose,
+      // `sent`: the project's laws really reach every session (a law is in force)
+      reads: { laws, mine, sent: !!(sent && sent.inject && laws.length) },
+      counts: { rows: groups.reduce((n, g) => n + g.rows.length, 0), locked: lockedNow, total, habits: canPropose ? habits.length : 0 },
+      _sources: { positions: 'real', strict: 'real', groups: 'real', habits: 'real', 'reads.laws': 'real', 'reads.mine': 'real' },
+    };
+  }
+
+  // The write a row's choice makes, against the real route (null: no route).
+  function writeFor(key, value, view) {
+    if (['technical_level', 'toolchain_familiarity', 'verbosity', 'machinery'].indexOf(key) >= 0) return { method: 'PATCH', path: '/me/interaction', body: { [key]: value }, slice: 'interaction' };
+    if (key === 'wandering') {
+      const levels = arr(view && view.me && view.me.wandering && view.me.wandering.levels);
+      const n = levels.findIndex((l) => l.key === value);
+      return n < 0 ? null : { method: 'PATCH', path: '/me/wandering', body: { wandering: n }, slice: 'wandering' };
+    }
+    if (key.indexOf('model.') === 0) return { method: 'PATCH', path: '/me/model-allocation', body: { [key.slice(6)]: value }, slice: 'model_allocation' };
+    if (key === 'render') return { method: 'PATCH', path: '/me/render', body: { widgets: value }, slice: 'render' };
+    if (key.indexOf('skill.') === 0) return { method: 'PATCH', path: '/me/skill-prefs', body: { [key.slice(6)]: value }, slice: 'skills' };
+    return null;
+  }
+
+  // The laws vote a habit files (POST /government/board/laws): one law, locking the
+  // setting to the proposer's value.
+  function proposalFor(h, login) {
+    return {
+      enact: [{ text: h.law, locks: [h.lock] }],
+      rationale_md: 'Proposed from My agents. Today only ' + (login || 'one builder') + ' has this: ' + h.name.toLowerCase() + '. As a law it would hold for every agent in the project.',
+    };
+  }
+
+  const pure = { buildView, writeFor, proposalFor, SETTING, LAW_LINES, GROUPS };
+  root.OTBMyAgents = pure;
+  if (typeof module !== 'undefined' && module.exports) { module.exports = pure; return; }
+  if (typeof document === 'undefined' || !root.BongosClient) return;
+
+  // ====================================================================
+  // ---------- the page half ----------
+  // ====================================================================
+  const API = '/api/bongos';
+  const api = root.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const $ = (id) => document.getElementById(id);
+  const esc = (s) => str(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const toast = (msg) => { if (root.OTB && root.OTB.toast) root.OTB.toast(msg); };
+  const brand = root.__BRANDING__ || {};
+  const PROJECT = (brand.identity && (brand.identity.productName || brand.identity.worldName)) || 'The project';
+  const LOCK = '<svg class="ma-lock__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="7" width="9" height="6.5" rx="1.5"/><path d="M5.5 7V5.2a2.5 2.5 0 0 1 5 0V7"/></svg>';
+  const TICK = '<svg class="ma-tick" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>';
+
+  const S = { me: null, constitution: null, presets: null, skills: null, specialities: null, preview: null, proposed: {}, switched: {}, adopted: [], skillsOpen: false, readAll: false, view: null };
+
+  function asNow() {
+    try { return root.sessionStorage.getItem('hall-as') === 'nobody' || /[?&]as=nobody\b/.test(root.location.search) ? 'nobody' : null; }
+    catch (_) { return /[?&]as=nobody\b/.test(root.location.search) ? 'nobody' : null; }
+  }
+  function view() {
+    S.view = buildView({
+      me: S.me, constitution: S.constitution, presets: S.presets, skills: S.skills, specialities: S.specialities,
+      preview: S.preview, proposed: S.proposed, switched: S.switched, adopted: S.adopted, as: asNow(), project: PROJECT, now: Date.now(),
+    }, { GovLiving: root.GovLiving, GovPositions: root.GovPositions });
+    return S.view;
+  }
+
+  // ---- render ----
+  function chipsHtml(row, label) {
+    return '<div class="ma-chips" role="group" aria-label="' + esc(label) + '">' + row.options.map((op) =>
+      '<button type="button" class="ma-chip" data-set="' + esc(row.key) + '" data-value="' + esc(op.value) + '" aria-pressed="' + (op.pressed ? 'true' : 'false') + '">' + esc(op.label) + '</button>').join('') + '</div>';
+  }
+  function controlHtml(row) {
+    // every lock is a real law, enforced by the server (task 1004714)
+    if (row.locked) return '<span class="ma-lock">' + LOCK + '<span>' + esc(row.lock.text) + '</span></span>';
+    if (row.control === 'chips') return chipsHtml(row, row.name);
+    if (row.control === 'adopt') {
+      return row.options.length ? '<div class="ma-chips" role="group" aria-label="Adopt a speciality">' + row.options.map((op) =>
+        '<button type="button" class="ma-chip" data-adopt="' + esc(op.value) + '" aria-pressed="' + (op.pressed ? 'true' : 'false') + '"' + (op.pressed ? ' disabled' : '') + '>' + esc(op.pressed ? op.label : '+ ' + op.label) + '</button>').join('') + '</div>' : '';
+    }
+    if (row.control === 'expand') {
+      return '<button type="button" class="btn-ghost ma-more" data-expand="skills" aria-expanded="' + (S.skillsOpen ? 'true' : 'false') + '" aria-controls="ma-skills">' + (S.skillsOpen ? 'hide' : 'show') + '</button>';
+    }
+    return '';
+  }
+  function rowHtml(row) {
+    // a cap (task 1004714): the chips offer the values under it, and the line says which law
+    const sub = (row.cap ? '<span class="ma-row__yours ma-row__cap">' + LOCK + 'capped by ' + esc(row.cap.text) + '</span>' : '') +
+      (row.yours ? '<span class="ma-row__yours">yours: ' + esc(row.yours) + '</span>' : '');
+    let html = '<li class="ma-row' + (row.locked ? ' ma-row--locked' : '') + '" data-row="' + esc(row.key) + '">' +
+      '<span class="ma-row__name">' + esc(row.name) + TICK + '</span>' +
+      '<span class="ma-row__fact"><span>' + esc(row.fact) + '</span>' + sub + '</span>' +
+      '<span class="ma-row__act">' + controlHtml(row) + '</span></li>';
+    if (row.control === 'expand' && S.skillsOpen && !row.locked) {
+      html += '<li class="ma-sub" id="ma-skills"><ul class="ma-rows ma-rows--sub">' + row.skills.map((s) =>
+        '<li class="ma-row ma-row--sub" data-row="' + esc(s.key) + '"><span class="ma-row__name ma-mono">' + esc(s.skill) + TICK + '</span><span class="ma-row__fact"><span>' + esc(s.value) + '</span></span>' +
+        '<span class="ma-row__act">' + chipsHtml({ key: s.key, options: s.options }, s.skill) + '</span></li>').join('') + '</ul></li>';
+    }
+    return html;
+  }
+  function seatsHtml(v) {
+    const p = v.positions;
+    if (!p || !p.known) return '';
+    if (!p.has_position) {
+      return '<p class="ma-seat"><span class="ma-seat__l">Your seat</span><span class="ma-seat__none">None. Governing is held, not picked: you steer your own agents.</span></p>';
+    }
+    return '<p class="ma-seat"><span class="ma-seat__l">Your seats</span>' + p.positions.map((s) =>
+      '<span class="fact-pill' + (s.kind === 'lead' ? ' ma-seat__lead' : '') + '">' + esc(s.title) + '</span>').join('') + '</p>';
+  }
+  function strictHtml(v) {
+    const st = v.strict;
+    if (!st) return '';
+    const shown = st.shown || st.current;
+    const lockedTile = st.locked > 0
+      ? '<span class="ma-tile"><span class="ma-tile__n">' + esc(st.locked) + '</span><span class="ma-tile__l">would lock</span></span>'
+      : '<span class="ma-tile ma-tile--quiet"><span class="ma-tile__l">would lock none</span></span>';
+    return seatsHtml(v) +
+      '<div class="ma-strict__band">' +
+        '<div class="ma-strict__now">' +
+          (st.previewing ? '<p class="ma-strict__eyebrow">previewing</p>' : '') +
+          '<h2 class="ma-strict__h" id="ma-strict-h">' + esc(shown ? shown.name : 'No preset yet') + '</h2>' +
+          '<p class="ma-strict__line">' + esc(shown ? shown.line : 'Laws are passed one at a time. Pick a preset to see what it would lock.') + '</p>' +
+          '<p class="ma-strict__who">' + (st.previewing ? esc(v.project) + (st.current ? ' runs as ' + esc(st.current.name) : ' has no preset yet') + '. Switching is a vote.' : 'How strict ' + esc(v.project) + ' is. Switching is a vote.') + '</p>' +
+          // the switch sits under the words, so the locks column keeps its width
+          (st.filed !== null ? '<p class="ma-strict__vote"><a class="ma-row__link ma-filed" href="/board-room' + (st.filed ? '#item-' + esc(st.filed) : '') + '">up for a vote</a></p>'
+            : st.canSwitch ? '<p class="ma-strict__vote"><button type="button" class="btn-ghost ma-switch" data-switch="' + esc(shown.key) + '">put ' + esc(shown.name) + ' to a vote</button></p>' : '') +
+        '</div>' +
+        '<div class="ma-strict__presets" role="group" aria-label="Preview a strictness">' + st.presets.map((p) =>
+          '<button type="button" class="ma-preset" data-preset="' + esc(p.key) + '" aria-pressed="' + (p.shown ? 'true' : 'false') + '">' +
+            '<span class="ma-preset__name">' + esc(p.name) + (p.current ? '<span class="ma-preset__ours">ours</span>' : '') + '</span>' +
+            '<span class="ma-preset__n">' + esc(p.locks) + ' of ' + esc(st.total) + ' lock</span></button>').join('') +
+        '</div>' +
+        '<div class="ma-strict__locks">' + lockedTile +
+          '<span class="ma-pips" role="img" aria-label="' + esc(st.locked) + ' of ' + esc(st.total) + ' of your settings this preset would lock">' +
+          st.pips.map((on) => '<span class="ma-pip"' + (on ? ' data-on' : '') + '></span>').join('') + '</span>' +
+          (st.previewing ? '<button type="button" class="btn-ghost ma-back" data-preset="' + esc(st.current ? st.current.key : '') + '">back to ' + esc(st.current ? st.current.name : 'the project') + '</button>' : '') +
+        '</div>' +
+      '</div>';
+  }
+  function rowsHtml(v) {
+    let html = v.groups.map((g) =>
+      '<div class="ov-group ma-group" data-group="' + esc(g.key) + '">' +
+        '<div class="ov-group__head"><span class="ov-group__name">' + esc(g.title) + '</span>' +
+          (g.locked ? '<span class="ov-group__n">' + esc(g.locked) + ' locked</span>' : '') +
+          '<span class="ov-group__note">live</span></div>' +
+        '<ul class="ma-rows">' + g.rows.map(rowHtml).join('') + '</ul></div>').join('');
+    // "Make it a law" files a real laws vote: only for a builder who may open one
+    if (!v.canPropose) return html;
+    html += '<div class="ov-group ma-group" data-group="habits">' +
+      '<div class="ov-group__head"><span class="ov-group__name">Make it a law</span>' +
+        (v.habits.length ? '<span class="ov-group__n">' + esc(v.habits.length) + '</span>' : '') +
+        '<span class="ov-group__note">a habit can become everyone\'s</span></div>' +
+      (v.habits.length ? '<ul class="ma-rows">' + v.habits.map((h) =>
+        '<li class="ma-row' + (h.proposed ? ' ma-row--done' : '') + '" data-row="habit:' + esc(h.key) + '">' +
+          '<span class="ma-row__name">' + esc(h.name) + TICK + '</span>' +
+          '<span class="ma-row__fact"><span>' + esc(h.fact) + '</span>' + (h.proposed ? '<a class="ma-row__link" href="/board-room' + (h.item ? '#item-' + esc(h.item) : '') + '">up for a vote</a>' : '') + '</span>' +
+          '<span class="ma-row__act">' + (h.proposed ? '' : '<button type="button" class="btn-ghost" data-propose="' + esc(h.key) + '">propose to ' + esc(v.project) + '</button>') + '</span></li>').join('') + '</ul>'
+        : '<p class="ma-quiet">No habits of your own yet. Change a setting above and it shows here.</p>') +
+      '</div>';
+    return html;
+  }
+  function readsHtml(v) {
+    const laws = v.reads.laws;
+    const lawsHtml = laws.length
+      ? '<ol class="ma-laws">' + laws.map((l) => '<li class="ma-law"><span class="ma-law__no">' + esc(l.no) + '</span><span class="ma-law__t">' + esc(l.text) + '</span>' + (l.effect ? '<span class="ma-law__e">' + esc(l.effect) + '</span>' : '') + '</li>').join('') + '</ol>'
+      : '<p class="ma-quiet">No laws yet.</p>';
+    // The contract's own words, line by line: the clause before " — " is the setting,
+    // the rest is the instruction. Clamped to two lines until "read it all".
+    const line = (s) => {
+      const t = s.replace(/^- /, '');
+      const cut = t.indexOf(' — ');
+      return cut > 0 ? '<li><b>' + esc(t.slice(0, cut)) + '</b> ' + esc(t.slice(cut + 3)) + '</li>' : '<li>' + esc(t) + '</li>';
+    };
+    const mine = v.reads.mine.map((x) =>
+      '<div class="ma-said" data-said="' + esc(x.key) + '"><p class="ma-said__t">' + esc(x.title) + '</p>' +
+        (x.text ? '<ul class="ma-said__lines' + (S.readAll ? ' ma-said__lines--all' : '') + '">' + x.text.split(/\n- |\n/).filter((s) => s.trim() && !/^Interaction profile/.test(s)).map(line).join('') + '</ul>' : '') +
+        (x.note ? '<p class="ma-said__note">' + esc(x.note) + '</p>' : '') + '</div>').join('') +
+      (v.reads.mine.some((x) => x.text) ? '<button type="button" class="btn-ghost ma-readall" data-readall aria-pressed="' + (S.readAll ? 'true' : 'false') + '">' + (S.readAll ? 'shorter' : 'read it all') + '</button>' : '');
+    // the project's laws (GET /me laws): shown wherever one is in force; with none, nothing is drawn
+    const lawsShown = v.reads.sent;
+    return (lawsShown ? '<div class="ma-read ma-read--project">' +
+        '<p class="ma-read__l"><span class="ma-read__n">1</span>' + esc(v.project) + '\'s laws<span class="ma-read__who">' + (v.reads.sent ? 'sent to every agent, first' : 'for every agent') + '</span></p>' + lawsHtml + '</div>' : '') +
+      '<div class="ma-read ma-read--mine">' +
+        '<p class="ma-read__l">' + (lawsShown ? '<span class="ma-read__n">2</span>' : '') + 'Yours<span class="ma-read__who">sent today, live</span></p>' + (mine || '<p class="ma-quiet">Nothing personal is sent.</p>') + '</div>';
+  }
+  function render() {
+    const v = view();
+    const strict = $('ma-strict');
+    if (strict) {
+      strict.innerHTML = strictHtml(v);
+      if (v.strict) strict.removeAttribute('hidden'); else strict.setAttribute('hidden', '');
+    }
+    const sub = $('ma-sub');
+    if (sub && v.reads.sent) sub.textContent = 'How your Claude works for you. The project\'s laws come first; the rest is yours.';
+    const rows = $('ma-rows');
+    if (rows) rows.innerHTML = rowsHtml(v);
+    const reads = $('ma-reads-body');
+    if (reads) reads.innerHTML = readsHtml(v);
+    const lede = $('ma-desk-lede');
+    if (lede) {
+      lede.textContent = !v.counts.locked ? 'All yours. Tap to change; it saves straight away.'
+        : v.counts.locked >= v.counts.total ? 'Every setting here follows the project. Nothing is yours to change.'
+          : v.counts.locked + ' of your ' + v.counts.total + ' settings follow a law. The rest are yours: tap to change.';
+    }
+    const as = $('ma-as');
+    const nobody = asNow() === 'nobody';
+    if (as) {
+      if (nobody) { as.innerHTML = 'Viewing as a builder with no seat. <a href="?as=me">Back to you</a>'; as.removeAttribute('hidden'); } else as.setAttribute('hidden', '');
+    }
+    const main = $('hall-main');
+    if (main) main.setAttribute('aria-busy', 'false');
+  }
+  // the lit tick: the row stays, the attribute plays the CSS one-shot
+  function lit(key) {
+    const el = document.querySelector('[data-row="' + key.replace(/"/g, '') + '"]');
+    if (!el) return;
+    el.setAttribute('data-saved', '');
+    setTimeout(() => { el.removeAttribute('data-saved'); }, 1800);
+  }
+
+  // ---- reads ----
+  async function getJSON(path) {
+    const r = await api.request('GET', API + path).catch(() => null);
+    if (!r) return null;
+    if (r.status === 200) return r.data;
+    return r.status === 403 ? false : null;
+  }
+
+  // ---- writes ----
+  function choose(key, value) {
+    const row = findRow(key);
+    if (!row || row.locked) return;
+    const w = writeFor(key, value, S);
+    const said = (key.indexOf('skill.') === 0 ? key.slice(6) : nameFor(key).toLowerCase()) + ' ' + wordFor(key, value);
+    if (!w) return;
+    api.request(w.method, API + w.path, { body: w.body }).then((r) => {
+      if (r && r.ok && r.data) {
+        if (w.slice === 'skills') S.skills = r.data; else S.me[w.slice] = r.data;
+        render(); lit(key);
+        toast('Saved. Next session: ' + said + '.');
+      } else if (r && r.status === 501) {
+        applyLocally(w, key, value); render(); lit(key);
+        toast('Saved here only: the preview keeps nothing. ' + said + '.');
+      } else {
+        const code = r && r.data && r.data.error && (r.data.error.code || r.data.error);
+        // a law holds this setting (409 locked_by_law): say which, in the law's words
+        if (code === 'locked_by_law' && r.data.error.message) { toast(String(r.data.error.message) + '. Nothing changed.'); return; }
+        toast('Not saved' + (code ? ': ' + String(code).replace(/_/g, ' ') : '') + '. Nothing changed.');
+      }
+    }, () => toast('Not saved: no answer. Nothing changed.'));
+  }
+  // the 501 path: show the choice as made, without pretending the contract moved
+  function applyLocally(w, key, value) {
+    if (w.slice === 'interaction' && S.me.interaction) { S.me.interaction.effective = Object.assign({}, S.me.interaction.effective, { [key]: value }); S.me.interaction.stored = Object.assign({}, S.me.interaction.stored, { [key]: value }); }
+    if (w.slice === 'wandering' && S.me.wandering) { S.me.wandering.effective_key = value; S.me.wandering.override_level = w.body.wandering; }
+    if (w.slice === 'model_allocation' && S.me.model_allocation) S.me.model_allocation.effective = Object.assign({}, S.me.model_allocation.effective, w.body);
+    if (w.slice === 'render' && S.me.render) S.me.render.level = value;
+    if (w.slice === 'skills' && S.skills) arr(S.skills.effective).forEach((e) => { if (e.skill === key.slice(6)) { e.effective_model = value; e.override_model = value; } });
+  }
+  function findRow(key) {
+    const v = S.view;
+    if (!v) return null;
+    for (const g of v.groups) {
+      for (const r of g.rows) {
+        if (r.key === key) return r;
+        if (r.skills) { const s = r.skills.find((x) => x.key === key); if (s) return Object.assign({ locked: r.locked }, s); }
+      }
+    }
+    return null;
+  }
+  function adopt(id) {
+    const sp = arr(S.specialities && S.specialities.specialities).find((x) => String(x.id) === String(id));
+    if (!sp) return;
+    api.request('POST', API + '/specialities/' + encodeURIComponent(id) + '/adopt', { body: {} }).then((r) => {
+      if (r && r.ok) {
+        S.adopted.push(str(sp.name)); render(); lit('specialities');
+        toast(sp.name + ' adopted. Its skills stay off until you turn them on.');
+      } else toast('Not adopted' + (r && r.status ? ' (' + r.status + ')' : '') + '. Nothing changed.');
+    }, () => toast('Not adopted: no answer.'));
+  }
+  // A habit proposed as a law: a real laws vote (POST /government/board/laws,
+  // task 1004706), sat under the constitution in force like any amendment.
+  function propose(key) {
+    const v = S.view;
+    const h = v && v.habits.find((x) => x.key === key);
+    if (!h || h.proposed) return;
+    const login = S.me && S.me.builder ? (S.me.builder.github_login || S.me.builder.display_name || null) : null;
+    api.request('POST', API + '/government/board/laws', { body: proposalFor(h, login) }).then((r) => {
+      if (r && (r.ok || r.status === 501)) {
+        const id = r.ok && r.data && r.data.item && r.data.item.id;
+        S.proposed[key] = id ? String(id) : true; render(); lit('habit:' + key);
+        toast('Proposed to ' + v.project + ' as a law. It goes to a vote.' + (r.status === 501 ? ' (Preview: nothing filed.)' : ''));
+        return;
+      }
+      const code = r && r.data && r.data.error && (r.data.error.code || r.data.error);
+      if (code === 'setting_already_locked' || code === 'already_in_force') { toast('Not proposed: a law already holds this. Nothing filed.'); return; }
+      toast('Not proposed' + (r && r.status ? ' (' + r.status + ')' : '') + '. Nothing filed.');
+    }, () => toast('Not proposed: no answer.'));
+  }
+
+  // A preset switch: ONE real laws vote (POST /government/board/presets, task
+  // 1004715) enacting the preset's laws and repealing the other presets'. Nothing
+  // changes until the board passes it.
+  function switchTo(key) {
+    const v = S.view;
+    const p = v && v.strict && v.strict.presets.find((x) => x.key === key);
+    if (!p || !v.strict.canSwitch || S.switched[key]) return;
+    api.request('POST', API + '/government/board/presets', { body: { preset: key } }).then((r) => {
+      if (r && (r.ok || r.status === 501)) {
+        const id = r.ok && r.data && r.data.item && r.data.item.id;
+        S.switched[key] = id ? String(id) : true; render();
+        toast('Put to a vote: ' + p.name + '. Nothing changes until it passes.' + (r.status === 501 ? ' (Preview: nothing filed.)' : ''));
+        return;
+      }
+      const err = r && r.data && r.data.error;
+      const code = err && (err.code || err);
+      if (code === 'preset_in_force') { toast('Not filed: ' + p.name + ' is already in force.'); return; }
+      if (code === 'setting_already_locked') { toast('Not filed: a law of the project\'s own already holds ' + str(err.details && err.details.setting || 'that setting') + '. Repeal it first.'); return; }
+      toast('Not filed' + (r && r.status ? ' (' + r.status + ')' : '') + '. Nothing changed.');
+    }, () => toast('Not filed: no answer.'));
+  }
+
+  function wire() {
+    const main = $('hall-main');
+    if (!main) return;
+    main.addEventListener('click', (e) => {
+      const b = e.target.closest && e.target.closest('button');
+      if (!b || b.disabled) return;
+      if (b.hasAttribute('data-preset')) { const k = b.getAttribute('data-preset'); const cur = S.presets && S.presets.current; S.preview = !k || k === cur ? null : k; render(); return; }
+      if (b.hasAttribute('data-switch')) { switchTo(b.getAttribute('data-switch')); return; }
+      if (b.hasAttribute('data-set')) { const row = findRow(b.getAttribute('data-set')); const raw = b.getAttribute('data-value'); const opt = row && row.options.find((x) => String(x.value) === raw); if (opt && !opt.pressed) choose(row.key, opt.value); return; }
+      if (b.hasAttribute('data-expand')) { S.skillsOpen = !S.skillsOpen; render(); return; }
+      if (b.hasAttribute('data-readall')) { S.readAll = !S.readAll; render(); return; }
+      if (b.hasAttribute('data-adopt')) { adopt(b.getAttribute('data-adopt')); return; }
+      if (b.hasAttribute('data-propose')) { propose(b.getAttribute('data-propose')); }
+    });
+  }
+
+  async function boot() {
+    wire();
+    const me = await getJSON('/me');
+    if (me === null || me === false || !me.builder) {
+      const rows = $('ma-rows');
+      if (rows) rows.innerHTML = '<p class="ma-quiet">Sign in to see your agents. <a href="' + API + '/auth/web/start">Sign in</a></p>';
+      return;
+    }
+    S.me = me;
+    const [constitution, presets, skills, specialities] = await Promise.all([
+      getJSON('/government/constitution'), getJSON('/government/presets'), getJSON('/me/skill-prefs'), getJSON('/specialities'),
+    ]);
+    S.presets = presets || null;
+    S.constitution = constitution;
+    S.skills = skills || null;
+    S.specialities = specialities || null;
+    render();
+  }
+  boot();
+}(typeof window !== 'undefined' ? window : globalThis));