dogfather-universe/server/pruef-chatkachel.mjs

/* =====================================================================
   pruef-chatkachel.mjs — Bild hinter dem Chat, Kachel für jeden Account

   Filipe, 20.09.2026: „ich will auch ein krasses hintergrundbild für
   den treff chat. und die texte sollen immer in einer kachel sein. und
   jeder account soll seine kachel personalisieren können."

   ---------------------------------------------------------------------
   DIE EINE FRAGE, AN DER SO ETWAS SCHEITERT: LESBARKEIT

   Ein Bild hinter einem Chat geht nur, WENN der Text auf einer
   deckenden Kachel steht. Sonst liegt Schrift auf einem Foto — an der
   dunklen Stelle lesbar, an der hellen nicht, und beim Scrollen
   wechselt es. Deshalb wird hier nicht geprüft, ob ein Bild da ist,
   sondern ob die Kachel DECKT: gemessen am Alphawert, nicht geschätzt.

   Und alle zwölf Töne müssen gleich gut tragen. Ein freier Farbwähler
   hätte genau hier sein Problem: Mit ihm kann sich jemand unlesbar
   machen, und sehen müssen es die anderen.

   AUFRUF:  node server/pruef-chatkachel.mjs
   ===================================================================== */

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

const HIER = dirname(fileURLToPath(import.meta.url));
const PORT = await eigenerPort(import.meta, "pruef-chatkachel");
const ordner = mkdtempSync(join(tmpdir(), "ws-kachel-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
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 }); };
await import("./index.js");
notbremse(250_000, "pruef-chatkachel");
await new Promise((r) => setTimeout(r, 900));
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 ok = (b, t) => { geprueft++; console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

console.log("\n=== Chat: Bild dahinter, Kachel davor ===\n");

/* ---- 1. Die Töne, ohne Browser ----------------------------------- */
const { CHAT_KACHELN, kachelPruefen, schriftFuer } = await import("./workspace-chat.js");
ok(CHAT_KACHELN.length >= 8, `es gibt genug Töne zur Auswahl (${CHAT_KACHELN.length})`);

/* ALLE GLEICH DUNKEL. Nur dann ist der Kontrast zur Schrift bei jedem
   gleich, und niemand kann sich unlesbar machen. Gerechnet wird die
   relative Helligkeit nach WCAG — nicht der Augenschein. */
const helligkeit = (hex) => {
  const z = hex.replace("#", "");
  const teil = [0, 2, 4].map((i) => parseInt(z.slice(i, i + 2), 16) / 255);
  const lin = teil.map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
};
const kontrast = (a, b) => {
  const [h, d] = [helligkeit(a), helligkeit(b)].sort((x, y) => y - x);
  return (h + 0.05) / (d + 0.05);
};
/* GEGEN WELCHE SCHRIFT? DIE, DIE WIRKLICH AUF DER BLASE STEHT.
   ---------------------------------------------------------------------
   Hier stand `const SCHRIFT = "#e8f1fa"` — die Textfarbe des Hauses,
   abgeschrieben. Am 22.09.2026 bekam die Blase ihre EIGENE Schrift
   (--blase-text / --blase-leise, beide heller), damit die zwölf Töne
   überhaupt Farbe tragen können. Von da an maß diese Prüfung eine
   Farbe, die auf einer Blase gar nicht mehr vorkommt.

   Das ist genau der Fehler, der an den Startkacheln Wochen gekostet
   hat: eine Prüfung, die grün oder rot ist, ohne das anzusehen, was
   auf dem Bildschirm steht. Eine abgeschriebene Farbe ist eine
   Bestandsliste, und Bestandslisten altern.

   Gelesen wird jetzt aus chat.css — derselben Stelle, aus der auch
   `tools/chat-kacheln-rechnen.mjs` liest. Eine Quelle, zwei Leser.
   Findet sie sich dort nicht, ist das der DRITTE AUSGANG: Die Prüfung
   kann nichts messen und sagt es, statt eine Ersatzfarbe zu erfinden
   und weiter grün zu leuchten. */
const chatCss = readFileSync(
  join(HIER, "..", "workspace", "assets", "css", "chat.css"), "utf8");
function ausCss(name) {
  const m = chatCss.match(new RegExp("--" + name + ":\\s*(#[0-9a-fA-F]{3,6})\\s*;"));
  return m ? m[1] : null;
}
/* Die Zahlen rechts sind dieselben wie im Rechenwerkzeug — 7:1 (AAA)
   für den Fließtext, weil der Chat die Seite ist, auf der am längsten
   gelesen wird, und 4,5:1 für die vier Handgriffe der Fußzeile. */
const BLASEN_SCHRIFT = [
  ["blase-text", ".chat-nachricht__text", 7],
  ["blase-leise", ".chat-nachricht__fuss", 4.5],
];
/* JEDE KACHEL MIT IHRER EIGENEN SCHRIFT (22.09.2026 abends).
   ---------------------------------------------------------------------
   Hier stand eine feste Schriftfarbe aus chat.css, gegen ALLE Töne
   gemessen. Das galt, solange alle Töne dunkel waren.

   Filipe: „Textfarbe soll mitwechseln, am besten schwarz auf hellen
   Kacheln – und weiß, wenn jemand eine schwarze Kachel wählt."

   Seither entscheidet `schriftFuer()` im Server, welches Paar eine
   Fläche trägt. Die Prüfung fragt jetzt dieselbe Funktion -- nicht,
   weil das bequem ist, sondern weil alles andere eine zweite Wahrheit
   wäre: Eine Prüfung mit eigener Rechnung könnte grün sein, während
   der Chat etwas anderes anzeigt.

   WAS SIE DAMIT NOCH PRÜFT: Dass das Ergebnis von `schriftFuer` die
   Schwellen wirklich schafft. Die Funktion darf im Notfall auch das
   schlechtere Paar zurückgeben (sie MUSS etwas liefern) -- genau dann
   schlägt diese Zeile an, und das ist ihr Zweck. */
for (const [feld, wo, noetig] of [["text", ".chat-nachricht__text", 7],
  ["leise", ".chat-nachricht__fuss", 4.5]]) {
  let schlecht = Infinity, wer = "", gemessen = 0;
  for (const k of CHAT_KACHELN) {
    const paar = schriftFuer(k.farbe);
    if (!paar || !paar[feld]) continue;
    gemessen++;
    const c = kontrast(paar[feld], k.farbe);
    if (c < schlecht) { schlecht = c; wer = k.name; }
  }
  /* Die ANZAHL gehört in die Bedingung. Wäre CHAT_KACHELN je leer,
     bliebe `schlecht` auf Infinity und die Zeile wäre grün, ohne einen
     einzigen Ton angesehen zu haben. */
  ok(gemessen === CHAT_KACHELN.length && gemessen >= 8 && schlecht >= noetig,
    `${wo} trägt auf allen ${gemessen} Tönen `
    + `(schlechtester ${wer}: ${schlecht.toFixed(2)}:1, nötig ${noetig})`);
}

/* UND DIE SCHRIFT WECHSELT WIRKLICH. Ohne diese Zeile wäre nicht
   bewiesen, dass `schriftFuer` mehr tut, als immer dasselbe Paar
   zurückzugeben -- dann wäre die Schleife oben nur die alte Prüfung
   mit mehr Umweg. */
{
  const hell = CHAT_KACHELN.filter((k) => helligkeit(k.farbe) > 0.3);
  const dunkel = CHAT_KACHELN.filter((k) => helligkeit(k.farbe) <= 0.3);
  const hellDunkleSchrift = hell.every((k) => helligkeit(schriftFuer(k.farbe).text) < 0.2);
  const dunkelHelleSchrift = dunkel.every((k) => helligkeit(schriftFuer(k.farbe).text) > 0.6);
  ok(hell.length >= 1 && dunkel.length >= 1 && hellDunkleSchrift && dunkelHelleSchrift,
    `${hell.length} helle Kacheln tragen dunkle Schrift, ${dunkel.length} dunkle tragen helle`);
}

/* GEGENPROBE: Eine Prüfung, die nur bestätigen kann, bestätigt nichts.
   Ein absichtlich zu heller Ton MUSS durchfallen — sonst wäre das
   Grün oben nur die Abwesenheit einer Messung. */
{
  const hell = ausCss("blase-text") || "#f3f7fc";
  ok(kontrast(hell, "#8fa2bd") < 7,
    "Gegenprobe — ein zu heller Ton fiele durch "
    + `(${kontrast(hell, "#8fa2bd").toFixed(2)}:1 gegen nötige 7)`);
}

/* ALLE AUF DERSELBEN LEUCHTDICHTE — und das ist jetzt eine harte
   Aussage, keine Nachsicht mehr. Hier stand Faktor 6; das war die
   Toleranz für zwölf von Hand gewählte Grautöne. Seit sie gerechnet
   werden, liegen sie auf einem Wert, und der Rest ist Rundung auf
   ganze Bildpunkte. Ein Faktor über 1,1 hieße: jemand hat eine Farbe
   von Hand eingetragen und damit die Rechnung umgangen. */
/* SIE GILT FÜR DIE GERECHNETEN -- und nur für die (22.09.2026 abends).

   Der Zweck dieser Zeile ist: „Niemand kann sich durch seine Wahl
   schlechter lesbar machen als die anderen." Solange alle Töne
   dieselbe feste Schrift trugen, war gleiche Leuchtdichte der einzige
   Weg dorthin.

   Seit die Schrift mitwechselt, gibt es einen zweiten -- und die
   Prüfung darüber löst das Versprechen direkt ein: JEDE Kachel
   erreicht mit IHRER Schrift 7:1 und 4,5:1. Das ist die Aussage, um
   die es ging; die gleiche Leuchtdichte war nur ihr Mittel.

   Für die elf gerechneten Töne bleibt das Mittel trotzdem stehen:
   Sie kommen aus tools/chat-kacheln-rechnen.mjs, und ein Faktor über
   1,1 hieße dort weiterhin, dass jemand eine Farbe von Hand
   eingetragen und damit die Rechnung umgangen hat. Ausgenommen sind
   die, die nachweislich eine andere Schrift tragen. */
const gerechnet = CHAT_KACHELN.filter(
  (k) => helligkeit(schriftFuer(k.farbe).text) > 0.6);
const spanne = Math.max(...gerechnet.map((k) => helligkeit(k.farbe)))
  / Math.max(1e-6, Math.min(...gerechnet.map((k) => helligkeit(k.farbe))));
ok(gerechnet.length >= 8 && spanne < 1.1,
  `die ${gerechnet.length} gerechneten Töne liegen auf derselben Leuchtdichte `
  + `(Faktor ${spanne.toFixed(3)}) — keiner ist heller oder dunkler als die anderen`);

/* UND SIE MÜSSEN BUNT SEIN. Gemessen an dem, was vor dem 22.09.2026
   drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028 — zwölf
   Grautöne. Ohne diese Zeile könnte die Liste unbemerkt dorthin
   zurückfallen, und alle Kontrastprüfungen oben blieben grün. */
const buntheit = (hexf) => {
  const z = hexf.replace("#", "");
  const [r, g, b] = [0, 2, 4].map((i) => parseInt(z.slice(i, i + 2), 16) / 255)
    .map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
  return Math.hypot(1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s);
};
/* „grund" ist der bewusst neutrale Standard und zählt hier nicht mit. */
const bunt = CHAT_KACHELN.filter((k) => k.wert !== "grund").map((k) => buntheit(k.farbe));
ok(bunt.length >= 8 && Math.min(...bunt) >= 0.06,
  `alle ${bunt.length} Farbtöne sind wirklich bunt `
  + `(blassester ${Math.min(...bunt).toFixed(3)}, vor dem Umbau lag der bunteste bei 0,048)`);

/* KEINE DOPPELTE FARBE. Zwei gleiche Töne wären zwei Namen für
   dieselbe Kachel — man wählt den zweiten und sieht keinen Unterschied. */
const farben = new Set(CHAT_KACHELN.map((k) => k.farbe.toLowerCase()));
ok(farben.size === CHAT_KACHELN.length,
  `kein Ton doppelt (${farben.size} von ${CHAT_KACHELN.length})`);

/* Die Prüfung am Wert selbst — sie ist der Riegel gegen alles, was
   nicht aus der Liste kommt. */
ok(kachelPruefen("moos") === "moos", "ein bekannter Ton kommt durch");
ok(kachelPruefen("rgb(255,0,0)") === null,
  "Gegenprobe: ein erfundener Wert nicht — sonst stünde CSS aus der Datenbank in der Seite");
ok(kachelPruefen(null) === null, "und 'nichts eingestellt' ist ein gültiger Zustand");

/* ---- 2. Am echten Bildschirm ------------------------------------- */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const mach = (name, rolle, code) => {
  const s = randomBytes(16).toString("hex");
  const h = scryptSync(code, s, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  return d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt)"
    + " VALUES (?,?,?,?,?,1,?)").run(name, rolle, h, s, 32768, new Date().toISOString()).lastInsertRowid;
};
mach("Filipe", "admin", "CODE-DOGI-0001");
const idLuna = mach("Luna", "manager", "CODE-LUNA-0002");
d.close();

