agents-city 0.4.0 → 0.5.2

package/city/web/src/hall.ts

@@ -15,13 +15,14 @@ import './es'; // the Spanish dictionary registers itself on import
 import { FormularioDeCasa } from './casa';
 import { confirma, pregunta } from './dialogo';
 import { Demos } from './demo';
+import type { Vista } from './vista';
 import { Explorador } from './explorador';
 import { idioma, plural, ponIdioma, t as _ } from './idioma';
 import {
   ESFUERZOS,
-  MODELOS,
   NIVEL_ESFUERZO,
   RUNTIMES,
+  motorDe,
   nivelDeMotor,
   opciones as opcionesDe,
 } from './motores';
@@ -90,6 +91,44 @@ interface Road {
   domain?: string;
   role?: string;
 }
+interface ReceptionSummary {
+  pending: number;
+  pendingBytes: number;
+  routingMode: 'manual' | 'auto';
+  reviewPolicy: 'every_message' | 'new_thread';
+  routerProfile: string | null;
+  autoAvailable: boolean;
+  error?: string;
+}
+interface ReceptionState {
+  protocol: 'agents-city-reception/1';
+  error?: string;
+  settings: {
+    routingMode: 'manual' | 'auto';
+    reviewPolicy: 'every_message' | 'new_thread';
+    routerProfile: string | null;
+    autoAvailable: boolean;
+    autoRules: Array<{ cityId: string; address: string; keywords: string[] }>;
+  };
+  summary: { pending: number; pendingBytes: number; shown: number };
+  messages: Array<{
+    id: string;
+    from: string;
+    fromName: string;
+    kind: 'message' | 'rejection';
+    inReplyTo: string | null;
+    createdAt: string;
+    receivedAt: string;
+    receivedVia: string;
+    text: string;
+    connectionId: string | null;
+    roadId: string | null;
+    agentExposure: false;
+  }>;
+  cities: Array<{ id: string; name: string; address: string }>;
+  connections: Array<{ id: string; roadId: string; name: string; connected: boolean }>;
+  outbox: { queued: number };
+}
 interface SkillInfo {
   name: string;
   description: string;
@@ -179,6 +218,7 @@ interface Estado {
   sesion: string;
   ciudades: Ciudad[];
   roads: Road[];
+  reception: ReceptionSummary;
   invitation: Invitation;
   skills: Record<string, AgentCapabilities>;
   deliberations: Deliberation[];
@@ -239,14 +279,52 @@ declare global {
 const PASE = window.PASE;
 const CIUDAD = new URLSearchParams(location.search).get('city') ?? '';
 
+/**
+ * Tell the city's journal something happened here.
+ *
+ * The page is half of this product and it used to keep its failures to itself:
+ * an error became a toast, the toast went away, and a person reporting it had
+ * only their memory. This writes into the same file the server writes, so one
+ * file answers "what happened" — and `agents-city doctor --report` can hand it
+ * to somebody else without them having to have been watching.
+ *
+ * It never throws and never awaits: a log that can break the thing it is
+ * logging, or slow it down, is worse than no log.
+ */
+function anota(que: string, detalle?: unknown, donde?: string): void {
+  try {
+    let u = '/api/diario?PASE=' + encodeURIComponent(PASE);
+    if (CIUDAD) u += '&city=' + encodeURIComponent(CIUDAD);
+    void fetch(u, {
+      method: 'POST',
+      headers: { 'X-City-Pase': PASE, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ que, detalle, donde: donde ?? location.hash ?? '' }),
+      keepalive: true,
+    }).catch(() => {});
+  } catch {
+    /* the journal is a courtesy, never a dependency */
+  }
+}
+
 async function api<T>(ruta: string, opts?: RequestInit): Promise<T> {
   let u = ruta + (ruta.includes('?') ? '&' : '?') + 'PASE=' + encodeURIComponent(PASE);
   if (CIUDAD) u += '&city=' + encodeURIComponent(CIUDAD);
-  const r = await fetch(u, {
-    headers: { 'X-City-Pase': PASE, 'Content-Type': 'application/json' },
-    ...opts,
-  });
-  return r.json() as Promise<T>;
+  let r: Response;
+  try {
+    r = await fetch(u, {
+      headers: { 'X-City-Pase': PASE, 'Content-Type': 'application/json' },
+      ...opts,
+    });
+  } catch (e) {
+    // A request that never came back. This is the one a person cannot report,
+    // because nothing on screen says it happened.
+    if (ruta !== '/api/diario') anota('fetch failed', String(e), ruta);
+    throw e;
+  }
+  const cuerpo = (await r.json()) as T & { error?: string };
+  if (ruta !== '/api/diario' && (!r.ok || cuerpo?.error))
+    anota('api refused', { estado: r.status, error: cuerpo?.error }, ruta);
+  return cuerpo as T;
 }
 
 /** querySelector that refuses to hand back null: a missing element here is a bug
@@ -291,6 +369,7 @@ const SECCIONES: Array<[string, string]> = [
   ['mapa', 'The map'],
   ['puesto', 'My seat'],
   ['barrios', 'Districts'],
+  ['recepcion', 'Reception'],
   ['red', 'Roads'],
   ['committee', 'Committee'],
   ['gente', 'Houses'],
@@ -351,9 +430,9 @@ function pintaDemoControles(): void {
   const caja = document.createElement('div');
   caja.id = 'demoControles';
   caja.innerHTML =
-    `<span>guided committee</span>` +
-    `<button id="demoReplay" type="button" title="Play the guided committee from the top">⟳ replay</button>` +
-    `<button id="demoPausa" type="button" title="Pause or resume mid-scene">⏸ pause</button>`;
+    `<span>${_('guided committee')}</span>` +
+    `<button id="demoReplay" type="button" title="${_('Play the guided committee from the top')}">${_('⟳ replay')}</button>` +
+    `<button id="demoPausa" type="button" title="${_('Pause or resume mid-scene')}">${_('⏸ pause')}</button>`;
   header.appendChild(caja);
   const pausa = q<HTMLButtonElement>('#demoPausa', caja);
   const manda = (action: string) =>
@@ -496,10 +575,10 @@ function pintaActividad(seguir = false): void {
   if (!dot || !state || !list || !filter || !context || !workToggle) return;
   dot.classList.toggle('on', liveConnected);
   state.textContent = liveConnected
-    ? 'websocket live'
+    ? _('websocket live')
     : liveUrl
-      ? 'reconnecting'
-      : 'session offline';
+      ? _('reconnecting')
+      : _('session offline');
 
   const opened = new Map<string, string>();
   for (const event of liveEvents) {
@@ -513,7 +592,7 @@ function pintaActividad(seguir = false): void {
     }
   }
   filter.innerHTML =
-    '<option value="">all conversations</option>' +
+    `<option value="">${_('all conversations')}</option>` +
     [...opened.entries()]
       .reverse()
       .map(
@@ -530,7 +609,7 @@ function pintaActividad(seguir = false): void {
   };
   workToggle.classList.toggle('on', liveShowWork);
   workToggle.setAttribute('aria-pressed', String(liveShowWork));
-  workToggle.textContent = liveShowWork ? 'hide work' : 'show work';
+  workToggle.textContent = liveShowWork ? _('hide work') : _('show work');
   workToggle.onclick = () => {
     liveShowWork = !liveShowWork;
     pintaActividad(true);
@@ -548,8 +627,8 @@ function pintaActividad(seguir = false): void {
   if (!visible.length) {
     list.innerHTML = `<li class="liveEmpty">${
       liveConnected
-        ? 'The bus is live. Questions, positions and moderated replies will appear here.'
-        : 'Start the city session. Its visible conversation will appear here as it happens.'
+        ? _('The bus is live. Questions, positions and moderated replies will appear here.')
+        : _('Start the city session. Its visible conversation will appear here as it happens.')
     }</li>`;
     return;
   }
@@ -580,7 +659,7 @@ function renderActividad(event: ActivityEvent): string {
       }</summary><ul>${event.details.map((detail) => `<li>${esc(detail)}</li>`).join('')}</ul></details>`
     : '';
   const full = long
-    ? `<details class="liveFull"><summary>read full message</summary><p>${esc(summary)}</p></details>`
+    ? `<details class="liveFull"><summary>${_('read full message')}</summary><p>${esc(summary)}</p></details>`
     : '';
   return `<li class="liveTurn ${side} ${esc(event.tone)}">
     <div class="liveAvatar${E?.avatars?.[event.actor] ? ' conCara' : ''}"
@@ -645,7 +724,7 @@ function pintaContexto(thread: string, container: HTMLElement): void {
           actor === 'seat' ? 'seat · chair' : `${actor} · ${rolOperativo(actor) || 'member'}`,
         )}" style="--actor-hue:${tonoActor(actor)}">${cara(actor, actor === 'seat')}</span>`,
     )
-    .join('')}</div><span class="liveContextText"><b>seat moderates</b> · ${esc(
+    .join('')}</div><span class="liveContextText"><b>${_('seat moderates')}</b> · ${esc(
     received,
   )}/${esc(total)} positions · ${esc(status)}</span>`;
 }
@@ -770,29 +849,40 @@ function rail(): void {
             ? 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}">
+              : id === 'recepcion'
+                ? String(E.reception?.pending ?? 0)
+                : id === 'red'
+                  ? String(E.roads.length)
+                  : id === 'barrios'
+                    ? String(E.parcelas.length)
+                    : '';
+      return `<li class="${id === SECCION ? 'aqui' : ''}" data-s="${id}" role="button"
+        tabindex="0" ${id === SECCION ? 'aria-current="page"' : ''}>
       <span>${esc(_(et))}</span>${n ? `<span class="n">${n}</span>` : ''}</li>`;
     })
     .join('');
   q('#railOtras').innerHTML =
-    `<li class="${SECCION === 'ciudades' ? 'aqui' : ''}" data-s="ciudades">
+    `<li class="${SECCION === 'ciudades' ? 'aqui' : ''}" data-s="ciudades" role="button"
+      tabindex="0" ${SECCION === 'ciudades' ? 'aria-current="page"' : ''}>
       <span>${_('All cities')}</span><span class="n">${E.ciudades.length}</span></li>`;
   todos<HTMLElement>('#rail li,#railOtras li').forEach((li) => {
-    li.onclick = () => {
+    const abre = () => {
       document.body.classList.remove('enGuia');
       SECCION = li.dataset.s ?? 'mapa';
       pinta();
     };
+    li.onclick = abre;
+    li.onkeydown = (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      abre();
+    };
   });
   q('#dondeDatos').textContent = corto(E.datos);
   const cs = q<HTMLElement>('#ciudades');
   if (E.ciudades.length > 1) {
-    cs.innerHTML = `<select id="cambiaCiudad" title="which city this hall manages">
+    cs.innerHTML = `<select id="cambiaCiudad" aria-label="${_('which city this hall manages')}"
+      title="${_('which city this hall manages')}">
       ${E.ciudades
         .map(
           (c) => `<option value="${esc(c.ruta)}" ${c.actual ? 'selected' : ''}>
@@ -837,10 +927,15 @@ function rail(): void {
   };
 }
 
+/** The view on screen, if it is one that has anything to stop. */
+let montada: Vista | null = null;
+
 function pinta(): void {
-  // A playing demo left running in a section nobody is looking at is a timer
-  // firing into a detached node — and a soundtrack to the wrong screen.
-  if (SECCION !== 'demos') demos?.para();
+  // Whatever was here is being left. The dispatcher used to name one view and
+  // one of its teardown methods by hand, which is a line it would have grown
+  // again for the next view that owned a timer or a socket.
+  montada?.desmonta?.();
+  montada = null;
   rail();
   q<HTMLElement>('.cuerpo').style.padding = '';
   q<HTMLElement>('#lienzo').style.maxWidth = '';
@@ -871,7 +966,8 @@ VISTAS.bienvenida = () => {
     yo: E.yo,
     datos: corto(E.datos),
   });
-  void guia.pinta(q<HTMLElement>('#lienzo'));
+  guia.monta(q<HTMLElement>('#lienzo'));
+  montada = guia;
 };
 
 VISTAS.ciudades = () => {
@@ -896,23 +992,24 @@ VISTAS.ciudades = () => {
     .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
+    <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>
+    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>
+        <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>
+      <p class="prosa">${_(
+        'Takes {city} back to its first day: no seat, no agents, no committee history, no map. Your repositories and document folders are <b>never touched</b> — only the city that points at them.',
+        { city: `<b>${esc(E.city_name)}</b>` },
+      )}</p>
       <button class="bt malo" id="reiniciaCiudad">${_('Start over…')}</button>
     </div>
     <p class="pista">Archiving <b>moves</b> a city into
@@ -1009,9 +1106,10 @@ VISTAS.ciudades = () => {
 let demos: Demos | null = null;
 
 VISTAS.demos = () => {
-  if (!demos) demos = new Demos({ api, esc, pinta: renderActividad });
+  demos ??= new Demos({ api, esc, pinta: renderActividad });
   q('#lienzo').innerHTML = '<div id="demoHueco"></div>';
   demos.monta(q<HTMLElement>('#demoHueco'));
+  montada = demos;
 };
 
 VISTAS.resumen = () => {
@@ -1084,19 +1182,19 @@ VISTAS.resumen = () => {
              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>${Object.keys(E.skills).length}</b><span>${_('repo agents')}</span></div>
       <div class="cifra"><b>${E.parcelas.length}</b><span>houses</span></div>
       <div class="cifra"><b>${E.roads.length}</b><span>roads</span></div>
-      <div class="cifra"><b>${E.deliberations.length}</b><span>committee acts</span></div>
-      <div class="cifra"><b>${Object.values(E.skills).reduce((n, a) => n + a.skills.length, 0)}</b><span>skills recognised</span></div>
+      <div class="cifra"><b>${E.deliberations.length}</b><span>${_('committee acts')}</span></div>
+      <div class="cifra"><b>${Object.values(E.skills).reduce((n, a) => n + a.skills.length, 0)}</b><span>${_('skills recognised')}</span></div>
     </div>
     <div class="luces">
-      <span class="luz ${E.tarjetas.length ? 'on' : ''}">data repo</span>
+      <span class="luz ${E.tarjetas.length ? 'on' : ''}">${_('data repo')}</span>
       <span class="luz ${E.gh ? 'on' : 'neutra'}">github${E.gh ? '' : ' — optional'}</span>
-      <span class="luz ${E.plugin ? 'on' : ''}">plugin installed</span>
+      <span class="luz ${E.plugin ? 'on' : ''}">${_('plugin installed')}</span>
       <span class="luz ${sesionArriba ? 'on' : 'neutra'}">tmux session${sesionArriba ? ' up' : ''}</span>
     </div>
-    <div><span class="sub">what is left</span>
+    <div><span class="sub">${_('what is left')}</span>
       <div class="tareas" style="margin-top:9px">${tareas
         .map(
           (t) => `
@@ -1107,7 +1205,7 @@ VISTAS.resumen = () => {
       </div></div>
     <div><span class="sub">work</span>
       <div style="display:flex;flex-direction:column;gap:9px;margin-top:9px">
-        <div class="orden"><span class="et2">your day</span>
+        <div class="orden"><span class="et2">${_('your day')}</span>
           <code>${
             sesionArriba
               ? 'tmux attach -t ' + esc(E.sesion)
@@ -1116,7 +1214,7 @@ VISTAS.resumen = () => {
           ${
             sesionArriba
               ? `<button class="bt mini" data-copia="tmux attach -t ${esc(E.sesion)}">copy</button>`
-              : '<button class="bt mini ppal" id="abreSesion">open my session</button>'
+              : `<button class="bt mini ppal" id="abreSesion">${_('open my session')}</button>`
           }
         </div>
         <div class="orden"><span class="et2">the map</span>
@@ -1230,26 +1328,26 @@ VISTAS.puesto = () => {
 
 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>
+  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">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, 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">${_('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">the agents</span>
+      <p class="cargando">${_('reading the role files')}</p></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
+      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>
+      <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>
+      <button class="bt ppal" id="guardaPuesto">${_('Save my seat')}</button>
       <span class="cargando" id="puestoEstado" style="display:none">writing</span></div>`;
 
   // Domain first, then only the roles relevant inside it. Both are copied into
@@ -1307,28 +1405,28 @@ async function puesto(): Promise<void> {
   // goal
   const o: Partial<Objetivo> = (mia && mia.objetivo) || {};
   q('#meta').innerHTML = `
-    <div class="campo"><label>The goal, in one line</label>
-      <input type="text" id="g_title" value="${esc(o.title)}" placeholder="Concrete enough to argue with — empty skips it">
+    <div class="campo"><label>${_('The goal, in one line')}</label>
+      <input type="text" id="g_title" value="${esc(o.title)}" placeholder="${_('Concrete enough to argue with — empty skips it')}">
     </div>
     <div class="dos">
-      <div class="campo"><label>How it is measured</label>
+      <div class="campo"><label>${_('How it is measured')}</label>
         <input type="text" id="g_signal" value="${esc(o.signal)}"></div>
-      <div class="campo"><label>The command that returns it, if a command can</label>
+      <div class="campo"><label>${_('The command that returns it, if a command can')}</label>
         <input type="text" class="mono" id="g_command" value="${esc(o.command)}"
-          placeholder="empty for a qualitative goal"></div>
+          placeholder="${_('empty for a qualitative goal')}"></div>
     </div>
-    <div class="campo"><label>…or who judges it, and how often</label>
+    <div class="campo"><label>${_('…or who judges it, and how often')}</label>
       <input type="text" id="g_manual" value="${esc(o.manual)}"
-        placeholder="in prose: the architect reads the AGENTS.md files on Fridays">
+        placeholder="${_('in prose: the architect reads the AGENTS.md files on Fridays')}">
       <p class="pista">A goal judged by a person is a real goal — plenty of quality
         is prose, not a number. Used when the command is empty.</p></div>
     <div class="dos">
-      <div class="campo"><label>What it returns today</label>
+      <div class="campo"><label>${_('What it returns today')}</label>
         <input type="text" class="mono" id="g_baseline" value="${esc(o.baseline)}"></div>
-      <div class="campo"><label>Where it has to get to</label>
+      <div class="campo"><label>${_('Where it has to get to')}</label>
         <input type="text" class="mono" id="g_target" value="${esc(o.target)}"></div>
     </div>
-    <div class="campo" style="max-width:240px"><label>By when</label>
+    <div class="campo" style="max-width:240px"><label>${_('By when')}</label>
       <input type="text" id="g_by" value="${esc(o.by ?? 'this quarter')}"></div>`;
 
   const val = (id: string): string => q<HTMLInputElement>(id).value.trim();
@@ -1390,23 +1488,23 @@ VISTAS.barrios = () => {
 
   const render = (): void => {
     const idsValidos = new Set([...unidades.map((u) => u.id), 'none']);
-    q('#lienzo').innerHTML = `<div><span class="sub">districts & houses</span>
-      <h1 style="margin-top:6px">The modelling no tool can do for you</h1>
-      <p class="prosa" style="margin-top:8px">A house is <b>not a repo</b> — it is a
+    q('#lienzo').innerHTML = `<div><span class="sub">${_('districts & houses')}</span>
+      <h1 style="margin-top:6px">${_('The modelling no tool can do for you')}</h1>
+      <p class="prosa" style="margin-top:8px">${_(`A house is <b>not a repo</b> — it is a
       parcel, a slice of one serving a single business unit. Split the interesting
       repos, give every house its district, and the map can say
-      “this change touches banking” instead of “this change touches src/lib”.</p></div>
+      “this change touches banking” instead of “this change touches src/lib”.`)}</p></div>
 
       <div><span class="sub">districts</span>
         <div class="tabla" id="unidades" style="margin-top:9px"></div>
         <div style="display:flex;gap:9px;margin-top:9px">
-          <input type="text" id="nuevaU" placeholder="another district…" style="flex:1">
+          <input type="text" id="nuevaU" placeholder="${_('another district…')}" style="flex:1">
           <button class="bt" id="masU">Add</button></div></div>
 
       <div><span class="sub">houses</span><div id="parcelas" style="margin-top:9px"></div></div>
 
       <div style="display:flex;gap:10px;align-items:center">
-        <button class="bt ppal" id="guardaBarrios">Save districts & houses</button>
+        <button class="bt ppal" id="guardaBarrios">${_('Save districts & houses')}</button>
         <span style="font-size:12px;color:var(--tinta3);font-style:italic">
           writes units.yml and parcels.yml — reseed the map to see it drawn</span></div>`;
 
@@ -1562,7 +1660,7 @@ VISTAS.red = () => {
   const locales = E.ciudades.filter((c) => !c.actual && c.id && !conectadas.has(c.id));
   const invitation = JSON.stringify(E.invitation);
   q('#lienzo').innerHTML = `<div><span class="sub">roads</span>
-    <h1 style="margin-top:6px">Cities this one may reach</h1>
+    <h1 style="margin-top:6px">${_('Cities this one may reach')}</h1>
     <p class="prosa" style="margin-top:8px">A road joins city seats. It may stay on
     this machine or continue over the remote bus; the city sees one explicit
     connection either way.</p></div>
@@ -1574,9 +1672,9 @@ VISTAS.red = () => {
           <span class="rp">${r.local ? 'local road' : 'remote road'}</span>
           <button class="bt mini" data-road-close="${esc(r.id)}">close</button></div>`,
         )
-        .join('') || '<p class="prosa">No roads yet. This city is isolated on purpose.</p>'
+        .join('') || `<p class="prosa">${_('No roads yet. This city is isolated on purpose.')}</p>`
     }</div>
-    <div><span class="sub">other cities on this machine</span>
+    <div><span class="sub">${_('other cities on this machine')}</span>
       <div class="gente" style="margin-top:9px">${
         locales
           .map(
@@ -1584,9 +1682,9 @@ VISTAS.red = () => {
               <span class="ag">${esc(c.slug ?? c.ruta)}</span>
               <button class="bt mini ppal" data-road-open="${esc(c.id)}">open road</button></div>`,
           )
-          .join('') || '<p class="prosa">No unconnected local cities.</p>'
+          .join('') || `<p class="prosa">${_('No unconnected local cities.')}</p>`
       }</div></div>
-    <div class="orden"><span class="et2">remote invitation · public, no token</span>
+    <div class="orden"><span class="et2">${_('remote invitation · public, no token')}</span>
       <code>${esc(invitation)}</code>
       <button class="bt mini" data-copia="${esc(invitation)}">copy</button>
     </div>`;
@@ -1615,16 +1713,305 @@ VISTAS.red = () => {
   });
 };
 
+// ── owner reception ─────────────────────────────────────────────────────────
+VISTAS.recepcion = () => {
+  q('#lienzo').innerHTML = `<div><span class="sub">${_('reception')}</span>
+    <h1 style="margin-top:6px">${_('Messages wait for you, not your agents')}</h1>
+    <p class="prosa" style="margin-top:8px">${_(
+      'Remote text stops here as inert text. Read it, reject it with a reason, or choose the cities that should receive it. Until then no model can read it.',
+    )}</p></div>
+    <div class="recModo" id="recModo">
+      <div><span class="et2">${_('routing mode')}</span><b>${_('Manual review')}</b>
+        <p>${_('Every message needs a person before it reaches a city.')}</p></div>
+      <button class="bt mini" type="button" data-rec-open-config>${_('Configure Auto')}</button>
+    </div>
+    <div id="recConfig" hidden></div>
+    <div id="recLista"><p class="prosa">${_('Reading your reception…')}</p></div>`;
+  void cargaRecepcion();
+};
+
+async function cargaRecepcion(): Promise<void> {
+  const hueco = q<HTMLElement>('#recLista');
+  let estado: ReceptionState;
+  try {
+    estado = await api<ReceptionState>('/api/reception');
+  } catch {
+    hueco.innerHTML = `<div class="recError">${_('Could not read your reception')}</div>`;
+    return;
+  }
+  if (estado.error) {
+    hueco.innerHTML = `<div class="recError">${esc(estado.error)}</div>`;
+    return;
+  }
+  E.reception = {
+    pending: estado.summary.pending,
+    pendingBytes: estado.summary.pendingBytes,
+    routingMode: estado.settings.routingMode,
+    reviewPolicy: estado.settings.reviewPolicy,
+    routerProfile: estado.settings.routerProfile,
+    autoAvailable: estado.settings.autoAvailable,
+  };
+  const reglas = new Map(estado.settings.autoRules.map((rule) => [rule.cityId, rule.keywords]));
+  const modo = q<HTMLElement>('#recModo');
+  modo.innerHTML = `<div><span class="et2">${_('routing mode')}</span>
+    <b>${estado.settings.routingMode === 'auto' ? _('Automatic routing') : _('Manual review')}</b>
+    <p>${
+      estado.settings.routingMode === 'auto'
+        ? _('Only one clear, low-risk rule match can leave the human queue automatically.')
+        : _('Every message needs a person before it reaches a city.')
+    }</p></div>
+    <button class="bt mini" type="button" data-rec-open-config>${_('Configure Auto')}</button>`;
+  const configuracion = q<HTMLElement>('#recConfig');
+  configuracion.innerHTML = `<form class="recAutoConfig" data-rec-config>
+    <fieldset><legend>${_('Routing policy')}</legend>
+      <label><input type="radio" name="routing_mode" value="manual"
+        ${estado.settings.routingMode === 'manual' ? 'checked' : ''}> ${_('Keep human review')}</label>
+      <label><input type="radio" name="routing_mode" value="auto"
+        ${estado.settings.routingMode === 'auto' ? 'checked' : ''}> ${_('Use the local rule router')}</label>
+    </fieldset>
+    <div class="recReglas"><p>${_('Write comma-separated words or phrases for each destination. Empty cities are never selected.')}</p>
+      ${estado.cities
+        .map(
+          (city) => `<label><span><b>${esc(city.name)}</b><small>${esc(city.address)}</small></span>
+        <input type="text" name="rule-${esc(city.id)}" maxlength="1200"
+          data-rule-city="${esc(city.id)}" value="${esc((reglas.get(city.id) ?? []).join(', '))}"
+          placeholder="${_('e.g. contract, privacy, legal review')}"></label>`,
+        )
+        .join('')}</div>
+    <p class="recAutoAviso">${_('Suspicious, unmatched, or ambiguous text always waits for you. Auto never executes, answers, or opens links.')}</p>
+    <button class="bt ppal" type="submit">${_('Save routing policy')}</button>
+  </form>`;
+  q<HTMLButtonElement>('[data-rec-open-config]', modo).onclick = () => {
+    configuracion.hidden = !configuracion.hidden;
+  };
+  rail();
+  const conexiones = estado.connections.length
+    ? `<section class="recConexiones"><div class="recSeccion"><b>${_('New encrypted message')}</b>
+        <span>${estado.outbox.queued ? plural(estado.outbox.queued, 'message queued', 'messages queued') : _('Messages leave from this computer with end-to-end encryption.')}</span></div>
+      <form class="recCompose" data-rec-send>
+        <label class="recComposePersona" for="rec-send-connection"><span>${_('Write to')}</span>
+          <select id="rec-send-connection" name="connection" required>
+            ${estado.connections
+              .map(
+                (conexion) => `<option value="${esc(conexion.id)}">${esc(conexion.name)}</option>`,
+              )
+              .join('')}
+          </select>
+        </label>
+        <label class="recComposeTexto" for="rec-send-text"><span>${_('Message')}</span>
+          <textarea id="rec-send-text" name="text" rows="3" maxlength="11500" required
+            placeholder="${_('Your message will stop in their private reception.')}"></textarea>
+        </label>
+        <button class="bt ppal" type="submit">${_('Send securely')}</button>
+      </form></section>`
+    : '';
+  const vacia = !estado.messages.length
+    ? `<div class="recVacia"><b>${_('Reception clear')}</b>
+        <p>${_('No remote message is waiting for a decision.')}</p></div>`
+    : '';
+  const ciudades = estado.cities
+    .map(
+      (ciudad) => `<label class="recDestino"><input type="checkbox" name="destination"
+        value="${esc(ciudad.id)}"><span><b>${esc(ciudad.name)}</b>
+        <small>${esc(ciudad.address)}</small></span></label>`,
+    )
+    .join('');
+  const pendientes = estado.messages.length
+    ? `<div class="recResumen"><b>${estado.summary.pending}</b>
+      <span>${plural(estado.summary.pending, 'message waiting', 'messages waiting')}</span>
+      <small>${formateaBytes(estado.summary.pendingBytes)} · ${_('local only')}</small></div>
+    <div class="recMensajes">${estado.messages
+      .map(
+        (mensaje) => `<article class="recMensaje">
+          <header><div><span class="recOrigen">${esc(mensaje.fromName)}</span>
+            <span>${esc(fechaRecepcion(mensaje.receivedAt))}</span></div>
+            <span class="recSeguro">${mensaje.kind === 'rejection' ? _('Reply to a rejected message') : _('No agent has read this')}</span></header>
+          <pre class="recTexto">${esc(mensaje.text)}</pre>
+          ${
+            mensaje.kind === 'rejection'
+              ? `<div class="recAvisoAccion">
+            <button class="bt mini" type="button" data-rec-dismiss="${esc(mensaje.id)}">${_('Dismiss')}</button>
+          </div>`
+              : `<div class="recAcciones">
+            <form data-rec-route="${esc(mensaje.id)}">
+              <fieldset><legend>${_('Send to')}</legend><div class="recDestinos">${ciudades}</div></fieldset>
+              <button class="bt ppal" type="submit" disabled>${_('Route to selected cities')}</button>
+            </form>
+            <details><summary>${_('Reject and reply with a reason')}</summary>
+              <form data-rec-reject="${esc(mensaje.id)}">
+                <label for="rec-reason-${esc(mensaje.id)}">${_('Reason sent back securely')}</label>
+                <input id="rec-reason-${esc(mensaje.id)}" type="text" name="reason"
+                  maxlength="500" required
+                  placeholder="${_('Reason for rejecting this message')}">
+                <button class="bt malo" type="submit">${_('Reject and send reason')}</button>
+              </form>
+            </details>
+          </div>`
+          }
+        </article>`,
+      )
+      .join('')}</div>`
+    : '';
+  hueco.innerHTML = `${vacia}${pendientes}${conexiones}`;
+  enlazaRecepcion();
+}
+
+function enlazaRecepcion(): void {
+  q<HTMLFormElement>('[data-rec-config]').onsubmit = async (evento) => {
+    evento.preventDefault();
+    const formulario = evento.currentTarget as HTMLFormElement;
+    const boton = q<HTMLButtonElement>('button[type=submit]', formulario);
+    const routingMode = q<HTMLInputElement>('input[name=routing_mode]:checked', formulario).value;
+    const rules = todos<HTMLInputElement>('[data-rule-city]', formulario)
+      .map((campo) => ({
+        city_id: campo.dataset.ruleCity,
+        keywords: campo.value
+          .split(',')
+          .map((value) => value.trim())
+          .filter(Boolean),
+      }))
+      .filter((rule) => rule.keywords.length);
+    boton.disabled = true;
+    const respuesta = await api<{ ok?: boolean; error?: string }>('/api/reception', {
+      method: 'POST',
+      body: JSON.stringify({ action: 'configure', routing_mode: routingMode, rules }),
+    });
+    if (!respuesta.ok) {
+      boton.disabled = false;
+      toast(respuesta.error ?? _('Could not save the routing policy'), true);
+      return;
+    }
+    toast(_('Routing policy saved.'));
+    await cargaRecepcion();
+  };
+  todos<HTMLFormElement>('[data-rec-send]').forEach((formulario) => {
+    formulario.onsubmit = async (evento) => {
+      evento.preventDefault();
+      const boton = q<HTMLButtonElement>('button[type=submit]', formulario);
+      const campo = q<HTMLTextAreaElement>('textarea[name=text]', formulario);
+      const connectionId = q<HTMLSelectElement>('select[name=connection]', formulario).value;
+      if (!connectionId || !campo.value.trim()) return;
+      boton.disabled = true;
+      const respuesta = await api<{ ok?: boolean; error?: string }>('/api/reception', {
+        method: 'POST',
+        body: JSON.stringify({
+          action: 'send',
+          connection_id: connectionId,
+          text: campo.value,
+        }),
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? _('Could not queue the message'), true);
+        return;
+      }
+      campo.value = '';
+      toast(_('Message queued on this computer.'));
+      await cargaRecepcion();
+    };
+  });
+  todos<HTMLButtonElement>('[data-rec-dismiss]').forEach((boton) => {
+    boton.onclick = async () => {
+      boton.disabled = true;
+      const respuesta = await api<{ ok?: boolean; error?: string }>('/api/reception', {
+        method: 'POST',
+        body: JSON.stringify({
+          action: 'reject',
+          message_id: boton.dataset.recDismiss,
+          reason: 'Dismissed response',
+        }),
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? _('Could not dismiss the response'), true);
+        return;
+      }
+      await cargaRecepcion();
+    };
+  });
+  todos<HTMLFormElement>('[data-rec-route]').forEach((formulario) => {
+    const boton = q<HTMLButtonElement>('button[type=submit]', formulario);
+    const actualiza = () => {
+      boton.disabled = !formulario.querySelector<HTMLInputElement>('input:checked');
+    };
+    formulario.onchange = actualiza;
+    formulario.onsubmit = async (evento) => {
+      evento.preventDefault();
+      const destinations = todos<HTMLInputElement>(
+        'input[name=destination]:checked',
+        formulario,
+      ).map((campo) => campo.value);
+      if (!destinations.length) return;
+      boton.disabled = true;
+      const respuesta = await api<{ ok?: boolean; error?: string }>('/api/reception', {
+        method: 'POST',
+        body: JSON.stringify({
+          action: 'route',
+          message_id: formulario.dataset.recRoute,
+          destinations,
+        }),
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? _('Could not route the message'), true);
+        return;
+      }
+      toast(_('Message routed. Only the selected cities can now read it.'));
+      await cargaRecepcion();
+    };
+  });
+  todos<HTMLFormElement>('[data-rec-reject]').forEach((formulario) => {
+    formulario.onsubmit = async (evento) => {
+      evento.preventDefault();
+      const boton = q<HTMLButtonElement>('button[type=submit]', formulario);
+      const reason = q<HTMLInputElement>('input[name=reason]', formulario).value.trim();
+      if (!reason) return;
+      boton.disabled = true;
+      const respuesta = await api<{ ok?: boolean; error?: string }>('/api/reception', {
+        method: 'POST',
+        body: JSON.stringify({
+          action: 'reject',
+          message_id: formulario.dataset.recReject,
+          reason,
+        }),
+      });
+      if (!respuesta.ok) {
+        boton.disabled = false;
+        toast(respuesta.error ?? _('Could not reject the message'), true);
+        return;
+      }
+      toast(_('Message rejected. Your reason is queued for encrypted delivery.'));
+      await cargaRecepcion();
+    };
+  });
+}
+
+function fechaRecepcion(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime())
+    ? value
+    : date.toLocaleString(idioma() === 'es' ? 'es-ES' : 'en-GB', {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      });
+}
+
+function formateaBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 // ── committee acts ───────────────────────────────────────────────────────────
 VISTAS.committee = () => {
   q('#lienzo').innerHTML = `<div><span class="sub">committee</span>
-    <h1 style="margin-top:6px">Decisions with a visible chain of custody</h1>
+    <h1 style="margin-top:6px">${_('Decisions with a visible chain of custody')}</h1>
     <p class="prosa" style="margin-top:8px">The seat selects relevant repo agents,
     gathers isolated positions, controls the floor, decides and assigns an
     independent verification. This view is read-only; the vendor-neutral CLI
     drives the protocol.</p></div>
     <div class="orden"><span class="et2">start</span>
-      <code>agents-city committee schema open</code>
+      <code>${_('agents-city committee schema open')}</code>
       <button class="bt mini" data-copia="agents-city committee schema open">copy</button>
     </div>
     <div class="gente">${
@@ -1642,7 +2029,7 @@ VISTAS.committee = () => {
           </div>`,
         )
         .join('') ||
-      '<p class="prosa">No committee acts yet. Open one only when the seat needs specialised evidence.</p>'
+      `<p class="prosa">${_('No committee acts yet. Open one only when the seat needs specialised evidence.')}</p>`
     }</div>`;
   enlaza();
 };
@@ -1675,12 +2062,17 @@ VISTAS.gente = () => {
     const g = a.growth;
     const crecido = Math.min(1, Math.log2(g.floors + 1) / 8);
     const skills = E.skills[a.name]?.skills ?? [];
-    const esClaude = a.runtime === 'claude';
+    const motorDelAgente = motorDe(a.runtime);
     // "custom…" keeps the curated lineup from ever holding the card hostage:
-    // the alias is resolved by the CLI at launch, not by this list.
+    // the alias is resolved by the CLI at launch, not by this list. Where the
+    // names are not ours to list at all, the whole field is that free text.
     const opcionesModelo =
-      opciones([''].concat(MODELOS), a.model) + '<option value="__otro__">custom…</option>';
-    const opcionesEsfuerzo = opciones([''].concat(ESFUERZOS), a.effort);
+      opciones([''].concat(motorDelAgente.modelos), a.model) +
+      `<option value="__otro__">${_('custom…')}</option>`;
+    const opcionesEsfuerzo = opciones(
+      [''].concat(ESFUERZOS),
+      motorDelAgente.esfuerzo ? a.effort : '',
+    );
     const opcionesRuntime = opciones(RUNTIMES, a.runtime);
     const montajes = a.mounts ?? [];
     return `
@@ -1692,22 +2084,25 @@ VISTAS.gente = () => {
           <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>
+              title="${_("Reroll this agent's face — deterministic, persisted on the card")}">🎲</button>
             <button class="rpgMini rpgIns" type="button" data-agente="${esc(a.slug)}"
-              data-file="CLAUDE.md" title="Instructions the Claude runtime reads">CLAUDE.md</button>
+              data-file="CLAUDE.md" title="${_('Instructions the Claude runtime reads')}">CLAUDE.md</button>
             <button class="rpgMini rpgIns" type="button" data-agente="${esc(a.slug)}"
-              data-file="AGENTS.md" title="Instructions Codex, OpenCode and Kimi read">AGENTS.md</button>
+              data-file="AGENTS.md" title="${_('Instructions Codex, OpenCode and Kimi read')}">AGENTS.md</button>
           </span>
         </div>
         <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"'}>
+          <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="model">
             ${opcionesModelo}</select></div>
         <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"'}>
+            ${
+              motorDelAgente.esfuerzo
+                ? ''
+                : `disabled title="${_('This CLI has no effort setting.')}"`
+            }>
             ${opcionesEsfuerzo}</select></div>
         <div class="rpgFila"><label>${_('provider')}</label>
           <span class="rpgDato"><span class="cliDot ${
@@ -1722,7 +2117,7 @@ VISTAS.gente = () => {
             _(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>
+            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="rpgSkills"><label>${_('works on')} · ${montajes.length}</label>
@@ -1744,7 +2139,7 @@ VISTAS.gente = () => {
           }
           ${
             a.legacy
-              ? '<span class="rpgDato">a legacy repo agent works on its own repo</span>'
+              ? `<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>
@@ -1760,7 +2155,7 @@ VISTAS.gente = () => {
                       `<code class="mono" title="${esc(s.description)}">${esc(s.name)}${
                         s.removable && s.dir
                           ? `<button class="rpgQuitar" type="button" data-agente="${esc(a.slug)}"
-                              data-skill="${esc(s.dir)}" title="Remove this skill from the agent's home">×</button>`
+                              data-skill="${esc(s.dir)}" title="${_("Remove this skill from the agent's home")}">×</button>`
                           : ''
                       }</code>`,
                   )
@@ -1768,21 +2163,21 @@ VISTAS.gente = () => {
               : '<span class="rpgDato">none discovered</span>'
           }
           <label class="rpgMini rpgSubir"
-            title="Install a skill zip into this agent's own home — the Claude runtime reads skills; other engines ignore them">
+            title="${_("Install a skill zip into this agent's own home — the Claude runtime reads skills; other engines ignore them")}">
             + zip<input type="file" accept=".zip" data-agente="${esc(a.slug)}"></label></div>
       </div>`;
   };
 
   q('#lienzo').innerHTML = `<div><span class="sub">the houses of ${esc(E.city_name)}</span>
     <h1 style="margin-top:6px">${_('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>,
+    <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
+    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 {donde}, so another city has its own people even if you give them the same names.',
+      { donde: `<code class="mono">${esc(corto(E.datos))}/agents/</code>` },
+    )} 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,
@@ -2009,8 +2404,23 @@ VISTAS.gente = () => {
         },
       });
       if (dicho === null || !elegidas.length) return;
-      for (const ruta of elegidas)
-        await montaje({ agent: boton.dataset.agente ?? '', add: ruta }, _('Mounted'));
+      // One refresh and one toast for the whole dialog: mounting five folders
+      // used to cost five serialised posts, five state fetches and five full
+      // repaints of the Hall, for five independent writes.
+      const agente = boton.dataset.agente ?? '';
+      const fallos = await Promise.all(
+        elegidas.map((ruta) =>
+          api<{ ok?: boolean; error?: string }>('/api/montaje', {
+            method: 'POST',
+            body: JSON.stringify({ agent: agente, add: ruta }),
+          })
+            .then((r) => (r.ok ? '' : `${ruta}: ${r.error ?? 'could not mount'}`))
+            .catch((e) => `${ruta}: ${String(e)}`),
+        ),
+      );
+      const malos = fallos.filter(Boolean);
+      toast(malos.length ? malos.join('; ') : _('Mounted'), malos.length > 0);
+      void refresca();
     };
   });
   todos<HTMLButtonElement>('.rpgDesmonta').forEach((boton) => {
@@ -2024,8 +2434,6 @@ VISTAS.gente = () => {
         { aceptar: _('Unmount it') },
       );
       if (!vale) 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`,
@@ -2314,6 +2722,15 @@ function interruptorDeIdioma(): void {
   };
 }
 
+// Nothing in a browser reports itself. These two are why a person can say "it
+// just did nothing" and be exactly right.
+window.addEventListener('error', (e) =>
+  anota('uncaught error', { mensaje: e.message, fichero: e.filename, linea: e.lineno }),
+);
+window.addEventListener('unhandledrejection', (e) =>
+  anota('unhandled rejection', String((e as PromiseRejectionEvent).reason)),
+);
+
 arrastreDelRail();
 interruptorDeIdioma();
 tema();