agents-city 0.3.0 → 0.4.0

package/city/web/src/dialogo.ts

@@ -0,0 +1,178 @@
+/**
+ * The app's own way of asking a question.
+ *
+ * Everything here used to be `window.prompt` and `window.confirm`. Those are
+ * fine for a debug build and wrong for a product: they are unstyled, they cannot
+ * hold two fields, they cannot explain what a destructive answer costs, they
+ * ignore the page's language and theme entirely, and on some browsers a page can
+ * be told to suppress them — at which point a button silently does nothing. A
+ * product that has designed its own onboarding and then asks for a city name
+ * through a grey system box is telling on itself.
+ *
+ * One dialog, promise-shaped: it resolves with the answers, or with `null` when
+ * the person backs out. Escape and the backdrop cancel; Enter accepts from any
+ * single-line field. Focus moves in on open and back out on close.
+ */
+
+export interface Campo {
+  /** Key this field's value appears under in the answer. */
+  id: string;
+  etiqueta: string;
+  valor?: string;
+  pista?: string;
+  /** A `<select>` instead of an input, when the answer is one of a few things. */
+  opciones?: Array<{ valor: string; texto: string }>;
+  requerido?: boolean;
+}
+
+export interface Peticion {
+  titulo: string;
+  /** Plain sentences under the title. Rendered as text, never as markup. */
+  cuerpo?: string[];
+  campos?: Campo[];
+  aceptar?: string;
+  cancelar?: string;
+  /** Red confirm button, for anything that loses work. */
+  peligro?: boolean;
+  /** Only enable the confirm button once this exact string is typed in the
+   * first field: the guard a destructive action deserves. */
+  exige?: string;
+  /** Extra markup owned by the caller — the house form goes here. */
+  contenido?: string;
+  /** Wire that markup once it is in the DOM. `cierra` accepts on its behalf. */
+  enlaza?: (raiz: HTMLElement, cierra: (respuesta: Record<string, string> | null) => void) => void;
+  ancho?: number;
+}
+
+function esc(s: unknown): string {
+  return String(s).replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c] as string,
+  );
+}
+
+let abierto: HTMLElement | null = null;
+
+/** Ask. Resolves with the answers keyed by field id, or null if cancelled. */
+export function pregunta(p: Peticion): Promise<Record<string, string> | null> {
+  // One at a time. A second dialog over the first would leave the first's
+  // promise hanging for the life of the page.
+  abierto?.remove();
+
+  const campos = p.campos ?? [];
+  const fondo = document.createElement('div');
+  fondo.className = 'dlgFondo';
+  fondo.innerHTML = `
+    <div class="dlg" role="dialog" aria-modal="true" aria-label="${esc(p.titulo)}"
+      style="${p.ancho ? `max-width:${p.ancho}px` : ''}">
+      <h2>${esc(p.titulo)}</h2>
+      ${(p.cuerpo ?? []).map((l) => `<p class="dlgProsa">${esc(l)}</p>`).join('')}
+      ${campos
+        .map(
+          (c) => `<div class="campo"><label for="dlg-${esc(c.id)}">${esc(c.etiqueta)}</label>
+        ${
+          c.opciones
+            ? `<select id="dlg-${esc(c.id)}" data-campo="${esc(c.id)}">${c.opciones
+                .map(
+                  (o) =>
+                    `<option value="${esc(o.valor)}"${
+                      o.valor === (c.valor ?? '') ? ' selected' : ''
+                    }>${esc(o.texto)}</option>`,
+                )
+                .join('')}</select>`
+            : `<input id="dlg-${esc(c.id)}" data-campo="${esc(c.id)}" type="text"
+                value="${esc(c.valor ?? '')}" placeholder="${esc(c.pista ?? '')}"
+                autocomplete="off" spellcheck="false">`
+        }</div>`,
+        )
+        .join('')}
+      ${p.contenido ?? ''}
+      <div class="dlgBotones">
+        <button type="button" class="bt" data-dlg="no">${esc(p.cancelar ?? 'Cancel')}</button>
+        <button type="button" class="bt ${p.peligro ? 'malo' : 'ppal'}" data-dlg="si">${esc(
+          p.aceptar ?? 'OK',
+        )}</button>
+      </div>
+    </div>`;
+  document.body.appendChild(fondo);
+  abierto = fondo;
+
+  const devolvia = document.activeElement as HTMLElement | null;
+  const caja = fondo.querySelector<HTMLElement>('.dlg') as HTMLElement;
+  const si = fondo.querySelector<HTMLButtonElement>('[data-dlg="si"]') as HTMLButtonElement;
+
+  return new Promise((resuelve) => {
+    let cerrado = false;
+    const cierra = (respuesta: Record<string, string> | null): void => {
+      if (cerrado) return;
+      cerrado = true;
+      document.removeEventListener('keydown', tecla, true);
+      fondo.remove();
+      if (abierto === fondo) abierto = null;
+      devolvia?.focus?.();
+      resuelve(respuesta);
+    };
+    const lee = (): Record<string, string> => {
+      const fuera: Record<string, string> = {};
+      fondo.querySelectorAll<HTMLInputElement | HTMLSelectElement>('[data-campo]').forEach((el) => {
+        fuera[el.dataset.campo ?? ''] = el.value;
+      });
+      return fuera;
+    };
+    const acepta = (): void => {
+      const valores = lee();
+      if (campos.some((c) => c.requerido && !valores[c.id]?.trim())) return;
+      cierra(valores);
+    };
+    const revisa = (): void => {
+      const valores = lee();
+      const falta = campos.some((c) => c.requerido && !valores[c.id]?.trim());
+      const mal = p.exige !== undefined && (valores[campos[0]?.id ?? ''] ?? '').trim() !== p.exige;
+      si.disabled = falta || mal;
+    };
+
+    si.onclick = acepta;
+    (fondo.querySelector('[data-dlg="no"]') as HTMLButtonElement).onclick = () => cierra(null);
+    fondo.onclick = (e) => {
+      if (e.target === fondo) cierra(null);
+    };
+    caja.addEventListener('input', revisa);
+    caja.addEventListener('change', revisa);
+    fondo.querySelectorAll<HTMLInputElement>('input').forEach((el) => {
+      el.onkeydown = (e) => {
+        if (e.key === 'Enter' && !si.disabled) {
+          e.preventDefault();
+          acepta();
+        }
+      };
+    });
+    const tecla = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        cierra(null);
+      }
+    };
+    document.addEventListener('keydown', tecla, true);
+
+    p.enlaza?.(caja, cierra);
+    revisa();
+    (
+      caja.querySelector<HTMLElement>('input,select,textarea') ?? (si.disabled ? caja : si)
+    ).focus?.();
+  });
+}
+
+/** Yes or no, with no fields. Resolves true only on an explicit yes. */
+export async function confirma(
+  titulo: string,
+  cuerpo: string[] = [],
+  opciones: { aceptar?: string; peligro?: boolean } = {},
+): Promise<boolean> {
+  const r = await pregunta({
+    titulo,
+    cuerpo,
+    aceptar: opciones.aceptar ?? 'Yes',
+    peligro: opciones.peligro,
+  });
+  return r !== null;
+}

