agents-city 0.1.0

package/city/web/src/hall.ts

@@ -0,0 +1,1959 @@
+/* The town hall's front end.
+ *
+ * Typed and built by the same esbuild and the same `tsc --strict` as the map,
+ * because the first version was 400 lines of untyped template literals inline in
+ * the HTML — and it shipped broken once, on an escaped apostrophe the compiler
+ * would have caught before any browser saw it.
+ *
+ * It builds to dist-hall/, not dist/: dist/ is what the deployed Worker serves to
+ * the active city, and the hall is local by design — it drives an API that writes
+ * this machine's disk. The Python server (bin/serve.py) is the only thing that
+ * ever serves this file.
+ */
+
+import {
+  ActivityEvent,
+  MAP_ACTIVITY_PROTOCOL,
+  isActivityEvent as esActividad,
+  isMapNavMessage as esNavDeMapa,
+  isPresenceEvent,
+  isSpeechEvent,
+} from './activity';
+
+// ── what the API answers ─────────────────────────────────────────────────────
+interface Objetivo {
+  user?: string;
+  title: string;
+  signal: string;
+  command: string;
+  manual?: string;
+  baseline: string;
+  target: string;
+  by: string;
+}
+interface Tarjeta {
+  user: string;
+  name: string;
+  role: string;
+  agent: string;
+  repos: string[];
+  repo_roles: Record<string, string>;
+  goals_defined: boolean;
+  objetivo: Objetivo | null;
+}
+interface Unidad {
+  id: string;
+  name: string;
+  color: string;
+}
+interface ParcelaFila {
+  id: string;
+  repo: string;
+  ruta: string;
+  unidad: string;
+  nombre: string;
+}
+interface Color {
+  hex: string;
+  nombre: string;
+}
+interface Ciudad {
+  ruta: string;
+  nombre: string;
+  slug?: string;
+  id?: string;
+  actual: boolean;
+}
+interface Road {
+  id: string;
+  name: string;
+  owner: string;
+  address: string;
+  local?: boolean;
+  domain?: string;
+  role?: string;
+}
+interface SkillInfo {
+  name: string;
+  description: string;
+  manifest: string;
+  provider: string;
+  /** Present only when this skill lives in the agent home's own
+   * `.claude/skills` — the one place the Hall installs into and may remove
+   * from. `dir` is the folder name removal is keyed on; the display name
+   * above is the SKILL.md's word and free to differ. */
+  removable?: boolean;
+  dir?: string;
+}
+interface AgentCapabilities {
+  path: string;
+  role?: string;
+  skills: SkillInfo[];
+}
+/** One agent's character sheet, as the server builds it: identity, engine and
+ * growth — every number real, none invented for the card to look fuller. */
+interface FichaAgente {
+  name: string;
+  slug: string;
+  kind: string;
+  role: string;
+  runtime: string;
+  model: string;
+  effort: string;
+  avatar_seed: string;
+  avatar: string;
+  cli: { binary: string; installed: boolean; connected: boolean };
+  legacy: boolean;
+  /** What this agent actually works on — repos, worktrees, document folders.
+   * `fixed` is a legacy repo agent's own repo, which is not a mount it chose. */
+  mounts: { label: string; target: string; fixed?: boolean }[];
+  growth: { floors: number; bricks: number; activity30: number; signal: string };
+}
+interface Deliberation {
+  id: string;
+  status: string;
+  question: string;
+  desired_outcome: string;
+  participants: string[];
+  received: number;
+  total: number;
+  revision: number;
+  decision: string;
+  contributors: string[];
+  verifier: string;
+  verification: string;
+  updated_at: string;
+  act: string;
+}
+interface LiveBus {
+  online: boolean;
+  url: string;
+  city: string;
+  started_at: string;
+}
+interface Invitation {
+  version: number;
+  id: string;
+  name: string;
+  owner: string;
+  address: string;
+  domain: string;
+  role?: string;
+}
+interface Estado {
+  datos: string;
+  casa: string;
+  yo: string;
+  address: string;
+  city_id: string;
+  city_name: string;
+  domain: string;
+  kind: string;
+  grow: string;
+  tarjetas: Tarjeta[];
+  unidades: Unidad[];
+  parcelas: ParcelaFila[];
+  lab: string[];
+  gh: boolean;
+  tmux: string[];
+  plugin: boolean;
+  mapa: string;
+  paleta: Color[];
+  sesion: string;
+  ciudades: Ciudad[];
+  roads: Road[];
+  invitation: Invitation;
+  skills: Record<string, AgentCapabilities>;
+  deliberations: Deliberation[];
+  live_bus: LiveBus;
+  /** name → identicon data URI, kind-tinted. Server-drawn (avatar.py) so the
+   * face is the same one everywhere, forever. */
+  avatars?: Record<string, string>;
+  /** The normalised agent list, as full character sheets. */
+  agents?: FichaAgente[];
+  /** True only for the packaged Aurora demo: unlocks the replay controls. */
+  demo?: boolean;
+  /** One line when a newer release is published, '' otherwise. */
+  update?: string;
+}
+interface RolInfo {
+  id: string;
+  name: string;
+  summary: string;
+  trade: string;
+}
+interface DomainInfo {
+  id: string;
+  name: string;
+  summary: string;
+}
+interface RepoLocal {
+  nombre: string;
+  ruta: string;
+  cuando: string;
+  mio: boolean;
+}
+interface Respuesta {
+  ok?: boolean;
+  error?: string;
+  user?: string;
+  attach?: string;
+  city?: string;
+  roads?: Road[];
+}
+
+declare global {
+  interface Window {
+    PASE: string;
+  }
+}
+
+// ── plumbing ─────────────────────────────────────────────────────────────────
+const PASE = window.PASE;
+const CIUDAD = new URLSearchParams(location.search).get('city') ?? '';
+
+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>;
+}
+
+/** querySelector that refuses to hand back null: a missing element here is a bug
+ *  in this file, and an early loud throw beats a silent dead button. */
+function q<T extends Element>(sel: string, raiz: ParentNode = document): T {
+  const el = raiz.querySelector<T>(sel);
+  if (!el) throw new Error(`no element matches ${sel}`);
+  return el;
+}
+function todos<T extends Element>(sel: string, raiz: ParentNode = document): T[] {
+  return [...raiz.querySelectorAll<T>(sel)];
+}
+
+function esc(s: unknown): string {
+  return String(s ?? '').replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c] as string,
+  );
+}
+const corto = (p: string): string => p.replace(E.casa, '~');
+
+let toastTimer = 0;
+function toast(msg: string, mal = false): void {
+  const t = q<HTMLElement>('#toast');
+  t.textContent = msg;
+  t.className = 'ver' + (mal ? ' mal' : '');
+  clearTimeout(toastTimer);
+  toastTimer = window.setTimeout(() => {
+    t.className = '';
+  }, 3200);
+}
+const espera = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+// ── state ────────────────────────────────────────────────────────────────────
+let E: Estado;
+// A city is a place, not a dashboard. Open on the map so the centre always
+// belongs to the city; configuration and the full transcript stay in the two
+// Hall sidebars. The other sections remain explicit destinations in the rail.
+let SECCION = 'mapa';
+const SECCIONES: Array<[string, string]> = [
+  ['resumen', 'Overview'],
+  ['mapa', 'The map'],
+  ['puesto', 'My seat'],
+  ['barrios', 'Districts & houses'],
+  ['red', 'Roads'],
+  ['committee', 'Committee'],
+  ['gente', 'Agents & skills'],
+];
+
+async function refresca(): Promise<void> {
+  E = await api<Estado>('/api/estado');
+  pinta();
+  pintaAvisoDeVersion();
+  pintaDemoControles();
+  sincronizaActividad(E.live_bus);
+}
+
+/**
+ * The demo's remote control, in the live rail: replay, pause, resume. The
+ * guided committee plays once when the first spectator connects, and anybody
+ * whose map was still baking missed it — these buttons are the way back. Real
+ * cities never see them, and the server refuses them anyway.
+ */
+/** A newer release, said once and quietly: the server already decided whether
+ * there is one (cached for a day), so this only renders what it was told. */
+function pintaAvisoDeVersion(): void {
+  const caja = document.getElementById('avisoVersion');
+  if (!caja) return;
+  const texto = (E.update ?? '').trim();
+  caja.textContent = texto;
+  caja.hidden = !texto;
+}
+
+function pintaDemoControles(): void {
+  const header = document.querySelector<HTMLElement>('#livePanel header');
+  const previa = document.getElementById('demoControles');
+  if (!header || !E.demo) {
+    previa?.remove();
+    return;
+  }
+  if (previa) return; // already wired; the buttons keep their own state
+  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>`;
+  header.appendChild(caja);
+  const pausa = q<HTMLButtonElement>('#demoPausa', caja);
+  const manda = (action: string) =>
+    api<{ ok?: boolean; running?: boolean; paused?: boolean }>('/api/demo', {
+      method: 'POST',
+      body: JSON.stringify({ action }),
+    });
+  q<HTMLButtonElement>('#demoReplay', caja).onclick = async () => {
+    const r = await manda('restart');
+    pausa.textContent = '⏸ pause';
+    if (!r.ok) toast('Could not restart the demo', true);
+  };
+  pausa.onclick = async () => {
+    const antes = pausa.textContent?.includes('resume') ?? false;
+    const r = await manda(antes ? 'resume' : 'pause');
+    if (!r.running) {
+      pausa.textContent = '⏸ pause';
+      toast('Nothing playing — hit replay', true);
+      return;
+    }
+    pausa.textContent = r.paused ? '▶ resume' : '⏸ pause';
+  };
+}
+
+// ── live, read-only WebSocket feed ──────────────────────────────────────────
+let liveSocket: WebSocket | null = null;
+let liveUrl = '';
+let liveEvents: ActivityEvent[] = [];
+let liveConnected = false;
+let liveRetry = 0;
+let liveSelectedThread: string | null = null;
+let liveFilterTouched = false;
+let liveShowWork = false;
+let pendingMapActivity: ActivityEvent | null = null;
+
+function sincronizaActividad(endpoint: LiveBus): void {
+  if (!endpoint?.online || !endpoint.url) {
+    liveConnected = false;
+    pintaActividad();
+    programaDescubrimiento();
+    return;
+  }
+  if (
+    endpoint.url === liveUrl &&
+    liveSocket &&
+    (liveSocket.readyState === WebSocket.OPEN || liveSocket.readyState === WebSocket.CONNECTING)
+  ) {
+    return;
+  }
+  const anterior = liveSocket;
+  if (anterior) {
+    anterior.onclose = null;
+    anterior.close();
+  }
+  liveUrl = endpoint.url;
+  const socket = new WebSocket(endpoint.url);
+  liveSocket = socket;
+  liveConnected = false;
+  pintaActividad();
+  socket.onopen = () => {
+    if (liveSocket !== socket) return;
+    liveConnected = true;
+    liveRetry = 0;
+    pintaActividad();
+  };
+  socket.onmessage = (message) => {
+    if (liveSocket !== socket) return;
+    let value: Record<string, unknown>;
+    try {
+      value = JSON.parse(String(message.data)) as Record<string, unknown>;
+    } catch {
+      return;
+    }
+    if (value.type === 'activity.state') {
+      liveEvents = Array.isArray(value.events)
+        ? (value.events as ActivityEvent[]).filter(esActividad)
+        : [];
+      liveEvents.sort((a, b) => a.seq - b.seq);
+      if (liveSelectedThread === null) liveSelectedThread = newestConversationThread();
+      pintaActividad(true);
+    } else if (value.type === 'activity.event' && esActividad(value.event)) {
+      const event = value.event;
+      if (!liveEvents.some((item) => item.id === event.id)) liveEvents.push(event);
+      liveEvents = liveEvents.sort((a, b) => a.seq - b.seq).slice(-200);
+      if (!liveFilterTouched && event.kind === 'committee.opened' && event.thread) {
+        liveSelectedThread = event.thread;
+      }
+      pintaActividad(true);
+      enviaActividadAlMapa(event);
+    }
+  };
+  socket.onclose = () => {
+    if (liveSocket !== socket) return;
+    liveSocket = null;
+    liveConnected = false;
+    pintaActividad();
+    programaDescubrimiento();
+  };
+  socket.onerror = () => {};
+}
+
+/** The Hall keeps the full transcript in its right rail. The map gets the same
+ * semantic event for a short, anchored game bubble — and the lifecycle beats,
+ * which never become bubbles but drive the map's live lights. */
+function enviaActividadAlMapa(event: ActivityEvent): void {
+  const esComite = event.kind.startsWith('committee.');
+  if (!isSpeechEvent(event) && !isPresenceEvent(event) && !esComite) return;
+  const frame = document.querySelector<HTMLIFrameElement>('#cityMapFrame');
+  if (!frame) return;
+  if (frame.dataset.ready !== '1') {
+    pendingMapActivity = event;
+    return;
+  }
+  const origin = new URL(frame.src, location.href).origin;
+  frame.contentWindow?.postMessage(
+    { protocol: MAP_ACTIVITY_PROTOCOL, type: 'activity.event', event },
+    origin,
+  );
+}
+
+function programaDescubrimiento(): void {
+  if (liveRetry) return;
+  liveRetry = window.setTimeout(async () => {
+    liveRetry = 0;
+    try {
+      sincronizaActividad(await api<LiveBus>('/api/live'));
+    } catch {
+      programaDescubrimiento();
+    }
+  }, 1_500);
+}
+
+function pintaActividad(seguir = false): void {
+  const dot = document.querySelector<HTMLElement>('#liveDot');
+  const state = document.querySelector<HTMLElement>('#liveState');
+  const list = document.querySelector<HTMLOListElement>('#liveEvents');
+  const filter = document.querySelector<HTMLSelectElement>('#liveFilter');
+  const context = document.querySelector<HTMLElement>('#liveContext');
+  const workToggle = document.querySelector<HTMLButtonElement>('#liveWorkToggle');
+  if (!dot || !state || !list || !filter || !context || !workToggle) return;
+  dot.classList.toggle('on', liveConnected);
+  state.textContent = liveConnected
+    ? 'websocket live'
+    : liveUrl
+      ? 'reconnecting'
+      : 'session offline';
+
+  const opened = new Map<string, string>();
+  for (const event of liveEvents) {
+    if (
+      event.thread &&
+      (event.kind === 'committee.opened' || event.kind === 'conversation.user') &&
+      !esPromptDeTransporte(event) &&
+      !opened.has(event.thread)
+    ) {
+      opened.set(event.thread, event.summary);
+    }
+  }
+  filter.innerHTML =
+    '<option value="">all conversations</option>' +
+    [...opened.entries()]
+      .reverse()
+      .map(
+        ([thread, question]) =>
+          `<option value="${esc(thread)}">${esc(question.slice(0, 54) || thread)}</option>`,
+      )
+      .join('');
+  const selected = liveSelectedThread || '';
+  filter.value = [...filter.options].some((option) => option.value === selected) ? selected : '';
+  filter.onchange = () => {
+    liveSelectedThread = filter.value;
+    liveFilterTouched = true;
+    pintaActividad(true);
+  };
+  workToggle.classList.toggle('on', liveShowWork);
+  workToggle.setAttribute('aria-pressed', String(liveShowWork));
+  workToggle.textContent = liveShowWork ? 'hide work' : 'show work';
+  workToggle.onclick = () => {
+    liveShowWork = !liveShowWork;
+    pintaActividad(true);
+  };
+  pintaContexto(filter.value, context);
+
+  const scoped = filter.value
+    ? liveEvents.filter((event) => event.thread === filter.value)
+    : liveEvents;
+  const visible = scoped.filter(
+    (event) =>
+      !esPromptDeTransporte(event) &&
+      (liveShowWork || !esRuidoDeTrabajo(event) || event.tone === 'error'),
+  );
+  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.'
+    }</li>`;
+    return;
+  }
+  const wasNearBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 90;
+  list.innerHTML = visible.map(renderActividad).join('');
+  if (seguir || wasNearBottom) list.scrollTop = list.scrollHeight;
+}
+
+function renderActividad(event: ActivityEvent): string {
+  const when = new Date(event.at);
+  const time = Number.isNaN(when.getTime())
+    ? ''
+    : when.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  const side = event.role === 'chair' ? 'chair' : event.role === 'member' ? 'member' : 'system';
+  const role = rolOperativo(event.actor);
+  const route =
+    event.target && !['committee', 'seat'].includes(event.target)
+      ? `to ${event.target}`
+      : event.target === 'committee'
+        ? 'to the committee'
+        : '';
+  const summary = event.summary.trim();
+  const compact = resumenVisible(summary);
+  const long = compact !== summary;
+  const details = event.details.length
+    ? `<details class="liveEvidence"><summary>${event.details.length} ${
+        event.details.length === 1 ? 'detail' : 'details'
+      }</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>`
+    : '';
+  return `<li class="liveTurn ${side} ${esc(event.tone)}">
+    <div class="liveAvatar${E?.avatars?.[event.actor] ? ' conCara' : ''}"
+      style="--actor-hue:${tonoActor(event.actor)}" aria-hidden="true">
+      ${cara(event.actor, event.role === 'chair')}
+    </div>
+    <article class="liveBubble">
+      <div class="liveMeta"><span class="liveActor">${esc(event.actor)}</span>
+        ${role ? `<span class="liveRole">${esc(role)}</span>` : ''}
+        ${route ? `<span>${esc(route)}</span>` : ''}<span class="liveWhen">${esc(time)}</span></div>
+      <div class="liveHeading">${icono(event.kind)}<h3>${esc(tituloVisible(event))}</h3></div>
+      <p>${esc(compact)}</p>${full}${details}
+    </article>
+  </li>`;
+}
+
+function newestConversationThread(): string {
+  return (
+    [...liveEvents]
+      .reverse()
+      .find(
+        (event) =>
+          Boolean(event.thread) &&
+          (event.kind === 'committee.opened' ||
+            (event.kind === 'conversation.user' && !esPromptDeTransporte(event))),
+      )?.thread || ''
+  );
+}
+
+function pintaContexto(thread: string, container: HTMLElement): void {
+  const deliberation = thread ? E?.deliberations?.find((item) => item.id === thread) : undefined;
+  const conversation = thread ? liveEvents.filter((event) => event.thread === thread) : [];
+  const opened = conversation.find((event) => event.kind === 'committee.opened');
+  if (!deliberation && !opened) {
+    container.innerHTML = '';
+    container.hidden = true;
+    return;
+  }
+  const invited =
+    opened?.details
+      .find((detail) => detail.startsWith('Invited:'))
+      ?.slice('Invited:'.length)
+      .split(',')
+      .map((actor) => actor.trim())
+      .filter(Boolean) || [];
+  const participants = deliberation?.participants || invited;
+  const received =
+    deliberation?.received ??
+    new Set(
+      conversation
+        .filter((event) => event.kind === 'committee.position.submitted')
+        .map((event) => event.actor),
+    ).size;
+  const total = deliberation?.total ?? participants.length;
+  const status = conversation.at(-1)?.phase || deliberation?.status || 'starting';
+  const actors = ['seat', ...participants];
+  container.hidden = false;
+  container.innerHTML = `<div class="livePeople">${actors
+    .map(
+      (actor) =>
+        `<span class="livePerson${E?.avatars?.[actor] ? ' conCara' : ''}" title="${esc(
+          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(
+    received,
+  )}/${esc(total)} positions · ${esc(status)}</span>`;
+}
+
+function esPromptDeTransporte(event: ActivityEvent): boolean {
+  if (event.kind !== 'conversation.user') return false;
+  const summary = event.summary.trimStart();
+  return (
+    summary.startsWith('[Agents City authenticated local bus]') ||
+    (summary.startsWith('<channel') && summary.slice(0, 500).includes('plugin:city:city-bus'))
+  );
+}
+
+function esRuidoDeTrabajo(event: ActivityEvent): boolean {
+  return (
+    event.kind === 'work.command.started' ||
+    event.kind === 'work.command.completed' ||
+    event.kind === 'runtime.turn.started' ||
+    event.kind === 'runtime.turn.completed' ||
+    event.kind === 'runtime.gateway.ready' ||
+    event.kind === 'runtime.session.started' ||
+    event.kind === 'runtime.session.ended'
+  );
+}
+
+function rolOperativo(actor: string): string {
+  if (actor === 'seat') return 'chair';
+  return E?.skills?.[actor]?.role || '';
+}
+
+/**
+ * An actor's face for the live rail: the server-drawn identicon when the city
+ * knows this agent, the old initials (or the chair icon) when it does not —
+ * an actor from another city still gets shown, just without claiming a face.
+ */
+function cara(actor: string, esChair: boolean): string {
+  const uri = E?.avatars?.[actor];
+  if (uri && uri.startsWith('data:image/svg+xml;base64,')) {
+    return `<img class="liveCara" src="${esc(uri)}" alt="">`;
+  }
+  return esChair ? icono('chair') : esc(iniciales(actor));
+}
+
+function iniciales(actor: string): string {
+  const parts = actor.split(/[-_.\s]+/).filter(Boolean);
+  const initials =
+    parts.length > 1
+      ? parts
+          .slice(0, 2)
+          .map((part) => part[0])
+          .join('')
+      : actor.slice(0, 2);
+  return initials.toUpperCase();
+}
+
+function tonoActor(actor: string): number {
+  let hash = 17;
+  for (const character of actor) hash = (hash * 31 + character.charCodeAt(0)) % 360;
+  return hash;
+}
+
+function resumenVisible(summary: string): string {
+  if (summary.length <= 520) return summary;
+  const boundary = summary.slice(0, 520).lastIndexOf(' ');
+  return summary.slice(0, boundary > 360 ? boundary : 520).trimEnd() + '…';
+}
+
+function tituloVisible(event: ActivityEvent): string {
+  if (event.kind === 'conversation.user')
+    return event.actor === 'seat' ? 'Question' : 'Brief received';
+  if (event.kind === 'conversation.agent.commentary') return 'Working note';
+  if (event.kind === 'conversation.agent') return 'Response';
+  if (event.kind === 'committee.opened') return 'Question to the committee';
+  if (event.kind === 'committee.position.submitted') return 'Position sealed';
+  if (event.kind === 'committee.positions.revealed') return 'Blind round complete';
+  if (event.kind === 'committee.position.revealed') return 'Position';
+  if (event.kind === 'committee.synthesis.published') return 'Chair synthesis';
+  if (event.kind === 'committee.floor.requested') return 'Requests the floor';
+  if (event.kind === 'committee.floor.granted') return 'Floor granted';
+  if (event.kind === 'committee.floor.denied') return 'Floor denied';
+  if (event.kind === 'committee.floor.spoke') return 'Intervention';
+  if (event.kind === 'committee.decision.recorded') return 'Decision';
+  if (event.kind.startsWith('committee.verification.')) return 'Verification';
+  if (event.kind === 'committee.closed') return 'Committee closed';
+  return event.title;
+}
+
+function icono(kind: string): string {
+  if (kind === 'chair') {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 17h16l-1.4-9-4.1 3L12 5l-2.5 6-4.1-3L4 17Zm1 2h14"/></svg>';
+  }
+  if (kind.includes('question') || kind === 'committee.opened' || kind === 'conversation.user') {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Zm5 4a2 2 0 1 1 3.4 1.4c-.9.6-1.4 1-1.4 2.1M12 14.7v.1"/></svg>';
+  }
+  if (kind.includes('decision') || kind.includes('verification') || kind === 'committee.closed') {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>';
+  }
+  if (kind.includes('floor')) {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 11V5a1.5 1.5 0 0 1 3 0v5-7a1.5 1.5 0 0 1 3 0v7-5a1.5 1.5 0 0 1 3 0v7l1-2a1.5 1.5 0 0 1 2.6 1.5L17 18a4 4 0 0 1-3.5 2H10a5 5 0 0 1-5-5v-3.5a1.5 1.5 0 0 1 3 0V13"/></svg>';
+  }
+  if (kind.includes('command') || kind.includes('work.')) {
+    return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 8 4 4-4 4m6 0h6"/></svg>';
+  }
+  return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h14v12H5zM8 10h8m-8 4h5"/></svg>';
+}
+
+function rail(): void {
+  q('#rail').innerHTML = SECCIONES.map(([id, et]) => {
+    const n =
+      id === 'gente'
+        ? 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}">
+      <span>${et}</span>${n ? `<span class="n">${n}</span>` : ''}</li>`;
+  }).join('');
+  todos<HTMLElement>('#rail li').forEach((li) => {
+    li.onclick = () => {
+      SECCION = li.dataset.s ?? 'mapa';
+      pinta();
+    };
+  });
+  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">
+      ${E.ciudades
+        .map(
+          (c) => `<option value="${esc(c.ruta)}" ${c.actual ? 'selected' : ''}>
+        ${esc(c.nombre)}</option>`,
+        )
+        .join('')}</select>`;
+    q<HTMLSelectElement>('#cambiaCiudad').onchange = (ev) => {
+      const ruta = (ev.target as HTMLSelectElement).value;
+      location.href = '/?PASE=' + encodeURIComponent(PASE) + '&city=' + encodeURIComponent(ruta);
+    };
+  } else {
+    cs.innerHTML = '';
+  }
+  const nueva = q<HTMLAnchorElement>('#alWizard');
+  nueva.onclick = async (ev) => {
+    ev.preventDefault();
+    const name = window.prompt('Name of the new city');
+    if (!name?.trim()) return;
+    const r = await api<Respuesta>('/api/ciudades', {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+    });
+    if (r.error || !r.city) return toast(r.error ?? 'Could not create the city', true);
+    location.href = '/?PASE=' + encodeURIComponent(PASE) + '&city=' + encodeURIComponent(r.city);
+  };
+}
+
+function pinta(): void {
+  rail();
+  q<HTMLElement>('.cuerpo').style.padding = '';
+  q<HTMLElement>('#lienzo').style.maxWidth = '';
+  VISTAS[SECCION]();
+  q<HTMLElement>('.cuerpo').scrollTop = 0;
+}
+
+const VISTAS: Record<string, () => void> = {};
+
+// ── overview ─────────────────────────────────────────────────────────────────
+VISTAS.resumen = () => {
+  const mia = E.tarjetas.find((t) => t.user === E.yo);
+  const sinUnidad = E.parcelas.filter((p) => p.unidad === 'none' || p.unidad === 'mine').length;
+  const tareas = [
+    {
+      ok: !!mia,
+      txt: mia
+        ? `Your card exists — you are <b>${esc(mia.agent)}</b>`
+        : 'Take your seat: role, folders, one goal',
+      ir: 'puesto',
+    },
+    {
+      ok: !!(mia && mia.goals_defined),
+      txt:
+        mia && mia.goals_defined
+          ? `Your goal: <b>${esc(mia.objetivo ? mia.objetivo.title : '')}</b>`
+          : 'Set <b>one goal</b>, with the command that measures it',
+      ir: 'puesto',
+    },
+    {
+      ok: E.parcelas.length > 0 && sinUnidad === 0,
+      txt:
+        E.parcelas.length === 0
+          ? 'No houses yet — pick your folders and they appear'
+          : sinUnidad
+            ? `<b>${sinUnidad}</b> of ${E.parcelas.length} houses sit in no real district — assign them`
+            : 'Every house has its district',
+      ir: 'barrios',
+    },
+  ];
+  const sesionArriba = E.tmux.includes(E.sesion);
+  q('#lienzo').innerHTML = `
+    <div><span class="sub">your city</span>
+      <h1 style="margin-top:6px">${esc(E.city_name)}</h1>
+      <p class="de mono" style="margin-top:5px">${esc(E.address)}</p>
+      <p class="prosa" style="margin-top:8px">Domain: <b>${esc(E.domain)}</b>. Growth is
+      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>${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>
+    <div class="luces">
+      <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 ${sesionArriba ? 'on' : 'neutra'}">tmux session${sesionArriba ? ' up' : ''}</span>
+    </div>
+    <div><span class="sub">what is left</span>
+      <div class="tareas" style="margin-top:9px">${tareas
+        .map(
+          (t) => `
+        <div class="tarea ${t.ok ? 'hecha' : ''}">${t.txt}
+          ${t.ok ? '' : `<button class="bt mini ir" data-ir="${t.ir}">go</button>`}</div>`,
+        )
+        .join('')}
+      </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>
+          <code>${
+            sesionArriba
+              ? 'tmux attach -t ' + esc(E.sesion)
+              : 'one window per folder, an agent in each'
+          }</code>
+          ${
+            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>'
+          }
+        </div>
+        <div class="orden"><span class="et2">the map</span>
+          <code>${E.mapa ? esc(E.mapa) : 'not drawn yet'}</code>
+          <button class="bt mini ${E.mapa ? '' : 'ppal'}" data-ir="mapa">${E.mapa ? 'open' : 'draw it'}</button></div>
+      </div></div>`;
+  enlaza();
+  const b = document.querySelector<HTMLButtonElement>('#abreSesion');
+  if (b)
+    b.onclick = async () => {
+      b.disabled = true;
+      b.textContent = 'building…';
+      const r = await api<Respuesta>('/api/sesion', {
+        method: 'POST',
+        body: JSON.stringify({ user: E.yo }),
+      });
+      await espera(1500);
+      await refresca();
+      toast(
+        r.ok && r.attach ? `Session built — attach with: ${r.attach}` : 'Could not build it',
+        !r.ok,
+      );
+    };
+};
+
+// ── the map ──────────────────────────────────────────────────────────────────
+VISTAS.mapa = () => {
+  if (E.mapa) {
+    // One web: the map lives inside the hall. It is its own server (a Worker,
+    // independently deployable) so it arrives by iframe, full bleed. Embed mode
+    // hides the map's standalone rails: the Hall already owns both sidebars.
+    q<HTMLElement>('.cuerpo').style.padding = '0';
+    q<HTMLElement>('#lienzo').style.maxWidth = 'none';
+    const mapUrl = new URL(E.mapa, location.href);
+    mapUrl.searchParams.set('embed', '1');
+    mapUrl.searchParams.set('parent_origin', location.origin);
+    q('#lienzo').innerHTML =
+      `<iframe id="cityMapFrame" src="${esc(mapUrl.toString())}" title="the map"
+      allow="fullscreen" allowfullscreen
+      style="width:100%;height:calc(100vh - 2px);border:0;display:block"></iframe>`;
+    const frame = q<HTMLIFrameElement>('#cityMapFrame');
+    frame.onload = () => {
+      frame.dataset.ready = '1';
+      // What only the Hall knows and the map should draw: the city's roads,
+      // which become its gates. The standalone map never gets this and never
+      // invents a gate.
+      const origin = new URL(frame.src, location.href).origin;
+      frame.contentWindow?.postMessage(
+        {
+          protocol: MAP_ACTIVITY_PROTOCOL,
+          type: 'map.config',
+          roads: E.roads.map((r) => ({ name: r.name, address: r.address })),
+          agents: (E.agents ?? []).map((a) => ({ name: a.name, kind: a.kind })),
+          avatars: E.avatars ?? {},
+        },
+        origin,
+      );
+      // The map loads after the theme was decided, so tell it now as well —
+      // otherwise a light Hall frames a night map until the next toggle.
+      frame.contentWindow?.postMessage(
+        { type: 'agents-city-map-theme/1', theme: temaActual() },
+        origin,
+      );
+      if (pendingMapActivity) {
+        const event = pendingMapActivity;
+        pendingMapActivity = null;
+        enviaActividadAlMapa(event);
+      }
+    };
+    return;
+  }
+  q('#lienzo').innerHTML = `<div><span class="sub">the map</span>
+    <h1 style="margin-top:6px">Not drawn yet</h1>
+    <p class="prosa" style="margin-top:8px">The map can be served independently.
+    Locally the hall runs it for you: first time bakes the front end
+    and seeds the local database, which takes about a minute.</p></div>
+    <div><button class="bt ppal" id="arrancaMapa">Draw my city</button></div>
+    <p class="cargando" id="mapaEspera" style="display:none">baking the map — first time takes a minute</p>`;
+  q<HTMLButtonElement>('#arrancaMapa').onclick = async () => {
+    q<HTMLButtonElement>('#arrancaMapa').disabled = true;
+    q<HTMLElement>('#mapaEspera').style.display = '';
+    await api<Respuesta>('/api/mapa', { method: 'POST', body: '{}' });
+    for (let i = 0; i < 60; i++) {
+      await espera(3000);
+      E = await api<Estado>('/api/estado');
+      if (E.mapa) {
+        pinta();
+        return;
+      }
+    }
+    toast('It did not come up — run ./bin/city by hand and look at its output', true);
+    pinta();
+  };
+};
+
+// ── my seat ──────────────────────────────────────────────────────────────────
+VISTAS.puesto = () => {
+  void 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>
+    <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">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="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
+      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>
+    <div style="display:flex;gap:10px;align-items:center">
+      <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
+  // the city as editable Markdown; neither changes skills in a referenced repo.
+  const domainsR = (await api<{ domains: DomainInfo[] }>('/api/domains')).domains;
+  let domain = E.domain || E.kind || 'software';
+  let rol = mia ? mia.role : '';
+  let rolesR: RolInfo[] = [];
+  const pintaRoles = (): void => {
+    q('#roles').innerHTML = rolesR
+      .map(
+        (r) => `
+      <button class="rol ${r.id === rol ? 'on' : ''}" data-r="${esc(r.id)}">
+        <h3>${esc(r.name)}</h3><span class="de">${esc(r.id)} · ${esc(r.trade.toLowerCase())}</span>
+        <p>${esc(r.summary)}</p></button>`,
+      )
+      .join('');
+    todos<HTMLButtonElement>('#roles .rol').forEach((b) => {
+      b.onclick = () => {
+        rol = b.dataset.r ?? '';
+        pintaRoles();
+      };
+    });
+  };
+  const cargaRoles = async (): Promise<void> => {
+    rolesR = (await api<{ roles: RolInfo[] }>('/api/roles?domain=' + encodeURIComponent(domain)))
+      .roles;
+    if (!rolesR.some((r) => r.id === rol)) rol = '';
+    pintaRoles();
+  };
+  const pintaDominios = (): void => {
+    q('#domains').innerHTML = domainsR
+      .map(
+        (d) => `
+      <button class="rol ${d.id === domain ? 'on' : ''}" data-d="${esc(d.id)}">
+        <h3>${esc(d.name)}</h3><span class="de">${esc(d.id)}</span>
+        <p>${esc(d.summary)}</p></button>`,
+      )
+      .join('');
+    todos<HTMLButtonElement>('#domains .rol').forEach((b) => {
+      b.onclick = () => {
+        domain = b.dataset.d ?? 'software';
+        pintaDominios();
+        void cargaRoles();
+      };
+    });
+  };
+  pintaDominios();
+  await cargaRoles();
+
+  // The roster is not asked for here any more: it lives in one place,
+  // the agents view, so this page and the terminal cannot write different
+  // cities. What this page owns is the chair — domain, role, goal.
+
+  // 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>
+    <div class="dos">
+      <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>
+        <input type="text" class="mono" id="g_command" value="${esc(o.command)}"
+          placeholder="empty for a qualitative goal"></div>
+    </div>
+    <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">
+      <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>
+        <input type="text" class="mono" id="g_baseline" value="${esc(o.baseline)}"></div>
+      <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>
+      <input type="text" id="g_by" value="${esc(o.by ?? 'this quarter')}"></div>`;
+
+  const val = (id: string): string => q<HTMLInputElement>(id).value.trim();
+  q<HTMLButtonElement>('#guardaPuesto').onclick = async () => {
+    if (!rol) {
+      toast('Pick a role — it is the name your seat answers to', true);
+      return;
+    }
+    q<HTMLElement>('#puestoEstado').style.display = '';
+    const r = await api<Respuesta>('/api/ficha', {
+      method: 'POST',
+      body: JSON.stringify({
+        user: E.yo,
+        domain,
+        role: rol,
+        objetivo: {
+          title: val('#g_title'),
+          signal: val('#g_signal'),
+          command: val('#g_command'),
+          manual: val('#g_manual'),
+          baseline: val('#g_baseline'),
+          target: val('#g_target'),
+          by: val('#g_by') || 'this quarter',
+        },
+      }),
+    });
+    await refresca();
+    toast(
+      r.ok ? `Card written — you are ${r.user ?? E.yo}` : (r.error ?? 'It could not write'),
+      !r.ok,
+    );
+  };
+}
+
+// ── districts & houses ───────────────────────────────────────────────────────
+VISTAS.barrios = () => {
+  // Local working copies; nothing touches disk until Save.
+  const unidades: Unidad[] = E.unidades.map((u) => ({ ...u }));
+  const lab = new Set<string>(E.lab);
+  interface Fila {
+    ruta: string;
+    unidad: string;
+    nombre: string;
+  }
+  const porRepo: Record<string, Fila[]> = {};
+  for (const p of E.parcelas) {
+    (porRepo[p.repo] = porRepo[p.repo] ?? []).push({
+      ruta: p.ruta,
+      unidad: p.unidad,
+      nombre: p.nombre,
+    });
+  }
+  const slug = (s: string): string =>
+    s
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '')
+      .slice(0, 20);
+
+  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
+      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>
+
+      <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">
+          <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>
+        <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>`;
+
+    q('#unidades').innerHTML =
+      unidades
+        .map(
+          (u, i) => `
+      <div class="tr">
+        <input type="text" value="${esc(u.name)}" data-i="${i}" style="flex:1">
+        <span class="id">${esc(u.id)}</span>
+        <span class="pips" data-i="${i}">${E.paleta
+          .map(
+            (p) => `
+          <button class="pip ${p.hex === u.color ? 'on' : ''}" data-c="${p.hex}"
+            style="background:#${p.hex}" title="${esc(p.nombre)}"></button>`,
+          )
+          .join('')}</span>
+        <button class="x" data-x="${i}">×</button></div>`,
+        )
+        .join('') ||
+      '<div class="tr" style="color:var(--tinta3);font-size:12.5px">No districts yet — everything sits in “no unit”.</div>';
+
+    q('#parcelas').innerHTML =
+      Object.keys(porRepo)
+        .sort()
+        .map(
+          (repo) => `
+      <div class="repoBloque" data-repo="${esc(repo)}">
+        <div class="repoCab"><span>${esc(repo)}</span>
+          <button class="bt mini" data-split="${esc(repo)}">split</button>
+          <label class="lab"><input type="checkbox" data-lab="${esc(repo)}"
+            ${lab.has(repo) ? 'checked' : ''}> lab</label></div>
+        ${(porRepo[repo] ?? [])
+          .map(
+            (f, j) => `
+          <div class="parcela">
+            <input type="text" value="${esc(f.nombre)}" data-k="nombre" data-r="${esc(repo)}" data-j="${j}" title="name on the map">
+            <input type="text" class="mono" value="${esc(f.ruta)}" data-k="ruta" data-r="${esc(repo)}" data-j="${j}"
+              placeholder="glob inside the repo — empty = the whole repo">
+            <select data-k="unidad" data-r="${esc(repo)}" data-j="${j}">
+              ${[...unidades.map((u) => u.id), 'none']
+                .map(
+                  (id) => `
+                <option value="${esc(id)}" ${(idsValidos.has(f.unidad) ? f.unidad : 'none') === id ? 'selected' : ''}>${esc(id)}</option>`,
+                )
+                .join('')}
+            </select>
+            ${
+              (porRepo[repo] ?? []).length > 1
+                ? `<button class="x" data-quita="${esc(repo)}" data-j="${j}">×</button>`
+                : '<span></span>'
+            }
+          </div>`,
+          )
+          .join('')}
+      </div>`,
+        )
+        .join('') ||
+      '<p class="prosa">No houses yet. Pick your folders in <b>My seat</b> and each becomes one.</p>';
+
+    // wiring
+    todos<HTMLInputElement>('#unidades input[data-i]').forEach((inp) => {
+      inp.oninput = () => {
+        const u = unidades[Number(inp.dataset.i)];
+        if (!u) return;
+        u.name = inp.value;
+        u.id = slug(inp.value) || u.id;
+        const idEl = inp.closest('.tr')?.querySelector('.id');
+        if (idEl) idEl.textContent = u.id;
+      };
+    });
+    todos<HTMLButtonElement>('#unidades .pip').forEach((b) => {
+      b.onclick = () => {
+        const grupo = b.closest<HTMLElement>('.pips');
+        const u = unidades[Number(grupo?.dataset.i)];
+        if (u) {
+          u.color = b.dataset.c ?? u.color;
+          render();
+        }
+      };
+    });
+    todos<HTMLButtonElement>('#unidades .x[data-x]').forEach((b) => {
+      b.onclick = () => {
+        unidades.splice(Number(b.dataset.x), 1);
+        render();
+      };
+    });
+    q<HTMLButtonElement>('#masU').onclick = () => {
+      const n = q<HTMLInputElement>('#nuevaU').value.trim();
+      if (!n) return;
+      const usados = unidades.map((u) => u.color);
+      const libre = E.paleta.find((p) => !usados.includes(p.hex)) ?? E.paleta[0];
+      unidades.push({ id: slug(n), name: n, color: libre ? libre.hex : 'c8b48a' });
+      render();
+    };
+    q<HTMLInputElement>('#nuevaU').onkeydown = (e) => {
+      if (e.key === 'Enter') q<HTMLButtonElement>('#masU').click();
+    };
+
+    todos<HTMLInputElement | HTMLSelectElement>('#parcelas [data-k]').forEach((el) => {
+      el.onchange = () => {
+        const fila = porRepo[el.dataset.r ?? '']?.[Number(el.dataset.j)];
+        if (!fila) return;
+        const k = el.dataset.k as keyof Fila;
+        fila[k] = el.value;
+      };
+    });
+    todos<HTMLButtonElement>('#parcelas [data-split]').forEach((b) => {
+      b.onclick = () => {
+        const r = b.dataset.split ?? '';
+        (porRepo[r] = porRepo[r] ?? []).push({
+          ruta: '',
+          unidad: 'none',
+          nombre: `${r} · new slice`,
+        });
+        render();
+      };
+    });
+    todos<HTMLButtonElement>('#parcelas [data-quita]').forEach((b) => {
+      b.onclick = () => {
+        porRepo[b.dataset.quita ?? '']?.splice(Number(b.dataset.j), 1);
+        render();
+      };
+    });
+    todos<HTMLInputElement>('#parcelas [data-lab]').forEach((c) => {
+      c.onchange = () => {
+        const r = c.dataset.lab ?? '';
+        if (c.checked) lab.add(r);
+        else lab.delete(r);
+      };
+    });
+
+    q<HTMLButtonElement>('#guardaBarrios').onclick = async () => {
+      const r1 = await api<Respuesta>('/api/unidades', {
+        method: 'POST',
+        body: JSON.stringify({ unidades }),
+      });
+      const r2 = await api<Respuesta>('/api/parcelas', {
+        method: 'POST',
+        body: JSON.stringify({ repos: porRepo, lab: [...lab] }),
+      });
+      await refresca();
+      const mal = r1.error ?? r2.error;
+      toast(mal ?? 'Districts and houses written', !!mal);
+    };
+  };
+  render();
+};
+
+// ── roads ────────────────────────────────────────────────────────────────────
+VISTAS.red = () => {
+  const conectadas = new Set(E.roads.map((r) => r.id));
+  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>
+    <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>
+    <div class="gente">${
+      E.roads
+        .map(
+          (r) => `<div class="persona"><h3>${esc(r.name)}</h3>
+          <span class="ag">${esc(r.address)}</span>
+          <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>'
+    }</div>
+    <div><span class="sub">other cities on this machine</span>
+      <div class="gente" style="margin-top:9px">${
+        locales
+          .map(
+            (c) => `<div class="persona"><h3>${esc(c.nombre)}</h3>
+              <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>'
+      }</div></div>
+    <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>`;
+  enlaza();
+  todos<HTMLButtonElement>('[data-road-open]').forEach((b) => {
+    b.onclick = async () => {
+      const r = await api<Respuesta>('/api/roads', {
+        method: 'POST',
+        body: JSON.stringify({ action: 'connect', target: b.dataset.roadOpen }),
+      });
+      if (r.error) return toast(r.error, true);
+      await refresca();
+      toast('Road open at both local cities');
+    };
+  });
+  todos<HTMLButtonElement>('[data-road-close]').forEach((b) => {
+    b.onclick = async () => {
+      const r = await api<Respuesta>('/api/roads', {
+        method: 'POST',
+        body: JSON.stringify({ action: 'disconnect', target: b.dataset.roadClose }),
+      });
+      if (r.error) return toast(r.error, true);
+      await refresca();
+      toast('Road closed');
+    };
+  });
+};
+
+// ── 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>
+    <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>
+      <button class="bt mini" data-copia="agents-city committee schema open">copy</button>
+    </div>
+    <div class="gente">${
+      E.deliberations
+        .map(
+          (act) => `<div class="persona">
+            <h3>${esc(act.question)}</h3>
+            <span class="ag">${esc(act.status)} · revision ${act.revision} ·
+              ${act.received}/${act.total} positions</span>
+            <span class="rp">${esc(act.decision || act.desired_outcome)}</span>
+            <span class="de">${esc(act.participants.join(', ') || 'no participants')}
+              ${act.contributors.length ? ` · decisive ${esc(act.contributors.join(', '))}` : ''}
+              ${act.verifier ? ` · verifier ${esc(act.verifier)} ${esc(act.verification)}` : ''}</span>
+            <code class="mono">${esc(corto(act.act))}</code>
+          </div>`,
+        )
+        .join('') ||
+      '<p class="prosa">No committee acts yet. Open one only when the seat needs specialised evidence.</p>'
+    }</div>`;
+  enlaza();
+};
+
+// ── agents and skills ────────────────────────────────────────────────────────
+/** The engine's honest power reading. An alias maps to its tier; empty means
+ * the owner's Claude default — unknown here, so the bar says "default" rather
+ * than inventing a number. */
+function nivelDeMotor(model: string): { ancho: number; texto: string; defecto: boolean } {
+  const alias = model.toLowerCase();
+  if (!alias) return { ancho: 0.5, texto: 'default', defecto: true };
+  for (const [clave, ancho] of [
+    ['fable', 1],
+    ['opus', 0.8],
+    ['sonnet', 0.55],
+    ['haiku', 0.35],
+  ] as const) {
+    if (alias.includes(clave)) return { ancho, texto: alias, defecto: false };
+  }
+  return { ancho: 0.6, texto: alias, defecto: false };
+}
+
+const NIVEL_ESFUERZO: Record<string, number> = { low: 1, medium: 2, high: 3, xhigh: 4, max: 5 };
+const MODELOS = ['haiku', 'sonnet', 'opus', 'fable'];
+
+/** `<option>`s from known values plus the current one when it is off the list:
+ * a card key must never be held hostage by a curated dropdown. */
+function opciones(valores: string[], actual: string): string {
+  return valores
+    .concat(actual && !valores.includes(actual) ? [actual] : [])
+    .map(
+      (v) =>
+        `<option value="${esc(v)}"${v === actual ? ' selected' : ''}>${esc(v || 'default')}</option>`,
+    )
+    .join('');
+}
+
+/** The one sheet-avatar guard: a data URI or nothing. */
+function caraRPG(uri?: string): string {
+  return uri?.startsWith('data:image/svg+xml;base64,')
+    ? `<img class="rpgCara" src="${esc(uri)}" alt="">`
+    : '';
+}
+
+function barra(ancho: number, clase = ''): string {
+  const pct = Math.round(Math.max(0, Math.min(1, ancho)) * 100);
+  return `<span class="barra${clase ? ' ' + clase : ''}"><span class="llena" style="width:${pct}%"></span></span>`;
+}
+
+VISTAS.gente = () => {
+  const mia = E.tarjetas.find((t) => t.user === E.yo);
+  const agentes = E.agents ?? [];
+
+  const fichaDe = (a: FichaAgente) => {
+    const motor = nivelDeMotor(a.model);
+    const esfuerzo = NIVEL_ESFUERZO[a.effort] ?? 0;
+    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';
+    // "custom…" keeps the curated lineup from ever holding the card hostage:
+    // the alias is resolved by the CLI at launch, not by this list.
+    const opcionesModelo =
+      opciones([''].concat(MODELOS), a.model) + '<option value="__otro__">custom…</option>';
+    const opcionesEsfuerzo = opciones([''].concat(Object.keys(NIVEL_ESFUERZO)), a.effort);
+    const opcionesRuntime = opciones(['claude', 'codex', 'opencode', 'kimi'], a.runtime);
+    const montajes = a.mounts ?? [];
+    return `
+      <div class="fichaRPG">
+        <div class="rpgCab">${caraRPG(a.avatar)}
+          <div><h3>${esc(a.name)}</h3>
+          <span class="rpgTags"><span class="kindChip ${esc(a.kind)}">${esc(a.kind)}</span>
+          <span class="rpgRol">${esc(a.role)}</span>
+          <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>
+            <button class="rpgMini rpgIns" type="button" data-agente="${esc(a.slug)}"
+              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>
+          </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"'}>
+            ${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"'}>
+            ${opcionesEsfuerzo}</select></div>
+        <div class="rpgFila"><label>provider</label>
+          <span class="rpgDato"><span class="cliDot ${
+            a.cli.connected ? 'on' : a.cli.installed ? 'idle' : 'off'
+          }" title="${esc(
+            a.cli.connected
+              ? 'connected: this agent’s window is alive right now'
+              : a.cli.installed
+                ? 'installed on this machine, not in use by this agent'
+                : `${a.cli.binary} is not installed`,
+          )}"></span>${esc(
+            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>
+          <select class="rpgSel" data-agente="${esc(a.slug)}" data-campo="runtime">
+            ${opcionesRuntime}</select></div>
+        <div class="rpgSkills"><label>works on · ${montajes.length}</label>
+          ${
+            montajes.length
+              ? montajes
+                  .map(
+                    (m) =>
+                      `<code class="mono" title="${esc(m.target)}">${esc(m.label)}${
+                        m.fixed
+                          ? ''
+                          : `<button class="rpgQuitar rpgDesmonta" type="button"
+                              data-agente="${esc(a.slug)}" data-mount="${esc(m.label)}"
+                              title="Stop this agent working on ${esc(m.target)}">×</button>`
+                      }</code>`,
+                  )
+                  .join(' ')
+              : '<span class="rpgDato">nothing mounted yet</span>'
+          }
+          ${
+            a.legacy
+              ? '<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>
+        <div class="rpgFila"><label>growth</label>
+          ${barra(crecido)}
+          <span class="rpgDato">${g.floors | 0} floors · ${g.bricks | 0} bricks · ${g.activity30 | 0}/30d</span></div>
+        <div class="rpgSkills"><label>skills · ${skills.length}</label>
+          ${
+            skills.length
+              ? skills
+                  .map(
+                    (s) =>
+                      `<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>`
+                          : ''
+                      }</code>`,
+                  )
+                  .join(' ')
+              : '<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">
+            + zip<input type="file" accept=".zip" data-agente="${esc(a.slug)}"></label></div>
+      </div>`;
+  };
+
+  q('#lienzo').innerHTML = `<div><span class="sub">agents &amp; skills</span>
+    <h1 style="margin-top:6px">One seat, the agents behind it</h1>
+    <p class="prosa" style="margin-top:8px">A city is its agents, and each one 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. Every number is real: growth
+    from what the agent actually produced, skills from live read-only
+    recognition. Changes persist to the card and apply the next time the session
+    opens.</p>
+    <button class="rpgAlta" type="button" id="altaAgente">+ Add an agent</button></div>
+    <div class="fichasRPG">
+      <div class="fichaRPG rpgSeat">
+        <div class="rpgCab">${caraRPG(E.avatars?.['seat'])}
+          <div><h3>seat</h3>
+          <span class="rpgTags"><span class="kindChip coordinator">chair</span>
+          <span class="rpgRol">${esc(mia?.role ?? 'not configured')}</span></span></div>
+        </div>
+        <div class="rpgFila"><span class="rpgDato">${esc(E.address)}</span></div>
+        <div class="rpgFila"><span class="rpgDato">${esc(mia?.objetivo?.title ?? 'No goal yet')}</span></div>
+      </div>
+      ${agentes.map(fichaDe).join('')}
+    </div>`;
+
+  // Engine changes: one POST, the sheet re-renders from the server's answer.
+  // One save round-trip for every sheet edit: POST, refresh the sheet from the
+  // server's answer, keep the roster's face in sync, repaint.
+  const guardaAgente = async (carga: Record<string, string>, mensaje: string) => {
+    let r: { ok?: boolean; agent?: FichaAgente; error?: string };
+    try {
+      r = await api('/api/agente', { method: 'POST', body: JSON.stringify(carga) });
+    } catch (e) {
+      toast(String(e), true);
+      pinta(); // the failed edit must not stay on screen looking saved
+      return;
+    }
+    if (!r.ok || !r.agent) {
+      toast(r.error || 'Could not save', true);
+      // Repaint from the untouched state: a select left showing "custom…"
+      // never fires another change event for the same choice.
+      pinta();
+      return;
+    }
+    E.agents = (E.agents ?? []).map((x) => (x.slug === r.agent!.slug ? r.agent! : x));
+    if (E.avatars) E.avatars[r.agent.name] = r.agent.avatar;
+    toast(mensaje);
+    pinta();
+  };
+
+  todos<HTMLSelectElement>('.rpgSel').forEach((sel) => {
+    sel.onchange = async () => {
+      let valor = sel.value;
+      if (valor === '__otro__') {
+        // The CLI resolves any alias at launch; the prompt just has to be an
+        // alias shape, and the server refuses anything that is not.
+        const propio = window.prompt('Model alias (resolved by the CLI at launch):', '');
+        if (propio === null) {
+          pinta();
+          return;
+        }
+        valor = propio.trim().toLowerCase();
+      }
+      await guardaAgente(
+        { agent: sel.dataset.agente ?? '', [sel.dataset.campo ?? 'model']: valor },
+        'Saved — applies next session',
+      );
+    };
+  });
+
+  // The dice: one reroll, one new deterministic look, persisted on the card.
+  todos<HTMLButtonElement>('.rpgDado').forEach((boton) => {
+    boton.onclick = () =>
+      guardaAgente(
+        { agent: boton.dataset.agente ?? '', avatar: Math.random().toString(36).slice(2, 8) },
+        'New look — same identity, everywhere, forever',
+      );
+  });
+
+  // The test button: the engine runs for real and answers for itself.
+  todos<HTMLButtonElement>('.rpgTest').forEach((boton) => {
+    boton.onclick = async () => {
+      boton.disabled = true;
+      try {
+        const r = await api<{
+          ok?: boolean;
+          binary?: string;
+          version?: string;
+          detail?: string;
+          error?: string;
+        }>('/api/motor', {
+          method: 'POST',
+          body: JSON.stringify({ agent: boton.dataset.agente ?? '' }),
+        });
+        if (r.error) {
+          toast(r.error, true);
+          return;
+        }
+        const partes = [r.version, r.detail].filter(Boolean).join(' · ');
+        toast(
+          r.ok ? `${r.binary} works — ${partes}` : `${r.binary}: ${r.detail || 'failed'}`,
+          !r.ok,
+        );
+      } catch (e) {
+        toast(String(e), true);
+      } finally {
+        // Not on the success line: a dropped request must not leave the
+        // button greyed out until the whole view re-renders.
+        boton.disabled = false;
+      }
+    };
+  });
+
+  // Removing a skill: only ones living in the agent's own `.claude/skills/` —
+  // a skill committed elsewhere in a repo is the repo's property, no × shown.
+  todos<HTMLButtonElement>('.rpgQuitar').forEach((boton) => {
+    boton.onclick = async () => {
+      const nombre = boton.dataset.skill ?? '';
+      if (!window.confirm(`Remove the skill ${nombre} from this agent's home?`)) return;
+      const r = await api<{ ok?: boolean; error?: string }>('/api/skill', {
+        method: 'POST',
+        body: JSON.stringify({ agent: boton.dataset.agente ?? '', remove: nombre }),
+      });
+      if (!r.ok) {
+        toast(r.error || 'Could not remove', true);
+        return;
+      }
+      toast(`Skill ${nombre} removed`);
+      void refresca();
+    };
+  });
+
+  // Adding an agent from the web: the roster the wizard builds question by
+  // question, reachable by somebody who never opens a terminal.
+  const alta = document.getElementById('altaAgente');
+  if (alta)
+    alta.onclick = async () => {
+      const nombre = window.prompt("The agent's name:", '');
+      if (nombre === null || !nombre.trim()) return;
+      const clase =
+        window.prompt('What kind of work does it do? code, knowledge or coordinator', 'code') ?? '';
+      if (!clase.trim()) return;
+      const rol = window.prompt('Its role (its specialty, not authority):', 'blank') ?? '';
+      if (!rol.trim()) return;
+      try {
+        const r = await api<{ ok?: boolean; error?: string }>('/api/agentes', {
+          method: 'POST',
+          body: JSON.stringify({ name: nombre.trim(), kind: clase.trim(), role: rol.trim() }),
+        });
+        if (!r.ok) {
+          toast(r.error || 'Could not add the agent', true);
+          return;
+        }
+        toast(`${nombre.trim()} joined this city — give it something to work on`);
+        void refresca();
+      } catch (e) {
+        toast(String(e), true);
+      }
+    };
+
+  // Mounts: what an agent works on, added and removed where it is read.
+  const montaje = async (carga: Record<string, string>, hecho: string) => {
+    try {
+      const r = await api<{ ok?: boolean; error?: string }>('/api/montaje', {
+        method: 'POST',
+        body: JSON.stringify(carga),
+      });
+      if (!r.ok) {
+        toast(r.error || 'Could not change the mounts', true);
+        return;
+      }
+      toast(hecho);
+      void refresca();
+    } catch (e) {
+      toast(String(e), true);
+    }
+  };
+  todos<HTMLButtonElement>('.rpgMonta').forEach((boton) => {
+    boton.onclick = () => {
+      const ruta = window.prompt('A repo, a worktree or a folder of documents:', '~/');
+      if (ruta === null || !ruta.trim()) return;
+      void montaje({ agent: boton.dataset.agente ?? '', add: ruta.trim() }, 'Mounted');
+    };
+  });
+  todos<HTMLButtonElement>('.rpgDesmonta').forEach((boton) => {
+    boton.onclick = () => {
+      const etiqueta = boton.dataset.mount ?? '';
+      if (!window.confirm(`Stop this agent working on ${etiqueta}?`)) 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`,
+      );
+    };
+  });
+
+  // The instruction editors: one click, the modal opens on that agent's file.
+  todos<HTMLButtonElement>('.rpgIns').forEach((boton) => {
+    boton.onclick = () =>
+      void abreInstrucciones(boton.dataset.agente ?? '', boton.dataset.file ?? '');
+  });
+
+  // Installing a skill: the picked zip travels as base64, like claude.ai's own
+  // upload. The name only matters when the zip has no single top folder.
+  todos<HTMLInputElement>('.rpgSubir input').forEach((entrada) => {
+    entrada.onchange = async () => {
+      const archivo = entrada.files?.[0];
+      if (!archivo) return;
+      entrada.disabled = true;
+      try {
+        const zip = await aBase64(archivo);
+        const nombre = archivo.name
+          .replace(/\.zip$/i, '')
+          .toLowerCase()
+          .replace(/[^a-z0-9-]+/g, '-')
+          .replace(/^-+|-+$/g, '');
+        const r = await api<{ ok?: boolean; skill?: string; error?: string }>('/api/skill', {
+          method: 'POST',
+          body: JSON.stringify({ agent: entrada.dataset.agente ?? '', name: nombre, zip }),
+        });
+        if (!r.ok) {
+          toast(r.error || 'Could not install', true);
+          return;
+        }
+        toast(`Skill ${r.skill} installed — the Claude runtime reads it next session`);
+        void refresca();
+      } catch (e) {
+        toast(String(e), true);
+      } finally {
+        entrada.disabled = false;
+        entrada.value = '';
+      }
+    };
+  });
+};
+
+function aBase64(archivo: File): Promise<string> {
+  // The browser's own encoder, off a data URL: native and allocation-friendly,
+  // where hand-chunked String.fromCharCode reallocated megabytes on the way.
+  return new Promise((listo, falla) => {
+    const lector = new FileReader();
+    lector.onerror = () => falla(lector.error);
+    lector.onload = () => listo(String(lector.result).split(',', 2)[1] ?? '');
+    lector.readAsDataURL(archivo);
+  });
+}
+
+/** The instruction editor: one agent, one file, one honest label saying which
+ * engine actually reads it. Saved atomically into the agent's own home. */
+let editorAbierto: { agent: string; file: string } | null = null;
+
+async function abreInstrucciones(agente: string, archivo: string): Promise<void> {
+  const r = await api<{
+    exists?: boolean;
+    content?: string;
+    home?: string;
+    reader?: string;
+    error?: string;
+  }>(`/api/instrucciones?agent=${encodeURIComponent(agente)}&file=${encodeURIComponent(archivo)}`);
+  if (r.error) {
+    toast(r.error, true);
+    return;
+  }
+  editorAbierto = { agent: agente, file: archivo };
+  q<HTMLElement>('#edTitulo').textContent = `${agente} · ${archivo}`;
+  q<HTMLElement>('#edLector').textContent =
+    `read by ${r.reader ?? '?'}${r.exists ? '' : ' · new file'}`;
+  q<HTMLElement>('#edRuta').textContent = r.home ? `${r.home}/${archivo}` : '';
+  q<HTMLTextAreaElement>('#edTexto').value = r.content ?? '';
+  q<HTMLElement>('#editorIns').hidden = false;
+  q<HTMLTextAreaElement>('#edTexto').focus();
+}
+
+document.getElementById('edCerrar')?.addEventListener('click', () => {
+  q<HTMLElement>('#editorIns').hidden = true;
+  editorAbierto = null;
+});
+document.getElementById('edGuardar')?.addEventListener('click', async () => {
+  if (!editorAbierto) return;
+  const r = await api<{ ok?: boolean; error?: string }>('/api/instrucciones', {
+    method: 'POST',
+    body: JSON.stringify({ ...editorAbierto, content: q<HTMLTextAreaElement>('#edTexto').value }),
+  });
+  if (!r.ok) {
+    toast(r.error || 'Could not save', true);
+    return;
+  }
+  toast('Saved');
+  q<HTMLElement>('#editorIns').hidden = true;
+  editorAbierto = null;
+});
+
+// ── shared ──────────────────────────────────────────────────────────────────
+function enlaza(): void {
+  todos<HTMLButtonElement>('[data-copia]').forEach((b) => {
+    b.onclick = async () => {
+      try {
+        await navigator.clipboard.writeText(b.dataset.copia ?? '');
+        toast('Copied');
+      } catch {
+        toast('Could not copy — select it by hand', true);
+      }
+    };
+  });
+  todos<HTMLButtonElement>('[data-ir]').forEach((b) => {
+    b.onclick = () => {
+      SECCION = b.dataset.ir ?? 'mapa';
+      pinta();
+    };
+  });
+}
+
+/**
+ * The divider between the map and the live rail: grab it and the rail follows
+ * the mouse. The width persists per browser — a rail you resized yesterday is
+ * still that size today — and a double-click gives the default back. Dragging
+ * disables the map iframe's pointer events for the duration, or the iframe
+ * swallows the drag the moment the cursor crosses it.
+ */
+function arrastreDelRail(): void {
+  const app = document.getElementById('app');
+  const asa = document.getElementById('liveResize');
+  const rail = document.getElementById('livePanel');
+  if (!app || !asa || !rail) return;
+  const CLAVE = 'hall-live-width';
+  const aplica = (px: number | null) => {
+    if (px === null) app.style.removeProperty('--live-ancho');
+    else app.style.setProperty('--live-ancho', `${Math.round(px)}px`);
+  };
+  // Never narrower than the cards stay readable, never wider than the map
+  // stops being a map.
+  const tope = (px: number) => Math.max(340, Math.min(px, Math.max(420, window.innerWidth * 0.6)));
+  try {
+    const guardado = Number(localStorage.getItem(CLAVE));
+    if (guardado > 0) aplica(tope(guardado));
+  } catch {
+    // A browser with no storage gets the default width, which is fine.
+  }
+
+  asa.addEventListener('pointerdown', (e: PointerEvent) => {
+    e.preventDefault();
+    const desdeX = e.clientX;
+    const desdeAncho = rail.getBoundingClientRect().width;
+    app.classList.add('liveResizing');
+    asa.setPointerCapture(e.pointerId);
+    const mueve = (ev: PointerEvent) => aplica(tope(desdeAncho + (desdeX - ev.clientX)));
+    const suelta = () => {
+      app.classList.remove('liveResizing');
+      asa.removeEventListener('pointermove', mueve);
+      asa.removeEventListener('pointerup', suelta);
+      asa.removeEventListener('pointercancel', suelta);
+      try {
+        localStorage.setItem(CLAVE, String(Math.round(rail.getBoundingClientRect().width)));
+      } catch {
+        // Nothing to persist to; the drag still worked for this session.
+      }
+    };
+    asa.addEventListener('pointermove', mueve);
+    asa.addEventListener('pointerup', suelta);
+    asa.addEventListener('pointercancel', suelta);
+  });
+  asa.addEventListener('dblclick', () => {
+    aplica(null);
+    try {
+      localStorage.removeItem(CLAVE);
+    } catch {
+      // Already gone.
+    }
+  });
+}
+
+/** The map can ask for a section: a click on the town hall opens the
+ * committee, a click on a gate opens the roads. Only from the map's own frame
+ * and only to sections that exist — a message is a request, not a capability. */
+window.addEventListener('message', (message) => {
+  if (!esNavDeMapa(message.data)) return;
+  const frame = document.querySelector<HTMLIFrameElement>('#cityMapFrame');
+  if (!frame || message.source !== frame.contentWindow) return;
+  if (message.origin !== new URL(frame.src, location.href).origin) return;
+  const view = message.data.view;
+  if (view !== 'committee' && view !== 'red') return;
+  SECCION = view;
+  pinta();
+});
+
+/**
+ * Night or day. The city's own light is night — an isometric map at 3am — so
+ * that stays the default; day is the palette of agentscity.net, so the tool on
+ * your machine and the site are visibly one product.
+ *
+ * Three states, not two: no stored choice means "follow this machine", and only
+ * an explicit click stamps the root element and outranks the system setting.
+ * The map lives in an iframe of its own, so it is told as well — a light Hall
+ * around a night map would read as two products in one window.
+ */
+/** Which skin is showing right now: the stamped choice, or this machine's. */
+function temaActual(): 'light' | 'dark' {
+  const elegido = document.documentElement.getAttribute('data-tema');
+  if (elegido) return elegido === 'claro' ? 'light' : 'dark';
+  return window.matchMedia?.('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+
+function tema(): void {
+  const boton = document.getElementById('temaBoton');
+  const guardado = ((): string => {
+    try {
+      return localStorage.getItem('hall-tema') ?? '';
+    } catch {
+      return ''; // a browser with site data blocked still gets a working page
+    }
+  })();
+  const claroDelSistema = window.matchMedia?.('(prefers-color-scheme: light)').matches ?? false;
+
+  const pon = (elegido: string): void => {
+    const raiz = document.documentElement;
+    if (elegido) raiz.setAttribute('data-tema', elegido);
+    else raiz.removeAttribute('data-tema');
+    const claro = elegido ? elegido === 'claro' : claroDelSistema;
+    if (boton) boton.textContent = claro ? '☀ Day' : '☾ Night';
+    const frame = document.querySelector<HTMLIFrameElement>('#cityMapFrame');
+    frame?.contentWindow?.postMessage(
+      { type: 'agents-city-map-theme/1', theme: claro ? 'light' : 'dark' },
+      new URL(frame.src, location.href).origin,
+    );
+  };
+
+  pon(guardado);
+  if (boton)
+    boton.onclick = () => {
+      const claroAhora = document.documentElement.getAttribute('data-tema')
+        ? document.documentElement.getAttribute('data-tema') === 'claro'
+        : claroDelSistema;
+      const elegido = claroAhora ? 'oscuro' : 'claro';
+      try {
+        localStorage.setItem('hall-tema', elegido);
+      } catch {
+        /* not being able to remember it is not a reason to refuse the switch */
+      }
+      pon(elegido);
+    };
+}
+
+arrastreDelRail();
+tema();
+void refresca();
+
+export {};