agents-city 0.4.0 → 0.5.1

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

@@ -1,7 +1,15 @@
 // city/web/src/idioma.ts
 var ES = {};
+var CLAVES = /* @__PURE__ */ new Map();
 function clave(fuente) {
-  return fuente.replace(/\s+/g, " ").trim();
+  const hecha = CLAVES.get(fuente);
+  if (hecha !== void 0) return hecha;
+  const nueva = _clave(fuente);
+  CLAVES.set(fuente, nueva);
+  return nueva;
+}
+function _clave(fuente) {
+  return fuente.replace(/[\u2018\u2019]/g, "'").replace(/\s+/g, " ").trim();
 }
 function anota(pares) {
   for (const [fuente, texto] of Object.entries(pares)) ES[clave(fuente)] = texto;
@@ -49,6 +57,7 @@ anota({
   "My seat": "Mi asiento",
   Districts: "Distritos",
   Roads: "Carreteras",
+  Reception: "Recepci\xF3n",
   Committee: "Comit\xE9",
   Houses: "Casas",
   "All cities": "Todas las ciudades",
@@ -56,6 +65,69 @@ anota({
   "{n} house": "{n} casa",
   "{n} houses": "{n} casas",
   "Create another city \u2192": "Crear otra ciudad \u2192",
+  // ── reception ────────────────────────────────────────────────────────────
+  reception: "recepci\xF3n",
+  "Messages wait for you, not your agents": "Los mensajes te esperan a ti, no a tus agentes",
+  "Remote text stops here as inert text. Read it, reject it with a reason, or choose the cities that should receive it. Until then no model can read it.": "El texto remoto se detiene aqu\xED como texto inerte. L\xE9elo, rech\xE1zalo con un motivo o elige qu\xE9 ciudades deben recibirlo. Hasta entonces ning\xFAn modelo puede leerlo.",
+  "routing mode": "modo de enrutado",
+  "Manual review": "Revisi\xF3n manual",
+  "Every message needs a person before it reaches a city.": "Cada mensaje necesita a una persona antes de llegar a una ciudad.",
+  "Auto router not configured": "Router autom\xE1tico sin configurar",
+  "Configure Auto": "Configurar Auto",
+  "Automatic routing": "Enrutado autom\xE1tico",
+  "Only one clear, low-risk rule match can leave the human queue automatically.": "Solo una coincidencia clara y de bajo riesgo puede salir autom\xE1ticamente de la cola humana.",
+  "Routing policy": "Pol\xEDtica de enrutado",
+  "Keep human review": "Mantener la revisi\xF3n humana",
+  "Use the local rule router": "Usar el router local de reglas",
+  "Write comma-separated words or phrases for each destination. Empty cities are never selected.": "Escribe palabras o frases separadas por comas para cada destino. Las ciudades vac\xEDas nunca se eligen.",
+  "e.g. contract, privacy, legal review": "p. ej. contrato, privacidad, revisi\xF3n legal",
+  "Suspicious, unmatched, or ambiguous text always waits for you. Auto never executes, answers, or opens links.": "El texto sospechoso, sin coincidencia o ambiguo siempre te espera. Auto nunca ejecuta, responde ni abre enlaces.",
+  "Save routing policy": "Guardar pol\xEDtica de enrutado",
+  "Could not save the routing policy": "No se pudo guardar la pol\xEDtica de enrutado",
+  "Routing policy saved.": "Pol\xEDtica de enrutado guardada.",
+  "Reading your reception\u2026": "Leyendo tu recepci\xF3n\u2026",
+  "Could not read your reception": "No se ha podido leer tu recepci\xF3n",
+  "Reception clear": "Recepci\xF3n despejada",
+  "No remote message is waiting for a decision.": "No hay mensajes remotos esperando una decisi\xF3n.",
+  "message waiting": "{n} mensaje en espera",
+  "messages waiting": "{n} mensajes en espera",
+  "local only": "solo local",
+  "No agent has read this": "Ning\xFAn agente ha le\xEDdo esto",
+  "Send to": "Dirigir a",
+  "Route to selected cities": "Dirigir a las ciudades elegidas",
+  "Reject and reply with a reason": "Rechazar y responder con un motivo",
+  "Reason sent back securely": "Motivo que se devolver\xE1 cifrado",
+  "Reason for rejecting this message": "Motivo para rechazar este mensaje",
+  "Reject and send reason": "Rechazar y enviar el motivo",
+  "Could not route the message": "No se pudo dirigir el mensaje",
+  "Message routed. Only the selected cities can now read it.": "Mensaje dirigido. Solo las ciudades elegidas pueden leerlo ahora.",
+  "Could not reject the message": "No se pudo rechazar el mensaje",
+  "Message rejected. Your reason is queued for encrypted delivery.": "Mensaje rechazado. Tu motivo ha quedado en cola para enviarse cifrado.",
+  "New encrypted message": "Nuevo mensaje cifrado",
+  "Messages leave from this computer with end-to-end encryption.": "Los mensajes salen de este ordenador con cifrado de extremo a extremo.",
+  "message queued": "{n} mensaje en cola",
+  "messages queued": "{n} mensajes en cola",
+  "Write to": "Escribir a",
+  Message: "Mensaje",
+  "Your message will stop in their private reception.": "Tu mensaje se detendr\xE1 en su recepci\xF3n privada.",
+  "Send securely": "Enviar de forma segura",
+  "Reply to a rejected message": "Respuesta a un mensaje rechazado",
+  Dismiss: "Descartar",
+  "Could not queue the message": "No se pudo poner el mensaje en cola",
+  "Message queued on this computer.": "Mensaje puesto en cola en este ordenador.",
+  "Could not dismiss the response": "No se pudo descartar la respuesta",
+  // ── live activity rail ──────────────────────────────────────────────────
+  "City live": "Ciudad en directo",
+  waiting: "esperando",
+  "A moderated conversation over the WebSocket bus. The seat routes each turn; private model reasoning is never shown or stored.": "Una conversaci\xF3n moderada sobre el bus WebSocket. El asiento dirige cada turno; el razonamiento privado de los modelos no se muestra ni se guarda.",
+  "all conversations": "todas las conversaciones",
+  "show work": "mostrar trabajo",
+  "hide work": "ocultar trabajo",
+  "websocket live": "websocket activo",
+  reconnecting: "reconectando",
+  "session offline": "sesi\xF3n desconectada",
+  "The bus is live. Questions, positions and moderated replies will appear here.": "El bus est\xE1 activo. Aqu\xED aparecer\xE1n preguntas, posiciones y respuestas moderadas.",
+  "Start the city session. Its visible conversation will appear here as it happens.": "Inicia la sesi\xF3n de la ciudad. Su conversaci\xF3n visible aparecer\xE1 aqu\xED mientras sucede.",
   // ── the guide ─────────────────────────────────────────────────────────────
   Welcome: "Bienvenida",
   "The work": "El trabajo",
@@ -95,7 +167,6 @@ anota({
   "Set a goal": "Poner un objetivo",
   "{city} is alive": "{city} est\xE1 viva",
   // ── the houses ────────────────────────────────────────────────────────────
-  "the houses of {city}": "las casas de {city}",
   "Who lives in {city}": "Qui\xE9n vive en {city}",
   "+ Build a house": "+ Construir una casa",
   "+ folder": "+ carpeta",
@@ -122,8 +193,6 @@ anota({
   open: "abrir",
   archive: "archivar",
   "\xB7 open now": "\xB7 abierta ahora",
-  "{n} house of its own": "{n} casa propia",
-  "{n} houses of its own": "{n} casas propias",
   "Start this city over": "Empezar esta ciudad de cero",
   "Start over\u2026": "Empezar de cero\u2026",
   // ── the map ───────────────────────────────────────────────────────────────
@@ -143,20 +212,8 @@ anota({
   "town hall": "ayuntamiento",
   "Manage one autonomous city: its seat, repo agents, roads and map. Everything here is a plain file you can also inspect by hand.": "Gobierna una ciudad aut\xF3noma: su asiento, sus agentes, sus carreteras y su mapa. Todo lo que hay aqu\xED es un fichero de texto que tambi\xE9n puedes abrir a mano.",
   // ── looking through the disk ──────────────────────────────────────────────
-  "search your disk \u2014 a name, or part of a path": "busca en tu disco \u2014 un nombre, o parte de una ruta",
-  "Look through the disk again \u2014 for something cloned a minute ago": "Vuelve a mirar el disco \u2014 por si acabas de clonar algo",
-  "Search again": "Buscar otra vez",
-  "searching\u2026": "buscando\u2026",
-  "looking through your disk\u2026": "mirando en tu disco\u2026",
-  "{shown} of {total} places match": "{shown} de {total} sitios encajan",
-  "{total} places found \u2014 type to narrow it down": "{total} sitios encontrados \u2014 escribe para acotar",
-  "Nothing matches that. Add it by path below.": "Nada encaja con eso. A\xF1\xE1delo por ruta aqu\xED abajo.",
-  "Nothing found on this disk \u2014 add folders by path below.": "No hay nada en este disco \u2014 a\xF1ade carpetas por ruta aqu\xED abajo.",
-  "\u2026or a path, and Enter": "\u2026o una ruta, y Enter",
-  // ── what runs an agent ────────────────────────────────────────────────────
   "Its role \u2014 its speciality, never authority": "Su rol \u2014 su especialidad, nunca su autoridad",
-  "What runs it?": "\xBFQu\xE9 lo mueve?",
-  "Leave all three on default and it runs the way you do. Model and effort are Claude\u2019s to read; another CLI carries its own flags.": "D\xE9jalos los tres por defecto y funcionar\xE1 como t\xFA. El modelo y el esfuerzo los lee Claude; otra CLI lleva sus propias opciones."
+  "What runs it?": "\xBFQu\xE9 lo mueve?"
 });
 anota({
   // ── the guide, in prose ───────────────────────────────────────────────────
@@ -166,8 +223,6 @@ anota({
   "It decides the vocabulary, the roles you will be offered and what counts as evidence in a decision. A clinic does not ship pull requests, and a law firm does not measure story points. Pick the closest one \u2014 you can change it later.": "Decide el vocabulario, los roles que se te ofrecen y qu\xE9 cuenta como prueba en una decisi\xF3n. Una cl\xEDnica no entrega pull requests, y un despacho no mide story points. Elige el m\xE1s cercano \u2014 luego se cambia.",
   "You chair this city whatever you answer \u2014 this is your <b>speciality</b>, not your authority. It shapes the perspective you bring to a decision and the knowledge files the city writes for you. <b>Blank</b> is a real answer: it means no preset knowledge.": "Presides esta ciudad respondas lo que respondas \u2014 esto es tu <b>especialidad</b>, no tu autoridad. Da forma a la perspectiva con la que entras en una decisi\xF3n y a los ficheros de conocimiento que la ciudad escribe para ti. <b>En blanco</b> es una respuesta de verdad: significa sin conocimiento previo.",
   "Every house holds one worker \u2014 an <b>agent</b> \u2014 with its own window, its own role and its own corner of your disk. A house is <b>not</b> a repository: one can answer for three services and a folder of documents at once, and a house whose work is documents needs no git anywhere.": "Cada casa aloja a un trabajador \u2014 un <b>agente</b> \u2014 con su ventana, su rol y su rinc\xF3n de tu disco. Una casa <b>no</b> es un repositorio: una sola puede responder por tres servicios y una carpeta de documentos a la vez, y una casa cuyo trabajo son documentos no necesita git en ninguna parte.",
-  "Everything found on this disk: <b>repositories</b>, the <b>worktrees</b> an isolated agent works in, and <b>folders of documents</b> with no git at all. Pick as many as you like \u2014 this is the part that makes it an agent and not a repo.": "Todo lo que hay en este disco: <b>repositorios</b>, los <b>worktrees</b> en los que trabaja un agente aislado, y <b>carpetas de documentos</b> sin git ninguno. Elige las que quieras \u2014 esta es la parte que lo convierte en un agente y no en un repo.",
-  "Working on: {que}": "Trabaja sobre: {que}",
   "Your seat is written and {cuantas}. Everything you just answered is a plain file you can read and edit.": "Tu asiento queda escrito y {cuantas}. Todo lo que acabas de responder es un fichero de texto que puedes leer y editar.",
   "<b>{n}</b> house stands around it": "a su alrededor hay <b>{n}</b> casa",
   "<b>{n}</b> houses stand around it": "a su alrededor hay <b>{n}</b> casas",
@@ -207,7 +262,6 @@ anota({
   "{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}?",
@@ -254,11 +308,120 @@ anota({
   "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."
 });
+anota({
+  "{n} folder": "{n} carpeta",
+  "{n} folders": "{n} carpetas",
+  "{n} file": "{n} fichero",
+  "{n} files": "{n} ficheros",
+  "files are below the folders": "los ficheros van debajo de las carpetas"
+});
+anota({
+  // ── what runs a house ─────────────────────────────────────────────────────
+  "Leave all three on default and it runs the way you do. Whatever you set here is written once on the card, and the launcher hands it to whichever CLI runs this house.": "D\xE9jalos los tres por defecto y funcionar\xE1 como t\xFA. Lo que pongas aqu\xED se escribe una sola vez en la ficha, y el lanzador se lo pasa a la CLI que mueva esta casa.",
+  "This CLI has no effort setting.": "Esta CLI no tiene ajuste de esfuerzo.",
+  "An alias the Claude CLI resolves when the window opens.": "Un alias que la CLI de Claude resuelve al abrir la ventana.",
+  "The model name your Codex uses \u2014 the one in ~/.codex/config.toml.": "El nombre del modelo que usa tu Codex \u2014 el de ~/.codex/config.toml.",
+  "OpenCode names a model provider/model, like anthropic/claude-sonnet-4.": "OpenCode nombra los modelos proveedor/modelo, como anthropic/claude-sonnet-4.",
+  "The model name your Kimi CLI uses.": "El nombre del modelo que usa tu CLI de Kimi."
+});
+anota({
+  // ── the seat, the goal, the day ───────────────────────────────────────────
+  "my seat": "mi asiento",
+  "Save my seat": "Guardar mi asiento",
+  "work domain": "dominio de trabajo",
+  "your day": "tu d\xEDa",
+  "the agents": "los agentes",
+  "repo agents": "agentes de repo",
+  "one goal \u2014 optional": "un objetivo \u2014 opcional",
+  "The goal, in one line": "El objetivo, en una l\xEDnea",
+  "Concrete enough to argue with \u2014 empty skips it": "Lo bastante concreto como para discutirlo \u2014 vac\xEDo lo salta",
+  "How it is measured": "C\xF3mo se mide",
+  "in prose: the architect reads the AGENTS.md files on Fridays": "en prosa: el arquitecto lee los AGENTS.md los viernes",
+  "The command that returns it, if a command can": "El comando que lo devuelve, si un comando puede",
+  "What it returns today": "Lo que devuelve hoy",
+  "Where it has to get to": "A d\xF3nde tiene que llegar",
+  "By when": "Para cu\xE1ndo",
+  "empty for a qualitative goal": "vac\xEDo para un objetivo cualitativo",
+  "\u2026or who judges it, and how often": "\u2026o qui\xE9n lo juzga, y cada cu\xE1nto",
+  "what is left": "lo que queda",
+  "open my session": "abrir mi sesi\xF3n",
+  "Open the roster": "Abrir la lista",
+  // ── districts, roads, the committee ───────────────────────────────────────
+  "districts & houses": "distritos y casas",
+  "Save districts & houses": "Guardar distritos y casas",
+  "another district\u2026": "otro distrito\u2026",
+  "The modelling no tool can do for you": "El modelado que ninguna herramienta puede hacer por ti",
+  "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.": "Una casa <b>no es un repo</b> \u2014 es una parcela, una porci\xF3n de uno al servicio de una sola unidad de negocio. Parte los repos interesantes, dale a cada casa su distrito, y el mapa podr\xE1 decir \xABeste cambio toca banca\xBB en vez de \xABeste cambio toca src/lib\xBB.",
+  "Cities this one may reach": "Ciudades a las que \xE9sta puede llegar",
+  "No roads yet. This city is isolated on purpose.": "A\xFAn no hay carreteras. Esta ciudad est\xE1 aislada a prop\xF3sito.",
+  "No unconnected local cities.": "No hay ciudades locales sin conectar.",
+  "other cities on this machine": "otras ciudades en esta m\xE1quina",
+  "remote invitation \xB7 public, no token": "invitaci\xF3n remota \xB7 p\xFAblica, sin token",
+  "committee acts": "actas del comit\xE9",
+  "Decisions with a visible chain of custody": "Decisiones con una cadena de custodia visible",
+  "No committee acts yet. Open one only when the seat needs specialised evidence.": "A\xFAn no hay actas. Abre un comit\xE9 s\xF3lo cuando el asiento necesite pruebas especializadas.",
+  "agents-city committee schema open": "agents-city committee schema open",
+  "guided committee": "comit\xE9 guiado",
+  "Play the guided committee from the top": "Reproducir el comit\xE9 guiado desde el principio",
+  "Pause or resume mid-scene": "Pausar o seguir a mitad de escena",
+  "\u27F3 replay": "\u27F3 repetir",
+  "\u23F8 pause": "\u23F8 pausa",
+  "seat moderates": "el asiento modera",
+  "read full message": "leer el mensaje entero",
+  // ── the cities view ───────────────────────────────────────────────────────
+  'One person, several autonomous cities: each has its own identity, domain, chair, <b>its own houses</b> and its own roads. A house is not shared \u2014 it stands inside the city that owns it, with its workspace and mounts under that city\u2019s folder \u2014 so two cities can each have a <code class="mono">docs</code> house and they are two different workers. They share nothing unless you build a road between them.': 'Una persona, varias ciudades aut\xF3nomas: cada una con su identidad, su dominio, su silla, <b>sus propias casas</b> y sus carreteras. Una casa no se comparte \u2014 est\xE1 dentro de la ciudad que la posee, con su espacio de trabajo y sus montajes bajo la carpeta de esa ciudad \u2014 as\xED que dos ciudades pueden tener cada una su casa <code class="mono">docs</code> y son dos trabajadores distintos. No comparten nada salvo que construyas una carretera entre ellas.',
+  "client-a, research, the book\u2026": "cliente-a, investigaci\xF3n, el libro\u2026",
+  "which city this hall manages": "qu\xE9 ciudad gobierna este ayuntamiento",
+  "Takes {city} 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.": "Devuelve {city} a su primer d\xEDa: sin asiento, sin agentes, sin historial de comit\xE9, sin mapa. Tus repositorios y carpetas de documentos <b>no se tocan</b> \u2014 s\xF3lo la ciudad que apunta a ellos.",
+  // ── the houses ────────────────────────────────────────────────────────────
+  "Agents &amp; skills": "Agentes y skills",
+  '<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.': '<b>Una casa es donde vive y trabaja un agente</b>, y muchas casas son una ciudad \u2014 es lo mismo que dibuja el mapa, creciendo con lo que ese agente hace de verdad. La ficha y la CLI los llaman <code class="mono">agents</code>; aqu\xED ves sus casas.',
+  "They belong to <b>this</b> city and only to it: each one\u2019s workspace and its mounts live inside {donde}, so another city has its own people even if you give them the same names.": "Pertenecen a <b>esta</b> ciudad y s\xF3lo a ella: el espacio de trabajo de cada una y sus montajes viven dentro de {donde}, as\xED que otra ciudad tiene su propia gente aunque les pongas los mismos nombres.",
+  "a legacy repo agent works on its own repo": "un agente de repo heredado trabaja sobre su propio repo",
+  "data repo": "repo de datos",
+  "skills recognised": "skills reconocidas",
+  "plugin installed": "plugin instalado",
+  "Reroll this agent\u2019s face \u2014 deterministic, persisted on the card": "Vuelve a tirar la cara de este agente \u2014 determinista, guardada en la ficha",
+  "Instructions the Claude runtime reads": "Instrucciones que lee el runtime de Claude",
+  "Instructions Codex, OpenCode and Kimi read": "Instrucciones que leen Codex, OpenCode y Kimi",
+  "Run the engine for real: --version, and the login state on Claude": "Ejecuta el motor de verdad: --version, y el estado de sesi\xF3n en Claude",
+  "Install a skill zip into this agent\u2019s own home \u2014 the Claude runtime reads skills; other engines ignore them": "Instala un zip de skill en la casa de este agente \u2014 el runtime de Claude lee skills; los dem\xE1s motores las ignoran",
+  "Remove this skill from the agent\u2019s home": "Quitar esta skill de la casa del agente",
+  // ── while it is reading ───────────────────────────────────────────────────
+  "reading the domain packs": "leyendo los paquetes de dominio",
+  "reading the role files": "leyendo los ficheros de rol",
+  "an isometric house": "una casa isom\xE9trica"
+});
+
+// city/web/src/vista.ts
+var Montada = class {
+  host = null;
+  monta(host) {
+    this.host = host;
+    this.dibuja();
+  }
+  /**
+   * Put the markup in and wire it. Final in spirit: `monta` calls THIS and not
+   * `repinta`, because a subclass whose repaint has to rebuild something
+   * nested — the house form remounts its folder picker — overrides `repinta`
+   * to call `monta`, and a base that repainted on mount would then call itself
+   * until the stack ran out. It did.
+   */
+  dibuja() {
+    if (!this.host) return;
+    this.host.innerHTML = this.html();
+    this.enlaza(this.host);
+  }
+  repinta() {
+    this.dibuja();
+  }
+};
 
 // city/web/src/explorador.ts
 var MARCA = { repo: "git", worktree: "wt" };
-var Explorador = class {
+var Explorador = class extends Montada {
   constructor(p, elige, yaElegidas) {
+    super();
     this.p = p;
     this.elige = elige;
     this.yaElegidas = yaElegidas;
@@ -267,25 +430,15 @@ var Explorador = class {
   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;
+    super.monta(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();
+    if (!this.listado) this.repinta();
     try {
       const r = await this.p.api("/api/carpeta?path=" + encodeURIComponent(ruta));
       if (r.error) this.fallo = r.error;
@@ -300,10 +453,6 @@ var Explorador = class {
       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;
@@ -322,14 +471,15 @@ var Explorador = class {
     const esc3 = this.p.esc;
     const l = this.listado;
     const elegidas = new Set(this.yaElegidas());
+    const yaEsta = t("Already chosen");
+    const anade = t("Add this");
     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>
+          title="${esc3(puesta ? yaEsta : anade)}">${puesta ? "\u2713" : "+"}</button>
       </div>`;
     }).join("");
     const atajos = (l?.atajos ?? []).map(
@@ -344,34 +494,81 @@ var Explorador = class {
             title="${t("Up one folder")}">\u2191</button>
           <div class="expMigas">${this.migas()}</div>
         </div>
+        ${this.cuenta(l)}
         ${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>
+          data-ruta="${esc3(l?.ruta ?? "")}" ${l ? "" : "disabled"}>${t("Add this folder")}</button>
       </div>`;
   }
+  /**
+   * What is in this folder, said before you scroll.
+   *
+   * Folders sort first, as every file picker has done for forty years — which
+   * means in a folder with eight of them the files start below the fold, and a
+   * list that does not say they are there reads as a folder-only picker. This
+   * line is the difference between "there are no files here" and "keep going".
+   */
+  cuenta(l) {
+    if (!l || !l.entradas.length) return "";
+    const carpetas = l.entradas.filter((e) => e.dir).length;
+    const ficheros = l.entradas.length - carpetas;
+    const trozos = [];
+    if (carpetas) trozos.push(plural(carpetas, "{n} folder", "{n} folders"));
+    if (ficheros) trozos.push(plural(ficheros, "{n} file", "{n} files"));
+    return `<p class="expCuenta">${this.p.esc(trozos.join(" \xB7 "))}${ficheros ? ` \u2014 ${t("files are below the folders")}` : ""}</p>`;
+  }
+  /**
+   * One listener on the root, not one per row.
+   *
+   * A folder with two thousand entries has four thousand buttons in it, and
+   * binding a closure to each of them on every repaint is most of what a
+   * repaint costs. Delegation also survives the repaint, so the handler is
+   * attached exactly once for the life of the picker.
+   */
   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();
-        }
-      };
+    if (raiz.dataset.expEnlazado === "1") return;
+    raiz.dataset.expEnlazado = "1";
+    raiz.addEventListener("click", (evento) => {
+      const el = evento.target?.closest("[data-exp]");
+      if (!el || !raiz.contains(el)) return;
+      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);
+        this.repinta();
+      }
     });
   }
 };
 
 // city/web/src/motores.ts
 var RUNTIMES = ["claude", "codex", "opencode", "kimi"];
-var MODELOS = ["haiku", "sonnet", "opus", "fable"];
+var MOTOR = {
+  claude: {
+    modelos: ["haiku", "sonnet", "opus", "fable"],
+    esfuerzo: true,
+    pista: "An alias the Claude CLI resolves when the window opens."
+  },
+  codex: {
+    modelos: [],
+    esfuerzo: true,
+    pista: "The model name your Codex uses \u2014 the one in ~/.codex/config.toml."
+  },
+  opencode: {
+    modelos: [],
+    esfuerzo: false,
+    pista: "OpenCode names a model provider/model, like anthropic/claude-sonnet-4."
+  },
+  kimi: { modelos: [], esfuerzo: false, pista: "The model name your Kimi CLI uses." }
+};
+function motorDe(runtime) {
+  return MOTOR[runtime || "claude"] ?? MOTOR.claude;
+}
+var MODELOS = MOTOR.claude.modelos;
 var NIVEL_ESFUERZO = {
   low: 1,
   medium: 2,
@@ -413,8 +610,9 @@ var CLASES = [
   ],
   ["coordinator", "It coordinates", "Its house grows with the decisions it records."]
 ];
-var FormularioDeCasa = class {
+var FormularioDeCasa = class extends Montada {
   constructor(p, roles = []) {
+    super();
     this.p = p;
     this.roles = roles;
   }
@@ -428,25 +626,26 @@ var FormularioDeCasa = class {
     esfuerzo: ""
   };
   roles = [];
-  host = null;
-  /** Render into `host` and wire it. Safe to call again: that is the repaint. */
+  rolesPedidos = false;
   monta(host) {
-    this.host = host;
     void this.aseguraRoles();
-    host.innerHTML = this.html();
-    this.enlaza(host);
+    super.monta(host);
     const hueco = host.querySelector(".casaExp");
     if (hueco) this.explora().monta(hueco);
   }
   repinta() {
     if (this.host) this.monta(this.host);
   }
+  /** Asked once, ever. `monta` runs on every repaint, so a guard on "did we get
+   * any roles back" would refetch — and repaint, and refetch — forever the day
+   * the catalogue comes back empty. */
   async aseguraRoles() {
-    if (this.roles.length) return;
+    if (this.rolesPedidos) return;
+    this.rolesPedidos = true;
     try {
       const r = await this.p.api("/api/roles?scope=agent");
       this.roles = r.roles ?? [];
-      this.repinta();
+      if (this.roles.length) this.repinta();
     } catch {
       this.roles = [];
     }
@@ -461,7 +660,7 @@ var FormularioDeCasa = class {
           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.pintaElegidas();
         },
         () => this.datos.montajes
       );
@@ -479,7 +678,7 @@ var FormularioDeCasa = class {
     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";
+    const motor = motorDe(a.runtime);
     return `
       <div class="campo"><label>${t("What do you call it?")}</label>
         <input type="text" id="bvNombre" value="${esc3(a.nombre)}"
@@ -490,45 +689,63 @@ var FormularioDeCasa = class {
         <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."
+      "Leave all three on default and it runs the way you do. Whatever you set here is written once on the card, and the launcher hands it to whichever CLI runs this house."
     )}</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),
+          ${motor.modelos.length ? `<select id="bvModelo">${opciones(
+      [""].concat(motor.modelos),
       a.modelo,
       esc3,
       t("default")
-    )}</select></div>
+    )}</select>` : `<input type="text" id="bvModelo" value="${esc3(a.modelo)}"
+                  placeholder="${t("default")}" autocomplete="off" spellcheck="false">`}</div>
         <div class="campo"><label>${t("effort")}</label>
-          <select id="bvEsfuerzo" ${esClaude ? "" : "disabled"}>${opciones(
+          <select id="bvEsfuerzo" ${motor.esfuerzo ? "" : "disabled"}
+            title="${motor.esfuerzo ? "" : t("This CLI has no effort setting.")}">${opciones(
       [""].concat(ESFUERZOS),
-      a.esfuerzo,
+      motor.esfuerzo ? a.esfuerzo : "",
       esc3,
       t("default")
     )}</select></div>
       </div>
+      <p class="pista">${esc3(t(motor.pista))}</p>
       <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(
+      <div id="casaElegidas">${this.elegidas()}</div>`;
+  }
+  /** The mounts chosen so far, as chips you can take back off. Rendered on its
+   * own so ticking a row does not rebuild the picker underneath the cursor. */
+  elegidas() {
+    const esc3 = this.p.esc;
+    const montajes = this.datos.montajes;
+    if (!montajes.length)
+      return `<p class="pista">${t("Nothing chosen yet \u2014 an agent with no mounts is fine too.")}</p>`;
+    return `<div class="expElegidas"><label class="bvEtiqueta">${t("Working on")}</label>
+      ${montajes.map(
       (m) => `<button type="button" class="bvChip elegida" data-bv="quita"
-                   data-ruta="${esc3(m)}" title="${esc3(m)}">${esc3(
+            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>`}`;
+    ).join("")}</div>`;
+  }
+  pintaElegidas() {
+    const hueco = this.host?.querySelector("#casaElegidas");
+    if (!hueco) return;
+    hueco.innerHTML = this.elegidas();
+    this.enlaza(hueco);
   }
   enlaza(raiz) {
     raiz.querySelectorAll("[data-bv]").forEach((el) => {
       el.onclick = (evento) => {
         evento.preventDefault();
         const que = el.dataset.bv;
-        this.recoge(raiz);
+        this.recoge();
         if (que === "clase") this.datos.clase = el.dataset.id ?? "code";
         else if (que === "quita") {
           const ya = this.datos.montajes.indexOf(el.dataset.ruta ?? "");
@@ -538,12 +755,19 @@ var FormularioDeCasa = class {
       };
     });
     raiz.querySelector("#bvRuntime")?.addEventListener("change", () => {
-      this.recoge(raiz);
+      this.recoge();
       this.repinta();
     });
   }
-  /** Keep what is typed when a click forces a repaint. */
-  recoge(raiz) {
+  /** Keep what is typed when a click forces a repaint.
+   *
+   * Always from the form's own root, never from whatever element the click
+   * came through: the chosen-chips strip re-uses this wiring, and reading the
+   * fields relative to that strip would find none of them and quietly throw
+   * away everything the person had typed. */
+  recoge() {
+    const raiz = this.host;
+    if (!raiz) return;
     const nombre = raiz.querySelector("#bvNombre");
     const rol = raiz.querySelector("#bvRol");
     if (nombre) this.datos.nombre = nombre.value;
@@ -554,7 +778,7 @@ var FormularioDeCasa = class {
       ["#bvEsfuerzo", "esfuerzo"]
     ]) {
       const sel = raiz.querySelector(id);
-      if (sel) this.datos[campo] = sel.value;
+      if (sel) this.datos[campo] = sel.value.trim();
     }
   }
   /**
@@ -566,7 +790,7 @@ var FormularioDeCasa = class {
    * another's job just to save a round trip.
    */
   async guarda() {
-    if (this.host) this.recoge(this.host);
+    this.recoge();
     const a = this.datos;
     const nombre = a.nombre.trim();
     if (!nombre) {
@@ -582,13 +806,15 @@ var FormularioDeCasa = class {
         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 montados = await Promise.all(
+        a.montajes.map(
+          (ruta) => this.p.api("/api/montaje", {
+            method: "POST",
+            body: JSON.stringify({ agent: r.agent, add: ruta })
+          }).then((m) => m.ok ? "" : `${ruta}: ${m.error ?? t("could not mount")}`).catch((e) => `${ruta}: ${String(e)}`)
+        )
+      );
+      for (const fallo of montados.filter(Boolean)) this.p.aviso(fallo, true);
       const motor = {};
       if (a.runtime) motor.runtime = a.runtime;
       if (a.modelo) motor.model = a.modelo;
@@ -725,8 +951,9 @@ var VELOCIDADES = [
   ["2\xD7", 700],
   ["4\xD7", 350]
 ];
-var Demos = class {
+var Demos = class extends Montada {
   constructor(p) {
+    super();
     this.p = p;
   }
   catalogo = [];
@@ -736,15 +963,13 @@ var Demos = class {
   corriendo = false;
   velocidad = 1450;
   reloj = null;
-  host = null;
   monta(host) {
-    this.host = host;
     if (!this.catalogo.length && !this.cargando) void this.lee();
-    this.repinta();
+    super.monta(host);
   }
-  /** 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() {
+  /** Stop the clock. The router calls this when the section is left: a timer
+   * still firing into a detached node is a leak with a soundtrack. */
+  desmonta() {
     this.corriendo = false;
     if (this.reloj !== null) {
       clearTimeout(this.reloj);
@@ -752,13 +977,9 @@ var Demos = class {
     }
   }
   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;
-    }
+    super.repinta();
+    const lista = this.elegida ? this.host?.querySelector("#demoLista") : null;
+    if (lista) lista.scrollTop = lista.scrollHeight;
   }
   async lee() {
     this.cargando = true;
@@ -773,7 +994,7 @@ var Demos = class {
     }
   }
   async abre(id) {
-    this.para();
+    this.desmonta();
     this.hasta = 0;
     this.elegida = null;
     this.repinta();
@@ -797,17 +1018,38 @@ var Demos = class {
     if (this.reloj !== null) clearTimeout(this.reloj);
     this.reloj = window.setTimeout(() => {
       if (!this.corriendo || !this.elegida) return;
+      const evento = this.elegida.eventos[this.hasta];
       this.hasta += 1;
-      if (this.hasta >= this.elegida.eventos.length) {
+      const final = this.hasta >= this.elegida.eventos.length;
+      if (final) {
         this.hasta = this.elegida.eventos.length;
         this.corriendo = false;
-        this.repinta();
-        return;
       }
-      this.repinta();
-      this.siguiente();
+      if (evento && !final) this.anade(evento);
+      else this.repinta();
+      if (!final) this.siguiente();
     }, this.velocidad);
   }
+  /** One more turn on screen, without taking the screen down. */
+  anade(evento) {
+    const lista = this.host?.querySelector("#demoLista");
+    if (!lista || !this.elegida) return this.repinta();
+    const vacia = lista.querySelector(".liveEmpty");
+    if (vacia) lista.innerHTML = "";
+    lista.insertAdjacentHTML("beforeend", this.p.pinta(evento));
+    lista.scrollTop = lista.scrollHeight;
+    this.marcador();
+  }
+  /** The counter and the bar, which are the only other things a turn moves. */
+  marcador() {
+    if (!this.host || !this.elegida) return;
+    const total = this.elegida.eventos.length;
+    const hecho = Math.min(this.hasta, total);
+    const cuenta = this.host.querySelector(".demoCuenta");
+    if (cuenta) cuenta.textContent = t("{done} of {total}", { done: hecho, total });
+    const barra2 = this.host.querySelector(".demoBarra i");
+    if (barra2) barra2.style.width = `${total ? hecho / total * 100 : 0}%`;
+  }
   html() {
     if (this.elegida) return this.reproductor(this.elegida);
     if (this.cargando) return `<p class="cargando">${t("reading the demo shelf")}</p>`;
@@ -848,9 +1090,10 @@ var Demos = class {
       </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>
+        ${// Once it has finished, the primary button already says Replay and
+    // does exactly this. Two identical controls side by side is a person
+    // wondering which one is the real one.
+    hecho && !acabado ? `<button type="button" class="bt" data-demo="replay">\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>
@@ -870,7 +1113,7 @@ var Demos = class {
             void this.abre(el.dataset.id ?? "");
             break;
           case "atras":
-            this.para();
+            this.desmonta();
             this.elegida = null;
             this.hasta = 0;
             this.repinta();
@@ -879,11 +1122,11 @@ var Demos = class {
             this.arranca();
             break;
           case "pausa":
-            this.para();
+            this.desmonta();
             this.repinta();
             break;
           case "replay":
-            this.para();
+            this.desmonta();
             this.hasta = 0;
             this.arranca();
             break;
@@ -902,7 +1145,7 @@ var Demos = class {
 // 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">
+  return `<svg viewBox="0 0 120 108" role="img" aria-label="${t("an isometric house")}" class="bvCasa">
     <polygon points="60,10 112,40 60,70 8,40" fill="${color}" opacity=".95"/>
     <polygon points="8,40 60,70 60,100 8,70" fill="${color}" opacity=".62"/>
     <polygon points="112,40 60,70 60,100 112,70" fill="${color}" opacity=".40"/>
@@ -922,7 +1165,17 @@ var Bienvenida = class {
   enCurso = null;
   guardando = false;
   lienzo = null;
-  /** Draw the current step into `lienzo`. The only entry point. */
+  /**
+   * The view contract, so the Hall's dispatcher treats every section the same.
+   *
+   * The painting itself is async — the first one asks the server for the domain
+   * packs — and a router cannot wait on a view. It does not need to: the guide
+   * draws a loading line first and fills itself in.
+   */
+  monta(host) {
+    void this.pinta(host);
+  }
+  /** Draw the current step into `lienzo`. */
   async pinta(lienzo) {
     this.lienzo = lienzo;
     if (!this.dominios.length) {
@@ -1076,16 +1329,6 @@ var Bienvenida = class {
         </div>
       </div>`;
   }
-  /**
-   * The places on this disk worth offering for this house, ranked.
-   *
-   * With nothing typed it is what you touched recently, because on a machine
-   * with three hundred clones a list is not an answer. What is typed matches
-   * the name and the path both — people look for `rankia` and for `Documents`
-   * with equal frequency, and only one of those is a repository name. A house
-   * that keeps knowledge sees document folders first, because that is the one
-   * kind of agent the old picker could not help at all.
-   */
   // ── 4. done ───────────────────────────────────────────────────────────────
   pantallaFinal() {
     return `
@@ -1276,6 +1519,7 @@ var SECCIONES = [
   ["mapa", "The map"],
   ["puesto", "My seat"],
   ["barrios", "Districts"],
+  ["recepcion", "Reception"],
   ["red", "Roads"],
   ["committee", "Committee"],
   ["gente", "Houses"],
@@ -1313,7 +1557,7 @@ function pintaDemoControles() {
   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>`;
+  caja.innerHTML = `<span>${t("guided committee")}</span><button id="demoReplay" type="button" title="${t("Play the guided committee from the top")}">${t("\u27F3 replay")}</button><button id="demoPausa" type="button" title="${t("Pause or resume mid-scene")}">${t("\u23F8 pause")}</button>`;
   header.appendChild(caja);
   const pausa = q("#demoPausa", caja);
   const manda = (action) => api("/api/demo", {
@@ -1440,14 +1684,14 @@ function pintaActividad(seguir = false) {
   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";
+  state.textContent = liveConnected ? t("websocket live") : liveUrl ? t("reconnecting") : t("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(
+  filter.innerHTML = `<option value="">${t("all conversations")}</option>` + [...opened.entries()].reverse().map(
     ([thread, question]) => `<option value="${esc2(thread)}">${esc2(question.slice(0, 54) || thread)}</option>`
   ).join("");
   const selected = liveSelectedThread || "";
@@ -1459,7 +1703,7 @@ function pintaActividad(seguir = false) {
   };
   workToggle.classList.toggle("on", liveShowWork);
   workToggle.setAttribute("aria-pressed", String(liveShowWork));
-  workToggle.textContent = liveShowWork ? "hide work" : "show work";
+  workToggle.textContent = liveShowWork ? t("hide work") : t("show work");
   workToggle.onclick = () => {
     liveShowWork = !liveShowWork;
     pintaActividad(true);
@@ -1470,7 +1714,7 @@ function pintaActividad(seguir = false) {
     (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>`;
+    list.innerHTML = `<li class="liveEmpty">${liveConnected ? t("The bus is live. Questions, positions and moderated replies will appear here.") : t("Start the city session. Its visible conversation will appear here as it happens.")}</li>`;
     return;
   }
   const wasNearBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 90;
@@ -1487,7 +1731,7 @@ function renderActividad(event) {
   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>${esc2(detail)}</li>`).join("")}</ul></details>` : "";
-  const full = long ? `<details class="liveFull"><summary>read full message</summary><p>${esc2(summary)}</p></details>` : "";
+  const full = long ? `<details class="liveFull"><summary>${t("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">
@@ -1529,7 +1773,7 @@ function pintaContexto(thread, container) {
     (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 ${esc2(
+  ).join("")}</div><span class="liveContextText"><b>${t("seat moderates")}</b> \xB7 ${esc2(
     received
   )}/${esc2(total)} positions \xB7 ${esc2(status)}</span>`;
 }
@@ -1610,23 +1854,32 @@ function rail() {
     <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 === "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}">
+    const n = id === "demos" ? "" : id === "gente" ? String(Object.keys(E.skills).length) : id === "committee" ? String(E.deliberations.length) : id === "recepcion" ? String(E.reception?.pending ?? 0) : id === "red" ? String(E.roads.length) : id === "barrios" ? String(E.parcelas.length) : "";
+    return `<li class="${id === SECCION ? "aqui" : ""}" data-s="${id}" role="button"
+        tabindex="0" ${id === SECCION ? 'aria-current="page"' : ""}>
       <span>${esc2(t(et))}</span>${n ? `<span class="n">${n}</span>` : ""}</li>`;
   }).join("");
-  q("#railOtras").innerHTML = `<li class="${SECCION === "ciudades" ? "aqui" : ""}" data-s="ciudades">
+  q("#railOtras").innerHTML = `<li class="${SECCION === "ciudades" ? "aqui" : ""}" data-s="ciudades" role="button"
+      tabindex="0" ${SECCION === "ciudades" ? 'aria-current="page"' : ""}>
       <span>${t("All cities")}</span><span class="n">${E.ciudades.length}</span></li>`;
   todos("#rail li,#railOtras li").forEach((li) => {
-    li.onclick = () => {
+    const abre = () => {
       document.body.classList.remove("enGuia");
       SECCION = li.dataset.s ?? "mapa";
       pinta();
     };
+    li.onclick = abre;
+    li.onkeydown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      abre();
+    };
   });
   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">
+    cs.innerHTML = `<select id="cambiaCiudad" aria-label="${t("which city this hall manages")}"
+      title="${t("which city this hall manages")}">
       ${E.ciudades.map(
       (c) => `<option value="${esc2(c.ruta)}" ${c.actual ? "selected" : ""}>
         ${esc2(c.nombre)}</option>`
@@ -1668,8 +1921,10 @@ function rail() {
     location.href = "/?PASE=" + encodeURIComponent(PASE) + "&city=" + encodeURIComponent(r.city);
   };
 }
+var montada = null;
 function pinta() {
-  if (SECCION !== "demos") demos?.para();
+  montada?.desmonta?.();
+  montada = null;
   rail();
   q(".cuerpo").style.padding = "";
   q("#lienzo").style.maxWidth = "";
@@ -1694,7 +1949,8 @@ VISTAS.bienvenida = () => {
     yo: E.yo,
     datos: corto(E.datos)
   });
-  void guia.pinta(q("#lienzo"));
+  guia.monta(q("#lienzo"));
+  montada = guia;
 };
 VISTAS.ciudades = () => {
   const filas = E.ciudades.map(
@@ -1712,23 +1968,24 @@ VISTAS.ciudades = () => {
   ).join("");
   q("#lienzo").innerHTML = `<div><span class="sub">cities</span>
     <h1 style="margin-top:6px">${t("Your cities")}</h1>
-    <p class="prosa" style="margin-top:8px">One person, several autonomous cities: each has
+    <p class="prosa" style="margin-top:8px">${t(`One person, several autonomous cities: each has
     its own identity, domain, chair, <b>its own houses</b> and its own roads. A house is not
     shared \u2014 it stands inside the city that owns it, with its workspace and mounts under that
     city's folder \u2014 so two cities can each have a <code class="mono">docs</code> house and
     they are two different workers. They share nothing unless you build a road between
-    them.</p></div>
+    them.`)}</p></div>
     <div class="lista"><div class="filas">${filas}</div></div>
     <div class="campos" style="max-width:420px">
       <div class="campo"><label>${t("Start another city")}</label>
-        <input type="text" id="nuevaCiudad" placeholder="client-a, research, the book\u2026"></div>
+        <input type="text" id="nuevaCiudad" placeholder="${t("client-a, research, the book\u2026")}"></div>
       <button class="bt ppal" id="creaCiudad">Create it</button>
     </div>
     <div class="peligro">
       <h3>${t("Start this city over")}</h3>
-      <p class="prosa">Takes <b>${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>
+      <p class="prosa">${t(
+    "Takes {city} 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.",
+    { city: `<b>${esc2(E.city_name)}</b>` }
+  )}</p>
       <button class="bt malo" id="reiniciaCiudad">${t("Start over\u2026")}</button>
     </div>
     <p class="pista">Archiving <b>moves</b> a city into
@@ -1819,9 +2076,10 @@ VISTAS.ciudades = () => {
 };
 var demos = null;
 VISTAS.demos = () => {
-  if (!demos) demos = new Demos({ api, esc: esc2, pinta: renderActividad });
+  demos ??= new Demos({ api, esc: esc2, pinta: renderActividad });
   q("#lienzo").innerHTML = '<div id="demoHueco"></div>';
   demos.monta(q("#demoHueco"));
+  montada = demos;
 };
 VISTAS.resumen = () => {
   const mia = E.tarjetas.find((t2) => t2.user === E.yo);
@@ -1870,19 +2128,19 @@ VISTAS.resumen = () => {
              <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>${Object.keys(E.skills).length}</b><span>${t("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 class="cifra"><b>${E.deliberations.length}</b><span>${t("committee acts")}</span></div>
+      <div class="cifra"><b>${Object.values(E.skills).reduce((n, a) => n + a.skills.length, 0)}</b><span>${t("skills recognised")}</span></div>
     </div>
     <div class="luces">
-      <span class="luz ${E.tarjetas.length ? "on" : ""}">data repo</span>
+      <span class="luz ${E.tarjetas.length ? "on" : ""}">${t("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 ${E.plugin ? "on" : ""}">${t("plugin installed")}</span>
       <span class="luz ${sesionArriba ? "on" : "neutra"}">tmux session${sesionArriba ? " up" : ""}</span>
     </div>
-    <div><span class="sub">what is left</span>
+    <div><span class="sub">${t("what is left")}</span>
       <div class="tareas" style="margin-top:9px">${tareas.map(
     (t2) => `
         <div class="tarea ${t2.ok ? "hecha" : ""}">${t2.txt}
@@ -1891,9 +2149,9 @@ VISTAS.resumen = () => {
       </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>
+        <div class="orden"><span class="et2">${t("your day")}</span>
           <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>'}
+          ${sesionArriba ? `<button class="bt mini" data-copia="tmux attach -t ${esc2(E.sesion)}">copy</button>` : `<button class="bt mini ppal" id="abreSesion">${t("open my session")}</button>`}
         </div>
         <div class="orden"><span class="et2">the map</span>
           <code>${E.mapa ? esc2(E.mapa) : "not drawn yet"}</code>
@@ -1986,26 +2244,26 @@ 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>
+  q("#lienzo").innerHTML = `<div><span class="sub">${t("my seat")}</span>
     <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">${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>
+    <div><span class="sub">${t("work domain")}</span><div class="rolejilla" id="domains" style="margin-top:9px">
+      <p class="cargando">${t("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="cargando">${t("reading the role files")}</p></div></div>
+    <div><span class="sub">${t("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
+      one works on \u2014 lives in <b>${t("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>
+      <button class="bt" type="button" data-ir="gente" style="margin-left:8px">${t("Open the roster")}</button></p></div>
+    <div><span class="sub">${t("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>
+      <button class="bt ppal" id="guardaPuesto">${t("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";
@@ -2049,28 +2307,28 @@ async function puesto() {
   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="${esc2(o.title)}" placeholder="Concrete enough to argue with \u2014 empty skips it">
+    <div class="campo"><label>${t("The goal, in one line")}</label>
+      <input type="text" id="g_title" value="${esc2(o.title)}" placeholder="${t("Concrete enough to argue with \u2014 empty skips it")}">
     </div>
     <div class="dos">
-      <div class="campo"><label>How it is measured</label>
+      <div class="campo"><label>${t("How it is measured")}</label>
         <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>
+      <div class="campo"><label>${t("The command that returns it, if a command can")}</label>
         <input type="text" class="mono" id="g_command" value="${esc2(o.command)}"
-          placeholder="empty for a qualitative goal"></div>
+          placeholder="${t("empty for a qualitative goal")}"></div>
     </div>
-    <div class="campo"><label>\u2026or who judges it, and how often</label>
+    <div class="campo"><label>${t("\u2026or who judges it, and how often")}</label>
       <input type="text" id="g_manual" value="${esc2(o.manual)}"
-        placeholder="in prose: the architect reads the AGENTS.md files on Fridays">
+        placeholder="${t("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>
+      <div class="campo"><label>${t("What it returns today")}</label>
         <input type="text" class="mono" id="g_baseline" value="${esc2(o.baseline)}"></div>
-      <div class="campo"><label>Where it has to get to</label>
+      <div class="campo"><label>${t("Where it has to get to")}</label>
         <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>
+    <div class="campo" style="max-width:240px"><label>${t("By when")}</label>
       <input type="text" id="g_by" value="${esc2(o.by ?? "this quarter")}"></div>`;
   const val = (id) => q(id).value.trim();
   q("#guardaPuesto").onclick = async () => {
@@ -2117,23 +2375,23 @@ VISTAS.barrios = () => {
   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
+    q("#lienzo").innerHTML = `<div><span class="sub">${t("districts & houses")}</span>
+      <h1 style="margin-top:6px">${t("The modelling no tool can do for you")}</h1>
+      <p class="prosa" style="margin-top:8px">${t(`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>
+      \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">
+          <input type="text" id="nuevaU" placeholder="${t("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>
+        <button class="bt ppal" id="guardaBarrios">${t("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(
@@ -2262,7 +2520,7 @@ VISTAS.red = () => {
   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>
+    <h1 style="margin-top:6px">${t("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>
@@ -2271,14 +2529,14 @@ VISTAS.red = () => {
           <span class="ag">${esc2(r.address)}</span>
           <span class="rp">${r.local ? "local road" : "remote road"}</span>
           <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>
+  ).join("") || `<p class="prosa">${t("No roads yet. This city is isolated on purpose.")}</p>`}</div>
+    <div><span class="sub">${t("other cities on this machine")}</span>
       <div class="gente" style="margin-top:9px">${locales.map(
     (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>
+  ).join("") || `<p class="prosa">${t("No unconnected local cities.")}</p>`}</div></div>
+    <div class="orden"><span class="et2">${t("remote invitation \xB7 public, no token")}</span>
       <code>${esc2(invitation)}</code>
       <button class="bt mini" data-copia="${esc2(invitation)}">copy</button>
     </div>`;
@@ -2306,15 +2564,269 @@ VISTAS.red = () => {
     };
   });
 };
+VISTAS.recepcion = () => {
+  q("#lienzo").innerHTML = `<div><span class="sub">${t("reception")}</span>
+    <h1 style="margin-top:6px">${t("Messages wait for you, not your agents")}</h1>
+    <p class="prosa" style="margin-top:8px">${t(
+    "Remote text stops here as inert text. Read it, reject it with a reason, or choose the cities that should receive it. Until then no model can read it."
+  )}</p></div>
+    <div class="recModo" id="recModo">
+      <div><span class="et2">${t("routing mode")}</span><b>${t("Manual review")}</b>
+        <p>${t("Every message needs a person before it reaches a city.")}</p></div>
+      <button class="bt mini" type="button" data-rec-open-config>${t("Configure Auto")}</button>
+    </div>
+    <div id="recConfig" hidden></div>
+    <div id="recLista"><p class="prosa">${t("Reading your reception\u2026")}</p></div>`;
+  void cargaRecepcion();
+};
+async function cargaRecepcion() {
+  const hueco = q("#recLista");
+  let estado;
+  try {
+    estado = await api("/api/reception");
+  } catch {
+    hueco.innerHTML = `<div class="recError">${t("Could not read your reception")}</div>`;
+    return;
+  }
+  if (estado.error) {
+    hueco.innerHTML = `<div class="recError">${esc2(estado.error)}</div>`;
+    return;
+  }
+  E.reception = {
+    pending: estado.summary.pending,
+    pendingBytes: estado.summary.pendingBytes,
+    routingMode: estado.settings.routingMode,
+    reviewPolicy: estado.settings.reviewPolicy,
+    routerProfile: estado.settings.routerProfile,
+    autoAvailable: estado.settings.autoAvailable
+  };
+  const reglas = new Map(estado.settings.autoRules.map((rule) => [rule.cityId, rule.keywords]));
+  const modo = q("#recModo");
+  modo.innerHTML = `<div><span class="et2">${t("routing mode")}</span>
+    <b>${estado.settings.routingMode === "auto" ? t("Automatic routing") : t("Manual review")}</b>
+    <p>${estado.settings.routingMode === "auto" ? t("Only one clear, low-risk rule match can leave the human queue automatically.") : t("Every message needs a person before it reaches a city.")}</p></div>
+    <button class="bt mini" type="button" data-rec-open-config>${t("Configure Auto")}</button>`;
+  const configuracion = q("#recConfig");
+  configuracion.innerHTML = `<form class="recAutoConfig" data-rec-config>
+    <fieldset><legend>${t("Routing policy")}</legend>
+      <label><input type="radio" name="routing_mode" value="manual"
+        ${estado.settings.routingMode === "manual" ? "checked" : ""}> ${t("Keep human review")}</label>
+      <label><input type="radio" name="routing_mode" value="auto"
+        ${estado.settings.routingMode === "auto" ? "checked" : ""}> ${t("Use the local rule router")}</label>
+    </fieldset>
+    <div class="recReglas"><p>${t("Write comma-separated words or phrases for each destination. Empty cities are never selected.")}</p>
+      ${estado.cities.map(
+    (city) => `<label><span><b>${esc2(city.name)}</b><small>${esc2(city.address)}</small></span>
+        <input type="text" name="rule-${esc2(city.id)}" maxlength="1200"
+          data-rule-city="${esc2(city.id)}" value="${esc2((reglas.get(city.id) ?? []).join(", "))}"
+          placeholder="${t("e.g. contract, privacy, legal review")}"></label>`
+  ).join("")}</div>
+    <p class="recAutoAviso">${t("Suspicious, unmatched, or ambiguous text always waits for you. Auto never executes, answers, or opens links.")}</p>
+    <button class="bt ppal" type="submit">${t("Save routing policy")}</button>
+  </form>`;
+  q("[data-rec-open-config]", modo).onclick = () => {
+    configuracion.hidden = !configuracion.hidden;
+  };
+  rail();
+  const conexiones = estado.connections.length ? `<section class="recConexiones"><div class="recSeccion"><b>${t("New encrypted message")}</b>
+        <span>${estado.outbox.queued ? plural(estado.outbox.queued, "message queued", "messages queued") : t("Messages leave from this computer with end-to-end encryption.")}</span></div>
+      <form class="recCompose" data-rec-send>
+        <label class="recComposePersona" for="rec-send-connection"><span>${t("Write to")}</span>
+          <select id="rec-send-connection" name="connection" required>
+            ${estado.connections.map(
+    (conexion) => `<option value="${esc2(conexion.id)}">${esc2(conexion.name)}</option>`
+  ).join("")}
+          </select>
+        </label>
+        <label class="recComposeTexto" for="rec-send-text"><span>${t("Message")}</span>
+          <textarea id="rec-send-text" name="text" rows="3" maxlength="11500" required
+            placeholder="${t("Your message will stop in their private reception.")}"></textarea>
+        </label>
+        <button class="bt ppal" type="submit">${t("Send securely")}</button>
+      </form></section>` : "";
+  const vacia = !estado.messages.length ? `<div class="recVacia"><b>${t("Reception clear")}</b>
+        <p>${t("No remote message is waiting for a decision.")}</p></div>` : "";
+  const ciudades = estado.cities.map(
+    (ciudad) => `<label class="recDestino"><input type="checkbox" name="destination"
+        value="${esc2(ciudad.id)}"><span><b>${esc2(ciudad.name)}</b>
+        <small>${esc2(ciudad.address)}</small></span></label>`
+  ).join("");
+  const pendientes = estado.messages.length ? `<div class="recResumen"><b>${estado.summary.pending}</b>
+      <span>${plural(estado.summary.pending, "message waiting", "messages waiting")}</span>
+      <small>${formateaBytes(estado.summary.pendingBytes)} \xB7 ${t("local only")}</small></div>
+    <div class="recMensajes">${estado.messages.map(
+    (mensaje) => `<article class="recMensaje">
+          <header><div><span class="recOrigen">${esc2(mensaje.fromName)}</span>
+            <span>${esc2(fechaRecepcion(mensaje.receivedAt))}</span></div>
+            <span class="recSeguro">${mensaje.kind === "rejection" ? t("Reply to a rejected message") : t("No agent has read this")}</span></header>
+          <pre class="recTexto">${esc2(mensaje.text)}</pre>
+          ${mensaje.kind === "rejection" ? `<div class="recAvisoAccion">
+            <button class="bt mini" type="button" data-rec-dismiss="${esc2(mensaje.id)}">${t("Dismiss")}</button>
+          </div>` : `<div class="recAcciones">
+            <form data-rec-route="${esc2(mensaje.id)}">
+              <fieldset><legend>${t("Send to")}</legend><div class="recDestinos">${ciudades}</div></fieldset>
+              <button class="bt ppal" type="submit" disabled>${t("Route to selected cities")}</button>
+            </form>
+            <details><summary>${t("Reject and reply with a reason")}</summary>
+              <form data-rec-reject="${esc2(mensaje.id)}">
+                <label for="rec-reason-${esc2(mensaje.id)}">${t("Reason sent back securely")}</label>
+                <input id="rec-reason-${esc2(mensaje.id)}" type="text" name="reason"
+                  maxlength="500" required
+                  placeholder="${t("Reason for rejecting this message")}">
+                <button class="bt malo" type="submit">${t("Reject and send reason")}</button>
+              </form>
+            </details>
+          </div>`}
+        </article>`
+  ).join("")}</div>` : "";
+  hueco.innerHTML = `${vacia}${pendientes}${conexiones}`;
+  enlazaRecepcion();
+}
+function enlazaRecepcion() {
+  q("[data-rec-config]").onsubmit = async (evento) => {
+    evento.preventDefault();
+    const formulario = evento.currentTarget;
+    const boton = q("button[type=submit]", formulario);
+    const routingMode = q("input[name=routing_mode]:checked", formulario).value;
+    const rules = todos("[data-rule-city]", formulario).map((campo) => ({
+      city_id: campo.dataset.ruleCity,
+      keywords: campo.value.split(",").map((value) => value.trim()).filter(Boolean)
+    })).filter((rule) => rule.keywords.length);
+    boton.disabled = true;
+    const respuesta = await api("/api/reception", {
+      method: "POST",
+      body: JSON.stringify({ action: "configure", routing_mode: routingMode, rules })
+    });
+    if (!respuesta.ok) {
+      boton.disabled = false;
+      toast(respuesta.error ?? t("Could not save the routing policy"), true);
+      return;
+    }
+    toast(t("Routing policy saved."));
+    await cargaRecepcion();
+  };
+  todos("[data-rec-send]").forEach((formulario) => {
+    formulario.onsubmit = async (evento) => {
+      evento.preventDefault();
+      const boton = q("button[type=submit]", formulario);
+      const campo = q("textarea[name=text]", formulario);
+      const connectionId = q("select[name=connection]", formulario).value;
+      if (!connectionId || !campo.value.trim()) return;
+      boton.disabled = true;
+      const respuesta = await api("/api/reception", {
+        method: "POST",
+        body: JSON.stringify({
+          action: "send",
+          connection_id: connectionId,
+          text: campo.value
+        })
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? t("Could not queue the message"), true);
+        return;
+      }
+      campo.value = "";
+      toast(t("Message queued on this computer."));
+      await cargaRecepcion();
+    };
+  });
+  todos("[data-rec-dismiss]").forEach((boton) => {
+    boton.onclick = async () => {
+      boton.disabled = true;
+      const respuesta = await api("/api/reception", {
+        method: "POST",
+        body: JSON.stringify({
+          action: "reject",
+          message_id: boton.dataset.recDismiss,
+          reason: "Dismissed response"
+        })
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? t("Could not dismiss the response"), true);
+        return;
+      }
+      await cargaRecepcion();
+    };
+  });
+  todos("[data-rec-route]").forEach((formulario) => {
+    const boton = q("button[type=submit]", formulario);
+    const actualiza = () => {
+      boton.disabled = !formulario.querySelector("input:checked");
+    };
+    formulario.onchange = actualiza;
+    formulario.onsubmit = async (evento) => {
+      evento.preventDefault();
+      const destinations = todos(
+        "input[name=destination]:checked",
+        formulario
+      ).map((campo) => campo.value);
+      if (!destinations.length) return;
+      boton.disabled = true;
+      const respuesta = await api("/api/reception", {
+        method: "POST",
+        body: JSON.stringify({
+          action: "route",
+          message_id: formulario.dataset.recRoute,
+          destinations
+        })
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? t("Could not route the message"), true);
+        return;
+      }
+      toast(t("Message routed. Only the selected cities can now read it."));
+      await cargaRecepcion();
+    };
+  });
+  todos("[data-rec-reject]").forEach((formulario) => {
+    formulario.onsubmit = async (evento) => {
+      evento.preventDefault();
+      const boton = q("button[type=submit]", formulario);
+      const reason = q("input[name=reason]", formulario).value.trim();
+      if (!reason) return;
+      boton.disabled = true;
+      const respuesta = await api("/api/reception", {
+        method: "POST",
+        body: JSON.stringify({
+          action: "reject",
+          message_id: formulario.dataset.recReject,
+          reason
+        })
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? t("Could not reject the message"), true);
+        return;
+      }
+      toast(t("Message rejected. Your reason is queued for encrypted delivery."));
+      await cargaRecepcion();
+    };
+  });
+}
+function fechaRecepcion(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString(idioma() === "es" ? "es-ES" : "en-GB", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  });
+}
+function formateaBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 VISTAS.committee = () => {
   q("#lienzo").innerHTML = `<div><span class="sub">committee</span>
-    <h1 style="margin-top:6px">Decisions with a visible chain of custody</h1>
+    <h1 style="margin-top:6px">${t("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>
+      <code>${t("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(
@@ -2328,7 +2840,7 @@ VISTAS.committee = () => {
               ${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>`;
+  ).join("") || `<p class="prosa">${t("No committee acts yet. Open one only when the seat needs specialised evidence.")}</p>`}</div>`;
   enlaza();
 };
 function opciones2(valores, actual) {
@@ -2350,9 +2862,12 @@ VISTAS.gente = () => {
     const g = a.growth;
     const crecido = Math.min(1, Math.log2(g.floors + 1) / 8);
     const skills = E.skills[a.name]?.skills ?? [];
-    const esClaude = a.runtime === "claude";
-    const opcionesModelo = opciones2([""].concat(MODELOS), a.model) + '<option value="__otro__">custom\u2026</option>';
-    const opcionesEsfuerzo = opciones2([""].concat(ESFUERZOS), a.effort);
+    const motorDelAgente = motorDe(a.runtime);
+    const opcionesModelo = opciones2([""].concat(motorDelAgente.modelos), a.model) + `<option value="__otro__">${t("custom\u2026")}</option>`;
+    const opcionesEsfuerzo = opciones2(
+      [""].concat(ESFUERZOS),
+      motorDelAgente.esfuerzo ? a.effort : ""
+    );
     const opcionesRuntime = opciones2(RUNTIMES, a.runtime);
     const montajes = a.mounts ?? [];
     return `
@@ -2364,22 +2879,21 @@ VISTAS.gente = () => {
           <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="${esc2(a.slug)}"
-              title="Reroll this agent's face \u2014 deterministic, persisted on the card">\u{1F3B2}</button>
+              title="${t("Reroll this agent's face \u2014 deterministic, persisted on the card")}">\u{1F3B2}</button>
             <button class="rpgMini rpgIns" type="button" data-agente="${esc2(a.slug)}"
-              data-file="CLAUDE.md" title="Instructions the Claude runtime reads">CLAUDE.md</button>
+              data-file="CLAUDE.md" title="${t("Instructions the Claude runtime reads")}">CLAUDE.md</button>
             <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>
+              data-file="AGENTS.md" title="${t("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="${esc2(a.slug)}" data-campo="model"
-            ${esClaude ? "" : 'disabled title="This window runs its own CLI; its model lives in its own flags"'}>
+          <select class="rpgSel" data-agente="${esc2(a.slug)}" data-campo="model">
             ${opcionesModelo}</select></div>
         <div class="rpgFila"><label>${t("effort")}</label>
           ${barra(esfuerzo / 5, esfuerzo ? "" : "defecto")}
           <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"'}>
+            ${motorDelAgente.esfuerzo ? "" : `disabled title="${t("This CLI has no effort setting.")}"`}>
             ${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="${esc2(
@@ -2388,7 +2902,7 @@ VISTAS.gente = () => {
       t(a.cli.connected ? "connected" : a.cli.installed ? "idle" : "missing")
     )} \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>
+            title="${t("Run the engine for real: --version, and the login state on Claude")}">test</button></span>
           <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>
@@ -2397,7 +2911,7 @@ VISTAS.gente = () => {
                               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="${esc2(a.slug)}"
+          ${a.legacy ? `<span class="rpgDato">${t("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)}
@@ -2405,23 +2919,23 @@ VISTAS.gente = () => {
         <div class="rpgSkills"><label>${t("skills")} \xB7 ${skills.length}</label>
           ${skills.length ? skills.map(
       (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>`
+                              data-skill="${esc2(s.dir)}" title="${t("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">
+            title="${t("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="${esc2(a.slug)}"></label></div>
       </div>`;
   };
   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>,
+    <p class="prosa" style="margin-top:8px">${t(`<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">${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
+    here you see their houses.`)}</p>
+    <p class="prosa">${t(
+    "They belong to <b>this</b> city and only to it: each one\u2019s workspace and its mounts live inside {donde}, so another city has its own people even if you give them the same names.",
+    { donde: `<code class="mono">${esc2(corto(E.datos))}/agents/</code>` }
+  )} Every agent is whole here: the kind of work
     it does, its role, everything it works on \u2014 any number of repositories and document
     folders at once \u2014 the engine and effort that run it, and the skills in its own home.</p>
     <p class="prosa">Every number is real: growth from what the agent actually produced,
@@ -2613,8 +3127,18 @@ VISTAS.gente = () => {
         }
       });
       if (dicho === null || !elegidas.length) return;
-      for (const ruta of elegidas)
-        await montaje({ agent: boton.dataset.agente ?? "", add: ruta }, t("Mounted"));
+      const agente = boton.dataset.agente ?? "";
+      const fallos = await Promise.all(
+        elegidas.map(
+          (ruta) => api("/api/montaje", {
+            method: "POST",
+            body: JSON.stringify({ agent: agente, add: ruta })
+          }).then((r) => r.ok ? "" : `${ruta}: ${r.error ?? "could not mount"}`).catch((e) => `${ruta}: ${String(e)}`)
+        )
+      );
+      const malos = fallos.filter(Boolean);
+      toast(malos.length ? malos.join("; ") : t("Mounted"), malos.length > 0);
+      void refresca();
     };
   });
   todos(".rpgDesmonta").forEach((boton) => {