agents-city 0.3.0 → 0.4.0

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

@@ -180,6 +180,194 @@ anota({
   "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"
 });
+anota({
+  // ── the app's own dialogs ─────────────────────────────────────────────────
+  Yes: "S\xED",
+  "What is it called?": "\xBFC\xF3mo se llama?",
+  "home, clients, the lab \u2014 whatever you would say out loud": "casa, clientes, el laboratorio \u2014 como lo dir\xEDas en voz alta",
+  "A city is a place with its own seat, its own houses and its own map. Yours stay where they are.": "Una ciudad es un sitio con su propio asiento, sus casas y su mapa. Las que ya tienes se quedan donde est\xE1n.",
+  "Start over {city}?": "\xBFEmpezar {city} de cero?",
+  "Start over": "Empezar de cero",
+  "You lose:": "Pierdes:",
+  "You keep:": "Conservas:",
+  "Right now that is {agents} house(s), {roads} road(s) and {acts} committee act(s).": "Ahora mismo eso son {agents} casa(s), {roads} carretera(s) y {acts} acta(s) de comit\xE9.",
+  "Type the city\u2019s name to confirm": "Escribe el nombre de la ciudad para confirmar",
+  "Archive {city}?": "\xBFArchivar {city}?",
+  "Archive it": "Archivarla",
+  "It moves into .backups. Nothing is deleted, and you can put it back by hand.": "Se mueve a .backups. No se borra nada, y puedes devolverla a mano.",
+  "Which engine?": "\xBFQu\xE9 motor?",
+  "Model alias": "Alias del modelo",
+  "An alias the CLI resolves when the window opens. Anything it accepts works here.": "Un alias que la CLI resuelve al abrir la ventana. Vale cualquiera que ella acepte.",
+  "Use it": "Usarlo",
+  "Remove the skill {skill}?": "\xBFQuitar la skill {skill}?",
+  "Remove it": "Quitarla",
+  "It is deleted from this agent\u2019s own home. Nothing outside that folder is touched.": "Se borra de la casa de este agente. Nada fuera de esa carpeta se toca.",
+  "Build a house": "Construir una casa",
+  "One worker, its own window, its own corner of your disk. Everything here can be changed afterwards.": "Un trabajador, su ventana y su rinc\xF3n de tu disco. Todo esto se puede cambiar despu\xE9s.",
+  "{name} has a house now": "{name} ya tiene casa",
+  "{name} joined the city": "{name} se ha mudado a la ciudad",
+  "What else does it work on?": "\xBFSobre qu\xE9 m\xE1s trabaja?",
+  "A repository, a worktree, or a folder of documents. It is linked, never copied.": "Un repositorio, un worktree o una carpeta de documentos. Se enlaza, nunca se copia.",
+  "Mount it": "Montarlo",
+  Mounted: "Montado",
+  "Stop this agent working on {what}?": "\xBFQue este agente deje de trabajar sobre {what}?",
+  "Unmount it": "Desmontarlo",
+  "The link goes. The folder it points at stays exactly where it is.": "Se va el enlace. La carpeta a la que apunta se queda exactamente donde est\xE1.",
+  // ── what the form says when something is missing ──────────────────────────
+  "Give it a name \u2014 it is how you will call it in its window": "Ponle un nombre \u2014 es como la llamar\xE1s en su ventana",
+  "Could not add that agent": "No se pudo a\xF1adir ese agente",
+  "could not mount": "no se pudo montar",
+  "Could not set its engine": "No se pudo fijar su motor",
+  "{n} mount": "{n} montaje",
+  "{n} mounts": "{n} montajes"
+});
+anota({
+  // ── walking the disk ──────────────────────────────────────────────────────
+  "Walk your disk and pick whatever you like: a repository, a worktree, a folder of documents, one exact file. As many as you want. Nothing is copied \u2014 each one is linked into this agent\u2019s own home.": "Recorre tu disco y coge lo que quieras: un repositorio, un worktree, una carpeta de documentos, un fichero exacto. Tantos como quieras. No se copia nada \u2014 cada uno se enlaza dentro de la casa de este agente.",
+  "Working on": "Trabaja sobre",
+  "Nothing chosen yet \u2014 an agent with no mounts is fine too.": "A\xFAn no has cogido nada \u2014 un agente sin montajes tambi\xE9n vale.",
+  "Add this folder": "A\xF1adir esta carpeta",
+  "Add this": "A\xF1adir esto",
+  "Already chosen": "Ya est\xE1 cogido",
+  "Up one folder": "Subir una carpeta",
+  "reading that folder": "leyendo esa carpeta",
+  "This folder is empty.": "Esta carpeta est\xE1 vac\xEDa.",
+  "Only the first 2000 shown.": "S\xF3lo se muestran los 2000 primeros.",
+  "A repository, a worktree, a folder of documents, one exact file. It is linked, never copied.": "Un repositorio, un worktree, una carpeta de documentos, un fichero exacto. Se enlaza, nunca se copia."
+});
+anota({
+  // ── the demo shelf ────────────────────────────────────────────────────────
+  Demos: "Demos",
+  demos: "demos",
+  "See a committee happen": "Mira un comit\xE9 de verdad",
+  "reading the demo shelf": "leyendo la estanter\xEDa de demos",
+  "A real question, answered by a city of agents that never talk to each other behind the chair\u2019s back. Pick the field closest to yours \u2014 the machine is the same one in all three; only the work changes.": "Una pregunta de verdad, respondida por una ciudad de agentes que nunca hablan entre ellos a espaldas de quien preside. Elige el campo m\xE1s cercano al tuyo \u2014 la maquinaria es la misma en los tres; lo que cambia es el trabajo.",
+  "{n} turns": "{n} turnos",
+  "These are recordings of real runs over the real bus, played back here. To run one live in a terminal: agents-city demo --domain software.": "Son grabaciones de ejecuciones reales sobre el bus real, reproducidas aqu\xED. Para lanzar una en vivo desde terminal: agents-city demo --domain software.",
+  "All demos": "Todas las demos",
+  Play: "Reproducir",
+  Pause: "Pausa",
+  Replay: "Repetir",
+  "{done} of {total}": "{done} de {total}",
+  "Press play. The turns arrive one by one, exactly as they did.": "Dale a reproducir. Los turnos van llegando uno a uno, tal cual llegaron.",
+  "A recording of a real run: these events came off the real bus, from the real committee. Nothing here is being decided now.": "Una grabaci\xF3n de una ejecuci\xF3n real: estos eventos salieron del bus real, del comit\xE9 real. Aqu\xED no se est\xE1 decidiendo nada ahora mismo.",
+  "Nothing recorded here": "Aqu\xED no hay nada grabado",
+  "This install has no demo recordings. Make them with demo/graba.py, or run the full thing from a terminal with agents-city demo.": "Esta instalaci\xF3n no tiene grabaciones. Cr\xE9alas con demo/graba.py, o lanza la cosa entera desde terminal con agents-city demo."
+});
+
+// city/web/src/explorador.ts
+var MARCA = { repo: "git", worktree: "wt" };
+var Explorador = class {
+  constructor(p, elige, yaElegidas) {
+    this.p = p;
+    this.elige = elige;
+    this.yaElegidas = yaElegidas;
+  }
+  aqui = "";
+  listado = null;
+  cargando = false;
+  fallo = "";
+  host = null;
+  /** Render into `host` and wire it. Safe to call again: that is the repaint. */
+  monta(host) {
+    this.host = host;
+    if (!this.listado && !this.cargando) void this.ve(this.aqui || "~");
+    host.innerHTML = this.html();
+    this.enlaza(host);
+  }
+  repinta() {
+    if (this.host) {
+      this.host.innerHTML = this.html();
+      this.enlaza(this.host);
+    }
+  }
+  /** Walk to a folder. An unreadable one is said out loud, not swallowed. */
+  async ve(ruta) {
+    this.cargando = true;
+    this.fallo = "";
+    this.repinta();
+    try {
+      const r = await this.p.api("/api/carpeta?path=" + encodeURIComponent(ruta));
+      if (r.error) this.fallo = r.error;
+      else {
+        this.listado = r;
+        this.aqui = r.ruta;
+      }
+    } catch (e) {
+      this.fallo = String(e);
+    } finally {
+      this.cargando = false;
+      this.repinta();
+    }
+  }
+  /** The path being looked at right now — what "add this folder" means. */
+  get carpeta() {
+    return this.aqui;
+  }
+  migas() {
+    const esc3 = this.p.esc;
+    const l = this.listado;
+    if (!l) return "";
+    const partes = l.ruta.split("/").filter(Boolean);
+    let acumulado = "";
+    const trozos = partes.map((parte) => {
+      acumulado += "/" + parte;
+      return `<button type="button" class="expMiga" data-exp="ve" data-ruta="${esc3(
+        acumulado
+      )}">${esc3(parte)}</button>`;
+    });
+    return `<button type="button" class="expMiga" data-exp="ve" data-ruta="/">/</button>` + trozos.join("<i>/</i>");
+  }
+  html() {
+    const esc3 = this.p.esc;
+    const l = this.listado;
+    const elegidas = new Set(this.yaElegidas());
+    const filas = (l?.entradas ?? []).map((e) => {
+      const puesta = elegidas.has(e.ruta);
+      return `<div class="expFila ${e.dir ? "dir" : "fich"} ${puesta ? "puesta" : ""}">
+        <button type="button" class="expNombre" ${e.dir ? `data-exp="ve" data-ruta="${esc3(e.ruta)}"` : "disabled"} title="${esc3(e.ruta)}">
+          <i class="expIcono">${e.dir ? "\u25B8" : "\xB7"}</i>${esc3(e.nombre)}${e.git ? `<em class="expMarca">${esc3(MARCA[e.git] ?? e.git)}</em>` : ""}${e.enlace ? '<em class="expMarca">link</em>' : ""}</button>
+        <button type="button" class="expMas" data-exp="toma" data-ruta="${esc3(e.ruta)}"
+          data-dir="${e.dir ? "1" : ""}"
+          title="${esc3(puesta ? t("Already chosen") : t("Add this"))}">${puesta ? "\u2713" : "+"}</button>
+      </div>`;
+    }).join("");
+    const atajos = (l?.atajos ?? []).map(
+      (a) => `<button type="button" class="expAtajo ${a.ruta === l?.ruta ? "aqui" : ""}" data-exp="ve" data-ruta="${esc3(a.ruta)}">${esc3(a.nombre)}</button>`
+    ).join("");
+    return `
+      <div class="exp">
+        <div class="expAtajos">${atajos}</div>
+        <div class="expBarra">
+          <button type="button" class="expSubir" data-exp="ve"
+            data-ruta="${esc3(l?.arriba ?? "~")}" ${l?.arriba ? "" : "disabled"}
+            title="${t("Up one folder")}">\u2191</button>
+          <div class="expMigas">${this.migas()}</div>
+        </div>
+        ${this.fallo ? `<p class="pista malo">${esc3(this.fallo)}</p>` : this.cargando && !l ? `<p class="cargando">${t("reading that folder")}</p>` : filas ? `<div class="expLista">${filas}</div>` : `<p class="pista">${t("This folder is empty.")}</p>`}
+        ${l?.recortada ? `<p class="pista">${t("Only the first 2000 shown.")}</p>` : ""}
+        <button type="button" class="bt bvMini expTomaAqui" data-exp="toma"
+          data-ruta="${esc3(l?.ruta ?? "")}" data-dir="1" ${l ? "" : "disabled"}>${t(
+      "Add this folder"
+    )}</button>
+      </div>`;
+  }
+  enlaza(raiz) {
+    raiz.querySelectorAll("[data-exp]").forEach((el) => {
+      el.onclick = (evento) => {
+        evento.preventDefault();
+        evento.stopPropagation();
+        const ruta = el.dataset.ruta ?? "";
+        if (!ruta) return;
+        if (el.dataset.exp === "ve") void this.ve(ruta);
+        else {
+          this.elige(ruta, el.dataset.dir === "1");
+          this.repinta();
+        }
+      };
+    });
+  }
+};
 
 // city/web/src/motores.ts
 var RUNTIMES = ["claude", "codex", "opencode", "kimi"];
