agents-city 0.3.0-beta.21

package/city/web/src/oven.ts

@@ -0,0 +1,124 @@
+/**
+ * The oven: bakes 3D models into isometric sprites.
+ *
+ * The good CC0 city kits are all 3D, and live 3D reads worse than 2D once there
+ * are 150 buildings — always one hiding another. So each model is rendered ONCE,
+ * from the same angle with the same light, and what is left are PNGs that Pixi
+ * paints as sprites: game art with isometric legibility.
+ *
+ * Baked in light grey on purpose. The colour comes from Pixi's tint at paint
+ * time, so one model serves every district instead of baking one image per
+ * district per model.
+ *
+ * Runs in a headless Chrome; the script outside collects window.__horneado.
+ */
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+const LADO = 512; // room to zoom in without pixelating
+const MODELOS: string[] = (window as any).__modelos ?? [];
+
+const rnd = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
+rnd.setSize(LADO, LADO);
+rnd.setPixelRatio(1);
+rnd.shadowMap.enabled = true;
+rnd.shadowMap.type = THREE.PCFSoftShadowMap;
+document.body.appendChild(rnd.domElement);
+
+const esc = new THREE.Scene();
+
+// Orthographic camera at the classic isometric angle: 45° of yaw and ~35.26° of
+// pitch. That is what makes the sprites line up with the map's grid.
+const cam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+const ang = Math.atan(Math.SQRT1_2); // 35,264°
+cam.position.set(10, 10 * Math.tan(ang) * Math.SQRT2, 10);
+cam.lookAt(0, 0, 0);
+
+// One fixed light for all of them: if it changes between models, the city ends
+// iluminados desde sitios distintos y se nota inmediatamente.
+const sol = new THREE.DirectionalLight(0xfff3e0, 2.9);
+sol.position.set(9, 14, 5);
+sol.castShadow = true;
+Object.assign(sol.shadow.camera, { left: -9, right: 9, top: 9, bottom: -9 });
+sol.shadow.mapSize.set(1024, 1024);
+esc.add(sol);
+esc.add(new THREE.HemisphereLight(0xdfe8f5, 0x6b6f78, 1.35));
+esc.add(new THREE.AmbientLight(0xffffff, 0.35));
+
+const cargador = new GLTFLoader();
+const cargar = (n: string) =>
+  new Promise<THREE.Object3D>((ok, mal) =>
+    cargador.load(`/glb/${n}.glb`, (g) => ok(g.scene), undefined, mal),
+  );
+
+async function cuece() {
+  // The four numbers medidas.json carries, plus the image. Declared in full
+  // because the collector and Pixi both read every one of them.
+  const salida: {
+    nombre: string;
+    alto: number;
+    ancho: number;
+    png: string;
+    ancla: number;
+    pxUnidad: number;
+  }[] = [];
+
+  for (const nombre of MODELOS) {
+    const obj = await cargar(nombre);
+
+    // To light grey: the colour will come from Pixi's tint.
+    obj.traverse((o) => {
+      const m = o as THREE.Mesh;
+      if (!m.isMesh) return;
+      m.castShadow = true;
+      m.receiveShadow = true;
+      const mat = (m.material as THREE.MeshStandardMaterial).clone();
+      const l = mat.color.getHSL({ h: 0, s: 0, l: 0 }).l;
+      mat.color.setHSL(0, 0, 0.55 + l * 0.4); // conserva el contraste interno
+      mat.roughness = 0.72;
+      mat.metalness = 0.04;
+      m.material = mat;
+    });
+
+    // Centred on its base and fitted in frame, with the same margin for
+    // todos: si cada uno se encaja a su medida, en el mapa salen a escalas
+    // distintas y el city parece de juguetes mezclados.
+    const caja = new THREE.Box3().setFromObject(obj);
+    const tam = caja.getSize(new THREE.Vector3());
+    const centro = caja.getCenter(new THREE.Vector3());
+    obj.position.set(-centro.x, -caja.min.y, -centro.z);
+
+    const grupo = new THREE.Group();
+    grupo.add(obj);
+    esc.add(grupo);
+
+    const radio = 3.4; // the same for every model
+    cam.left = -radio;
+    cam.right = radio;
+    cam.bottom = -radio * 0.5;
+    cam.top = radio * 1.5;
+    cam.updateProjectionMatrix();
+    // Looking at the ground, not at the centre of the building: that way the y=0
+    // plane always lands on the same pixel and the sprite can be anchored to the
+    // tile. Point the camera at the middle of each model and every sprite has its
+    // base at a different height, so buildings float or sink on the map.
+    cam.lookAt(0, 0, 0);
+
+    rnd.render(esc, cam);
+    salida.push({
+      nombre,
+      alto: +tam.y.toFixed(3),
+      ancho: +Math.max(tam.x, tam.z).toFixed(3),
+      png: rnd.domElement.toDataURL('image/png').split(',')[1],
+      // Where the ground sits in the image, and how many pixels one model unit
+      // measures: with these two, Pixi places and scales without guessing.
+      ancla: +(cam.top / (cam.top - cam.bottom)).toFixed(4),
+      pxUnidad: +(LADO / (cam.right - cam.left)).toFixed(3),
+    });
+    esc.remove(grupo);
+  }
+
+  (window as any).__horneado = salida;
+  document.title = `baked ${salida.length}`;
+}
+cuece();