package/city/web/src/es.ts

@@ -178,3 +178,99 @@ anota({
   'urgencias, api, the handbook — whatever you would say out loud':
     'urgencias, api, el manual — como lo llamarías en voz alta',
 });
+
+anota({
+  // ── the app's own dialogs ─────────────────────────────────────────────────
+  Yes: 'Sí',
+  'What is it called?': '¿Cómo se llama?',
+  'home, clients, the lab — whatever you would say out loud':
+    'casa, clientes, el laboratorio — como lo dirías en voz alta',
+  'A city is a place with its own seat, its own houses and its own map. Yours stay where they are.':
+    'Una ciudad es un sitio con su propio asiento, sus casas y su mapa. Las que ya tienes se quedan donde están.',
+  'Start over {city}?': '¿Empezar {city} de cero?',
+  'Start over': 'Empezar de cero',
+  'You lose:': 'Pierdes:',
+  'You keep:': 'Conservas:',
+  'Right now that is {agents} house(s), {roads} road(s) and {acts} committee act(s).':
+    'Ahora mismo eso son {agents} casa(s), {roads} carretera(s) y {acts} acta(s) de comité.',
+  'Type the city’s name to confirm': 'Escribe el nombre de la ciudad para confirmar',
+  'Archive {city}?': '¿Archivar {city}?',
+  'Archive it': 'Archivarla',
+  'It moves into .backups. Nothing is deleted, and you can put it back by hand.':
+    'Se mueve a .backups. No se borra nada, y puedes devolverla a mano.',
+  'Which engine?': '¿Qué motor?',
+  'Model alias': 'Alias del modelo',
+  'An alias the CLI resolves when the window opens. Anything it accepts works here.':
+    'Un alias que la CLI resuelve al abrir la ventana. Vale cualquiera que ella acepte.',
+  'Use it': 'Usarlo',
+  'Remove the skill {skill}?': '¿Quitar la skill {skill}?',
+  'Remove it': 'Quitarla',
+  'It is deleted from this agent’s own home. Nothing outside that folder is touched.':
+    'Se borra de la casa de este agente. Nada fuera de esa carpeta se toca.',
+  'Build a house': 'Construir una casa',
+  'One worker, its own window, its own corner of your disk. Everything here can be changed afterwards.':
+    'Un trabajador, su ventana y su rincón de tu disco. Todo esto se puede cambiar después.',
+  '{name} has a house now': '{name} ya tiene casa',
+  '{name} joined the city': '{name} se ha mudado a la ciudad',
+  'What else does it work on?': '¿Sobre qué más trabaja?',
+  'A repository, a worktree, or a folder of documents. It is linked, never copied.':
+    'Un repositorio, un worktree o una carpeta de documentos. Se enlaza, nunca se copia.',
+  'Mount it': 'Montarlo',
+  Mounted: 'Montado',
+  'Stop this agent working on {what}?': '¿Que este agente deje de trabajar sobre {what}?',
+  'Unmount it': 'Desmontarlo',
+  'The link goes. The folder it points at stays exactly where it is.':
+    'Se va el enlace. La carpeta a la que apunta se queda exactamente donde está.',
+
+  // ── what the form says when something is missing ──────────────────────────
+  'Give it a name — it is how you will call it in its window':
+    'Ponle un nombre — es como la llamarás en su ventana',
+  'Could not add that agent': 'No se pudo añadir ese agente',
+  'could not mount': 'no se pudo montar',
+  'Could not set its engine': 'No se pudo fijar su motor',
+  '{n} mount': '{n} montaje',
+  '{n} mounts': '{n} montajes',
+});
+
+anota({
+  // ── walking the disk ──────────────────────────────────────────────────────
+  '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.':
+    'Recorre tu disco y coge lo que quieras: un repositorio, un worktree, una carpeta de documentos, un fichero exacto. Tantos como quieras. No se copia nada — cada uno se enlaza dentro de la casa de este agente.',
+  'Working on': 'Trabaja sobre',
+  'Nothing chosen yet — an agent with no mounts is fine too.':
+    'Aún no has cogido nada — un agente sin montajes también vale.',
+  'Add this folder': 'Añadir esta carpeta',
+  'Add this': 'Añadir esto',
+  'Already chosen': 'Ya está cogido',
+  'Up one folder': 'Subir una carpeta',
+  'reading that folder': 'leyendo esa carpeta',
+  'This folder is empty.': 'Esta carpeta está vacía.',
+  'Only the first 2000 shown.': 'Sólo se muestran los 2000 primeros.',
+  'A repository, a worktree, a folder of documents, one exact file. It is linked, never copied.':
+    'Un repositorio, un worktree, una carpeta de documentos, un fichero exacto. Se enlaza, nunca se copia.',
+});
+
+anota({
+  // ── the demo shelf ────────────────────────────────────────────────────────
+  Demos: 'Demos',
+  demos: 'demos',
+  'See a committee happen': 'Mira un comité de verdad',
+  'reading the demo shelf': 'leyendo la estantería de demos',
+  'A real question, answered by a city of agents that never talk to each other behind the chair’s back. Pick the field closest to yours — the machine is the same one in all three; only the work changes.':
+    'Una pregunta de verdad, respondida por una ciudad de agentes que nunca hablan entre ellos a espaldas de quien preside. Elige el campo más cercano al tuyo — la maquinaria es la misma en los tres; lo que cambia es el trabajo.',
+  '{n} turns': '{n} turnos',
+  'These are recordings of real runs over the real bus, played back here. To run one live in a terminal: agents-city demo --domain software.':
+    'Son grabaciones de ejecuciones reales sobre el bus real, reproducidas aquí. Para lanzar una en vivo desde terminal: agents-city demo --domain software.',
+  'All demos': 'Todas las demos',
+  Play: 'Reproducir',
+  Pause: 'Pausa',
+  Replay: 'Repetir',
+  '{done} of {total}': '{done} de {total}',
+  'Press play. The turns arrive one by one, exactly as they did.':
+    'Dale a reproducir. Los turnos van llegando uno a uno, tal cual llegaron.',
+  'A recording of a real run: these events came off the real bus, from the real committee. Nothing here is being decided now.':
+    'Una grabación de una ejecución real: estos eventos salieron del bus real, del comité real. Aquí no se está decidiendo nada ahora mismo.',
+  'Nothing recorded here': 'Aquí no hay nada grabado',
+  'This install has no demo recordings. Make them with demo/graba.py, or run the full thing from a terminal with agents-city demo.':
+    'Esta instalación no tiene grabaciones. Créalas con demo/graba.py, o lanza la cosa entera desde terminal con agents-city demo.',
+});