@@ -192,9 +380,9 @@ var NIVEL_ESFUERZO = {
   max: 5
 };
 var ESFUERZOS = Object.keys(NIVEL_ESFUERZO);
-function opciones(valores, actual, esc2, porDefecto = "default") {
+function opciones(valores, actual, esc3, porDefecto = "default") {
   return valores.concat(actual && !valores.includes(actual) ? [actual] : []).map(
-    (v) => `<option value="${esc2(v)}"${v === actual ? " selected" : ""}>${esc2(v || porDefecto)}</option>`
+    (v) => `<option value="${esc3(v)}"${v === actual ? " selected" : ""}>${esc3(v || porDefecto)}</option>`
   ).join("");
 }
 function nivelDeMotor(model) {
@@ -211,7 +399,7 @@ function nivelDeMotor(model) {
   return { ancho: 0.6, texto: alias, defecto: false };
 }
 
-// city/web/src/bienvenida.ts
+// city/web/src/casa.ts
 var CLASES = [
   [
     "code",
@@ -225,7 +413,493 @@ var CLASES = [
   ],
   ["coordinator", "It coordinates", "Its house grows with the decisions it records."]
 ];
-var CLASE_CORTA = { repo: "git", worktree: "wt", docs: "doc" };
+var FormularioDeCasa = class {
+  constructor(p, roles = []) {
+    this.p = p;
+    this.roles = roles;
+  }
+  datos = {
+    nombre: "",
+    clase: "code",
+    rol: "blank",
+    montajes: [],
+    runtime: "",
+    modelo: "",
+    esfuerzo: ""
+  };
+  roles = [];
+  host = null;
+  /** Render into `host` and wire it. Safe to call again: that is the repaint. */
+  monta(host) {
+    this.host = host;
+    void this.aseguraRoles();
+    host.innerHTML = this.html();
+    this.enlaza(host);
+    const hueco = host.querySelector(".casaExp");
+    if (hueco) this.explora().monta(hueco);
+  }
+  repinta() {
+    if (this.host) this.monta(this.host);
+  }
+  async aseguraRoles() {
+    if (this.roles.length) return;
+    try {
+      const r = await this.p.api("/api/roles?scope=agent");
+      this.roles = r.roles ?? [];
+      this.repinta();
+    } catch {
+      this.roles = [];
+    }
+  }
+  /** The folder picker, built once so walking survives a repaint. */
+  explorador = null;
+  explora() {
+    if (!this.explorador)
+      this.explorador = new Explorador(
+        this.p,
+        (ruta) => {
+          const ya = this.datos.montajes.indexOf(ruta);
+          if (ya >= 0) this.datos.montajes.splice(ya, 1);
+          else this.datos.montajes.push(ruta);
+          this.repinta();
+        },
+        () => this.datos.montajes
+      );
+    return this.explorador;
+  }
+  html() {
+    const a = this.datos;
+    const esc3 = this.p.esc;
+    const clases = CLASES.map(
+      ([id, titulo, porque]) => `
+      <button type="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.roles.map(
+      (r) => `<option value="${esc3(r.id)}"${r.id === a.rol ? " selected" : ""}>${esc3(r.name)}</option>`
+    ).join("");
+    const esClaude = (a.runtime || "claude") === "claude";
+    return `
+      <div class="campo"><label>${t("What do you call it?")}</label>
+        <input type="text" id="bvNombre" value="${esc3(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, esc3, "claude")}</select></div>
+        <div class="campo"><label>${t("engine")}</label>
+          <select id="bvModelo" ${esClaude ? "" : "disabled"}>${opciones(
+      [""].concat(MODELOS),
+      a.modelo,
+      esc3,
+      t("default")
+    )}</select></div>
+        <div class="campo"><label>${t("effort")}</label>
+          <select id="bvEsfuerzo" ${esClaude ? "" : "disabled"}>${opciones(
+      [""].concat(ESFUERZOS),
+      a.esfuerzo,
+      esc3,
+      t("default")
+    )}</select></div>
+      </div>
+      <label class="bvEtiqueta">${t("What does it work on?")}</label>
+      <p class="pista">${t(`Walk your disk and pick whatever you like: a repository, a
+      worktree, a folder of documents, one exact file. As many as you want. Nothing is
+      copied \u2014 each one is linked into this agent's own home.`)}</p>
+      <div class="casaExp"></div>
+      ${a.montajes.length ? `<div class="expElegidas"><label class="bvEtiqueta">${t("Working on")}</label>
+             ${a.montajes.map(
+      (m) => `<button type="button" class="bvChip elegida" data-bv="quita"
+                   data-ruta="${esc3(m)}" title="${esc3(m)}">${esc3(
+        m.split("/").pop() || m
+      )}<i class="expQuita">\u2715</i></button>`
+    ).join("")}</div>` : `<p class="pista">${t("Nothing chosen yet \u2014 an agent with no mounts is fine too.")}</p>`}`;
+  }
+  enlaza(raiz) {
+    raiz.querySelectorAll("[data-bv]").forEach((el) => {
+      el.onclick = (evento) => {
+        evento.preventDefault();
+        const que = el.dataset.bv;
+        this.recoge(raiz);
+        if (que === "clase") this.datos.clase = el.dataset.id ?? "code";
+        else if (que === "quita") {
+          const ya = this.datos.montajes.indexOf(el.dataset.ruta ?? "");
+          if (ya >= 0) this.datos.montajes.splice(ya, 1);
+        }
+        this.repinta();
+      };
+    });
+    raiz.querySelector("#bvRuntime")?.addEventListener("change", () => {
+      this.recoge(raiz);
+      this.repinta();
+    });
+  }
+  /** Keep what is typed when a click forces a repaint. */
+  recoge(raiz) {
+    const nombre = raiz.querySelector("#bvNombre");
+    const rol = raiz.querySelector("#bvRol");
+    if (nombre) this.datos.nombre = nombre.value;
+    if (rol) this.datos.rol = rol.value;
+    for (const [id, campo] of [
+      ["#bvRuntime", "runtime"],
+      ["#bvModelo", "modelo"],
+      ["#bvEsfuerzo", "esfuerzo"]
+    ]) {
+      const sel = raiz.querySelector(id);
+      if (sel) this.datos[campo] = sel.value;
+    }
+  }
+  /**
+   * Build it. Returns the new agent's slug, or null when nothing was written.
+   *
+   * Three endpoints by necessity, not by sloppiness: `/api/agentes` owns who is
+   * on the roster, `/api/montaje` owns what an agent can reach, and
+   * `/api/agente` owns how one is run. None of them is allowed to learn
+   * another's job just to save a round trip.
+   */
+  async guarda() {
+    if (this.host) this.recoge(this.host);
+    const a = this.datos;
+    const nombre = a.nombre.trim();
+    if (!nombre) {
+      this.p.aviso(t("Give it a name \u2014 it is how you will call it in its window"), true);
+      return null;
+    }
+    try {
+      const r = await this.p.api("/api/agentes", {
+        method: "POST",
+        body: JSON.stringify({ name: nombre, kind: a.clase, role: a.rol })
+      });
+      if (!r.ok || !r.agent) {
+        this.p.aviso(r.error || t("Could not add that agent"), true);
+        return null;
+      }
+      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 ?? t("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 ?? t("Could not set its engine"), true);
+      }
+      return { slug: r.agent, nombre };
+    } catch (e) {
+      this.p.aviso(String(e), true);
+      return null;
+    }
+  }
+  /** How this house reads on a list, once it is built. */
+  resumen() {
+    const a = this.datos;
+    return a.montajes.length ? plural(a.montajes.length, "{n} mount", "{n} mounts") : t("nothing mounted yet");
+  }
+};
+
+// city/web/src/dialogo.ts
+function esc(s) {
+  return String(s).replace(
+    /[&<>"']/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
+  );
+}
+var abierto = null;
+function pregunta(p) {
+  abierto?.remove();
+  const campos = p.campos ?? [];
+  const fondo = document.createElement("div");
+  fondo.className = "dlgFondo";
+  fondo.innerHTML = `
+    <div class="dlg" role="dialog" aria-modal="true" aria-label="${esc(p.titulo)}"
+      style="${p.ancho ? `max-width:${p.ancho}px` : ""}">
+      <h2>${esc(p.titulo)}</h2>
+      ${(p.cuerpo ?? []).map((l) => `<p class="dlgProsa">${esc(l)}</p>`).join("")}
+      ${campos.map(
+    (c) => `<div class="campo"><label for="dlg-${esc(c.id)}">${esc(c.etiqueta)}</label>
+        ${c.opciones ? `<select id="dlg-${esc(c.id)}" data-campo="${esc(c.id)}">${c.opciones.map(
+      (o) => `<option value="${esc(o.valor)}"${o.valor === (c.valor ?? "") ? " selected" : ""}>${esc(o.texto)}</option>`
+    ).join("")}</select>` : `<input id="dlg-${esc(c.id)}" data-campo="${esc(c.id)}" type="text"
+                value="${esc(c.valor ?? "")}" placeholder="${esc(c.pista ?? "")}"
+                autocomplete="off" spellcheck="false">`}</div>`
+  ).join("")}
+      ${p.contenido ?? ""}
+      <div class="dlgBotones">
+        <button type="button" class="bt" data-dlg="no">${esc(p.cancelar ?? "Cancel")}</button>
+        <button type="button" class="bt ${p.peligro ? "malo" : "ppal"}" data-dlg="si">${esc(
+    p.aceptar ?? "OK"
+  )}</button>
+      </div>
+    </div>`;
+  document.body.appendChild(fondo);
+  abierto = fondo;
+  const devolvia = document.activeElement;
+  const caja = fondo.querySelector(".dlg");
+  const si = fondo.querySelector('[data-dlg="si"]');
+  return new Promise((resuelve) => {
+    let cerrado = false;
+    const cierra = (respuesta) => {
+      if (cerrado) return;
+      cerrado = true;
+      document.removeEventListener("keydown", tecla, true);
+      fondo.remove();
+      if (abierto === fondo) abierto = null;
+      devolvia?.focus?.();
+      resuelve(respuesta);
+    };
+    const lee = () => {
+      const fuera = {};
+      fondo.querySelectorAll("[data-campo]").forEach((el) => {
+        fuera[el.dataset.campo ?? ""] = el.value;
+      });
+      return fuera;
+    };
+    const acepta = () => {
+      const valores = lee();
+      if (campos.some((c) => c.requerido && !valores[c.id]?.trim())) return;
+      cierra(valores);
+    };
+    const revisa = () => {
+      const valores = lee();
+      const falta = campos.some((c) => c.requerido && !valores[c.id]?.trim());
+      const mal = p.exige !== void 0 && (valores[campos[0]?.id ?? ""] ?? "").trim() !== p.exige;
+      si.disabled = falta || mal;
+    };
+    si.onclick = acepta;
+    fondo.querySelector('[data-dlg="no"]').onclick = () => cierra(null);
+    fondo.onclick = (e) => {
+      if (e.target === fondo) cierra(null);
+    };
+    caja.addEventListener("input", revisa);
+    caja.addEventListener("change", revisa);
+    fondo.querySelectorAll("input").forEach((el) => {
+      el.onkeydown = (e) => {
+        if (e.key === "Enter" && !si.disabled) {
+          e.preventDefault();
+          acepta();
+        }
+      };
+    });
+    const tecla = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cierra(null);
+      }
+    };
+    document.addEventListener("keydown", tecla, true);
+    p.enlaza?.(caja, cierra);
+    revisa();
+    (caja.querySelector("input,select,textarea") ?? (si.disabled ? caja : si)).focus?.();
+  });
+}
+async function confirma(titulo, cuerpo = [], opciones3 = {}) {
+  const r = await pregunta({
+    titulo,
+    cuerpo,
+    aceptar: opciones3.aceptar ?? "Yes",
+    peligro: opciones3.peligro
+  });
+  return r !== null;
+}
+
+// city/web/src/demo.ts
+var VELOCIDADES = [
+  ["0.5\xD7", 2900],
+  ["1\xD7", 1450],
+  ["2\xD7", 700],
+  ["4\xD7", 350]
+];
+var Demos = class {
+  constructor(p) {
+    this.p = p;
+  }
+  catalogo = [];
+  cargando = false;
+  elegida = null;
+  hasta = 0;
+  corriendo = false;
+  velocidad = 1450;
+  reloj = null;
+  host = null;
+  monta(host) {
+    this.host = host;
+    if (!this.catalogo.length && !this.cargando) void this.lee();
+    this.repinta();
+  }
+  /** Stop the clock. Called when the section is left, or the page repaints
+   * elsewhere: a timer still firing into a detached node is a leak with a view. */
+  para() {
+    this.corriendo = false;
+    if (this.reloj !== null) {
+      clearTimeout(this.reloj);
+      this.reloj = null;
+    }
+  }
+  repinta() {
+    if (!this.host) return;
+    this.host.innerHTML = this.html();
+    this.enlaza(this.host);
+    if (this.elegida) {
+      const lista = this.host.querySelector("#demoLista");
+      if (lista) lista.scrollTop = lista.scrollHeight;
+    }
+  }
+  async lee() {
+    this.cargando = true;
+    try {
+      const r = await this.p.api("/api/demos");
+      this.catalogo = r.demos ?? [];
+    } catch {
+      this.catalogo = [];
+    } finally {
+      this.cargando = false;
+      this.repinta();
+    }
+  }
+  async abre(id) {
+    this.para();
+    this.hasta = 0;
+    this.elegida = null;
+    this.repinta();
+    try {
+      const r = await this.p.api("/api/demos?story=" + encodeURIComponent(id));
+      if (!r.error) this.elegida = r;
+    } catch {
+      this.elegida = null;
+    }
+    this.repinta();
+    if (this.elegida) this.arranca();
+  }
+  arranca() {
+    if (!this.elegida) return;
+    if (this.hasta >= this.elegida.eventos.length) this.hasta = 0;
+    this.corriendo = true;
+    this.repinta();
+    this.siguiente();
+  }
+  siguiente() {
+    if (this.reloj !== null) clearTimeout(this.reloj);
+    this.reloj = window.setTimeout(() => {
+      if (!this.corriendo || !this.elegida) return;
+      this.hasta += 1;
+      if (this.hasta >= this.elegida.eventos.length) {
+        this.hasta = this.elegida.eventos.length;
+        this.corriendo = false;
+        this.repinta();
+        return;
+      }
+      this.repinta();
+      this.siguiente();
+    }, this.velocidad);
+  }
+  html() {
+    if (this.elegida) return this.reproductor(this.elegida);
+    if (this.cargando) return `<p class="cargando">${t("reading the demo shelf")}</p>`;
+    if (!this.catalogo.length)
+      return `<div><span class="sub">${t("demos")}</span>
+        <h1 style="margin-top:6px">${t("Nothing recorded here")}</h1>
+        <p class="prosa">${t("This install has no demo recordings. Make them with demo/graba.py, or run the full thing from a terminal with agents-city demo.")}</p></div>`;
+    const esc3 = this.p.esc;
+    return `<div>
+      <span class="sub">${t("demos")}</span>
+      <h1 style="margin-top:6px">${t("See a committee happen")}</h1>
+      <p class="prosa">${t(`A real question, answered by a city of agents that never talk to each
+      other behind the chair's back. Pick the field closest to yours \u2014 the machine is the same
+      one in all three; only the work changes.`)}</p>
+      <div class="demoRejilla">${this.catalogo.map(
+      (d) => `<button type="button" class="demoCarta" data-demo="abre" data-id="${esc3(d.id)}">
+          <span class="demoDominio">${esc3(d.dominio)}</span>
+          <b>${esc3(d.titulo)}</b>
+          <span class="demoCiudad">${esc3(d.ciudad)}</span>
+          <span class="demoReparto">${esc3(d.reparto.join(" \xB7 "))}</span>
+          <span class="demoPlay">\u25B6 ${t("{n} turns", { n: d.turnos })}</span>
+        </button>`
+    ).join("")}</div>
+      <p class="pista">${t("These are recordings of real runs over the real bus, played back here. To run one live in a terminal: agents-city demo --domain software.")}</p>
+    </div>`;
+  }
+  reproductor(d) {
+    const esc3 = this.p.esc;
+    const total = d.eventos.length;
+    const hecho = Math.min(this.hasta, total);
+    const turnos = d.eventos.slice(0, hecho).map(this.p.pinta).join("");
+    const acabado = hecho >= total;
+    return `<div class="demoPlayer">
+      <div class="demoCab">
+        <button type="button" class="bt bvMini" data-demo="atras">\u2190 ${t("All demos")}</button>
+        <div><span class="sub">${esc3(d.dominio)} \xB7 ${esc3(d.ciudad)}</span>
+          <h2>${esc3(d.titulo)}</h2></div>
+      </div>
+      <div class="demoMandos">
+        <button type="button" class="bt ppal" data-demo="${this.corriendo ? "pausa" : "play"}">${this.corriendo ? `\u275A\u275A ${t("Pause")}` : acabado ? `\u21BA ${t("Replay")}` : `\u25B6 ${t("Play")}`}</button>
+        <button type="button" class="bt" data-demo="replay" ${hecho ? "" : "disabled"}>\u21BA ${t(
+      "Replay"
+    )}</button>
+        <span class="demoVel">${VELOCIDADES.map(
+      ([etiqueta, ms]) => `<button type="button" class="demoVelBoton ${ms === this.velocidad ? "aqui" : ""}" data-demo="vel" data-ms="${ms}">${esc3(etiqueta)}</button>`
+    ).join("")}</span>
+        <span class="demoCuenta">${t("{done} of {total}", { done: hecho, total })}</span>
+      </div>
+      <div class="demoBarra"><i style="width:${total ? hecho / total * 100 : 0}%"></i></div>
+      <ol class="liveLista" id="demoLista">${turnos || `<li class="liveEmpty">${t("Press play. The turns arrive one by one, exactly as they did.")}</li>`}</ol>
+      <p class="pista">${t("A recording of a real run: these events came off the real bus, from the real committee. Nothing here is being decided now.")}</p>
+    </div>`;
+  }
+  enlaza(raiz) {
+    raiz.querySelectorAll("[data-demo]").forEach((el) => {
+      el.onclick = (evento) => {
+        evento.preventDefault();
+        switch (el.dataset.demo) {
+          case "abre":
+            void this.abre(el.dataset.id ?? "");
+            break;
+          case "atras":
+            this.para();
+            this.elegida = null;
+            this.hasta = 0;
+            this.repinta();
+            break;
+          case "play":
+            this.arranca();
+            break;
+          case "pausa":
+            this.para();
+            this.repinta();
+            break;
+          case "replay":
+            this.para();
+            this.hasta = 0;
+            this.arranca();
+            break;
+          case "vel": {
+            this.velocidad = Number(el.dataset.ms) || 1450;
+            if (this.corriendo) this.siguiente();
+            this.repinta();
+            break;
+          }
+        }
+      };
+    });
+  }
+};
+
+// city/web/src/bienvenida.ts
 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">
@@ -242,16 +916,11 @@ var Bienvenida = class {
   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) {
@@ -365,24 +1034,19 @@ var Bienvenida = class {
   }
   // ── 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);
-    });
+    return `
+      <div class="bvPaso">
+        <span class="sub">${t("a new house")}</span>
+        <h1>${t("Who lives in it?")}</h1>
+        <div id="bvCasa"></div>
+        <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>`;
   }
   listaDeAgentes() {
     const fichas = this.roster.map(
@@ -422,101 +1086,6 @@ var Bienvenida = class {
    * 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 `
@@ -567,33 +1136,10 @@ var Bienvenida = class {
           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);
+          this.enCurso = new FormularioDeCasa(
+            { api: this.p.api, esc: this.p.esc, aviso: this.p.aviso, yo: this.p.yo },
+            this.rolesDeAgente
+          );
           return repinta();
         }
         if (que === "cancela") {
@@ -608,97 +1154,25 @@ var Bienvenida = class {
         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 hueco = lienzo.querySelector("#bvCasa");
+    if (hueco && this.enCurso) {
+      this.enCurso.monta(hueco);
+      hueco.querySelector("#bvNombre")?.focus();
     }
-    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;
-    }
+    const forma = this.enCurso;
+    if (!forma) 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() });
+      const hecho = await forma.guarda();
+      if (!hecho) return;
+      this.roster.push({ ...forma.datos, nombre: hecho.nombre });
       this.enCurso = null;
-      this.p.aviso(`${a.nombre.trim()} joined the city`);
+      this.p.aviso(t("{name} joined the city", { name: hecho.nombre }));
       await this.p.refresca();
-    } catch (e) {
-      this.p.aviso(String(e), true);
     } finally {
       this.guardando = false;
       await this.pinta(lienzo);
@@ -777,7 +1251,7 @@ function q(sel, raiz = document) {
 function todos(sel, raiz = document) {
   return [...raiz.querySelectorAll(sel)];
 }
-function esc(s) {
+function esc2(s) {
   return String(s ?? "").replace(
     /[&<>"']/g,
     (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
@@ -805,6 +1279,7 @@ var SECCIONES = [
   ["red", "Roads"],
   ["committee", "Committee"],
   ["gente", "Houses"],
+  ["demos", "Demos"],
   ["ciudades", "Cities"]
 ];
 var primeraCarga = true;
@@ -973,7 +1448,7 @@ function pintaActividad(seguir = false) {
     }
   }
   filter.innerHTML = '<option value="">all conversations</option>' + [...opened.entries()].reverse().map(
-    ([thread, question]) => `<option value="${esc(thread)}">${esc(question.slice(0, 54) || thread)}</option>`
+    ([thread, question]) => `<option value="${esc2(thread)}">${esc2(question.slice(0, 54) || thread)}</option>`
   ).join("");
   const selected = liveSelectedThread || "";
   filter.value = [...filter.options].some((option) => option.value === selected) ? selected : "";
@@ -1011,19 +1486,19 @@ function renderActividad(event) {
   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)}">
+  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>${esc2(detail)}</li>`).join("")}</ul></details>` : "";
+  const full = long ? `<details class="liveFull"><summary>read full message</summary><p>${esc2(summary)}</p></details>` : "";
+  return `<li class="liveTurn ${side} ${esc2(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}
+      <div class="liveMeta"><span class="liveActor">${esc2(event.actor)}</span>
+        ${role ? `<span class="liveRole">${esc2(role)}</span>` : ""}
+        ${route ? `<span>${esc2(route)}</span>` : ""}<span class="liveWhen">${esc2(time)}</span></div>
+      <div class="liveHeading">${icono(event.kind)}<h3>${esc2(tituloVisible(event))}</h3></div>
+      <p>${esc2(compact)}</p>${full}${details}
     </article>
   </li>`;
 }
@@ -1051,12 +1526,12 @@ function pintaContexto(thread, container) {
   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) => `<span class="livePerson${E?.avatars?.[actor] ? " conCara" : ""}" title="${esc2(
       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(
+  ).join("")}</div><span class="liveContextText"><b>seat moderates</b> \xB7 ${esc2(
     received
-  )}/${esc(total)} positions \xB7 ${esc(status)}</span>`;
+  )}/${esc2(total)} positions \xB7 ${esc2(status)}</span>`;
 }
 function esPromptDeTransporte(event) {
   if (event.kind !== "conversation.user") return false;
@@ -1073,9 +1548,9 @@ function rolOperativo(actor) {
 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 `<img class="liveCara" src="${esc2(uri)}" alt="">`;
   }
-  return esChair ? icono("chair") : esc(iniciales(actor));
+  return esChair ? icono("chair") : esc2(iniciales(actor));
 }
 function iniciales(actor) {
   const parts = actor.split(/[-_.\s]+/).filter(Boolean);
@@ -1132,12 +1607,12 @@ function icono(kind) {
 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>`;
+    <b>${esc2(E.city_name)}</b>
+    <span class="railDe">${esc2(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) : "";
+    const n = id === "demos" ? "" : 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>`;
+      <span>${esc2(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>`;
@@ -1153,8 +1628,8 @@ function rail() {
   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>`
+      (c) => `<option value="${esc2(c.ruta)}" ${c.actual ? "selected" : ""}>
+        ${esc2(c.nombre)}</option>`
     ).join("")}</select>`;
     q("#cambiaCiudad").onchange = (ev) => {
       const ruta = ev.target.value;
@@ -1166,7 +1641,24 @@ function rail() {
   const nueva = q("#alWizard");
   nueva.onclick = async (ev) => {
     ev.preventDefault();
-    const name = window.prompt("Name of the new city");
+    const dicho = await pregunta({
+      titulo: t("Start another city"),
+      cuerpo: [
+        t(
+          "A city is a place with its own seat, its own houses and its own map. Yours stay where they are."
+        )
+      ],
+      campos: [
+        {
+          id: "name",
+          etiqueta: t("What is it called?"),
+          pista: t("home, clients, the lab \u2014 whatever you would say out loud"),
+          requerido: true
+        }
+      ],
+      aceptar: t("Create it")
+    });
+    const name = dicho?.name;
     if (!name?.trim()) return;
     const r = await api("/api/ciudades", {
       method: "POST",
@@ -1177,6 +1669,7 @@ function rail() {
   };
 }
 function pinta() {
+  if (SECCION !== "demos") demos?.para();
   rail();
   q(".cuerpo").style.padding = "";
   q("#lienzo").style.maxWidth = "";
@@ -1189,7 +1682,7 @@ VISTAS.bienvenida = () => {
   document.body.classList.add("enGuia");
   guia ??= new Bienvenida({
     api,
-    esc,
+    esc: esc2,
     aviso: toast,
     refresca,
     vete: (seccion) => {
@@ -1207,13 +1700,13 @@ 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="et">${esc2(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 class="de mono">${esc2(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>`}
+                 <button class="bt mini archiva" data-ciudad="${esc2(c.ruta)}"
+                   data-nombre="${esc2(c.nombre)}">archive</button>`}
         </span>
       </div>`
   ).join("");
@@ -1233,7 +1726,7 @@ VISTAS.ciudades = () => {
     </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
+      <p class="prosa">Takes <b>${esc2(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>
@@ -1273,23 +1766,23 @@ VISTAS.ciudades = () => {
         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 dicho = await pregunta({
+        titulo: t("Start over {city}?", { city: p.city }),
+        cuerpo: [
+          t("You lose:") + " " + p.loses.join(", ") + ".",
+          t("Right now that is {agents} house(s), {roads} road(s) and {acts} committee act(s).", {
+            agents: p.agents,
+            roads: p.roads,
+            acts: p.deliberations
+          }),
+          t("You keep:") + " " + p.keeps.join(", ") + "."
+        ],
+        campos: [{ id: "nombre", etiqueta: t("Type the city\u2019s name to confirm"), requerido: true }],
+        exige: p.city,
+        aceptar: t("Start over"),
+        peligro: true
+      });
+      if (dicho === null) return;
       const r = await api(
         "/api/ciudad-reinicia",
         { method: "POST", body: JSON.stringify({ confirm: p.city }) }
@@ -1305,8 +1798,12 @@ Type the city's name to confirm:`;
   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 vale = await confirma(
+        t("Archive {city}?", { city: nombre }),
+        [t("It moves into .backups. Nothing is deleted, and you can put it back by hand.")],
+        { aceptar: t("Archive it") }
+      );
+      if (!vale) return;
       const r = await api(
         "/api/ciudad-archiva",
         { method: "POST", body: JSON.stringify({ city: boton.dataset.ciudad ?? "" }) }
@@ -1320,6 +1817,12 @@ Type the city's name to confirm:`;
     };
   });
 };
+var demos = null;
+VISTAS.demos = () => {
+  if (!demos) demos = new Demos({ api, esc: esc2, pinta: renderActividad });
+  q("#lienzo").innerHTML = '<div id="demoHueco"></div>';
+  demos.monta(q("#demoHueco"));
+};
 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;
@@ -1327,12 +1830,12 @@ VISTAS.resumen = () => {
   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",
+      txt: mia ? `Your seat is taken \u2014 you are <b>${esc2(mia.agent)}</b> in <b>${esc2(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(
+      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: ${esc2(
         agentes.map((a) => a.name).join(", ")
       )}`,
       ir: "gente"
@@ -1344,7 +1847,7 @@ VISTAS.resumen = () => {
     },
     {
       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",
+      txt: mia && mia.goals_defined ? `Your goal: <b>${esc2(mia.objetivo ? mia.objetivo.title : "")}</b>` : "Set <b>one goal</b>, with the command that measures it",
       ir: "puesto"
     },
     {
@@ -1357,15 +1860,15 @@ VISTAS.resumen = () => {
   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>
+      <h1 style="margin-top:6px">${empezando ? "Let\u2019s build " + esc2(E.city_name) : esc2(E.city_name)}</h1>
+      <p class="de mono" style="margin-top:5px">${esc2(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>
+             <code class="mono">${esc2(corto(E.datos))}</code> you can also edit by hand.</p>` : `<p class="prosa" style="margin-top:8px">Domain: <b>${esc2(E.domain)}</b>. Growth is
+             counted with <code class="mono">${esc2(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>
@@ -1389,11 +1892,11 @@ VISTAS.resumen = () => {
     <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>'}
+          <code>${sesionArriba ? "tmux attach -t " + esc2(E.sesion) : "one window per folder, an agent in each"}</code>
+          ${sesionArriba ? `<button class="bt mini" data-copia="tmux attach -t ${esc2(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>
+          <code>${E.mapa ? esc2(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();
@@ -1421,7 +1924,7 @@ VISTAS.mapa = () => {
     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"
+    q("#lienzo").innerHTML = `<iframe id="cityMapFrame" src="${esc2(mapUrl.toString())}" title="the map"
       allow="fullscreen" allowfullscreen
       style="width:100%;height:calc(100vh - 2px);border:0;display:block"></iframe>`;
     const frame = q("#cityMapFrame");
@@ -1484,11 +1987,11 @@ VISTAS.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>
+    <h1 style="margin-top:6px">${esc2(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
+    <code class="mono">${esc2(corto(E.datos))}/${esc2(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>
@@ -1511,9 +2014,9 @@ async function puesto() {
   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>`
+      <button class="rol ${r.id === rol ? "on" : ""}" data-r="${esc2(r.id)}">
+        <h3>${esc2(r.name)}</h3><span class="de">${esc2(r.id)} \xB7 ${esc2(r.trade.toLowerCase())}</span>
+        <p>${esc2(r.summary)}</p></button>`
     ).join("");
     todos("#roles .rol").forEach((b) => {
       b.onclick = () => {
@@ -1530,9 +2033,9 @@ async function puesto() {
   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>`
+      <button class="rol ${d.id === domain ? "on" : ""}" data-d="${esc2(d.id)}">
+        <h3>${esc2(d.name)}</h3><span class="de">${esc2(d.id)}</span>
+        <p>${esc2(d.summary)}</p></button>`
     ).join("");
     todos("#domains .rol").forEach((b) => {
       b.onclick = () => {
@@ -1547,28 +2050,28 @@ async function puesto() {
   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">
+      <input type="text" id="g_title" value="${esc2(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>
+        <input type="text" id="g_signal" value="${esc2(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)}"
+        <input type="text" class="mono" id="g_command" value="${esc2(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)}"
+      <input type="text" id="g_manual" value="${esc2(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>
+        <input type="text" class="mono" id="g_baseline" value="${esc2(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>
+        <input type="text" class="mono" id="g_target" value="${esc2(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>`;
+      <input type="text" id="g_by" value="${esc2(o.by ?? "this quarter")}"></div>`;
   const val = (id) => q(id).value.trim();
   q("#guardaPuesto").onclick = async () => {
     if (!rol) {
@@ -1636,35 +2139,35 @@ VISTAS.barrios = () => {
     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>
+        <input type="text" value="${esc2(u.name)}" data-i="${i}" style="flex:1">
+        <span class="id">${esc2(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>`
+            style="background:#${p.hex}" title="${esc2(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)}"
+      <div class="repoBloque" data-repo="${esc2(repo)}">
+        <div class="repoCab"><span>${esc2(repo)}</span>
+          <button class="bt mini" data-split="${esc2(repo)}">split</button>
+          <label class="lab"><input type="checkbox" data-lab="${esc2(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}"
+            <input type="text" value="${esc2(f.nombre)}" data-k="nombre" data-r="${esc2(repo)}" data-j="${j}" title="name on the map">
+            <input type="text" class="mono" value="${esc2(f.ruta)}" data-k="ruta" data-r="${esc2(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}">
+            <select data-k="unidad" data-r="${esc2(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>`
+                <option value="${esc2(id)}" ${(idsValidos.has(f.unidad) ? f.unidad : "none") === id ? "selected" : ""}>${esc2(id)}</option>`
         ).join("")}
             </select>
-            ${(porRepo[repo] ?? []).length > 1 ? `<button class="x" data-quita="${esc(repo)}" data-j="${j}">\xD7</button>` : "<span></span>"}
+            ${(porRepo[repo] ?? []).length > 1 ? `<button class="x" data-quita="${esc2(repo)}" data-j="${j}">\xD7</button>` : "<span></span>"}
           </div>`
       ).join("")}
       </div>`
@@ -1764,20 +2267,20 @@ VISTAS.red = () => {
     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>
+    (r) => `<div class="persona"><h3>${esc2(r.name)}</h3>
+          <span class="ag">${esc2(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>`
+          <button class="bt mini" data-road-close="${esc2(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>`
+    (c) => `<div class="persona"><h3>${esc2(c.nombre)}</h3>
+              <span class="ag">${esc2(c.slug ?? c.ruta)}</span>
+              <button class="bt mini ppal" data-road-open="${esc2(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>
+      <code>${esc2(invitation)}</code>
+      <button class="bt mini" data-copia="${esc2(invitation)}">copy</button>
     </div>`;
   enlaza();
   todos("[data-road-open]").forEach((b) => {
@@ -1816,23 +2319,23 @@ VISTAS.committee = () => {
     </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
+            <h3>${esc2(act.question)}</h3>
+            <span class="ag">${esc2(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>
+            <span class="rp">${esc2(act.decision || act.desired_outcome)}</span>
+            <span class="de">${esc2(act.participants.join(", ") || "no participants")}
+              ${act.contributors.length ? ` \xB7 decisive ${esc2(act.contributors.join(", "))}` : ""}
+              ${act.verifier ? ` \xB7 verifier ${esc2(act.verifier)} ${esc2(act.verification)}` : ""}</span>
+            <code class="mono">${esc2(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);
+  return opciones(valores, actual, esc2);
 }
 function caraRPG(uri) {
-  return uri?.startsWith("data:image/svg+xml;base64,") ? `<img class="rpgCara" src="${esc(uri)}" alt="">` : "";
+  return uri?.startsWith("data:image/svg+xml;base64,") ? `<img class="rpgCara" src="${esc2(uri)}" alt="">` : "";
 }
 function barra(ancho, clase = "") {
   const pct = Math.round(Math.max(0, Math.min(1, ancho)) * 100);
@@ -1855,69 +2358,69 @@ VISTAS.gente = () => {
     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>
+          <div><h3>${esc2(a.name)}</h3>
+          <span class="rpgTags"><span class="kindChip ${esc2(a.kind)}">${esc2(a.kind)}</span>
+          <span class="rpgRol">${esc2(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)}"
+            <button class="rpgMini rpgDado" type="button" data-agente="${esc2(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)}"
+            <button class="rpgMini rpgIns" type="button" data-agente="${esc2(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)}"
+            <button class="rpgMini rpgIns" type="button" data-agente="${esc2(a.slug)}"
               data-file="AGENTS.md" title="Instructions Codex, OpenCode and Kimi read">AGENTS.md</button>
           </span>
         </div>
         <div class="rpgFila"><label>${t("engine")}</label>
           ${barra(motor.ancho, motor.defecto ? "defecto" : "")}
-          <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="model"
+          <select class="rpgSel" data-agente="${esc2(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"
+          <select class="rpgSel" data-agente="${esc2(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(
+          <span class="rpgDato"><span class="cliDot ${a.cli.connected ? "on" : a.cli.installed ? "idle" : "off"}" title="${esc2(
       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(
+    )}"></span>${esc2(
       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)}"
+    )} \xB7 ${esc2(a.cli.binary)}
+          <button class="rpgMini rpgTest" type="button" data-agente="${esc2(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">
+          <select class="rpgSel" data-agente="${esc2(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>`
+      (m) => `<code class="mono" title="${esc2(m.target)}">${esc2(m.label)}${m.fixed ? "" : `<button class="rpgQuitar rpgDesmonta" type="button"
+                              data-agente="${esc2(a.slug)}" data-mount="${esc2(m.label)}"
+                              title="Stop this agent working on ${esc2(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)}"
+          ${a.legacy ? '<span class="rpgDato">a legacy repo agent works on its own repo</span>' : `<button class="rpgMini rpgMonta" type="button" data-agente="${esc2(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>`
+      (s) => `<code class="mono" title="${esc2(s.description)}">${esc2(s.name)}${s.removable && s.dir ? `<button class="rpgQuitar" type="button" data-agente="${esc2(a.slug)}"
+                              data-skill="${esc2(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>
+            + zip<input type="file" accept=".zip" data-agente="${esc2(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>
+  q("#lienzo").innerHTML = `<div><span class="sub">the houses of ${esc2(E.city_name)}</span>
+    <h1 style="margin-top:6px">${t("Who lives in {city}", { city: esc2(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
+    <code class="mono">${esc2(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>
@@ -1930,10 +2433,10 @@ VISTAS.gente = () => {
         <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>
+          <span class="rpgRol">${esc2(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 class="rpgFila"><span class="rpgDato">${esc2(E.address)}</span></div>
+        <div class="rpgFila"><span class="rpgDato">${esc2(mia?.objetivo?.title ?? "No goal yet")}</span></div>
       </div>
       ${agentes.map(fichaDe).join("")}
     </div>`;
@@ -1960,7 +2463,17 @@ VISTAS.gente = () => {
     sel.onchange = async () => {
       let valor = sel.value;
       if (valor === "__otro__") {
-        const propio = window.prompt("Model alias (resolved by the CLI at launch):", "");
+        const dicho = await pregunta({
+          titulo: t("Which engine?"),
+          cuerpo: [
+            t("An alias the CLI resolves when the window opens. Anything it accepts works here.")
+          ],
+          campos: [
+            { id: "alias", etiqueta: t("Model alias"), pista: "claude-opus-5", requerido: true }
+          ],
+          aceptar: t("Use it")
+        });
+        const propio = dicho?.alias ?? null;
         if (propio === null) {
           pinta();
           return;
@@ -2006,7 +2519,12 @@ VISTAS.gente = () => {
   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 vale = await confirma(
+        t("Remove the skill {skill}?", { skill: nombre }),
+        [t("It is deleted from this agent\u2019s own home. Nothing outside that folder is touched.")],
+        { aceptar: t("Remove it"), peligro: true }
+      );
+      if (!vale) return;
       const r = await api("/api/skill", {
         method: "POST",
         body: JSON.stringify({ agent: boton.dataset.agente ?? "", remove: nombre })
@@ -2022,26 +2540,34 @@ VISTAS.gente = () => {
   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;
+      const forma = new FormularioDeCasa({ api, esc: esc2, aviso: toast, yo: E.yo });
+      let hecho = null;
+      await pregunta({
+        titulo: t("Build a house"),
+        cuerpo: [
+          t(
+            "One worker, its own window, its own corner of your disk. Everything here can be changed afterwards."
+          )
+        ],
+        contenido: '<div id="altaCasa"></div>',
+        aceptar: t("Build it"),
+        ancho: 640,
+        enlaza: (raiz, cierra) => {
+          const hueco = raiz.querySelector("#altaCasa");
+          if (hueco) forma.monta(hueco);
+          const boton = raiz.querySelector('[data-dlg="si"]');
+          if (!boton) return;
+          boton.onclick = async () => {
+            boton.disabled = true;
+            hecho = await forma.guarda();
+            boton.disabled = false;
+            if (hecho) cierra({});
+          };
         }
-        toast(`${nombre.trim()} has a house now \u2014 give it something to work on`);
-        void refresca();
-      } catch (e) {
-        toast(String(e), true);
-      }
+      });
+      if (!hecho) return;
+      toast(t("{name} has a house now", { name: hecho.nombre }));
+      void refresca();
     };
   const montaje = async (carga, hecho) => {
     try {
@@ -2060,16 +2586,46 @@ VISTAS.gente = () => {
     }
   };
   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");
+    boton.onclick = async () => {
+      const elegidas = [];
+      const exp = new Explorador(
+        { api, esc: esc2 },
+        (ruta) => {
+          const ya = elegidas.indexOf(ruta);
+          if (ya >= 0) elegidas.splice(ya, 1);
+          else elegidas.push(ruta);
+        },
+        () => elegidas
+      );
+      const dicho = await pregunta({
+        titulo: t("What else does it work on?"),
+        cuerpo: [
+          t(
+            "A repository, a worktree, a folder of documents, one exact file. It is linked, never copied."
+          )
+        ],
+        contenido: '<div id="montaExp"></div>',
+        aceptar: t("Mount it"),
+        ancho: 620,
+        enlaza: (raiz) => {
+          const hueco = raiz.querySelector("#montaExp");
+          if (hueco) exp.monta(hueco);
+        }
+      });
+      if (dicho === null || !elegidas.length) return;
+      for (const ruta of elegidas)
+        await montaje({ agent: boton.dataset.agente ?? "", add: ruta }, t("Mounted"));
     };
   });
   todos(".rpgDesmonta").forEach((boton) => {
-    boton.onclick = () => {
+    boton.onclick = async () => {
       const etiqueta = boton.dataset.mount ?? "";
-      if (!window.confirm(`Stop this agent working on ${etiqueta}?`)) return;
+      const vale = await confirma(
+        t("Stop this agent working on {what}?", { what: etiqueta }),
+        [t("The link goes. The folder it points at stays exactly where it is.")],
+        { aceptar: t("Unmount it") }
+      );
+      if (!vale) return;
       void montaje(
         { agent: boton.dataset.agente ?? "", remove: etiqueta },
         `${etiqueta} unmounted \u2014 the folder itself is untouched`