@thebattlearena/corner 0.9.0 → 0.10.0

package/ring/skills/play-by-play/templates/endpoints-view.js

@@ -0,0 +1,1153 @@
+// «Endpoints del contrato», drawn in the chronicle page from the spec files `play-by-play.mjs embed`
+// wrote into it (<script type="application/json" id="ring-spec-<pr>">). Parses the YAML with
+// js-yaml, follows `$ref` across files and shows every operation added, changed or removed
+// against the base as a card (method chip, path, summary, status), filterable, with its scopes,
+// parameters, body and responses as compact tables when unfolded.
+//
+// The judge gives each added or changed operation a verdict, «Se aprueba» or «Se mejora» (a
+// required comment, images), saved in the page's db (collection `veredictos`, doc
+// `pr<n>-<METHOD>-<path>-<spec>`) with the fingerprint (`hash`) of the operation's contract: its
+// block of the spec with every schema it expands. A verdict counts only while that fingerprint is
+// the current one, so a rewritten contract asks again. The judge's view also saves the contract's
+// state (`pr<n>-contrato`: every operation's fingerprint and the fingerprint of all the embedded
+// files) so the referee can tell, without parsing YAML, which verdicts are current
+// (`judges-card.mjs page-verdicts`). «Pendientes del contrato» lists the current «se mejora»; the
+// weigh-in's scale (`[data-ring-scale="<pr>"]`) reads «N de M aprobados» until every operation is
+// approved and the judge's approve-contract is on record (`data-approved="true"`).
+import yaml from 'https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.mjs';
+
+// The page's bus (see interview-form.js): each board registers its items and how to judge them.
+const ring = (window.ringPage ??= {
+  questions: new Map(),
+  boards: new Map(),
+  scales: {},
+  changed() {
+    document.dispatchEvent(new CustomEvent('ring:change'));
+  },
+});
+
+const METHODS = [
+  'get',
+  'put',
+  'post',
+  'delete',
+  'patch',
+  'options',
+  'head',
+  'trace',
+];
+const MAX_DEPTH = 7;
+const STATUS = { added: 'nueva', changed: 'cambia', removed: 'se quita' };
+
+const el = (tag, attrs = {}, ...children) => {
+  const node = document.createElement(tag);
+  Object.entries(attrs).forEach(([key, value]) => {
+    if (value === undefined || value === null || value === false) return;
+    if (key === 'text') return void (node.textContent = value);
+    if (key.startsWith('on'))
+      return void node.addEventListener(key.slice(2), value);
+    node.setAttribute(key, value === true ? '' : value);
+  });
+  children
+    .flat(Infinity)
+    .filter((child) => child !== null && child !== undefined && child !== false)
+    .forEach((child) => node.append(child));
+  return node;
+};
+
+const dirOf = (path) => path.split('/').slice(0, -1).join('/');
+const normalize = (path) => {
+  const out = [];
+  path.split('/').forEach((part) => {
+    if (part === '..') return void out.pop();
+    if (part && part !== '.') out.push(part);
+  });
+  return out.join('/');
+};
+
+/** One side (base or head) of a spec root: parsed files and `$ref` resolution across them. */
+function side(files, key) {
+  const parsed = new Map();
+  const doc = (path) => {
+    if (parsed.has(path)) return parsed.get(path);
+    const entry = files[path];
+    const text = entry ? (entry.same ? entry.base : entry[key]) : null;
+    let value = null;
+    try {
+      value = text == null ? null : yaml.load(text);
+    } catch {
+      value = null;
+    }
+    parsed.set(path, value);
+    return value;
+  };
+  const pointer = (value, hash) =>
+    hash
+      .split('/')
+      .filter(Boolean)
+      .map((part) =>
+        decodeURIComponent(part.replace(/~1/g, '/').replace(/~0/g, '~')),
+      )
+      .reduce((node, part) => (node == null ? null : node[part]), value);
+  const target = (ref, file) => {
+    const [filePart, hash = ''] = String(ref).split('#');
+    const path = filePart ? normalize(`${dirOf(file)}/${filePart}`) : file;
+    return {
+      node: pointer(doc(path), hash),
+      file: path,
+      name: hash.split('/').pop() || filePart,
+    };
+  };
+  const deref = (node, file, seen = new Set(), depth = 0) => {
+    if (Array.isArray(node))
+      return node.map((item) => deref(item, file, seen, depth));
+    if (!node || typeof node !== 'object') return node;
+    if (typeof node.$ref === 'string') {
+      const key = `${file}#${node.$ref}`;
+      const found = target(node.$ref, file);
+      if (seen.has(key) || depth > 40 || found.node == null)
+        return { $refName: found.name };
+      const resolved = deref(
+        found.node,
+        found.file,
+        new Set([...seen, key]),
+        depth + 1,
+      );
+      return resolved &&
+        typeof resolved === 'object' &&
+        !Array.isArray(resolved)
+        ? { ...resolved, $refName: found.name }
+        : resolved;
+    }
+    return Object.fromEntries(
+      Object.entries(node).map(([k, v]) => [
+        k,
+        deref(v, file, seen, depth + 1),
+      ]),
+    );
+  };
+  const operations = (root) => {
+    const spec = doc(root);
+    const out = {};
+    Object.entries(spec?.paths ?? {}).forEach(([path, raw]) => {
+      const item = deref(raw, root);
+      METHODS.filter((method) => item?.[method]).forEach((method) => {
+        out[`${method.toUpperCase()} ${path}`] = {
+          ...item[method],
+          parameters: [
+            ...(item.parameters ?? []),
+            ...(item[method].parameters ?? []),
+          ],
+        };
+      });
+    });
+    return { out, security: spec?.security ?? null };
+  };
+  return { operations };
+}
+
+/** Keys sorted at every level, so the same contract always gives the same fingerprint. */
+const stable = (value) => {
+  if (Array.isArray(value)) return `[${value.map(stable).join(',')}]`;
+  if (value && typeof value === 'object')
+    return `{${Object.keys(value)
+      .sort()
+      .map((key) => `${JSON.stringify(key)}:${stable(value[key])}`)
+      .join(',')}}`;
+  return JSON.stringify(value ?? null);
+};
+const sha256 = async (text) => {
+  const digest = await crypto.subtle.digest(
+    'SHA-256',
+    new TextEncoder().encode(text),
+  );
+  return [...new Uint8Array(digest)]
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('');
+};
+const slug = (text) =>
+  String(text)
+    .replace(/[{}]/g, '')
+    .replace(/[^A-Za-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '');
+const fmt = (iso) => {
+  try {
+    return new Date(iso).toLocaleString('es-MX', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return '';
+  }
+};
+
+const typeOf = (schema) => {
+  if (!schema || typeof schema !== 'object') return '';
+  const types = [].concat(schema.type ?? []);
+  const base = types.filter((type) => type !== 'null').join(' | ');
+  const name = base === 'array' ? `${typeOf(schema.items) || 'any'}[]` : base;
+  return `${name || schema.$refName || (schema.oneOf ? 'oneOf' : schema.anyOf ? 'anyOf' : schema.allOf ? 'allOf' : '')}${schema.format ? ` (${schema.format})` : ''}`;
+};
+const isNullable = (schema) =>
+  Boolean(schema) &&
+  (schema.nullable === true || [].concat(schema.type ?? []).includes('null'));
+
+/** A schema flattened into rows: field (indented by depth), type, nullability, required, values. */
+function schemaRows(schema, depth = 0, rows = [], prefix = '') {
+  if (!schema || typeof schema !== 'object' || depth > MAX_DEPTH) return rows;
+  ['allOf', 'oneOf', 'anyOf']
+    .filter((key) => Array.isArray(schema[key]))
+    .forEach((key) =>
+      schema[key].forEach((part, index) => {
+        if (key !== 'allOf')
+          rows.push({
+            depth,
+            name: `${prefix}${key}[${index}]`,
+            schema: part,
+            combo: true,
+          });
+        schemaRows(part, key === 'allOf' ? depth : depth + 1, rows, prefix);
+      }),
+    );
+  const target = [].concat(schema.type ?? []).includes('array')
+    ? schema.items
+    : schema;
+  const required = new Set(target?.required ?? []);
+  Object.entries(target?.properties ?? {}).forEach(([name, field]) => {
+    rows.push({
+      depth,
+      name,
+      schema: field ?? {},
+      required: required.has(name),
+    });
+    const inner = field?.items ?? field;
+    if (inner?.properties || inner?.allOf || inner?.oneOf || inner?.anyOf)
+      schemaRows(field, depth + 1, rows);
+  });
+  return rows;
+}
+
+function schemaTable(schema) {
+  if (!schema) return null;
+  const rows = schemaRows(schema);
+  if (!rows.length)
+    return el(
+      'p',
+      { class: 'muted' },
+      el('code', { text: typeOf(schema) || 'sin esquema' }),
+      isNullable(schema) ? ' · nulo' : '',
+    );
+  return el(
+    'div',
+    { class: 'tbl schema-tbl' },
+    el(
+      'table',
+      {},
+      el(
+        'thead',
+        {},
+        el(
+          'tr',
+          {},
+          ['Campo', 'Tipo', 'Nulo', 'Req.', 'Valores · descripción'].map(
+            (text) => el('th', { text }),
+          ),
+        ),
+      ),
+      el(
+        'tbody',
+        {},
+        rows.map((row) => {
+          const values = row.schema.enum ?? row.schema.items?.enum;
+          return el(
+            'tr',
+            {},
+            el(
+              'td',
+              { style: `padding-left:${12 + row.depth * 16}px` },
+              el('code', { text: row.name }),
+            ),
+            el('td', {}, el('code', { text: typeOf(row.schema) })),
+            el('td', { text: isNullable(row.schema) ? 'sí' : '' }),
+            el('td', {
+              class: row.required ? 'req' : '',
+              text: row.required ? 'sí' : '',
+            }),
+            el(
+              'td',
+              {},
+              values
+                ? el('code', { text: values.map(String).join(' | ') })
+                : null,
+              values && row.schema.description ? ' · ' : '',
+              row.schema.description ?? '',
+            ),
+          );
+        }),
+      ),
+    ),
+  );
+}
+
+const bodySchema = (content) => {
+  const [type, media] = Object.entries(content ?? {})[0] ?? [];
+  return media ? { type, schema: media.schema } : null;
+};
+
+function operationBody(operation, security) {
+  const scopes = (operation.security ?? security ?? []).flatMap((entry) =>
+    Object.entries(entry).map(
+      ([name, list]) => `${name}${list?.length ? `: ${list.join(', ')}` : ''}`,
+    ),
+  );
+  const body = el('div', { class: 'op-body' });
+  if (operation.description)
+    body.append(el('p', { class: 'desc', text: operation.description }));
+  body.append(
+    el(
+      'p',
+      {},
+      el('b', { text: 'Scopes: ' }),
+      scopes.length ? scopes.join(' · ') : 'ninguno declarado',
+    ),
+  );
+  if (operation.parameters?.length) {
+    body.append(el('h5', { text: 'Parámetros' }));
+    const label = (param) =>
+      `${param.name ?? param.$refName ?? '?'} · ${param.in ?? ''}`;
+    body.append(
+      schemaTable({
+        type: 'object',
+        required: operation.parameters
+          .filter((param) => param.required)
+          .map(label),
+        properties: Object.fromEntries(
+          operation.parameters.map((param) => [
+            label(param),
+            {
+              ...(param.schema ?? {}),
+              description: param.description ?? param.schema?.description,
+            },
+          ]),
+        ),
+      }),
+    );
+  }
+  const request = bodySchema(operation.requestBody?.content);
+  if (request) {
+    body.append(
+      el('h5', {
+        text: `Cuerpo · ${request.type}${operation.requestBody.required ? ' · requerido' : ''}`,
+      }),
+    );
+    body.append(schemaTable(request.schema));
+  }
+  Object.entries(operation.responses ?? {}).forEach(([code, response]) => {
+    const media = bodySchema(response?.content);
+    body.append(
+      el(
+        'h5',
+        { class: /^[45]|default/i.test(code) ? 'err' : '' },
+        `${code} · `,
+        response?.description ?? response?.$refName ?? '',
+      ),
+    );
+    if (media) body.append(schemaTable(media.schema));
+  });
+  return body;
+}
+
+const waitClaude = () =>
+  new Promise((resolve) => {
+    let waited = 0;
+    const tick = () => {
+      if (window.claude && window.claude.use) return resolve(window.claude);
+      if ((waited += 200) > 10000) return resolve(null);
+      setTimeout(tick, 200);
+    };
+    tick();
+  });
+const capabilities = (async () => {
+  const claude = await waitClaude();
+  if (!claude) return { db: null, user: null, assets: null, canEdit: false };
+  const db = await claude.use('db');
+  const user = await claude.use('user');
+  const assets = await claude.use('assets');
+  const canEdit = user ? await user.canEdit() : false;
+  return { db, user, assets, canEdit };
+})();
+
+/** Saves the judge's verdict on one operation or route; throws a message the form can show. */
+async function writeVerdict(op, pr, verdict, comment = '', attachments = []) {
+  const caps = await capabilities;
+  if (!caps.db || !caps.canEdit)
+    throw new Error('Sólo el juez (quien edita la página) da el veredicto');
+  if (verdict === 'improve' && !String(comment).trim())
+    throw new Error('Escribe qué hay que mejorar');
+  try {
+    await caps.db
+      .collection('veredictos')
+      .doc(op.key)
+      .set({
+        kind: 'verdict',
+        key: op.key,
+        pr,
+        method: op.method,
+        path: op.path,
+        specFile: op.specFile,
+        hash: op.hash,
+        verdict,
+        comment: verdict === 'improve' ? String(comment).trim() : '',
+        attachments: verdict === 'improve' ? attachments.slice() : [],
+        at: new Date().toISOString(),
+        by: caps.user ? await caps.user.id() : null,
+      });
+  } catch (error) {
+    throw new Error(`No se guardó (${error.code || 'error'})`);
+  }
+}
+
+/** The verdict box of one card: its state and, for the judge, the two buttons and the form. */
+function verdictBox(op, ctx) {
+  const box = el('div', { class: 'verdict' });
+  const state = el('p', { class: 'verdict-state' });
+  const form = el('div', { class: 'ans-form improve', hidden: true });
+  const comment = el('textarea', {
+    placeholder: '¿Qué hay que mejorar? (obligatorio)',
+  });
+  const file = el('input', {
+    type: 'file',
+    accept: 'image/*',
+    multiple: true,
+    hidden: true,
+  });
+  const thumbs = el('div', { class: 'thumbs' });
+  const status = el('span', { class: 'status' });
+  const attached = [];
+  const save = async (verdict) => {
+    status.textContent = 'Guardando…';
+    try {
+      await writeVerdict(op, ctx.pr, verdict, comment.value, attached);
+      status.textContent = 'Guardado';
+      form.hidden = true;
+    } catch (error) {
+      status.textContent = error.message;
+    }
+  };
+  const addFiles = async (files) => {
+    const caps = await capabilities;
+    if (!caps.assets)
+      return void (status.textContent =
+        'Adjuntar sólo funciona para quien puede editar la página');
+    for (const picked of files) {
+      if (!picked.type.startsWith('image/')) continue;
+      status.textContent = `Subiendo ${picked.name}…`;
+      try {
+        const up = await caps.assets.upload(picked);
+        attached.push(up.id);
+        thumbs.append(el('img', { src: up.url, alt: picked.name }));
+        status.textContent = '';
+      } catch (error) {
+        status.textContent = `No se pudo subir ${picked.name} (${error.code || 'error'})`;
+      }
+    }
+  };
+  const drop = el('div', {
+    class: 'drop',
+    tabindex: '0',
+    text: 'Arrastra imágenes aquí o haz clic para adjuntar',
+    onclick: () => file.click(),
+    onkeydown: (event) => ['Enter', ' '].includes(event.key) && file.click(),
+    ondragover: (event) => {
+      event.preventDefault();
+      drop.classList.add('over');
+    },
+    ondragleave: () => drop.classList.remove('over'),
+    ondrop: (event) => {
+      event.preventDefault();
+      drop.classList.remove('over');
+      addFiles([...event.dataTransfer.files]);
+    },
+  });
+  file.addEventListener('change', () => addFiles([...file.files]));
+  form.append(
+    comment,
+    drop,
+    file,
+    thumbs,
+    el(
+      'div',
+      { class: 'row' },
+      el('button', {
+        type: 'button',
+        class: 'save',
+        text: 'Guardar «se mejora»',
+        onclick: () => save('improve'),
+      }),
+    ),
+  );
+  const buttons = el(
+    'div',
+    { class: 'verdict-buttons', hidden: true },
+    el('button', {
+      type: 'button',
+      class: 'approve',
+      text: 'Se aprueba',
+      onclick: () => save('approved'),
+    }),
+    el('button', {
+      type: 'button',
+      class: 'improve-btn',
+      text: 'Se mejora',
+      onclick: () => (form.hidden = !form.hidden),
+    }),
+    status,
+  );
+  box.append(state, buttons, form);
+  capabilities.then((caps) => (buttons.hidden = !(caps.db && caps.canEdit)));
+  const paint = (verdict) => {
+    state.textContent = '';
+    if (!verdict)
+      return void state.append(
+        el('span', { class: 'v none', text: 'Sin veredicto' }),
+      );
+    const current = verdict.hash === op.hash;
+    const label = verdict.verdict === 'approved' ? 'Se aprueba' : 'Se mejora';
+    state.append(
+      el('span', {
+        class: `v ${current ? verdict.verdict : 'stale'}`,
+        text: current ? label : `${label} · desactualizado`,
+      }),
+      ` Juez · ${fmt(verdict.at)}`,
+      verdict.comment ? ` — ${verdict.comment}` : '',
+    );
+    (verdict.attachments ?? []).forEach((id) =>
+      state.append(el('img', { src: `/_blob/${id}`, alt: 'Adjunto del juez' })),
+    );
+  };
+  paint(null);
+  return { box, paint };
+}
+
+/** The endpoints of a spec block as board items. */
+async function specItems(data) {
+  const items = [];
+  for (const { root, files } of data.roots) {
+    const base = side(files, 'base').operations(root);
+    const head = side(files, 'head').operations(root);
+    const status = (key) =>
+      !(key in base.out)
+        ? 'added'
+        : !(key in head.out)
+          ? 'removed'
+          : stable(base.out[key]) === stable(head.out[key])
+            ? null
+            : 'changed';
+    for (const key of [
+      ...new Set([...Object.keys(head.out), ...Object.keys(base.out)]),
+    ]) {
+      const kind = status(key);
+      if (!kind) continue;
+      const [method, path] = key.split(' ');
+      const operation = kind === 'removed' ? base.out[key] : head.out[key];
+      const security = (kind === 'removed' ? base : head).security;
+      items.push({
+        key: `pr${data.pr}-${method}-${slug(path)}-${slug(
+          root
+            .split('/')
+            .pop()
+            .replace(/\.[^.]+$/, ''),
+        )}`,
+        method,
+        chip: method,
+        chipClass: method.toLowerCase(),
+        path,
+        specFile: root,
+        tag: data.roots.length > 1 ? root.split('/').pop() : null,
+        summary: operation.summary ?? '',
+        status: kind,
+        body: () => operationBody(operation, security),
+        hash: (await sha256(stable(operation))).slice(0, 16),
+      });
+    }
+  }
+  return items;
+}
+
+const list = (title, values, code = true) =>
+  values.length
+    ? [
+        el('h5', { text: title }),
+        el(
+          'p',
+          {},
+          values.flatMap((value, index) => [
+            index ? ', ' : '',
+            code ? el('code', { text: value }) : value,
+          ]),
+        ),
+      ]
+    : [];
+
+/** A route's detail: what it reads from the URL, the files it reaches, what it calls in the back. */
+function routeBody(route, data) {
+  const body = el('div', { class: 'op-body' });
+  if (route.kind === 'global')
+    body.append(
+      el('p', { class: 'desc', text: 'Cambia para todas las rutas.' }),
+    );
+  if (route.sparringOnly)
+    body.append(
+      el('p', {
+        class: 'desc warn',
+        text: 'Es del sparring: no debería llegar a la entrega.',
+      }),
+    );
+  const lines = route.files.reduce(
+    (sum, file) => ({
+      added: sum.added + file.added,
+      deleted: sum.deleted + file.deleted,
+    }),
+    { added: 0, deleted: 0 },
+  );
+  body.append(
+    el(
+      'p',
+      {},
+      el('b', { text: 'Archivo: ' }),
+      el('code', { text: route.file }),
+      ` · ${route.files.length} archivo(s) que cambian, +${lines.added} / −${lines.deleted} líneas`,
+    ),
+  );
+  body.append(
+    ...list('Segmentos dinámicos', route.dynamic),
+    ...list(
+      'Query params',
+      route.params.map((name) => `?${name}=`),
+    ),
+  );
+  body.append(
+    ...list('Componentes que cambian', route.components),
+    ...list('Hooks que cambian', route.hooks),
+    ...list('Servicios que cambian', route.services),
+  );
+  body.append(
+    ...(route.calls.length
+      ? list('Llamadas al back', route.calls)
+      : [
+          el('h5', { text: 'Llamadas al back' }),
+          el('p', {
+            class: 'muted',
+            text: 'No se pudieron leer de estos archivos; ver los servicios.',
+          }),
+        ]),
+  );
+  if (data.previewUrl && route.kind === 'page' && route.status !== 'removed')
+    body.append(
+      el(
+        'p',
+        {},
+        el('a', {
+          href: `${data.previewUrl.replace(/\/$/, '')}${route.url.replace(/ \(layout\)$/, '')}`,
+          target: '_blank',
+          rel: 'noopener',
+          text: 'Abrir en el preview',
+        }),
+      ),
+    );
+  return body;
+}
+
+/** The routes of a frontend block as board items, and its navigation changes. */
+function routeItems(data) {
+  return data.routes.map((route) => ({
+    key: route.key,
+    method:
+      route.kind === 'api'
+        ? 'API ROUTE'
+        : route.kind === 'global'
+          ? 'GLOBAL'
+          : 'PÁGINA',
+    chip:
+      route.kind === 'api'
+        ? 'API ROUTE'
+        : route.kind === 'global'
+          ? 'GLOBAL'
+          : 'PÁGINA',
+    chipClass: `route-${route.kind}`,
+    path: route.url,
+    specFile: route.file,
+    tag: route.sparringOnly ? 'sparring' : null,
+    summary: route.params.length
+      ? route.params.map((name) => `?${name}=`).join(' ')
+      : '',
+    status: route.status,
+    body: () => routeBody(route, data),
+    hash: route.hash,
+  }));
+}
+
+// The weigh-in's scale counts every board of its bout (endpoints and routes).
+const scaleTotals = {};
+function updateScale(pr) {
+  const scale = document.querySelector(`[data-ring-scale="${pr}"]`);
+  if (!scale) return;
+  const boards = Object.values(scaleTotals[pr] ?? {});
+  const approved = boards.reduce((sum, board) => sum + board.approved, 0);
+  const total = boards.reduce((sum, board) => sum + board.total, 0);
+  const what = boards.map((board) => board.noun).join(' y ');
+  const judge = scale.dataset.approved === 'true';
+  const complete = total > 0 && approved === total;
+  scale.className = `scale ${complete && judge ? 'green' : 'red'}`;
+  scale.querySelector('b').textContent =
+    complete && judge ? 'Da el peso' : 'No da el peso';
+  scale.querySelector('span').textContent = complete
+    ? judge
+      ? `${approved} de ${total} aprobados (${what}) y el contrato aprobado por el juez.`
+      : `${approved} de ${total} aprobados (${what}); falta que el juez apruebe el contrato (approve-contract).`
+    : `${approved} de ${total} aprobados (${what}).`;
+  ring.scales[pr] = { approved, total, green: complete && judge, judge };
+  ring.changed();
+}
+
+/** A board of items with the judge's verdict on each: filters, progress, pending list, cards. */
+async function board(
+  container,
+  { pr, block, noun, sourcesHash, items, before = [] },
+) {
+  container.textContent = '';
+  const ctx = { pr };
+  const judged = items.filter((item) => item.status !== 'removed');
+  const verdicts = {};
+  let filter = 'all';
+  const progress = el(
+    'div',
+    { class: 'ep-progress' },
+    el('b'),
+    el('span'),
+    el('div', { class: 'bar' }, el('i')),
+  );
+  const pending = el('div', { class: 'ep-pending' });
+  const filters = [
+    ['all', 'Todas'],
+    ['added', 'Nuevas'],
+    ['changed', 'Cambian'],
+    ['removed', 'Se quitan'],
+    ['none', 'Sin veredicto'],
+    ['approved', 'Se aprueba'],
+    ['improve', 'Se mejora'],
+    ['stale', 'Desactualizadas'],
+  ];
+  const toolbar = el(
+    'div',
+    { class: 'ep-filters', role: 'group', 'aria-label': `Filtrar ${noun}` },
+    filters.map(([value, label]) =>
+      el('button', {
+        type: 'button',
+        'data-filter': value,
+        'aria-pressed': value === filter ? 'true' : 'false',
+        text: label,
+        onclick: () => {
+          filter = value;
+          toolbar
+            .querySelectorAll('button')
+            .forEach((button) =>
+              button.setAttribute(
+                'aria-pressed',
+                button.dataset.filter === value ? 'true' : 'false',
+              ),
+            );
+          refresh();
+        },
+      }),
+    ),
+  );
+  container.append(progress, pending, ...before, toolbar);
+  const verdictOf = (item) => {
+    const verdict = verdicts[item.key];
+    if (!verdict) return 'none';
+    return verdict.hash === item.hash ? verdict.verdict : 'stale';
+  };
+  const cards = items.map((item) => {
+    const verdict = item.status === 'removed' ? null : verdictBox(item, ctx);
+    const card = el(
+      'details',
+      { class: `op ${item.status}`, 'data-status': item.status, id: item.key },
+      el(
+        'summary',
+        {},
+        el('b', { class: `m ${item.chipClass}`, text: item.chip }),
+        el('code', { class: 'path', text: item.path }),
+        el('span', { class: 'sum', text: item.summary }),
+        item.tag ? el('span', { class: 'spec-tag', text: item.tag }) : null,
+        el('span', {
+          class: `badge ${item.status}`,
+          text: STATUS[item.status],
+        }),
+        verdict ? el('span', { class: 'vdot' }) : null,
+      ),
+      item.body(),
+      verdict?.box,
+    );
+    return { item, card, verdict };
+  });
+  cards.forEach(({ card }) => container.append(card));
+
+  function refresh() {
+    const count = (value) =>
+      judged.filter((item) => verdictOf(item) === value).length;
+    const approved = count('approved');
+    const total = judged.length;
+    progress.children[0].textContent = `${approved} de ${total} ${noun} ${noun === 'rutas' ? 'aprobadas' : 'aprobados'}`;
+    progress.children[1].textContent = ` · ${count('improve')} se mejora · ${count('stale')} desactualizadas · ${count('none')} sin veredicto`;
+    progress.querySelector('i').style.width =
+      `${total ? (approved / total) * 100 : 0}%`;
+    cards.forEach(({ item, card, verdict }) => {
+      const value = item.status === 'removed' ? 'removed' : verdictOf(item);
+      card.dataset.verdict = value;
+      card.hidden = !(
+        filter === 'all' ||
+        filter === item.status ||
+        filter === value
+      );
+      if (verdict) verdict.paint(verdicts[item.key] ?? null);
+    });
+    pending.textContent = '';
+    const improving = judged.filter((item) => verdictOf(item) === 'improve');
+    if (improving.length)
+      pending.append(
+        el('h4', { text: `Pendientes del contrato · ${improving.length}` }),
+        el(
+          'ul',
+          {},
+          improving.map((item) => {
+            const verdict = verdicts[item.key];
+            return el(
+              'li',
+              {},
+              el('b', { class: `m ${item.chipClass}`, text: item.chip }),
+              ' ',
+              el('code', { text: item.path }),
+              ` · ${fmt(verdict.at)} — ${verdict.comment}`,
+              (verdict.attachments ?? []).map((id) =>
+                el('img', { src: `/_blob/${id}`, alt: 'Adjunto del juez' }),
+              ),
+            );
+          }),
+        ),
+      );
+    scaleTotals[pr] = {
+      ...(scaleTotals[pr] ?? {}),
+      [block]: { approved, total, noun },
+    };
+    ring.boards.set(`${pr}-${block}`, {
+      pr,
+      block,
+      noun,
+      approved,
+      total,
+      items: judged.map((item) => ({
+        key: item.key,
+        chip: item.chip,
+        chipClass: item.chipClass,
+        path: item.path,
+        summary: item.summary,
+        status: item.status,
+        verdict: verdictOf(item),
+        save: (verdict, comment, attachments) =>
+          writeVerdict(item, pr, verdict, comment, attachments),
+      })),
+    });
+    updateScale(pr);
+  }
+  refresh();
+
+  const caps = await capabilities;
+  if (!caps.db) return;
+  const collection = caps.db.collection('veredictos');
+  const stateId = `pr${pr}-${block === 'routes' ? 'rutas' : 'contrato'}`;
+  collection.where('pr', '==', pr).onSnapshot(
+    (snap) => {
+      let state = null;
+      snap.docs.forEach((doc) => {
+        const value = doc.data();
+        if (value?.kind === 'verdict') verdicts[value.key] = value;
+        if (
+          value?.kind === 'contract-state' &&
+          (value.block ?? 'api') === block
+        )
+          state = value;
+      });
+      refresh();
+      if (!caps.canEdit || (state && state.sourcesHash === sourcesHash)) return;
+      const ops = Object.fromEntries(
+        items.map((item) => [
+          item.key,
+          {
+            method: item.method,
+            path: item.path,
+            specFile: item.specFile,
+            status: item.status,
+            hash: item.hash,
+          },
+        ]),
+      );
+      collection
+        .doc(stateId)
+        .set({
+          kind: 'contract-state',
+          block,
+          pr,
+          sourcesHash,
+          ops,
+          computedAt: new Date().toISOString(),
+        })
+        .catch(() => {});
+    },
+    () => {},
+  );
+}
+
+const failed = (container, error) =>
+  container.append(
+    el('p', {
+      class: 'muted',
+      text: `No se pudo dibujar el contrato: ${error.message}`,
+    }),
+  );
+
+document.querySelectorAll('[data-ring-spec]').forEach((container) => {
+  const source = document.getElementById(
+    `ring-spec-${container.dataset.ringSpec}`,
+  );
+  (async () => {
+    const data = JSON.parse(source.textContent);
+    const items = await specItems(data);
+    await board(container, {
+      pr: data.pr,
+      block: 'api',
+      noun: 'endpoints',
+      sourcesHash: await sha256(source.textContent),
+      items,
+    });
+  })().catch((error) => failed(container, error));
+});
+
+document.querySelectorAll('[data-ring-routes]').forEach((container) => {
+  const source = document.getElementById(
+    `ring-routes-${container.dataset.ringRoutes}`,
+  );
+  (async () => {
+    const data = JSON.parse(source.textContent);
+    const navigation = data.navigation.length
+      ? [
+          el(
+            'div',
+            { class: 'nav-changes' },
+            el('h4', { text: 'Navegación que cambia' }),
+            el(
+              'ul',
+              {},
+              data.navigation.map((entry) =>
+                el(
+                  'li',
+                  {},
+                  el('code', { text: entry.path }),
+                  entry.added.length
+                    ? ` · entra ${entry.added.join(', ')}`
+                    : '',
+                  entry.removed.length
+                    ? ` · sale ${entry.removed.join(', ')}`
+                    : '',
+                  entry.moved.length
+                    ? ` · se mueve ${entry.moved.join(', ')}`
+                    : '',
+                ),
+              ),
+            ),
+          ),
+        ]
+      : [];
+    await board(container, {
+      pr: data.pr,
+      block: 'routes',
+      noun: 'rutas',
+      sourcesHash: await sha256(source.textContent),
+      items: routeItems(data),
+      before: navigation,
+    });
+  })().catch((error) => failed(container, error));
+});
+
+// «El plan del técnico»: the points the wrestler has to do, by group, with their state, filterable,
+// each origin linked to the card, question or element of the page that bears its id.
+const PLAN_STATES = [
+  ['pendiente', 'Pendiente'],
+  ['espera al juez', 'Espera al juez'],
+  ['en curso', 'En curso'],
+  ['hecho', 'Hecho'],
+];
+/** Inline Markdown as DOM nodes: bold (which may hold code), code spans, italics; text stays text. */
+function inlineNodes(text) {
+  const plain = (part) =>
+    part.split(/(`[^`]+`)/).flatMap((piece) => {
+      if (/^`[^`]+`$/.test(piece))
+        return [el('code', { text: piece.slice(1, -1) })];
+      return piece
+        .split(/(\*[^*\s][^*]*\*)/)
+        .map((bit) =>
+          /^\*[^*\s][^*]*\*$/.test(bit)
+            ? el('em', { text: bit.slice(1, -1) })
+            : bit,
+        );
+    });
+  return String(text ?? '')
+    .split(/(\*\*.+?\*\*)/)
+    .flatMap((part) =>
+      /^\*\*.+\*\*$/.test(part)
+        ? [el('strong', {}, plain(part.slice(2, -2)))]
+        : plain(part),
+    )
+    .filter((node) => node !== '');
+}
+const stateClass = (state) => `st-${state.replace(/\s+/g, '-')}`;
+function originLink(pr, id) {
+  const question = /^(E\d+)-(\d+)$/.exec(id);
+  const target = question ? `pr${pr}-${question[1]}-q${question[2]}` : id;
+  return document.getElementById(target)
+    ? el('a', { href: `#${target}`, text: id })
+    : el('span', { text: id });
+}
+function renderPlan(container, plan) {
+  container.textContent = '';
+  let filter = 'all';
+  const items = plan.groups.flatMap((group) => group.items);
+  const toolbar = el(
+    'div',
+    { class: 'ep-filters', role: 'group', 'aria-label': 'Filtrar el plan' },
+    [['all', 'Todos'], ...PLAN_STATES].map(([value, label]) =>
+      el('button', {
+        type: 'button',
+        'data-filter': value,
+        'aria-pressed': value === 'all' ? 'true' : 'false',
+        text: `${label} · ${value === 'all' ? items.length : items.filter((item) => item.state === value).length}`,
+        onclick: () => {
+          filter = value;
+          toolbar
+            .querySelectorAll('button')
+            .forEach((button) =>
+              button.setAttribute(
+                'aria-pressed',
+                button.dataset.filter === value ? 'true' : 'false',
+              ),
+            );
+          container
+            .querySelectorAll('li.plan-item')
+            .forEach(
+              (row) =>
+                (row.hidden = !(
+                  filter === 'all' || row.dataset.state === filter
+                )),
+            );
+          container
+            .querySelectorAll('section.plan-group')
+            .forEach(
+              (section) =>
+                (section.hidden = ![
+                  ...section.querySelectorAll('li.plan-item'),
+                ].some((row) => !row.hidden)),
+            );
+        },
+      }),
+    ),
+  );
+  container.append(toolbar);
+  plan.groups.forEach((group) => {
+    container.append(
+      el(
+        'section',
+        { class: 'plan-group' },
+        el(
+          'div',
+          { class: 'ep-progress' },
+          el('b', { text: group.name }),
+          el('span', { text: ` · ${group.done} de ${group.total} hechos` }),
+          el(
+            'div',
+            { class: 'bar' },
+            el('i', {
+              style: `width:${group.total ? (group.done / group.total) * 100 : 0}%`,
+            }),
+          ),
+        ),
+        el(
+          'ul',
+          { class: 'plan-items' },
+          group.items.map((item) =>
+            el(
+              'li',
+              { class: 'plan-item', 'data-state': item.state },
+              el('span', {
+                class: `st ${stateClass(item.state)}`,
+                text: item.state,
+              }),
+              el('b', {}, `${item.n}. `, inlineNodes(item.title)),
+              item.detail ? [' ', ...inlineNodes(item.detail)] : '',
+              item.origins.length
+                ? el(
+                    'span',
+                    { class: 'origins' },
+                    ' · origen: ',
+                    item.origins.flatMap((id, index) => [
+                      index ? ', ' : '',
+                      originLink(plan.pr, id),
+                    ]),
+                  )
+                : null,
+              item.since
+                ? el('span', {
+                    class: 'since',
+                    text: ` · ${fmt(item.since)}${item.ref ? ` · ${item.ref}` : ''}`,
+                  })
+                : null,
+            ),
+          ),
+        ),
+      ),
+    );
+  });
+  if (plan.tickets.length)
+    container.append(
+      el(
+        'div',
+        { class: 'plan-tickets' },
+        el('h4', { text: 'Fuera de esta entrega (tickets)' }),
+        el(
+          'ul',
+          {},
+          plan.tickets.map((ticket) => el('li', {}, inlineNodes(ticket))),
+        ),
+      ),
+    );
+}
+
+document.querySelectorAll('[data-ring-plan]').forEach((container) => {
+  try {
+    renderPlan(
+      container,
+      JSON.parse(
+        document.getElementById(`ring-plan-${container.dataset.ringPlan}`)
+          .textContent,
+      ),
+    );
+  } catch (error) {
+    container.append(
+      el('p', {
+        class: 'muted',
+        text: `No se pudo dibujar el plan: ${error.message}`,
+      }),
+    );
+  }
+});