const anmelden = async (rolle, code) => {
  const a = await fetch(BASIS + "/workspace/api/anmelden", {
    method: "POST", headers: { "Content-Type": "application/json", Origin: BASIS },
    body: JSON.stringify({ rolle, code }),
  });
  return (a.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");
};
const kFilipe = await anmelden("admin", "CODE-DOGI-0001");
const kLuna = await anmelden("manager", "CODE-LUNA-0002");
ok(!!kFilipe && !!kLuna, "beide angemeldet");

/* Ein Gespräch und zwei Nachrichten. */
const raumA = await fetch(BASIS + "/workspace/api/chat/direkt", {
  method: "POST", headers: { "Content-Type": "application/json", Cookie: kFilipe, Origin: BASIS },
  body: JSON.stringify({ mit: idLuna }),
});
const raum = (await raumA.json()).raum_id;
ok(!!raum, `ein Gespräch steht (${raum})`);
const schreib = async (keks, text) => fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`, {
  method: "POST", headers: { "Content-Type": "application/json", Cookie: keks, Origin: BASIS },
  body: JSON.stringify({ text }),
});
await schreib(kFilipe, "Servus, hier ist Filipe.");
await schreib(kLuna, "Und hier Luna.");

/* Luna stellt eine Farbe ein. */
const setzen = await fetch(BASIS + "/workspace/api/chat/kachel", {
  method: "PUT", headers: { "Content-Type": "application/json", Cookie: kLuna, Origin: BASIS },
  body: JSON.stringify({ kachel: "moos" }),
});
ok(setzen.ok, `Luna stellt ihre Kachel ein (${setzen.status})`);

const boese = await fetch(BASIS + "/workspace/api/chat/kachel", {
  method: "PUT", headers: { "Content-Type": "application/json", Cookie: kLuna, Origin: BASIS },
  body: JSON.stringify({ kachel: "url(javascript:0)" }),
});
ok(boese.status === 400,
  `Gegenprobe: ein erfundener Wert wird abgelehnt (${boese.status}) — eine Regel, die nur im Formular steht, ist keine Regel`);

/* FILIPE SIEHT LUNAS FARBE — das ist der Sinn der Sache. */
const verlauf = await (await fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`,
  { headers: { Cookie: kFilipe } })).json();
