agents-city 0.1.0 → 0.2.1

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

@@ -1,3 +1,395 @@
+// city/web/src/bienvenida.ts
+var CLASES = [
+  [
+    "code",
+    "It writes code",
+    "Its house grows with the pull requests it merges. Mounts repositories and worktrees."
+  ],
+  [
+    "knowledge",
+    "It keeps knowledge",
+    "Its house grows with the documents it writes. Needs no git at all."
+  ],
+  ["coordinator", "It coordinates", "Its house grows with the decisions it records."]
+];
+var PASOS = ["Welcome", "The work", "Your chair", "The houses", "Ready"];
+function casita(color) {
+  return `<svg viewBox="0 0 120 108" role="img" aria-label="an isometric house" class="bvCasa">
+    <polygon points="60,10 112,40 60,70 8,40" fill="${color}" opacity=".95"/>
+    <polygon points="8,40 60,70 60,100 8,70" fill="${color}" opacity=".62"/>
+    <polygon points="112,40 60,70 60,100 112,70" fill="${color}" opacity=".40"/>
+  </svg>`;
+}
+var Bienvenida = class {
+  constructor(p) {
+    this.p = p;
+  }
+  paso = 0;
+  dominios = [];
+  roles = [];
+  rolesDeAgente = [];
+  repos = [];
+  dominio = "";
+  rol = "";
+  roster = [];
+  enCurso = null;
+  guardando = false;
+  buscandoRepos = false;
+  reposListos = false;
+  lienzo = null;
+  /** Draw the current step into `lienzo`. The only entry point. */
+  async pinta(lienzo) {
+    this.lienzo = lienzo;
+    if (!this.dominios.length) {
+      lienzo.innerHTML = '<p class="cargando">reading the domain packs</p>';
+      const [d, ra] = await Promise.all([
+        this.p.api("/api/domains"),
+        this.p.api("/api/roles?scope=agent")
+      ]);
+      this.dominios = d.domains;
+      this.rolesDeAgente = ra.roles;
+    }
+    lienzo.innerHTML = `<div class="bv">${this.cabecera()}${await this.cuerpo()}</div>`;
+    this.enlaza(lienzo);
+  }
+  cabecera() {
+    const puntos = PASOS.map(
+      (nombre, i) => `<span class="bvPunto ${i === this.paso ? "aqui" : i < this.paso ? "hecho" : ""}"
+          title="${this.p.esc(nombre)}"><i></i>${this.p.esc(nombre)}</span>`
+    ).join("");
+    return `<div class="bvPasos">${puntos}</div>`;
+  }
+  async cuerpo() {
+    switch (this.paso) {
+      case 0:
+        return this.pantallaHola();
+      case 1:
+        return this.pantallaDominio();
+      case 2:
+        return await this.pantallaRol();
+      case 3:
+        return this.pantallaAgentes();
+      default:
+        return this.pantallaFinal();
+    }
+  }
+  // ── 0. what this is ────────────────────────────────────────────────────────
+  pantallaHola() {
+    return `
+      <div class="bvHola">
+        <div class="bvArte">${casita("#7048e8")}${casita("#45b9a7")}${casita("#f2674a")}</div>
+        <div>
+          <span class="sub">welcome</span>
+          <h1>A city is you, and the houses around you</h1>
+          <p class="prosa">You take the chair. Around it, one <b>house</b> per worker \u2014 an
+          <b>agent</b> \u2014 each with its own window, its own role and its own corner of your
+          disk: a repository, three of them, a folder of documents, whatever it actually
+          works on. The map draws them as houses that grow with the work done in them, and
+          many houses are a city. They never talk to each other behind your back: you chair,
+          they answer.</p>
+          <p class="prosa">Everything lives as plain files in
+          <code class="mono">${this.p.esc(this.p.datos)}</code>. Nothing leaves this machine,
+          there is no account, and you can edit any of it by hand afterwards.</p>
+          <p class="prosa"><b>Four questions and you are working.</b> You can skip any of them
+          and change everything later.</p>
+          <div class="bvBotones">
+            <button class="bt ppal" data-bv="siguiente">Let\u2019s build it</button>
+            <button class="bt" data-bv="salir">I\u2019ll set it up myself</button>
+          </div>
+        </div>
+      </div>`;
+  }
+  // ── 1. the domain ─────────────────────────────────────────────────────────
+  pantallaDominio() {
+    const tarjetas = this.dominios.map(
+      (d) => `
+      <button class="bvOpcion ${this.dominio === d.id ? "elegida" : ""}" data-bv="dominio"
+        data-id="${this.p.esc(d.id)}">
+        <b>${this.p.esc(d.name)}</b><span>${this.p.esc(d.summary)}</span></button>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">question 1 of 4</span>
+        <h1>What kind of work happens here?</h1>
+        <p class="prosa">It decides the vocabulary, the roles you will be offered and what
+        counts as evidence in a decision. A clinic does not ship pull requests, and a law
+        firm does not measure story points. Pick the closest one \u2014 you can change it later.</p>
+        <div class="bvRejilla">${tarjetas}</div>
+        <div class="bvBotones">
+          <button class="bt" data-bv="atras">Back</button>
+          <button class="bt ppal" data-bv="siguiente" ${this.dominio ? "" : "disabled"}>Next</button>
+        </div>
+      </div>`;
+  }
+  // ── 2. your chair ─────────────────────────────────────────────────────────
+  async pantallaRol() {
+    if (!this.roles.length || this.roles[0]?.id === void 0) {
+      const r = await this.p.api(
+        "/api/roles?domain=" + encodeURIComponent(this.dominio)
+      );
+      this.roles = r.roles;
+    }
+    const tarjetas = this.roles.map(
+      (r) => `
+      <button class="bvOpcion ${this.rol === r.id ? "elegida" : ""}" data-bv="rol"
+        data-id="${this.p.esc(r.id)}">
+        <b>${this.p.esc(r.name)}</b><span>${this.p.esc(r.summary || r.trade)}</span></button>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">question 2 of 4</span>
+        <h1>And what are you, here?</h1>
+        <p class="prosa">You chair this city whatever you answer \u2014 this is your
+        <b>speciality</b>, not your authority. It shapes the perspective you bring to a
+        decision and the knowledge files the city writes for you. <b>Blank</b> is a real
+        answer: it means no preset knowledge.</p>
+        <div class="bvRejilla">${tarjetas}</div>
+        <div class="bvBotones">
+          <button class="bt" data-bv="atras">Back</button>
+          <button class="bt ppal" data-bv="siguiente" ${this.rol ? "" : "disabled"}>Next</button>
+        </div>
+      </div>`;
+  }
+  // ── 3. the agents ─────────────────────────────────────────────────────────
+  pantallaAgentes() {
+    this.buscaReposUnaVez();
+    if (!this.enCurso) return this.listaDeAgentes();
+    return this.formularioDeAgente(this.enCurso);
+  }
+  buscaReposUnaVez() {
+    if (this.reposListos || this.buscandoRepos) return;
+    this.buscandoRepos = true;
+    void this.p.api("/api/misrepos?user=" + encodeURIComponent(this.p.yo)).then((r) => {
+      this.repos = (r.repos ?? []).slice(0, 200);
+    }).catch(() => {
+      this.repos = [];
+    }).finally(() => {
+      this.buscandoRepos = false;
+      this.reposListos = true;
+      if (this.lienzo && this.paso === 3) void this.pinta(this.lienzo);
+    });
+  }
+  listaDeAgentes() {
+    const fichas = this.roster.map(
+      (a) => `
+      <div class="bvFicha">
+        <b>${this.p.esc(a.nombre)}</b>
+        <span>${this.p.esc(a.clase)} \xB7 ${this.p.esc(a.rol)}</span>
+        <span class="de">${a.montajes.length ? this.p.esc(a.montajes.map((m) => m.split("/").pop()).join(", ")) : "nothing mounted yet"}</span>
+      </div>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">question 3 of 4</span>
+        <h1>${this.roster.length ? "Who else lives here?" : "Who lives in your city?"}</h1>
+        <p class="prosa">Every house holds one worker \u2014 an <b>agent</b> \u2014 with its own window,
+        its own role and its own corner of your disk. A house is <b>not</b> a repository: one
+        can answer for three services and a folder of documents at once, and a house whose
+        work is documents needs no git anywhere.</p>
+        ${this.roster.length ? `<div class="bvFichas">${fichas}</div>` : ""}
+        <div class="bvBotones">
+          <button class="bt ppal" data-bv="nuevo">${this.roster.length ? "Add another house" : "Build the first house"}</button>
+          <button class="bt" data-bv="siguiente">${this.roster.length ? "That is everyone" : "Skip \u2014 just me for now"}</button>
+        </div>
+      </div>`;
+  }
+  formularioDeAgente(a) {
+    const clases = CLASES.map(
+      ([id, titulo, porque]) => `
+      <button class="bvOpcion ${a.clase === id ? "elegida" : ""}" data-bv="clase" data-id="${id}">
+        <b>${titulo}</b><span>${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 sugeridos = this.repos.filter((r) => r.mio).slice(0, 12).map(
+      (r) => `<button class="bvChip ${a.montajes.includes(r.ruta) ? "elegida" : ""}"
+          data-bv="monta" data-ruta="${this.p.esc(r.ruta)}">${this.p.esc(r.nombre)}</button>`
+    ).join("");
+    return `
+      <div class="bvPaso">
+        <span class="sub">a new house</span>
+        <h1>Who lives in it?</h1>
+        <div class="campo"><label>What do you call it?</label>
+          <input type="text" id="bvNombre" value="${this.p.esc(a.nombre)}"
+            placeholder="urgencias, api, the handbook \u2014 whatever you would say out loud"></div>
+        <label class="bvEtiqueta">What kind of work does it do?</label>
+        <div class="bvRejilla bvTres">${clases}</div>
+        <div class="campo"><label>Its role \u2014 its speciality, never authority</label>
+          <select id="bvRol">${roles}</select></div>
+        <label class="bvEtiqueta">What does it work on?</label>
+        <p class="pista">Pick any of your repositories, and add folders by hand. As many as
+        you like \u2014 this is the part that makes it an agent and not a repo.</p>
+        ${sugeridos ? `<div class="bvChips">${sugeridos}</div>` : this.buscandoRepos ? '<p class="cargando">looking through your disk for repositories\u2026</p>' : '<p class="pista">No repositories found on this disk \u2014 add folders by path below.</p>'}
+        <div class="campo"><label>\u2026or a path, and Enter</label>
+          <input type="text" id="bvRuta" placeholder="~/documents/handbook"></div>
+        ${a.montajes.length ? `<p class="pista">Working on: <b>${this.p.esc(a.montajes.join(", "))}</b></p>` : ""}
+        <div class="bvBotones">
+          <button class="bt" data-bv="cancela">Cancel</button>
+          <button class="bt ppal" data-bv="guarda" ${this.guardando ? "disabled" : ""}>${this.guardando ? "building\u2026" : "Build it"}</button>
+        </div>
+      </div>`;
+  }
+  // ── 4. done ───────────────────────────────────────────────────────────────
+  pantallaFinal() {
+    return `
+      <div class="bvPaso">
+        <span class="sub">ready</span>
+        <h1>${this.p.esc(this.p.ciudad)} is alive</h1>
+        <p class="prosa">Your seat is written and ${this.roster.length ? `<b>${this.roster.length}</b> house${this.roster.length === 1 ? "" : "s"} stand${this.roster.length === 1 ? "s" : ""} around it` : "the city is waiting for its first house"}. Everything you just answered is a plain file you can read and edit.</p>
+        <p class="prosa">What people usually do next:</p>
+        <div class="bvSiguientes">
+          <button class="bt ppal" data-bv="sesion">Open my session</button>
+          <button class="bt" data-bv="ir-gente">See the houses</button>
+          <button class="bt" data-bv="ir-mapa">Draw the map</button>
+          <button class="bt" data-bv="ir-puesto">Set a goal</button>
+        </div>
+        <p class="pista">A goal is optional, and the city works without one \u2014 but a round with
+        no goal is a status report, because there is nothing to argue against.</p>
+      </div>`;
+  }
+  // ── wiring ────────────────────────────────────────────────────────────────
+  enlaza(lienzo) {
+    const repinta = () => void this.pinta(lienzo);
+    lienzo.querySelectorAll("[data-bv]").forEach((el) => {
+      el.onclick = async (evento) => {
+        evento.preventDefault();
+        const que = el.dataset.bv;
+        if (que === "salir") return this.p.vete("resumen");
+        if (que === "atras") {
+          this.paso = Math.max(0, this.paso - 1);
+          return repinta();
+        }
+        if (que === "dominio") {
+          this.dominio = el.dataset.id ?? "";
+          this.roles = [];
+          this.rol = "";
+          return repinta();
+        }
+        if (que === "rol") {
+          this.rol = el.dataset.id ?? "";
+          return repinta();
+        }
+        if (que === "nuevo") {
+          this.enCurso = { nombre: "", clase: "code", rol: "blank", montajes: [] };
+          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 === "cancela") {
+          this.enCurso = null;
+          return repinta();
+        }
+        if (que === "guarda") return void await this.guardaAgente(lienzo);
+        if (que === "siguiente") return void await this.avanza(lienzo);
+        if (que === "sesion") return void await this.abreSesion();
+        if (que === "ir-gente") return this.p.vete("gente");
+        if (que === "ir-mapa") return this.p.vete("mapa");
+        if (que === "ir-puesto") return this.p.vete("puesto");
+      };
+    });
+    const 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("#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;
+  }
+  async guardaAgente(lienzo) {
+    this.recogeFormulario(lienzo);
+    const a = this.enCurso;
+    if (!a) return;
+    if (!a.nombre.trim()) {
+      this.p.aviso("Give it a name \u2014 it is how you will call it in its window", true);
+      return;
+    }
+    this.guardando = true;
+    await this.pinta(lienzo);
+    try {
+      await this.aseguraFicha();
+      const r = await this.p.api("/api/agentes", {
+        method: "POST",
+        body: JSON.stringify({ name: a.nombre.trim(), kind: a.clase, role: a.rol })
+      });
+      if (!r.ok || !r.agent) {
+        this.p.aviso(r.error || "Could not add that agent", true);
+        return;
+      }
+      for (const ruta of a.montajes) {
+        const m = await this.p.api("/api/montaje", {
+          method: "POST",
+          body: JSON.stringify({ agent: r.agent, add: ruta })
+        });
+        if (!m.ok) this.p.aviso(`${ruta}: ${m.error ?? "could not mount"}`, true);
+      }
+      this.roster.push({ ...a, nombre: a.nombre.trim() });
+      this.enCurso = null;
+      this.p.aviso(`${a.nombre.trim()} joined the city`);
+      await this.p.refresca();
+    } catch (e) {
+      this.p.aviso(String(e), true);
+    } finally {
+      this.guardando = false;
+      await this.pinta(lienzo);
+    }
+  }
+  async aseguraFicha() {
+    await this.p.api("/api/ficha", {
+      method: "POST",
+      body: JSON.stringify({ domain: this.dominio || "software", role: this.rol || "blank" })
+    });
+  }
+  async avanza(lienzo) {
+    const escribeLaFicha = this.paso === 2;
+    this.paso = Math.min(PASOS.length - 1, this.paso + 1);
+    await this.pinta(lienzo);
+    if (escribeLaFicha) {
+      await this.aseguraFicha();
+      await this.p.refresca();
+    }
+  }
+  async abreSesion() {
+    try {
+      const r = await this.p.api("/api/sesion", {
+        method: "POST",
+        body: JSON.stringify({ user: this.p.yo })
+      });
+      this.p.aviso(
+        r.ok && r.attach ? `Session built \u2014 attach with: ${r.attach}` : r.error ?? "Could not",
+        !r.ok
+      );
+    } catch (e) {
+      this.p.aviso(String(e), true);
+    }
+  }
+};
+
 // city/web/src/activity.ts
 var MAP_ACTIVITY_PROTOCOL = "agents-city-map-activity/1";
 function isMapNavMessage(value) {
@@ -64,13 +456,21 @@ var SECCIONES = [
   ["resumen", "Overview"],
   ["mapa", "The map"],
   ["puesto", "My seat"],
-  ["barrios", "Districts & houses"],
+  ["barrios", "Districts"],
   ["red", "Roads"],
   ["committee", "Committee"],
-  ["gente", "Agents & skills"]
+  ["gente", "Houses"],
+  ["ciudades", "Cities"]
 ];
+var primeraCarga = true;
 async function refresca() {
   E = await api("/api/estado");
+  if (primeraCarga) {
+    primeraCarga = false;
+    const mia = E.tarjetas.find((t) => t.user === E.yo);
+    if (!mia || (E.agents ?? []).length === 0) SECCION = "bienvenida";
+    else if (!E.mapa) SECCION = "resumen";
+  }
   pinta();
   pintaAvisoDeVersion();
   pintaDemoControles();
@@ -385,13 +785,20 @@ function icono(kind) {
   return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h14v12H5zM8 10h8m-8 4h5"/></svg>';
 }
 function rail() {
-  q("#rail").innerHTML = SECCIONES.map(([id, et]) => {
+  const cuantos = (E.agents ?? []).length;
+  q("#railCiudad").innerHTML = `<span class="railEtiqueta">you are in</span>
+    <b>${esc(E.city_name)}</b>
+    <span class="railDe">${esc(E.domain)} \xB7 ${cuantos} house${cuantos === 1 ? "" : "s"}</span>`;
+  q("#rail").innerHTML = SECCIONES.filter(([id]) => id !== "ciudades").map(([id, et]) => {
     const n = id === "gente" ? String(Object.keys(E.skills).length) : id === "committee" ? String(E.deliberations.length) : id === "red" ? String(E.roads.length) : id === "barrios" ? String(E.parcelas.length) : "";
     return `<li class="${id === SECCION ? "aqui" : ""}" data-s="${id}">
       <span>${et}</span>${n ? `<span class="n">${n}</span>` : ""}</li>`;
   }).join("");
-  todos("#rail li").forEach((li) => {
+  q("#railOtras").innerHTML = `<li class="${SECCION === "ciudades" ? "aqui" : ""}" data-s="ciudades">
+      <span>All cities</span><span class="n">${E.ciudades.length}</span></li>`;
+  todos("#rail li,#railOtras li").forEach((li) => {
     li.onclick = () => {
+      document.body.classList.remove("enGuia");
       SECCION = li.dataset.s ?? "mapa";
       pinta();
     };
@@ -432,33 +839,188 @@ function pinta() {
   q(".cuerpo").scrollTop = 0;
 }
 var VISTAS = {};
+var guia = null;
+VISTAS.bienvenida = () => {
+  document.body.classList.add("enGuia");
+  guia ??= new Bienvenida({
+    api,
+    esc,
+    aviso: toast,
+    refresca,
+    vete: (seccion) => {
+      document.body.classList.remove("enGuia");
+      SECCION = seccion;
+      pinta();
+    },
+    ciudad: E.city_name,
+    yo: E.yo,
+    datos: corto(E.datos)
+  });
+  void guia.pinta(q("#lienzo"));
+};
+VISTAS.ciudades = () => {
+  const filas = E.ciudades.map(
+    (c) => `
+      <div class="fila ${c.actual ? "on" : ""}">
+        <span class="et">${esc(c.nombre)}${c.actual ? ' <b class="de">\xB7 open now</b>' : ""}</span>
+        <span class="de">${c.agentes ?? 0} house${(c.agentes ?? 0) === 1 ? "" : "s"} of its own</span>
+        <span class="de mono">${esc(corto(c.ruta))}</span>
+        <span style="margin-left:auto;display:flex;gap:6px">
+          ${c.actual ? "" : `<a class="bt mini" href="?city=${encodeURIComponent(c.ruta)}">open</a>
+                 <button class="bt mini archiva" data-ciudad="${esc(c.ruta)}"
+                   data-nombre="${esc(c.nombre)}">archive</button>`}
+        </span>
+      </div>`
+  ).join("");
+  q("#lienzo").innerHTML = `<div><span class="sub">cities</span>
+    <h1 style="margin-top:6px">Your cities</h1>
+    <p class="prosa" style="margin-top:8px">One person, several autonomous cities: each has
+    its own identity, domain, chair, <b>its own houses</b> and its own roads. A house is not
+    shared \u2014 it stands inside the city that owns it, with its workspace and mounts under that
+    city's folder \u2014 so two cities can each have a <code class="mono">docs</code> house and
+    they are two different workers. They share nothing unless you build a road between
+    them.</p></div>
+    <div class="lista"><div class="filas">${filas}</div></div>
+    <div class="campos" style="max-width:420px">
+      <div class="campo"><label>Start another city</label>
+        <input type="text" id="nuevaCiudad" placeholder="client-a, research, the book\u2026"></div>
+      <button class="bt ppal" id="creaCiudad">Create it</button>
+    </div>
+    <div class="peligro">
+      <h3>Start this city over</h3>
+      <p class="prosa">Takes <b>${esc(E.city_name)}</b> back to its first day: no seat, no
+      agents, no committee history, no map. Your repositories and document folders are
+      <b>never touched</b> \u2014 only the city that points at them.</p>
+      <button class="bt malo" id="reiniciaCiudad">Start over\u2026</button>
+    </div>
+    <p class="pista">Archiving <b>moves</b> a city into
+    <code class="mono">.backups/</code> \u2014 nothing is deleted, and you can bring it back with
+    <code class="mono">mv</code>. The city you are standing in, and the last one you own,
+    cannot be archived.</p>`;
+  enlaza();
+  const campo = q("#nuevaCiudad");
+  q("#creaCiudad").onclick = async () => {
+    const nombre = campo.value.trim();
+    if (!nombre) {
+      toast("Give it a name", true);
+      return;
+    }
+    const r = await api("/api/ciudades", {
+      method: "POST",
+      body: JSON.stringify({ name: nombre })
+    });
+    if (!r.ok) {
+      toast(r.error ?? "Could not create it", true);
+      return;
+    }
+    toast(`${nombre} created`);
+    await refresca();
+  };
+  const reiniciar = document.getElementById("reiniciaCiudad");
+  if (reiniciar)
+    reiniciar.onclick = async () => {
+      const previa = await api("/api/ciudad-reinicia", {
+        method: "POST",
+        body: "{}"
+      });
+      if (!previa.preview) {
+        toast(previa.error ?? "Could not read what a reset would do", true);
+        return;
+      }
+      const p = previa.preview;
+      const texto = `Start over ${p.city}?
+
+You lose:
+` + p.loses.map((l) => `  \xB7 ${l}`).join("\n") + `
+
+Right now that is ${p.agents} agent(s), ${p.roads} road(s) and ${p.deliberations} committee act(s).
+
+You keep:
+` + p.keeps.map((l) => `  \xB7 ${l}`).join("\n") + `
+
+Type the city's name to confirm:`;
+      const escrito = window.prompt(texto, "");
+      if (escrito === null) return;
+      if (escrito.trim() !== p.city) {
+        toast("That is not the name \u2014 nothing was changed", true);
+        return;
+      }
+      const r = await api(
+        "/api/ciudad-reinicia",
+        { method: "POST", body: JSON.stringify({ confirm: p.city }) }
+      );
+      if (!r.ok) {
+        toast(r.error ?? "Could not reset it", true);
+        return;
+      }
+      toast(`${p.city} starts over \u2014 the old one is at ${r.backup ?? "its backup"}`);
+      primeraCarga = true;
+      await refresca();
+    };
+  todos(".archiva").forEach((boton) => {
+    boton.onclick = async () => {
+      const nombre = boton.dataset.nombre ?? "";
+      if (!window.confirm(`Archive ${nombre}? It moves into .backups \u2014 nothing is deleted.`))
+        return;
+      const r = await api(
+        "/api/ciudad-archiva",
+        { method: "POST", body: JSON.stringify({ city: boton.dataset.ciudad ?? "" }) }
+      );
+      if (!r.ok) {
+        toast(r.error ?? "Could not archive it", true);
+        return;
+      }
+      toast(`${nombre} archived \u2014 it is in ${r.backup ?? ".backups"}`);
+      await refresca();
+    };
+  });
+};
 VISTAS.resumen = () => {
   const mia = E.tarjetas.find((t) => t.user === E.yo);
   const sinUnidad = E.parcelas.filter((p) => p.unidad === "none" || p.unidad === "mine").length;
+  const agentes = E.agents ?? [];
   const tareas = [
     {
       ok: !!mia,
-      txt: mia ? `Your card exists \u2014 you are <b>${esc(mia.agent)}</b>` : "Take your seat: role, folders, one goal",
+      txt: mia ? `Your seat is taken \u2014 you are <b>${esc(mia.agent)}</b> in <b>${esc(E.domain)}</b>` : "Take your seat: the work domain and your role in it",
       ir: "puesto"
     },
+    {
+      ok: agentes.length > 0,
+      txt: agentes.length === 0 ? "Build the <b>houses</b> of this city \u2014 one per worker, each whole: its kind, its role, and everything it works on" : `<b>${agentes.length}</b> house${agentes.length === 1 ? "" : "s"} in this city: ${esc(
+        agentes.map((a) => a.name).join(", ")
+      )}`,
+      ir: "gente"
+    },
+    {
+      ok: agentes.length === 0 || agentes.some((a) => (a.mounts ?? []).length),
+      txt: agentes.some((a) => (a.mounts ?? []).length) ? "Every house works on something real" : "Give a house something to work on \u2014 a repository, a worktree, a folder of documents",
+      ir: "gente"
+    },
     {
       ok: !!(mia && mia.goals_defined),
       txt: mia && mia.goals_defined ? `Your goal: <b>${esc(mia.objetivo ? mia.objetivo.title : "")}</b>` : "Set <b>one goal</b>, with the command that measures it",
       ir: "puesto"
     },
     {
-      ok: E.parcelas.length > 0 && sinUnidad === 0,
-      txt: E.parcelas.length === 0 ? "No houses yet \u2014 pick your folders and they appear" : sinUnidad ? `<b>${sinUnidad}</b> of ${E.parcelas.length} houses sit in no real district \u2014 assign them` : "Every house has its district",
+      ok: E.parcelas.length === 0 || sinUnidad === 0,
+      txt: E.parcelas.length === 0 ? "Districts appear on the map once agents have houses" : sinUnidad ? `<b>${sinUnidad}</b> of ${E.parcelas.length} houses sit in no real district \u2014 assign them` : "Every house has its district",
       ir: "barrios"
     }
   ];
+  const empezando = !mia || agentes.length === 0;
   const sesionArriba = E.tmux.includes(E.sesion);
   q("#lienzo").innerHTML = `
-    <div><span class="sub">your city</span>
-      <h1 style="margin-top:6px">${esc(E.city_name)}</h1>
+    <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>
-      <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>
+      ${empezando ? `<p class="prosa" style="margin-top:8px">A city is a chair and the agents behind
+             it. Two steps and it is alive: take your seat \u2014 the work domain and your role in
+             it \u2014 then add the agents, each one asked for whole: what kind of work it does,
+             its role, everything it works on, the engine that runs it and the skills it
+             starts with. Everything below is a plain file in
+             <code class="mono">${esc(corto(E.datos))}</code> you can also edit by hand.</p>` : `<p class="prosa" style="margin-top:8px">Domain: <b>${esc(E.domain)}</b>. Growth is
+             counted with <code class="mono">${esc(E.grow || "nothing yet")}</code>.</p>`}</div>
     <div class="cifras">
       <div class="cifra"><b>${Object.keys(E.skills).length}</b><span>repo agents</span></div>
       <div class="cifra"><b>${E.parcelas.length}</b><span>houses</span></div>
@@ -543,12 +1105,17 @@ VISTAS.mapa = () => {
     };
     return;
   }
+  const cuantos = (E.agents ?? []).length;
   q("#lienzo").innerHTML = `<div><span class="sub">the map</span>
-    <h1 style="margin-top:6px">Not drawn yet</h1>
-    <p class="prosa" style="margin-top:8px">The map can be served independently.
-    Locally the hall runs it for you: first time bakes the front end
-    and seeds the local database, which takes about a minute.</p></div>
-    <div><button class="bt ppal" id="arrancaMapa">Draw my city</button></div>
+    <h1 style="margin-top:6px">Your city, drawn</h1>
+    <p class="prosa" style="margin-top:8px">${cuantos ? `<b>${cuantos}</b> agent${cuantos === 1 ? "" : "s"} live here, and the map shows
+           them as houses that grow with the work they do \u2014 with the town hall in the middle
+           when a committee is sitting, and a gate for every road out.` : `The map draws one house per agent. There are none yet, so it would be an empty
+           plot \u2014 build one from <b>Houses</b> first.`}</p>
+    <p class="prosa">The map is its own little server, so it is not running until you say so.
+    The first time takes about a minute: it builds the front end and seeds a local database.
+    After that it opens instantly, and it is yours \u2014 nothing is uploaded anywhere.</p></div>
+    <div><button class="bt ppal" id="arrancaMapa">${cuantos ? "Draw my city" : "Draw it anyway"}</button></div>
     <p class="cargando" id="mapaEspera" style="display:none">baking the map \u2014 first time takes a minute</p>`;
   q("#arrancaMapa").onclick = async () => {
     q("#arrancaMapa").disabled = true;
@@ -1014,16 +1581,22 @@ VISTAS.gente = () => {
             + zip<input type="file" accept=".zip" data-agente="${esc(a.slug)}"></label></div>
       </div>`;
   };
-  q("#lienzo").innerHTML = `<div><span class="sub">agents &amp; skills</span>
-    <h1 style="margin-top:6px">One seat, the agents behind it</h1>
-    <p class="prosa" style="margin-top:8px">A city is its agents, and each one is
-    whole here: the kind of work it does, its role, everything it works on \u2014 any
-    number of repositories and document folders at once \u2014 the engine and effort
-    that run it, and the skills in its own home. Every number is real: growth
-    from what the agent actually produced, skills from live read-only
-    recognition. Changes persist to the card and apply the next time the session
-    opens.</p>
-    <button class="rpgAlta" type="button" id="altaAgente">+ Add an agent</button></div>
+  q("#lienzo").innerHTML = `<div><span class="sub">the houses of ${esc(E.city_name)}</span>
+    <h1 style="margin-top:6px">Who lives in ${esc(E.city_name)}</h1>
+    <p class="prosa" style="margin-top:8px"><b>A house is where an agent lives and works</b>,
+    and many houses are a city \u2014 it is the same thing the map draws, growing with what that
+    agent actually does. The card and the CLI call them <code class="mono">agents</code>;
+    here you see their houses.</p>
+    <p class="prosa">They belong to <b>this</b> city and only
+    to it: each one's workspace and its mounts live inside
+    <code class="mono">${esc(corto(E.datos))}/agents/</code>, so another city has its own
+    people even if you give them the same names. Every agent is whole here: the kind of work
+    it does, its role, everything it works on \u2014 any number of repositories and document
+    folders at once \u2014 the engine and effort that run it, and the skills in its own home.</p>
+    <p class="prosa">Every number is real: growth from what the agent actually produced,
+    skills from live read-only recognition. Changes persist to the card and apply the next
+    time the session opens.</p>
+    <button class="rpgAlta" type="button" id="altaAgente">+ Build a house</button></div>
     <div class="fichasRPG">
       <div class="fichaRPG rpgSeat">
         <div class="rpgCab">${caraRPG(E.avatars?.["seat"])}
@@ -1136,7 +1709,7 @@ VISTAS.gente = () => {
           toast(r.error || "Could not add the agent", true);
           return;
         }
-        toast(`${nombre.trim()} joined this city \u2014 give it something to work on`);
+        toast(`${nombre.trim()} has a house now \u2014 give it something to work on`);
         void refresca();
       } catch (e) {
         toast(String(e), true);
@@ -1322,7 +1895,7 @@ window.addEventListener("message", (message) => {
 function temaActual() {
   const elegido = document.documentElement.getAttribute("data-tema");
   if (elegido) return elegido === "claro" ? "light" : "dark";
-  return window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  return "light";
 }
 function tema() {
   const boton = document.getElementById("temaBoton");
@@ -1333,13 +1906,13 @@ function tema() {
       return "";
     }
   })();
-  const claroDelSistema = window.matchMedia?.("(prefers-color-scheme: light)").matches ?? false;
+  const oscuroDelSistema = false;
   const pon = (elegido) => {
     const raiz = document.documentElement;
     if (elegido) raiz.setAttribute("data-tema", elegido);
     else raiz.removeAttribute("data-tema");
-    const claro = elegido ? elegido === "claro" : claroDelSistema;
-    if (boton) boton.textContent = claro ? "\u2600 Day" : "\u263E Night";
+    const claro = elegido ? elegido === "claro" : !oscuroDelSistema;
+    if (boton) boton.textContent = claro ? "\u263E Night" : "\u2600 Day";
     const frame = document.querySelector("#cityMapFrame");
     frame?.contentWindow?.postMessage(
       { type: "agents-city-map-theme/1", theme: claro ? "light" : "dark" },
@@ -1349,7 +1922,7 @@ function tema() {
   pon(guardado);
   if (boton)
     boton.onclick = () => {
-      const claroAhora = document.documentElement.getAttribute("data-tema") ? document.documentElement.getAttribute("data-tema") === "claro" : claroDelSistema;
+      const claroAhora = document.documentElement.getAttribute("data-tema") ? document.documentElement.getAttribute("data-tema") === "claro" : !oscuroDelSistema;
       const elegido = claroAhora ? "oscuro" : "claro";
       try {
         localStorage.setItem("hall-tema", elegido);