dogfather-universe/server/pruef-entwicklung-kacheln.mjs

/* =====================================================================
   DIE PERSONENKACHELN AUF DER ENTWICKLUNGSSEITE (17.09.2026)

   Filipe, mit zwei Bildschirmfotos nebeneinander: "wieso ist diese
   seite noch nicht im stil und perfektioniert wie die auf screen2 ...
   aber so dass ich die leute in einer kachel aussuchen kann alle
   einzel."

   Der Unterschied zur Checkliste lag nicht im Aufbau -- der stimmte --
   sondern an zwei Stellen:

     1. Die Zahlen standen als graue Textzeilen da, drueben als
        abgesetzte Kaesten mit grosser Ziffer (`bilanz-zahl`).
     2. Eine angeklickte Person sah aus wie eine nicht angeklickte. Wer
        scrollte, wusste nicht mehr, wen er offen hat.

   ---------------------------------------------------------------------
   WAS HIER GEPRUEFT WIRD -- UND WARUM NICHT DAS AUSSEHEN

   Ob etwas "gleich aussieht", laesst sich nicht messen. Die drei Fragen
   darunter schon, und sie sind das, was das Aussehen traegt:

     - Benutzt die Kachel den HAUSBAUSTEIN (`bilanz-zahl`) oder einen
       Nachbau? Ein Nachbau laeuft auseinander, sobald jemand eins von
       beiden anfasst.
     - Stimmen die Zahlen? "angesehen" plus "noch offen" MUSS die
       Gesamtzahl ergeben. Zwei Zahlen, die nebeneinander stehen und
       nicht zusammenpassen, sind schlimmer als eine.
     - Sieht man, wer gewaehlt ist? Und zwar so, dass es auch ein
       Vorleseprogramm sagen kann.

   MIT GEGENPROBE: Vor dem ersten Klick darf KEINE Kachel gewaehlt sein.
   Sonst hiesse "eine ist gewaehlt" nur, dass immer eine gewaehlt ist.

   Aufrufen mit:  node server/pruef-entwicklung-kacheln.mjs
   Bild:          SCHIRM=1 node server/pruef-entwicklung-kacheln.mjs
   ===================================================================== */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { fileURLToPath } from "node:url";
import { eigenerPort } from "./helfer-port.mjs";

const PORT = await eigenerPort(import.meta, "pruef-entwicklung-kacheln");
const ordner = mkdtempSync(join(tmpdir(), "ws-ekach-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
import { notbremse } from "./helfer-notbremse.mjs";
await import("./index.js");
notbremse(180_000, "pruef-entwicklung-kacheln");
await new Promise((r) => setTimeout(r, 700));
const BASIS = `http://127.0.0.1:${PORT}`;

process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); });
process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); });

let fehler = 0, geprueft = 0;
const melde = (t) => console.log(t);
const ok = (b, t) => { geprueft++; console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes, createHmac } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const schluessel = randomBytes(32).toString("hex");
d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)"
  + " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING")
  .run("code_kennung_schluessel", schluessel, jetzt);

