agents-city 0.3.0 → 0.4.0

package/city/web/index.html

@@ -10,12 +10,24 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=IBM+Plex+Mono:wght@400;500&display=swap">
 <style>
 :root{
+  /* Day is the base, exactly as in the Hall: the map is framed by it, and a
+     light Hall around a night map read as two products in one window. The
+     tokens are the Hall's, so the two frames cannot drift apart. Night is
+     stamped by the Hall's own switch, never guessed from the OS. */
+  --suelo:#f3f0e8; --suelo2:#fbfaf6; --suelo3:#ffffff; --linea:#e2ddd0; --linea2:#cdc6b6;
+  --tinta:#1d2229; --tinta2:#515861; --tinta3:#7b8187;
+  --nucleo:#8a7247;   /* los colores de cada unidad llegan de la API */
+  --lampara:#7048e8; --carta:#dd5d3e;
+  --insignia-borde:#cdc6b6; --insignia-fondo:#ffffff;
+  --hud:"Chakra Petch",system-ui,sans-serif; --texto:"Newsreader",Georgia,serif;
+  --mono:"IBM Plex Mono",ui-monospace,monospace;
+}
+:root[data-tema="dark"]{
   --suelo:#131a24; --suelo2:#1b2431; --suelo3:#222d3c; --linea:#26313f; --linea2:#38495f;
   --tinta:#e8e2d4; --tinta2:#9aa7b8; --tinta3:#6b7889;
-  --nucleo:#c8b48a;   /* los colores de cada unidad llegan de la API */
+  --nucleo:#c8b48a;
   --lampara:#f5c451; --carta:#e2604f;
-  --hud:"Chakra Petch",system-ui,sans-serif; --texto:"Newsreader",Georgia,serif;
-  --mono:"IBM Plex Mono",ui-monospace,monospace;
+  --insignia-borde:#4a4127; --insignia-fondo:#241f14;
 }
 *{box-sizing:border-box}
 html,body{height:100%}
@@ -42,7 +54,8 @@ aside{background:var(--suelo2);border-right:1px solid var(--linea);padding:20px
   display:flex;flex-direction:column;gap:18px;overflow-y:auto}
 .badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--hud);
   font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lampara);
-  border:1px solid #4a4127;background:#241f14;padding:4px 9px;border-radius:2px}
+  border:1px solid var(--insignia-borde);background:var(--insignia-fondo);
+  padding:4px 9px;border-radius:2px}
 .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lampara)}
 h1{font-size:23px;line-height:1.05;margin:8px 0 5px}
 p.sub{font-size:13px;line-height:1.5;color:var(--tinta2);margin:0}

package/city/web/src/bienvenida.ts

@@ -16,28 +16,16 @@
  */
 
 import { plural, t as _ } from './idioma';
-import { ESFUERZOS, MODELOS, RUNTIMES, opciones } from './motores';
+import { CLASES, FormularioDeCasa } from './casa';
+import type { DatosDeCasa, Rol } from './casa';
+
+export type { Rol } from './casa';
 
 export interface Dominio {
   id: string;
   name: string;
   summary: string;
 }
-export interface Rol {
-  id: string;
-  name: string;
-  summary: string;
-  trade: string;
-}
-export interface RepoDelDisco {
-  nombre: string;
-  ruta: string;
-  /** repo · worktree · docs — a house can be given any of the three. */
-  clase: string;
-  cuando: string;
-  /** Touched recently, so almost certainly what this person came to pick. */
-  mio: boolean;
-}
 
 /** What the onboarding needs from the Hall. Passed in rather than imported, so
  * this file cannot quietly grow its own way of talking to the server. */
@@ -53,38 +41,6 @@ export interface Puerta {
   datos: string;
 }
 
