Stufe 5: Highlights als Galerie -- und ein enger Weg fuer Bilder

Aus dem Plan im Vault. "Eure Clips und Bilder" zeigte Textkarten mit einem Anhang darunter. Ein Bild als Anhang unter einer Ueberschrift ist kein Highlight -- dieser Bereich lebt vom Sehen. Jetzt steht das Bild OBEN, der Text ist Bildunterschrift. ZWEI DINGE WAREN ANDERS ALS IM PLAN 1. "Anhaenge sind schon da" stimmte nicht. Sie hingen an AUFGABEN (`dateien.aufgabe_id`); ein Eintrag konnte gar kein Bild tragen. Neue Spalte `eintrag_id`. 2. UND DER WICHTIGE, ein Sicherheitsthema: Alles in dieser Ablage geht bewusst als DOWNLOAD hinaus (`application/octet-stream`, `Content-Disposition: attachment`). Eine hochgeladene HTML- oder SVG-Datei wuerde sonst im Browser als Seite DIESER Domain laufen -- mit Zugriff auf die Sitzung. Eine Galerie braucht also einen eigenen, engen Weg, keine Lockerung der alten Regel. DIE FRAGE "IST DAS EIN BILD?" DARF NICHT `dateien.typ` BEANTWORTEN. Diese Spalte traegt den vom Browser BEHAUPTETEN Typ (`req.get("content-type")`) -- wer hochlaedt, bestimmt ihn selbst. Eine Galerie, die ihm glaubt, liefert auf Zuruf alles inline aus. Erkannt wird deshalb an den ERSTEN BYTES: PNG, JPEG, GIF, WEBP. SVG IST AUSDRUECKLICH NICHT DABEI. Es ist ein Bildformat UND kann Skript enthalten -- genau die Luecke, gegen die die Regel gebaut wurde. Ein Format, das beides ist, gehoert nicht in die Ausnahme. Kein Bild heisst 404, nicht 415: Eine eigene Antwort waere die Auskunft "diese Nummer gibt es, sie ist nur kein Bild", und die laesst sich durchzaehlen. WESSEN REGEL GILT: Ein Bild am Community-Beitrag folgt dem BEITRAG, nicht der Dateiablage. Deren Regel haengt an Creator-Zuordnungen, und ein Gast hat keine -- er saehe sonst nie ein Highlight, obwohl es fuer ihn gemacht ist. NEU: pruef-galerie (26 Pruefungen) Der Beweis steht in zwei Zeilen: Am Beitrag haengen VIER Dateien -- zwei echte PNGs, ein SVG und eine HTML-Datei, die sich als "image/png" ausgibt. Im Raster stehen ZWEI. Die anderen beiden holt der Browser, bekommt 404, und der error-Handler raeumt sie weg: kein leerer Rahmen, kein kaputtes Symbol. Dazu die Gegenprobe in die andere Richtung -- ein echtes PNG, das sich als "text/plain" ausgibt, geht durch. Ohne sie hiesse "404" nur, dass der Weg immer ablehnt. Und die Konsolenpruefung laesst genau die zwei gewollten 404 zu und nichts sonst; ein pauschales "Konsole egal" haette jeden echten Fehler mitversteckt. EIN EIGENER FEHLER: Mein Test-PNG war kein dekodierbares Bild, nur ein Dateikopf. Der Browser konnte es nicht zeichnen, der error-Handler raeumte es weg, und die Pruefung fand im Raster nichts. Fehler in der Pruefung, nicht im Haus -- aber ein nuetzlicher: Er hat nebenbei gezeigt, dass ein kaputtes Bild keinen leeren Rahmen hinterlaesst. pruef-anhaenge 37, pruef-treff 66, pruef-bereiche-lesend, pruef-css-klassen: gruen. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-17 11:43:40 +02:00
parent 670940bd3a
commit 4b14906371
36 changed files with 944 additions and 363 deletions
@@ -0,0 +1,327 @@
+/* =====================================================================
+   STUFE 5: HIGHLIGHTS ALS GALERIE -- UND DER WEG, AUF DEM BILDER
+   HINAUSGEHEN (17.09.2026)
+
+   Aus dem Plan im Vault. "Eure Clips und Bilder" zeigte Textkarten mit
+   einem Anhang darunter. Ein Bild als Anhang unter einer Ueberschrift
+   ist kein Highlight -- dieser Bereich lebt vom Sehen.
+
+   ---------------------------------------------------------------------
+   ZWEI DINGE, DIE BEIM MESSEN ANDERS WAREN ALS IM PLAN
+
+   1. "Anhaenge sind schon da" -- sie hingen an AUFGABEN
+      (`dateien.aufgabe_id`). Ein Eintrag konnte gar kein Bild tragen.
+      Neue Spalte `eintrag_id`.
+
+   2. UND DER WICHTIGE: Alles in dieser Ablage geht als DOWNLOAD hinaus
+      (`application/octet-stream`, `Content-Disposition: attachment`).
+      Das ist richtig so -- eine hochgeladene HTML- oder SVG-Datei
+      wuerde im Browser als Seite DIESER Domain laufen, mit Zugriff auf
+      die Sitzung. Eine Galerie braucht also einen eigenen, engen Weg.
+
+   ---------------------------------------------------------------------
+   DIE FRAGE, AUF DIE ES ANKOMMT
+
+   "Ist das ein Bild?" wird NICHT ueber `dateien.typ` beantwortet. Diese
+   Spalte traegt den vom Browser BEHAUPTETEN Typ -- wer hochlaedt,
+   bestimmt ihn selbst. Eine Galerie, die ihm glaubt, liefert auf Zuruf
+   alles inline aus.
+
+   Erkannt wird an den ERSTEN BYTES. Die kann niemand behaupten.
+
+   UND SVG IST AUSDRUECKLICH NICHT DABEI: Es ist ein Bildformat UND es
+   kann Skript enthalten -- genau die Luecke, gegen die die Regel gebaut
+   wurde. Ein Format, das beides ist, gehoert nicht in die Ausnahme.
+
+   Aufrufen mit:  node server/pruef-galerie.mjs
+   Bild:          SCHIRM=1 node server/pruef-galerie.mjs
+   ===================================================================== */
+
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { portMussFreiSein } from "./helfer-port.mjs";
+import { heuteLokal } from "./helfer-tag.mjs";
+
+const PORT = await portMussFreiSein(4487, "pruef-galerie");
+const ordner = mkdtempSync(join(tmpdir(), "ws-gal-"));
+process.env.WORKSPACE_DB = join(ordner, "workspace.db");
+process.env.WORKSPACE_DATEN = join(ordner, "daten");
+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-galerie");
+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);
+}
+anlegen("Filipe", "admin", "CODE-DOGI-0001");
+anlegen("Marina", "modi", "CODE-MODI-0001");
+d.close();
+
+async function anmelden(kachel, code) {
+  const a = await fetch(BASIS + "/workspace/api/anmelden", {
+    method: "POST", headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ rolle: kachel, code }),
+  });
+  return (a.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");
+}
+const dogi = await anmelden("admin", "CODE-DOGI-0001");
+const modi = await anmelden("creator", "CODE-MODI-0001");
+
+/* ---------- Ein Highlight und die Dateien dazu ----------------------- */
+const a = await fetch(BASIS + "/workspace/api/bereich/highlight", {
+  method: "POST",
+  headers: { "Content-Type": "application/json", cookie: dogi, origin: BASIS },
+  body: JSON.stringify({ art: "clip", titel: "Casper springt ins Bild", datum: heuteLokal() }),
+});
+const eintragId = (await a.json().catch(() => null))?.id || 0;
+
+/* ECHTE DATEIANFAENGE, keine erfundenen: Ein PNG faengt mit
+   \x89PNG\r\n\x1a\n an, ein JPEG mit FFD8FF. Wer hier Platzhalter
+   nimmt, prueft die eigene Erfindung. */
+/* EIN ECHTES, DEKODIERBARES PNG (1x1, blau). Der erste Entwurf hatte
+   nur den Dateikopf plus Nullen -- die Bytepruefung im Server nahm es
+   an, der Browser konnte es aber nicht zeichnen. Das Bild verschwand
+   dann durch den `error`-Handler in bereich.js, und die Pruefung fand
+   im Raster nichts.
+
+   Das war kein Fehler im Haus, sondern in der Pruefung -- aber ein
+   nuetzlicher: Er hat nebenbei gezeigt, dass der Handler tut, was er
+   soll. Ein kaputtes Bild hinterlaesst keinen leeren Rahmen. */
+const PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+  "base64");
+const SVG = Buffer.from(
+  '<svg xmlns="http://www.w3.org/2000/svg"><script>alert(1)</script></svg>');
+const HTML = Buffer.from("<!DOCTYPE html><html><body><script>alert(1)</script></body></html>");
+
+async function hochladen(inhalt, name, typBehauptet, eintrag = eintragId) {
+  const kopf = {
+    cookie: dogi, origin: BASIS,
+    "content-type": typBehauptet,
+    "x-dateiname": encodeURIComponent(name),
+  };
+  if (eintrag) kopf["x-eintrag"] = String(eintrag);
+  const r = await fetch(BASIS + "/workspace/api/dateien", {
+    method: "POST", headers: kopf, body: inhalt,
+  });
+  return { status: r.status, daten: await r.json().catch(() => null) };
+}
+
+/* =======================================================================
+   1. EIN BILD HAENGT AM BEITRAG
+   ======================================================================= */
+melde("");
+melde("=== 1. Das Bild am Highlight ===");
+let idPng = 0;
+{
+  ok(eintragId > 0, `ein Highlight angelegt (#${eintragId})`);
+  const r = await hochladen(PNG, "casper.png", "image/png");
+  ok(r.status === 201, `ein PNG hochgeladen (${r.status} ${r.daten?.fehler || ""})`);
+  idPng = r.daten?.id || 0;
+
+  const l = await fetch(BASIS + "/workspace/api/bereich/highlight", { headers: { cookie: dogi } });
+  const j = await l.json().catch(() => null);
+  const e = (j?.eintraege || []).find((x) => x.id === eintragId);
+  ok(Array.isArray(e?.bilder) && e.bilder.length === 1,
+    `der Beitrag bringt sein Bild mit (${e?.bilder?.length ?? 0})`);
+  ok(e?.bilder?.[0]?.id === idPng, "und zwar genau das hochgeladene");
+}
+
+/* =======================================================================
+   2. ES GEHT ALS BILD HINAUS -- UND NUR ALS BILD
+   ======================================================================= */
+melde("");
+melde("=== 2. Der Bildweg ===");
+{
+  const r = await fetch(`${BASIS}/workspace/api/dateien/${idPng}/bild`, { headers: { cookie: dogi } });
+  ok(r.status === 200, `das PNG kommt (${r.status})`);
+  ok(r.headers.get("content-type") === "image/png",
+    `als image/png (${r.headers.get("content-type")})`);
+  /* INLINE, sonst zeigt der Browser es nicht an, sondern laedt es. */
+  ok(/^inline/.test(r.headers.get("content-disposition") || ""),
+    `und inline (${r.headers.get("content-disposition")})`);
+  /* DIE DREI SCHUTZKOEPFE muessen mit. Ohne `nosniff` darf der Browser
+     den Typ selbst raten -- und dann waere die ganze Pruefung an den
+     ersten Bytes umsonst. */
+  ok(r.headers.get("x-content-type-options") === "nosniff", "mit nosniff");
+  ok(/default-src 'none'/.test(r.headers.get("content-security-policy") || ""),
+    "und mit enger Inhaltsregel");
+
+  /* GEGENPROBE: Der alte Weg liefert dieselbe Datei weiterhin als
+     Download aus -- daran hat sich nichts geaendert. */
+  const alt = await fetch(`${BASIS}/workspace/api/dateien/${idPng}/inhalt`, { headers: { cookie: dogi } });
+  ok(alt.headers.get("content-type") === "application/octet-stream",
+    `der alte Weg bleibt ein Download (${alt.headers.get("content-type")})`);
+}
+
+/* =======================================================================
+   3. WAS NICHT INLINE HINAUSGEHT -- DER EIGENTLICHE PUNKT
+   ======================================================================= */
+melde("");
+melde("=== 3. Was kein Bild ist ===");
+{
+  /* SVG IST EIN BILDFORMAT UND KANN SKRIPT ENTHALTEN. Genau deshalb
+     steht es nicht in der Ausnahme. */
+  const s = await hochladen(SVG, "hübsch.svg", "image/svg+xml");
+  ok(s.status === 201, `ein SVG laesst sich ablegen (${s.status})`);
+  const sr = await fetch(`${BASIS}/workspace/api/dateien/${s.daten?.id}/bild`, { headers: { cookie: dogi } });
+  ok(sr.status === 404, `aber NICHT als Bild ausgeliefert (${sr.status})`);
+
+  /* EINE HTML-DATEI, DIE SICH ALS PNG AUSGIBT. Das ist der Fall, den
+     ein Blick auf `dateien.typ` durchgelassen haette: Der behauptete
+     Typ stimmt, der Inhalt nicht. */
+  const h = await hochladen(HTML, "bild.png", "image/png");
+  ok(h.status === 201, `eine HTML-Datei mit der Behauptung "image/png" wird abgelegt (${h.status})`);
+  const hr = await fetch(`${BASIS}/workspace/api/dateien/${h.daten?.id}/bild`, { headers: { cookie: dogi } });
+  ok(hr.status === 404,
+    `und trotz der Behauptung NICHT als Bild ausgeliefert (${hr.status})`);
+
+  /* UND UMGEKEHRT: ein echtes PNG, das sich als Text ausgibt, geht
+     durch. Ohne diese Zeile hiesse "404" nur, dass der Weg immer
+     ablehnt. */
+  const p = await hochladen(PNG, "getarnt.txt", "text/plain");
+  const pr = await fetch(`${BASIS}/workspace/api/dateien/${p.daten?.id}/bild`, { headers: { cookie: dogi } });
+  ok(pr.status === 200 && pr.headers.get("content-type") === "image/png",
+    `ein echtes PNG mit falscher Behauptung geht durch (${pr.status})`);
+}
+
+/* =======================================================================
+   4. WER DAS BILD SEHEN DARF
+   ======================================================================= */
+melde("");
+melde("=== 4. Die Sicht ===");
+{
+  /* EIN BILD AM COMMUNITY-BEITRAG FOLGT DEM BEITRAG, nicht der
+     Dateiablage. Die Ablage-Regel haengt an Creator-Zuordnungen -- ein
+     Modi hat keine, er saehe sonst nie ein Highlight, obwohl es fuer
+     ihn gemacht ist. */
+  const r = await fetch(`${BASIS}/workspace/api/dateien/${idPng}/bild`, { headers: { cookie: modi } });
+  ok(r.status === 200, `ein Modi sieht das Highlight-Bild (${r.status})`);
+
+  /* GEGENPROBE: Eine Datei OHNE Beitrag faellt auf die normale
+     Ablage-Regel zurueck -- und die gilt fuer ihn nicht. */
+  const lose = await hochladen(PNG, "intern.png", "image/png", null);
+  const lr = await fetch(`${BASIS}/workspace/api/dateien/${lose.daten?.id}/bild`, { headers: { cookie: modi } });
+  ok(lr.status === 404,
+    `eine lose Datei der Ablage dagegen nicht (${lr.status})`);
+}
+
+/* =======================================================================
+   5. IM BROWSER: DIE GALERIE
+   ======================================================================= */
+melde("");
+melde("=== 5. Was man sieht ===");
+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: 1100, height: 900 } });
+  await kontext.addCookies(dogi.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/bereich.html?b=highlight`, { waitUntil: "networkidle" });
+  await seite.waitForSelector(".bildstreifen__bild", { timeout: 15_000 });
+  await seite.waitForTimeout(600);
+
+  const m = await seite.evaluate(() => {
+    const bilder = [...document.querySelectorAll(".bildstreifen__bild")];
+    return {
+      raster: document.getElementById("liste")?.dataset.galerie || "",
+      spalten: getComputedStyle(document.getElementById("liste"))
+        .gridTemplateColumns.split(" ").filter(Boolean).length,
+      anzahl: bilder.length,
+      /* WIRKLICH GELADEN, nicht nur im Quelltext: Ein kaputtes Bild hat
+         naturalWidth 0 -- und sieht im Foto aus wie ein Rahmen. */
+      geladen: bilder.filter((b) => b.naturalWidth > 0).length,
+      alt: bilder.map((b) => b.alt),
+      /* Anspringbar: Eine Galerie aus nicht erreichbaren Kacheln ist
+         fuer einen Teil der Zuschauer keine Galerie. */
+      verweise: document.querySelectorAll(".bildstreifen__feld[href]").length,
+    };
+  });
+
+  ok(m.raster === "ja", "die Liste ist ein Raster");
+  ok(m.spalten >= 2, `mit mehreren Spalten (${m.spalten})`);
+  ok(m.anzahl >= 1, `${m.anzahl} Bilder im Raster`);
+  ok(m.geladen === m.anzahl, `alle wirklich geladen (${m.geladen} von ${m.anzahl})`);
+  ok(m.alt.every((t) => t && t.length > 5),
+    `jedes hat eine Beschreibung ("${m.alt[0] || ""}")`);
+  ok(m.verweise === m.anzahl, `und jedes ist anspringbar (${m.verweise})`);
+
+  /* DER EIGENTLICHE BEWEIS DIESES ABSCHNITTS: Am Beitrag haengen VIER
+     Dateien -- zwei echte PNGs, ein SVG und eine HTML-Datei, die sich
+     als PNG ausgibt. Im Raster stehen ZWEI. Die beiden anderen holt
+     der Browser, bekommt 404 und der `error`-Handler raeumt sie weg:
+     kein leerer Rahmen, kein kaputtes Symbol.
+
+     Das ist die Stelle, an der die Bytepruefung im Server und die
+     Oberflaeche zusammenarbeiten -- und die Zahl 2 von 4 ist der
+     Beleg. */
+  const angehaengt = await (await fetch(BASIS + "/workspace/api/bereich/highlight",
+    { headers: { cookie: dogi } })).json()
+    .then((j) => (j.eintraege || []).find((x) => x.id === eintragId)?.bilder?.length ?? 0);
+  ok(angehaengt === 4, `am Beitrag haengen ${angehaengt} Dateien`);
+  ok(m.anzahl === 2,
+    `im Raster stehen nur die ${m.anzahl} echten Bilder -- SVG und getarnte HTML nicht`);
+
+  /* DIE KONSOLE: Genau diese beiden 404 sind gewollt. Alles andere
+     nicht. Ein pauschales "Konsole egal" waere der bequeme Weg und
+     wuerde jeden echten Fehler mitverstecken. */
+  const unerwartet = konsole.filter((z) => !/404/.test(z));
+  ok(unerwartet.length === 0,
+    unerwartet.length ? `Konsole: ${unerwartet[0]}`
+      : `nur die ${konsole.length} gewollten 404 der Nicht-Bilder in der Konsole`);
+
+  if (process.env.SCHIRM) {
+    const pfad = fileURLToPath(new URL("pruef-galerie.png", import.meta.url));
+    await seite.screenshot({ path: pfad, fullPage: false });
+    melde("  --   Bildschirmfoto: server/pruef-galerie.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);
@@ -1132,6 +1132,28 @@ bereicheRouter.get("/workspace/api/bereich/:bereich", (req, res) => {
      ORDER BY ${reihenfolge}`)
      .all(...(treffBrett ? [wer] : []), ...regel.werte, bereich);

