agents-city 0.1.0

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

@@ -0,0 +1,1363 @@
+// 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 t = q("#toast");
+  t.textContent = msg;
+  t.className = "ver" + (mal ? " mal" : "");
+  clearTimeout(toastTimer);
+  toastTimer = window.setTimeout(() => {
+    t.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 & houses"],
+  ["red", "Roads"],
+  ["committee", "Committee"],
+  ["gente", "Agents & skills"]
+];
+async function refresca() {
+  E = await api("/api/estado");
+  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">${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 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() {
+  q("#rail").innerHTML = SECCIONES.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>${et}</span>${n ? `<span class="n">${n}</span>` : ""}</li>`;
+  }).join("");
+  todos("#rail li").forEach((li) => {
+    li.onclick = () => {
+      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 = {};
+VISTAS.resumen = () => {
+  const mia = E.tarjetas.find((t) => t.user === E.yo);
+  const sinUnidad = E.parcelas.filter((p) => p.unidad === "none" || p.unidad === "mine").length;
+  const tareas = [
+    {
+      ok: !!mia,
+      txt: mia ? `Your card exists \u2014 you are <b>${esc(mia.agent)}</b>` : "Take your seat: role, folders, one goal",
+      ir: "puesto"
+    },
+    {
+      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 ? "No houses yet \u2014 pick your folders and they appear" : 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 sesionArriba = E.tmux.includes(E.sesion);
+  q("#lienzo").innerHTML = `
+    <div><span class="sub">your city</span>
+      <h1 style="margin-top:6px">${esc(E.city_name)}</h1>
+      <p class="de mono" style="margin-top:5px">${esc(E.address)}</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(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 ${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">${tareas.map(
+    (t) => `
+        <div class="tarea ${t.ok ? "hecha" : ""}">${t.txt}
+          ${t.ok ? "" : `<button class="bt mini ir" data-ir="${t.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>${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>${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>`;
+    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;
+  }
+  q("#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>`;
+  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((t) => t.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">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>`;
+  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="${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="${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="${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="${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="${esc(o.baseline)}"></div>
+      <div class="campo"><label>Where it has to get to</label>
+        <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="${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
+      repos, give every house its district, and the map can say
+      \u201Cthis change touches banking\u201D instead of \u201Cthis change touches src/lib\u201D.</p></div>
+
+      <div><span class="sub">districts</span>
+        <div class="tabla" id="unidades" style="margin-top:9px"></div>
+        <div style="display:flex;gap:9px;margin-top:9px">
+          <input type="text" id="nuevaU" placeholder="another district\u2026" style="flex:1">
+          <button class="bt" id="masU">Add</button></div></div>
+
+      <div><span class="sub">houses</span><div id="parcelas" style="margin-top:9px"></div></div>
+
+      <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>`;
+    q("#unidades").innerHTML = unidades.map(
+      (u, i) => `
+      <div class="tr">
+        <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="${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="${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>
+            ${(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">${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">${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>${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
+    independent verification. This view is read-only; the vendor-neutral CLI
+    drives the protocol.</p></div>
+    <div class="orden"><span class="et2">start</span>
+      <code>agents-city committee schema open</code>
+      <button class="bt mini" data-copia="agents-city committee schema open">copy</button>
+    </div>
+    <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 nivelDeMotor(model) {
+  const alias = model.toLowerCase();
+  if (!alias) return { ancho: 0.5, texto: "default", defecto: true };
+  for (const [clave, ancho] of [
+    ["fable", 1],
+    ["opus", 0.8],
+    ["sonnet", 0.55],
+    ["haiku", 0.35]
+  ]) {
+    if (alias.includes(clave)) return { ancho, texto: alias, defecto: false };
+  }
+  return { ancho: 0.6, texto: alias, defecto: false };
+}
+var NIVEL_ESFUERZO = { low: 1, medium: 2, high: 3, xhigh: 4, max: 5 };
+var MODELOS = ["haiku", "sonnet", "opus", "fable"];
+function opciones(valores, actual) {
+  return valores.concat(actual && !valores.includes(actual) ? [actual] : []).map(
+    (v) => `<option value="${esc(v)}"${v === actual ? " selected" : ""}>${esc(v || "default")}</option>`
+  ).join("");
+}
+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((t) => t.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 = opciones([""].concat(MODELOS), a.model) + '<option value="__otro__">custom\u2026</option>';
+    const opcionesEsfuerzo = opciones([""].concat(Object.keys(NIVEL_ESFUERZO)), a.effort);
+    const opcionesRuntime = opciones(["claude", "codex", "opencode", "kimi"], a.runtime);
+    const montajes = a.mounts ?? [];
+    return `
+      <div class="fichaRPG">
+        <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="${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="${esc(a.slug)}"
+              data-file="CLAUDE.md" title="Instructions the Claude runtime reads">CLAUDE.md</button>
+            <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>
+          ${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>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>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(
+      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="${esc(a.slug)}" data-campo="runtime">
+            ${opcionesRuntime}</select></div>
+        <div class="rpgSkills"><label>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>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>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="${esc(a.slug)}"></label></div>
+      </div>`;
+  };
+  q("#lienzo").innerHTML = `<div><span class="sub">agents &amp; skills</span>
+    <h1 style="margin-top:6px">One seat, the agents behind it</h1>
+    <p class="prosa" style="margin-top:8px">A city is its agents, and each one 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. 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">+ Add an agent</button></div>
+    <div class="fichasRPG">
+      <div class="fichaRPG rpgSeat">
+        <div class="rpgCab">${caraRPG(E.avatars?.["seat"])}
+          <div><h3>seat</h3>
+          <span class="rpgTags"><span class="kindChip coordinator">chair</span>
+          <span class="rpgRol">${esc(mia?.role ?? "not configured")}</span></span></div>
+        </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>
+      ${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()} joined this city \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 window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function tema() {
+  const boton = document.getElementById("temaBoton");
+  const guardado = (() => {
+    try {
+      return localStorage.getItem("hall-tema") ?? "";
+    } catch {
+      return "";
+    }
+  })();
+  const claroDelSistema = window.matchMedia?.("(prefers-color-scheme: light)").matches ?? 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" : claroDelSistema;
+    if (boton) boton.textContent = claro ? "\u2600 Day" : "\u263E Night";
+    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" : claroDelSistema;
+      const elegido = claroAhora ? "oscuro" : "claro";
+      try {
+        localStorage.setItem("hall-tema", elegido);
+      } catch {
+      }
+      pon(elegido);
+    };
+}
+arrastreDelRail();
+tema();
+void refresca();