package/city/web/src/explorador.ts

@@ -0,0 +1,189 @@
+/**
+ * A folder picker. You walk, you choose.
+ *
+ * What was here before scanned the whole disk and offered what it had decided
+ * you probably wanted: your repositories, ranked. That is the wrong shape for
+ * this question. A person choosing what an agent works on already knows where
+ * their work is; being handed a guessed list of two hundred things is not help,
+ * it is a second list to read before you can do what you came to do. And it
+ * could only ever offer what it knew how to look for — a repository, a folder
+ * of markdown — never *that* file, in *that* folder, which is a perfectly
+ * ordinary thing to want.
+ *
+ * So: a folder, its contents, and a way up and down. Nothing is offered in
+ * advance and nothing is filtered out. Folders are marked `git` or `wt` when
+ * they are, because that is worth knowing — never because it changes what you
+ * are allowed to pick.
+ */
+
+import { t as _ } from './idioma';
+
+export interface Entrada {
+  nombre: string;
+  ruta: string;
+  dir: boolean;
+  /** `repo` · `worktree` · `` — a label, never a filter. */
+  git: string;
+  enlace: boolean;
+}
+
+interface Listado {
+  ruta: string;
+  arriba: string;
+  casa: string;
+  atajos: Array<{ nombre: string; ruta: string }>;
+  entradas: Entrada[];
+  recortada: boolean;
+  error?: string;
+}
+
+export interface PuertaExp {
+  api: <T>(ruta: string, opts?: RequestInit) => Promise<T>;
+  esc: (s: unknown) => string;
+}
+
+const MARCA: Record<string, string> = { repo: 'git', worktree: 'wt' };
+
+export class Explorador {
+  private aqui = '';
+  private listado: Listado | null = null;
+  private cargando = false;
+  private fallo = '';
+  private host: HTMLElement | null = null;
+
+  constructor(
+    private readonly p: PuertaExp,
+    /** Called with a path when a row's + is pressed. */
+    private readonly elige: (ruta: string, esCarpeta: boolean) => void,
+    /** Which paths are already chosen, so their rows read as chosen. */
+    private readonly yaElegidas: () => string[],
+  ) {}
+
+  /** Render into `host` and wire it. Safe to call again: that is the repaint. */
+  monta(host: HTMLElement): void {
+    this.host = host;
+    if (!this.listado && !this.cargando) void this.ve(this.aqui || '~');
+    host.innerHTML = this.html();
+    this.enlaza(host);
+  }
+
+  private repinta(): void {
+    if (this.host) {
+      this.host.innerHTML = this.html();
+      this.enlaza(this.host);
+    }
+  }
+
+  /** Walk to a folder. An unreadable one is said out loud, not swallowed. */
+  async ve(ruta: string): Promise<void> {
+    this.cargando = true;
+    this.fallo = '';
+    this.repinta();
+    try {
+      const r = await this.p.api<Listado>('/api/carpeta?path=' + encodeURIComponent(ruta));
+      if (r.error) this.fallo = r.error;
+      else {
+        this.listado = r;
+        this.aqui = r.ruta;
+      }
+    } catch (e) {
+      this.fallo = String(e);
+    } finally {
+      this.cargando = false;
+      this.repinta();
+    }
+  }
+
+  /** The path being looked at right now — what "add this folder" means. */
+  get carpeta(): string {
+    return this.aqui;
+  }
+
+  private migas(): string {
+    const esc = this.p.esc;
+    const l = this.listado;
+    if (!l) return '';
+    const partes = l.ruta.split('/').filter(Boolean);
+    let acumulado = '';
+    const trozos = partes.map((parte) => {
+      acumulado += '/' + parte;
+      return `<button type="button" class="expMiga" data-exp="ve" data-ruta="${esc(
+        acumulado,
+      )}">${esc(parte)}</button>`;
+    });
+    return (
+      `<button type="button" class="expMiga" data-exp="ve" data-ruta="/">/</button>` +
+      trozos.join('<i>/</i>')
+    );
+  }
+
+  html(): string {
+    const esc = this.p.esc;
+    const l = this.listado;
+    const elegidas = new Set(this.yaElegidas());
+    const filas = (l?.entradas ?? [])
+      .map((e) => {
+        const puesta = elegidas.has(e.ruta);
+        return `<div class="expFila ${e.dir ? 'dir' : 'fich'} ${puesta ? 'puesta' : ''}">
+        <button type="button" class="expNombre" ${
+          e.dir ? `data-exp="ve" data-ruta="${esc(e.ruta)}"` : 'disabled'
+        } title="${esc(e.ruta)}">
+          <i class="expIcono">${e.dir ? '▸' : '·'}</i>${esc(e.nombre)}${
+            e.git ? `<em class="expMarca">${esc(MARCA[e.git] ?? e.git)}</em>` : ''
+          }${e.enlace ? '<em class="expMarca">link</em>' : ''}</button>
+        <button type="button" class="expMas" data-exp="toma" data-ruta="${esc(e.ruta)}"
+          data-dir="${e.dir ? '1' : ''}"
+          title="${esc(puesta ? _('Already chosen') : _('Add this'))}">${puesta ? '✓' : '+'}</button>
+      </div>`;
+      })
+      .join('');
+    const atajos = (l?.atajos ?? [])
+      .map(
+        (a) =>
+          `<button type="button" class="expAtajo ${
+            a.ruta === l?.ruta ? 'aqui' : ''
+          }" data-exp="ve" data-ruta="${esc(a.ruta)}">${esc(a.nombre)}</button>`,
+      )
+      .join('');
+    return `
+      <div class="exp">
+        <div class="expAtajos">${atajos}</div>
+        <div class="expBarra">
+          <button type="button" class="expSubir" data-exp="ve"
+            data-ruta="${esc(l?.arriba ?? '~')}" ${l?.arriba ? '' : 'disabled'}
+            title="${_('Up one folder')}">↑</button>
+          <div class="expMigas">${this.migas()}</div>
+        </div>
+        ${
+          this.fallo
+            ? `<p class="pista malo">${esc(this.fallo)}</p>`
+            : this.cargando && !l
+              ? `<p class="cargando">${_('reading that folder')}</p>`
+              : filas
+                ? `<div class="expLista">${filas}</div>`
+                : `<p class="pista">${_('This folder is empty.')}</p>`
+        }
+        ${l?.recortada ? `<p class="pista">${_('Only the first 2000 shown.')}</p>` : ''}
+        <button type="button" class="bt bvMini expTomaAqui" data-exp="toma"
+          data-ruta="${esc(l?.ruta ?? '')}" data-dir="1" ${l ? '' : 'disabled'}>${_(
+            'Add this folder',
+          )}</button>
+      </div>`;
+  }
+
+  private enlaza(raiz: HTMLElement): void {
+    raiz.querySelectorAll<HTMLElement>('[data-exp]').forEach((el) => {
+      el.onclick = (evento) => {
+        evento.preventDefault();
+        evento.stopPropagation();
+        const ruta = el.dataset.ruta ?? '';
+        if (!ruta) return;
+        if (el.dataset.exp === 've') void this.ve(ruta);
+        else {
+          this.elige(ruta, el.dataset.dir === '1');
+          this.repinta();
+        }
+      };
+    });
+  }
+}