const vonLuna = (verlauf.nachrichten || []).find((n) => n.von === "Luna");
ok(vonLuna?.von_kachel === "moos",
  `Filipe bekommt Lunas Kachel mitgeliefert (${vonLuna?.von_kachel})`);
/* UND WER NICHTS EINGESTELLT HAT, TRÄGT TROTZDEM EINE FARBE.
   ---------------------------------------------------------------------
   Hier stand bis zum 22.09.2026 das Gegenteil: `ok(!vonFilipe
   ?.von_kachel, "und seine eigene bleibt Standard …")`. Das war
   richtig, solange „nichts eingestellt" Grau hieß.

   Gemessen an der Live-Datenbank hatten vier von fünfzehn Personen
   eine Farbe gewählt — der Chat war also für alle anderen einfarbig,
   egal wie gut die zwölf Töne gerechnet sind. Seitdem bekommt jede
   Person von sich aus einen der elf bunten Töne, stabil aus ihrer ID.

   Geprüft wird jetzt beides, und das Zweite ist das Wichtigere:
   dass die Farbe SICH NICHT ÄNDERT. Eine Person, die heute grün und
   morgen rot ist, ist schlechter als eine ohne Farbe — man merkt sich
   die falsche. */
const vonFilipe = (verlauf.nachrichten || []).find((n) => n.von === "Filipe");
const bunteToene = CHAT_KACHELN.filter((k) => k.wert !== "grund").map((k) => k.wert);
ok(bunteToene.length >= 8 && bunteToene.includes(vonFilipe?.von_kachel),
  `und wer nichts eingestellt hat, trägt trotzdem eine Farbe `
  + `(${vonFilipe?.von_kachel})`);