-interface AgenteNuevo {
-  nombre: string;
-  clase: string;
-  rol: string;
-  montajes: string[];
-  /** Which CLI runs it, and — on Claude — the engine and how hard it thinks.
-   * Empty means the owner's default, which is a real answer and the one most
-   * people should give. Asked here because it is a decision somebody has
-   * already made in their head while naming the house; making them find three
-   * dropdowns afterwards is making them say it twice. */
-  runtime: string;
-  modelo: string;
-  esfuerzo: string;
-}
-
-const CLASES: Array<[string, string, string]> = [
-  [
-    'code',
-    'It writes code',
-    'Its house grows with the pull requests it merges. Mounts repositories and worktrees.',
-  ],
-  [
-    'knowledge',
-    'It keeps knowledge',
-    'Its house grows with the documents it writes. Needs no git at all.',
-  ],
-  ['coordinator', 'It coordinates', 'Its house grows with the decisions it records.'],
-];
-
-/** One glyph per kind of place, so a chip says what it is without a legend. */
-const CLASE_CORTA: Record<string, string> = { repo: 'git', worktree: 'wt', docs: 'doc' };
-
 const PASOS = ['Welcome', 'The work', 'Your chair', 'The houses', 'Ready'];
 
 /** A house, drawn rather than shipped: the same isometric shape the map and the
@@ -102,16 +58,11 @@ export class Bienvenida {
   private dominios: Dominio[] = [];
   private roles: Rol[] = [];
   private rolesDeAgente: Rol[] = [];
-  private repos: RepoDelDisco[] = [];
   private dominio = '';
   private rol = '';
-  private roster: AgenteNuevo[] = [];
-  private enCurso: AgenteNuevo | null = null;
+  private roster: DatosDeCasa[] = [];
+  private enCurso: FormularioDeCasa | null = null;
   private guardando = false;
-  private buscandoRepos = false;
-  private reposListos = false;
-  /** What is typed in the mount search box, kept across repaints. */
-  private filtro = '';
   private lienzo: HTMLElement | null = null;
 
   constructor(private readonly p: Puerta) {}