package/city/web/src/people.ts

@@ -0,0 +1,244 @@
+/**
+ * The people on site.
+ *
+ * The architect draws the plan, the foremen answer for a property, and the workers
+ * dig. A worker is ONE window of ONE person: the seat window, one per repo, and
+ * one per worktree — same repo, different branches, different workers.
+ *
+ * Careful what this counts: crew size says what is happening, not how well anyone
+ * is doing. More workers is more work open at once, not more work finished — what
+ * measures finishing is floors.
+ */
+import { Container, Graphics, Text, TextStyle } from 'pixi.js';
+import { TH, tono } from './draw';
+
+const CREMA = 0xe8e2d4;
+
+/**
+ * How big the people are drawn, against a 62×31 tile.
+ *
+ * They used to be drawn at 1: about thirteen pixels tall, which at the zoom
+ * where the whole city fits is a speck. A map about who is working cannot have
+ * the people be the least visible thing on it.
+ */
+export const ESCALA_GENTE = 1.6;
+
+/** A stable colour per person: the same foreman is always the same colour. */
+const PALETA = [0xf5c451, 0x6ee7b7, 0xf59ec4, 0x93c5fd, 0xfca868, 0xc4b5fd, 0x86efac, 0xfda4af];
+export const colorDe = (u: string) => {
+  let n = 0;
+  const s = String(u ?? ''); // a missing name is a colour, not a crash
+  for (let i = 0; i < s.length; i++) n = (n * 31 + s.charCodeAt(i)) | 0;
+  return PALETA[Math.abs(n) % PALETA.length];
+};
+
+function casco(col: number, r = 3.1) {
+  return new Graphics()
+    .ellipse(0, 0, r, r * 0.78)
+    .fill({ color: col })
+    .rect(-r - 1, -0.2, (r + 1) * 2, 1.1)
+    .fill({ color: tono(col, -0.25) });
+}
+
+/** A worker: digs, and every strike kicks up dust. */
+export function obrero(usuario: string, agente: string, orden = 0) {
+  const c = new Container();
+  const col = colorDe(usuario);
+
+  c.addChild(new Graphics().ellipse(0, 1, 5, 2).fill({ color: 0x000000, alpha: 0.3 }));
+  c.addChild(
+    new Graphics()
+      .rect(-1.6, -11, 3.2, 11)
+      .fill({ color: CREMA, alpha: 0.95 })
+      .rect(-1.6, -5.5, 3.2, 1.4)
+      .fill({ color: tono(col, -0.3), alpha: 0.9 }),
+  ); // el chaleco
+  const cab = casco(col);
+  cab.position.set(0, -13);
+  c.addChild(cab);
+
+  const pico = new Graphics()
+    .moveTo(0, -8)
+    .lineTo(7, -13)
+    .stroke({ color: 0xd9cdb4, width: 1.7 })
+    .moveTo(6, -14.4)
+    .lineTo(9, -12)
+    .stroke({ color: 0x9aa7b8, width: 1.7 });
+  pico.pivot.set(0, -8);
+  c.addChild(pico);
+
+  // Dust: three motes that rise and fade on each strike. It is what makes
+  // "digging" read as digging rather than as a figure standing still.
+  const polvo: Graphics[] = [];
+  for (let i = 0; i < 3; i++) {
+    const p = new Graphics().circle(0, 0, 1.1 + i * 0.4).fill({ color: 0xd9cdb4, alpha: 0.5 });
+    p.visible = false;
+    polvo.push(p);
+    c.addChild(p);
+  }
+
+  let t = Math.random() * 6;
+  c.onRender = () => {
+    t += 0.14;
+    pico.rotation = Math.sin(t) * 0.6;
+    const golpe = Math.sin(t) > 0.94;
+    polvo.forEach((p, i) => {
+      if (golpe && !p.visible) {
+        p.visible = true;
+        p.position.set(7 + i * 2, -6);
+        p.alpha = 0.55;
+      }
+      if (p.visible) {
+        p.y -= 0.5;
+        p.x += 0.16;
+        p.alpha -= 0.035;
+        if (p.alpha <= 0) {
+          p.visible = false;
+        }
+      }
+    });
+  };
+
+  // Several workers at the same house: the labels stack vertically, or they sit
+  // on top of each other and none of them can be read.
+  const cartel = etiqueta(usuario, `/${agente}`, col);
+  cartel.position.set(0, -28 - orden * 15);
+  c.addChild(cartel);
+  (c as any).__cartel = cartel;
+  (c as any).__agente = (cartel as any).__segunda;
+  return acaba(c, usuario, cartel);
+}
+
+/**
+ * Foreman: answers for a property and carries a crew. Drawn with a clipboard
+ * instead of a pick — they do not dig — and with their current crew size.
+ */
+export function perito(usuario: string, oficio: string, cuantos?: number) {
+  const c = new Container();
+  const col = colorDe(usuario);
+
+  c.addChild(new Graphics().ellipse(0, 1, 6, 2.4).fill({ color: 0x000000, alpha: 0.32 }));
+  c.addChild(
+    new Graphics()
+      .rect(-2, -14, 4, 14)
+      .fill({ color: CREMA })
+      .rect(-2, -8, 4, 2)
+      .fill({ color: tono(col, -0.2) }),
+  );
+  const cab = casco(col, 3.6);
+  cab.position.set(0, -16.5);
+  c.addChild(cab);
+  // the clipboard
+  c.addChild(
+    new Graphics()
+      .rect(2.4, -10, 5, 6.5)
+      .fill({ color: 0xf2ecdd })
+      .rect(2.4, -10, 5, 1.2)
+      .fill({ color: tono(col, -0.3) }),
+  );
+
+  // No crew, no counter: a "×0" says nothing and adds noise.
+  const cartel = etiqueta(usuario, oficio, col, cuantos && cuantos > 0 ? cuantos : undefined);
+  cartel.position.set(0, -32);
+  c.addChild(cartel);
+  (c as any).__cartel = cartel;
+  (c as any).__agente = (cartel as any).__segunda;
+  return acaba(c, usuario, cartel);
+}
+
+/** The architect: does not dig and has no crew. Carries the plan. */
+export function arquitecto(usuario: string) {
+  const c = new Container();
+  const col = colorDe(usuario);
+  c.addChild(new Graphics().ellipse(0, 1, 7, 2.8).fill({ color: 0x000000, alpha: 0.34 }));
+  c.addChild(new Graphics().rect(-2.2, -16, 4.4, 16).fill({ color: CREMA }));
+  const cab = casco(0xffffff, 4);
+  cab.position.set(0, -18.5);
+  c.addChild(cab);
+  // the plan under one arm
+  c.addChild(
+    new Graphics()
+      .rect(-9, -11, 9, 2.6)
+      .fill({ color: 0xf2ecdd })
+      .rect(-9, -11, 2, 2.6)
+      .fill({ color: col }),
+  );
+  const cartel = etiqueta(usuario, 'Architect', col);
+  cartel.position.set(0, -34);
+  c.addChild(cartel);
+  (c as any).__cartel = cartel;
+  (c as any).__agente = (cartel as any).__segunda;
+  return acaba(c, usuario, cartel);
+}
+
+/**
+ * What every figure gets before it leaves here: the size they are drawn at, a
+ * generous hit area — a person is a dozen pixels wide and a mouse is not — and
+ * the user they belong to, so a click can open their card.
+ *
+ * The label is scaled back down: at 1.6 the type would be bigger than the
+ * banners, and the figure has to read as a person, not as a sign.
+ */
+function acaba(c: Container, usuario: string, cartel: Container) {
+  c.scale.set(ESCALA_GENTE);
+  cartel.scale.set(1 / ESCALA_GENTE);
+  c.eventMode = 'static';
+  c.cursor = 'pointer';
+  (c as any).__usuario = usuario;
+  return c;
+}
+
+/** A two-part label: who, and what they are. Plus a count if they have a crew. */
+function etiqueta(principal: string, segunda: string, col: number, cuantos?: number) {
+  const c = new Container();
+  const a = new Text({
+    text: principal,
+    style: new TextStyle({
+      fontFamily: 'IBM Plex Mono, monospace',
+      fontSize: 9,
+      fontWeight: '500',
+      fill: 0x131a24,
+    }),
+  });
+  const b = new Text({
+    text: segunda,
+    style: new TextStyle({
+      fontFamily: 'IBM Plex Mono, monospace',
+      fontSize: 9,
+      fill: 0x131a24,
+    }),
+  });
+  b.alpha = 0.7;
+  const extra =
+    cuantos !== undefined
+      ? new Text({
+          text: `×${cuantos}`,
+          style: new TextStyle({
+            fontFamily: 'Chakra Petch, sans-serif',
+            fontSize: 10,
+            fontWeight: '700',
+            fill: 0x131a24,
+          }),
+        })
+      : null;
+
+  const ancho = a.width + b.width + 3 + (extra ? extra.width + 7 : 0);
+  a.position.set(-ancho / 2, -6.5);
+  b.position.set(-ancho / 2 + a.width + 3, -6.5);
+  const fondo = new Graphics()
+    .roundRect(-ancho / 2 - 5, -8.5, ancho + 10, 15, 2.5)
+    .fill({ color: col, alpha: 0.94 });
+  c.addChild(fondo, a, b);
+  if (extra) {
+    extra.position.set(ancho / 2 - extra.width, -7);
+    c.addChild(
+      new Graphics()
+        .roundRect(ancho / 2 - extra.width - 4, -8.5, extra.width + 9, 15, 2.5)
+        .fill({ color: tono(col, -0.4), alpha: 0.95 }),
+    );
+    extra.style.fill = 0xffffff;
+    c.addChild(extra);
+  }
+  (c as any).__segunda = b;
+  return c;
+}