/* Zweimal fragen muss dasselbe ergeben. */
const nochmal = await (await fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`,
  { headers: { Cookie: kFilipe } })).json();
const vonFilipe2 = (nochmal.nachrichten || []).find((n) => n.von === "Filipe");
ok(!!vonFilipe?.von_kachel && vonFilipe2?.von_kachel === vonFilipe?.von_kachel,
  `und es ist beim zweiten Abruf dieselbe (${vonFilipe2?.von_kachel})`);

/* Der Wähler darf sie NICHT als gewählt anhaken — sonst sähe es aus,
   als hätte man selbst etwas eingestellt, und der neutrale Ton wäre
   unerreichbar geworden. */
const meins = await (await fetch(BASIS + "/workspace/api/chat/kacheln",
  { headers: { Cookie: kFilipe } })).json();
ok(meins.meine == null && bunteToene.includes(meins.automatisch),
  `im Wähler steht trotzdem nichts angehakt (meine=${meins.meine}), `
  + `und die automatische wird genannt (${meins.automatisch})`);

const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch();
try {
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  await ctx.addCookies(kFilipe.split("; ").filter(Boolean).map((t) => {
    const [name, ...rest] = t.split("=");
    return { name, value: rest.join("="), domain: "127.0.0.1", path: "/" };
  }));
  const s = await ctx.newPage();
  const konsole = [];
  s.on("console", (m) => { if (m.type() === "error" && !/favicon|ERR_/i.test(m.text())) konsole.push(m.text()); });
  s.on("pageerror", (e) => konsole.push("Absturz: " + e.message));

  await s.goto(BASIS + "/workspace/chat.html", { waitUntil: "networkidle" });
  await s.waitForTimeout(1400);
  await s.click(".chat-raum");
  await s.waitForTimeout(1200);

  /* ==== DIE EIGENTLICHE MESSUNG: SCHEINT DAS BILD DURCH? ===========

     Der erste Anlauf las `backgroundColor` und pruefte den Alphawert.
     Das war falsch, und zwar auf eine Art, die fast durchgegangen
     waere: Eine Kachel mit einem VERLAUF hat `backgroundColor:
     rgba(0,0,0,0)` -- der Verlauf steht in `background-image`. Die
     Pruefung meldete „durchsichtig" bei einer Kachel, die voellig
     deckt, und haette umgekehrt eine halbtransparente Verlaufskachel
     durchgelassen.

     GEMESSEN WIRD JETZT DIE SACHE SELBST: zweimal dasselbe Bildpunkt-
     feld, einmal mit und einmal ohne Buehnenbild. Deckt die Kachel,
     sind beide Aufnahmen an dieser Stelle identisch. Scheint das Bild
     durch, unterscheiden sie sich.

     DIE GEGENPROBE IST EINGEBAUT und kostet nichts: An der Flaeche
     ZWISCHEN den Kacheln MUSS sich etwas aendern. Tut sie das nicht,
     misst der Vergleich gar nichts -- etwa weil das Bild in dieser
     Umgebung nie geladen wurde. Genau die Sorte stiller Erfolg, vor
     der die Hausregel zum dritten Ausgang warnt. */
  const punkte = await s.evaluate(() => {
    const b = document.querySelector('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase')
      || document.querySelector(".chat-nachricht__blase");
    const v = document.querySelector(".chat__verlauf");
    if (!b || !v) return null;
    const rb = b.getBoundingClientRect(), rv = v.getBoundingClientRect();
    return {
      /* Mitten in der Kachel -- nicht am Rand, dort liegen Kante und
         abgerundete Ecke. */
      kachel: { x: Math.round(rb.left + rb.width / 2), y: Math.round(rb.top + rb.height / 2) },
      /* Und ein Fleck im Verlauf, auf dem sicher keine Kachel liegt:
         ganz rechts aussen, wo die eigenen Nachrichten nicht hinreichen. */
      frei: { x: Math.round(rv.right - 6), y: Math.round(rv.top + rv.height / 2) },
    };
  });
  ok(!!punkte, "Kachel und freie Fläche gefunden");

  /* Playwright kann einen Ausschnitt aufnehmen -- ein Bildpunkt reicht. */
  const punktFarbe = async (pkt) => {
    const bild = await s.screenshot({
      clip: { x: pkt.x, y: pkt.y, width: 1, height: 1 }, type: "png",
    });
    /* Der Farbwert steckt im PNG. Statt es zu entpacken, wird die
       AUFNAHME selbst verglichen: Zwei Aufnahmen desselben Bildpunkts
       sind byteweise gleich, wenn die Farbe gleich ist. Das ist genau
       die Frage, und sie braucht keinen Decoder. */
    return bild.toString("base64");
  };

  const mitBild = { kachel: await punktFarbe(punkte.kachel), frei: await punktFarbe(punkte.frei) };
  await s.addStyleTag({ content: "body.start::before { display: none !important; }" });
  await s.waitForTimeout(350);
  const ohneBild = { kachel: await punktFarbe(punkte.kachel), frei: await punktFarbe(punkte.frei) };

  /* ZUERST DIE GEGENPROBE. Ohne sie waere die Hauptmessung wertlos. */
  ok(mitBild.frei !== ohneBild.frei,
    "Gegenprobe: auf der freien Fläche ändert sich etwas, wenn das Bild weg ist — es ist also wirklich da");
  ok(mitBild.kachel === ohneBild.kachel,
    mitBild.kachel === ohneBild.kachel
      ? "auf der Kachel ändert sich NICHTS — sie deckt, das Bild kommt nicht durch die Schrift"
      : "das Bühnenbild scheint durch die Kachel — dort läge Schrift auf einem Foto");

  /* Die Fläche darum MUSS durchlassen, sonst gäbe es gar kein Bild zu
     sehen -- das ist die Hälfte des Wunsches. */
  const flaeche = await s.evaluate(() => {
    const c = getComputedStyle(document.querySelector(".chat")).backgroundColor;
    /* ZWEI SCHREIBWEISEN, NICHT EINE (20.09.2026).

       Der erste Anlauf suchte nur `rgba(...)`. Chrome gibt das
       Ergebnis von `color-mix()` aber als `color(srgb r g b / a)`
       zurueck -- die Suche fand nichts, der Rueckfall war „Alpha 1",
       und die Pruefung meldete „deckt" bei einer Flaeche, die
       durchscheint. Ein Messfehler, der genau das Gegenteil behauptet. */
    const alphaVon = (farbe) => {
      const rgba = farbe.match(/rgba?\(([^)]+)\)/);
      if (rgba) {
        const t = rgba[1].split(",").map((x) => parseFloat(x));
        return t.length > 3 ? t[3] : 1;
      }
      const srgb = farbe.match(/color\([^/)]*\/\s*([\d.]+)\s*\)/);
      if (srgb) return parseFloat(srgb[1]);
      return farbe === "transparent" ? 0 : 1;
    };
    return { alpha: alphaVon(c), roh: c,
      buehne: getComputedStyle(document.body, "::before").backgroundImage };
  });
  ok(flaeche.alpha < 0.98,
    `die Fläche um die Kacheln lässt durch (Alpha ${flaeche.alpha.toFixed(2)}, ${flaeche.roh})`);
  ok(/\.webp|\.png|\.jpg/i.test(flaeche.buehne || ""),
    `und dahinter steht wirklich ein Bild (…${(flaeche.buehne || "").slice(-30)}`);

  const lage = await s.evaluate(() => ({
    blasen: document.querySelectorAll(".chat-nachricht__blase").length,
    knopf: !!document.querySelector(".chat__kachelknopf:not([hidden])"),
  }));
  ok(lage.blasen >= 2, `die Nachrichten stehen in Kacheln (${lage.blasen})`);

  ok(lage.knopf, "der Knopf für die eigene Kachel steht da");

  /* Und er lässt sich bedienen. */
  await s.click(".chat__kachelknopf");
  await s.waitForTimeout(400);
  const wahl = await s.evaluate(() => {
    const dlg = document.querySelector("#kachel-wahl[open]");
    const toene = [...document.querySelectorAll(".chat-kachelwahl__ton")];
    return {
      offen: !!dlg,
      toene: toene.length,
      mitNamen: toene.filter((t) => (t.getAttribute("aria-label") || "").length > 2).length,
      hoch: toene.length ? Math.round(toene[0].getBoundingClientRect().height) : 0,
    };
  });
  ok(wahl.offen, "die Auswahl geht auf");
  ok(wahl.toene === CHAT_KACHELN.length,
    `mit allen ${CHAT_KACHELN.length} Tönen (${wahl.toene})`);
  ok(wahl.mitNamen === wahl.toene,
    `jeder trägt seinen Namen (${wahl.mitNamen}) — wer Farben schlecht unterscheidet, wählt sonst blind`);
  ok(wahl.hoch >= 44, `und ist am Finger treffbar (${wahl.hoch} px)`);

  /* Eine andere wählen und nachsehen, ob die eigenen Kacheln sofort
     umspringen -- ohne Neuladen. */
  /* DIE FARBE STECKT IM VERLAUF, nicht in `backgroundColor`.

     Auch das war erst falsch: Eine Kachel mit `background:
     linear-gradient(...)` hat `backgroundColor: rgba(0,0,0,0)` -- der
     Vergleich lieferte zweimal „durchsichtig" und meldete „springt
     nicht um" bei einer Kachel, die sehr wohl umsprang. Beides wird
     gelesen und aneinandergehaengt; dann ist es egal, welche der
     beiden Stellen die Farbe traegt. */
  const kachelBild = () => s.evaluate(() => {
    const b = document.querySelector('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase');
    const c = getComputedStyle(b);
    return c.backgroundColor + " | " + c.backgroundImage;
  });
  const vorher = await kachelBild();
  /* WELCHEN TON ANKLICKEN? EINEN AUS DER LISTE, NICHT EINEN GEMERKTEN.
     Hier stand `data-wert="wein"` fest im Text. Am 22.09.2026 wurden
     die zwoelf Toene neu gerechnet, `wein` fiel weg -- und die Pruefung
     wartete 30 Sekunden auf einen Knopf, den es nicht mehr gibt, und
     brach ab. Der Fehler lag nicht im Chat, sondern in dieser Zeile.

     Genommen wird jetzt der erste Ton, der NICHT die Voreinstellung
     ist. Damit ist garantiert, dass sich etwas aendert -- und die
     Zeile ueberlebt jede kuenftige Umbenennung. */
  const probeTon = CHAT_KACHELN.find((k) => k.wert !== "grund");
  if (!probeTon) {
    ok(false, "KONNTE NICHT NACHSEHEN: es gibt keinen Ton ausser dem Standard");
    throw new Error("keine Toene zum Pruefen");
  }
  await s.click(`.chat-kachelwahl__ton[data-wert="${probeTon.wert}"]`);
  await s.waitForTimeout(600);
  const nachher = await kachelBild();
  ok(vorher !== nachher,
    `die eigenen Kacheln springen sofort um (${vorher.slice(0, 46)} → ${nachher.slice(0, 46)})`);

  /* UND ES IST GESPEICHERT, nicht nur gemalt. */
  const nachSetzen = await (await fetch(BASIS + "/workspace/api/chat/kacheln",
    { headers: { Cookie: kFilipe } })).json();
  ok(nachSetzen.meine === probeTon.wert,
    `und die Wahl ist gespeichert, nicht nur gemalt `
    + `(${nachSetzen.meine}, erwartet ${probeTon.wert})`);

  ok(konsole.length === 0,
    konsole.length ? "Fehler im Browser: " + konsole[0].slice(0, 80) : "keine Fehler im Browser");
  await ctx.close();
} finally {
  await browser.close();
}

console.log(`\n${fehler ? fehler + " FEHLER" : "Alles in Ordnung"} — ${geprueft} Prüfungen\n`);
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(fehler ? 1 : 0);