@@ -239,37 +190,22 @@ export class Bienvenida {
 
   // ── 3. the agents ─────────────────────────────────────────────────────────
   private pantallaAgentes(): string {
-    // The repository index is a disk scan — a minute on a big home the first
-    // time. Awaiting it here froze the guide on the PREVIOUS screen with no
-    // explanation: the person clicks Next and nothing happens. So the step
-    // draws immediately and the list arrives when it arrives.
-    this.buscaReposUnaVez();
     if (!this.enCurso) return this.listaDeAgentes();
-    return this.formularioDeAgente(this.enCurso);
-  }
-
-  private buscaReposUnaVez(otraVez = false): void {
-    if (this.buscandoRepos || (this.reposListos && !otraVez)) return;
-    this.buscandoRepos = true;
-    void this.p
-      .api<{ repos: RepoDelDisco[] }>(
-        '/api/misrepos?user=' + encodeURIComponent(this.p.yo) + (otraVez ? '&refresh=1' : ''),
-      )
-      .then((r) => {
-        // The whole index is kept, not a slice of it: the search box below is
-        // what makes a thousand places usable, and a list cut at two hundred
-        // would quietly fail to find the one somebody typed the name of.
-        this.repos = r.repos ?? [];
-      })
-      .catch(() => {
-        this.repos = []; // no index is not a reason to block the flow
-      })
-      .finally(() => {
-        this.buscandoRepos = false;
-        this.reposListos = true;
-        // Only repaint if this step is still on screen.
-        if (this.lienzo && this.paso === 3) void this.pinta(this.lienzo);
-      });
+    // The form mounts itself into this hole after the step is on screen: it
+    // repaints on its own as chips are ticked and the disk index arrives, and
+    // that must never take the step's frame down with it.
+    return `
+      <div class="bvPaso">
+        <span class="sub">${_('a new house')}</span>
+        <h1>${_('Who lives in it?')}</h1>
+        <div id="bvCasa"></div>
+        <div class="bvBotones">
+          <button class="bt" data-bv="cancela">${_('Cancel')}</button>
+          <button class="bt ppal" data-bv="guarda" ${this.guardando ? 'disabled' : ''}>${_(
+            this.guardando ? 'building…' : 'Build it',
+          )}</button>
+        </div>
+      </div>`;
   }
 
   private listaDeAgentes(): string {
@@ -317,134 +253,6 @@ export class Bienvenida {
    * that keeps knowledge sees document folders first, because that is the one
    * kind of agent the old picker could not help at all.
    */
-  private buscaEnElDisco(a: AgenteNuevo): RepoDelDisco[] {
-    const q = this.filtro.trim().toLowerCase();
-    const quiereDocs = a.clase === 'knowledge';
-    const puntua = (r: RepoDelDisco): number =>
-      (r.clase === 'docs' ? (quiereDocs ? -2 : 1) : 0) + (r.mio ? -1 : 0);
-    const encaja = q
-      ? this.repos.filter(
-          (r) => r.nombre.toLowerCase().includes(q) || r.ruta.toLowerCase().includes(q),
-        )
-      : this.repos.filter((r) => r.mio);
-    // A mount already chosen stays visible even when the search moves past it,
-    // so unticking never means hunting for it again.
-    const elegidas = this.repos.filter((r) => a.montajes.includes(r.ruta) && !encaja.includes(r));
-    return elegidas
-      .concat(encaja)
-      .sort((x, y) => puntua(x) - puntua(y))
-      .slice(0, 40);
-  }
-
-  private formularioDeAgente(a: AgenteNuevo): string {
-    const clases = CLASES.map(
-      ([id, titulo, porque]) => `
-      <button class="bvOpcion ${a.clase === id ? 'elegida' : ''}" data-bv="clase" data-id="${id}">
-        <b>${_(titulo)}</b><span>${_(porque)}</span></button>`,
-    ).join('');
-    const roles = this.rolesDeAgente
-      .map(
-        (r) =>
-          `<option value="${this.p.esc(r.id)}"${r.id === a.rol ? ' selected' : ''}>${this.p.esc(
-            r.name,
-          )}</option>`,
-      )
-      .join('');
-    const esClaude = (a.runtime || 'claude') === 'claude';
-    const encontrados = this.buscaEnElDisco(a);
-    const sugeridos = encontrados
-      .map(
-        (r) => `<button class="bvChip cl-${this.p.esc(r.clase)} ${
-          a.montajes.includes(r.ruta) ? 'elegida' : ''
-        }"
-          data-bv="monta" data-ruta="${this.p.esc(r.ruta)}"
-          title="${this.p.esc(r.ruta)}${r.cuando ? ` · ${this.p.esc(r.cuando)}` : ''}"
-          ><i class="bvClase">${this.p.esc(CLASE_CORTA[r.clase] ?? r.clase)}</i>${this.p.esc(
-            r.nombre,
-          )}</button>`,
-      )
-      .join('');
-    return `
-      <div class="bvPaso">
-        <span class="sub">${_('a new house')}</span>
-        <h1>${_('Who lives in it?')}</h1>
-        <div class="campo"><label>${_('What do you call it?')}</label>
-          <input type="text" id="bvNombre" value="${this.p.esc(a.nombre)}"
-            placeholder="${_('urgencias, api, the handbook — whatever you would say out loud')}"></div>
-        <label class="bvEtiqueta">${_('What kind of work does it do?')}</label>
-        <div class="bvRejilla bvTres">${clases}</div>
-        <div class="campo"><label>${_('Its role — its speciality, never authority')}</label>
-          <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.',
-        )}</p>
-        <div class="bvMotor">
-          <div class="campo"><label>${_('provider')}</label>
-            <select id="bvRuntime">${opciones(RUNTIMES, a.runtime, this.p.esc, 'claude')}</select></div>
-          <div class="campo"><label>${_('engine')}</label>
-            <select id="bvModelo" ${esClaude ? '' : 'disabled'}>${opciones(
-              [''].concat(MODELOS),
-              a.modelo,
-              this.p.esc,
-              _('default'),
-            )}</select></div>
-          <div class="campo"><label>${_('effort')}</label>
-            <select id="bvEsfuerzo" ${esClaude ? '' : 'disabled'}>${opciones(
-              [''].concat(ESFUERZOS),
-              a.esfuerzo,
-              this.p.esc,
-              _('default'),
-            )}</select></div>
-        </div>
-        <label class="bvEtiqueta">${_('What does it work on?')}</label>
-        <p class="pista">${_(`Everything found on this disk: <b>repositories</b>, the
-        <b>worktrees</b> an isolated agent works in, and <b>folders of documents</b> with no git
-        at all. Pick as many as you like — this is the part that makes it an agent and not a
-        repo.`)}</p>
-        <div class="bvBuscador">
-          <input type="search" id="bvBusca" value="${this.p.esc(this.filtro)}"
-            placeholder="${_('search your disk — a name, or part of a path')}">
-          <button class="bt bvMini" data-bv="rebusca" ${this.buscandoRepos ? 'disabled' : ''}
-            title="${_('Look through the disk again — for something cloned a minute ago')}">${_(
-              this.buscandoRepos ? 'searching…' : 'Search again',
-            )}</button>
-        </div>
-        ${
-          sugeridos
-            ? `<div class="bvChips">${sugeridos}</div>
-               <p class="pista">${
-                 this.filtro
-                   ? _('{shown} of {total} places match', {
-                       shown: String(encontrados.length),
-                       total: String(this.repos.length),
-                     })
-                   : _('{total} places found — type to narrow it down', {
-                       total: String(this.repos.length),
-                     })
-               }</p>`
-            : this.buscandoRepos
-              ? `<p class="cargando">${_('looking through your disk…')}</p>`
-              : this.filtro
-                ? `<p class="pista">${_('Nothing matches that. Add it by path below.')}</p>`
-                : `<p class="pista">${_('Nothing found on this disk — add folders by path below.')}</p>`
-        }
-        <div class="campo"><label>${_('…or a path, and Enter')}</label>
-          <input type="text" id="bvRuta" placeholder="~/documents/handbook"></div>
-        ${
-          a.montajes.length
-            ? `<p class="pista">${_('Working on: {que}', { que: `<b>${this.p.esc(a.montajes.join(', '))}</b>` })}</p>`
-            : ''
-        }
-        <div class="bvBotones">
-          <button class="bt" data-bv="cancela">${_('Cancel')}</button>
-          <button class="bt ppal" data-bv="guarda" ${this.guardando ? 'disabled' : ''}>${_(
-            this.guardando ? 'building…' : 'Build it',
-          )}</button>
-        </div>
-      </div>`;
-  }
-
   // ── 4. done ───────────────────────────────────────────────────────────────
   private pantallaFinal(): string {
     return `
@@ -498,33 +306,10 @@ export class Bienvenida {
           return repinta();
         }
         if (que === 'nuevo') {
-          this.enCurso = {
-            nombre: '',
-            clase: 'code',
-            rol: 'blank',
-            montajes: [],
-            runtime: '',
-            modelo: '',
-            esfuerzo: '',
-          };
-          return repinta();
-        }
-        if (que === 'clase' && this.enCurso) {
-          this.enCurso.clase = el.dataset.id ?? 'code';
-          this.recogeFormulario(lienzo);
-          return repinta();
-        }
-        if (que === 'monta' && this.enCurso) {
-          const ruta = el.dataset.ruta ?? '';
-          const ya = this.enCurso.montajes.indexOf(ruta);
-          if (ya >= 0) this.enCurso.montajes.splice(ya, 1);
-          else this.enCurso.montajes.push(ruta);
-          this.recogeFormulario(lienzo);
-          return repinta();
-        }
-        if (que === 'rebusca') {
-          this.recogeFormulario(lienzo);
-          this.buscaReposUnaVez(true);
+          this.enCurso = new FormularioDeCasa(
+            { api: this.p.api, esc: this.p.esc, aviso: this.p.aviso, yo: this.p.yo },
+            this.rolesDeAgente,
+          );
           return repinta();
         }
         if (que === 'cancela') {
@@ -539,107 +324,28 @@ export class Bienvenida {
         if (que === 'ir-puesto') return this.p.vete('puesto');
       };
     });
-    // The search filters what is already in memory, so it repaints as you type
-    // without asking the disk anything. Focus and caret are restored because a
-    // box that loses the cursor on the third letter is not a search box.
-    const busca = lienzo.querySelector<HTMLInputElement>('#bvBusca');
-    if (busca) {
-      busca.oninput = () => {
-        this.filtro = busca.value;
-        const donde = busca.selectionStart ?? busca.value.length;
-        void this.pinta(lienzo).then(() => {
-          const otra = lienzo.querySelector<HTMLInputElement>('#bvBusca');
-          if (!otra) return;
-          otra.focus();
-          otra.setSelectionRange(donde, donde);
-        });
-      };
+    const hueco = lienzo.querySelector<HTMLElement>('#bvCasa');
+    if (hueco && this.enCurso) {
+      this.enCurso.monta(hueco);
+      hueco.querySelector<HTMLInputElement>('#bvNombre')?.focus();
     }
-    const ruta = lienzo.querySelector<HTMLInputElement>('#bvRuta');
-    if (ruta)
-      ruta.onkeydown = (e) => {
-        if (e.key !== 'Enter' || !this.enCurso) return;
-        e.preventDefault();
-        const valor = ruta.value.trim();
-        if (valor) this.enCurso.montajes.push(valor);
-        this.recogeFormulario(lienzo);
-        void this.pinta(lienzo);
-      };
-    lienzo.querySelector<HTMLSelectElement>('#bvRuntime')?.addEventListener('change', () => {
-      this.recogeFormulario(lienzo);
-      void this.pinta(lienzo);
-    });
-    if (!busca?.value) lienzo.querySelector<HTMLInputElement>('#bvNombre')?.focus();
-  }
-
-  /** Keep what is typed when a click forces a repaint. */
-  private recogeFormulario(lienzo: HTMLElement): void {
-    if (!this.enCurso) return;
-    const nombre = lienzo.querySelector<HTMLInputElement>('#bvNombre');
-    const rol = lienzo.querySelector<HTMLSelectElement>('#bvRol');
-    if (nombre) this.enCurso.nombre = nombre.value;
-    if (rol) this.enCurso.rol = rol.value;
-    for (const [id, campo] of [
-      ['#bvRuntime', 'runtime'],
-      ['#bvModelo', 'modelo'],
-      ['#bvEsfuerzo', 'esfuerzo'],
-    ] as const) {
-      const sel = lienzo.querySelector<HTMLSelectElement>(id);
-      if (sel) this.enCurso[campo] = sel.value;
-    }
-    const busca = lienzo.querySelector<HTMLInputElement>('#bvBusca');
-    if (busca) this.filtro = busca.value;
   }
 
   private async guardaAgente(lienzo: HTMLElement): Promise<void> {
-    this.recogeFormulario(lienzo);
-    const a = this.enCurso;
-    if (!a) return;
-    if (!a.nombre.trim()) {
-      this.p.aviso('Give it a name — it is how you will call it in its window', true);
-      return;
-    }
+    const forma = this.enCurso;
+    if (!forma) return;
     this.guardando = true;
     await this.pinta(lienzo);
     try {
       // The seat has to exist before an agent can join it: agents live on the
       // owner's card. Writing it here is why this step can come before the goal.
       await this.aseguraFicha();
-      const r = await this.p.api<{ ok?: boolean; agent?: string; error?: string }>('/api/agentes', {
-        method: 'POST',
-        body: JSON.stringify({ name: a.nombre.trim(), kind: a.clase, role: a.rol }),
-      });
-      if (!r.ok || !r.agent) {
-        this.p.aviso(r.error || 'Could not add that agent', true);
-        return;
-      }
-      for (const ruta of a.montajes) {
-        const m = await this.p.api<{ 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 engine is a second write by necessity: `/api/agentes` owns who is
-      // on the roster and `/api/agente` owns how one is run, and neither is
-      // allowed to learn the other's job just to save a round trip.
-      const motor: Record<string, string> = {};
-      if (a.runtime) motor.runtime = a.runtime;
-      if (a.modelo) motor.model = a.modelo;
-      if (a.esfuerzo) motor.effort = a.esfuerzo;
-      if (Object.keys(motor).length) {
-        const m = await this.p.api<{ ok?: boolean; error?: string }>('/api/agente', {
-          method: 'POST',
-          body: JSON.stringify({ agent: r.agent, ...motor }),
-        });
-        if (!m.ok) this.p.aviso(m.error ?? 'Could not set its engine', true);
-      }
-      this.roster.push({ ...a, nombre: a.nombre.trim() });
+      const hecho = await forma.guarda();
+      if (!hecho) return;
+      this.roster.push({ ...forma.datos, nombre: hecho.nombre });
       this.enCurso = null;
-      this.p.aviso(`${a.nombre.trim()} joined the city`);
+      this.p.aviso(_('{name} joined the city', { name: hecho.nombre }));
       await this.p.refresca();
-    } catch (e) {
-      this.p.aviso(String(e), true);
     } finally {
       this.guardando = false;
       await this.pinta(lienzo);