package/city/web/src/presencia.ts

@@ -0,0 +1,193 @@
+/**
+ * Live presence: the lights say what is happening NOW.
+ *
+ * The windows a house is born with come from thirty days of history — a photo.
+ * This layer is the pulse on top of it: a house whose agent is mid-turn glows
+ * and breathes, one that just stopped cools down over a couple of minutes, and
+ * one with no session shows nothing extra. All of it is derived from events the
+ * feed already emits — a turn is `conversation.user` with no `conversation.agent`
+ * after it — so the map never claims more than the hooks reported.
+ *
+ * Houses and worker figures are rebuilt constantly (the replay redraws houses,
+ * the crew reconciles every state push), so nothing here holds a display object
+ * as truth: each frame re-resolves where the glow and the dots should live and
+ * re-parents them when the world changed underneath.
+ */
+import { Container, Graphics } from 'pixi.js';
+import { TH, TW } from './draw';
+import type { ActivityEvent } from './activity';
+
+const VENTANA = 0xffd98a;
+
+/** The one slice of the map's house record this layer needs. */
+export interface CasaEnVivo {
+  g: Container;
+  h?: { alto: number };
+}
+
+type Fase = 'turno' | 'enfria';
+
+interface Estado {
+  fase: Fase;
+  actores: Set<string>;
+  halo: Graphics;
+  puntos: Graphics[];
+  puntosEn: Container | null;
+  t: number; // the breath
+  resto: number; // cooling time left, in ticker units
+}
+
+/** Cooling lasts about two minutes at 60fps: long enough that "it just stopped"
+ * is visible, short enough that an evening of stopped agents reads as quiet. */
+const ENFRIAMIENTO = 60 * 120;
+
+export class Presencia {
+  private readonly casas = new Map<string, Estado>();
+  private readonly actorCasa = new Map<string, string>();
+
+  constructor(
+    private readonly vivaDe: (actor: string) => { id: string; casa: CasaEnVivo } | null,
+    private readonly porId: (id: string) => CasaEnVivo | null,
+    private readonly figuraDe: (actor: string) => Container | null,
+    private readonly sinMovimiento: boolean,
+  ) {}
+
+  recibe(evento: ActivityEvent): void {
+    const actor = evento.actor.trim();
+    if (!actor || actor === 'system') return;
+    if (evento.kind === 'conversation.user') this.empieza(actor);
+    else if (evento.kind === 'conversation.agent') this.para(actor, false);
+    else if (evento.kind === 'runtime.session.ended') this.para(actor, true);
+  }
+
+  /** How many houses are mid-turn right now — the HUD's number. */
+  enTurno(): number {
+    let n = 0;
+    for (const e of this.casas.values()) if (e.fase === 'turno') n++;
+    return n;
+  }
+
+  private empieza(actor: string): void {
+    const viva = this.vivaDe(actor);
+    if (!viva) return;
+    this.actorCasa.set(actor, viva.id);
+    let estado = this.casas.get(viva.id);
+    if (!estado) {
+      const halo = new Graphics();
+      halo.blendMode = 'add';
+      estado = {
+        fase: 'turno',
+        actores: new Set(),
+        halo,
+        puntos: [],
+        puntosEn: null,
+        t: 0,
+        resto: 0,
+      };
+      this.casas.set(viva.id, estado);
+    }
+    estado.fase = 'turno';
+    estado.actores.add(actor);
+  }
+
+  private para(actor: string, seco: boolean): void {
+    const id = this.actorCasa.get(actor);
+    if (!id) return;
+    const estado = this.casas.get(id);
+    if (!estado) return;
+    estado.actores.delete(actor);
+    if (estado.actores.size > 0) return; // somebody else is still mid-turn here
+    if (seco) {
+      // The session died: no afterglow for a light that was switched off.
+      this.apaga(id, estado);
+      return;
+    }
+    estado.fase = 'enfria';
+    estado.resto = ENFRIAMIENTO;
+  }
+
+  /** One tick for the whole layer, from the map's single ticker. */
+  tick(dt: number): void {
+    for (const [id, estado] of this.casas) {
+      const viva = this.porId(id);
+      if (!viva) {
+        this.apaga(id, estado);
+        continue;
+      }
+      const alto = viva.h?.alto ?? 40;
+
+      // The world redraws houses under us; the glow follows its house.
+      if (estado.halo.parent !== viva.g) {
+        estado.halo.parent?.removeChild(estado.halo);
+        estado.halo
+          .clear()
+          .ellipse(0, TH / 2 - alto * 0.45, TW * 0.32, alto * 0.46)
+          .fill({ color: VENTANA, alpha: 1 });
+        viva.g.addChild(estado.halo);
+      }
+
+      if (estado.fase === 'turno') {
+        estado.t += 0.042 * dt;
+        estado.halo.alpha = this.sinMovimiento ? 0.24 : 0.16 + (Math.sin(estado.t) + 1) * 0.07;
+      } else {
+        estado.resto -= dt;
+        if (estado.resto <= 0 || this.sinMovimiento) {
+          this.apaga(id, estado);
+          continue;
+        }
+        estado.halo.alpha = 0.18 * (estado.resto / ENFRIAMIENTO);
+      }
+
+      this.puntea(estado, viva, alto);
+    }
+  }
+
+  /**
+   * The thinking dots: three motes breathing over whoever is mid-turn. Over the
+   * worker figure when the crew feed knows one, over the house's roof when it
+   * does not — the signal must not depend on a second feed agreeing.
+   */
+  private puntea(estado: Estado, viva: CasaEnVivo, alto: number): void {
+    const pensando = estado.fase === 'turno';
+    if (!pensando) {
+      this.quitaPuntos(estado);
+      return;
+    }
+    const actor = [...estado.actores][0] ?? '';
+    const figura = this.figuraDe(actor);
+    const destino = figura ?? viva.g;
+    if (estado.puntosEn !== destino) {
+      this.quitaPuntos(estado);
+      for (let i = 0; i < 3; i++) {
+        const p = new Graphics().circle(0, 0, 1.4).fill({ color: 0xe8e2d4 });
+        if (figura) p.position.set(-4 + i * 4, -19);
+        else p.position.set(-5 + i * 5, TH / 2 - alto - 9);
+        destino.addChild(p);
+        estado.puntos.push(p);
+      }
+      estado.puntosEn = destino;
+    }
+    estado.puntos.forEach((p, i) => {
+      p.alpha = this.sinMovimiento
+        ? 0.8
+        : 0.25 + Math.max(0, Math.sin(estado.t * 1.6 - i * 0.9)) * 0.75;
+    });
+  }
+
+  private quitaPuntos(estado: Estado): void {
+    for (const p of estado.puntos) {
+      p.parent?.removeChild(p);
+      p.destroy();
+    }
+    estado.puntos = [];
+    estado.puntosEn = null;
+  }
+
+  private apaga(id: string, estado: Estado): void {
+    estado.halo.parent?.removeChild(estado.halo);
+    estado.halo.destroy();
+    this.quitaPuntos(estado);
+    this.casas.delete(id);
+    for (const [actor, casa] of this.actorCasa) if (casa === id) this.actorCasa.delete(actor);
+  }
+}