agents-city 0.1.0 → 0.2.0

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

@@ -1,3 +1,393 @@
+// 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 agents", "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 agents who work with you</h1>
+          <p class="prosa">You take the chair. Each <b>agent</b> is one worker with its own
+          window, its own role and its own corner of your disk \u2014 a repository, three of them,
+          a folder of documents, whatever it actually works on. 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 works here?" : "Who works with you?"}</h1>
+        <p class="prosa">An <b>agent</b> is one worker: it gets its own window, its own role
+        and its own corner of your disk. It is <b>not</b> a repository \u2014 one agent can answer
+        for three services and a folder of documents at once, and an agent 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 agent" : "Add the first agent"}</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 agent</span>
+        <h1>Tell me about this one</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 ? "adding\u2026" : "Add this agent"}</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> agent${this.roster.length === 1 ? "" : "s"} live here` : "the city is waiting for its first agent"}. 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 agents</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) {
@@ -67,10 +457,17 @@ var SECCIONES = [
   ["barrios", "Districts & houses"],
   ["red", "Roads"],
   ["committee", "Committee"],
-  ["gente", "Agents & skills"]
+  ["gente", "Agents & skills"],
+  ["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";
+  }
   pinta();
   pintaAvisoDeVersion();
   pintaDemoControles();
@@ -392,6 +789,7 @@ function rail() {
   }).join("");
   todos("#rail li").forEach((li) => {
     li.onclick = () => {
+      document.body.classList.remove("enGuia");
       SECCION = li.dataset.s ?? "mapa";
       pinta();
     };
@@ -432,33 +830,136 @@ 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 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, agents and roads. They share nothing unless you build a
+    road between them. The one you have open is marked.</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>
+    <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();
+  };
+  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 ? "Add the <b>agents</b> that work in this city \u2014 each one whole: its kind, its role, and everything it works on" : `<b>${agentes.length}</b> agent${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) ? "Your agents work on real repositories and folders" : "Give an agent 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>
@@ -1322,7 +1823,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 window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function tema() {
   const boton = document.getElementById("temaBoton");
@@ -1333,13 +1834,13 @@ function tema() {
       return "";
     }
   })();
-  const claroDelSistema = window.matchMedia?.("(prefers-color-scheme: light)").matches ?? false;
+  const oscuroDelSistema = window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
   const pon = (elegido) => {
     const raiz = document.documentElement;
     if (elegido) raiz.setAttribute("data-tema", elegido);
     else raiz.removeAttribute("data-tema");
-    const claro = elegido ? elegido === "claro" : claroDelSistema;
-    if (boton) boton.textContent = claro ? "\u2600 Day" : "\u263E Night";
+    const 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 +1850,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);