agents-city 0.4.0 → 0.5.2

package/city/web/src/bienvenida.ts

@@ -16,7 +16,7 @@
  */
 
 import { plural, t as _ } from './idioma';
-import { CLASES, FormularioDeCasa } from './casa';
+import { FormularioDeCasa } from './casa';
 import type { DatosDeCasa, Rol } from './casa';
 
 export type { Rol } from './casa';
@@ -46,7 +46,7 @@ const PASOS = ['Welcome', 'The work', 'Your chair', 'The houses', 'Ready'];
 /** A house, drawn rather than shipped: the same isometric shape the map and the
  * desktop icon use, so the first thing somebody sees is already the product. */
 function casita(color: string): string {
-  return `<svg viewBox="0 0 120 108" role="img" aria-label="an isometric house" class="bvCasa">
+  return `<svg viewBox="0 0 120 108" role="img" aria-label="${_('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"/>
@@ -67,7 +67,18 @@ export class Bienvenida {
 
   constructor(private readonly p: Puerta) {}
 
-  /** Draw the current step into `lienzo`. The only entry point. */
+  /**
+   * The view contract, so the Hall's dispatcher treats every section the same.
+   *
+   * The painting itself is async — the first one asks the server for the domain
+   * packs — and a router cannot wait on a view. It does not need to: the guide
+   * draws a loading line first and fills itself in.
+   */
+  monta(host: HTMLElement): void {
+    void this.pinta(host);
+  }
+
+  /** Draw the current step into `lienzo`. */
   async pinta(lienzo: HTMLElement): Promise<void> {
     this.lienzo = lienzo;
     if (!this.dominios.length) {
@@ -243,16 +254,6 @@ export class Bienvenida {
       </div>`;
   }
 
-  /**
-   * The places on this disk worth offering for this house, ranked.
-   *
-   * With nothing typed it is what you touched recently, because on a machine
-   * with three hundred clones a list is not an answer. What is typed matches
-   * the name and the path both — people look for `rankia` and for `Documents`
-   * with equal frequency, and only one of those is a repository name. A house
-   * that keeps knowledge sees document folders first, because that is the one
-   * kind of agent the old picker could not help at all.
-   */
   // ── 4. done ───────────────────────────────────────────────────────────────
   private pantallaFinal(): string {
     return `

package/city/web/src/casa.ts

@@ -13,7 +13,8 @@
 
 import { plural, t as _ } from './idioma';
 import { Explorador } from './explorador';
-import { ESFUERZOS, MODELOS, RUNTIMES, opciones } from './motores';
+import { ESFUERZOS, RUNTIMES, motorDe, opciones } from './motores';
+import { Montada } from './vista';
 
 export interface Rol {
   id: string;
@@ -57,7 +58,7 @@ export const CLASES: Array<[string, string, string]> = [
   ['coordinator', 'It coordinates', 'Its house grows with the decisions it records.'],
 ];
 
-export class FormularioDeCasa {
+export class FormularioDeCasa extends Montada {
   readonly datos: DatosDeCasa = {
     nombre: '',
     clase: 'code',
@@ -68,40 +69,70 @@ export class FormularioDeCasa {
     esfuerzo: '',
   };
   private roles: Rol[] = [];
-  private host: HTMLElement | null = null;
-
+  private rolesPedidos = false;
   constructor(
     private readonly p: Puerta,
     roles: Rol[] = [],
   ) {
+    super();
     this.roles = roles;
   }
 
-  /** Render into `host` and wire it. Safe to call again: that is the repaint. */
-  monta(host: HTMLElement): void {
-    this.host = host;
+  override monta(host: HTMLElement): void {
     void this.aseguraRoles();
-    host.innerHTML = this.html();
-    this.enlaza(host);
+    super.monta(host);
+    // The picker is a view of its own, living in a hole this one leaves for it.
     const hueco = host.querySelector<HTMLElement>('.casaExp');
     if (hueco) this.explora().monta(hueco);
   }
 
-  private repinta(): void {
+  protected override repinta(): void {
+    // A repaint here rebuilds the hole too, so the picker has to be remounted
+    // into the new one — which is what `monta` does.
     if (this.host) this.monta(this.host);
   }
 
+  /** Asked once, ever. `monta` runs on every repaint, so a guard on "did we get
+   * any roles back" would refetch — and repaint, and refetch — forever the day
+   * the catalogue comes back empty. */
   private async aseguraRoles(): Promise<void> {
-    if (this.roles.length) return;
+    if (this.rolesPedidos) return;
+    this.rolesPedidos = true;
     try {
       const r = await this.p.api<{ roles: Rol[] }>('/api/roles?scope=agent');
       this.roles = r.roles ?? [];
-      this.repinta();
+      // Only the one control that changed. Rebuilding the whole form because a
+      // dropdown filled in is how the name got lost in the first place, and it
+      // also took the folder picker down mid-walk.
+      this.pintaRoles();
     } catch {
       this.roles = []; // the role list is a convenience; blank is always valid
     }
   }
 
+  /** The role list, once it arrives, without touching anything else. */
+  private pintaRoles(): void {
+    const sel = this.host?.querySelector<HTMLSelectElement>('#bvRol');
+    if (!sel || !this.roles.length) return;
+    sel.innerHTML = this.opcionesDeRol();
+    sel.value = this.datos.rol;
+    // A select that answers to nothing is a select that silently keeps the
+    // first option no matter what the person picks.
+    sel.onchange = () => this.recoge();
+    this.recoge();
+  }
+
+  private opcionesDeRol(): string {
+    return this.roles
+      .map(
+        (r) =>
+          `<option value="${this.p.esc(r.id)}"${
+            r.id === this.datos.rol ? ' selected' : ''
+          }>${this.p.esc(r.name)}</option>`,
+      )
+      .join('');
+  }
+
   /** The folder picker, built once so walking survives a repaint. */
   private explorador: Explorador | null = null;
 
@@ -113,14 +144,17 @@ export class FormularioDeCasa {
           const ya = this.datos.montajes.indexOf(ruta);
           if (ya >= 0) this.datos.montajes.splice(ya, 1);
           else this.datos.montajes.push(ruta);
-          this.repinta();
+          // Only the strip of chosen chips changes here. Repainting the whole
+          // form tore the picker down and rebuilt it mid-click — one tick
+          // rendered two thousand rows twice, and lost the person's place.
+          this.pintaElegidas();
         },
         () => this.datos.montajes,
       );
     return this.explorador;
   }
 
-  html(): string {
+  protected html(): string {
     const a = this.datos;
     const esc = this.p.esc;
     const clases = CLASES.map(
@@ -135,7 +169,7 @@ export class FormularioDeCasa {
           `<option value="${esc(r.id)}"${r.id === a.rol ? ' selected' : ''}>${esc(r.name)}</option>`,
       )
       .join('');
-    const esClaude = (a.runtime || 'claude') === 'claude';
+    const motor = motorDe(a.runtime);
     return `
       <div class="campo"><label>${_('What do you call it?')}</label>
         <input type="text" id="bvNombre" value="${esc(a.nombre)}"
@@ -146,52 +180,91 @@ export class FormularioDeCasa {
         <select id="bvRol">${roles}</select></div>
       <label class="bvEtiqueta">${_('What runs it?')}</label>
       <p class="pista">${_(
-        'Leave all three on default and it runs the way you do. Model and effort are Claude’s to read; another CLI carries its own flags.',
+        'Leave all three on default and it runs the way you do. Whatever you set here is written once on the card, and the launcher hands it to whichever CLI runs this house.',
       )}</p>
       <div class="bvMotor">
         <div class="campo"><label>${_('provider')}</label>
           <select id="bvRuntime">${opciones(RUNTIMES, a.runtime, esc, 'claude')}</select></div>
         <div class="campo"><label>${_('engine')}</label>
-          <select id="bvModelo" ${esClaude ? '' : 'disabled'}>${opciones(
-            [''].concat(MODELOS),
-            a.modelo,
-            esc,
-            _('default'),
-          )}</select></div>
+          ${
+            motor.modelos.length
+              ? `<select id="bvModelo">${opciones(
+                  [''].concat(motor.modelos),
+                  a.modelo,
+                  esc,
+                  _('default'),
+                )}</select>`
+              : `<input type="text" id="bvModelo" value="${esc(a.modelo)}"
+                  placeholder="${_('default')}" autocomplete="off" spellcheck="false">`
+          }</div>
         <div class="campo"><label>${_('effort')}</label>
-          <select id="bvEsfuerzo" ${esClaude ? '' : 'disabled'}>${opciones(
-            [''].concat(ESFUERZOS),
-            a.esfuerzo,
-            esc,
-            _('default'),
-          )}</select></div>
+          <select id="bvEsfuerzo" ${motor.esfuerzo ? '' : 'disabled'}
+            title="${motor.esfuerzo ? '' : _('This CLI has no effort setting.')}">${opciones(
+              [''].concat(ESFUERZOS),
+              motor.esfuerzo ? a.esfuerzo : '',
+              esc,
+              _('default'),
+            )}</select></div>
       </div>
+      <p class="pista">${esc(_(motor.pista))}</p>
       <label class="bvEtiqueta">${_('What does it work on?')}</label>
       <p class="pista">${_(`Walk your disk and pick whatever you like: a repository, a
       worktree, a folder of documents, one exact file. As many as you want. Nothing is
       copied — each one is linked into this agent's own home.`)}</p>
       <div class="casaExp"></div>
-      ${
-        a.montajes.length
-          ? `<div class="expElegidas"><label class="bvEtiqueta">${_('Working on')}</label>
-             ${a.montajes
-               .map(
-                 (m) => `<button type="button" class="bvChip elegida" data-bv="quita"
-                   data-ruta="${esc(m)}" title="${esc(m)}">${esc(
-                     m.split('/').pop() || m,
-                   )}<i class="expQuita">✕</i></button>`,
-               )
-               .join('')}</div>`
-          : `<p class="pista">${_('Nothing chosen yet — an agent with no mounts is fine too.')}</p>`
-      }`;
+      <div id="casaElegidas">${this.elegidas()}</div>`;
+  }
+
+  /** The mounts chosen so far, as chips you can take back off. Rendered on its
+   * own so ticking a row does not rebuild the picker underneath the cursor. */
+  private elegidas(): string {
+    const esc = this.p.esc;
+    const montajes = this.datos.montajes;
+    if (!montajes.length)
+      return `<p class="pista">${_('Nothing chosen yet — an agent with no mounts is fine too.')}</p>`;
+    return `<div class="expElegidas"><label class="bvEtiqueta">${_('Working on')}</label>
+      ${montajes
+        .map(
+          (m) => `<button type="button" class="bvChip elegida" data-bv="quita"
+            data-ruta="${esc(m)}" title="${esc(m)}">${esc(
+              m.split('/').pop() || m,
+            )}<i class="expQuita">✕</i></button>`,
+        )
+        .join('')}</div>`;
+  }
+
+  private pintaElegidas(): void {
+    const hueco = this.host?.querySelector<HTMLElement>('#casaElegidas');
+    if (!hueco) return;
+    hueco.innerHTML = this.elegidas();
+    this.enlaza(hueco);
   }
 
-  private enlaza(raiz: HTMLElement): void {
+  protected enlaza(raiz: HTMLElement): void {
+    // Every field writes through as it is typed.
+    //
+    // `recoge()` used to be the only sync, called at the moments somebody
+    // remembered to call it — and a repaint from anywhere else redrew the
+    // inputs from a state that had never heard of what was in them. The roles
+    // list arrives a few hundred milliseconds after this form opens, which is
+    // exactly while a person is typing the name: the answer landed, the form
+    // repainted, the name was gone, and then "Build it" said to give it one.
+    //
+    // Now nothing can lose it, because there is no window in which the field
+    // and the state disagree.
+    raiz
+      .querySelectorAll<HTMLInputElement | HTMLSelectElement>(
+        '#bvNombre,#bvRol,#bvModelo,#bvEsfuerzo',
+      )
+      .forEach((el) => {
+        el.oninput = () => this.recoge();
+        el.onchange = () => this.recoge();
+      });
     raiz.querySelectorAll<HTMLElement>('[data-bv]').forEach((el) => {
       el.onclick = (evento) => {
         evento.preventDefault();
         const que = el.dataset.bv;
-        this.recoge(raiz);
+        this.recoge();
         if (que === 'clase') this.datos.clase = el.dataset.id ?? 'code';
         else if (que === 'quita') {
           const ya = this.datos.montajes.indexOf(el.dataset.ruta ?? '');
@@ -201,13 +274,20 @@ export class FormularioDeCasa {
       };
     });
     raiz.querySelector<HTMLSelectElement>('#bvRuntime')?.addEventListener('change', () => {
-      this.recoge(raiz);
+      this.recoge();
       this.repinta();
     });
   }
 
-  /** Keep what is typed when a click forces a repaint. */
-  private recoge(raiz: HTMLElement): void {
+  /** Keep what is typed when a click forces a repaint.
+   *
+   * Always from the form's own root, never from whatever element the click
+   * came through: the chosen-chips strip re-uses this wiring, and reading the
+   * fields relative to that strip would find none of them and quietly throw
+   * away everything the person had typed. */
+  private recoge(): void {
+    const raiz = this.host;
+    if (!raiz) return;
     const nombre = raiz.querySelector<HTMLInputElement>('#bvNombre');
     const rol = raiz.querySelector<HTMLSelectElement>('#bvRol');
     if (nombre) this.datos.nombre = nombre.value;
@@ -217,8 +297,8 @@ export class FormularioDeCasa {
       ['#bvModelo', 'modelo'],
       ['#bvEsfuerzo', 'esfuerzo'],
     ] as const) {
-      const sel = raiz.querySelector<HTMLSelectElement>(id);
-      if (sel) this.datos[campo] = sel.value;
+      const sel = raiz.querySelector<HTMLSelectElement | HTMLInputElement>(id);
+      if (sel) this.datos[campo] = sel.value.trim();
     }
   }
 
@@ -231,7 +311,7 @@ export class FormularioDeCasa {
    * another's job just to save a round trip.
    */
   async guarda(): Promise<{ slug: string; nombre: string } | null> {
-    if (this.host) this.recoge(this.host);
+    this.recoge();
     const a = this.datos;
     const nombre = a.nombre.trim();
     if (!nombre) {
@@ -247,13 +327,20 @@ export class FormularioDeCasa {
         this.p.aviso(r.error || _('Could not add that agent'), true);
         return null;
       }
-      for (const ruta of a.montajes) {
-        const m = await this.p.api<{ ok?: boolean; error?: string }>('/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);
-      }
+      // The mounts are independent of each other; awaiting them one at a time
+      // put six serialised round trips on the critical path of "Build it".
+      const montados = await Promise.all(
+        a.montajes.map((ruta) =>
+          this.p
+            .api<{ ok?: boolean; error?: string }>('/api/montaje', {
+              method: 'POST',
+              body: JSON.stringify({ agent: r.agent, add: ruta }),
+            })
+            .then((m) => (m.ok ? '' : `${ruta}: ${m.error ?? _('could not mount')}`))
+            .catch((e) => `${ruta}: ${String(e)}`),
+        ),
+      );
+      for (const fallo of montados.filter(Boolean)) this.p.aviso(fallo, true);
       const motor: Record<string, string> = {};
       if (a.runtime) motor.runtime = a.runtime;
       if (a.modelo) motor.model = a.modelo;

package/city/web/src/demo.ts

@@ -19,6 +19,7 @@
 
 import type { ActivityEvent } from './activity';
 import { t as _ } from './idioma';
+import { Montada } from './vista';
 
 export interface Ficha {
   id: string;
@@ -50,7 +51,7 @@ const VELOCIDADES: Array<[string, number]> = [
   ['4×', 350],
 ];
 
-export class Demos {
+export class Demos extends Montada {
   private catalogo: Ficha[] = [];
   private cargando = false;
   private elegida: Grabacion | null = null;
@@ -58,19 +59,19 @@ export class Demos {
   private corriendo = false;
   private velocidad = 1450;
   private reloj: number | null = null;
-  private host: HTMLElement | null = null;
 
-  constructor(private readonly p: PuertaDemo) {}
+  constructor(private readonly p: PuertaDemo) {
+    super();
+  }
 
-  monta(host: HTMLElement): void {
-    this.host = host;
+  override monta(host: HTMLElement): void {
     if (!this.catalogo.length && !this.cargando) void this.lee();
-    this.repinta();
+    super.monta(host);
   }
 
-  /** Stop the clock. Called when the section is left, or the page repaints
-   * elsewhere: a timer still firing into a detached node is a leak with a view. */
-  para(): void {
+  /** Stop the clock. The router calls this when the section is left: a timer
+   * still firing into a detached node is a leak with a soundtrack. */
+  desmonta(): void {
     this.corriendo = false;
     if (this.reloj !== null) {
       clearTimeout(this.reloj);
@@ -78,14 +79,10 @@ export class Demos {
     }
   }
 
-  private repinta(): void {
-    if (!this.host) return;
-    this.host.innerHTML = this.html();
-    this.enlaza(this.host);
-    if (this.elegida) {
-      const lista = this.host.querySelector<HTMLElement>('#demoLista');
-      if (lista) lista.scrollTop = lista.scrollHeight;
-    }
+  protected override repinta(): void {
+    super.repinta();
+    const lista = this.elegida ? this.host?.querySelector<HTMLElement>('#demoLista') : null;
+    if (lista) lista.scrollTop = lista.scrollHeight;
   }
 
   private async lee(): Promise<void> {
@@ -102,7 +99,7 @@ export class Demos {
   }
 
   private async abre(id: string): Promise<void> {
-    this.para();
+    this.desmonta();
     this.hasta = 0;
     this.elegida = null;
     this.repinta();
@@ -128,19 +125,47 @@ export class Demos {
     if (this.reloj !== null) clearTimeout(this.reloj);
     this.reloj = window.setTimeout(() => {
       if (!this.corriendo || !this.elegida) return;
+      const evento = this.elegida.eventos[this.hasta];
       this.hasta += 1;
-      if (this.hasta >= this.elegida.eventos.length) {
+      const final = this.hasta >= this.elegida.eventos.length;
+      if (final) {
         this.hasta = this.elegida.eventos.length;
         this.corriendo = false;
-        this.repinta();
-        return;
       }
-      this.repinta();
-      this.siguiente();
+      // A turn arriving is one more turn on the list. Repainting the player
+      // rebuilt every turn so far from zero, rebound the four speed buttons and
+      // forced a layout — twenty-two times, to append twenty-two lines. The
+      // full repaint is kept for the transitions that actually change the
+      // controls: play, pause, replay, and the end.
+      if (evento && !final) this.anade(evento);
+      else this.repinta();
+      if (!final) this.siguiente();
     }, this.velocidad);
   }
 
-  private html(): string {
+  /** One more turn on screen, without taking the screen down. */
+  private anade(evento: ActivityEvent): void {
+    const lista = this.host?.querySelector<HTMLElement>('#demoLista');
+    if (!lista || !this.elegida) return this.repinta();
+    const vacia = lista.querySelector('.liveEmpty');
+    if (vacia) lista.innerHTML = '';
+    lista.insertAdjacentHTML('beforeend', this.p.pinta(evento));
+    lista.scrollTop = lista.scrollHeight;
+    this.marcador();
+  }
+
+  /** The counter and the bar, which are the only other things a turn moves. */
+  private marcador(): void {
+    if (!this.host || !this.elegida) return;
+    const total = this.elegida.eventos.length;
+    const hecho = Math.min(this.hasta, total);
+    const cuenta = this.host.querySelector<HTMLElement>('.demoCuenta');
+    if (cuenta) cuenta.textContent = _('{done} of {total}', { done: hecho, total });
+    const barra = this.host.querySelector<HTMLElement>('.demoBarra i');
+    if (barra) barra.style.width = `${total ? (hecho / total) * 100 : 0}%`;
+  }
+
+  protected html(): string {
     if (this.elegida) return this.reproductor(this.elegida);
     if (this.cargando) return `<p class="cargando">${_('reading the demo shelf')}</p>`;
     if (!this.catalogo.length)
@@ -185,9 +210,14 @@ export class Demos {
         <button type="button" class="bt ppal" data-demo="${this.corriendo ? 'pausa' : 'play'}">${
           this.corriendo ? `❚❚ ${_('Pause')}` : acabado ? `↺ ${_('Replay')}` : `▶ ${_('Play')}`
         }</button>
-        <button type="button" class="bt" data-demo="replay" ${hecho ? '' : 'disabled'}>↺ ${_(
-          'Replay',
-        )}</button>
+        ${
+          // Once it has finished, the primary button already says Replay and
+          // does exactly this. Two identical controls side by side is a person
+          // wondering which one is the real one.
+          hecho && !acabado
+            ? `<button type="button" class="bt" data-demo="replay">↺ ${_('Replay')}</button>`
+            : ''
+        }
         <span class="demoVel">${VELOCIDADES.map(
           ([etiqueta, ms]) =>
             `<button type="button" class="demoVelBoton ${
@@ -205,7 +235,7 @@ export class Demos {
     </div>`;
   }
 
-  private enlaza(raiz: HTMLElement): void {
+  protected enlaza(raiz: HTMLElement): void {
     raiz.querySelectorAll<HTMLElement>('[data-demo]').forEach((el) => {
       el.onclick = (evento) => {
         evento.preventDefault();
@@ -214,7 +244,7 @@ export class Demos {
             void this.abre(el.dataset.id ?? '');
             break;
           case 'atras':
-            this.para();
+            this.desmonta();
             this.elegida = null;
             this.hasta = 0;
             this.repinta();
@@ -223,11 +253,11 @@ export class Demos {
             this.arranca();
             break;
           case 'pausa':
-            this.para();
+            this.desmonta();
             this.repinta();
             break;
           case 'replay':
-            this.para();
+            this.desmonta();
             this.hasta = 0;
             this.arranca();
             break;