agents-city 0.3.0-beta.21 → 0.3.0

package/city/web/src/hall.ts

@@ -11,7 +11,17 @@
  * ever serves this file.
  */
 
-import { renderRepoRoleEditor, RepoRoleOption, selectedRepoRoles } from './repo-roles';
+import './es'; // the Spanish dictionary registers itself on import
+import { idioma, plural, ponIdioma, t as _ } from './idioma';
+import {
+  ESFUERZOS,
+  MODELOS,
+  NIVEL_ESFUERZO,
+  RUNTIMES,
+  nivelDeMotor,
+  opciones as opcionesDe,
+} from './motores';
+import { Bienvenida } from './bienvenida';
 import {
   ActivityEvent,
   MAP_ACTIVITY_PROTOCOL,
@@ -64,6 +74,8 @@ interface Ciudad {
   slug?: string;
   id?: string;
   actual: boolean;
+  /** How many agents live in it. An agent belongs to exactly one city. */
+  agentes?: number;
 }
 interface Road {
   id: string;
@@ -105,7 +117,9 @@ interface FichaAgente {
   avatar: string;
   cli: { binary: string; installed: boolean; connected: boolean };
   legacy: boolean;
-  mounts: number;
+  /** What this agent actually works on — repos, worktrees, document folders.
+   * `fixed` is a legacy repo agent's own repo, which is not a mount it chose. */
+  mounts: { label: string; target: string; fixed?: boolean }[];
   growth: { floors: number; bricks: number; activity30: number; signal: string };
 }
 interface Deliberation {
@@ -172,6 +186,8 @@ interface Estado {
   agents?: FichaAgente[];
   /** True only for the packaged Aurora demo: unlocks the replay controls. */
   demo?: boolean;
+  /** One line when a newer release is published, '' otherwise. */
+  update?: string;
 }
 interface RolInfo {
   id: string;
@@ -184,6 +200,16 @@ interface DomainInfo {
   name: string;
   summary: string;
 }
+/** What a reset would do, as the server computes it — never guessed here. */
+interface Efectos {
+  city: string;
+  backup: string;
+  agents: number;
+  roads: number;
+  deliberations: number;
+  keeps: string[];
+  loses: string[];
+}
 interface RepoLocal {
   nombre: string;
   ruta: string;
@@ -260,15 +286,35 @@ const SECCIONES: Array<[string, string]> = [
   ['resumen', 'Overview'],
   ['mapa', 'The map'],
   ['puesto', 'My seat'],
-  ['barrios', 'Districts & houses'],
+  ['barrios', 'Districts'],
   ['red', 'Roads'],
   ['committee', 'Committee'],
-  ['gente', 'Agents & skills'],
+  ['gente', 'Houses'],
+  ['ciudades', 'Cities'],
 ];
 
+/** True until the person navigates: the landing section is decided once, from
+ * the state, and never yanked out from under them afterwards. */
+let primeraCarga = true;
+
 async function refresca(): Promise<void> {
   E = await api<Estado>('/api/estado');
+  if (primeraCarga) {
+    primeraCarga = false;
+    // A city with no seat or no agents has nothing to draw, and "Not drawn
+    // yet" is a dead end as a first impression. Start where the next step is.
+    const mia = E.tarjetas.find((t) => t.user === E.yo);
+    // Never land on a dead end. Three cases, in order of what the person needs:
+    //   nothing set up      -> the guide, which asks the questions
+    //   set up, no map yet  -> the overview, which says what is left and how
+    //   set up, map running -> the map, which is the point of the product
+    // Landing on the map view without a map was how "Not drawn yet" became the
+    // first thing an owner saw every single morning.
+    if (!mia || (E.agents ?? []).length === 0) SECCION = 'bienvenida';
+    else if (!E.mapa) SECCION = 'resumen';
+  }
   pinta();
+  pintaAvisoDeVersion();
   pintaDemoControles();
   sincronizaActividad(E.live_bus);
 }
@@ -279,6 +325,16 @@ async function refresca(): Promise<void> {
  * whose map was still baking missed it — these buttons are the way back. Real
  * cities never see them, and the server refuses them anyway.
  */
+/** A newer release, said once and quietly: the server already decided whether
+ * there is one (cached for a day), so this only renders what it was told. */
+function pintaAvisoDeVersion(): void {
+  const caja = document.getElementById('avisoVersion');
+  if (!caja) return;
+  const texto = (E.update ?? '').trim();
+  caja.textContent = texto;
+  caja.hidden = !texto;
+}
+
 function pintaDemoControles(): void {
   const header = document.querySelector<HTMLElement>('#livePanel header');
   const previa = document.getElementById('demoControles');
@@ -692,22 +748,36 @@ function icono(kind: string): string {
 }
 
 function rail(): void {
-  q('#rail').innerHTML = SECCIONES.map(([id, et]) => {
-    const n =
-      id === 'gente'
-        ? String(Object.keys(E.skills).length)
-        : id === 'committee'
-          ? String(E.deliberations.length)
-          : id === 'red'
-            ? String(E.roads.length)
-            : id === 'barrios'
-              ? String(E.parcelas.length)
-              : '';
-    return `<li class="${id === SECCION ? 'aqui' : ''}" data-s="${id}">
-      <span>${et}</span>${n ? `<span class="n">${n}</span>` : ''}</li>`;
-  }).join('');
-  todos<HTMLElement>('#rail li').forEach((li) => {
+  // Everything above the divider belongs to ONE city — its seat, its agents,
+  // its map. Saying so here is the difference between a menu and a place: an
+  // agent's workspace and mounts live inside this city's folder, and a flat
+  // list of "Cities" and "Agents" as siblings hid that completely.
+  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)} · ${plural(cuantos, '{n} house', '{n} houses')}</span>`;
+  q('#rail').innerHTML = SECCIONES.filter(([id]) => id !== 'ciudades')
+    .map(([id, et]) => {
+      const n =
+        id === 'gente'
+          ? String(Object.keys(E.skills).length)
+          : id === 'committee'
+            ? String(E.deliberations.length)
+            : id === 'red'
+              ? String(E.roads.length)
+              : id === 'barrios'
+                ? String(E.parcelas.length)
+                : '';
+      return `<li class="${id === SECCION ? 'aqui' : ''}" data-s="${id}">
+      <span>${esc(_(et))}</span>${n ? `<span class="n">${n}</span>` : ''}</li>`;
+    })
+    .join('');
+  q('#railOtras').innerHTML =
+    `<li class="${SECCION === 'ciudades' ? 'aqui' : ''}" data-s="ciudades">
+      <span>${_('All cities')}</span><span class="n">${E.ciudades.length}</span></li>`;
+  todos<HTMLElement>('#rail li,#railOtras li').forEach((li) => {
     li.onclick = () => {
+      document.body.classList.remove('enGuia');
       SECCION = li.dataset.s ?? 'mapa';
       pinta();
     };
@@ -754,17 +824,185 @@ function pinta(): void {
 const VISTAS: Record<string, () => void> = {};
 
 // ── overview ─────────────────────────────────────────────────────────────────
+/** The guided first run. Built once and kept, so a half-finished answer
+ * survives a repaint. */
+let guia: Bienvenida | null = null;
+
+VISTAS.bienvenida = () => {
+  document.body.classList.add('enGuia');
+  guia ??= new Bienvenida({
+    api,
+    esc,
+    aviso: toast,
+    refresca,
+    vete: (seccion: string) => {
+      document.body.classList.remove('enGuia');
+      SECCION = seccion;
+      pinta();
+    },
+    ciudad: E.city_name,
+    yo: E.yo,
+    datos: corto(E.datos),
+  });
+  void guia.pinta(q<HTMLElement>('#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">· 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 — it stands inside the city that owns it, with its workspace and mounts under that
+    city's folder — 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…"></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> — only the city that points at them.</p>
+      <button class="bt malo" id="reiniciaCiudad">${_('Start over…')}</button>
+    </div>
+    <p class="pista">Archiving <b>moves</b> a city into
+    <code class="mono">.backups/</code> — 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<HTMLInputElement>('#nuevaCiudad');
+  q<HTMLButtonElement>('#creaCiudad').onclick = async () => {
+    const nombre = campo.value.trim();
+    if (!nombre) {
+      toast('Give it a name', true);
+      return;
+    }
+    const r = await api<Respuesta>('/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 () => {
+      // Two round-trips on purpose: the first asks the server what this would
+      // actually do, and the person reads it before typing anything. "Are you
+      // sure?" is not information; a list of what disappears is.
+      const previa = await api<{ preview?: Efectos; error?: string }>('/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}?\n\nYou lose:\n` +
+        p.loses.map((l) => `  · ${l}`).join('\n') +
+        `\n\nRight now that is ${p.agents} agent(s), ${p.roads} road(s) and ` +
+        `${p.deliberations} committee act(s).\n\nYou keep:\n` +
+        p.keeps.map((l) => `  · ${l}`).join('\n') +
+        `\n\nType 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 — nothing was changed', true);
+        return;
+      }
+      const r = await api<{ ok?: boolean; backup?: string; error?: string }>(
+        '/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 — the old one is at ${r.backup ?? 'its backup'}`);
+      primeraCarga = true; // land wherever a fresh city should land: the guide
+      await refresca();
+    };
+  todos<HTMLButtonElement>('.archiva').forEach((boton) => {
+    boton.onclick = async () => {
+      const nombre = boton.dataset.nombre ?? '';
+      if (!window.confirm(`Archive ${nombre}? It moves into .backups — nothing is deleted.`))
+        return;
+      const r = await api<{ ok?: boolean; backup?: string; error?: string }>(
+        '/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 — 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 ?? [];
+  // The order somebody actually does it in: take the chair, say who works
+  // here, say what for. The old list asked for "folders" — the vocabulary of
+  // the model before agents existed — and never mentioned the roster at all,
+  // so a new city could look finished with nobody in it.
   const tareas = [
     {
       ok: !!mia,
       txt: mia
-        ? `Your card exists — you are <b>${esc(mia.agent)}</b>`
-        : 'Take your seat: role, folders, one goal',
+        ? `Your seat is taken — 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 — 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 — a repository, a worktree, a folder of documents',
+      ir: 'gente',
+    },
     {
       ok: !!(mia && mia.goals_defined),
       txt:
@@ -774,23 +1012,33 @@ VISTAS.resumen = () => {
       ir: 'puesto',
     },
     {
-      ok: E.parcelas.length > 0 && sinUnidad === 0,
+      ok: E.parcelas.length === 0 || sinUnidad === 0,
       txt:
         E.parcelas.length === 0
-          ? 'No houses yet — pick your folders and they appear'
+          ? 'Districts appear on the map once agents have houses'
           : sinUnidad
             ? `<b>${sinUnidad}</b> of ${E.parcelas.length} houses sit in no real district — 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’s 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 — the work domain and your role in
+             it — 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>
@@ -882,6 +1130,12 @@ VISTAS.mapa = () => {
         },
         origin,
       );
+      // The map loads after the theme was decided, so tell it now as well —
+      // otherwise a light Hall frames a night map until the next toggle.
+      frame.contentWindow?.postMessage(
+        { type: 'agents-city-map-theme/1', theme: temaActual() },
+        origin,
+      );
       if (pendingMapActivity) {
         const event = pendingMapActivity;
         pendingMapActivity = null;
@@ -890,12 +1144,23 @@ 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 — 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 — 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 — 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 — first time takes a minute</p>`;
   q<HTMLButtonElement>('#arrancaMapa').onclick = async () => {
     q<HTMLButtonElement>('#arrancaMapa').disabled = true;
@@ -923,22 +1188,21 @@ async function puesto(): Promise<void> {
   const mia = E.tarjetas.find((t) => t.user === E.yo);
   q('#lienzo').innerHTML = `<div><span class="sub">my seat</span>
     <h1 style="margin-top:6px">${esc(E.yo)}</h1>
-    <p class="prosa" style="margin-top:8px">First choose the work domain, then your
-    chair role inside it, the folders you answer for, and one goal. The seat stays
-    the boss even when its professional role is blank. Saving writes your card —
+    <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 —
     <code class="mono">${esc(corto(E.datos))}/${esc(E.yo)}.md</code> — the same file
-    every other door writes.</p></div>
+    every other door writes, and it never touches your roster.</p></div>
     <div><span class="sub">work domain</span><div class="rolejilla" id="domains" style="margin-top:9px">
       <p class="cargando">reading the domain packs</p></div></div>
     <div><span class="sub">role</span><div class="rolejilla" id="roles" style="margin-top:9px">
       <p class="cargando">reading the role files</p></div></div>
-    <div><span class="sub">folders</span><div id="carpetas" style="margin-top:9px">
-      <p class="cargando">indexing this disk — first run can take a minute</p></div></div>
-    <div><span class="sub">role of each support agent</span>
-      <p class="prosa" style="margin-top:8px">The seat above is the chair. Each
-      selected repo below adopts its own specialist role; it never gains chair or
-      road authority. Blank means no preset role knowledge.</p>
-      <div id="agentRoles" style="margin-top:9px"></div></div>
+    <div><span class="sub">the agents</span>
+      <p class="prosa" style="margin-top:8px">Who works in this city — and what each
+      one works on — lives in <b>Agents &amp; skills</b>, where an agent is asked for
+      whole: its kind, its role, its repositories and document folders, its engine
+      and its skills. One place, so the terminal and this page cannot disagree.
+      <button class="bt" type="button" data-ir="gente" style="margin-left:8px">Open the roster</button></p></div>
     <div><span class="sub">one goal — 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>
@@ -992,84 +1256,9 @@ async function puesto(): Promise<void> {
   pintaDominios();
   await cargaRoles();
 
-  // folders
-  const [reposResponse, agentRolesResponse] = await Promise.all([
-    api<{ repos: RepoLocal[] }>('/api/misrepos?user=' + encodeURIComponent(E.yo)),
-    api<{ roles: RepoRoleOption[] }>('/api/roles?scope=agent'),
-  ]);
-  let { repos } = reposResponse;
-  const agentRoleOptions = agentRolesResponse.roles;
-  const sel = new Set<string>(
-    mia && mia.repos.length ? mia.repos : repos.filter((r) => r.mio).map((r) => r.nombre),
-  );
-  const assignedRoles: Record<string, string> = { ...(mia?.repo_roles || {}) };
-  const pintaRolesAgentes = (): void => {
-    q('#agentRoles').innerHTML = renderRepoRoleEditor(sel, assignedRoles, agentRoleOptions, esc);
-    todos<HTMLSelectElement>('#agentRoles [data-repo-role]').forEach((select) => {
-      select.onchange = () => {
-        assignedRoles[select.dataset.repoRole ?? ''] = select.value || 'blank';
-      };
-    });
-  };
-  let filtro = '';
-  const pintaCarpetas = (): void => {
-    const vis = repos.filter((r) => !filtro || r.nombre.toLowerCase().includes(filtro));
-    q('#carpetas').innerHTML = `<div class="lista">
-      <div class="barra">
-        <input class="mono" id="fl" placeholder="filter ${repos.length} repos…" value="${esc(filtro)}">
-        <button class="mini2" id="rescan" title="the index caches for a day — this rebuilds it now">rescan disk</button>
-        <button class="mini2" id="nada">none</button>
-        <span class="de" style="font-family:var(--mono);font-size:11px;color:var(--tinta3)">${sel.size} picked</span>
-      </div>
-      <div class="filas">${
-        vis
-          .map(
-            (r) => `
-        <div class="fila ${sel.has(r.nombre) ? 'on' : ''}" data-n="${esc(r.nombre)}">
-          <span class="caja">${sel.has(r.nombre) ? '[x]' : '[ ]'}</span>
-          <span class="et">${esc(r.nombre)}</span>
-          <span class="de">${esc(r.cuando || '—')}  ${esc(corto(r.ruta))}</span></div>`,
-          )
-          .join('') ||
-        '<div class="fila"><span class="de" style="margin:0">nothing matches</span></div>'
-      }
-      </div></div>
-      <p class="pista" style="margin-top:6px;font-size:11.5px;color:var(--tinta3);font-style:italic">
-      Ticked by your commits this year. Owning <b>no</b> folders is a real answer for a
-      cross-cutting role — your city is simply empty, and your work is the roads.</p>`;
-    const fl = q<HTMLInputElement>('#fl');
-    fl.oninput = () => {
-      filtro = fl.value.toLowerCase();
-      pintaCarpetas();
-      const f2 = q<HTMLInputElement>('#fl');
-      f2.focus();
-      f2.setSelectionRange(f2.value.length, f2.value.length);
-    };
-    q<HTMLButtonElement>('#rescan').onclick = async () => {
-      const b = q<HTMLButtonElement>('#rescan');
-      b.textContent = 'scanning…';
-      b.disabled = true;
-      ({ repos } = await api<{ repos: RepoLocal[] }>(
-        '/api/misrepos?refresh=1&user=' + encodeURIComponent(E.yo),
-      ));
-      pintaCarpetas();
-      toast(`${repos.length} repos on this disk`);
-    };
-    q<HTMLButtonElement>('#nada').onclick = () => {
-      vis.forEach((r) => sel.delete(r.nombre));
-      pintaCarpetas();
-    };
-    todos<HTMLElement>('#carpetas .fila[data-n]').forEach((f) => {
-      f.onclick = () => {
-        const n = f.dataset.n ?? '';
-        if (sel.has(n)) sel.delete(n);
-        else sel.add(n);
-        pintaCarpetas();
-      };
-    });
-    pintaRolesAgentes();
-  };
-  pintaCarpetas();
+  // The roster is not asked for here any more: it lives in one place,
+  // the agents view, so this page and the terminal cannot write different
+  // cities. What this page owns is the chair — domain, role, goal.
 
   // goal
   const o: Partial<Objetivo> = (mia && mia.objetivo) || {};
@@ -1111,8 +1300,6 @@ async function puesto(): Promise<void> {
         user: E.yo,
         domain,
         role: rol,
-        repos: [...sel],
-        repo_roles: selectedRepoRoles(sel, assignedRoles),
         objetivo: {
           title: val('#g_title'),
           signal: val('#g_signal'),
@@ -1417,36 +1604,9 @@ VISTAS.committee = () => {
 };
 
 // ── agents and skills ────────────────────────────────────────────────────────
-/** The engine's honest power reading. An alias maps to its tier; empty means
- * the owner's Claude default — unknown here, so the bar says "default" rather
- * than inventing a number. */
-function nivelDeMotor(model: string): { ancho: number; texto: string; defecto: boolean } {
-  const alias = model.toLowerCase();
-  if (!alias) return { ancho: 0.5, texto: 'default', defecto: true };
-  for (const [clave, ancho] of [
-    ['fable', 1],
-    ['opus', 0.8],
-    ['sonnet', 0.55],
-    ['haiku', 0.35],
-  ] as const) {
-    if (alias.includes(clave)) return { ancho, texto: alias, defecto: false };
-  }
-  return { ancho: 0.6, texto: alias, defecto: false };
-}
-
-const NIVEL_ESFUERZO: Record<string, number> = { low: 1, medium: 2, high: 3, xhigh: 4, max: 5 };
-const MODELOS = ['haiku', 'sonnet', 'opus', 'fable'];
-
-/** `<option>`s from known values plus the current one when it is off the list:
- * a card key must never be held hostage by a curated dropdown. */
+/** The shared `<option>` builder, with this page's escaper bound in. */
 function opciones(valores: string[], actual: string): string {
-  return valores
-    .concat(actual && !valores.includes(actual) ? [actual] : [])
-    .map(
-      (v) =>
-        `<option value="${esc(v)}"${v === actual ? ' selected' : ''}>${esc(v || 'default')}</option>`,
-    )
-    .join('');
+  return opcionesDe(valores, actual, esc);
 }
 
 /** The one sheet-avatar guard: a data URI or nothing. */
@@ -1476,15 +1636,16 @@ VISTAS.gente = () => {
     // the alias is resolved by the CLI at launch, not by this list.
     const opcionesModelo =
       opciones([''].concat(MODELOS), a.model) + '<option value="__otro__">custom…</option>';
-    const opcionesEsfuerzo = opciones([''].concat(Object.keys(NIVEL_ESFUERZO)), a.effort);
-    const opcionesRuntime = opciones(['claude', 'codex', 'opencode', 'kimi'], a.runtime);
+    const opcionesEsfuerzo = opciones([''].concat(ESFUERZOS), a.effort);
+    const opcionesRuntime = opciones(RUNTIMES, a.runtime);
+    const montajes = a.mounts ?? [];
     return `
       <div class="fichaRPG">
         <div class="rpgCab">${caraRPG(a.avatar)}
           <div><h3>${esc(a.name)}</h3>
           <span class="rpgTags"><span class="kindChip ${esc(a.kind)}">${esc(a.kind)}</span>
           <span class="rpgRol">${esc(a.role)}</span>
-          <span class="rpgHogar">${a.legacy ? 'repo' : `workspace · ${a.mounts | 0} ${a.mounts === 1 ? 'mount' : 'mounts'}`}</span></span></div>
+          <span class="rpgHogar">${a.legacy ? 'repo' : `workspace · ${montajes.length} ${montajes.length === 1 ? 'mount' : 'mounts'}`}</span></span></div>
           <span class="rpgBotones">
             <button class="rpgMini rpgDado" type="button" data-agente="${esc(a.slug)}"
               title="Reroll this agent's face — deterministic, persisted on the card">🎲</button>
@@ -1494,17 +1655,17 @@ VISTAS.gente = () => {
               data-file="AGENTS.md" title="Instructions Codex, OpenCode and Kimi read">AGENTS.md</button>
           </span>
         </div>
-        <div class="rpgFila"><label>engine</label>
+        <div class="rpgFila"><label>${_('engine')}</label>
           ${barra(motor.ancho, motor.defecto ? 'defecto' : '')}
           <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="model"
             ${esClaude ? '' : 'disabled title="This window runs its own CLI; its model lives in its own flags"'}>
             ${opcionesModelo}</select></div>
-        <div class="rpgFila"><label>effort</label>
+        <div class="rpgFila"><label>${_('effort')}</label>
           ${barra(esfuerzo / 5, esfuerzo ? '' : 'defecto')}
           <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="effort"
             ${esClaude ? '' : 'disabled title="This window runs its own CLI; its effort lives in its own flags"'}>
             ${opcionesEsfuerzo}</select></div>
-        <div class="rpgFila"><label>provider</label>
+        <div class="rpgFila"><label>${_('provider')}</label>
           <span class="rpgDato"><span class="cliDot ${
             a.cli.connected ? 'on' : a.cli.installed ? 'idle' : 'off'
           }" title="${esc(
@@ -1514,16 +1675,39 @@ VISTAS.gente = () => {
                 ? 'installed on this machine, not in use by this agent'
                 : `${a.cli.binary} is not installed`,
           )}"></span>${esc(
-            a.cli.connected ? 'connected' : a.cli.installed ? 'idle' : 'missing',
+            _(a.cli.connected ? 'connected' : a.cli.installed ? 'idle' : 'missing'),
           )} · ${esc(a.cli.binary)}
           <button class="rpgMini rpgTest" type="button" data-agente="${esc(a.slug)}"
             title="Run the engine for real: --version, and the login state on Claude">test</button></span>
           <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="runtime">
             ${opcionesRuntime}</select></div>
-        <div class="rpgFila"><label>growth</label>
+        <div class="rpgSkills"><label>${_('works on')} · ${montajes.length}</label>
+          ${
+            montajes.length
+              ? montajes
+                  .map(
+                    (m) =>
+                      `<code class="mono" title="${esc(m.target)}">${esc(m.label)}${
+                        m.fixed
+                          ? ''
+                          : `<button class="rpgQuitar rpgDesmonta" type="button"
+                              data-agente="${esc(a.slug)}" data-mount="${esc(m.label)}"
+                              title="Stop this agent working on ${esc(m.target)}">×</button>`
+                      }</code>`,
+                  )
+                  .join(' ')
+              : '<span class="rpgDato">nothing mounted yet</span>'
+          }
+          ${
+            a.legacy
+              ? '<span class="rpgDato">a legacy repo agent works on its own repo</span>'
+              : `<button class="rpgMini rpgMonta" type="button" data-agente="${esc(a.slug)}"
+                  title="A repo, a worktree or a folder of documents — this agent works on all of them">+ folder</button>`
+          }</div>
+        <div class="rpgFila"><label>${_('growth')}</label>
           ${barra(crecido)}
           <span class="rpgDato">${g.floors | 0} floors · ${g.bricks | 0} bricks · ${g.activity30 | 0}/30d</span></div>
-        <div class="rpgSkills"><label>skills · ${skills.length}</label>
+        <div class="rpgSkills"><label>${_('skills')} · ${skills.length}</label>
           ${
             skills.length
               ? skills
@@ -1545,13 +1729,22 @@ VISTAS.gente = () => {
       </div>`;
   };
 
-  q('#lienzo').innerHTML = `<div><span class="sub">agents & skills</span>
-    <h1 style="margin-top:6px">One seat, support agents behind it</h1>
-    <p class="prosa" style="margin-top:8px">Every number on a card is real: the
-    engine comes from the card keys the launcher resolves, growth from what the
-    agent actually produced, skills from live read-only recognition — Agents
-    City copies and installs nothing. Engine changes persist to the card and
-    apply the next time the session opens.</p></div>
+  q('#lienzo').innerHTML = `<div><span class="sub">the houses of ${esc(E.city_name)}</span>
+    <h1 style="margin-top:6px">${_('Who lives in {city}', { city: 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 — 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 — any number of repositories and document
+    folders at once — 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'])}
@@ -1672,6 +1865,71 @@ VISTAS.gente = () => {
     };
   });
 
+  // Adding an agent from the web: the roster the wizard builds question by
+  // question, reachable by somebody who never opens a terminal.
+  const alta = document.getElementById('altaAgente');
+  if (alta)
+    alta.onclick = async () => {
+      const nombre = window.prompt("The agent's name:", '');
+      if (nombre === null || !nombre.trim()) return;
+      const clase =
+        window.prompt('What kind of work does it do? code, knowledge or coordinator', 'code') ?? '';
+      if (!clase.trim()) return;
+      const rol = window.prompt('Its role (its specialty, not authority):', 'blank') ?? '';
+      if (!rol.trim()) return;
+      try {
+        const r = await api<{ ok?: boolean; error?: string }>('/api/agentes', {
+          method: 'POST',
+          body: JSON.stringify({ name: nombre.trim(), kind: clase.trim(), role: rol.trim() }),
+        });
+        if (!r.ok) {
+          toast(r.error || 'Could not add the agent', true);
+          return;
+        }
+        toast(`${nombre.trim()} has a house now — give it something to work on`);
+        void refresca();
+      } catch (e) {
+        toast(String(e), true);
+      }
+    };
+
+  // Mounts: what an agent works on, added and removed where it is read.
+  const montaje = async (carga: Record<string, string>, hecho: string) => {
+    try {
+      const r = await api<{ ok?: boolean; error?: string }>('/api/montaje', {
+        method: 'POST',
+        body: JSON.stringify(carga),
+      });
+      if (!r.ok) {
+        toast(r.error || 'Could not change the mounts', true);
+        return;
+      }
+      toast(hecho);
+      void refresca();
+    } catch (e) {
+      toast(String(e), true);
+    }
+  };
+  todos<HTMLButtonElement>('.rpgMonta').forEach((boton) => {
+    boton.onclick = () => {
+      const ruta = window.prompt('A repo, a worktree or a folder of documents:', '~/');
+      if (ruta === null || !ruta.trim()) return;
+      void montaje({ agent: boton.dataset.agente ?? '', add: ruta.trim() }, 'Mounted');
+    };
+  });
+  todos<HTMLButtonElement>('.rpgDesmonta').forEach((boton) => {
+    boton.onclick = () => {
+      const etiqueta = boton.dataset.mount ?? '';
+      if (!window.confirm(`Stop this agent working on ${etiqueta}?`)) return;
+      // Unmounting removes a symlink and a card key. What it points at is not
+      // touched — say so, because "remove" reads as "delete my folder".
+      void montaje(
+        { agent: boton.dataset.agente ?? '', remove: etiqueta },
+        `${etiqueta} unmounted — the folder itself is untouched`,
+      );
+    };
+  });
+
   // The instruction editors: one click, the modal opens on that agent's file.
   todos<HTMLButtonElement>('.rpgIns').forEach((boton) => {
     boton.onclick = () =>
@@ -1861,7 +2119,101 @@ window.addEventListener('message', (message) => {
   pinta();
 });
 
+/**
+ * Night or day. The city's own light is night — an isometric map at 3am — so
+ * that stays the default; day is the palette of agentscity.net, so the tool on
+ * your machine and the site are visibly one product.
+ *
+ * Three states, not two: no stored choice means "follow this machine", and only
+ * an explicit click stamps the root element and outranks the system setting.
+ * The map lives in an iframe of its own, so it is told as well — a light Hall
+ * around a night map would read as two products in one window.
+ */
+/** Which skin is showing right now: the stamped choice, or this machine's. */
+function temaActual(): 'light' | 'dark' {
+  const elegido = document.documentElement.getAttribute('data-tema');
+  if (elegido) return elegido === 'claro' ? 'light' : 'dark';
+  // Day is THE default, full stop: a desktop set to dark does not decide this
+  // for the owner. Only the switch does, and it is remembered.
+  return 'light';
+}
+
+function tema(): void {
+  const boton = document.getElementById('temaBoton');
+  const guardado = ((): string => {
+    try {
+      return localStorage.getItem('hall-tema') ?? '';
+    } catch {
+      return ''; // a browser with site data blocked still gets a working page
+    }
+  })();
+  const oscuroDelSistema = false; // daylight is the default; only the switch changes it
+
+  const pon = (elegido: string): void => {
+    const raiz = document.documentElement;
+    if (elegido) raiz.setAttribute('data-tema', elegido);
+    else raiz.removeAttribute('data-tema');
+    const claro = elegido ? elegido === 'claro' : !oscuroDelSistema;
+    // The button says where a click TAKES you, not where you are: a control
+    // labelled with the state you can already see is a riddle.
+    if (boton) boton.textContent = claro ? '☾ Night' : '☀ Day';
+    const frame = document.querySelector<HTMLIFrameElement>('#cityMapFrame');
+    frame?.contentWindow?.postMessage(
+      { type: 'agents-city-map-theme/1', theme: claro ? 'light' : 'dark' },
+      new URL(frame.src, location.href).origin,
+    );
+  };
+
+  pon(guardado);
+  if (boton)
+    boton.onclick = () => {
+      const claroAhora = document.documentElement.getAttribute('data-tema')
+        ? document.documentElement.getAttribute('data-tema') === 'claro'
+        : !oscuroDelSistema;
+      const elegido = claroAhora ? 'oscuro' : 'claro';
+      try {
+        localStorage.setItem('hall-tema', elegido);
+      } catch {
+        /* not being able to remember it is not a reason to refuse the switch */
+      }
+      pon(elegido);
+    };
+}
+
+/**
+ * Español or English, on a switch next to the theme.
+ *
+ * The two READMEs shipped bilingual from the first commit and the product did
+ * not, which is backwards: documentation is read once and the interface every
+ * day. The page starts in this browser's language and the button says which one
+ * a click takes you to, the same way the theme button does.
+ */
+function interruptorDeIdioma(): void {
+  const boton = document.getElementById('idiomaBoton');
+  if (!boton) return;
+  const pon = (): void => {
+    document.documentElement.lang = idioma();
+    // The label is the language you would GET, not the one you are reading.
+    boton.textContent = idioma() === 'es' ? 'EN' : 'ES';
+    // The chrome that lives in the HTML file rather than in a view: its English
+    // is kept on the element the first time through, so switching back and
+    // forth translates from the source every time instead of from itself.
+    todos<HTMLElement>('[data-i18n]').forEach((el) => {
+      if (!el.dataset.en) el.dataset.en = (el.textContent ?? '').trim();
+      el.textContent = _(el.dataset.en);
+    });
+  };
+  pon();
+  boton.onclick = () => {
+    ponIdioma(idioma() === 'es' ? 'en' : 'es');
+    pon();
+    void refresca();
+  };
+}
+
 arrastreDelRail();
+interruptorDeIdioma();
+tema();
 void refresca();
 
 export {};