function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64,
    { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen"
    + " (name, rolle, code_hash, code_salt, code_n, code_kennung, aktiv, erstellt)"
    + " VALUES (?,?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768,
      createHmac("sha256", schluessel).update(code).digest("hex"), jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idFilipe = anlegen("Filipe", "admin", "CODE-DOGI-0001");
anlegen("VanVan", "hand", "CODE-HAND-0001");
const idDiene = anlegen("Diene", "modi", "CODE-MODI-0001");

/* =====================================================================
   AUFGABEN FUER DEN AUFTRAGSSTREIFEN (24.09.2026)
   =====================================================================

   Seit dem 24.09. traegt jede Kachel, was bei der Person liegt --
   Filipe: "die aufgaben die wir verteilen sollen da auch zu sehen sein
   und so."

   Das laesst sich nur messen, wenn es etwas zu zeigen gibt. Drei
   Aufgaben fuer Diene, KEINE offene fuer VanVan -- so wird beides
   geprueft: die Zahl UND der Fall "nichts offen", der auf der Kachel
   ausdruecklich stehenbleibt.

   DIE ERLEDIGTE IST DIE GEGENPROBE. Zaehlte der Streifen sie mit,
   stuende bei VanVan "1 offene Aufgabe" ueber einer abgehakten -- und
   niemand wuerde es merken, weil die Zahl ja plausibel aussieht.

   GERECHNET WIRD RELATIV ZU HEUTE, nie mit einem festen Datum: Eine
   Frist, die beim Schreiben in der Zukunft lag, holt der Kalender
   sonst ein, und die Pruefung wird rot, ohne dass etwas kaputt ist.
   Mittags gesetzt, damit die Zeitumstellung den Tag nicht kippt. */
const tagPlus = (n) => {
  const t = new Date(); t.setHours(12, 0, 0, 0); t.setDate(t.getDate() + n);
  return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`;
};
const GESTERN = tagPlus(-1), IN_DREI = tagPlus(3);
const neueAufgabe = (titel, wer, frist, status) => d.prepare(
  "INSERT INTO aufgaben (titel, status, prioritaet, creator_id, verantwortlich_id, frist,"
  + " erstellt, erstellt_von) VALUES (?,?,'mittel',?,?,?,?,?)")
  .run(titel, status, idFilipe, wer, frist, jetzt, idFilipe);
neueAufgabe("Clips vom Samstag schneiden", idDiene, GESTERN, "offen");
neueAufgabe("Plan für nächste Woche", idDiene, IN_DREI, "arbeit");
neueAufgabe("Ideen sammeln", idDiene, null, "offen");
neueAufgabe("Längst abgehakt", idDiene, GESTERN, "erledigt");

/* =====================================================================
   ZUGETRAGENE PUNKTE (25.09.2026) -- der Nenner der Kachel
   =====================================================================

   Filipe: „es sollen nur die menge angezeigt werden die wir zutragen
   und erledigte dan auch nur die die erledigt wurden von den
   zugetragenen."

   BIS HEUTE stand auf jeder Kachel „x von 68" -- 68 war der ganze
   Katalog. Jetzt ist das Ganze das, was dieser Mensch bekommen hat.
   Wer nichts bekommen hat, hat keinen Nenner, und dort steht ein Satz
   statt einer Null.

   BEIDE FAELLE WERDEN GEBAUT, und das ist der Punkt: Diene bekommt
   vier Punkte zugetragen und bei einem davon eine Einschaetzung
   (also 1 von 4 = 25 %), VanVan bekommt nichts. Eine Pruefung, die nur
   den einen Fall kennt, haette den Umbau nicht bemerkt -- genau das
   ist heute frueh passiert: Sie war rot mit „noch nichts zugetragen,
   noch nichts zugetragen" und konnte nicht sagen, ob das richtig ist.

   DIE FUENFTE EINSCHAETZUNG IST DIE GEGENPROBE. Sie steht auf einem
   Punkt, den Diene NICHT zugetragen bekommen hat. Zaehlte die
   Uebersicht sie mit, stuende dort „2 von 4" -- und in der Karte
   daneben „1 von 4". Zwei Zahlen fuer dieselbe Sache. */
const { ENTWICKLUNG_FREMD } = await import("./workspace-entwicklungs-punkte.js");
const VIER = ENTWICKLUNG_FREMD.slice(0, 4).map((x) => x.schluessel);
const FUENFTER = ENTWICKLUNG_FREMD[4].schluessel;
d.close();
/* Eingetragen wird weiter unten ueber die ECHTEN Routen -- die
   Tabellen des Entwicklungsmoduls entstehen erst beim ersten Zugriff
   darauf, vorher gibt es sie gar nicht. Und ueber die Route geprueft
   zu werden ist ohnehin mehr wert als ein INSERT von der Seite. */

const an = await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "CODE-DOGI-0001" }),
});
const keks = (an.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");

/* ---- Jetzt die Zuteilung, ueber die Wege, die es wirklich gibt ----
   Vier Punkte fuer Diene, eine Einschaetzung auf einem davon und eine
   auf einem FUENFTEN, den sie nicht bekommen hat (die Gegenprobe:
   zaehlt die Uebersicht sie mit, stuende dort 2 statt 1). */
const mitKeks = (pfad, art, koerper) => fetch(BASIS + pfad, {
  method: art,
  headers: { "Content-Type": "application/json", Cookie: keks,
    Origin: BASIS, Referer: BASIS + "/workspace/entwicklung.html" },
  body: koerper ? JSON.stringify(koerper) : undefined,
});
const zut = await mitKeks(`/workspace/api/entwicklung/person/${idDiene}/punkte`,
  "PUT", { punkte: VIER });
melde(`  --   Zuteilung: HTTP ${zut.status}`);
for (const s of [VIER[0], FUENFTER]) {
  const r = await mitKeks(`/workspace/api/entwicklung/person/${idDiene}/${s}`,
    "PUT", { stufe: "laeuft" });
  if (r.status >= 400) melde(`  --   Einschaetzung ${s}: HTTP ${r.status}`);
}

const { chromium } = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();
try {
  const kontext = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  await kontext.addCookies(keks.split("; ").map((k) => {
    const [name, ...rest] = k.split("=");
    return { name, value: rest.join("="), domain: "127.0.0.1", path: "/" };
  }));
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (e) => { if (e.type() === "error") konsole.push(e.text()); });
  await seite.goto(`${BASIS}/workspace/entwicklung.html`, { waitUntil: "networkidle" });
  await seite.waitForSelector("#personen .e-person", { timeout: 15_000 });
  await seite.waitForTimeout(400);

  /* =====================================================================
     1. DIE REIHE UND IHRE KACHELN
     ===================================================================== */
  melde("");
  melde("=== 1. Die Reihe ===");
  {
    const b = await seite.evaluate(() => {
      const reihe = document.getElementById("personen");
      const kacheln = [...reihe.querySelectorAll(".e-person")];
      return {
        schild: reihe.getAttribute("aria-label") || "",
        anzahl: kacheln.length,
        namen: kacheln.map((k) => k.querySelector(".e-person__name")?.textContent || ""),
        ringe: kacheln.map((k) => k.querySelectorAll(".e-ring").length),
        boegen: kacheln.map((k) => k.querySelectorAll(".e-ring__bogen").length),
        streifen: kacheln.map((k) => k.querySelectorAll(".e-person__auftrag").length),
        /* GEGENPROBE AUF DEN UMBAU: Die drei Bilanz-Kaesten sind am
           24.09.2026 gewichen. Blieben irgendwo Reste stehen, stuenden
           zwei Aufbauten nebeneinander -- genau das, was hier seit dem
           17.09. verhindert werden soll. */
        reste: kacheln.map((k) => k.querySelectorAll(
          ".bilanz-zahl, .e-fortschritt, .e-person__bilanz").length),
        /* Die Kachel ist ein <button>. Ein <div> darin ist ungueltiges
           HTML -- es wird angezeigt und faellt trotzdem irgendwann auf. */
        divs: kacheln.map((k) => k.querySelectorAll("div").length),
      };
    });
    ok(b.schild === "Person wählen", `die Reihe sagt, was sie ist ("${b.schild}")`);
    ok(b.anzahl === 2, `zwei Kacheln (${b.namen.join(", ")})`);
    ok(b.ringe.length > 0 && b.ringe.every((n) => n === 1),
      `jede Kachel traegt genau einen Ring (${b.ringe.join(", ")})`);
    ok(b.boegen.every((n) => n === 1),
      `und in jedem Ring genau einen Bogen (${b.boegen.join(", ")})`);
    ok(b.streifen.length > 0 && b.streifen.every((n) => n === 1),
      `jede Kachel traegt ihren Auftragsstreifen (${b.streifen.join(", ")})`);
    ok(b.reste.every((n) => n === 0),
      `kein Rest der alten Kachel (Balken/Bilanz-Kaesten: ${b.reste.join(", ")})`);
    ok(b.divs.every((n) => n === 0),
      `nichts Ungueltiges im Knopf (divs: ${b.divs.join(", ")})`);
  }

  /* =====================================================================
     2. STIMMT DER RING MIT DEM, WAS DANEBEN STEHT?
     =====================================================================

     Bis zum 24.09.2026 stand hier die Rechnung "angesehen + noch
     offen = alle Punkte". Die beiden Kaesten gibt es nicht mehr; die
     Frage dahinter bleibt aber dieselbe und ist jetzt sogar schaerfer
     zu stellen, weil DREI Darstellungen derselben Zahl nebeneinander
     liegen:

       - der Bogen des Rings (stroke-dasharray, "68 100"),
       - die Ziffer in seiner Mitte,
       - die Zeile darunter ("46 von 68 angesehen"),
       - und das aria-label, das ein Vorleseprogramm vorliest.

     Laufen die auseinander, sieht man es NICHT: Ein Ring, der zu drei
     Vierteln gefuellt ist, waehrend "12 %" darin steht, faellt auf --
     ein Ring, dessen aria-label etwas anderes sagt als das Bild, nie.
     Deshalb wird hier alles gegen dieselbe Quelle geprueft: die Zahlen
     aus /entwicklung/lage. */
  melde("");
  melde("=== 2. Der Ring und seine Zahlen ===");
  {
    const lage = await seite.evaluate(async () => {
      const a = await fetch("/workspace/api/entwicklung/lage", { credentials: "same-origin" });
      return a.ok ? await a.json() : null;
    });
    ok(lage && lage.gesamt_fremd > 0,
      `die Seite kennt ${lage?.gesamt_fremd ?? "?"} Punkte insgesamt`);

    const z = await seite.evaluate(() => [...document.querySelectorAll("#personen .e-person")]
      .map((k) => {
        const ring = k.querySelector(".e-ring");
        return {
          name: k.querySelector(".e-person__name")?.textContent || "",
          nr: Number(k.dataset.person),
          ringZahl: k.querySelector(".e-ring__zahl")?.textContent || "",
          bogen: k.querySelector(".e-ring__bogen")?.getAttribute("stroke-dasharray") || "",
          schild: ring?.getAttribute("aria-label") || "",
          rolle: ring?.getAttribute("role") || "",
          standZahl: k.querySelector(".e-person__stand-zahl")?.textContent || "",
          standRest: k.querySelector(".e-person__stand-rest")?.textContent || "",
          abw: k.querySelector(".e-person__abw")?.textContent || "",
        };
      }));

    /* ==== DAS GANZE IST, WAS ZUGETRAGEN IST (25.09.2026) ==========

       Hier stand `gesamt_fremd` -- die Zahl aller Punkte im Katalog
       (68). Die gibt es weiterhin, sie ist aber nur noch die Groesse
       der AUSWAHL, nicht der Nenner der Kachel. Der Nenner steht seit
       heute je Person in `zugeteilt`.

       WER NICHTS ZUGETRAGEN BEKOMMEN HAT, hat keinen Nenner: Dort
       steht „–" im Ring und ein Satz in der Zeile, keine Null. „0 von
       0 erledigt" liest sich wie ein Versaeumnis; es ist aber keins,
       sondern eine offene Aufgabe der Leitung. */
    const katalog = lage?.gesamt_fremd || 0;
    const ganzes = (p) => Number(p?.zugeteilt) || 0;
    const sollAnteil = (p) => (ganzes(p) > 0
      ? Math.round((Number(p?.gesetzt) || 0) / ganzes(p) * 100) : 0);
    const nachNr = new Map((lage?.personen || []).map((p) => [Number(p.id), p]));

    /* Dass die Testdaten ueberhaupt angekommen sind, wird gemessen und
       nicht vorausgesetzt: Eine Pruefung, deren Voraussetzung fehlt,
       darf nicht still gruen werden. */
    const mitZuteilung = [...nachNr.values()].filter((x) => ganzes(x) > 0);
    const ohneZuteilung = [...nachNr.values()].filter((x) => ganzes(x) === 0);
    ok(mitZuteilung.length >= 1 && ohneZuteilung.length >= 1,
      `beide Faelle liegen vor: ${mitZuteilung.length} mit Zuteilung, `
      + `${ohneZuteilung.length} ohne`);
    ok(mitZuteilung.every((x) => ganzes(x) === 4 && Number(x.gesetzt) === 1),
      `die zugetragenen Punkte zaehlen, der fuenfte nicht `
      + `(${mitZuteilung.map((x) => `${x.name}: ${x.gesetzt} von ${ganzes(x)}`).join(", ")})`);
    ok(katalog > 4,
      `und der Katalog ist weiterhin groesser als das Zugetragene (${katalog})`);

    ok(z.length > 0 && z.every((k) => nachNr.has(k.nr)),
      `jede Kachel gehoert zu einer Person aus der Auskunft (${z.map((k) => k.nr).join(", ")})`);

    const ringOk = z.every((k) => {
      const pp = nachNr.get(k.nr);
      return k.ringZahl === (ganzes(pp) > 0 ? String(sollAnteil(pp)) : "\u2013");
    });
    ok(ringOk, `die Ziffer im Ring ist der gerechnete Anteil `
      + `(${z.map((k) => `${k.name}: ${k.ringZahl}`).join(", ")})`);

    /* Der BOGEN ist das, was man sieht. Umfang 100 -- die erste Zahl
       im stroke-dasharray ist damit buchstaeblich der Prozentwert. */
    const bogenOk = z.every((k) =>
      Number(String(k.bogen).split(" ")[0]) === sollAnteil(nachNr.get(k.nr))
      && String(k.bogen).split(" ")[1] === "100");
    ok(bogenOk, `und der Bogen zeigt denselben Anteil (${z.map((k) => k.bogen).join(" | ")})`);

    /* DIE ZEILE DARUNTER nennt beide Zahlen, aus denen der Anteil
       entsteht -- ohne sie waere "68 %" eine Behauptung ohne Beleg. */
    const standOk = z.every((k) => {
      const pp = nachNr.get(k.nr);
      return ganzes(pp) > 0
        ? (k.standZahl === String(Number(pp?.gesetzt) || 0)
           && k.standRest === ` von ${ganzes(pp)} erledigt`)
        : (k.standZahl === "" && k.standRest === "noch nichts zugetragen");
    });
    ok(standOk, `"x von n erledigt" bzw. der Satz stimmt bei jeder Kachel `
      + `(${z.map((k) => k.standZahl + k.standRest).join(" | ")})`);

    /* UND DAS VORLESEPROGRAMM HOERT DASSELBE. Ein Ring ist ein Bild;
       ohne Schild ist er fuer ein Vorleseprogramm gar nicht da. */
    ok(z.every((k) => k.rolle === "img"), "der Ring gibt sich als Bild zu erkennen");
    const schildOk = z.every((k) => {
      const pp = nachNr.get(k.nr);
      const soll = ganzes(pp) > 0
        ? `${Number(pp?.gesetzt) || 0} von ${ganzes(pp)} erledigt `
          + `(${sollAnteil(pp)} Prozent)`
        : "noch nichts zugetragen";
      return k.schild === soll;
    });
    ok(schildOk, `und sagt dasselbe wie das Bild `
      + `(${z.map((k) => `"${k.schild}"`).join(" | ")})`);

    /* EINE NULL IST KEINE WARNUNG: "verschieden gesehen" steht nur da,
       wenn es etwas gibt. Im Testbestand hat niemand etwas anders
       gesehen -- also darf die Angabe auf KEINER Kachel stehen. */
    ok(z.every((k) => k.abw === ""),
      "ohne Abweichung steht dort auch nichts");
  }

  /* =====================================================================
     2b. WAS LIEGT BEI DER PERSON? -- der Auftragsstreifen
     =====================================================================

     Filipe, 24.09.2026: "die aufgaben die wir verteilen sollen da auch
     zu sehen sein und so."

     Angelegt sind (siehe oben): fuer Diene drei offene -- eine
     ueberfaellig, eine in drei Tagen, eine ohne Frist -- und eine
     erledigte. Fuer VanVan nichts.

     GEPRUEFT WIRD BEIDES: die Zahl UND der Fall "nichts offen". Der
     zweite ist der, den man beim Bauen vergisst, und er ist auf dieser
     Seite der haeufigste: Wer verteilt, sucht genau danach. */
  melde("");
  melde("=== 2b. Der Auftragsstreifen ===");
  {
    const a = await seite.evaluate(() => Object.fromEntries(
      [...document.querySelectorAll("#personen .e-person")].map((k) => {
        const s2 = k.querySelector(".e-person__auftrag");
        return [k.querySelector(".e-person__name")?.textContent || "?", {
          sichtbar: !!s2 && !s2.hidden,
          leer: s2?.dataset.leer || "",
          spaet: s2?.dataset.spaet || "",
          zahl: k.querySelector(".e-person__auftrag-zahl")?.textContent || "",
          wort: k.querySelector(".e-person__auftrag-wort")?.textContent || "",
          marke: k.querySelector(".e-person__auftrag-spaet")?.textContent || "",
          titel: k.querySelector(".e-person__auftrag-titel")?.textContent || "",
          frist: k.querySelector(".e-person__auftrag-frist")?.textContent || "",
          fristSpaet: k.querySelector(".e-person__auftrag-frist")?.dataset.spaet || "",
          leerText: k.querySelector(".e-person__auftrag-leer")?.textContent || "",
        }];
      })));

    const dn = a.Diene || {}, vv = a.VanVan || {};
    ok(dn.sichtbar === true && vv.sichtbar === true,
      "der Streifen steht auf beiden Kacheln");
    /* DREI, NICHT VIER: Die erledigte zaehlt nicht mit. Ohne diese
       Gegenprobe wuerde eine Zahl, die alles zaehlt, nie auffallen. */
    ok(dn.zahl === "3", `Diene hat drei offene Aufgaben (steht da: "${dn.zahl}")`);
    ok(dn.wort === "offene Aufgaben", `und das Wort steht im Plural ("${dn.wort}")`);
    ok(dn.marke === "1 überfällig", `eine davon ist ueberfaellig ("${dn.marke}")`);
    ok(dn.spaet === "ja", "und der Streifen zeigt es an seiner Kante");
    /* DIE NAECHSTE MIT NAMEN -- und zwar die ueberfaellige, nicht
       irgendeine. Sortiert wird nach Frist; ohne Frist steht hinten. */
    ok(dn.titel === "Clips vom Samstag schneiden",
      `die ueberfaellige steht mit Namen da ("${dn.titel}")`);
    ok(dn.frist === "seit gestern überfällig",
      `mit einem Satz statt einem Datum ("${dn.frist}")`);
    ok(dn.fristSpaet === "ja", "und sie ist als ueberfaellig ausgezeichnet");

    ok(vv.leer === "ja" && vv.leerText === "keine offene Aufgabe",
      `bei VanVan steht "nichts offen" statt einer Null ("${vv.leerText}")`);
    ok(vv.zahl === "" && vv.marke === "",
      "und keine erfundene Zahl daneben");
  }

  /* =====================================================================
     3. EINZELN AUSWAEHLBAR -- UND MAN SIEHT ES
     ===================================================================== */
  melde("");
  melde("=== 3. Auswaehlen ===");
  {
    /* GEGENPROBE ZUERST: Vorher darf keine gewaehlt sein. */
    const vorher = await seite.evaluate(() => [...document.querySelectorAll("#personen .e-person")]
      .map((k) => k.getAttribute("aria-pressed")));
    ok(vorher.length > 0 && vorher.every((w) => w === "false"),
      `vor dem Klick ist keine gewaehlt (${vorher.join(", ")})`);

    await seite.click("#personen .e-person:nth-of-type(2)");
    await seite.waitForTimeout(900);

    const nachher = await seite.evaluate(() => ({
      gedrueckt: [...document.querySelectorAll("#personen .e-person")]
        .map((k) => k.getAttribute("aria-pressed")),
      wer: document.querySelector('#personen .e-person[aria-pressed="true"] .e-person__name')
        ?.textContent || "",
      karteOffen: !document.getElementById("karte")?.hidden,
    }));
    ok(nachher.gedrueckt.filter((w) => w === "true").length === 1,
      `genau eine ist gewaehlt (${nachher.gedrueckt.join(", ")})`);
    ok(nachher.wer === "Diene", `und zwar die angeklickte (${nachher.wer})`);
    ok(nachher.karteOffen, "ihre Karte steht offen");

    /* UND DIE AUSWAHL WANDERT, statt sich zu sammeln. */
    await seite.click("#personen .e-person:nth-of-type(1)");
    await seite.waitForTimeout(900);
    const um = await seite.evaluate(() =>
      document.querySelector('#personen .e-person[aria-pressed="true"] .e-person__name')
        ?.textContent || "");
    const wieViele = await seite.evaluate(() =>
      document.querySelectorAll('#personen .e-person[aria-pressed="true"]').length);
    ok(um === "VanVan" && wieViele === 1,
      `ein Klick weiter ist nur noch sie gewaehlt (${um}, ${wieViele} gewaehlt)`);
  }

  /* =====================================================================
     4. NICHTS KAPUTT
     ===================================================================== */
  melde("");
  melde("=== 4. Die Konsole ===");
  ok(konsole.length === 0,
    konsole.length ? `Fehler in der Konsole: ${konsole[0]}` : "keine Fehler in der Konsole");

  if (process.env.SCHIRM) {
    const pfad = fileURLToPath(new URL("pruef-entwicklung-kacheln.png", import.meta.url));
    await seite.screenshot({ path: pfad, fullPage: false });
    melde("  --   Bildschirmfoto: server/pruef-entwicklung-kacheln.png");
  }
  await kontext.close();
} finally {
  await browser.close();
}

melde("");
melde(`${geprueft} Pruefungen, ${fehler} Fehler`);
melde(fehler ? "NICHT IN ORDNUNG" : "ALLES IN ORDNUNG");
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Aufraeumrest */ }
process.exit(fehler ? 1 : 0);