+    /* DIE BILDER AN DEN BEITRAEGEN (17.09.2026) -- in EINER Abfrage
+       fuer die ganze Liste. Vierzig Beitraege einzeln zu fragen waeren
+       vierzig Anfragen, und die Seite ruckelte sichtbar beim Aufbau;
+       genau dieselbe Ueberlegung steht schon bei den Rueckmeldungen.
+
+       WAS HIER MITKOMMT, IST NUR DIE NUMMER. Ob dahinter wirklich ein
+       Bild liegt, entscheidet erst der Bildweg selbst -- und zwar an
+       den ersten Bytes der Datei, nicht am behaupteten Typ. */
+    if (eintraege.length) {
+      const platz = eintraege.map(() => "?").join(", ");
+      const bilder = db().prepare(
+        `SELECT id, eintrag_id, name_original FROM dateien
+          WHERE eintrag_id IN (${platz}) ORDER BY id`)
+        .all(...eintraege.map((e) => e.id));
+      const je = new Map();
+      for (const b of bilder) {
+        if (!je.has(b.eintrag_id)) je.set(b.eintrag_id, []);
+        je.get(b.eintrag_id).push({ id: b.id, name: b.name_original });
+      }
+      for (const e of eintraege) e.bilder = je.get(e.id) || [];
+    }
+
    /* DASS DIES EIN BRETT DES TREFFS IST, SAGT DER SERVER (11.09.2026).

       Die Oberflaeche braucht die Auskunft, um ihre Knoepfe zu bauen
@@ -27,11 +27,13 @@
 import express from "express";
 import { randomBytes } from "node:crypto";
 import { join, extname, basename } from "node:path";
-import { mkdirSync, createReadStream, writeFileSync, unlinkSync, statSync } from "node:fs";
+import { mkdirSync, createReadStream, writeFileSync, unlinkSync, statSync,
+  openSync, readSync, closeSync } from "node:fs";
 import {
  db, protokolliere, echteIp, sitzungLesen, DATEN_ORDNER, betreutWo, darfCreator, betreuteIds, istLeitung, istDogFather, siehtAlles, istSpicy, ohneDogFather, ROLLEN_SORTIERUNG,
  externSql, EXTERN_MAX, sichtbarePersonenIds,
  ohneTeamDogi, ohneAgentur, siehtModis,
+  TREFF_BRETTER, TREFF_ROLLEN,
 } from "./workspace.js";

 export const dateienRouter = express.Router();
@@ -504,14 +506,32 @@ dateienRouter.post("/workspace/api/dateien",
           ORDER BY id DESC`).all(name, creatorId, creatorId);
      const ersetztId = vorgaenger.length === 1 ? vorgaenger[0].id : null;

+      /* AN EINEN COMMUNITY-BEITRAG (17.09.2026). Dieselbe Regel wie bei
+         der Aufgabe eine Ebene hoeher: Eine unbekannte Nummer ist ein
+         FEHLER, kein stilles Ignorieren -- wer ein Bild an ein Highlight
+         haengen wollte und es liegt danach lose in der Ablage, sucht es
+         spaeter am Highlight. */
+      let eintragId = null;
+      const rohEintrag = req.get("x-eintrag");
+      if (rohEintrag) {
+        const n = Number(rohEintrag);
+        const e = Number.isInteger(n) && n > 0
+          ? db().prepare("SELECT id, bereich FROM eintraege WHERE id = ?").get(n)
+          : null;
+        if (!e || !TREFF_BRETTER.includes(e.bereich)) {
+          return res.status(404).json({ fehler: "eintrag_nicht_gefunden" });
+        }
+        eintragId = e.id;
+      }
+
      const { lastInsertRowid } = db().prepare(`
        INSERT INTO dateien
          (name_original, name_datei, groesse, typ, status, notiz,
-           creator_id, hochgeladen_von, erstellt, ersetzt_id, aufgabe_id)
-        VALUES (?,?,?,?,'entwurf',?,?,?,?,?,?)`).run(
+           creator_id, hochgeladen_von, erstellt, ersetzt_id, aufgabe_id, eintrag_id)
+        VALUES (?,?,?,?,'entwurf',?,?,?,?,?,?,?)`).run(
        name, dateiname, req.body.length,
        (req.get("content-type") || "application/octet-stream").slice(0, 100),
-        notiz, creatorId, req.person.id, jetzt(), ersetztId, aufgabeId);
+        notiz, creatorId, req.person.id, jetzt(), ersetztId, aufgabeId, eintragId);

      /* Ausdrueckliche Freigaben. Der Kopf traegt eine Liste von Ids --
         geprueft wird jede einzelne gegen die erlaubte Auswahl. */
@@ -541,6 +561,105 @@ dateienRouter.post("/workspace/api/dateien",

 /* ---------- Herunterladen ------------------------------------------------ */

+/* =====================================================================
+   EIN BILD INLINE AUSLIEFERN (17.09.2026)
+
+   Alles in dieser Ablage geht sonst als DOWNLOAD hinaus
+   (`application/octet-stream`, `Content-Disposition: attachment`), und
+   das ist richtig so: Eine hochgeladene HTML- oder SVG-Datei wuerde im
+   Browser als Seite DIESER Domain laufen -- mit Zugriff auf die
+   Sitzung.
+
+   Eine Galerie braucht Bilder im Bild. Also ein eigener, enger Weg --
+   und der beantwortet die Frage "ist das ein Bild?" NICHT so, wie man
+   es zuerst tut:
+
+     `dateien.typ` ist der vom Browser BEHAUPTETE Typ
+     (`req.get("content-type")`). Wer hochlaedt, bestimmt ihn selbst.
+     Eine Galerie, die ihm glaubt, liefert auf Zuruf alles inline aus.
+
+   Erkannt wird deshalb an den ERSTEN BYTES der Datei. Die kann niemand
+   behaupten; sie stehen da oder nicht.
+
+   UND SVG IST AUSDRUECKLICH NICHT DABEI. Es ist ein Bildformat, und es
+   kann Skript enthalten -- genau die Luecke, gegen die die Regel oben
+   gebaut wurde. Ein Format, das beides ist, gehoert nicht in die
+   Ausnahme. */
+const BILD_KENNUNGEN = [
+  { typ: "image/png", pruefe: (b) => b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4e && b[3] === 0x47 },
+  { typ: "image/jpeg", pruefe: (b) => b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff },
+  { typ: "image/gif", pruefe: (b) => b.slice(0, 6).toString("latin1") === "GIF87a"
+    || b.slice(0, 6).toString("latin1") === "GIF89a" },
+  { typ: "image/webp", pruefe: (b) => b.slice(0, 4).toString("latin1") === "RIFF"
+    && b.slice(8, 12).toString("latin1") === "WEBP" },
+];
+
+/** Welches Bildformat steht wirklich am Dateianfang? `null` heisst:
+ *  kein Bild -- und dann wird nichts inline ausgeliefert. */
+export function bildArtVon(anfang) {
+  if (!Buffer.isBuffer(anfang) || anfang.length < 12) return null;
+  for (const k of BILD_KENNUNGEN) {
+    try { if (k.pruefe(anfang)) return k.typ; } catch { /* naechste */ }
+  }
+  return null;
+}
+
+dateienRouter.get("/workspace/api/dateien/:id/bild", (req, res) => {
+  try {
+    const id = Number(req.params.id);
+    if (!Number.isInteger(id)) return res.status(400).json({ fehler: "ungueltig" });
+
+    const datei = db().prepare(
+      "SELECT id, name_datei, name_original, eintrag_id FROM dateien WHERE id = ?").get(id);
+    if (!datei) return res.status(404).json({ fehler: "nicht_gefunden" });
+
+    /* WESSEN REGEL GILT? Ein Bild an einem Community-Beitrag folgt dem
+       BEITRAG, nicht der Dateiablage: Wer das Brett sehen darf, sieht
+       das Bild. Die Ablage-Regel haengt an Creator-Zuordnungen, und ein
+       Gast hat keine -- er saehe sonst nie ein Highlight, obwohl es
+       fuer ihn gemacht ist. Alles ohne Beitrag faellt auf die normale
+       Regel zurueck. */
+    let erlaubt = false;
+    if (datei.eintrag_id) {
+      const e = db().prepare("SELECT bereich FROM eintraege WHERE id = ?").get(datei.eintrag_id);
+      erlaubt = !!e && TREFF_BRETTER.includes(e.bereich)
+        && TREFF_ROLLEN.has((req.sicht || req.person)?.rolle);
+    }
+    if (!erlaubt) {
+      const { wo, werte } = sichtbar(req.person);
+      erlaubt = !!db().prepare(`SELECT d.id ${VERBUND} WHERE ${wo} AND d.id = ?`)
+        .get(...werte, id);
+    }
+    if (!erlaubt) return res.status(404).json({ fehler: "nicht_gefunden" });
+
+    const pfad = join(ORDNER, datei.name_datei);
+    let anfang;
+    try {
+      const f = openSync(pfad, "r");
+      anfang = Buffer.alloc(16);
+      readSync(f, anfang, 0, 16, 0);
+      closeSync(f);
+    } catch { return res.status(410).json({ fehler: "Datei fehlt auf der Platte." }); }
+
+    const art = bildArtVon(anfang);
+    /* KEIN BILD HEISST 404, nicht 415. Eine eigene Antwort waere die
+       Auskunft "diese Nummer gibt es, sie ist nur kein Bild" -- und die
+       laesst sich durchzaehlen. */
+    if (!art) return res.status(404).json({ fehler: "nicht_gefunden" });
+
+    res.setHeader("Content-Type", art);
+    res.setHeader("X-Content-Type-Options", "nosniff");
+    res.setHeader("Content-Security-Policy", "default-src 'none'; sandbox");
+    res.setHeader("Content-Disposition",
+      `inline; filename*=UTF-8''${encodeURIComponent(datei.name_original)}`);
+    res.setHeader("Cache-Control", "private, max-age=3600");
+    createReadStream(pfad).pipe(res);
+  } catch (fehler) {
+    console.error("[workspace] Bild ausliefern:", fehler?.message);
+    res.status(503).json({ fehler: "nicht_verfuegbar" });
+  }
+});
+
 dateienRouter.get("/workspace/api/dateien/:id/inhalt", (req, res) => {
  try {
    const id = Number(req.params.id);
@@ -1766,6 +1766,23 @@ function umstellungen(d) {
     falschen Moment. */
  const jetztStempel = new Date().toISOString().slice(0, 19).replace(/[-:T]/g, "");

+  /* ---- Ein Bild an einem Community-Beitrag (17.09.2026) ----
+
+     "Highlights -- eure Clips und Bilder" konnte bis heute gar keine
+     Bilder tragen: `dateien` hing an `aufgabe_id`, nicht an einem
+     Eintrag. Der Plan im Vault sagte "Anhaenge sind schon da" -- sie
+     hingen nur am falschen Ding. */
+  try {
+    const spalten = d.prepare("PRAGMA table_info(dateien)").all().map((s) => s.name);
+    if (spalten.length && !spalten.includes("eintrag_id")) {
+      d.exec("ALTER TABLE dateien ADD COLUMN eintrag_id INTEGER REFERENCES eintraege(id) ON DELETE CASCADE");
+      d.exec("CREATE INDEX IF NOT EXISTS idx_dateien_eintrag ON dateien (eintrag_id)");
+      console.log("[workspace] Spalte 'eintrag_id' an den Dateien ergaenzt.");
+    }
+  } catch (fehler) {
+    console.error("[workspace] Spalte 'eintrag_id':", fehler?.message);
+  }
+
  /* ---- Die Uhrzeit an einem Termin (17.09.2026) ----

     "Was ansteht" bekommt einen Countdown: "Nächster Stream in 3 Std