agents-city 0.3.0-beta.21 → 0.3.0

package/city/web/dist-hall/hall.js

@@ -1,131 +1,1620 @@
-function Z(e,a){return Object.fromEntries([...e].sort().map(i=>[i,a[i]||"blank"]))}function K(e,a,i,o){let t=[...e].sort();return t.length?`<div class="agenteRoles">${t.map(r=>{let n=a[r]||"blank",c=i.some(p=>p.id===n)?i:[{id:n,name:`${n} (city-defined)`,summary:"Role defined in this city rather than the built-in catalogue.",trade:n,domains:[]},...i];return`<div class="agenteRol">
-        <div><code>${o(r)}</code><span>support agent \xB7 member</span></div>
-        <select data-repo-role="${o(r)}" aria-label="Operating role for ${o(r)}">
-          ${c.map(p=>{let h=p.domains.filter(m=>m!=="custom").join(", "),y=h?` \xB7 ${h}`:"";return`<option value="${o(p.id)}"${p.id===n?" selected":""}
-                title="${o(p.summary)}">${o(p.name)}${o(y)}</option>`}).join("")}
-        </select>
-      </div>`}).join("")}</div>`:'<p class="prosa">No repo agents in this city.</p>'}var N="agents-city-map-activity/1";function ee(e){if(!e||typeof e!="object")return!1;let a=e;return a.protocol===N&&a.type==="map.nav"&&typeof a.view=="string"}function F(e){if(!e||typeof e!="object")return!1;let a=e;return a.protocol==="agents-city-activity/1"&&typeof a.id=="string"&&typeof a.seq=="number"&&typeof a.kind=="string"&&typeof a.actor=="string"&&typeof a.summary=="string"&&typeof a.title=="string"&&Array.isArray(a.details)}function te(e){return e.kind==="conversation.user"||e.kind==="conversation.agent"||e.kind==="runtime.session.started"||e.kind==="runtime.session.ended"}function ne(e){return e.kind==="conversation.agent"||e.kind==="conversation.agent.commentary"?!!e.summary.trim():e.kind==="committee.opened"||e.kind==="committee.position.revealed"||e.kind==="committee.synthesis.published"||e.kind.startsWith("committee.floor.")||e.kind==="committee.decision.recorded"||e.kind.startsWith("committee.verification.")||e.kind==="committee.replanned"||e.kind==="committee.closed"||e.kind==="committee.command.rejected"&&e.tone==="error"}var q=window.PASE,ie=new URLSearchParams(location.search).get("city")??"";async function f(e,a){let i=e+(e.includes("?")?"&":"?")+"PASE="+encodeURIComponent(q);return ie&&(i+="&city="+encodeURIComponent(ie)),(await fetch(i,{headers:{"X-City-Pase":q,"Content-Type":"application/json"},...a})).json()}function d(e,a=document){let i=a.querySelector(e);if(!i)throw new Error(`no element matches ${e}`);return i}function b(e,a=document){return[...a.querySelectorAll(e)]}function s(e){return String(e??"").replace(/[&<>"']/g,a=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[a])}var z=e=>e.replace(l.casa,"~"),ae=0;function v(e,a=!1){let i=d("#toast");i.textContent=e,i.className="ver"+(a?" mal":""),clearTimeout(ae),ae=window.setTimeout(()=>{i.className=""},3200)}var re=e=>new Promise(a=>setTimeout(a,e)),l,j="mapa",ve=[["resumen","Overview"],["mapa","The map"],["puesto","My seat"],["barrios","Districts & houses"],["red","Roads"],["committee","Committee"],["gente","Agents & skills"]];async function M(){l=await f("/api/estado"),w(),he(),ce(l.live_bus)}function he(){let e=document.querySelector("#livePanel header"),a=document.getElementById("demoControles");if(!e||!l.demo){a?.remove();return}if(a)return;let i=document.createElement("div");i.id="demoControles",i.innerHTML='<span>guided committee</span><button id="demoReplay" type="button" title="Play the guided committee from the top">\u27F3 replay</button><button id="demoPausa" type="button" title="Pause or resume mid-scene">\u23F8 pause</button>',e.appendChild(i);let o=d("#demoPausa",i),t=r=>f("/api/demo",{method:"POST",body:JSON.stringify({action:r})});d("#demoReplay",i).onclick=async()=>{let r=await t("restart");o.textContent="\u23F8 pause",r.ok||v("Could not restart the demo",!0)},o.onclick=async()=>{let r=o.textContent?.includes("resume")??!1,n=await t(r?"resume":"pause");if(!n.running){o.textContent="\u23F8 pause",v("Nothing playing \u2014 hit replay",!0);return}o.textContent=n.paused?"\u25B6 resume":"\u23F8 pause"}}var T=null,V="",k=[],H=!1,_=0,P=null,le=!1,A=!1,D=null;function ce(e){if(!e?.online||!e.url){H=!1,E(),G();return}if(e.url===V&&T&&(T.readyState===WebSocket.OPEN||T.readyState===WebSocket.CONNECTING))return;let a=T;a&&(a.onclose=null,a.close()),V=e.url;let i=new WebSocket(e.url);T=i,H=!1,E(),i.onopen=()=>{T===i&&(H=!0,_=0,E())},i.onmessage=o=>{if(T!==i)return;let t;try{t=JSON.parse(String(o.data))}catch{return}if(t.type==="activity.state")k=Array.isArray(t.events)?t.events.filter(F):[],k.sort((r,n)=>r.seq-n.seq),P===null&&(P=ye()),E(!0);else if(t.type==="activity.event"&&F(t.event)){let r=t.event;k.some(n=>n.id===r.id)||k.push(r),k=k.sort((n,c)=>n.seq-c.seq).slice(-200),!le&&r.kind==="committee.opened"&&r.thread&&(P=r.thread),E(!0),de(r)}},i.onclose=()=>{T===i&&(T=null,H=!1,E(),G())},i.onerror=()=>{}}function de(e){let a=e.kind.startsWith("committee.");if(!ne(e)&&!te(e)&&!a)return;let i=document.querySelector("#cityMapFrame");if(!i)return;if(i.dataset.ready!=="1"){D=e;return}let o=new URL(i.src,location.href).origin;i.contentWindow?.postMessage({protocol:N,type:"activity.event",event:e},o)}function G(){_||(_=window.setTimeout(async()=>{_=0;try{ce(await f("/api/live"))}catch{G()}},1500))}function E(e=!1){let a=document.querySelector("#liveDot"),i=document.querySelector("#liveState"),o=document.querySelector("#liveEvents"),t=document.querySelector("#liveFilter"),r=document.querySelector("#liveContext"),n=document.querySelector("#liveWorkToggle");if(!a||!i||!o||!t||!r||!n)return;a.classList.toggle("on",H),i.textContent=H?"websocket live":V?"reconnecting":"session offline";let c=new Map;for(let g of k)g.thread&&(g.kind==="committee.opened"||g.kind==="conversation.user")&&!Y(g)&&!c.has(g.thread)&&c.set(g.thread,g.summary);t.innerHTML='<option value="">all conversations</option>'+[...c.entries()].reverse().map(([g,L])=>`<option value="${s(g)}">${s(L.slice(0,54)||g)}</option>`).join("");let p=P||"";t.value=[...t.options].some(g=>g.value===p)?p:"",t.onchange=()=>{P=t.value,le=!0,E(!0)},n.classList.toggle("on",A),n.setAttribute("aria-pressed",String(A)),n.textContent=A?"hide work":"show work",n.onclick=()=>{A=!A,E(!0)},be(t.value,r);let y=(t.value?k.filter(g=>g.thread===t.value):k).filter(g=>!Y(g)&&(A||!$e(g)||g.tone==="error"));if(!y.length){o.innerHTML=`<li class="liveEmpty">${H?"The bus is live. Questions, positions and moderated replies will appear here.":"Start the city session. Its visible conversation will appear here as it happens."}</li>`;return}let m=o.scrollHeight-o.scrollTop-o.clientHeight<90;o.innerHTML=y.map(fe).join(""),(e||m)&&(o.scrollTop=o.scrollHeight)}function fe(e){let a=new Date(e.at),i=Number.isNaN(a.getTime())?"":a.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),o=e.role==="chair"?"chair":e.role==="member"?"member":"system",t=pe(e.actor),r=e.target&&!["committee","seat"].includes(e.target)?`to ${e.target}`:e.target==="committee"?"to the committee":"",n=e.summary.trim(),c=we(n),p=c!==n,h=e.details.length?`<details class="liveEvidence"><summary>${e.details.length} ${e.details.length===1?"detail":"details"}</summary><ul>${e.details.map(m=>`<li>${s(m)}</li>`).join("")}</ul></details>`:"",y=p?`<details class="liveFull"><summary>read full message</summary><p>${s(n)}</p></details>`:"";return`<li class="liveTurn ${o} ${s(e.tone)}">
-    <div class="liveAvatar${l?.avatars?.[e.actor]?" conCara":""}"
-      style="--actor-hue:${me(e.actor)}" aria-hidden="true">
-      ${ue(e.actor,e.role==="chair")}
+// city/web/src/idioma.ts
+var ES = {};
+function clave(fuente) {
+  return fuente.replace(/\s+/g, " ").trim();
+}
+function anota(pares) {
+  for (const [fuente, texto] of Object.entries(pares)) ES[clave(fuente)] = texto;
+}
+var ELEGIDO = "";
+function idioma() {
+  if (ELEGIDO === "es" || ELEGIDO === "en") return ELEGIDO;
+  try {
+    const guardado = localStorage.getItem("hall-idioma");
+    if (guardado === "es" || guardado === "en") {
+      ELEGIDO = guardado;
+      return ELEGIDO;
+    }
+  } catch {
+  }
+  const suyo = (navigator.language || "en").toLowerCase();
+  ELEGIDO = suyo.startsWith("es") ? "es" : "en";
+  return ELEGIDO;
+}
+function ponIdioma(cual) {
+  ELEGIDO = cual;
+  try {
+    localStorage.setItem("hall-idioma", cual);
+  } catch {
+  }
+  document.documentElement.lang = cual;
+}
+function t(fuente, valores) {
+  const texto = idioma() === "es" ? ES[clave(fuente)] ?? fuente : fuente;
+  if (!valores) return texto;
+  return texto.replace(
+    /\{(\w+)\}/g,
+    (_, clave2) => valores[clave2] === void 0 ? `{${clave2}}` : String(valores[clave2])
+  );
+}
+function plural(n, una, varias) {
+  return t(n === 1 ? una : varias, { n: String(n) });
+}
+
+// city/web/src/es.ts
+anota({
+  // ── the rail ──────────────────────────────────────────────────────────────
+  Overview: "Resumen",
+  "The map": "El mapa",
+  "My seat": "Mi asiento",
+  Districts: "Distritos",
+  Roads: "Carreteras",
+  Committee: "Comit\xE9",
+  Houses: "Casas",
+  "All cities": "Todas las ciudades",
+  "you are in": "est\xE1s en",
+  "{n} house": "{n} casa",
+  "{n} houses": "{n} casas",
+  "Create another city \u2192": "Crear otra ciudad \u2192",
+  // ── the guide ─────────────────────────────────────────────────────────────
+  Welcome: "Bienvenida",
+  "The work": "El trabajo",
+  "Your chair": "Tu silla",
+  "The houses": "Las casas",
+  Ready: "Listo",
+  "A city is you, and the houses around you": "Una ciudad eres t\xFA y las casas que te rodean",
+  "Let\u2019s build it": "Vamos a construirla",
+  "I\u2019ll set it up myself": "Ya lo configuro yo",
+  "What kind of work happens here?": "\xBFQu\xE9 clase de trabajo se hace aqu\xED?",
+  "And what are you, here?": "\xBFY t\xFA qu\xE9 eres aqu\xED?",
+  "Who lives in your city?": "\xBFQui\xE9n vive en tu ciudad?",
+  "Who else lives here?": "\xBFQui\xE9n m\xE1s vive aqu\xED?",
+  "Build the first house": "Construye la primera casa",
+  "Add another house": "A\xF1ade otra casa",
+  "That is everyone": "Ya est\xE1n todos",
+  "Skip \u2014 just me for now": "S\xE1ltalo \u2014 de momento solo yo",
+  "a new house": "una casa nueva",
+  "Who lives in it?": "\xBFQui\xE9n vive en ella?",
+  "What do you call it?": "\xBFC\xF3mo la llamas?",
+  "What kind of work does it do?": "\xBFQu\xE9 clase de trabajo hace?",
+  "It writes code": "Escribe c\xF3digo",
+  "It keeps knowledge": "Guarda conocimiento",
+  "It coordinates": "Coordina",
+  "What does it work on?": "\xBFSobre qu\xE9 trabaja?",
+  "Build it": "Constr\xFAyela",
+  "building\u2026": "construyendo\u2026",
+  Cancel: "Cancelar",
+  Back: "Atr\xE1s",
+  Next: "Siguiente",
+  "question 1 of 4": "pregunta 1 de 4",
+  "question 2 of 4": "pregunta 2 de 4",
+  "question 3 of 4": "pregunta 3 de 4",
+  "Open my session": "Abrir mi sesi\xF3n",
+  "See the houses": "Ver las casas",
+  "Draw the map": "Dibujar el mapa",
+  "Set a goal": "Poner un objetivo",
+  "{city} is alive": "{city} est\xE1 viva",
+  // ── the houses ────────────────────────────────────────────────────────────
+  "the houses of {city}": "las casas de {city}",
+  "Who lives in {city}": "Qui\xE9n vive en {city}",
+  "+ Build a house": "+ Construir una casa",
+  "+ folder": "+ carpeta",
+  "+ zip": "+ zip",
+  test: "probar",
+  engine: "motor",
+  effort: "esfuerzo",
+  provider: "proveedor",
+  growth: "crecimiento",
+  "works on": "trabaja sobre",
+  skills: "skills",
+  "nothing mounted yet": "a\xFAn sin nada montado",
+  "none discovered": "ninguna descubierta",
+  connected: "conectado",
+  idle: "inactivo",
+  missing: "no instalado",
+  default: "por defecto",
+  "custom\u2026": "otro\u2026",
+  // ── cities ────────────────────────────────────────────────────────────────
+  cities: "ciudades",
+  "Your cities": "Tus ciudades",
+  "Start another city": "Empezar otra ciudad",
+  "Create it": "Crearla",
+  open: "abrir",
+  archive: "archivar",
+  "\xB7 open now": "\xB7 abierta ahora",
+  "{n} house of its own": "{n} casa propia",
+  "{n} houses of its own": "{n} casas propias",
+  "Start this city over": "Empezar esta ciudad de cero",
+  "Start over\u2026": "Empezar de cero\u2026",
+  // ── the map ───────────────────────────────────────────────────────────────
+  "the map": "el mapa",
+  "Your city, drawn": "Tu ciudad, dibujada",
+  "Draw my city": "Dibujar mi ciudad",
+  "Draw it anyway": "Dibujarla igualmente",
+  "baking the map \u2014 first time takes a minute": "horneando el mapa \u2014 la primera vez tarda un minuto",
+  // ── shared ────────────────────────────────────────────────────────────────
+  Saved: "Guardado",
+  Copied: "Copiado",
+  "reading your city": "leyendo tu ciudad",
+  "Could not save": "No se pudo guardar"
+});
+anota({
+  // ── the chrome that lives in the page itself ──────────────────────────────
+  "town hall": "ayuntamiento",
+  "Manage one autonomous city: its seat, repo agents, roads and map. Everything here is a plain file you can also inspect by hand.": "Gobierna una ciudad aut\xF3noma: su asiento, sus agentes, sus carreteras y su mapa. Todo lo que hay aqu\xED es un fichero de texto que tambi\xE9n puedes abrir a mano.",
+  // ── looking through the disk ──────────────────────────────────────────────
+  "search your disk \u2014 a name, or part of a path": "busca en tu disco \u2014 un nombre, o parte de una ruta",
+  "Look through the disk again \u2014 for something cloned a minute ago": "Vuelve a mirar el disco \u2014 por si acabas de clonar algo",
+  "Search again": "Buscar otra vez",
+  "searching\u2026": "buscando\u2026",
+  "looking through your disk\u2026": "mirando en tu disco\u2026",
+  "{shown} of {total} places match": "{shown} de {total} sitios encajan",
+  "{total} places found \u2014 type to narrow it down": "{total} sitios encontrados \u2014 escribe para acotar",
+  "Nothing matches that. Add it by path below.": "Nada encaja con eso. A\xF1\xE1delo por ruta aqu\xED abajo.",
+  "Nothing found on this disk \u2014 add folders by path below.": "No hay nada en este disco \u2014 a\xF1ade carpetas por ruta aqu\xED abajo.",
+  "\u2026or a path, and Enter": "\u2026o una ruta, y Enter",
+  // ── what runs an agent ────────────────────────────────────────────────────
+  "Its role \u2014 its speciality, never authority": "Su rol \u2014 su especialidad, nunca su autoridad",
+  "What runs it?": "\xBFQu\xE9 lo mueve?",
+  "Leave all three on default and it runs the way you do. Model and effort are Claude\u2019s to read; another CLI carries its own flags.": "D\xE9jalos los tres por defecto y funcionar\xE1 como t\xFA. El modelo y el esfuerzo los lee Claude; otra CLI lleva sus propias opciones."
+});
+anota({
+  // ── the guide, in prose ───────────────────────────────────────────────────
+  "You take the chair. Around it, one <b>house</b> per worker \u2014 an <b>agent</b> \u2014 each with its own window, its own role and its own corner of your disk: a repository, three of them, a folder of documents, whatever it actually works on. The map draws them as houses that grow with the work done in them, and many houses are a city. They never talk to each other behind your back: you chair, they answer.": "T\xFA presides. A tu alrededor, una <b>casa</b> por trabajador \u2014 un <b>agente</b> \u2014 cada una con su ventana, su rol y su rinc\xF3n de tu disco: un repositorio, tres, una carpeta de documentos, lo que de verdad tenga entre manos. El mapa las dibuja como casas que crecen con el trabajo hecho dentro, y muchas casas son una ciudad. Nunca hablan entre ellas a tus espaldas: t\xFA presides, ellas responden.",
+  "Everything lives as plain files in {donde}. Nothing leaves this machine, there is no account, and you can edit any of it by hand afterwards.": "Todo vive como ficheros de texto en {donde}. Nada sale de esta m\xE1quina, no hay cuenta que crear, y luego puedes editarlo a mano.",
+  "<b>Four questions and you are working.</b> You can skip any of them and change everything later.": "<b>Cuatro preguntas y a trabajar.</b> Puedes saltarte cualquiera y cambiarlo todo despu\xE9s.",
+  "It decides the vocabulary, the roles you will be offered and what counts as evidence in a decision. A clinic does not ship pull requests, and a law firm does not measure story points. Pick the closest one \u2014 you can change it later.": "Decide el vocabulario, los roles que se te ofrecen y qu\xE9 cuenta como prueba en una decisi\xF3n. Una cl\xEDnica no entrega pull requests, y un despacho no mide story points. Elige el m\xE1s cercano \u2014 luego se cambia.",
+  "You chair this city whatever you answer \u2014 this is your <b>speciality</b>, not your authority. It shapes the perspective you bring to a decision and the knowledge files the city writes for you. <b>Blank</b> is a real answer: it means no preset knowledge.": "Presides esta ciudad respondas lo que respondas \u2014 esto es tu <b>especialidad</b>, no tu autoridad. Da forma a la perspectiva con la que entras en una decisi\xF3n y a los ficheros de conocimiento que la ciudad escribe para ti. <b>En blanco</b> es una respuesta de verdad: significa sin conocimiento previo.",
+  "Every house holds one worker \u2014 an <b>agent</b> \u2014 with its own window, its own role and its own corner of your disk. A house is <b>not</b> a repository: one can answer for three services and a folder of documents at once, and a house whose work is documents needs no git anywhere.": "Cada casa aloja a un trabajador \u2014 un <b>agente</b> \u2014 con su ventana, su rol y su rinc\xF3n de tu disco. Una casa <b>no</b> es un repositorio: una sola puede responder por tres servicios y una carpeta de documentos a la vez, y una casa cuyo trabajo son documentos no necesita git en ninguna parte.",
+  "Everything found on this disk: <b>repositories</b>, the <b>worktrees</b> an isolated agent works in, and <b>folders of documents</b> with no git at all. Pick as many as you like \u2014 this is the part that makes it an agent and not a repo.": "Todo lo que hay en este disco: <b>repositorios</b>, los <b>worktrees</b> en los que trabaja un agente aislado, y <b>carpetas de documentos</b> sin git ninguno. Elige las que quieras \u2014 esta es la parte que lo convierte en un agente y no en un repo.",
+  "Working on: {que}": "Trabaja sobre: {que}",
+  "Your seat is written and {cuantas}. Everything you just answered is a plain file you can read and edit.": "Tu asiento queda escrito y {cuantas}. Todo lo que acabas de responder es un fichero de texto que puedes leer y editar.",
+  "<b>{n}</b> house stands around it": "a su alrededor hay <b>{n}</b> casa",
+  "<b>{n}</b> houses stand around it": "a su alrededor hay <b>{n}</b> casas",
+  "the city is waiting for its first house": "la ciudad espera su primera casa",
+  "What people usually do next:": "Lo que suele hacerse ahora:",
+  "A goal is optional, and the city works without one \u2014 but a round with no goal is a status report, because there is nothing to argue against.": "El objetivo es opcional y la ciudad funciona sin \xE9l \u2014 pero una ronda sin objetivo es un parte de estado, porque no hay nada contra lo que discutir.",
+  // ── what a house does for a living ────────────────────────────────────────
+  "Its house grows with the pull requests it merges. Mounts repositories and worktrees.": "Su casa crece con las pull requests que fusiona. Monta repositorios y worktrees.",
+  "Its house grows with the documents it writes. Needs no git at all.": "Su casa crece con los documentos que escribe. No necesita git para nada.",
+  "Its house grows with the decisions it records.": "Su casa crece con las decisiones que deja escritas.",
+  "urgencias, api, the handbook \u2014 whatever you would say out loud": "urgencias, api, el manual \u2014 como lo llamar\xEDas en voz alta"
+});
+
+// city/web/src/motores.ts
+var RUNTIMES = ["claude", "codex", "opencode", "kimi"];
+var MODELOS = ["haiku", "sonnet", "opus", "fable"];
+var NIVEL_ESFUERZO = {
+  low: 1,
+  medium: 2,
+  high: 3,
+  xhigh: 4,
+  max: 5
+};
+var ESFUERZOS = Object.keys(NIVEL_ESFUERZO);
+function opciones(valores, actual, esc2, porDefecto = "default") {
+  return valores.concat(actual && !valores.includes(actual) ? [actual] : []).map(
+    (v) => `<option value="${esc2(v)}"${v === actual ? " selected" : ""}>${esc2(v || porDefecto)}</option>`
+  ).join("");
+}
+function nivelDeMotor(model) {
+  const alias = model.toLowerCase();
+  if (!alias) return { ancho: 0.5, texto: "default", defecto: true };
+  for (const [clave2, ancho] of [
+    ["fable", 1],
+    ["opus", 0.8],
+    ["sonnet", 0.55],
+    ["haiku", 0.35]
+  ]) {
+    if (alias.includes(clave2)) return { ancho, texto: alias, defecto: false };
+  }
+  return { ancho: 0.6, texto: alias, defecto: false };
+}
+
+// city/web/src/bienvenida.ts
+var CLASES = [
+  [
+    "code",
+    "It writes code",
+    "Its house grows with the pull requests it merges. Mounts repositories and worktrees."
+  ],
+  [
+    "knowledge",
+    "It keeps knowledge",
+    "Its house grows with the documents it writes. Needs no git at all."
+  ],
+  ["coordinator", "It coordinates", "Its house grows with the decisions it records."]
+];
+var CLASE_CORTA = { repo: "git", worktree: "wt", docs: "doc" };
+var PASOS = ["Welcome", "The work", "Your chair", "The houses", "Ready"];
+function casita(color) {
+  return `<svg viewBox="0 0 120 108" role="img" aria-label="an isometric house" class="bvCasa">
+    <polygon points="60,10 112,40 60,70 8,40" fill="${color}" opacity=".95"/>
+    <polygon points="8,40 60,70 60,100 8,70" fill="${color}" opacity=".62"/>
+    <polygon points="112,40 60,70 60,100 112,70" fill="${color}" opacity=".40"/>
+  </svg>`;
+}
+var Bienvenida = class {
+  constructor(p) {
+    this.p = p;
+  }
+  paso = 0;
+  dominios = [];
+  roles = [];
+  rolesDeAgente = [];
+  repos = [];
+  dominio = "";
+  rol = "";
+  roster = [];
+  enCurso = null;
+  guardando = false;
+  buscandoRepos = false;
+  reposListos = false;
+  /** What is typed in the mount search box, kept across repaints. */
+  filtro = "";
+  lienzo = null;
+  /** Draw the current step into `lienzo`. The only entry point. */
+  async pinta(lienzo) {
+    this.lienzo = lienzo;
+    if (!this.dominios.length) {
+      lienzo.innerHTML = '<p class="cargando">reading the domain packs</p>';
+      const [d, ra] = await Promise.all([
+        this.p.api("/api/domains"),
+        this.p.api("/api/roles?scope=agent")
+      ]);
+      this.dominios = d.domains;
+      this.rolesDeAgente = ra.roles;
+    }
+    lienzo.innerHTML = `<div class="bv">${this.cabecera()}${await this.cuerpo()}</div>`;
+    this.enlaza(lienzo);
+  }
+  cabecera() {
+    const puntos = PASOS.map(
+      (nombre, i) => `<span class="bvPunto ${i === this.paso ? "aqui" : i < this.paso ? "hecho" : ""}"
+          title="${this.p.esc(t(nombre))}"><i></i>${this.p.esc(t(nombre))}</span>`
+    ).join("");
+    return `<div class="bvPasos">${puntos}</div>`;
+  }
+  async cuerpo() {
+    switch (this.paso) {
+      case 0:
+        return this.pantallaHola();
+      case 1:
+        return this.pantallaDominio();
+      case 2:
+        return await this.pantallaRol();
+      case 3:
+        return this.pantallaAgentes();
+      default:
+        return this.pantallaFinal();
+    }
+  }
+  // ── 0. what this is ────────────────────────────────────────────────────────
+  pantallaHola() {
+    return `
+      <div class="bvHola">
+        <div class="bvArte">${casita("#7048e8")}${casita("#45b9a7")}${casita("#f2674a")}</div>
+        <div>
+          <span class="sub">welcome</span>
+          <h1>${t("A city is you, and the houses around you")}</h1>
+          <p class="prosa">${t(`You take the chair. Around it, one <b>house</b> per worker \u2014 an
+          <b>agent</b> \u2014 each with its own window, its own role and its own corner of your
+          disk: a repository, three of them, a folder of documents, whatever it actually
+          works on. The map draws them as houses that grow with the work done in them, and
+          many houses are a city. They never talk to each other behind your back: you chair,
+          they answer.`)}</p>
+          <p class="prosa">${t("Everything lives as plain files in {donde}. Nothing leaves this machine, there is no account, and you can edit any of it by hand afterwards.", { donde: `<code class="mono">${this.p.esc(this.p.datos)}</code>` })}</p>
+          <p class="prosa">${t("<b>Four questions and you are working.</b> You can skip any of them and change everything later.")}</p>
+          <div class="bvBotones">
+            <button class="bt ppal" data-bv="siguiente">${t("Let\u2019s build it")}</button>
+            <button class="bt" data-bv="salir">${t("I\u2019ll set it up myself")}</button>
+          </div>
+        </div>
+      </div>`;
+  }
+  // ── 1. the domain ─────────────────────────────────────────────────────────
+  pantallaDominio() {
+    const tarjetas = this.dominios.map(
+      (d) => `
+      <button class="bvOpcion ${this.dominio === d.id ? "elegida" : ""}" data-bv="dominio"
+        data-id="${this.p.esc(d.id)}">
+        <b>${this.p.esc(d.name)}</b><span>${this.p.esc(d.summary)}</span></button>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">${t("question 1 of 4")}</span>
+        <h1>${t("What kind of work happens here?")}</h1>
+        <p class="prosa">${t(`It decides the vocabulary, the roles you will be offered and what
+        counts as evidence in a decision. A clinic does not ship pull requests, and a law
+        firm does not measure story points. Pick the closest one \u2014 you can change it later.`)}</p>
+        <div class="bvRejilla">${tarjetas}</div>
+        <div class="bvBotones">
+          <button class="bt" data-bv="atras">${t("Back")}</button>
+          <button class="bt ppal" data-bv="siguiente" ${this.dominio ? "" : "disabled"}>${t("Next")}</button>
+        </div>
+      </div>`;
+  }
+  // ── 2. your chair ─────────────────────────────────────────────────────────
+  async pantallaRol() {
+    if (!this.roles.length || this.roles[0]?.id === void 0) {
+      const r = await this.p.api(
+        "/api/roles?domain=" + encodeURIComponent(this.dominio)
+      );
+      this.roles = r.roles;
+    }
+    const tarjetas = this.roles.map(
+      (r) => `
+      <button class="bvOpcion ${this.rol === r.id ? "elegida" : ""}" data-bv="rol"
+        data-id="${this.p.esc(r.id)}">
+        <b>${this.p.esc(r.name)}</b><span>${this.p.esc(r.summary || r.trade)}</span></button>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">${t("question 2 of 4")}</span>
+        <h1>${t("And what are you, here?")}</h1>
+        <p class="prosa">${t(`You chair this city whatever you answer \u2014 this is your
+        <b>speciality</b>, not your authority. It shapes the perspective you bring to a
+        decision and the knowledge files the city writes for you. <b>Blank</b> is a real
+        answer: it means no preset knowledge.`)}</p>
+        <div class="bvRejilla">${tarjetas}</div>
+        <div class="bvBotones">
+          <button class="bt" data-bv="atras">${t("Back")}</button>
+          <button class="bt ppal" data-bv="siguiente" ${this.rol ? "" : "disabled"}>Next</button>
+        </div>
+      </div>`;
+  }
+  // ── 3. the agents ─────────────────────────────────────────────────────────
+  pantallaAgentes() {
+    this.buscaReposUnaVez();
+    if (!this.enCurso) return this.listaDeAgentes();
+    return this.formularioDeAgente(this.enCurso);
+  }
+  buscaReposUnaVez(otraVez = false) {
+    if (this.buscandoRepos || this.reposListos && !otraVez) return;
+    this.buscandoRepos = true;
+    void this.p.api(
+      "/api/misrepos?user=" + encodeURIComponent(this.p.yo) + (otraVez ? "&refresh=1" : "")
+    ).then((r) => {
+      this.repos = r.repos ?? [];
+    }).catch(() => {
+      this.repos = [];
+    }).finally(() => {
+      this.buscandoRepos = false;
+      this.reposListos = true;
+      if (this.lienzo && this.paso === 3) void this.pinta(this.lienzo);
+    });
+  }
+  listaDeAgentes() {
+    const fichas = this.roster.map(
+      (a) => `
+      <div class="bvFicha">
+        <b>${this.p.esc(a.nombre)}</b>
+        <span>${this.p.esc(a.clase)} \xB7 ${this.p.esc(a.rol)}</span>
+        <span class="de">${a.montajes.length ? this.p.esc(a.montajes.map((m) => m.split("/").pop()).join(", ")) : t("nothing mounted yet")}</span>
+      </div>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">${t("question 3 of 4")}</span>
+        <h1>${t(this.roster.length ? "Who else lives here?" : "Who lives in your city?")}</h1>
+        <p class="prosa">${t(`Every house holds one worker \u2014 an <b>agent</b> \u2014 with its own window,
+        its own role and its own corner of your disk. A house is <b>not</b> a repository: one
+        can answer for three services and a folder of documents at once, and a house whose
+        work is documents needs no git anywhere.`)}</p>
+        ${this.roster.length ? `<div class="bvFichas">${fichas}</div>` : ""}
+        <div class="bvBotones">
+          <button class="bt ppal" data-bv="nuevo">${t(
+      this.roster.length ? "Add another house" : "Build the first house"
+    )}</button>
+          <button class="bt" data-bv="siguiente">${t(
+      this.roster.length ? "That is everyone" : "Skip \u2014 just me for now"
+    )}</button>
+        </div>
+      </div>`;
+  }
+  /**
+   * The places on this disk worth offering for this house, ranked.
+   *
+   * With nothing typed it is what you touched recently, because on a machine
+   * with three hundred clones a list is not an answer. What is typed matches
+   * the name and the path both — people look for `rankia` and for `Documents`
+   * with equal frequency, and only one of those is a repository name. A house
+   * that keeps knowledge sees document folders first, because that is the one
+   * kind of agent the old picker could not help at all.
+   */
+  buscaEnElDisco(a) {
+    const q2 = this.filtro.trim().toLowerCase();
+    const quiereDocs = a.clase === "knowledge";
+    const puntua = (r) => (r.clase === "docs" ? quiereDocs ? -2 : 1 : 0) + (r.mio ? -1 : 0);
+    const encaja = q2 ? this.repos.filter(
+      (r) => r.nombre.toLowerCase().includes(q2) || r.ruta.toLowerCase().includes(q2)
+    ) : this.repos.filter((r) => r.mio);
+    const elegidas = this.repos.filter((r) => a.montajes.includes(r.ruta) && !encaja.includes(r));
+    return elegidas.concat(encaja).sort((x, y) => puntua(x) - puntua(y)).slice(0, 40);
+  }
+  formularioDeAgente(a) {
+    const clases = CLASES.map(
+      ([id, titulo, porque]) => `
+      <button class="bvOpcion ${a.clase === id ? "elegida" : ""}" data-bv="clase" data-id="${id}">
+        <b>${t(titulo)}</b><span>${t(porque)}</span></button>`
+    ).join("");
+    const roles = this.rolesDeAgente.map(
+      (r) => `<option value="${this.p.esc(r.id)}"${r.id === a.rol ? " selected" : ""}>${this.p.esc(
+        r.name
+      )}</option>`
+    ).join("");
+    const esClaude = (a.runtime || "claude") === "claude";
+    const encontrados = this.buscaEnElDisco(a);
+    const sugeridos = encontrados.map(
+      (r) => `<button class="bvChip cl-${this.p.esc(r.clase)} ${a.montajes.includes(r.ruta) ? "elegida" : ""}"
+          data-bv="monta" data-ruta="${this.p.esc(r.ruta)}"
+          title="${this.p.esc(r.ruta)}${r.cuando ? ` \xB7 ${this.p.esc(r.cuando)}` : ""}"
+          ><i class="bvClase">${this.p.esc(CLASE_CORTA[r.clase] ?? r.clase)}</i>${this.p.esc(
+        r.nombre
+      )}</button>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">${t("a new house")}</span>
+        <h1>${t("Who lives in it?")}</h1>
+        <div class="campo"><label>${t("What do you call it?")}</label>
+          <input type="text" id="bvNombre" value="${this.p.esc(a.nombre)}"
+            placeholder="${t("urgencias, api, the handbook \u2014 whatever you would say out loud")}"></div>
+        <label class="bvEtiqueta">${t("What kind of work does it do?")}</label>
+        <div class="bvRejilla bvTres">${clases}</div>
+        <div class="campo"><label>${t("Its role \u2014 its speciality, never authority")}</label>
+          <select id="bvRol">${roles}</select></div>
+        <label class="bvEtiqueta">${t("What runs it?")}</label>
+        <p class="pista">${t(
+      "Leave all three on default and it runs the way you do. Model and effort are Claude\u2019s to read; another CLI carries its own flags."
+    )}</p>
+        <div class="bvMotor">
+          <div class="campo"><label>${t("provider")}</label>
+            <select id="bvRuntime">${opciones(RUNTIMES, a.runtime, this.p.esc, "claude")}</select></div>
+          <div class="campo"><label>${t("engine")}</label>
+            <select id="bvModelo" ${esClaude ? "" : "disabled"}>${opciones(
+      [""].concat(MODELOS),
+      a.modelo,
+      this.p.esc,
+      t("default")
+    )}</select></div>
+          <div class="campo"><label>${t("effort")}</label>
+            <select id="bvEsfuerzo" ${esClaude ? "" : "disabled"}>${opciones(
+      [""].concat(ESFUERZOS),
+      a.esfuerzo,
+      this.p.esc,
+      t("default")
+    )}</select></div>
+        </div>
+        <label class="bvEtiqueta">${t("What does it work on?")}</label>
+        <p class="pista">${t(`Everything found on this disk: <b>repositories</b>, the
+        <b>worktrees</b> an isolated agent works in, and <b>folders of documents</b> with no git
+        at all. Pick as many as you like \u2014 this is the part that makes it an agent and not a
+        repo.`)}</p>
+        <div class="bvBuscador">
+          <input type="search" id="bvBusca" value="${this.p.esc(this.filtro)}"
+            placeholder="${t("search your disk \u2014 a name, or part of a path")}">
+          <button class="bt bvMini" data-bv="rebusca" ${this.buscandoRepos ? "disabled" : ""}
+            title="${t("Look through the disk again \u2014 for something cloned a minute ago")}">${t(
+      this.buscandoRepos ? "searching\u2026" : "Search again"
+    )}</button>
+        </div>
+        ${sugeridos ? `<div class="bvChips">${sugeridos}</div>
+               <p class="pista">${this.filtro ? t("{shown} of {total} places match", {
+      shown: String(encontrados.length),
+      total: String(this.repos.length)
+    }) : t("{total} places found \u2014 type to narrow it down", {
+      total: String(this.repos.length)
+    })}</p>` : this.buscandoRepos ? `<p class="cargando">${t("looking through your disk\u2026")}</p>` : this.filtro ? `<p class="pista">${t("Nothing matches that. Add it by path below.")}</p>` : `<p class="pista">${t("Nothing found on this disk \u2014 add folders by path below.")}</p>`}
+        <div class="campo"><label>${t("\u2026or a path, and Enter")}</label>
+          <input type="text" id="bvRuta" placeholder="~/documents/handbook"></div>
+        ${a.montajes.length ? `<p class="pista">${t("Working on: {que}", { que: `<b>${this.p.esc(a.montajes.join(", "))}</b>` })}</p>` : ""}
+        <div class="bvBotones">
+          <button class="bt" data-bv="cancela">${t("Cancel")}</button>
+          <button class="bt ppal" data-bv="guarda" ${this.guardando ? "disabled" : ""}>${t(
+      this.guardando ? "building\u2026" : "Build it"
+    )}</button>
+        </div>
+      </div>`;
+  }
+  // ── 4. done ───────────────────────────────────────────────────────────────
+  pantallaFinal() {
+    return `
+      <div class="bvPaso">
+        <span class="sub">${t("Ready").toLowerCase()}</span>
+        <h1>${t("{city} is alive", { city: this.p.esc(this.p.ciudad) })}</h1>
+        <p class="prosa">${t(
+      "Your seat is written and {cuantas}. Everything you just answered is a plain file you can read and edit.",
+      {
+        cuantas: this.roster.length ? plural(
+          this.roster.length,
+          "<b>{n}</b> house stands around it",
+          "<b>{n}</b> houses stand around it"
+        ) : t("the city is waiting for its first house")
+      }
+    )}</p>
+        <p class="prosa">${t("What people usually do next:")}</p>
+        <div class="bvSiguientes">
+          <button class="bt ppal" data-bv="sesion">${t("Open my session")}</button>
+          <button class="bt" data-bv="ir-gente">${t("See the houses")}</button>
+          <button class="bt" data-bv="ir-mapa">${t("Draw the map")}</button>
+          <button class="bt" data-bv="ir-puesto">${t("Set a goal")}</button>
+        </div>
+        <p class="pista">${t(`A goal is optional, and the city works without one \u2014 but a round with
+        no goal is a status report, because there is nothing to argue against.`)}</p>
+      </div>`;
+  }
+  // ── wiring ────────────────────────────────────────────────────────────────
+  enlaza(lienzo) {
+    const repinta = () => void this.pinta(lienzo);
+    lienzo.querySelectorAll("[data-bv]").forEach((el) => {
+      el.onclick = async (evento) => {
+        evento.preventDefault();
+        const que = el.dataset.bv;
+        if (que === "salir") return this.p.vete("resumen");
+        if (que === "atras") {
+          this.paso = Math.max(0, this.paso - 1);
+          return repinta();
+        }
+        if (que === "dominio") {
+          this.dominio = el.dataset.id ?? "";
+          this.roles = [];
+          this.rol = "";
+          return repinta();
+        }
+        if (que === "rol") {
+          this.rol = el.dataset.id ?? "";
+          return repinta();
+        }
+        if (que === "nuevo") {
+          this.enCurso = {
+            nombre: "",
+            clase: "code",
+            rol: "blank",
+            montajes: [],
+            runtime: "",
+            modelo: "",
+            esfuerzo: ""
+          };
+          return repinta();
+        }
+        if (que === "clase" && this.enCurso) {
+          this.enCurso.clase = el.dataset.id ?? "code";
+          this.recogeFormulario(lienzo);
+          return repinta();
+        }
+        if (que === "monta" && this.enCurso) {
+          const ruta2 = el.dataset.ruta ?? "";
+          const ya = this.enCurso.montajes.indexOf(ruta2);
+          if (ya >= 0) this.enCurso.montajes.splice(ya, 1);
+          else this.enCurso.montajes.push(ruta2);
+          this.recogeFormulario(lienzo);
+          return repinta();
+        }
+        if (que === "rebusca") {
+          this.recogeFormulario(lienzo);
+          this.buscaReposUnaVez(true);
+          return repinta();
+        }
+        if (que === "cancela") {
+          this.enCurso = null;
+          return repinta();
+        }
+        if (que === "guarda") return void await this.guardaAgente(lienzo);
+        if (que === "siguiente") return void await this.avanza(lienzo);
+        if (que === "sesion") return void await this.abreSesion();
+        if (que === "ir-gente") return this.p.vete("gente");
+        if (que === "ir-mapa") return this.p.vete("mapa");
+        if (que === "ir-puesto") return this.p.vete("puesto");
+      };
+    });
+    const busca = lienzo.querySelector("#bvBusca");
+    if (busca) {
+      busca.oninput = () => {
+        this.filtro = busca.value;
+        const donde = busca.selectionStart ?? busca.value.length;
+        void this.pinta(lienzo).then(() => {
+          const otra = lienzo.querySelector("#bvBusca");
+          if (!otra) return;
+          otra.focus();
+          otra.setSelectionRange(donde, donde);
+        });
+      };
+    }
+    const ruta = lienzo.querySelector("#bvRuta");
+    if (ruta)
+      ruta.onkeydown = (e) => {
+        if (e.key !== "Enter" || !this.enCurso) return;
+        e.preventDefault();
+        const valor = ruta.value.trim();
+        if (valor) this.enCurso.montajes.push(valor);
+        this.recogeFormulario(lienzo);
+        void this.pinta(lienzo);
+      };
+    lienzo.querySelector("#bvRuntime")?.addEventListener("change", () => {
+      this.recogeFormulario(lienzo);
+      void this.pinta(lienzo);
+    });
+    if (!busca?.value) lienzo.querySelector("#bvNombre")?.focus();
+  }
+  /** Keep what is typed when a click forces a repaint. */
+  recogeFormulario(lienzo) {
+    if (!this.enCurso) return;
+    const nombre = lienzo.querySelector("#bvNombre");
+    const rol = lienzo.querySelector("#bvRol");
+    if (nombre) this.enCurso.nombre = nombre.value;
+    if (rol) this.enCurso.rol = rol.value;
+    for (const [id, campo] of [
+      ["#bvRuntime", "runtime"],
+      ["#bvModelo", "modelo"],
+      ["#bvEsfuerzo", "esfuerzo"]
+    ]) {
+      const sel = lienzo.querySelector(id);
+      if (sel) this.enCurso[campo] = sel.value;
+    }
+    const busca = lienzo.querySelector("#bvBusca");
+    if (busca) this.filtro = busca.value;
+  }
+  async guardaAgente(lienzo) {
+    this.recogeFormulario(lienzo);
+    const a = this.enCurso;
+    if (!a) return;
+    if (!a.nombre.trim()) {
+      this.p.aviso("Give it a name \u2014 it is how you will call it in its window", true);
+      return;
+    }
+    this.guardando = true;
+    await this.pinta(lienzo);
+    try {
+      await this.aseguraFicha();
+      const r = await this.p.api("/api/agentes", {
+        method: "POST",
+        body: JSON.stringify({ name: a.nombre.trim(), kind: a.clase, role: a.rol })
+      });
+      if (!r.ok || !r.agent) {
+        this.p.aviso(r.error || "Could not add that agent", true);
+        return;
+      }
+      for (const ruta of a.montajes) {
+        const m = await this.p.api("/api/montaje", {
+          method: "POST",
+          body: JSON.stringify({ agent: r.agent, add: ruta })
+        });
+        if (!m.ok) this.p.aviso(`${ruta}: ${m.error ?? "could not mount"}`, true);
+      }
+      const motor = {};
+      if (a.runtime) motor.runtime = a.runtime;
+      if (a.modelo) motor.model = a.modelo;
+      if (a.esfuerzo) motor.effort = a.esfuerzo;
+      if (Object.keys(motor).length) {
+        const m = await this.p.api("/api/agente", {
+          method: "POST",
+          body: JSON.stringify({ agent: r.agent, ...motor })
+        });
+        if (!m.ok) this.p.aviso(m.error ?? "Could not set its engine", true);
+      }
+      this.roster.push({ ...a, nombre: a.nombre.trim() });
+      this.enCurso = null;
+      this.p.aviso(`${a.nombre.trim()} joined the city`);
+      await this.p.refresca();
+    } catch (e) {
+      this.p.aviso(String(e), true);
+    } finally {
+      this.guardando = false;
+      await this.pinta(lienzo);
+    }
+  }
+  async aseguraFicha() {
+    await this.p.api("/api/ficha", {
+      method: "POST",
+      body: JSON.stringify({ domain: this.dominio || "software", role: this.rol || "blank" })
+    });
+  }
+  async avanza(lienzo) {
+    const escribeLaFicha = this.paso === 2;
+    this.paso = Math.min(PASOS.length - 1, this.paso + 1);
+    await this.pinta(lienzo);
+    if (escribeLaFicha) {
+      await this.aseguraFicha();
+      await this.p.refresca();
+    }
+  }
+  async abreSesion() {
+    try {
+      const r = await this.p.api("/api/sesion", {
+        method: "POST",
+        body: JSON.stringify({ user: this.p.yo })
+      });
+      this.p.aviso(
+        r.ok && r.attach ? `Session built \u2014 attach with: ${r.attach}` : r.error ?? "Could not",
+        !r.ok
+      );
+    } catch (e) {
+      this.p.aviso(String(e), true);
+    }
+  }
+};
+
+// city/web/src/activity.ts
+var MAP_ACTIVITY_PROTOCOL = "agents-city-map-activity/1";
+function isMapNavMessage(value) {
+  if (!value || typeof value !== "object") return false;
+  const message = value;
+  return message.protocol === MAP_ACTIVITY_PROTOCOL && message.type === "map.nav" && typeof message.view === "string";
+}
+function isActivityEvent(value) {
+  if (!value || typeof value !== "object") return false;
+  const event = value;
+  return event.protocol === "agents-city-activity/1" && typeof event.id === "string" && typeof event.seq === "number" && typeof event.kind === "string" && typeof event.actor === "string" && typeof event.summary === "string" && typeof event.title === "string" && Array.isArray(event.details);
+}
+function isPresenceEvent(event) {
+  return event.kind === "conversation.user" || event.kind === "conversation.agent" || event.kind === "runtime.session.started" || event.kind === "runtime.session.ended";
+}
+function isSpeechEvent(event) {
+  if (event.kind === "conversation.agent" || event.kind === "conversation.agent.commentary") {
+    return Boolean(event.summary.trim());
+  }
+  return event.kind === "committee.opened" || event.kind === "committee.position.revealed" || event.kind === "committee.synthesis.published" || event.kind.startsWith("committee.floor.") || event.kind === "committee.decision.recorded" || event.kind.startsWith("committee.verification.") || event.kind === "committee.replanned" || event.kind === "committee.closed" || event.kind === "committee.command.rejected" && event.tone === "error";
+}
+
+// city/web/src/hall.ts
+var PASE = window.PASE;
+var CIUDAD = new URLSearchParams(location.search).get("city") ?? "";
+async function api(ruta, opts) {
+  let u = ruta + (ruta.includes("?") ? "&" : "?") + "PASE=" + encodeURIComponent(PASE);
+  if (CIUDAD) u += "&city=" + encodeURIComponent(CIUDAD);
+  const r = await fetch(u, {
+    headers: { "X-City-Pase": PASE, "Content-Type": "application/json" },
+    ...opts
+  });
+  return r.json();
+}
+function q(sel, raiz = document) {
+  const el = raiz.querySelector(sel);
+  if (!el) throw new Error(`no element matches ${sel}`);
+  return el;
+}
+function todos(sel, raiz = document) {
+  return [...raiz.querySelectorAll(sel)];
+}
+function esc(s) {
+  return String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
+  );
+}
+var corto = (p) => p.replace(E.casa, "~");
+var toastTimer = 0;
+function toast(msg, mal = false) {
+  const t2 = q("#toast");
+  t2.textContent = msg;
+  t2.className = "ver" + (mal ? " mal" : "");
+  clearTimeout(toastTimer);
+  toastTimer = window.setTimeout(() => {
+    t2.className = "";
+  }, 3200);
+}
+var espera = (ms) => new Promise((r) => setTimeout(r, ms));
+var E;
+var SECCION = "mapa";
+var SECCIONES = [
+  ["resumen", "Overview"],
+  ["mapa", "The map"],
+  ["puesto", "My seat"],
+  ["barrios", "Districts"],
+  ["red", "Roads"],
+  ["committee", "Committee"],
+  ["gente", "Houses"],
+  ["ciudades", "Cities"]
+];
+var primeraCarga = true;
+async function refresca() {
+  E = await api("/api/estado");
+  if (primeraCarga) {
+    primeraCarga = false;
+    const mia = E.tarjetas.find((t2) => t2.user === E.yo);
+    if (!mia || (E.agents ?? []).length === 0) SECCION = "bienvenida";
+    else if (!E.mapa) SECCION = "resumen";
+  }
+  pinta();
+  pintaAvisoDeVersion();
+  pintaDemoControles();
+  sincronizaActividad(E.live_bus);
+}
+function pintaAvisoDeVersion() {
+  const caja = document.getElementById("avisoVersion");
+  if (!caja) return;
+  const texto = (E.update ?? "").trim();
+  caja.textContent = texto;
+  caja.hidden = !texto;
+}
+function pintaDemoControles() {
+  const header = document.querySelector("#livePanel header");
+  const previa = document.getElementById("demoControles");
+  if (!header || !E.demo) {
+    previa?.remove();
+    return;
+  }
+  if (previa) return;
+  const caja = document.createElement("div");
+  caja.id = "demoControles";
+  caja.innerHTML = `<span>guided committee</span><button id="demoReplay" type="button" title="Play the guided committee from the top">\u27F3 replay</button><button id="demoPausa" type="button" title="Pause or resume mid-scene">\u23F8 pause</button>`;
+  header.appendChild(caja);
+  const pausa = q("#demoPausa", caja);
+  const manda = (action) => api("/api/demo", {
+    method: "POST",
+    body: JSON.stringify({ action })
+  });
+  q("#demoReplay", caja).onclick = async () => {
+    const r = await manda("restart");
+    pausa.textContent = "\u23F8 pause";
+    if (!r.ok) toast("Could not restart the demo", true);
+  };
+  pausa.onclick = async () => {
+    const antes = pausa.textContent?.includes("resume") ?? false;
+    const r = await manda(antes ? "resume" : "pause");
+    if (!r.running) {
+      pausa.textContent = "\u23F8 pause";
+      toast("Nothing playing \u2014 hit replay", true);
+      return;
+    }
+    pausa.textContent = r.paused ? "\u25B6 resume" : "\u23F8 pause";
+  };
+}
+var liveSocket = null;
+var liveUrl = "";
+var liveEvents = [];
+var liveConnected = false;
+var liveRetry = 0;
+var liveSelectedThread = null;
+var liveFilterTouched = false;
+var liveShowWork = false;
+var pendingMapActivity = null;
+function sincronizaActividad(endpoint) {
+  if (!endpoint?.online || !endpoint.url) {
+    liveConnected = false;
+    pintaActividad();
+    programaDescubrimiento();
+    return;
+  }
+  if (endpoint.url === liveUrl && liveSocket && (liveSocket.readyState === WebSocket.OPEN || liveSocket.readyState === WebSocket.CONNECTING)) {
+    return;
+  }
+  const anterior = liveSocket;
+  if (anterior) {
+    anterior.onclose = null;
+    anterior.close();
+  }
+  liveUrl = endpoint.url;
+  const socket = new WebSocket(endpoint.url);
+  liveSocket = socket;
+  liveConnected = false;
+  pintaActividad();
+  socket.onopen = () => {
+    if (liveSocket !== socket) return;
+    liveConnected = true;
+    liveRetry = 0;
+    pintaActividad();
+  };
+  socket.onmessage = (message) => {
+    if (liveSocket !== socket) return;
+    let value;
+    try {
+      value = JSON.parse(String(message.data));
+    } catch {
+      return;
+    }
+    if (value.type === "activity.state") {
+      liveEvents = Array.isArray(value.events) ? value.events.filter(isActivityEvent) : [];
+      liveEvents.sort((a, b) => a.seq - b.seq);
+      if (liveSelectedThread === null) liveSelectedThread = newestConversationThread();
+      pintaActividad(true);
+    } else if (value.type === "activity.event" && isActivityEvent(value.event)) {
+      const event = value.event;
+      if (!liveEvents.some((item) => item.id === event.id)) liveEvents.push(event);
+      liveEvents = liveEvents.sort((a, b) => a.seq - b.seq).slice(-200);
+      if (!liveFilterTouched && event.kind === "committee.opened" && event.thread) {
+        liveSelectedThread = event.thread;
+      }
+      pintaActividad(true);
+      enviaActividadAlMapa(event);
+    }
+  };
+  socket.onclose = () => {
+    if (liveSocket !== socket) return;
+    liveSocket = null;
+    liveConnected = false;
+    pintaActividad();
+    programaDescubrimiento();
+  };
+  socket.onerror = () => {
+  };
+}
+function enviaActividadAlMapa(event) {
+  const esComite = event.kind.startsWith("committee.");
+  if (!isSpeechEvent(event) && !isPresenceEvent(event) && !esComite) return;
+  const frame = document.querySelector("#cityMapFrame");
+  if (!frame) return;
+  if (frame.dataset.ready !== "1") {
+    pendingMapActivity = event;
+    return;
+  }
+  const origin = new URL(frame.src, location.href).origin;
+  frame.contentWindow?.postMessage(
+    { protocol: MAP_ACTIVITY_PROTOCOL, type: "activity.event", event },
+    origin
+  );
+}
+function programaDescubrimiento() {
+  if (liveRetry) return;
+  liveRetry = window.setTimeout(async () => {
+    liveRetry = 0;
+    try {
+      sincronizaActividad(await api("/api/live"));
+    } catch {
+      programaDescubrimiento();
+    }
+  }, 1500);
+}
+function pintaActividad(seguir = false) {
+  const dot = document.querySelector("#liveDot");
+  const state = document.querySelector("#liveState");
+  const list = document.querySelector("#liveEvents");
+  const filter = document.querySelector("#liveFilter");
+  const context = document.querySelector("#liveContext");
+  const workToggle = document.querySelector("#liveWorkToggle");
+  if (!dot || !state || !list || !filter || !context || !workToggle) return;
+  dot.classList.toggle("on", liveConnected);
+  state.textContent = liveConnected ? "websocket live" : liveUrl ? "reconnecting" : "session offline";
+  const opened = /* @__PURE__ */ new Map();
+  for (const event of liveEvents) {
+    if (event.thread && (event.kind === "committee.opened" || event.kind === "conversation.user") && !esPromptDeTransporte(event) && !opened.has(event.thread)) {
+      opened.set(event.thread, event.summary);
+    }
+  }
+  filter.innerHTML = '<option value="">all conversations</option>' + [...opened.entries()].reverse().map(
+    ([thread, question]) => `<option value="${esc(thread)}">${esc(question.slice(0, 54) || thread)}</option>`
+  ).join("");
+  const selected = liveSelectedThread || "";
+  filter.value = [...filter.options].some((option) => option.value === selected) ? selected : "";
+  filter.onchange = () => {
+    liveSelectedThread = filter.value;
+    liveFilterTouched = true;
+    pintaActividad(true);
+  };
+  workToggle.classList.toggle("on", liveShowWork);
+  workToggle.setAttribute("aria-pressed", String(liveShowWork));
+  workToggle.textContent = liveShowWork ? "hide work" : "show work";
+  workToggle.onclick = () => {
+    liveShowWork = !liveShowWork;
+    pintaActividad(true);
+  };
+  pintaContexto(filter.value, context);
+  const scoped = filter.value ? liveEvents.filter((event) => event.thread === filter.value) : liveEvents;
+  const visible = scoped.filter(
+    (event) => !esPromptDeTransporte(event) && (liveShowWork || !esRuidoDeTrabajo(event) || event.tone === "error")
+  );
+  if (!visible.length) {
+    list.innerHTML = `<li class="liveEmpty">${liveConnected ? "The bus is live. Questions, positions and moderated replies will appear here." : "Start the city session. Its visible conversation will appear here as it happens."}</li>`;
+    return;
+  }
+  const wasNearBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 90;
+  list.innerHTML = visible.map(renderActividad).join("");
+  if (seguir || wasNearBottom) list.scrollTop = list.scrollHeight;
+}
+function renderActividad(event) {
+  const when = new Date(event.at);
+  const time = Number.isNaN(when.getTime()) ? "" : when.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  const side = event.role === "chair" ? "chair" : event.role === "member" ? "member" : "system";
+  const role = rolOperativo(event.actor);
+  const route = event.target && !["committee", "seat"].includes(event.target) ? `to ${event.target}` : event.target === "committee" ? "to the committee" : "";
+  const summary = event.summary.trim();
+  const compact = resumenVisible(summary);
+  const long = compact !== summary;
+  const details = event.details.length ? `<details class="liveEvidence"><summary>${event.details.length} ${event.details.length === 1 ? "detail" : "details"}</summary><ul>${event.details.map((detail) => `<li>${esc(detail)}</li>`).join("")}</ul></details>` : "";
+  const full = long ? `<details class="liveFull"><summary>read full message</summary><p>${esc(summary)}</p></details>` : "";
+  return `<li class="liveTurn ${side} ${esc(event.tone)}">
+    <div class="liveAvatar${E?.avatars?.[event.actor] ? " conCara" : ""}"
+      style="--actor-hue:${tonoActor(event.actor)}" aria-hidden="true">
+      ${cara(event.actor, event.role === "chair")}
     </div>
     <article class="liveBubble">
-      <div class="liveMeta"><span class="liveActor">${s(e.actor)}</span>
-        ${t?`<span class="liveRole">${s(t)}</span>`:""}
-        ${r?`<span>${s(r)}</span>`:""}<span class="liveWhen">${s(i)}</span></div>
-      <div class="liveHeading">${ge(e.kind)}<h3>${s(Te(e))}</h3></div>
-      <p>${s(c)}</p>${y}${h}
+      <div class="liveMeta"><span class="liveActor">${esc(event.actor)}</span>
+        ${role ? `<span class="liveRole">${esc(role)}</span>` : ""}
+        ${route ? `<span>${esc(route)}</span>` : ""}<span class="liveWhen">${esc(time)}</span></div>
+      <div class="liveHeading">${icono(event.kind)}<h3>${esc(tituloVisible(event))}</h3></div>
+      <p>${esc(compact)}</p>${full}${details}
     </article>
-  </li>`}function ye(){return[...k].reverse().find(e=>!!e.thread&&(e.kind==="committee.opened"||e.kind==="conversation.user"&&!Y(e)))?.thread||""}function be(e,a){let i=e?l?.deliberations?.find(m=>m.id===e):void 0,o=e?k.filter(m=>m.thread===e):[],t=o.find(m=>m.kind==="committee.opened");if(!i&&!t){a.innerHTML="",a.hidden=!0;return}let r=t?.details.find(m=>m.startsWith("Invited:"))?.slice(8).split(",").map(m=>m.trim()).filter(Boolean)||[],n=i?.participants||r,c=i?.received??new Set(o.filter(m=>m.kind==="committee.position.submitted").map(m=>m.actor)).size,p=i?.total??n.length,h=o.at(-1)?.phase||i?.status||"starting",y=["seat",...n];a.hidden=!1,a.innerHTML=`<div class="livePeople">${y.map(m=>`<span class="livePerson${l?.avatars?.[m]?" conCara":""}" title="${s(m==="seat"?"seat \xB7 chair":`${m} \xB7 ${pe(m)||"member"}`)}" style="--actor-hue:${me(m)}">${ue(m,m==="seat")}</span>`).join("")}</div><span class="liveContextText"><b>seat moderates</b> \xB7 ${s(c)}/${s(p)} positions \xB7 ${s(h)}</span>`}function Y(e){if(e.kind!=="conversation.user")return!1;let a=e.summary.trimStart();return a.startsWith("[Agents City authenticated local bus]")||a.startsWith("<channel")&&a.slice(0,500).includes("plugin:city:city-bus")}function $e(e){return e.kind==="work.command.started"||e.kind==="work.command.completed"||e.kind==="runtime.turn.started"||e.kind==="runtime.turn.completed"||e.kind==="runtime.gateway.ready"||e.kind==="runtime.session.started"||e.kind==="runtime.session.ended"}function pe(e){return e==="seat"?"chair":l?.skills?.[e]?.role||""}function ue(e,a){let i=l?.avatars?.[e];return i&&i.startsWith("data:image/svg+xml;base64,")?`<img class="liveCara" src="${s(i)}" alt="">`:a?ge("chair"):s(ke(e))}function ke(e){let a=e.split(/[-_.\s]+/).filter(Boolean);return(a.length>1?a.slice(0,2).map(o=>o[0]).join(""):e.slice(0,2)).toUpperCase()}function me(e){let a=17;for(let i of e)a=(a*31+i.charCodeAt(0))%360;return a}function we(e){if(e.length<=520)return e;let a=e.slice(0,520).lastIndexOf(" ");return e.slice(0,a>360?a:520).trimEnd()+"\u2026"}function Te(e){return e.kind==="conversation.user"?e.actor==="seat"?"Question":"Brief received":e.kind==="conversation.agent.commentary"?"Working note":e.kind==="conversation.agent"?"Response":e.kind==="committee.opened"?"Question to the committee":e.kind==="committee.position.submitted"?"Position sealed":e.kind==="committee.positions.revealed"?"Blind round complete":e.kind==="committee.position.revealed"?"Position":e.kind==="committee.synthesis.published"?"Chair synthesis":e.kind==="committee.floor.requested"?"Requests the floor":e.kind==="committee.floor.granted"?"Floor granted":e.kind==="committee.floor.denied"?"Floor denied":e.kind==="committee.floor.spoke"?"Intervention":e.kind==="committee.decision.recorded"?"Decision":e.kind.startsWith("committee.verification.")?"Verification":e.kind==="committee.closed"?"Committee closed":e.title}function ge(e){return e==="chair"?'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 17h16l-1.4-9-4.1 3L12 5l-2.5 6-4.1-3L4 17Zm1 2h14"/></svg>':e.includes("question")||e==="committee.opened"||e==="conversation.user"?'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Zm5 4a2 2 0 1 1 3.4 1.4c-.9.6-1.4 1-1.4 2.1M12 14.7v.1"/></svg>':e.includes("decision")||e.includes("verification")||e==="committee.closed"?'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>':e.includes("floor")?'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 11V5a1.5 1.5 0 0 1 3 0v5-7a1.5 1.5 0 0 1 3 0v7-5a1.5 1.5 0 0 1 3 0v7l1-2a1.5 1.5 0 0 1 2.6 1.5L17 18a4 4 0 0 1-3.5 2H10a5 5 0 0 1-5-5v-3.5a1.5 1.5 0 0 1 3 0V13"/></svg>':e.includes("command")||e.includes("work.")?'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 8 4 4-4 4m6 0h6"/></svg>':'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h14v12H5zM8 10h8m-8 4h5"/></svg>'}function Ee(){d("#rail").innerHTML=ve.map(([i,o])=>{let t=i==="gente"?String(Object.keys(l.skills).length):i==="committee"?String(l.deliberations.length):i==="red"?String(l.roads.length):i==="barrios"?String(l.parcelas.length):"";return`<li class="${i===j?"aqui":""}" data-s="${i}">
-      <span>${o}</span>${t?`<span class="n">${t}</span>`:""}</li>`}).join(""),b("#rail li").forEach(i=>{i.onclick=()=>{j=i.dataset.s??"mapa",w()}}),d("#dondeDatos").textContent=z(l.datos);let e=d("#ciudades");l.ciudades.length>1?(e.innerHTML=`<select id="cambiaCiudad" title="which city this hall manages">
-      ${l.ciudades.map(i=>`<option value="${s(i.ruta)}" ${i.actual?"selected":""}>
-        ${s(i.nombre)}</option>`).join("")}</select>`,d("#cambiaCiudad").onchange=i=>{let o=i.target.value;location.href="/?PASE="+encodeURIComponent(q)+"&city="+encodeURIComponent(o)}):e.innerHTML="";let a=d("#alWizard");a.onclick=async i=>{i.preventDefault();let o=window.prompt("Name of the new city");if(!o?.trim())return;let t=await f("/api/ciudades",{method:"POST",body:JSON.stringify({name:o})});if(t.error||!t.city)return v(t.error??"Could not create the city",!0);location.href="/?PASE="+encodeURIComponent(q)+"&city="+encodeURIComponent(t.city)}}function w(){Ee(),d(".cuerpo").style.padding="",d("#lienzo").style.maxWidth="",x[j](),d(".cuerpo").scrollTop=0}var x={};x.resumen=()=>{let e=l.tarjetas.find(r=>r.user===l.yo),a=l.parcelas.filter(r=>r.unidad==="none"||r.unidad==="mine").length,i=[{ok:!!e,txt:e?`Your card exists \u2014 you are <b>${s(e.agent)}</b>`:"Take your seat: role, folders, one goal",ir:"puesto"},{ok:!!(e&&e.goals_defined),txt:e&&e.goals_defined?`Your goal: <b>${s(e.objetivo?e.objetivo.title:"")}</b>`:"Set <b>one goal</b>, with the command that measures it",ir:"puesto"},{ok:l.parcelas.length>0&&a===0,txt:l.parcelas.length===0?"No houses yet \u2014 pick your folders and they appear":a?`<b>${a}</b> of ${l.parcelas.length} houses sit in no real district \u2014 assign them`:"Every house has its district",ir:"barrios"}],o=l.tmux.includes(l.sesion);d("#lienzo").innerHTML=`
-    <div><span class="sub">your city</span>
-      <h1 style="margin-top:6px">${s(l.city_name)}</h1>
-      <p class="de mono" style="margin-top:5px">${s(l.address)}</p>
-      <p class="prosa" style="margin-top:8px">Domain: <b>${s(l.domain)}</b>. Growth is
-      counted with <code class="mono">${s(l.grow||"nothing yet")}</code>.</p></div>
+  </li>`;
+}
+function newestConversationThread() {
+  return [...liveEvents].reverse().find(
+    (event) => Boolean(event.thread) && (event.kind === "committee.opened" || event.kind === "conversation.user" && !esPromptDeTransporte(event))
+  )?.thread || "";
+}
+function pintaContexto(thread, container) {
+  const deliberation = thread ? E?.deliberations?.find((item) => item.id === thread) : void 0;
+  const conversation = thread ? liveEvents.filter((event) => event.thread === thread) : [];
+  const opened = conversation.find((event) => event.kind === "committee.opened");
+  if (!deliberation && !opened) {
+    container.innerHTML = "";
+    container.hidden = true;
+    return;
+  }
+  const invited = opened?.details.find((detail) => detail.startsWith("Invited:"))?.slice("Invited:".length).split(",").map((actor) => actor.trim()).filter(Boolean) || [];
+  const participants = deliberation?.participants || invited;
+  const received = deliberation?.received ?? new Set(
+    conversation.filter((event) => event.kind === "committee.position.submitted").map((event) => event.actor)
+  ).size;
+  const total = deliberation?.total ?? participants.length;
+  const status = conversation.at(-1)?.phase || deliberation?.status || "starting";
+  const actors = ["seat", ...participants];
+  container.hidden = false;
+  container.innerHTML = `<div class="livePeople">${actors.map(
+    (actor) => `<span class="livePerson${E?.avatars?.[actor] ? " conCara" : ""}" title="${esc(
+      actor === "seat" ? "seat \xB7 chair" : `${actor} \xB7 ${rolOperativo(actor) || "member"}`
+    )}" style="--actor-hue:${tonoActor(actor)}">${cara(actor, actor === "seat")}</span>`
+  ).join("")}</div><span class="liveContextText"><b>seat moderates</b> \xB7 ${esc(
+    received
+  )}/${esc(total)} positions \xB7 ${esc(status)}</span>`;
+}
+function esPromptDeTransporte(event) {
+  if (event.kind !== "conversation.user") return false;
+  const summary = event.summary.trimStart();
+  return summary.startsWith("[Agents City authenticated local bus]") || summary.startsWith("<channel") && summary.slice(0, 500).includes("plugin:city:city-bus");
+}
+function esRuidoDeTrabajo(event) {
+  return event.kind === "work.command.started" || event.kind === "work.command.completed" || event.kind === "runtime.turn.started" || event.kind === "runtime.turn.completed" || event.kind === "runtime.gateway.ready" || event.kind === "runtime.session.started" || event.kind === "runtime.session.ended";
+}
+function rolOperativo(actor) {
+  if (actor === "seat") return "chair";
+  return E?.skills?.[actor]?.role || "";
+}
+function cara(actor, esChair) {
+  const uri = E?.avatars?.[actor];
+  if (uri && uri.startsWith("data:image/svg+xml;base64,")) {
+    return `<img class="liveCara" src="${esc(uri)}" alt="">`;
+  }
+  return esChair ? icono("chair") : esc(iniciales(actor));
+}
+function iniciales(actor) {
+  const parts = actor.split(/[-_.\s]+/).filter(Boolean);
+  const initials = parts.length > 1 ? parts.slice(0, 2).map((part) => part[0]).join("") : actor.slice(0, 2);
+  return initials.toUpperCase();
+}
+function tonoActor(actor) {
+  let hash = 17;
+  for (const character of actor) hash = (hash * 31 + character.charCodeAt(0)) % 360;
+  return hash;
+}
+function resumenVisible(summary) {
+  if (summary.length <= 520) return summary;
+  const boundary = summary.slice(0, 520).lastIndexOf(" ");
+  return summary.slice(0, boundary > 360 ? boundary : 520).trimEnd() + "\u2026";
+}
+function tituloVisible(event) {
+  if (event.kind === "conversation.user")
+    return event.actor === "seat" ? "Question" : "Brief received";
+  if (event.kind === "conversation.agent.commentary") return "Working note";
+  if (event.kind === "conversation.agent") return "Response";
+  if (event.kind === "committee.opened") return "Question to the committee";
+  if (event.kind === "committee.position.submitted") return "Position sealed";
+  if (event.kind === "committee.positions.revealed") return "Blind round complete";
+  if (event.kind === "committee.position.revealed") return "Position";
+  if (event.kind === "committee.synthesis.published") return "Chair synthesis";
+  if (event.kind === "committee.floor.requested") return "Requests the floor";
+  if (event.kind === "committee.floor.granted") return "Floor granted";
+  if (event.kind === "committee.floor.denied") return "Floor denied";
+  if (event.kind === "committee.floor.spoke") return "Intervention";
+  if (event.kind === "committee.decision.recorded") return "Decision";
+  if (event.kind.startsWith("committee.verification.")) return "Verification";
+  if (event.kind === "committee.closed") return "Committee closed";
+  return event.title;
+}
+function icono(kind) {
+  if (kind === "chair") {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 17h16l-1.4-9-4.1 3L12 5l-2.5 6-4.1-3L4 17Zm1 2h14"/></svg>';
+  }
+  if (kind.includes("question") || kind === "committee.opened" || kind === "conversation.user") {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Zm5 4a2 2 0 1 1 3.4 1.4c-.9.6-1.4 1-1.4 2.1M12 14.7v.1"/></svg>';
+  }
+  if (kind.includes("decision") || kind.includes("verification") || kind === "committee.closed") {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>';
+  }
+  if (kind.includes("floor")) {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 11V5a1.5 1.5 0 0 1 3 0v5-7a1.5 1.5 0 0 1 3 0v7-5a1.5 1.5 0 0 1 3 0v7l1-2a1.5 1.5 0 0 1 2.6 1.5L17 18a4 4 0 0 1-3.5 2H10a5 5 0 0 1-5-5v-3.5a1.5 1.5 0 0 1 3 0V13"/></svg>';
+  }
+  if (kind.includes("command") || kind.includes("work.")) {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 8 4 4-4 4m6 0h6"/></svg>';
+  }
+  return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h14v12H5zM8 10h8m-8 4h5"/></svg>';
+}
+function rail() {
+  const cuantos = (E.agents ?? []).length;
+  q("#railCiudad").innerHTML = `<span class="railEtiqueta">${t("you are in")}</span>
+    <b>${esc(E.city_name)}</b>
+    <span class="railDe">${esc(E.domain)} \xB7 ${plural(cuantos, "{n} house", "{n} houses")}</span>`;
+  q("#rail").innerHTML = SECCIONES.filter(([id]) => id !== "ciudades").map(([id, et]) => {
+    const n = id === "gente" ? String(Object.keys(E.skills).length) : id === "committee" ? String(E.deliberations.length) : id === "red" ? String(E.roads.length) : id === "barrios" ? String(E.parcelas.length) : "";
+    return `<li class="${id === SECCION ? "aqui" : ""}" data-s="${id}">
+      <span>${esc(t(et))}</span>${n ? `<span class="n">${n}</span>` : ""}</li>`;
+  }).join("");
+  q("#railOtras").innerHTML = `<li class="${SECCION === "ciudades" ? "aqui" : ""}" data-s="ciudades">
+      <span>${t("All cities")}</span><span class="n">${E.ciudades.length}</span></li>`;
+  todos("#rail li,#railOtras li").forEach((li) => {
+    li.onclick = () => {
+      document.body.classList.remove("enGuia");
+      SECCION = li.dataset.s ?? "mapa";
+      pinta();
+    };
+  });
+  q("#dondeDatos").textContent = corto(E.datos);
+  const cs = q("#ciudades");
+  if (E.ciudades.length > 1) {
+    cs.innerHTML = `<select id="cambiaCiudad" title="which city this hall manages">
+      ${E.ciudades.map(
+      (c) => `<option value="${esc(c.ruta)}" ${c.actual ? "selected" : ""}>
+        ${esc(c.nombre)}</option>`
+    ).join("")}</select>`;
+    q("#cambiaCiudad").onchange = (ev) => {
+      const ruta = ev.target.value;
+      location.href = "/?PASE=" + encodeURIComponent(PASE) + "&city=" + encodeURIComponent(ruta);
+    };
+  } else {
+    cs.innerHTML = "";
+  }
+  const nueva = q("#alWizard");
+  nueva.onclick = async (ev) => {
+    ev.preventDefault();
+    const name = window.prompt("Name of the new city");
+    if (!name?.trim()) return;
+    const r = await api("/api/ciudades", {
+      method: "POST",
+      body: JSON.stringify({ name })
+    });
+    if (r.error || !r.city) return toast(r.error ?? "Could not create the city", true);
+    location.href = "/?PASE=" + encodeURIComponent(PASE) + "&city=" + encodeURIComponent(r.city);
+  };
+}
+function pinta() {
+  rail();
+  q(".cuerpo").style.padding = "";
+  q("#lienzo").style.maxWidth = "";
+  VISTAS[SECCION]();
+  q(".cuerpo").scrollTop = 0;
+}
+var VISTAS = {};
+var guia = null;
+VISTAS.bienvenida = () => {
+  document.body.classList.add("enGuia");
+  guia ??= new Bienvenida({
+    api,
+    esc,
+    aviso: toast,
+    refresca,
+    vete: (seccion) => {
+      document.body.classList.remove("enGuia");
+      SECCION = seccion;
+      pinta();
+    },
+    ciudad: E.city_name,
+    yo: E.yo,
+    datos: corto(E.datos)
+  });
+  void guia.pinta(q("#lienzo"));
+};
+VISTAS.ciudades = () => {
+  const filas = E.ciudades.map(
+    (c) => `
+      <div class="fila ${c.actual ? "on" : ""}">
+        <span class="et">${esc(c.nombre)}${c.actual ? ' <b class="de">\xB7 open now</b>' : ""}</span>
+        <span class="de">${c.agentes ?? 0} house${(c.agentes ?? 0) === 1 ? "" : "s"} of its own</span>
+        <span class="de mono">${esc(corto(c.ruta))}</span>
+        <span style="margin-left:auto;display:flex;gap:6px">
+          ${c.actual ? "" : `<a class="bt mini" href="?city=${encodeURIComponent(c.ruta)}">open</a>
+                 <button class="bt mini archiva" data-ciudad="${esc(c.ruta)}"
+                   data-nombre="${esc(c.nombre)}">archive</button>`}
+        </span>
+      </div>`
+  ).join("");
+  q("#lienzo").innerHTML = `<div><span class="sub">cities</span>
+    <h1 style="margin-top:6px">${t("Your cities")}</h1>
+    <p class="prosa" style="margin-top:8px">One person, several autonomous cities: each has
+    its own identity, domain, chair, <b>its own houses</b> and its own roads. A house is not
+    shared \u2014 it stands inside the city that owns it, with its workspace and mounts under that
+    city's folder \u2014 so two cities can each have a <code class="mono">docs</code> house and
+    they are two different workers. They share nothing unless you build a road between
+    them.</p></div>
+    <div class="lista"><div class="filas">${filas}</div></div>
+    <div class="campos" style="max-width:420px">
+      <div class="campo"><label>${t("Start another city")}</label>
+        <input type="text" id="nuevaCiudad" placeholder="client-a, research, the book\u2026"></div>
+      <button class="bt ppal" id="creaCiudad">Create it</button>
+    </div>
+    <div class="peligro">
+      <h3>${t("Start this city over")}</h3>
+      <p class="prosa">Takes <b>${esc(E.city_name)}</b> back to its first day: no seat, no
+      agents, no committee history, no map. Your repositories and document folders are
+      <b>never touched</b> \u2014 only the city that points at them.</p>
+      <button class="bt malo" id="reiniciaCiudad">${t("Start over\u2026")}</button>
+    </div>
+    <p class="pista">Archiving <b>moves</b> a city into
+    <code class="mono">.backups/</code> \u2014 nothing is deleted, and you can bring it back with
+    <code class="mono">mv</code>. The city you are standing in, and the last one you own,
+    cannot be archived.</p>`;
+  enlaza();
+  const campo = q("#nuevaCiudad");
+  q("#creaCiudad").onclick = async () => {
+    const nombre = campo.value.trim();
+    if (!nombre) {
+      toast("Give it a name", true);
+      return;
+    }
+    const r = await api("/api/ciudades", {
+      method: "POST",
+      body: JSON.stringify({ name: nombre })
+    });
+    if (!r.ok) {
+      toast(r.error ?? "Could not create it", true);
+      return;
+    }
+    toast(`${nombre} created`);
+    await refresca();
+  };
+  const reiniciar = document.getElementById("reiniciaCiudad");
+  if (reiniciar)
+    reiniciar.onclick = async () => {
+      const previa = await api("/api/ciudad-reinicia", {
+        method: "POST",
+        body: "{}"
+      });
+      if (!previa.preview) {
+        toast(previa.error ?? "Could not read what a reset would do", true);
+        return;
+      }
+      const p = previa.preview;
+      const texto = `Start over ${p.city}?
+
+You lose:
+` + p.loses.map((l) => `  \xB7 ${l}`).join("\n") + `
+
+Right now that is ${p.agents} agent(s), ${p.roads} road(s) and ${p.deliberations} committee act(s).
+
+You keep:
+` + p.keeps.map((l) => `  \xB7 ${l}`).join("\n") + `
+
+Type the city's name to confirm:`;
+      const escrito = window.prompt(texto, "");
+      if (escrito === null) return;
+      if (escrito.trim() !== p.city) {
+        toast("That is not the name \u2014 nothing was changed", true);
+        return;
+      }
+      const r = await api(
+        "/api/ciudad-reinicia",
+        { method: "POST", body: JSON.stringify({ confirm: p.city }) }
+      );
+      if (!r.ok) {
+        toast(r.error ?? "Could not reset it", true);
+        return;
+      }
+      toast(`${p.city} starts over \u2014 the old one is at ${r.backup ?? "its backup"}`);
+      primeraCarga = true;
+      await refresca();
+    };
+  todos(".archiva").forEach((boton) => {
+    boton.onclick = async () => {
+      const nombre = boton.dataset.nombre ?? "";
+      if (!window.confirm(`Archive ${nombre}? It moves into .backups \u2014 nothing is deleted.`))
+        return;
+      const r = await api(
+        "/api/ciudad-archiva",
+        { method: "POST", body: JSON.stringify({ city: boton.dataset.ciudad ?? "" }) }
+      );
+      if (!r.ok) {
+        toast(r.error ?? "Could not archive it", true);
+        return;
+      }
+      toast(`${nombre} archived \u2014 it is in ${r.backup ?? ".backups"}`);
+      await refresca();
+    };
+  });
+};
+VISTAS.resumen = () => {
+  const mia = E.tarjetas.find((t2) => t2.user === E.yo);
+  const sinUnidad = E.parcelas.filter((p) => p.unidad === "none" || p.unidad === "mine").length;
+  const agentes = E.agents ?? [];
+  const tareas = [
+    {
+      ok: !!mia,
+      txt: mia ? `Your seat is taken \u2014 you are <b>${esc(mia.agent)}</b> in <b>${esc(E.domain)}</b>` : "Take your seat: the work domain and your role in it",
+      ir: "puesto"
+    },
+    {
+      ok: agentes.length > 0,
+      txt: agentes.length === 0 ? "Build the <b>houses</b> of this city \u2014 one per worker, each whole: its kind, its role, and everything it works on" : `<b>${agentes.length}</b> house${agentes.length === 1 ? "" : "s"} in this city: ${esc(
+        agentes.map((a) => a.name).join(", ")
+      )}`,
+      ir: "gente"
+    },
+    {
+      ok: agentes.length === 0 || agentes.some((a) => (a.mounts ?? []).length),
+      txt: agentes.some((a) => (a.mounts ?? []).length) ? "Every house works on something real" : "Give a house something to work on \u2014 a repository, a worktree, a folder of documents",
+      ir: "gente"
+    },
+    {
+      ok: !!(mia && mia.goals_defined),
+      txt: mia && mia.goals_defined ? `Your goal: <b>${esc(mia.objetivo ? mia.objetivo.title : "")}</b>` : "Set <b>one goal</b>, with the command that measures it",
+      ir: "puesto"
+    },
+    {
+      ok: E.parcelas.length === 0 || sinUnidad === 0,
+      txt: E.parcelas.length === 0 ? "Districts appear on the map once agents have houses" : sinUnidad ? `<b>${sinUnidad}</b> of ${E.parcelas.length} houses sit in no real district \u2014 assign them` : "Every house has its district",
+      ir: "barrios"
+    }
+  ];
+  const empezando = !mia || agentes.length === 0;
+  const sesionArriba = E.tmux.includes(E.sesion);
+  q("#lienzo").innerHTML = `
+    <div><span class="sub">${empezando ? "welcome" : "your city"}</span>
+      <h1 style="margin-top:6px">${empezando ? "Let\u2019s build " + esc(E.city_name) : esc(E.city_name)}</h1>
+      <p class="de mono" style="margin-top:5px">${esc(E.address)}</p>
+      ${empezando ? `<p class="prosa" style="margin-top:8px">A city is a chair and the agents behind
+             it. Two steps and it is alive: take your seat \u2014 the work domain and your role in
+             it \u2014 then add the agents, each one asked for whole: what kind of work it does,
+             its role, everything it works on, the engine that runs it and the skills it
+             starts with. Everything below is a plain file in
+             <code class="mono">${esc(corto(E.datos))}</code> you can also edit by hand.</p>` : `<p class="prosa" style="margin-top:8px">Domain: <b>${esc(E.domain)}</b>. Growth is
+             counted with <code class="mono">${esc(E.grow || "nothing yet")}</code>.</p>`}</div>
     <div class="cifras">
-      <div class="cifra"><b>${Object.keys(l.skills).length}</b><span>repo agents</span></div>
-      <div class="cifra"><b>${l.parcelas.length}</b><span>houses</span></div>
-      <div class="cifra"><b>${l.roads.length}</b><span>roads</span></div>
-      <div class="cifra"><b>${l.deliberations.length}</b><span>committee acts</span></div>
-      <div class="cifra"><b>${Object.values(l.skills).reduce((r,n)=>r+n.skills.length,0)}</b><span>skills recognised</span></div>
+      <div class="cifra"><b>${Object.keys(E.skills).length}</b><span>repo agents</span></div>
+      <div class="cifra"><b>${E.parcelas.length}</b><span>houses</span></div>
+      <div class="cifra"><b>${E.roads.length}</b><span>roads</span></div>
+      <div class="cifra"><b>${E.deliberations.length}</b><span>committee acts</span></div>
+      <div class="cifra"><b>${Object.values(E.skills).reduce((n, a) => n + a.skills.length, 0)}</b><span>skills recognised</span></div>
     </div>
     <div class="luces">
-      <span class="luz ${l.tarjetas.length?"on":""}">data repo</span>
-      <span class="luz ${l.gh?"on":"neutra"}">github${l.gh?"":" \u2014 optional"}</span>
-      <span class="luz ${l.plugin?"on":""}">plugin installed</span>
-      <span class="luz ${o?"on":"neutra"}">tmux session${o?" up":""}</span>
+      <span class="luz ${E.tarjetas.length ? "on" : ""}">data repo</span>
+      <span class="luz ${E.gh ? "on" : "neutra"}">github${E.gh ? "" : " \u2014 optional"}</span>
+      <span class="luz ${E.plugin ? "on" : ""}">plugin installed</span>
+      <span class="luz ${sesionArriba ? "on" : "neutra"}">tmux session${sesionArriba ? " up" : ""}</span>
     </div>
     <div><span class="sub">what is left</span>
-      <div class="tareas" style="margin-top:9px">${i.map(r=>`
-        <div class="tarea ${r.ok?"hecha":""}">${r.txt}
-          ${r.ok?"":`<button class="bt mini ir" data-ir="${r.ir}">go</button>`}</div>`).join("")}
+      <div class="tareas" style="margin-top:9px">${tareas.map(
+    (t2) => `
+        <div class="tarea ${t2.ok ? "hecha" : ""}">${t2.txt}
+          ${t2.ok ? "" : `<button class="bt mini ir" data-ir="${t2.ir}">go</button>`}</div>`
+  ).join("")}
       </div></div>
     <div><span class="sub">work</span>
       <div style="display:flex;flex-direction:column;gap:9px;margin-top:9px">
         <div class="orden"><span class="et2">your day</span>
-          <code>${o?"tmux attach -t "+s(l.sesion):"one window per folder, an agent in each"}</code>
-          ${o?`<button class="bt mini" data-copia="tmux attach -t ${s(l.sesion)}">copy</button>`:'<button class="bt mini ppal" id="abreSesion">open my session</button>'}
+          <code>${sesionArriba ? "tmux attach -t " + esc(E.sesion) : "one window per folder, an agent in each"}</code>
+          ${sesionArriba ? `<button class="bt mini" data-copia="tmux attach -t ${esc(E.sesion)}">copy</button>` : '<button class="bt mini ppal" id="abreSesion">open my session</button>'}
         </div>
         <div class="orden"><span class="et2">the map</span>
-          <code>${l.mapa?s(l.mapa):"not drawn yet"}</code>
-          <button class="bt mini ${l.mapa?"":"ppal"}" data-ir="mapa">${l.mapa?"open":"draw it"}</button></div>
-      </div></div>`,Q();let t=document.querySelector("#abreSesion");t&&(t.onclick=async()=>{t.disabled=!0,t.textContent="building\u2026";let r=await f("/api/sesion",{method:"POST",body:JSON.stringify({user:l.yo})});await re(1500),await M(),v(r.ok&&r.attach?`Session built \u2014 attach with: ${r.attach}`:"Could not build it",!r.ok)})};x.mapa=()=>{if(l.mapa){d(".cuerpo").style.padding="0",d("#lienzo").style.maxWidth="none";let e=new URL(l.mapa,location.href);e.searchParams.set("embed","1"),e.searchParams.set("parent_origin",location.origin),d("#lienzo").innerHTML=`<iframe id="cityMapFrame" src="${s(e.toString())}" title="the map"
+          <code>${E.mapa ? esc(E.mapa) : "not drawn yet"}</code>
+          <button class="bt mini ${E.mapa ? "" : "ppal"}" data-ir="mapa">${E.mapa ? "open" : "draw it"}</button></div>
+      </div></div>`;
+  enlaza();
+  const b = document.querySelector("#abreSesion");
+  if (b)
+    b.onclick = async () => {
+      b.disabled = true;
+      b.textContent = "building\u2026";
+      const r = await api("/api/sesion", {
+        method: "POST",
+        body: JSON.stringify({ user: E.yo })
+      });
+      await espera(1500);
+      await refresca();
+      toast(
+        r.ok && r.attach ? `Session built \u2014 attach with: ${r.attach}` : "Could not build it",
+        !r.ok
+      );
+    };
+};
+VISTAS.mapa = () => {
+  if (E.mapa) {
+    q(".cuerpo").style.padding = "0";
+    q("#lienzo").style.maxWidth = "none";
+    const mapUrl = new URL(E.mapa, location.href);
+    mapUrl.searchParams.set("embed", "1");
+    mapUrl.searchParams.set("parent_origin", location.origin);
+    q("#lienzo").innerHTML = `<iframe id="cityMapFrame" src="${esc(mapUrl.toString())}" title="the map"
       allow="fullscreen" allowfullscreen
-      style="width:100%;height:calc(100vh - 2px);border:0;display:block"></iframe>`;let a=d("#cityMapFrame");a.onload=()=>{a.dataset.ready="1";let i=new URL(a.src,location.href).origin;if(a.contentWindow?.postMessage({protocol:N,type:"map.config",roads:l.roads.map(o=>({name:o.name,address:o.address})),agents:(l.agents??[]).map(o=>({name:o.name,kind:o.kind})),avatars:l.avatars??{}},i),D){let o=D;D=null,de(o)}};return}d("#lienzo").innerHTML=`<div><span class="sub">the map</span>
-    <h1 style="margin-top:6px">Not drawn yet</h1>
-    <p class="prosa" style="margin-top:8px">The map can be served independently.
-    Locally the hall runs it for you: first time bakes the front end
-    and seeds the local database, which takes about a minute.</p></div>
-    <div><button class="bt ppal" id="arrancaMapa">Draw my city</button></div>
-    <p class="cargando" id="mapaEspera" style="display:none">baking the map \u2014 first time takes a minute</p>`,d("#arrancaMapa").onclick=async()=>{d("#arrancaMapa").disabled=!0,d("#mapaEspera").style.display="",await f("/api/mapa",{method:"POST",body:"{}"});for(let e=0;e<60;e++)if(await re(3e3),l=await f("/api/estado"),l.mapa){w();return}v("It did not come up \u2014 run ./bin/city by hand and look at its output",!0),w()}};x.puesto=()=>{Me()};async function Me(){let e=l.tarjetas.find(u=>u.user===l.yo);d("#lienzo").innerHTML=`<div><span class="sub">my seat</span>
-    <h1 style="margin-top:6px">${s(l.yo)}</h1>
-    <p class="prosa" style="margin-top:8px">First choose the work domain, then your
-    chair role inside it, the folders you answer for, and one goal. The seat stays
-    the boss even when its professional role is blank. Saving writes your card \u2014
-    <code class="mono">${s(z(l.datos))}/${s(l.yo)}.md</code> \u2014 the same file
-    every other door writes.</p></div>
+      style="width:100%;height:calc(100vh - 2px);border:0;display:block"></iframe>`;
+    const frame = q("#cityMapFrame");
+    frame.onload = () => {
+      frame.dataset.ready = "1";
+      const origin = new URL(frame.src, location.href).origin;
+      frame.contentWindow?.postMessage(
+        {
+          protocol: MAP_ACTIVITY_PROTOCOL,
+          type: "map.config",
+          roads: E.roads.map((r) => ({ name: r.name, address: r.address })),
+          agents: (E.agents ?? []).map((a) => ({ name: a.name, kind: a.kind })),
+          avatars: E.avatars ?? {}
+        },
+        origin
+      );
+      frame.contentWindow?.postMessage(
+        { type: "agents-city-map-theme/1", theme: temaActual() },
+        origin
+      );
+      if (pendingMapActivity) {
+        const event = pendingMapActivity;
+        pendingMapActivity = null;
+        enviaActividadAlMapa(event);
+      }
+    };
+    return;
+  }
+  const cuantos = (E.agents ?? []).length;
+  q("#lienzo").innerHTML = `<div><span class="sub">the map</span>
+    <h1 style="margin-top:6px">Your city, drawn</h1>
+    <p class="prosa" style="margin-top:8px">${cuantos ? `<b>${cuantos}</b> agent${cuantos === 1 ? "" : "s"} live here, and the map shows
+           them as houses that grow with the work they do \u2014 with the town hall in the middle
+           when a committee is sitting, and a gate for every road out.` : `The map draws one house per agent. There are none yet, so it would be an empty
+           plot \u2014 build one from <b>Houses</b> first.`}</p>
+    <p class="prosa">The map is its own little server, so it is not running until you say so.
+    The first time takes about a minute: it builds the front end and seeds a local database.
+    After that it opens instantly, and it is yours \u2014 nothing is uploaded anywhere.</p></div>
+    <div><button class="bt ppal" id="arrancaMapa">${cuantos ? "Draw my city" : "Draw it anyway"}</button></div>
+    <p class="cargando" id="mapaEspera" style="display:none">baking the map \u2014 first time takes a minute</p>`;
+  q("#arrancaMapa").onclick = async () => {
+    q("#arrancaMapa").disabled = true;
+    q("#mapaEspera").style.display = "";
+    await api("/api/mapa", { method: "POST", body: "{}" });
+    for (let i = 0; i < 60; i++) {
+      await espera(3e3);
+      E = await api("/api/estado");
+      if (E.mapa) {
+        pinta();
+        return;
+      }
+    }
+    toast("It did not come up \u2014 run ./bin/city by hand and look at its output", true);
+    pinta();
+  };
+};
+VISTAS.puesto = () => {
+  void puesto();
+};
+async function puesto() {
+  const mia = E.tarjetas.find((t2) => t2.user === E.yo);
+  q("#lienzo").innerHTML = `<div><span class="sub">my seat</span>
+    <h1 style="margin-top:6px">${esc(E.yo)}</h1>
+    <p class="prosa" style="margin-top:8px">This is your chair: the work domain, your
+    role inside it, and one goal. The seat stays the boss even when its
+    professional role is blank. Saving writes your card \u2014
+    <code class="mono">${esc(corto(E.datos))}/${esc(E.yo)}.md</code> \u2014 the same file
+    every other door writes, and it never touches your roster.</p></div>
     <div><span class="sub">work domain</span><div class="rolejilla" id="domains" style="margin-top:9px">
       <p class="cargando">reading the domain packs</p></div></div>
     <div><span class="sub">role</span><div class="rolejilla" id="roles" style="margin-top:9px">
       <p class="cargando">reading the role files</p></div></div>
-    <div><span class="sub">folders</span><div id="carpetas" style="margin-top:9px">
-      <p class="cargando">indexing this disk \u2014 first run can take a minute</p></div></div>
-    <div><span class="sub">role of each support agent</span>
-      <p class="prosa" style="margin-top:8px">The seat above is the chair. Each
-      selected repo below adopts its own specialist role; it never gains chair or
-      road authority. Blank means no preset role knowledge.</p>
-      <div id="agentRoles" style="margin-top:9px"></div></div>
+    <div><span class="sub">the agents</span>
+      <p class="prosa" style="margin-top:8px">Who works in this city \u2014 and what each
+      one works on \u2014 lives in <b>Agents &amp; skills</b>, where an agent is asked for
+      whole: its kind, its role, its repositories and document folders, its engine
+      and its skills. One place, so the terminal and this page cannot disagree.
+      <button class="bt" type="button" data-ir="gente" style="margin-left:8px">Open the roster</button></p></div>
     <div><span class="sub">one goal \u2014 optional</span><div class="campos" id="meta" style="margin-top:9px"></div></div>
     <div style="display:flex;gap:10px;align-items:center">
       <button class="bt ppal" id="guardaPuesto">Save my seat</button>
-      <span class="cargando" id="puestoEstado" style="display:none">writing</span></div>`;let a=(await f("/api/domains")).domains,i=l.domain||l.kind||"software",o=e?e.role:"",t=[],r=()=>{d("#roles").innerHTML=t.map(u=>`
-      <button class="rol ${u.id===o?"on":""}" data-r="${s(u.id)}">
-        <h3>${s(u.name)}</h3><span class="de">${s(u.id)} \xB7 ${s(u.trade.toLowerCase())}</span>
-        <p>${s(u.summary)}</p></button>`).join(""),b("#roles .rol").forEach(u=>{u.onclick=()=>{o=u.dataset.r??"",r()}})},n=async()=>{t=(await f("/api/roles?domain="+encodeURIComponent(i))).roles,t.some(u=>u.id===o)||(o=""),r()},c=()=>{d("#domains").innerHTML=a.map(u=>`
-      <button class="rol ${u.id===i?"on":""}" data-d="${s(u.id)}">
-        <h3>${s(u.name)}</h3><span class="de">${s(u.id)}</span>
-        <p>${s(u.summary)}</p></button>`).join(""),b("#domains .rol").forEach(u=>{u.onclick=()=>{i=u.dataset.d??"software",c(),n()}})};c(),await n();let[p,h]=await Promise.all([f("/api/misrepos?user="+encodeURIComponent(l.yo)),f("/api/roles?scope=agent")]),{repos:y}=p,m=h.roles,g=new Set(e&&e.repos.length?e.repos:y.filter(u=>u.mio).map(u=>u.nombre)),L={...e?.repo_roles||{}},R=()=>{d("#agentRoles").innerHTML=K(g,L,m,s),b("#agentRoles [data-repo-role]").forEach(u=>{u.onchange=()=>{L[u.dataset.repoRole??""]=u.value||"blank"}})},B="",I=()=>{let u=y.filter($=>!B||$.nombre.toLowerCase().includes(B));d("#carpetas").innerHTML=`<div class="lista">
-      <div class="barra">
-        <input class="mono" id="fl" placeholder="filter ${y.length} repos\u2026" value="${s(B)}">
-        <button class="mini2" id="rescan" title="the index caches for a day \u2014 this rebuilds it now">rescan disk</button>
-        <button class="mini2" id="nada">none</button>
-        <span class="de" style="font-family:var(--mono);font-size:11px;color:var(--tinta3)">${g.size} picked</span>
-      </div>
-      <div class="filas">${u.map($=>`
-        <div class="fila ${g.has($.nombre)?"on":""}" data-n="${s($.nombre)}">
-          <span class="caja">${g.has($.nombre)?"[x]":"[ ]"}</span>
-          <span class="et">${s($.nombre)}</span>
-          <span class="de">${s($.cuando||"\u2014")}  ${s(z($.ruta))}</span></div>`).join("")||'<div class="fila"><span class="de" style="margin:0">nothing matches</span></div>'}
-      </div></div>
-      <p class="pista" style="margin-top:6px;font-size:11.5px;color:var(--tinta3);font-style:italic">
-      Ticked by your commits this year. Owning <b>no</b> folders is a real answer for a
-      cross-cutting role \u2014 your city is simply empty, and your work is the roads.</p>`;let X=d("#fl");X.oninput=()=>{B=X.value.toLowerCase(),I();let $=d("#fl");$.focus(),$.setSelectionRange($.value.length,$.value.length)},d("#rescan").onclick=async()=>{let $=d("#rescan");$.textContent="scanning\u2026",$.disabled=!0,{repos:y}=await f("/api/misrepos?refresh=1&user="+encodeURIComponent(l.yo)),I(),v(`${y.length} repos on this disk`)},d("#nada").onclick=()=>{u.forEach($=>g.delete($.nombre)),I()},b("#carpetas .fila[data-n]").forEach($=>{$.onclick=()=>{let U=$.dataset.n??"";g.has(U)?g.delete(U):g.add(U),I()}}),R()};I();let S=e&&e.objetivo||{};d("#meta").innerHTML=`
+      <span class="cargando" id="puestoEstado" style="display:none">writing</span></div>`;
+  const domainsR = (await api("/api/domains")).domains;
+  let domain = E.domain || E.kind || "software";
+  let rol = mia ? mia.role : "";
+  let rolesR = [];
+  const pintaRoles = () => {
+    q("#roles").innerHTML = rolesR.map(
+      (r) => `
+      <button class="rol ${r.id === rol ? "on" : ""}" data-r="${esc(r.id)}">
+        <h3>${esc(r.name)}</h3><span class="de">${esc(r.id)} \xB7 ${esc(r.trade.toLowerCase())}</span>
+        <p>${esc(r.summary)}</p></button>`
+    ).join("");
+    todos("#roles .rol").forEach((b) => {
+      b.onclick = () => {
+        rol = b.dataset.r ?? "";
+        pintaRoles();
+      };
+    });
+  };
+  const cargaRoles = async () => {
+    rolesR = (await api("/api/roles?domain=" + encodeURIComponent(domain))).roles;
+    if (!rolesR.some((r) => r.id === rol)) rol = "";
+    pintaRoles();
+  };
+  const pintaDominios = () => {
+    q("#domains").innerHTML = domainsR.map(
+      (d) => `
+      <button class="rol ${d.id === domain ? "on" : ""}" data-d="${esc(d.id)}">
+        <h3>${esc(d.name)}</h3><span class="de">${esc(d.id)}</span>
+        <p>${esc(d.summary)}</p></button>`
+    ).join("");
+    todos("#domains .rol").forEach((b) => {
+      b.onclick = () => {
+        domain = b.dataset.d ?? "software";
+        pintaDominios();
+        void cargaRoles();
+      };
+    });
+  };
+  pintaDominios();
+  await cargaRoles();
+  const o = mia && mia.objetivo || {};
+  q("#meta").innerHTML = `
     <div class="campo"><label>The goal, in one line</label>
-      <input type="text" id="g_title" value="${s(S.title)}" placeholder="Concrete enough to argue with \u2014 empty skips it">
+      <input type="text" id="g_title" value="${esc(o.title)}" placeholder="Concrete enough to argue with \u2014 empty skips it">
     </div>
     <div class="dos">
       <div class="campo"><label>How it is measured</label>
-        <input type="text" id="g_signal" value="${s(S.signal)}"></div>
+        <input type="text" id="g_signal" value="${esc(o.signal)}"></div>
       <div class="campo"><label>The command that returns it, if a command can</label>
-        <input type="text" class="mono" id="g_command" value="${s(S.command)}"
+        <input type="text" class="mono" id="g_command" value="${esc(o.command)}"
           placeholder="empty for a qualitative goal"></div>
     </div>
     <div class="campo"><label>\u2026or who judges it, and how often</label>
-      <input type="text" id="g_manual" value="${s(S.manual)}"
+      <input type="text" id="g_manual" value="${esc(o.manual)}"
         placeholder="in prose: the architect reads the AGENTS.md files on Fridays">
       <p class="pista">A goal judged by a person is a real goal \u2014 plenty of quality
         is prose, not a number. Used when the command is empty.</p></div>
     <div class="dos">
       <div class="campo"><label>What it returns today</label>
-        <input type="text" class="mono" id="g_baseline" value="${s(S.baseline)}"></div>
+        <input type="text" class="mono" id="g_baseline" value="${esc(o.baseline)}"></div>
       <div class="campo"><label>Where it has to get to</label>
-        <input type="text" class="mono" id="g_target" value="${s(S.target)}"></div>
+        <input type="text" class="mono" id="g_target" value="${esc(o.target)}"></div>
     </div>
     <div class="campo" style="max-width:240px"><label>By when</label>
-      <input type="text" id="g_by" value="${s(S.by??"this quarter")}"></div>`;let C=u=>d(u).value.trim();d("#guardaPuesto").onclick=async()=>{if(!o){v("Pick a role \u2014 it is the name your seat answers to",!0);return}d("#puestoEstado").style.display="";let u=await f("/api/ficha",{method:"POST",body:JSON.stringify({user:l.yo,domain:i,role:o,repos:[...g],repo_roles:Z(g,L),objetivo:{title:C("#g_title"),signal:C("#g_signal"),command:C("#g_command"),manual:C("#g_manual"),baseline:C("#g_baseline"),target:C("#g_target"),by:C("#g_by")||"this quarter"}})});await M(),v(u.ok?`Card written \u2014 you are ${u.user??l.yo}`:u.error??"It could not write",!u.ok)}}x.barrios=()=>{let e=l.unidades.map(r=>({...r})),a=new Set(l.lab),i={};for(let r of l.parcelas)(i[r.repo]=i[r.repo]??[]).push({ruta:r.ruta,unidad:r.unidad,nombre:r.nombre});let o=r=>r.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"").slice(0,20),t=()=>{let r=new Set([...e.map(n=>n.id),"none"]);d("#lienzo").innerHTML=`<div><span class="sub">districts & houses</span>
+      <input type="text" id="g_by" value="${esc(o.by ?? "this quarter")}"></div>`;
+  const val = (id) => q(id).value.trim();
+  q("#guardaPuesto").onclick = async () => {
+    if (!rol) {
+      toast("Pick a role \u2014 it is the name your seat answers to", true);
+      return;
+    }
+    q("#puestoEstado").style.display = "";
+    const r = await api("/api/ficha", {
+      method: "POST",
+      body: JSON.stringify({
+        user: E.yo,
+        domain,
+        role: rol,
+        objetivo: {
+          title: val("#g_title"),
+          signal: val("#g_signal"),
+          command: val("#g_command"),
+          manual: val("#g_manual"),
+          baseline: val("#g_baseline"),
+          target: val("#g_target"),
+          by: val("#g_by") || "this quarter"
+        }
+      })
+    });
+    await refresca();
+    toast(
+      r.ok ? `Card written \u2014 you are ${r.user ?? E.yo}` : r.error ?? "It could not write",
+      !r.ok
+    );
+  };
+}
+VISTAS.barrios = () => {
+  const unidades = E.unidades.map((u) => ({ ...u }));
+  const lab = new Set(E.lab);
+  const porRepo = {};
+  for (const p of E.parcelas) {
+    (porRepo[p.repo] = porRepo[p.repo] ?? []).push({
+      ruta: p.ruta,
+      unidad: p.unidad,
+      nombre: p.nombre
+    });
+  }
+  const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 20);
+  const render = () => {
+    const idsValidos = /* @__PURE__ */ new Set([...unidades.map((u) => u.id), "none"]);
+    q("#lienzo").innerHTML = `<div><span class="sub">districts & houses</span>
       <h1 style="margin-top:6px">The modelling no tool can do for you</h1>
       <p class="prosa" style="margin-top:8px">A house is <b>not a repo</b> \u2014 it is a
       parcel, a slice of one serving a single business unit. Split the interesting
@@ -143,47 +1632,179 @@ function Z(e,a){return Object.fromEntries([...e].sort().map(i=>[i,a[i]||"blank"]
       <div style="display:flex;gap:10px;align-items:center">
         <button class="bt ppal" id="guardaBarrios">Save districts & houses</button>
         <span style="font-size:12px;color:var(--tinta3);font-style:italic">
-          writes units.yml and parcels.yml \u2014 reseed the map to see it drawn</span></div>`,d("#unidades").innerHTML=e.map((n,c)=>`
+          writes units.yml and parcels.yml \u2014 reseed the map to see it drawn</span></div>`;
+    q("#unidades").innerHTML = unidades.map(
+      (u, i) => `
       <div class="tr">
-        <input type="text" value="${s(n.name)}" data-i="${c}" style="flex:1">
-        <span class="id">${s(n.id)}</span>
-        <span class="pips" data-i="${c}">${l.paleta.map(p=>`
-          <button class="pip ${p.hex===n.color?"on":""}" data-c="${p.hex}"
-            style="background:#${p.hex}" title="${s(p.nombre)}"></button>`).join("")}</span>
-        <button class="x" data-x="${c}">\xD7</button></div>`).join("")||'<div class="tr" style="color:var(--tinta3);font-size:12.5px">No districts yet \u2014 everything sits in \u201Cno unit\u201D.</div>',d("#parcelas").innerHTML=Object.keys(i).sort().map(n=>`
-      <div class="repoBloque" data-repo="${s(n)}">
-        <div class="repoCab"><span>${s(n)}</span>
-          <button class="bt mini" data-split="${s(n)}">split</button>
-          <label class="lab"><input type="checkbox" data-lab="${s(n)}"
-            ${a.has(n)?"checked":""}> lab</label></div>
-        ${(i[n]??[]).map((c,p)=>`
+        <input type="text" value="${esc(u.name)}" data-i="${i}" style="flex:1">
+        <span class="id">${esc(u.id)}</span>
+        <span class="pips" data-i="${i}">${E.paleta.map(
+        (p) => `
+          <button class="pip ${p.hex === u.color ? "on" : ""}" data-c="${p.hex}"
+            style="background:#${p.hex}" title="${esc(p.nombre)}"></button>`
+      ).join("")}</span>
+        <button class="x" data-x="${i}">\xD7</button></div>`
+    ).join("") || '<div class="tr" style="color:var(--tinta3);font-size:12.5px">No districts yet \u2014 everything sits in \u201Cno unit\u201D.</div>';
+    q("#parcelas").innerHTML = Object.keys(porRepo).sort().map(
+      (repo) => `
+      <div class="repoBloque" data-repo="${esc(repo)}">
+        <div class="repoCab"><span>${esc(repo)}</span>
+          <button class="bt mini" data-split="${esc(repo)}">split</button>
+          <label class="lab"><input type="checkbox" data-lab="${esc(repo)}"
+            ${lab.has(repo) ? "checked" : ""}> lab</label></div>
+        ${(porRepo[repo] ?? []).map(
+        (f, j) => `
           <div class="parcela">
-            <input type="text" value="${s(c.nombre)}" data-k="nombre" data-r="${s(n)}" data-j="${p}" title="name on the map">
-            <input type="text" class="mono" value="${s(c.ruta)}" data-k="ruta" data-r="${s(n)}" data-j="${p}"
+            <input type="text" value="${esc(f.nombre)}" data-k="nombre" data-r="${esc(repo)}" data-j="${j}" title="name on the map">
+            <input type="text" class="mono" value="${esc(f.ruta)}" data-k="ruta" data-r="${esc(repo)}" data-j="${j}"
               placeholder="glob inside the repo \u2014 empty = the whole repo">
-            <select data-k="unidad" data-r="${s(n)}" data-j="${p}">
-              ${[...e.map(h=>h.id),"none"].map(h=>`
-                <option value="${s(h)}" ${(r.has(c.unidad)?c.unidad:"none")===h?"selected":""}>${s(h)}</option>`).join("")}
+            <select data-k="unidad" data-r="${esc(repo)}" data-j="${j}">
+              ${[...unidades.map((u) => u.id), "none"].map(
+          (id) => `
+                <option value="${esc(id)}" ${(idsValidos.has(f.unidad) ? f.unidad : "none") === id ? "selected" : ""}>${esc(id)}</option>`
+        ).join("")}
             </select>
-            ${(i[n]??[]).length>1?`<button class="x" data-quita="${s(n)}" data-j="${p}">\xD7</button>`:"<span></span>"}
-          </div>`).join("")}
-      </div>`).join("")||'<p class="prosa">No houses yet. Pick your folders in <b>My seat</b> and each becomes one.</p>',b("#unidades input[data-i]").forEach(n=>{n.oninput=()=>{let c=e[Number(n.dataset.i)];if(!c)return;c.name=n.value,c.id=o(n.value)||c.id;let p=n.closest(".tr")?.querySelector(".id");p&&(p.textContent=c.id)}}),b("#unidades .pip").forEach(n=>{n.onclick=()=>{let c=n.closest(".pips"),p=e[Number(c?.dataset.i)];p&&(p.color=n.dataset.c??p.color,t())}}),b("#unidades .x[data-x]").forEach(n=>{n.onclick=()=>{e.splice(Number(n.dataset.x),1),t()}}),d("#masU").onclick=()=>{let n=d("#nuevaU").value.trim();if(!n)return;let c=e.map(h=>h.color),p=l.paleta.find(h=>!c.includes(h.hex))??l.paleta[0];e.push({id:o(n),name:n,color:p?p.hex:"c8b48a"}),t()},d("#nuevaU").onkeydown=n=>{n.key==="Enter"&&d("#masU").click()},b("#parcelas [data-k]").forEach(n=>{n.onchange=()=>{let c=i[n.dataset.r??""]?.[Number(n.dataset.j)];if(!c)return;let p=n.dataset.k;c[p]=n.value}}),b("#parcelas [data-split]").forEach(n=>{n.onclick=()=>{let c=n.dataset.split??"";(i[c]=i[c]??[]).push({ruta:"",unidad:"none",nombre:`${c} \xB7 new slice`}),t()}}),b("#parcelas [data-quita]").forEach(n=>{n.onclick=()=>{i[n.dataset.quita??""]?.splice(Number(n.dataset.j),1),t()}}),b("#parcelas [data-lab]").forEach(n=>{n.onchange=()=>{let c=n.dataset.lab??"";n.checked?a.add(c):a.delete(c)}}),d("#guardaBarrios").onclick=async()=>{let n=await f("/api/unidades",{method:"POST",body:JSON.stringify({unidades:e})}),c=await f("/api/parcelas",{method:"POST",body:JSON.stringify({repos:i,lab:[...a]})});await M();let p=n.error??c.error;v(p??"Districts and houses written",!!p)}};t()};x.red=()=>{let e=new Set(l.roads.map(o=>o.id)),a=l.ciudades.filter(o=>!o.actual&&o.id&&!e.has(o.id)),i=JSON.stringify(l.invitation);d("#lienzo").innerHTML=`<div><span class="sub">roads</span>
+            ${(porRepo[repo] ?? []).length > 1 ? `<button class="x" data-quita="${esc(repo)}" data-j="${j}">\xD7</button>` : "<span></span>"}
+          </div>`
+      ).join("")}
+      </div>`
+    ).join("") || '<p class="prosa">No houses yet. Pick your folders in <b>My seat</b> and each becomes one.</p>';
+    todos("#unidades input[data-i]").forEach((inp) => {
+      inp.oninput = () => {
+        const u = unidades[Number(inp.dataset.i)];
+        if (!u) return;
+        u.name = inp.value;
+        u.id = slug(inp.value) || u.id;
+        const idEl = inp.closest(".tr")?.querySelector(".id");
+        if (idEl) idEl.textContent = u.id;
+      };
+    });
+    todos("#unidades .pip").forEach((b) => {
+      b.onclick = () => {
+        const grupo = b.closest(".pips");
+        const u = unidades[Number(grupo?.dataset.i)];
+        if (u) {
+          u.color = b.dataset.c ?? u.color;
+          render();
+        }
+      };
+    });
+    todos("#unidades .x[data-x]").forEach((b) => {
+      b.onclick = () => {
+        unidades.splice(Number(b.dataset.x), 1);
+        render();
+      };
+    });
+    q("#masU").onclick = () => {
+      const n = q("#nuevaU").value.trim();
+      if (!n) return;
+      const usados = unidades.map((u) => u.color);
+      const libre = E.paleta.find((p) => !usados.includes(p.hex)) ?? E.paleta[0];
+      unidades.push({ id: slug(n), name: n, color: libre ? libre.hex : "c8b48a" });
+      render();
+    };
+    q("#nuevaU").onkeydown = (e) => {
+      if (e.key === "Enter") q("#masU").click();
+    };
+    todos("#parcelas [data-k]").forEach((el) => {
+      el.onchange = () => {
+        const fila = porRepo[el.dataset.r ?? ""]?.[Number(el.dataset.j)];
+        if (!fila) return;
+        const k = el.dataset.k;
+        fila[k] = el.value;
+      };
+    });
+    todos("#parcelas [data-split]").forEach((b) => {
+      b.onclick = () => {
+        const r = b.dataset.split ?? "";
+        (porRepo[r] = porRepo[r] ?? []).push({
+          ruta: "",
+          unidad: "none",
+          nombre: `${r} \xB7 new slice`
+        });
+        render();
+      };
+    });
+    todos("#parcelas [data-quita]").forEach((b) => {
+      b.onclick = () => {
+        porRepo[b.dataset.quita ?? ""]?.splice(Number(b.dataset.j), 1);
+        render();
+      };
+    });
+    todos("#parcelas [data-lab]").forEach((c) => {
+      c.onchange = () => {
+        const r = c.dataset.lab ?? "";
+        if (c.checked) lab.add(r);
+        else lab.delete(r);
+      };
+    });
+    q("#guardaBarrios").onclick = async () => {
+      const r1 = await api("/api/unidades", {
+        method: "POST",
+        body: JSON.stringify({ unidades })
+      });
+      const r2 = await api("/api/parcelas", {
+        method: "POST",
+        body: JSON.stringify({ repos: porRepo, lab: [...lab] })
+      });
+      await refresca();
+      const mal = r1.error ?? r2.error;
+      toast(mal ?? "Districts and houses written", !!mal);
+    };
+  };
+  render();
+};
+VISTAS.red = () => {
+  const conectadas = new Set(E.roads.map((r) => r.id));
+  const locales = E.ciudades.filter((c) => !c.actual && c.id && !conectadas.has(c.id));
+  const invitation = JSON.stringify(E.invitation);
+  q("#lienzo").innerHTML = `<div><span class="sub">roads</span>
     <h1 style="margin-top:6px">Cities this one may reach</h1>
     <p class="prosa" style="margin-top:8px">A road joins city seats. It may stay on
     this machine or continue over the remote bus; the city sees one explicit
     connection either way.</p></div>
-    <div class="gente">${l.roads.map(o=>`<div class="persona"><h3>${s(o.name)}</h3>
-          <span class="ag">${s(o.address)}</span>
-          <span class="rp">${o.local?"local road":"remote road"}</span>
-          <button class="bt mini" data-road-close="${s(o.id)}">close</button></div>`).join("")||'<p class="prosa">No roads yet. This city is isolated on purpose.</p>'}</div>
+    <div class="gente">${E.roads.map(
+    (r) => `<div class="persona"><h3>${esc(r.name)}</h3>
+          <span class="ag">${esc(r.address)}</span>
+          <span class="rp">${r.local ? "local road" : "remote road"}</span>
+          <button class="bt mini" data-road-close="${esc(r.id)}">close</button></div>`
+  ).join("") || '<p class="prosa">No roads yet. This city is isolated on purpose.</p>'}</div>
     <div><span class="sub">other cities on this machine</span>
-      <div class="gente" style="margin-top:9px">${a.map(o=>`<div class="persona"><h3>${s(o.nombre)}</h3>
-              <span class="ag">${s(o.slug??o.ruta)}</span>
-              <button class="bt mini ppal" data-road-open="${s(o.id)}">open road</button></div>`).join("")||'<p class="prosa">No unconnected local cities.</p>'}</div></div>
+      <div class="gente" style="margin-top:9px">${locales.map(
+    (c) => `<div class="persona"><h3>${esc(c.nombre)}</h3>
+              <span class="ag">${esc(c.slug ?? c.ruta)}</span>
+              <button class="bt mini ppal" data-road-open="${esc(c.id)}">open road</button></div>`
+  ).join("") || '<p class="prosa">No unconnected local cities.</p>'}</div></div>
     <div class="orden"><span class="et2">remote invitation \xB7 public, no token</span>
-      <code>${s(i)}</code>
-      <button class="bt mini" data-copia="${s(i)}">copy</button>
-    </div>`,Q(),b("[data-road-open]").forEach(o=>{o.onclick=async()=>{let t=await f("/api/roads",{method:"POST",body:JSON.stringify({action:"connect",target:o.dataset.roadOpen})});if(t.error)return v(t.error,!0);await M(),v("Road open at both local cities")}}),b("[data-road-close]").forEach(o=>{o.onclick=async()=>{let t=await f("/api/roads",{method:"POST",body:JSON.stringify({action:"disconnect",target:o.dataset.roadClose})});if(t.error)return v(t.error,!0);await M(),v("Road closed")}})};x.committee=()=>{d("#lienzo").innerHTML=`<div><span class="sub">committee</span>
+      <code>${esc(invitation)}</code>
+      <button class="bt mini" data-copia="${esc(invitation)}">copy</button>
+    </div>`;
+  enlaza();
+  todos("[data-road-open]").forEach((b) => {
+    b.onclick = async () => {
+      const r = await api("/api/roads", {
+        method: "POST",
+        body: JSON.stringify({ action: "connect", target: b.dataset.roadOpen })
+      });
+      if (r.error) return toast(r.error, true);
+      await refresca();
+      toast("Road open at both local cities");
+    };
+  });
+  todos("[data-road-close]").forEach((b) => {
+    b.onclick = async () => {
+      const r = await api("/api/roads", {
+        method: "POST",
+        body: JSON.stringify({ action: "disconnect", target: b.dataset.roadClose })
+      });
+      if (r.error) return toast(r.error, true);
+      await refresca();
+      toast("Road closed");
+    };
+  });
+};
+VISTAS.committee = () => {
+  q("#lienzo").innerHTML = `<div><span class="sub">committee</span>
     <h1 style="margin-top:6px">Decisions with a visible chain of custody</h1>
     <p class="prosa" style="margin-top:8px">The seat selects relevant repo agents,
     gathers isolated positions, controls the floor, decides and assigns an
@@ -193,72 +1814,470 @@ function Z(e,a){return Object.fromEntries([...e].sort().map(i=>[i,a[i]||"blank"]
       <code>agents-city committee schema open</code>
       <button class="bt mini" data-copia="agents-city committee schema open">copy</button>
     </div>
-    <div class="gente">${l.deliberations.map(e=>`<div class="persona">
-            <h3>${s(e.question)}</h3>
-            <span class="ag">${s(e.status)} \xB7 revision ${e.revision} \xB7
-              ${e.received}/${e.total} positions</span>
-            <span class="rp">${s(e.decision||e.desired_outcome)}</span>
-            <span class="de">${s(e.participants.join(", ")||"no participants")}
-              ${e.contributors.length?` \xB7 decisive ${s(e.contributors.join(", "))}`:""}
-              ${e.verifier?` \xB7 verifier ${s(e.verifier)} ${s(e.verification)}`:""}</span>
-            <code class="mono">${s(z(e.act))}</code>
-          </div>`).join("")||'<p class="prosa">No committee acts yet. Open one only when the seat needs specialised evidence.</p>'}</div>`,Q()};function xe(e){let a=e.toLowerCase();if(!a)return{ancho:.5,texto:"default",defecto:!0};for(let[i,o]of[["fable",1],["opus",.8],["sonnet",.55],["haiku",.35]])if(a.includes(i))return{ancho:o,texto:a,defecto:!1};return{ancho:.6,texto:a,defecto:!1}}var se={low:1,medium:2,high:3,xhigh:4,max:5},Le=["haiku","sonnet","opus","fable"];function W(e,a){return e.concat(a&&!e.includes(a)?[a]:[]).map(i=>`<option value="${s(i)}"${i===a?" selected":""}>${s(i||"default")}</option>`).join("")}function oe(e){return e?.startsWith("data:image/svg+xml;base64,")?`<img class="rpgCara" src="${s(e)}" alt="">`:""}function J(e,a=""){let i=Math.round(Math.max(0,Math.min(1,e))*100);return`<span class="barra${a?" "+a:""}"><span class="llena" style="width:${i}%"></span></span>`}x.gente=()=>{let e=l.tarjetas.find(t=>t.user===l.yo),a=l.agents??[],i=t=>{let r=xe(t.model),n=se[t.effort]??0,c=t.growth,p=Math.min(1,Math.log2(c.floors+1)/8),h=l.skills[t.name]?.skills??[],y=t.runtime==="claude",m=W([""].concat(Le),t.model)+'<option value="__otro__">custom\u2026</option>',g=W([""].concat(Object.keys(se)),t.effort),L=W(["claude","codex","opencode","kimi"],t.runtime);return`
+    <div class="gente">${E.deliberations.map(
+    (act) => `<div class="persona">
+            <h3>${esc(act.question)}</h3>
+            <span class="ag">${esc(act.status)} \xB7 revision ${act.revision} \xB7
+              ${act.received}/${act.total} positions</span>
+            <span class="rp">${esc(act.decision || act.desired_outcome)}</span>
+            <span class="de">${esc(act.participants.join(", ") || "no participants")}
+              ${act.contributors.length ? ` \xB7 decisive ${esc(act.contributors.join(", "))}` : ""}
+              ${act.verifier ? ` \xB7 verifier ${esc(act.verifier)} ${esc(act.verification)}` : ""}</span>
+            <code class="mono">${esc(corto(act.act))}</code>
+          </div>`
+  ).join("") || '<p class="prosa">No committee acts yet. Open one only when the seat needs specialised evidence.</p>'}</div>`;
+  enlaza();
+};
+function opciones2(valores, actual) {
+  return opciones(valores, actual, esc);
+}
+function caraRPG(uri) {
+  return uri?.startsWith("data:image/svg+xml;base64,") ? `<img class="rpgCara" src="${esc(uri)}" alt="">` : "";
+}
+function barra(ancho, clase = "") {
+  const pct = Math.round(Math.max(0, Math.min(1, ancho)) * 100);
+  return `<span class="barra${clase ? " " + clase : ""}"><span class="llena" style="width:${pct}%"></span></span>`;
+}
+VISTAS.gente = () => {
+  const mia = E.tarjetas.find((t2) => t2.user === E.yo);
+  const agentes = E.agents ?? [];
+  const fichaDe = (a) => {
+    const motor = nivelDeMotor(a.model);
+    const esfuerzo = NIVEL_ESFUERZO[a.effort] ?? 0;
+    const g = a.growth;
+    const crecido = Math.min(1, Math.log2(g.floors + 1) / 8);
+    const skills = E.skills[a.name]?.skills ?? [];
+    const esClaude = a.runtime === "claude";
+    const opcionesModelo = opciones2([""].concat(MODELOS), a.model) + '<option value="__otro__">custom\u2026</option>';
+    const opcionesEsfuerzo = opciones2([""].concat(ESFUERZOS), a.effort);
+    const opcionesRuntime = opciones2(RUNTIMES, a.runtime);
+    const montajes = a.mounts ?? [];
+    return `
       <div class="fichaRPG">
-        <div class="rpgCab">${oe(t.avatar)}
-          <div><h3>${s(t.name)}</h3>
-          <span class="rpgTags"><span class="kindChip ${s(t.kind)}">${s(t.kind)}</span>
-          <span class="rpgRol">${s(t.role)}</span>
-          <span class="rpgHogar">${t.legacy?"repo":`workspace \xB7 ${t.mounts|0} ${t.mounts===1?"mount":"mounts"}`}</span></span></div>
+        <div class="rpgCab">${caraRPG(a.avatar)}
+          <div><h3>${esc(a.name)}</h3>
+          <span class="rpgTags"><span class="kindChip ${esc(a.kind)}">${esc(a.kind)}</span>
+          <span class="rpgRol">${esc(a.role)}</span>
+          <span class="rpgHogar">${a.legacy ? "repo" : `workspace \xB7 ${montajes.length} ${montajes.length === 1 ? "mount" : "mounts"}`}</span></span></div>
           <span class="rpgBotones">
-            <button class="rpgMini rpgDado" type="button" data-agente="${s(t.slug)}"
+            <button class="rpgMini rpgDado" type="button" data-agente="${esc(a.slug)}"
               title="Reroll this agent's face \u2014 deterministic, persisted on the card">\u{1F3B2}</button>
-            <button class="rpgMini rpgIns" type="button" data-agente="${s(t.slug)}"
+            <button class="rpgMini rpgIns" type="button" data-agente="${esc(a.slug)}"
               data-file="CLAUDE.md" title="Instructions the Claude runtime reads">CLAUDE.md</button>
-            <button class="rpgMini rpgIns" type="button" data-agente="${s(t.slug)}"
+            <button class="rpgMini rpgIns" type="button" data-agente="${esc(a.slug)}"
               data-file="AGENTS.md" title="Instructions Codex, OpenCode and Kimi read">AGENTS.md</button>
           </span>
         </div>
-        <div class="rpgFila"><label>engine</label>
-          ${J(r.ancho,r.defecto?"defecto":"")}
-          <select class="rpgSel" data-agente="${s(t.slug)}" data-campo="model"
-            ${y?"":'disabled title="This window runs its own CLI; its model lives in its own flags"'}>
-            ${m}</select></div>
-        <div class="rpgFila"><label>effort</label>
-          ${J(n/5,n?"":"defecto")}
-          <select class="rpgSel" data-agente="${s(t.slug)}" data-campo="effort"
-            ${y?"":'disabled title="This window runs its own CLI; its effort lives in its own flags"'}>
-            ${g}</select></div>
-        <div class="rpgFila"><label>provider</label>
-          <span class="rpgDato"><span class="cliDot ${t.cli.connected?"on":t.cli.installed?"idle":"off"}" title="${s(t.cli.connected?"connected: this agent\u2019s window is alive right now":t.cli.installed?"installed on this machine, not in use by this agent":`${t.cli.binary} is not installed`)}"></span>${s(t.cli.connected?"connected":t.cli.installed?"idle":"missing")} \xB7 ${s(t.cli.binary)}
-          <button class="rpgMini rpgTest" type="button" data-agente="${s(t.slug)}"
+        <div class="rpgFila"><label>${t("engine")}</label>
+          ${barra(motor.ancho, motor.defecto ? "defecto" : "")}
+          <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="model"
+            ${esClaude ? "" : 'disabled title="This window runs its own CLI; its model lives in its own flags"'}>
+            ${opcionesModelo}</select></div>
+        <div class="rpgFila"><label>${t("effort")}</label>
+          ${barra(esfuerzo / 5, esfuerzo ? "" : "defecto")}
+          <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="effort"
+            ${esClaude ? "" : 'disabled title="This window runs its own CLI; its effort lives in its own flags"'}>
+            ${opcionesEsfuerzo}</select></div>
+        <div class="rpgFila"><label>${t("provider")}</label>
+          <span class="rpgDato"><span class="cliDot ${a.cli.connected ? "on" : a.cli.installed ? "idle" : "off"}" title="${esc(
+      a.cli.connected ? "connected: this agent\u2019s window is alive right now" : a.cli.installed ? "installed on this machine, not in use by this agent" : `${a.cli.binary} is not installed`
+    )}"></span>${esc(
+      t(a.cli.connected ? "connected" : a.cli.installed ? "idle" : "missing")
+    )} \xB7 ${esc(a.cli.binary)}
+          <button class="rpgMini rpgTest" type="button" data-agente="${esc(a.slug)}"
             title="Run the engine for real: --version, and the login state on Claude">test</button></span>
-          <select class="rpgSel" data-agente="${s(t.slug)}" data-campo="runtime">
-            ${L}</select></div>
-        <div class="rpgFila"><label>growth</label>
-          ${J(p)}
-          <span class="rpgDato">${c.floors|0} floors \xB7 ${c.bricks|0} bricks \xB7 ${c.activity30|0}/30d</span></div>
-        <div class="rpgSkills"><label>skills \xB7 ${h.length}</label>
-          ${h.length?h.map(R=>`<code class="mono" title="${s(R.description)}">${s(R.name)}${R.removable&&R.dir?`<button class="rpgQuitar" type="button" data-agente="${s(t.slug)}"
-                              data-skill="${s(R.dir)}" title="Remove this skill from the agent's home">\xD7</button>`:""}</code>`).join(" "):'<span class="rpgDato">none discovered</span>'}
+          <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="runtime">
+            ${opcionesRuntime}</select></div>
+        <div class="rpgSkills"><label>${t("works on")} \xB7 ${montajes.length}</label>
+          ${montajes.length ? montajes.map(
+      (m) => `<code class="mono" title="${esc(m.target)}">${esc(m.label)}${m.fixed ? "" : `<button class="rpgQuitar rpgDesmonta" type="button"
+                              data-agente="${esc(a.slug)}" data-mount="${esc(m.label)}"
+                              title="Stop this agent working on ${esc(m.target)}">\xD7</button>`}</code>`
+    ).join(" ") : '<span class="rpgDato">nothing mounted yet</span>'}
+          ${a.legacy ? '<span class="rpgDato">a legacy repo agent works on its own repo</span>' : `<button class="rpgMini rpgMonta" type="button" data-agente="${esc(a.slug)}"
+                  title="A repo, a worktree or a folder of documents \u2014 this agent works on all of them">+ folder</button>`}</div>
+        <div class="rpgFila"><label>${t("growth")}</label>
+          ${barra(crecido)}
+          <span class="rpgDato">${g.floors | 0} floors \xB7 ${g.bricks | 0} bricks \xB7 ${g.activity30 | 0}/30d</span></div>
+        <div class="rpgSkills"><label>${t("skills")} \xB7 ${skills.length}</label>
+          ${skills.length ? skills.map(
+      (s) => `<code class="mono" title="${esc(s.description)}">${esc(s.name)}${s.removable && s.dir ? `<button class="rpgQuitar" type="button" data-agente="${esc(a.slug)}"
+                              data-skill="${esc(s.dir)}" title="Remove this skill from the agent's home">\xD7</button>` : ""}</code>`
+    ).join(" ") : '<span class="rpgDato">none discovered</span>'}
           <label class="rpgMini rpgSubir"
             title="Install a skill zip into this agent's own home \u2014 the Claude runtime reads skills; other engines ignore them">
-            + zip<input type="file" accept=".zip" data-agente="${s(t.slug)}"></label></div>
-      </div>`};d("#lienzo").innerHTML=`<div><span class="sub">agents & skills</span>
-    <h1 style="margin-top:6px">One seat, support agents behind it</h1>
-    <p class="prosa" style="margin-top:8px">Every number on a card is real: the
-    engine comes from the card keys the launcher resolves, growth from what the
-    agent actually produced, skills from live read-only recognition \u2014 Agents
-    City copies and installs nothing. Engine changes persist to the card and
-    apply the next time the session opens.</p></div>
+            + zip<input type="file" accept=".zip" data-agente="${esc(a.slug)}"></label></div>
+      </div>`;
+  };
+  q("#lienzo").innerHTML = `<div><span class="sub">the houses of ${esc(E.city_name)}</span>
+    <h1 style="margin-top:6px">${t("Who lives in {city}", { city: esc(E.city_name) })}</h1>
+    <p class="prosa" style="margin-top:8px"><b>A house is where an agent lives and works</b>,
+    and many houses are a city \u2014 it is the same thing the map draws, growing with what that
+    agent actually does. The card and the CLI call them <code class="mono">agents</code>;
+    here you see their houses.</p>
+    <p class="prosa">They belong to <b>this</b> city and only
+    to it: each one's workspace and its mounts live inside
+    <code class="mono">${esc(corto(E.datos))}/agents/</code>, so another city has its own
+    people even if you give them the same names. Every agent is whole here: the kind of work
+    it does, its role, everything it works on \u2014 any number of repositories and document
+    folders at once \u2014 the engine and effort that run it, and the skills in its own home.</p>
+    <p class="prosa">Every number is real: growth from what the agent actually produced,
+    skills from live read-only recognition. Changes persist to the card and apply the next
+    time the session opens.</p>
+    <button class="rpgAlta" type="button" id="altaAgente">${t("+ Build a house")}</button></div>
     <div class="fichasRPG">
       <div class="fichaRPG rpgSeat">
-        <div class="rpgCab">${oe(l.avatars?.seat)}
+        <div class="rpgCab">${caraRPG(E.avatars?.["seat"])}
           <div><h3>seat</h3>
           <span class="rpgTags"><span class="kindChip coordinator">chair</span>
-          <span class="rpgRol">${s(e?.role??"not configured")}</span></span></div>
+          <span class="rpgRol">${esc(mia?.role ?? "not configured")}</span></span></div>
         </div>
-        <div class="rpgFila"><span class="rpgDato">${s(l.address)}</span></div>
-        <div class="rpgFila"><span class="rpgDato">${s(e?.objetivo?.title??"No goal yet")}</span></div>
+        <div class="rpgFila"><span class="rpgDato">${esc(E.address)}</span></div>
+        <div class="rpgFila"><span class="rpgDato">${esc(mia?.objetivo?.title ?? "No goal yet")}</span></div>
       </div>
-      ${a.map(i).join("")}
-    </div>`;let o=async(t,r)=>{let n;try{n=await f("/api/agente",{method:"POST",body:JSON.stringify(t)})}catch(c){v(String(c),!0),w();return}if(!n.ok||!n.agent){v(n.error||"Could not save",!0),w();return}l.agents=(l.agents??[]).map(c=>c.slug===n.agent.slug?n.agent:c),l.avatars&&(l.avatars[n.agent.name]=n.agent.avatar),v(r),w()};b(".rpgSel").forEach(t=>{t.onchange=async()=>{let r=t.value;if(r==="__otro__"){let n=window.prompt("Model alias (resolved by the CLI at launch):","");if(n===null){w();return}r=n.trim().toLowerCase()}await o({agent:t.dataset.agente??"",[t.dataset.campo??"model"]:r},"Saved \u2014 applies next session")}}),b(".rpgDado").forEach(t=>{t.onclick=()=>o({agent:t.dataset.agente??"",avatar:Math.random().toString(36).slice(2,8)},"New look \u2014 same identity, everywhere, forever")}),b(".rpgTest").forEach(t=>{t.onclick=async()=>{t.disabled=!0;try{let r=await f("/api/motor",{method:"POST",body:JSON.stringify({agent:t.dataset.agente??""})});if(r.error){v(r.error,!0);return}let n=[r.version,r.detail].filter(Boolean).join(" \xB7 ");v(r.ok?`${r.binary} works \u2014 ${n}`:`${r.binary}: ${r.detail||"failed"}`,!r.ok)}catch(r){v(String(r),!0)}finally{t.disabled=!1}}}),b(".rpgQuitar").forEach(t=>{t.onclick=async()=>{let r=t.dataset.skill??"";if(!window.confirm(`Remove the skill ${r} from this agent's home?`))return;let n=await f("/api/skill",{method:"POST",body:JSON.stringify({agent:t.dataset.agente??"",remove:r})});if(!n.ok){v(n.error||"Could not remove",!0);return}v(`Skill ${r} removed`),M()}}),b(".rpgIns").forEach(t=>{t.onclick=()=>void Se(t.dataset.agente??"",t.dataset.file??"")}),b(".rpgSubir input").forEach(t=>{t.onchange=async()=>{let r=t.files?.[0];if(r){t.disabled=!0;try{let n=await Re(r),c=r.name.replace(/\.zip$/i,"").toLowerCase().replace(/[^a-z0-9-]+/g,"-").replace(/^-+|-+$/g,""),p=await f("/api/skill",{method:"POST",body:JSON.stringify({agent:t.dataset.agente??"",name:c,zip:n})});if(!p.ok){v(p.error||"Could not install",!0);return}v(`Skill ${p.skill} installed \u2014 the Claude runtime reads it next session`),M()}catch(n){v(String(n),!0)}finally{t.disabled=!1,t.value=""}}}})};function Re(e){return new Promise((a,i)=>{let o=new FileReader;o.onerror=()=>i(o.error),o.onload=()=>a(String(o.result).split(",",2)[1]??""),o.readAsDataURL(e)})}var O=null;async function Se(e,a){let i=await f(`/api/instrucciones?agent=${encodeURIComponent(e)}&file=${encodeURIComponent(a)}`);if(i.error){v(i.error,!0);return}O={agent:e,file:a},d("#edTitulo").textContent=`${e} \xB7 ${a}`,d("#edLector").textContent=`read by ${i.reader??"?"}${i.exists?"":" \xB7 new file"}`,d("#edRuta").textContent=i.home?`${i.home}/${a}`:"",d("#edTexto").value=i.content??"",d("#editorIns").hidden=!1,d("#edTexto").focus()}document.getElementById("edCerrar")?.addEventListener("click",()=>{d("#editorIns").hidden=!0,O=null});document.getElementById("edGuardar")?.addEventListener("click",async()=>{if(!O)return;let e=await f("/api/instrucciones",{method:"POST",body:JSON.stringify({...O,content:d("#edTexto").value})});if(!e.ok){v(e.error||"Could not save",!0);return}v("Saved"),d("#editorIns").hidden=!0,O=null});function Q(){b("[data-copia]").forEach(e=>{e.onclick=async()=>{try{await navigator.clipboard.writeText(e.dataset.copia??""),v("Copied")}catch{v("Could not copy \u2014 select it by hand",!0)}}}),b("[data-ir]").forEach(e=>{e.onclick=()=>{j=e.dataset.ir??"mapa",w()}})}function Ce(){let e=document.getElementById("app"),a=document.getElementById("liveResize"),i=document.getElementById("livePanel");if(!e||!a||!i)return;let o="hall-live-width",t=n=>{n===null?e.style.removeProperty("--live-ancho"):e.style.setProperty("--live-ancho",`${Math.round(n)}px`)},r=n=>Math.max(340,Math.min(n,Math.max(420,window.innerWidth*.6)));try{let n=Number(localStorage.getItem(o));n>0&&t(r(n))}catch{}a.addEventListener("pointerdown",n=>{n.preventDefault();let c=n.clientX,p=i.getBoundingClientRect().width;e.classList.add("liveResizing"),a.setPointerCapture(n.pointerId);let h=m=>t(r(p+(c-m.clientX))),y=()=>{e.classList.remove("liveResizing"),a.removeEventListener("pointermove",h),a.removeEventListener("pointerup",y),a.removeEventListener("pointercancel",y);try{localStorage.setItem(o,String(Math.round(i.getBoundingClientRect().width)))}catch{}};a.addEventListener("pointermove",h),a.addEventListener("pointerup",y),a.addEventListener("pointercancel",y)}),a.addEventListener("dblclick",()=>{t(null);try{localStorage.removeItem(o)}catch{}})}window.addEventListener("message",e=>{if(!ee(e.data))return;let a=document.querySelector("#cityMapFrame");if(!a||e.source!==a.contentWindow||e.origin!==new URL(a.src,location.href).origin)return;let i=e.data.view;i!=="committee"&&i!=="red"||(j=i,w())});Ce();M();
+      ${agentes.map(fichaDe).join("")}
+    </div>`;
+  const guardaAgente = async (carga, mensaje) => {
+    let r;
+    try {
+      r = await api("/api/agente", { method: "POST", body: JSON.stringify(carga) });
+    } catch (e) {
+      toast(String(e), true);
+      pinta();
+      return;
+    }
+    if (!r.ok || !r.agent) {
+      toast(r.error || "Could not save", true);
+      pinta();
+      return;
+    }
+    E.agents = (E.agents ?? []).map((x) => x.slug === r.agent.slug ? r.agent : x);
+    if (E.avatars) E.avatars[r.agent.name] = r.agent.avatar;
+    toast(mensaje);
+    pinta();
+  };
+  todos(".rpgSel").forEach((sel) => {
+    sel.onchange = async () => {
+      let valor = sel.value;
+      if (valor === "__otro__") {
+        const propio = window.prompt("Model alias (resolved by the CLI at launch):", "");
+        if (propio === null) {
+          pinta();
+          return;
+        }
+        valor = propio.trim().toLowerCase();
+      }
+      await guardaAgente(
+        { agent: sel.dataset.agente ?? "", [sel.dataset.campo ?? "model"]: valor },
+        "Saved \u2014 applies next session"
+      );
+    };
+  });
+  todos(".rpgDado").forEach((boton) => {
+    boton.onclick = () => guardaAgente(
+      { agent: boton.dataset.agente ?? "", avatar: Math.random().toString(36).slice(2, 8) },
+      "New look \u2014 same identity, everywhere, forever"
+    );
+  });
+  todos(".rpgTest").forEach((boton) => {
+    boton.onclick = async () => {
+      boton.disabled = true;
+      try {
+        const r = await api("/api/motor", {
+          method: "POST",
+          body: JSON.stringify({ agent: boton.dataset.agente ?? "" })
+        });
+        if (r.error) {
+          toast(r.error, true);
+          return;
+        }
+        const partes = [r.version, r.detail].filter(Boolean).join(" \xB7 ");
+        toast(
+          r.ok ? `${r.binary} works \u2014 ${partes}` : `${r.binary}: ${r.detail || "failed"}`,
+          !r.ok
+        );
+      } catch (e) {
+        toast(String(e), true);
+      } finally {
+        boton.disabled = false;
+      }
+    };
+  });
+  todos(".rpgQuitar").forEach((boton) => {
+    boton.onclick = async () => {
+      const nombre = boton.dataset.skill ?? "";
+      if (!window.confirm(`Remove the skill ${nombre} from this agent's home?`)) return;
+      const r = await api("/api/skill", {
+        method: "POST",
+        body: JSON.stringify({ agent: boton.dataset.agente ?? "", remove: nombre })
+      });
+      if (!r.ok) {
+        toast(r.error || "Could not remove", true);
+        return;
+      }
+      toast(`Skill ${nombre} removed`);
+      void refresca();
+    };
+  });
+  const alta = document.getElementById("altaAgente");
+  if (alta)
+    alta.onclick = async () => {
+      const nombre = window.prompt("The agent's name:", "");
+      if (nombre === null || !nombre.trim()) return;
+      const clase = window.prompt("What kind of work does it do? code, knowledge or coordinator", "code") ?? "";
+      if (!clase.trim()) return;
+      const rol = window.prompt("Its role (its specialty, not authority):", "blank") ?? "";
+      if (!rol.trim()) return;
+      try {
+        const r = await api("/api/agentes", {
+          method: "POST",
+          body: JSON.stringify({ name: nombre.trim(), kind: clase.trim(), role: rol.trim() })
+        });
+        if (!r.ok) {
+          toast(r.error || "Could not add the agent", true);
+          return;
+        }
+        toast(`${nombre.trim()} has a house now \u2014 give it something to work on`);
+        void refresca();
+      } catch (e) {
+        toast(String(e), true);
+      }
+    };
+  const montaje = async (carga, hecho) => {
+    try {
+      const r = await api("/api/montaje", {
+        method: "POST",
+        body: JSON.stringify(carga)
+      });
+      if (!r.ok) {
+        toast(r.error || "Could not change the mounts", true);
+        return;
+      }
+      toast(hecho);
+      void refresca();
+    } catch (e) {
+      toast(String(e), true);
+    }
+  };
+  todos(".rpgMonta").forEach((boton) => {
+    boton.onclick = () => {
+      const ruta = window.prompt("A repo, a worktree or a folder of documents:", "~/");
+      if (ruta === null || !ruta.trim()) return;
+      void montaje({ agent: boton.dataset.agente ?? "", add: ruta.trim() }, "Mounted");
+    };
+  });
+  todos(".rpgDesmonta").forEach((boton) => {
+    boton.onclick = () => {
+      const etiqueta = boton.dataset.mount ?? "";
+      if (!window.confirm(`Stop this agent working on ${etiqueta}?`)) return;
+      void montaje(
+        { agent: boton.dataset.agente ?? "", remove: etiqueta },
+        `${etiqueta} unmounted \u2014 the folder itself is untouched`
+      );
+    };
+  });
+  todos(".rpgIns").forEach((boton) => {
+    boton.onclick = () => void abreInstrucciones(boton.dataset.agente ?? "", boton.dataset.file ?? "");
+  });
+  todos(".rpgSubir input").forEach((entrada) => {
+    entrada.onchange = async () => {
+      const archivo = entrada.files?.[0];
+      if (!archivo) return;
+      entrada.disabled = true;
+      try {
+        const zip = await aBase64(archivo);
+        const nombre = archivo.name.replace(/\.zip$/i, "").toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "");
+        const r = await api("/api/skill", {
+          method: "POST",
+          body: JSON.stringify({ agent: entrada.dataset.agente ?? "", name: nombre, zip })
+        });
+        if (!r.ok) {
+          toast(r.error || "Could not install", true);
+          return;
+        }
+        toast(`Skill ${r.skill} installed \u2014 the Claude runtime reads it next session`);
+        void refresca();
+      } catch (e) {
+        toast(String(e), true);
+      } finally {
+        entrada.disabled = false;
+        entrada.value = "";
+      }
+    };
+  });
+};
+function aBase64(archivo) {
+  return new Promise((listo, falla) => {
+    const lector = new FileReader();
+    lector.onerror = () => falla(lector.error);
+    lector.onload = () => listo(String(lector.result).split(",", 2)[1] ?? "");
+    lector.readAsDataURL(archivo);
+  });
+}
+var editorAbierto = null;
+async function abreInstrucciones(agente, archivo) {
+  const r = await api(`/api/instrucciones?agent=${encodeURIComponent(agente)}&file=${encodeURIComponent(archivo)}`);
+  if (r.error) {
+    toast(r.error, true);
+    return;
+  }
+  editorAbierto = { agent: agente, file: archivo };
+  q("#edTitulo").textContent = `${agente} \xB7 ${archivo}`;
+  q("#edLector").textContent = `read by ${r.reader ?? "?"}${r.exists ? "" : " \xB7 new file"}`;
+  q("#edRuta").textContent = r.home ? `${r.home}/${archivo}` : "";
+  q("#edTexto").value = r.content ?? "";
+  q("#editorIns").hidden = false;
+  q("#edTexto").focus();
+}
+document.getElementById("edCerrar")?.addEventListener("click", () => {
+  q("#editorIns").hidden = true;
+  editorAbierto = null;
+});
+document.getElementById("edGuardar")?.addEventListener("click", async () => {
+  if (!editorAbierto) return;
+  const r = await api("/api/instrucciones", {
+    method: "POST",
+    body: JSON.stringify({ ...editorAbierto, content: q("#edTexto").value })
+  });
+  if (!r.ok) {
+    toast(r.error || "Could not save", true);
+    return;
+  }
+  toast("Saved");
+  q("#editorIns").hidden = true;
+  editorAbierto = null;
+});
+function enlaza() {
+  todos("[data-copia]").forEach((b) => {
+    b.onclick = async () => {
+      try {
+        await navigator.clipboard.writeText(b.dataset.copia ?? "");
+        toast("Copied");
+      } catch {
+        toast("Could not copy \u2014 select it by hand", true);
+      }
+    };
+  });
+  todos("[data-ir]").forEach((b) => {
+    b.onclick = () => {
+      SECCION = b.dataset.ir ?? "mapa";
+      pinta();
+    };
+  });
+}
+function arrastreDelRail() {
+  const app = document.getElementById("app");
+  const asa = document.getElementById("liveResize");
+  const rail2 = document.getElementById("livePanel");
+  if (!app || !asa || !rail2) return;
+  const CLAVE = "hall-live-width";
+  const aplica = (px) => {
+    if (px === null) app.style.removeProperty("--live-ancho");
+    else app.style.setProperty("--live-ancho", `${Math.round(px)}px`);
+  };
+  const tope = (px) => Math.max(340, Math.min(px, Math.max(420, window.innerWidth * 0.6)));
+  try {
+    const guardado = Number(localStorage.getItem(CLAVE));
+    if (guardado > 0) aplica(tope(guardado));
+  } catch {
+  }
+  asa.addEventListener("pointerdown", (e) => {
+    e.preventDefault();
+    const desdeX = e.clientX;
+    const desdeAncho = rail2.getBoundingClientRect().width;
+    app.classList.add("liveResizing");
+    asa.setPointerCapture(e.pointerId);
+    const mueve = (ev) => aplica(tope(desdeAncho + (desdeX - ev.clientX)));
+    const suelta = () => {
+      app.classList.remove("liveResizing");
+      asa.removeEventListener("pointermove", mueve);
+      asa.removeEventListener("pointerup", suelta);
+      asa.removeEventListener("pointercancel", suelta);
+      try {
+        localStorage.setItem(CLAVE, String(Math.round(rail2.getBoundingClientRect().width)));
+      } catch {
+      }
+    };
+    asa.addEventListener("pointermove", mueve);
+    asa.addEventListener("pointerup", suelta);
+    asa.addEventListener("pointercancel", suelta);
+  });
+  asa.addEventListener("dblclick", () => {
+    aplica(null);
+    try {
+      localStorage.removeItem(CLAVE);
+    } catch {
+    }
+  });
+}
+window.addEventListener("message", (message) => {
+  if (!isMapNavMessage(message.data)) return;
+  const frame = document.querySelector("#cityMapFrame");
+  if (!frame || message.source !== frame.contentWindow) return;
+  if (message.origin !== new URL(frame.src, location.href).origin) return;
+  const view = message.data.view;
+  if (view !== "committee" && view !== "red") return;
+  SECCION = view;
+  pinta();
+});
+function temaActual() {
+  const elegido = document.documentElement.getAttribute("data-tema");
+  if (elegido) return elegido === "claro" ? "light" : "dark";
+  return "light";
+}
+function tema() {
+  const boton = document.getElementById("temaBoton");
+  const guardado = (() => {
+    try {
+      return localStorage.getItem("hall-tema") ?? "";
+    } catch {
+      return "";
+    }
+  })();
+  const oscuroDelSistema = false;
+  const pon = (elegido) => {
+    const raiz = document.documentElement;
+    if (elegido) raiz.setAttribute("data-tema", elegido);
+    else raiz.removeAttribute("data-tema");
+    const claro = elegido ? elegido === "claro" : !oscuroDelSistema;
+    if (boton) boton.textContent = claro ? "\u263E Night" : "\u2600 Day";
+    const frame = document.querySelector("#cityMapFrame");
+    frame?.contentWindow?.postMessage(
+      { type: "agents-city-map-theme/1", theme: claro ? "light" : "dark" },
+      new URL(frame.src, location.href).origin
+    );
+  };
+  pon(guardado);
+  if (boton)
+    boton.onclick = () => {
+      const claroAhora = document.documentElement.getAttribute("data-tema") ? document.documentElement.getAttribute("data-tema") === "claro" : !oscuroDelSistema;
+      const elegido = claroAhora ? "oscuro" : "claro";
+      try {
+        localStorage.setItem("hall-tema", elegido);
+      } catch {
+      }
+      pon(elegido);
+    };
+}
+function interruptorDeIdioma() {
+  const boton = document.getElementById("idiomaBoton");
+  if (!boton) return;
+  const pon = () => {
+    document.documentElement.lang = idioma();
+    boton.textContent = idioma() === "es" ? "EN" : "ES";
+    todos("[data-i18n]").forEach((el) => {
+      if (!el.dataset.en) el.dataset.en = (el.textContent ?? "").trim();
+      el.textContent = t(el.dataset.en);
+    });
+  };
+  pon();
+  boton.onclick = () => {
+    ponIdioma(idioma() === "es" ? "en" : "es");
+    pon();
+    void refresca();
+  };
+}
+arrastreDelRail();
+interruptorDeIdioma();
+tema();
+void refresca();