Rueckbau: gestrichene Werkzeuge entfernt, Hub schreibt keinen Chat mehr mit

Raid-Scout, Auswertung, VOD-Kapitel, Community-Gedaechtnis, Punkteshop
und Recap samt Platzhaltern, Spezifikationen und Konfiguration. Der Hub
schickt am Chat zusaetzlich die Sendezeit mit, fuer die Uhrzeit im Pult.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitignore

@@ -32,3 +32,6 @@ docs/handbuch/*.log
 docs/handbuch/*.out
 docs/handbuch/*.toc
 docs/handbuch/*.png
+
+# Mitschriften der Browser-Automatisierung
+.playwright-mcp/

README.md

@@ -11,23 +11,18 @@ Betrieb über Docker Compose.
 Zielgröße des Kanals: ~5–30 gleichzeitige Zuschauer. Alles hier ist auf diese
 Phase optimiert — nicht auf Skalierung, sondern auf **Wachstum und Bindung**.
 
-## Die neun Tools
+## Was es gibt
 
-| # | Tool | Ordner | Zweck | Status |
+| Teil | Ordner | Zweck |
-|---|------|--------|-------|--------|
+|------|--------|-------|
-| 1 | Clip-to-Shorts | `apps/clipper` | Clips → 9:16 mit Untertiteln, Upload-fertig | geplant |
+| Hub | `apps/hub` | Läuft zentral im LXC: Chat, Overlay für OBS, Pult, Kanalpunkte, Discord, Go-Live-Ping |
-| 2 | Go-Live-Broadcaster | `apps/broadcaster` | Stream-Start → Discord/Bluesky/Instagram | geplant |
+| Overlay und Pult | `apps/overlay-server` + `apps/overlay-web` | Browser-Sources für OBS, Pult am Handy und Tablet |
-| 3 | Raid- & Netzwerk-Tool | `apps/raid-scout` | Raid-Ziele finden, Raid-Historie führen | geplant |
+| Go-Live-Ping | `apps/broadcaster` | Stream-Start → Discord |
-| 4 | Analytics-Dashboard | `apps/dashboard` | Viewer vs. Chat, Titel-Performance, Retention | geplant |
+| Ingest | `apps/ingest` | Läuft auf dem Stream-PC: OBS-Anbindung, `!clip`, 9:16-Render mit Untertiteln |
-| 5 | VOD-Kapitel | `apps/vod-chapters` | Szenen-/Kategoriewechsel → Timestamps | geplant |
-| 6 | Community-Gedächtnis | `apps/community` | Chatter-Profile, Begrüßungen, Overlay-Hinweise | geplant |
-| 7 | Chat steuert Dinge | `apps/overlay-server` + `apps/overlay-web` | Overlay, Soundboard, Minigames, Umfragen | geplant |
-| 8 | Punktesystem + Shop | `apps/loyalty` | Punkte mit echten Konsequenzen | geplant |
-| 9 | Stream-Recap | `apps/recap` | Zusammenfassung nach Streamende in Discord | geplant |
 
-Dazu der Dienst, der unter allen anderen liegt:
+Die früher geplanten Werkzeuge (Raid-Scout, Auswertung, VOD-Kapitel,
-
+Community-Gedächtnis, Punkteshop, Recap) sind gestrichen und mit ihren
-| — | **Ingest-Daemon** | `apps/ingest` | IRC + Helix → DB, Einrichtungsseite | **läuft** |
+Spezifikationen entfernt.
 
 ## Doku
 

apps/broadcaster/README.md

@@ -1,5 +1,23 @@
 # @abdulive/broadcaster
 
-Go-Live-Ankuendigung auf Discord, Bluesky, Mastodon, plus Instagram-Story-Bild.
+Die Go-Live-Ankuendigung auf Discord.
+
+Wird von `abdulive hub` und von `abdulive ingest` benutzt: sobald ein neuer
+Stream erkannt wird, wartet der Ankuendiger eine Minute (Titel und Kategorie
+stehen bei Twitch erst kurz nach dem Start), holt die Daten frisch, und postet
+ueber den Webhook in `#ankuendigungen` - mit Ping an die Rolle `Live-Ping`.
+
+Der teuerste Fehler hier ist der doppelte Post: wer zweimal in zehn Minuten
+angepingt wird, nimmt sich die Rolle wieder ab. Dagegen steht `decide()` in
+`src/golive.ts`, die Tabelle `posts` und eine Abklingzeit von sechs Stunden.
+
+Probelauf, ohne auf einen Stream zu warten:
+
+```
+abdulive golive:test           # in #technik-log, ohne Ping
+abdulive golive:test --echt    # in #ankuendigungen, mit Ping
+```
 
 Spezifikation: [docs/projects/go-live-broadcaster.md](../../docs/projects/go-live-broadcaster.md)
+
+Noch nicht gebaut: Bluesky, Mastodon und das Instagram-Story-Bild.

apps/broadcaster/src/golive.test.ts

@@ -0,0 +1,283 @@
+// Der Go-Live-Post geht an Menschen, die sich den Ping selbst geholt haben.
+// Zwei Pings fuer denselben Stream kosten Abonnenten der Rolle, und die kommen
+// nicht wieder. Deshalb liegt der Schwerpunkt hier auf dem, was NICHT rausgeht.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { DatabaseSync } from 'node:sqlite';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { repos, type Repos } from '#db/repos.ts';
+import type { Attachment, PostedMessage, WebhookMessage } from '#discord/webhook.ts';
+import {
+  buildMessage, createAnnouncer, decide, thumbnailUrl,
+  type GoLiveConfig, type StreamInfo,
+} from './golive.ts';
+import { pick, OPENERS } from './templates.ts';
+
+const MIGRATIONS = path.join(
+  path.dirname(fileURLToPath(import.meta.url)), '..', '..', '..', 'packages', 'db', 'migrations');
+
+/** Frische Datenbank im Arbeitsspeicher, mit allen Migrationen. */
+function freshRepo(): Repos {
+  const db = new DatabaseSync(':memory:');
+  for (const f of fs.readdirSync(MIGRATIONS).filter((n) => n.endsWith('.sql')).sort()) {
+    db.exec(fs.readFileSync(path.join(MIGRATIONS, f), 'utf8'));
+  }
+  return repos(db);
+}
+
+const STREAM: StreamInfo = {
+  id: '48212345',
+  title: 'Elden Ring, aber nur mit Fäusten',
+  category: 'Elden Ring',
+  login: 'abdulive_',
+  startedAt: '2026-09-17T18:00:00.000Z',
+  thumbnailUrl: 'https://static-cdn.twitch.tv/previews/abdulive_-{width}x{height}.jpg',
+};
+
+const CFG: GoLiveConfig = {
+  enabled: true, mode: 'live', delaySeconds: 0, cooldownHours: 6,
+  pingRole: 'Live-Ping', obsScreenshot: false,
+};
+
+type Sent = { url: string; message: WebhookMessage; files: Attachment[] };
+
+function fakePost(sink: Sent[], fail?: string) {
+  return async (url: string, message: WebhookMessage, files: Attachment[] = [])
+  : Promise<PostedMessage> => {
+    if (fail) throw new Error(fail);
+    sink.push({ url, message, files });
+    return { id: '999', channel_id: '888' };
+  };
+}
+
+const HOOKS = () => ({ live: 'https://live', draft: 'https://draft', guildId: '1' });
+const ROLES = { id: async () => '777', forget: () => undefined };
+
+function announcer(over: Partial<Parameters<typeof createAnnouncer>[0]> = {}, cfg = CFG) {
+  const sent: Sent[] = [];
+  const a = createAnnouncer({
+    cfg, repo: freshRepo(), post: fakePost(sent), roles: ROLES,
+    webhooks: HOOKS, refresh: async (s) => s, wait: async () => undefined,
+    ...over,
+  });
+  return { a, sent };
+}
+
+// ---------------------------------------------------------------- Entscheidung
+
+test('ein frischer Stream wird angekuendigt', () => {
+  assert.deepEqual(
+    decide({ enabled: true, alreadyPosted: false, lastPostAt: null, cooldownHours: 6, now: 0 }),
+    { post: true });
+});
+
+test('der Kill-Switch haelt', () => {
+  const d = decide({ enabled: false, alreadyPosted: false, lastPostAt: null, cooldownHours: 6, now: 0 });
+  assert.equal(d.post, false);
+  assert.match((d as { reason: string }).reason, /enabled/);
+});
+
+test('derselbe Stream wird kein zweites Mal angekuendigt', () => {
+  const d = decide({ enabled: true, alreadyPosted: true, lastPostAt: null, cooldownHours: 6, now: 0 });
+  assert.equal(d.post, false);
+  assert.match((d as { reason: string }).reason, /bereits/);
+});
+
+test('ein zweites stream.online kurz nach dem ersten laeuft in die Abklingzeit', () => {
+  // Der Fall aus dem Betrieb: Twitch vergibt nach einem Aussetzer eine neue
+  // Stream-ID. Dann greift `alreadyPosted` nicht, und nur die Abklingzeit
+  // verhindert den zweiten Rundruf.
+  const vorZehnMinuten = new Date('2026-09-17T18:00:00Z').toISOString();
+  const d = decide({
+    enabled: true, alreadyPosted: false, lastPostAt: vorZehnMinuten,
+    cooldownHours: 6, now: Date.parse('2026-09-17T18:10:00Z'),
+  });
+  assert.equal(d.post, false);
+  assert.match((d as { reason: string }).reason, /Abklingzeit/);
+});
+
+test('nach der Abklingzeit geht es wieder', () => {
+  const d = decide({
+    enabled: true, alreadyPosted: false, lastPostAt: '2026-09-17T10:00:00Z',
+    cooldownHours: 6, now: Date.parse('2026-09-17T18:00:00Z'),
+  });
+  assert.equal(d.post, true);
+});
+
+test('force geht durch die Abklingzeit, aber nicht durch den Kill-Switch', () => {
+  assert.equal(decide({
+    enabled: true, alreadyPosted: true, lastPostAt: '2026-09-17T17:59:00Z',
+    cooldownHours: 6, now: Date.parse('2026-09-17T18:00:00Z'), force: true,
+  }).post, true);
+  assert.equal(decide({
+    enabled: false, alreadyPosted: false, lastPostAt: null,
+    cooldownHours: 6, now: 0, force: true,
+  }).post, false);
+});
+
+// ---------------------------------------------------------------- Nachricht
+
+test('der Ping steht im Text UND in allowed_mentions', () => {
+  // Nur im Text faerbt Discord die Erwaehnung ein, benachrichtigt aber
+  // niemanden. Das ist der Fehler, den man erst nach drei leeren Streams sieht.
+  const m = buildMessage({ stream: STREAM, roleId: '777' });
+  assert.match(m.content ?? '', /<@&777>/);
+  assert.deepEqual(m.allowed_mentions, { parse: [], roles: ['777'] });
+});
+
+test('ohne aufgeloeste Rolle geht der Post raus, aber pingt niemanden', () => {
+  const m = buildMessage({ stream: STREAM });
+  assert.equal(m.content?.includes('<@&'), false);
+  assert.deepEqual(m.allowed_mentions, { parse: [] });
+  assert.equal(m.embeds?.[0]?.title, STREAM.title, 'der Post selbst bleibt vollstaendig');
+});
+
+test('ein Entwurf pingt auch dann nicht, wenn die Rolle bekannt ist', () => {
+  const m = buildMessage({ stream: STREAM, roleId: '777', draft: true });
+  assert.equal(m.content?.includes('<@&777>'), false);
+  assert.deepEqual(m.allowed_mentions, { parse: [] });
+  assert.match(m.content ?? '', /Entwurf/);
+});
+
+test('Titel, Kategorie und Link stehen im Embed', () => {
+  const e = buildMessage({ stream: STREAM }).embeds?.[0];
+  assert.equal(e?.title, STREAM.title);
+  assert.equal(e?.url, 'https://twitch.tv/abdulive_');
+  assert.equal(e?.fields?.[0]?.value, 'Elden Ring');
+  assert.match(e?.fields?.[1]?.value ?? '', /^<t:\d+:R>$/, 'Startzeit relativ, nicht in MESZ');
+});
+
+test('ein Anhang wird per attachment:// referenziert', () => {
+  const e = buildMessage({ stream: STREAM, attachment: 'vorschau.jpg' }).embeds?.[0];
+  assert.equal(e?.image?.url, 'attachment://vorschau.jpg');
+});
+
+test('Twitchs Vorschau bekommt Groesse und einen Anhaenger gegen den Cache', () => {
+  const url = thumbnailUrl(STREAM.thumbnailUrl, '48212345');
+  assert.match(url ?? '', /-1280x720\.jpg\?t=48212345$/);
+  assert.equal(thumbnailUrl(undefined, 'x'), undefined);
+});
+
+test('ein leerer Titel laesst das Embed nicht ohne Titel zurueck', () => {
+  // Discord lehnt ein Embed mit leerem title ab, und genau das liefert Twitch
+  // in der ersten Minute nach dem Start.
+  const e = buildMessage({ stream: { ...STREAM, title: '', category: '' } }).embeds?.[0];
+  assert.ok((e?.title ?? '').length > 0);
+  assert.ok((e?.fields?.[0]?.value ?? '').length > 0);
+});
+
+test('derselbe Stream bekommt denselben Text, ein anderer einen anderen', () => {
+  assert.equal(pick(OPENERS, 'abc'), pick(OPENERS, 'abc'));
+  const texte = new Set(['1', '2', '3', '4', '5', '6', '7', '8'].map((s) => pick(OPENERS, s)));
+  assert.ok(texte.size > 1, 'die Auswahl darf nicht auf einen Text zusammenfallen');
+});
+
+// ---------------------------------------------------------------- Ablauf
+
+test('der Post geht an den Go-Live-Webhook und wird protokolliert', async () => {
+  const repo = freshRepo();
+  const { a, sent } = announcer({ repo });
+  const r = await a.announceNow(STREAM);
+
+  assert.equal(r.status, 'gesendet');
+  assert.equal(sent.length, 1);
+  assert.equal(sent[0]?.url, 'https://live');
+  assert.equal(repo.postFor(STREAM.id, 'golive', 'discord')?.status, 'gesendet');
+});
+
+test('zweimal derselbe Stream gibt genau einen Post', async () => {
+  const repo = freshRepo();
+  const { a, sent } = announcer({ repo });
+  await a.announceNow(STREAM);
+  const zweiter = await a.announceNow(STREAM);
+
+  assert.equal(sent.length, 1);
+  assert.equal(zweiter.status, 'uebersprungen');
+});
+
+test('im Entwurfsmodus geht es in den internen Kanal', async () => {
+  const { a, sent } = announcer({}, { ...CFG, mode: 'draft' });
+  await a.announceNow(STREAM);
+  assert.equal(sent[0]?.url, 'https://draft');
+  assert.equal(sent[0]?.message.allowed_mentions?.roles, undefined);
+});
+
+test('ohne hinterlegten Webhook wird das gemeldet, nicht verschluckt', async () => {
+  const repo = freshRepo();
+  const { a, sent } = announcer({ repo, webhooks: () => ({}) });
+  const r = await a.announceNow(STREAM);
+
+  assert.equal(r.status, 'fehlgeschlagen');
+  assert.match((r as { reason: string }).reason, /discord:setup/);
+  assert.equal(sent.length, 0);
+  assert.equal(repo.postFor(STREAM.id, 'golive', 'discord'), undefined,
+    'ein Fehlschlag darf den naechsten Versuch nicht sperren');
+});
+
+test('ein fehlgeschlagener Post darf wiederholt werden', async () => {
+  const repo = freshRepo();
+  const sent: Sent[] = [];
+  let erster = true;
+  const a = createAnnouncer({
+    cfg: CFG, repo, roles: ROLES, webhooks: HOOKS,
+    refresh: async (s) => s, wait: async () => undefined,
+    post: async (url, message, files = []) => {
+      if (erster) { erster = false; throw new Error('Netz weg'); }
+      sent.push({ url, message, files });
+      return { id: '1', channel_id: '2' };
+    },
+  });
+
+  assert.equal((await a.announceNow(STREAM)).status, 'fehlgeschlagen');
+  assert.equal((await a.announceNow(STREAM)).status, 'gesendet');
+  assert.equal(sent.length, 1);
+});
+
+test('eine nicht aufloesbare Rolle stoppt den Post nicht', async () => {
+  const { a, sent } = announcer({
+    roles: { id: async () => { throw new Error('403'); }, forget: () => undefined },
+  });
+  const r = await a.announceNow(STREAM);
+
+  assert.equal(r.status, 'gesendet');
+  assert.equal((r as { pinged: boolean }).pinged, false);
+  assert.equal(sent[0]?.message.content?.includes('<@&'), false);
+});
+
+test('der Kill-Switch schickt gar nichts los', async () => {
+  const { a, sent } = announcer({}, { ...CFG, enabled: false });
+  assert.equal((await a.announceNow(STREAM)).status, 'uebersprungen');
+  assert.equal(sent.length, 0);
+});
+
+test('ein Probelauf sperrt die naechste echte Ankuendigung nicht', () => {
+  // Genau das ist am 2026-09-17 passiert: `golive:test --echt` lief 93 Minuten
+  // vor dem Streamstart, trug sich als gesendeter Post ein, und die
+  // Abklingzeit hat die richtige Ankuendigung verschluckt. Der Stream lief
+  // ohne Ping.
+  const repo = freshRepo();
+  repo.insertPost({
+    streamId: 'probe-1', kind: 'golive-test', platform: 'discord',
+    mode: 'live', status: 'gesendet',
+  });
+
+  // Der Probelauf steht in der Datenbank ...
+  assert.ok(repo.lastPost('golive-test', 'discord'));
+  // ... zaehlt aber fuer den Echtbetrieb nicht.
+  assert.equal(repo.lastPost('golive', 'discord'), undefined);
+});
+
+test('zwei echte Ankuendigungen kurz hintereinander bleiben gesperrt', () => {
+  // Die Abklingzeit soll ja weiter wirken - nur eben nicht gegen Probelaeufe.
+  const repo = freshRepo();
+  const { a, sent } = announcer({ repo });
+  return a.announceNow(STREAM).then(async () => {
+    const zweiter = await a.announceNow({ ...STREAM, id: 'anderer-stream' });
+    assert.equal(zweiter.status, 'uebersprungen');
+    assert.match((zweiter as { reason: string }).reason, /Abklingzeit/);
+    assert.equal(sent.length, 1);
+  });
+});

apps/broadcaster/src/golive.ts

@@ -0,0 +1,402 @@
+// Die Go-Live-Ankuendigung auf Discord.
+//
+// Ablauf, wenn der Ingest einen neuen Stream sieht:
+//
+//   stream.online
+//      -> warten (Titel und Kategorie stehen erst kurz nach dem Start)
+//      -> Titel und Kategorie frisch von Helix holen
+//      -> Vorschaubild: OBS-Screenshot, sonst Twitchs Vorschau
+//      -> pruefen, ob dieser Stream schon angekuendigt wurde
+//      -> Webhook posten, mit Ping an die Rolle Live-Ping
+//      -> Ergebnis in `posts` schreiben
+//
+// Der teuerste Fehler hier ist nicht der ausgefallene Post, sondern der
+// doppelte: wer zweimal in zehn Minuten angepingt wird, nimmt die Rolle ab,
+// und dann ist der Kanal fuer diese Person fuer immer stumm. Deshalb liegt
+// die halbe Datei in `decide()`.
+
+import { logger } from '#core/logger.ts';
+import { sleep } from '#core/retry.ts';
+import type { Repos } from '#db/repos.ts';
+import { Discord } from '#discord/api.ts';
+import { createRoleResolver, type RoleResolver } from '#discord/roles.ts';
+import { messageUrl, postWebhook, rolePing, type Attachment, type Embed, type WebhookMessage }
+  from '#discord/webhook.ts';
+import type { ObsClient } from '#obs/client.ts';
+import { helix, type HelixStream } from '#twitch/helix.ts';
+import { readSecrets } from '#twitch/secrets.ts';
+import { INVITATIONS, OPENERS, pick } from './templates.ts';
+
+const log = logger('golive');
+
+/** Twitch-Lila. Dieselbe Farbe wie die Rolle "Abdu" im Bauplan. */
+const TWITCH_PURPLE = 0x9146ff;
+
+export type GoLiveConfig = {
+  enabled: boolean;
+  /** `live` postet in die Ankuendigungen, `draft` in den internen Kanal. */
+  mode: 'live' | 'draft';
+  /** Wartezeit nach dem Erkennen. Titel und Kategorie brauchen die. */
+  delaySeconds: number;
+  /** Innerhalb dieser Zeit wird kein zweites Mal angekuendigt. */
+  cooldownHours: number;
+  /** Rolle, die angepingt wird. Leer heisst: Post ohne Ping. */
+  pingRole: string;
+  /** Vorschaubild aus OBS holen. Ohne OBS faellt es auf Twitch zurueck. */
+  obsScreenshot: boolean;
+};
+
+export type StreamInfo = {
+  id: string;
+  title: string;
+  category: string;
+  login: string;
+  startedAt: string;
+  /** Twitchs Vorlage mit {width}/{height} - wird hier eingesetzt. */
+  thumbnailUrl?: string;
+};
+
+// ---------------------------------------------------------------- Entscheidung
+
+export type Decision = { post: true } | { post: false; reason: string };
+
+/**
+ * Darf dieser Stream angekuendigt werden? Bewusst ohne Netz, Datenbank und
+ * Uhr im Bauch - alles kommt als Wert herein, damit die Faelle pruefbar sind,
+ * die im Betrieb hoechstens einmal im Jahr vorkommen.
+ */
+export function decide(input: {
+  enabled: boolean;
+  alreadyPosted: boolean;
+  lastPostAt: string | null;
+  cooldownHours: number;
+  now: number;
+  /** Ein Testpost geht durch die Abklingzeit hindurch, aber nie an die Rolle. */
+  force?: boolean;
+}): Decision {
+  if (!input.enabled) return { post: false, reason: 'broadcaster.enabled steht auf false' };
+  if (input.force) return { post: true };
+  if (input.alreadyPosted) {
+    return { post: false, reason: 'dieser Stream wurde bereits angekuendigt' };
+  }
+  if (input.lastPostAt) {
+    const since = input.now - Date.parse(input.lastPostAt);
+    const cooldown = input.cooldownHours * 3_600_000;
+    if (Number.isFinite(since) && since < cooldown) {
+      const rest = Math.ceil((cooldown - since) / 60_000);
+      return {
+        post: false,
+        reason: `letzte Ankuendigung ist ${Math.floor(since / 60_000)} min her, ` +
+          `Abklingzeit laeuft noch ${rest} min`,
+      };
+    }
+  }
+  return { post: true };
+}
+
+// ---------------------------------------------------------------- Nachricht
+
+/**
+ * Baut die fertige Webhook-Nachricht. Rein - kein Netz, keine Uhr ausser der
+ * uebergebenen. `attachment` ist gesetzt, wenn ein Bild mitgeschickt wird;
+ * dann muss der Dateiname im Anhang genau so heissen.
+ */
+export function buildMessage(input: {
+  stream: StreamInfo;
+  /** Aufgeloeste Rollen-ID, oder undefined fuer einen Post ohne Ping. */
+  roleId?: string;
+  /** Name der angehaengten Bilddatei, wenn eines mitgeht. */
+  attachment?: string;
+  /** Fertige Bild-URL, wenn kein Anhang mitgeht (Twitchs Vorschau). */
+  imageUrl?: string;
+  draft?: boolean;
+}): WebhookMessage {
+  const { stream } = input;
+  const url = `https://twitch.tv/${stream.login}`;
+  const ping = rolePing(input.roleId);
+  const opener = pick(OPENERS, stream.id);
+  const invitation = pick(INVITATIONS, stream.id + 'x');
+
+  // Discord rechnet <t:...:R> in "vor 3 Minuten" um, in der Zeitzone des
+  // Lesenden. Eine feste Uhrzeit waere hier falsch, sobald jemand nicht in
+  // Deutschland sitzt.
+  const startedUnix = Math.floor(Date.parse(stream.startedAt) / 1000);
+
+  const embed: Embed = {
+    author: { name: stream.login, url },
+    title: stream.title || 'Stream läuft',
+    url,
+    description: invitation,
+    color: TWITCH_PURPLE,
+    fields: [
+      { name: 'Kategorie', value: stream.category || 'ohne Angabe', inline: true },
+      ...(Number.isFinite(startedUnix)
+        ? [{ name: 'Gestartet', value: `<t:${startedUnix}:R>`, inline: true }]
+        : []),
+    ],
+    footer: { text: input.draft ? 'Entwurf - so ginge der Post raus' : 'abdulive Toolkit' },
+    timestamp: new Date(stream.startedAt).toISOString(),
+  };
+
+  const image = input.attachment ? `attachment://${input.attachment}` : input.imageUrl;
+  if (image) embed.image = { url: image };
+
+  const content = [input.draft ? '**Entwurf**' : ping.mention, opener]
+    .filter(Boolean).join(' ').trim();
+
+  return {
+    content,
+    embeds: [embed],
+    // Im Entwurf nie pingen, auch wenn eine Rolle aufgeloest wurde: der
+    // interne Kanal ist zum Ansehen da, nicht zum Benachrichtigen.
+    allowed_mentions: input.draft ? { parse: [] } : ping.allowed_mentions,
+  };
+}
+
+/** Twitchs Vorschaubild. Die Vorlage kommt mit Platzhaltern fuer die Groesse. */
+export function thumbnailUrl(template: string | undefined, cacheBuster: string): string | undefined {
+  if (!template) return undefined;
+  const url = template.replace('{width}', '1280').replace('{height}', '720');
+  // Discord merkt sich Bilder anhand der URL. Ohne diesen Anhang zeigt der
+  // zweite Stream das Vorschaubild des ersten.
+  return `${url}${url.includes('?') ? '&' : '?'}t=${encodeURIComponent(cacheBuster)}`;
+}
+
+// ---------------------------------------------------------------- Vorschaubild
+
+/**
+ * Screenshot der laufenden Programmausgabe. Gibt undefined zurueck, wenn OBS
+ * nicht verbunden ist oder nicht antwortet - dann bleibt Twitchs Vorschau, und
+ * die ist kurz nach dem Start haeufig noch schwarz.
+ */
+export async function obsScreenshot(obs: ObsClient): Promise<Attachment | undefined> {
+  if (!obs.isConnected()) return undefined;
+  try {
+    const scene = await obs.request<{ currentProgramSceneName?: string; sceneName?: string }>(
+      'GetCurrentProgramScene');
+    const sourceName = scene.sceneName ?? scene.currentProgramSceneName;
+    if (!sourceName) return undefined;
+
+    const shot = await obs.request<{ imageData: string }>('GetSourceScreenshot', {
+      sourceName, imageFormat: 'jpg', imageWidth: 1280,
+    });
+    // OBS liefert eine data:-URL, kein rohes base64.
+    const comma = shot.imageData.indexOf(',');
+    const base64 = comma === -1 ? shot.imageData : shot.imageData.slice(comma + 1);
+    return { name: 'vorschau.jpg', type: 'image/jpeg', data: Buffer.from(base64, 'base64') };
+  } catch (err) {
+    log.warn(`Kein OBS-Screenshot: ${(err as Error).message}`);
+    return undefined;
+  }
+}
+
+// ---------------------------------------------------------------- Ankuendiger
+
+/**
+ * Unter welcher Art ein Post in `posts` steht.
+ *
+ * Ein Probelauf bekommt eine eigene Art, und das ist kein Schoenheitsfehler:
+ * zaehlt er als echter Post, sperrt er ueber die Abklingzeit die naechste
+ * richtige Ankuendigung. Genau das ist am 2026-09-17 passiert - der Testping
+ * lief 93 Minuten vor dem Streamstart, und die Ankuendigung fiel aus.
+ */
+export type PostArt = 'golive' | 'golive-test';
+
+export type Announcer = {
+  /**
+   * Kuendigt den Stream an. Kehrt sofort zurueck - das Warten und der Post
+   * laufen im Hintergrund, damit der Ingest nicht daran haengt.
+   */
+  announce: (stream: StreamInfo, opts?: { force?: boolean; immediate?: boolean }) => void;
+  /** Dasselbe, aber wartbar. Fuer den Testbefehl und fuer Tests. */
+  announceNow: (stream: StreamInfo, opts?: { force?: boolean; art?: PostArt }) => Promise<Result>;
+  lastResult: () => Result | null;
+};
+
+export type Result =
+  | { status: 'gesendet'; url: string; mode: 'live' | 'draft'; pinged: boolean }
+  | { status: 'uebersprungen'; reason: string }
+  | { status: 'fehlgeschlagen'; reason: string };
+
+export type AnnouncerDeps = {
+  cfg: GoLiveConfig;
+  repo: Repos;
+  /** Ohne OBS gibt es kein eigenes Vorschaubild, sonst aendert sich nichts. */
+  obs?: ObsClient;
+  /** Fuer Tests: Webhook-Post und Rollenauflösung unterschieben. */
+  post?: typeof postWebhook;
+  roles?: RoleResolver;
+  /** Webhook-URLs. Vorgabe ist der verschluesselte Speicher. */
+  webhooks?: () => { live?: string; draft?: string; guildId?: string };
+  now?: () => number;
+  /** Fuer Tests: Wartezeit ueberspringen. */
+  wait?: (ms: number) => Promise<void>;
+  /** Frische Stream-Daten nach der Wartezeit. Vorgabe ist Helix. */
+  refresh?: (stream: StreamInfo) => Promise<StreamInfo>;
+};
+
+function secretWebhooks(): { live?: string; draft?: string; guildId?: string } {
+  const d = readSecrets().discord;
+  return {
+    ...(d?.goLiveWebhook ? { live: d.goLiveWebhook } : {}),
+    ...(d?.technikWebhook ? { draft: d.technikWebhook } : {}),
+    ...(d?.guildId ? { guildId: d.guildId } : {}),
+  };
+}
+
+async function helixRefresh(stream: StreamInfo): Promise<StreamInfo> {
+  try {
+    const user = await helix.userByLogin(stream.login);
+    const live: HelixStream | null = user ? await helix.streamByUserId(user.id) : null;
+    if (!live) return stream;
+    const frisch = live.thumbnail_url || stream.thumbnailUrl;
+    return {
+      ...stream,
+      title: live.title || stream.title,
+      category: live.game_name || stream.category,
+      ...(frisch ? { thumbnailUrl: frisch } : {}),
+    };
+  } catch (err) {
+    // Kein Grund, den Post ausfallen zu lassen: die Daten aus dem ersten
+    // Abruf sind selten falsch, nur manchmal leer.
+    log.warn(`Konnte Titel und Kategorie nicht nachladen: ${(err as Error).message}`);
+    return stream;
+  }
+}
+
+export function createAnnouncer(deps: AnnouncerDeps): Announcer {
+  const { cfg, repo } = deps;
+  const now = deps.now ?? (() => Date.now());
+  const wait = deps.wait ?? ((ms: number) => sleep(ms));
+  const post = deps.post ?? postWebhook;
+  const refresh = deps.refresh ?? helixRefresh;
+  const webhooks = deps.webhooks ?? secretWebhooks;
+  let last: Result | null = null;
+
+  // Der Rollen-Resolver braucht das Bot-Token. Fehlt es, gibt es keinen Ping,
+  // aber sehr wohl einen Post - ein Post ohne Ping ist besser als keiner.
+  let roles: RoleResolver | null = deps.roles ?? null;
+  function roleResolver(): RoleResolver | null {
+    if (roles) return roles;
+    const d = readSecrets().discord;
+    if (!d?.botToken || !d.guildId) return null;
+    // Bremse von einer Minute: hier fragt niemand von Hand nach.
+    roles = createRoleResolver(new Discord(d.botToken), d.guildId, 60_000);
+    return roles;
+  }
+
+  async function run(
+    stream: StreamInfo, opts: { force?: boolean; art?: PostArt } = {},
+  ): Promise<Result> {
+    const art: PostArt = opts.art ?? 'golive';
+    const draft = cfg.mode === 'draft';
+    const hooks = webhooks();
+    const target = draft ? hooks.draft : hooks.live;
+
+    const decision = decide({
+      enabled: cfg.enabled,
+      alreadyPosted: Boolean(repo.postFor(stream.id, art, 'discord')),
+      lastPostAt: repo.lastPost(art, 'discord')?.created_at ?? null,
+      cooldownHours: cfg.cooldownHours,
+      now: now(),
+      ...(opts.force ? { force: true } : {}),
+    });
+
+    if (!decision.post) {
+      log.info(`Keine Go-Live-Ankuendigung: ${decision.reason}`);
+      last = { status: 'uebersprungen', reason: decision.reason };
+      return last;
+    }
+
+    if (!target) {
+      const reason = draft
+        ? 'kein Webhook fuer den internen Kanal - einmal `abdulive discord:setup` laufen lassen'
+        : 'kein Go-Live-Webhook hinterlegt - einmal `abdulive discord:setup` laufen lassen';
+      log.warn(`Go-Live-Ankuendigung faellt aus: ${reason}`);
+      last = { status: 'fehlgeschlagen', reason };
+      repo.insertPost({
+        streamId: stream.id, kind: art, platform: 'discord', mode: cfg.mode,
+        status: 'fehlgeschlagen', title: stream.title, category: stream.category, detail: reason,
+      });
+      return last;
+    }
+
+    // Ping erst hier aufloesen: schlaegt es fehl, geht der Post trotzdem raus.
+    let roleId: string | undefined;
+    if (cfg.pingRole && !draft) {
+      try {
+        roleId = await roleResolver()?.id(cfg.pingRole);
+        if (!roleId) {
+          log.warn(`Rolle "${cfg.pingRole}" nicht gefunden - der Post geht ohne Ping raus`);
+        }
+      } catch (err) {
+        log.warn(`Rolle nicht aufloesbar (${(err as Error).message}) - Post ohne Ping`);
+      }
+    }
+
+    const files: Attachment[] = [];
+    if (cfg.obsScreenshot && deps.obs) {
+      const shot = await obsScreenshot(deps.obs);
+      if (shot) files.push(shot);
+    }
+
+    // Entweder eigener Screenshot als Anhang oder Twitchs Vorschau als URL -
+    // nie beides, sonst zeigt Discord zwei Bilder.
+    const fallbackImage = files.length === 0
+      ? thumbnailUrl(stream.thumbnailUrl, stream.id) : undefined;
+
+    const message = buildMessage({
+      stream,
+      ...(roleId ? { roleId } : {}),
+      ...(files[0] ? { attachment: files[0].name } : {}),
+      ...(fallbackImage ? { imageUrl: fallbackImage } : {}),
+      ...(draft ? { draft: true } : {}),
+    });
+
+    try {
+      const sent = await post(target, message, files);
+      const url = hooks.guildId ? messageUrl(hooks.guildId, sent) : '';
+      repo.insertPost({
+        streamId: stream.id, kind: art, platform: 'discord', mode: cfg.mode,
+        status: 'gesendet', title: stream.title, category: stream.category, url,
+      });
+      log.info(`Go-Live-Post raus${draft ? ' (Entwurf, interner Kanal)' : ''}` +
+        `${roleId ? `, mit Ping an ${cfg.pingRole}` : ', ohne Ping'}` +
+        `${files.length ? ', mit OBS-Vorschau' : ''}`);
+      last = { status: 'gesendet', url, mode: cfg.mode, pinged: Boolean(roleId) };
+      return last;
+    } catch (err) {
+      const reason = (err as Error).message;
+      log.error(`Go-Live-Post fehlgeschlagen: ${reason}`);
+      repo.insertPost({
+        streamId: stream.id, kind: art, platform: 'discord', mode: cfg.mode,
+        status: 'fehlgeschlagen', title: stream.title, category: stream.category, detail: reason,
+      });
+      last = { status: 'fehlgeschlagen', reason };
+      return last;
+    }
+  }
+
+  async function delayedRun(
+    stream: StreamInfo, opts: { force?: boolean; immediate?: boolean; art?: PostArt },
+  ) {
+    if (!opts.immediate && cfg.delaySeconds > 0) {
+      log.info(`Stream erkannt - Ankuendigung in ${cfg.delaySeconds} s ` +
+        '(Titel und Kategorie stehen erst kurz nach dem Start)');
+      await wait(cfg.delaySeconds * 1000);
+    }
+    const fresh = await refresh(stream);
+    return run(fresh, opts);
+  }
+
+  return {
+    announce(stream, opts = {}) {
+      void delayedRun(stream, opts).catch((err: Error) => {
+        log.error(`Ankuendigung abgebrochen: ${err.message}`);
+        last = { status: 'fehlgeschlagen', reason: err.message };
+      });
+    },
+    announceNow: (stream, opts = {}) => delayedRun(stream, { ...opts, immediate: true }),
+    lastResult: () => last,
+  };
+}

apps/broadcaster/src/templates.ts

@@ -0,0 +1,53 @@
+// Textbausteine fuer die Go-Live-Ankuendigung.
+//
+// Warum mehrere: eine Ankuendigung, die jeden Donnerstag Wort fuer Wort
+// dieselbe ist, wird nach drei Wochen nicht mehr gelesen. Das ist kein
+// Algorithmus-Aberglaube, sondern gilt genauso fuer Menschen, die die
+// Nachricht in der Seitenleiste ueberfliegen.
+//
+// Die Auswahl ist nicht zufaellig, sondern haengt an der Stream-ID: derselbe
+// Stream bekommt bei einem Wiederholungsversuch denselben Text, und Tests
+// bekommen ein vorhersagbares Ergebnis. Zwei aufeinanderfolgende Streams
+// bekommen verschiedene IDs und damit fast immer verschiedene Texte.
+
+/** Die Zeile ueber dem Embed. Hier steht der Ping, also faellt sie ins Auge. */
+export const OPENERS = [
+  'Abdu ist live.',
+  'Der Stream läuft.',
+  'Es geht los.',
+  'Abdu ist da.',
+  'Ab jetzt live.',
+];
+
+/** Die Zeile im Embed. Darf laenger sein, wird ruhiger gelesen. */
+export const INVITATIONS = [
+  'Schau vorbei.',
+  'Komm rein, es ist noch Platz.',
+  'Jetzt einschalten.',
+  'Der Chat ist offen.',
+  'Bis gleich im Chat.',
+];
+
+/**
+ * Kleiner, stabiler Hash. Kein crypto: er muss nur gleichmaessig streuen und
+ * ueber Neustarts hinweg dasselbe Ergebnis liefern.
+ */
+export function pick<T>(list: readonly T[], seed: string): T {
+  if (list.length === 0) throw new Error('Keine Textbausteine hinterlegt.');
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return list[Math.abs(h) % list.length]!;
+}
+
+/**
+ * Platzhalter ersetzen. Unbekannte Platzhalter bleiben stehen - so sieht man
+ * im Ergebnis, dass einer falsch geschrieben ist, statt eine Luecke zu
+ * bekommen, die nach Absicht aussieht.
+ */
+export function fill(template: string, values: Record<string, string>): string {
+  return template.replace(/\{\{(\w+)\}\}/g, (all, key: string) =>
+    key in values ? values[key]! : all);
+}

apps/cli/main.ts

@@ -646,6 +646,222 @@ Was jetzt noch von Hand gehoert:
      verbinden, dann bekommen Subs automatisch eine Rolle.`);
 }
 
+// ---------------------------------------------------------------- overlay
+
+/**
+ * Overlay-Server allein starten. Zum Ansehen und Einrichten, ohne dass der
+ * ganze Hub laeuft. Mit --demo laeuft erfundener Betrieb: anders koennte man
+ * eine Raid-Einblendung nur pruefen, indem man auf einen echten Raid wartet.
+ */
+async function overlayOnly(args: string[]): Promise<void> {
+  const cfg = loadConfig();
+  const { startOverlayServer } = await import('../overlay-server/src/server.ts');
+  const { createBus } = await import('../overlay-server/src/bus.ts');
+
+  const bus = createBus();
+  const abort = new AbortController();
+  process.on('SIGINT', () => { abort.abort(); process.exit(0); });
+
+  startOverlayServer({
+    port: cfg.overlay.port,
+    channel: cfg.channel.login,
+    publicUrl: cfg.publicUrl,
+    bus,
+  });
+
+  if (args.includes('--demo')) {
+    const { startDemo } = await import('../overlay-server/src/demo.ts');
+    startDemo(bus, abort.signal);
+  }
+
+  const wo = cfg.publicUrl || `http://127.0.0.1:${cfg.overlay.port}`;
+  console.log(`
+Uebersicht mit allen Adressen fuer OBS: ${wo}/`);
+  console.log(`${C.dim}Beenden mit Strg+C.${C.off}`);
+  await new Promise(() => { /* laeuft bis Strg+C */ });
+}
+
+/** Passwort fuer die Weboberflaeche setzen. Nur hier, nie ueber das Netz. */
+async function webPasswort(args: string[]): Promise<void> {
+  const { setzePasswort } = await import('../overlay-server/src/auth.ts');
+  const pw = args[0] || process.env.ABDULIVE_WEB_PASSWORT ||
+    await promptHidden('Neues Passwort (Eingabe wird nicht angezeigt): ');
+  setzePasswort(pw.trim());
+  console.log(`${C.ok}Passwort gesetzt.${C.off} Angemeldet bleibt man 30 Tage.`);
+}
+
+/**
+ * Den Stream-PC beim Hub anmelden. Prueft vorher, ob der Hub den Schluessel
+ * annimmt - ein Tippfehler soll hier auffallen und nicht erst im Stream, wenn
+ * der Szenenknopf am Handy nichts tut.
+ */
+async function fernVerbinden(args: string[]): Promise<void> {
+  const { readSecrets, updateSecrets } = await import('#twitch/secrets.ts');
+  const [adresse, schluessel] = args;
+  if (adresse === 'aus') {
+    updateSecrets((s) => { delete s.fern; });
+    console.log('Fernsteuerung getrennt. Wirkt nach dem naechsten Start von abdulive ingest.');
+    return;
+  }
+  if (!adresse || !schluessel) {
+    const da = readSecrets().fern;
+    console.log(da ? `Eingerichtet fuer ${da.url}.` : 'Nicht eingerichtet.');
+    console.log('Aufruf: abdulive fern:verbinden <adresse> <schluessel>  (steht auf der Uebersichtsseite)');
+    return;
+  }
+  const url = adresse.replace(/\/+$/, '');
+  if (!/^https?:\/\//.test(url)) throw new Error('Die Adresse muss mit https:// anfangen.');
+
+  const probe = new AbortController();
+  let status: number;
+  try {
+    const res = await fetch(`${url}/fern/befehle`, {
+      headers: { authorization: `Bearer ${schluessel}` },
+      signal: AbortSignal.any([probe.signal, AbortSignal.timeout(10_000)]),
+    });
+    status = res.status;
+  } catch (err) {
+    throw new Error(`Hub unter ${url} nicht erreichbar: ${(err as Error).message}`);
+  } finally {
+    // Die Leitung nur oeffnen, um den Schluessel zu pruefen. Offen gelassen
+    // haette sie der Hub als verbundenen PC gezaehlt.
+    probe.abort();
+  }
+  if (status === 403) throw new Error('Der Hub lehnt den Schluessel ab. Neu von der Uebersichtsseite kopieren.');
+  if (status !== 200) throw new Error(`Der Hub antwortet ${status}. Laeuft dort eine Fassung mit Pult?`);
+
+  updateSecrets((s) => { s.fern = { url, key: schluessel }; });
+  console.log(`${C.ok}Verbunden.${C.off} Der Hub nimmt den Schluessel an.`);
+  console.log('Jetzt abdulive ingest neu starten - danach steuert das Pult OBS.');
+}
+
+// ---------------------------------------------------------------- golive
+
+/**
+ * Probelauf der Go-Live-Ankuendigung.
+ *
+ * Ohne Argument geht der Post in den internen Kanal und pingt niemanden -
+ * damit laesst sich das Aussehen pruefen, ohne den Server aufzuwecken. Mit
+ * `--echt` geht er dorthin, wo er im Betrieb hinginge, mit Ping. Das ist der
+ * einzige Weg, vor dem ersten Stream zu sehen, ob der Ping wirklich ankommt;
+ * eine Erwaehnung ohne `allowed_mentions` sieht naemlich genauso aus wie eine
+ * mit, benachrichtigt aber niemanden.
+ */
+async function goLiveTest(args: string[]): Promise<void> {
+  const echt = args.includes('--echt');
+  const cfg = loadConfig();
+  const { createAnnouncer } = await import('../broadcaster/src/golive.ts');
+  const { repos } = await import('#db/repos.ts');
+  const { helix } = await import('#twitch/helix.ts');
+  const { readSecrets } = await import('#twitch/secrets.ts');
+
+  const discord = readSecrets().discord;
+  const ziel = echt ? discord?.goLiveWebhook : discord?.technikWebhook;
+  if (!ziel) {
+    throw new Error(echt
+      ? 'Kein Go-Live-Webhook hinterlegt. Einmal `abdulive discord:setup` laufen lassen.'
+      : 'Kein Webhook fuer den internen Kanal. Einmal `abdulive discord:setup` laufen lassen ' +
+        '- der Technik-Webhook ist seit Fassung 0.6 im Bauplan.');
+  }
+
+  // Wenn Abdu gerade live ist, wird der echte Stream angekuendigt. Sonst ein
+  // erfundener - das prueft denselben Weg, nur mit anderem Text.
+  let stream = {
+    id: `probe-${Date.now()}`,
+    title: 'Probelauf der Go-Live-Ankuendigung',
+    category: 'Just Chatting',
+    login: cfg.channel.login,
+    startedAt: new Date().toISOString(),
+  } as import('../broadcaster/src/golive.ts').StreamInfo;
+
+  try {
+    const user = await helix.userByLogin(cfg.channel.login);
+    const live = user ? await helix.streamByUserId(user.id) : null;
+    if (live) {
+      stream = {
+        id: `probe-${live.id}-${Date.now()}`,
+        title: live.title,
+        category: live.game_name,
+        login: cfg.channel.login,
+        startedAt: live.started_at,
+        thumbnailUrl: live.thumbnail_url,
+      };
+      console.log(`${C.dim}Stream laeuft gerade - der Probelauf nimmt die echten Daten.${C.off}`);
+    } else {
+      console.log(`${C.dim}Kein laufender Stream - der Probelauf nimmt erfundene Daten.${C.off}`);
+    }
+  } catch (err) {
+    // Haeufigster Fall ist nicht "Netz weg", sondern "noch keine Twitch-App
+    // hinterlegt". Der Satz soll das sagen, sonst sucht man am falschen Ende.
+    console.log(`${C.warn}Twitch nicht abgefragt:${C.off} ${(err as Error).message}`);
+    console.log(`${C.dim}Der Probelauf nimmt erfundene Daten - der Weg zum Webhook ` +
+      `wird trotzdem vollstaendig geprueft.${C.off}`);
+  }
+
+  // OBS nur dazunehmen, wenn es laeuft: sonst wartet der Screenshot ins Leere.
+  let obs: Awaited<ReturnType<typeof withObs>> | null = null;
+  if (cfg.broadcaster.obsScreenshot && await tcpProbe(OBS_HOST, OBS_PORT, 1500)) {
+    obs = await withObs();
+  }
+
+  const announcer = createAnnouncer({
+    cfg: {
+      enabled: true,
+      mode: echt ? 'live' : 'draft',
+      delaySeconds: 0,
+      cooldownHours: cfg.broadcaster.cooldownHours,
+      pingRole: cfg.broadcaster.pingRole,
+      obsScreenshot: Boolean(obs),
+    },
+    repo: repos(openDb()),
+    ...(obs ? { obs: obs.client } : {}),
+    // Ein Probelauf geht durch die Abklingzeit hindurch, sonst koennte man ihn
+    // nach einem echten Stream sechs Stunden lang nicht wiederholen.
+    refresh: async (s) => s,
+  });
+
+  // Als eigene Art protokollieren: sonst sperrt der Probelauf ueber die
+  // Abklingzeit die naechste echte Ankuendigung.
+  const result = await announcer.announceNow(stream, { force: true, art: 'golive-test' });
+  obs?.stop();
+
+  if (result.status === 'gesendet') {
+    const wohin = result.mode === 'draft' ? 'interner Kanal' : 'Ankuendigungen';
+    const ping = result.pinged ? `mit Ping an "${cfg.broadcaster.pingRole}"` : 'ohne Ping';
+    console.log(`
+${C.ok}Post ist raus${C.off} (${wohin}, ${ping}).`);
+    if (result.url) console.log(`  ${result.url}`);
+    if (echt && !result.pinged) {
+      console.log(`
+${C.warn}Kein Ping gesetzt.${C.off} Pruefen: gibt es die Rolle ` +
+        `"${cfg.broadcaster.pingRole}" auf dem Server, und ist ein Bot-Token hinterlegt?`);
+    }
+    if (!echt) console.log(`
+${C.dim}Mit --echt geht derselbe Post in die Ankuendigungen, ` +
+      `mit Ping.${C.off}`);
+  } else {
+    console.log(`
+${C.bad}${result.status}${C.off}: ${result.reason}`);
+    process.exitCode = 1;
+  }
+}
+
+/** OBS kurz verbinden, damit ein Screenshot moeglich ist. */
+async function withObs() {
+  const { createObs } = await import('#obs/client.ts');
+  const { readSecrets } = await import('#twitch/secrets.ts');
+  const abort = new AbortController();
+  const client = createObs(`ws://${OBS_HOST}:${OBS_PORT}`,
+    () => readSecrets().obs?.password, {});
+  void client.run(abort.signal);
+  // Kurz auf die Identifikation warten; ohne sie gibt es keinen Screenshot,
+  // und das ist kein Grund zum Abbruch.
+  for (let i = 0; i < 30 && !client.isConnected(); i++) {
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  return { client, stop: () => abort.abort() };
+}
+
 async function discordBot(): Promise<void> {
   const { createBot } = await import('#discord/bot.ts');
   const bot = createBot();
@@ -667,13 +883,73 @@ async function discordBot(): Promise<void> {
   await bot.run(abort.signal);
 }
 
+// ---------------------------------------------------------------- rewards:anlegen
+
+/**
+ * Eine Kanalpunkt-Belohnung ueber die API anlegen statt im Dashboard.
+ *
+ * Der Grund ist nicht Bequemlichkeit: Twitch laesst nur die App, die eine
+ * Belohnung angelegt hat, deren Einloesungen aendern. Eine im Dashboard
+ * angelegte Belohnung kann das Toolkit weder erstatten noch als erledigt
+ * markieren. Wiederholbar: steht die Belohnung schon, wird nur ihre ID
+ * gezeigt.
+ */
+async function rewardsAnlegen(args: string[]): Promise<void> {
+  const wert = (name: string): string | undefined => {
+    const i = args.indexOf(name);
+    return i === -1 ? undefined : args[i + 1];
+  };
+  const titel = wert('--titel');
+  const kosten = Number(wert('--kosten'));
+  if (!titel || !Number.isInteger(kosten) || kosten < 1) {
+    throw new Error('Aufruf: rewards:anlegen --titel "Nachricht vorlesen" --kosten 1000 ' +
+      '[--text] [--hinweis "..."] [--abklingzeit SEKUNDEN]');
+  }
+  const cfg = loadConfig();
+  const { helix } = await import('#twitch/helix.ts');
+  const user = await helix.userByLogin(cfg.channel.login);
+  if (!user) throw new Error(`Kanal ${cfg.channel.login} nicht gefunden`);
+
+  const alle = await helix.customRewards(user.id);
+  const eigene = new Set((await helix.customRewards(user.id, true)).map((r) => r.id));
+  const da = alle.find((r) => r.title.toLowerCase() === titel.toLowerCase());
+  if (da) {
+    console.log(`Steht schon: "${da.title}" (${da.cost} Punkte), ID ${da.id}`);
+    if (!eigene.has(da.id)) {
+      console.log('Achtung: im Dashboard angelegt, nicht vom Toolkit. Erstatten und ' +
+        'Abschliessen gehen damit nicht. Im Dashboard loeschen und hier neu anlegen.');
+    }
+    return;
+  }
+
+  const abklingzeit = Number(wert('--abklingzeit') ?? 0);
+  const neu = await helix.createCustomReward(user.id, {
+    title: titel,
+    cost: kosten,
+    ...(args.includes('--text') ? { is_user_input_required: true } : {}),
+    ...(wert('--hinweis') ? { prompt: wert('--hinweis')! } : {}),
+    ...(abklingzeit > 0
+      ? { is_global_cooldown_enabled: true, global_cooldown_seconds: abklingzeit } : {}),
+    should_redemptions_skip_request_queue: false,
+  });
+  console.log(`Angelegt: "${neu.title}" (${neu.cost} Punkte), ID ${neu.id}`);
+  console.log('In config.yaml unter rewards.belohnungen mit `id:` eintragen - die ID gewinnt gegen den Titel.');
+}
+
 // ---------------------------------------------------------------- help
 
 function help(): void {
   console.log(`
 abdulive  -  Werkzeugkasten fuer Abdus Stream
 
-  ingest                       Daemon starten (Chat, Zuschauerzahlen, Einrichtungsseite)
+  hub                          Zentraler Dienst: Chat, Discord, Go-Live, Overlay
+  ingest                       Daemon auf dem Stream-PC (OBS, !clip, Rendern)
+  overlay [--demo]             Nur den Overlay-Server, --demo mit erfundenem Betrieb
+  web:passwort [wort]          Passwort fuer die Weboberflaeche setzen
+  fern:verbinden <adresse> <schluessel>
+                               Stream-PC beim Hub anmelden, damit das Pult OBS
+                               steuern kann. Der Befehl steht fertig auf der
+                               Uebersichtsseite des Hubs. "aus" statt Adresse trennt.
   check-env                    Umgebung pruefen
   db:migrate                   Migrationen anwenden
   fetch-model [name]           Whisper-Modell laden (Vorgabe: ggml-small.bin)
@@ -684,6 +960,11 @@ abdulive  -  Werkzeugkasten fuer Abdus Stream
   discord:setup [--server ID] [--vorschau]
                                Discord-Server nach docs/projects/discord-community.md einrichten
   discord:bot                  Rollen-Knoepfe bedienen (laeuft sonst im Daemon mit)
+  golive:test [--echt]         Go-Live-Post proben: ohne Argument in den internen
+                               Kanal ohne Ping, mit --echt in die Ankuendigungen
+  rewards:anlegen --titel T --kosten N [--text] [--hinweis H] [--abklingzeit S]
+                               Kanalpunkt-Belohnung ueber die API anlegen (noetig
+                               zum Erstatten, siehe apps/hub/src/rewards.ts)
   help                         Diese Uebersicht
 
 Einrichtung nach dem Start: http://localhost:4792/setup
@@ -715,6 +996,16 @@ try {
     }
     case 'render': await renderOne(args[0], args[1]); break;
     case 'discord:setup': await discordSetup(args); break;
+    case 'golive:test': await goLiveTest(args); break;
+    case 'rewards:anlegen': await rewardsAnlegen(args); break;
+    case 'hub': {
+      const { runHub } = await import('../hub/src/index.ts');
+      await runHub();
+      break;
+    }
+    case 'overlay': await overlayOnly(args); break;
+    case 'web:passwort': await webPasswort(args); break;
+    case 'fern:verbinden': await fernVerbinden(args); break;
     case 'discord:bot': await discordBot(); break;
     case 'help': case undefined: help(); break;
     default:

apps/clipper/README.md

@@ -1,5 +0,0 @@
-# @abdulive/clipper
-
-Clip-to-Shorts-Pipeline: Trigger -> Replay/Clip -> 9:16 -> Untertitel -> Upload-Kandidat.
-
-Spezifikation: [docs/projects/clip-shorts.md](../../docs/projects/clip-shorts.md)

apps/community/README.md

@@ -1,5 +0,0 @@
-# @abdulive/community
-
-Community-Gedaechtnis: Begruessungen, Meilensteine, Overlay-Hinweis. Modul im overlay-server.
-
-Spezifikation: [docs/projects/community-memory.md](../../docs/projects/community-memory.md)

apps/dashboard/README.md

@@ -1,5 +0,0 @@
-# @abdulive/dashboard
-
-Analytics-Dashboard und Freigabe-Ansicht fuer Clip-Kandidaten.
-
-Spezifikation: [docs/projects/analytics.md](../../docs/projects/analytics.md)

apps/hub/README.md

@@ -0,0 +1,20 @@
+# @abdulive/hub
+
+Der zentrale Dienst. Alles, was nur Internet braucht: Twitch-Chat,
+Zuschauerzahlen, der Discord-Rollen-Knopf, die Go-Live-Ankuendigung und die
+Overlay-Seiten fuer OBS.
+
+Laeuft im LXC, nicht auf Abdus Rechner - damit der Ping auch dann rausgeht,
+wenn der Stream-PC gerade nicht laeuft. Der Schnitt zwischen Hub und Ingest
+steht in [ADR-0008](../../docs/decisions/ADR-0008-geteilter-betrieb.md).
+
+```
+abdulive hub
+```
+
+Bedienung ueber die Weboberflaeche des Overlay-Servers: Uebersicht auf `/`,
+Einrichtung auf `/setup`. Beides hinter einem Passwort
+(`abdulive web:passwort`).
+
+Nicht hier drin und auch nicht hierher zu holen: OBS, der Wiedergabepuffer,
+ffmpeg und whisper. Die bleiben in `abdulive ingest`.

apps/hub/src/audio-ablage.test.ts

@@ -0,0 +1,36 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { createAudioAblage } from './audio-ablage.ts';
+
+const wav = (n: number): Buffer => Buffer.alloc(44 + n);
+
+test('abgelegter Ton ist unter seiner ID abholbar', () => {
+  const a = createAudioAblage();
+  a.ablegen('x', wav(1));
+  assert.equal(a.holen('x')?.length, 45);
+  assert.equal(a.holen('y'), undefined);
+});
+
+test('laeuft sie voll, faellt das Aelteste heraus', () => {
+  const a = createAudioAblage({ maximal: 2 });
+  a.ablegen('1', wav(1));
+  a.ablegen('2', wav(2));
+  a.ablegen('3', wav(3));
+  assert.equal(a.holen('1'), undefined);
+  assert.ok(a.holen('2'));
+  assert.ok(a.holen('3'));
+});
+
+test('abgelaufener Ton ist weg', async () => {
+  const a = createAudioAblage({ haltbarMs: 5 });
+  a.ablegen('x', wav(1));
+  await new Promise((r) => setTimeout(r, 20));
+  assert.equal(a.holen('x'), undefined);
+});
+
+test('leeren wirft alles weg - fuer den Panikschalter', () => {
+  const a = createAudioAblage();
+  a.ablegen('x', wav(1));
+  a.leeren();
+  assert.equal(a.holen('x'), undefined);
+});

apps/hub/src/audio-ablage.ts

@@ -0,0 +1,43 @@
+// Fertig gesprochene Nachrichten, bis die Browser-Quelle sie abholt.
+//
+// Warum nicht direkt im Ereignis: eine WAV von 200 Zeichen hat gut 500 KB.
+// Der Ereignisstrom geht an alle Browser-Sources, auch an Chat und
+// Statusleiste - die sollen das nicht mitschleppen. Also geht nur die ID
+// hinaus, und `/tts` holt sich den Ton einzeln.
+//
+// Bewusst im Arbeitsspeicher und kurzlebig: niemand braucht eine vorgelesene
+// Nachricht von gestern, und fremder Text soll nicht auf der Platte liegen.
+
+export type AudioAblage = {
+  ablegen: (id: string, wav: Buffer) => void;
+  holen: (id: string) => Buffer | undefined;
+  leeren: () => void;
+};
+
+export function createAudioAblage(opts: { maximal?: number; haltbarMs?: number } = {}): AudioAblage {
+  const maximal = opts.maximal ?? 20;
+  const haltbarMs = opts.haltbarMs ?? 10 * 60_000;
+  // Map haelt die Einfuegereihenfolge; das Aelteste steht vorn.
+  const ablage = new Map<string, { wav: Buffer; seit: number }>();
+
+  const aufraeumen = (jetzt: number): void => {
+    for (const [id, e] of ablage) if (jetzt - e.seit > haltbarMs) ablage.delete(id);
+    while (ablage.size > maximal) {
+      const aeltestes = ablage.keys().next().value;
+      if (aeltestes === undefined) break;
+      ablage.delete(aeltestes);
+    }
+  };
+
+  return {
+    ablegen(id, wav) {
+      ablage.set(id, { wav, seit: Date.now() });
+      aufraeumen(Date.now());
+    },
+    holen(id) {
+      aufraeumen(Date.now());
+      return ablage.get(id)?.wav;
+    },
+    leeren: () => ablage.clear(),
+  };
+}

apps/hub/src/index.ts

@@ -0,0 +1,577 @@
+// Der zentrale Dienst. Laeuft in einem LXC, nicht auf Abdus Rechner.
+//
+// Was hier drin ist, braucht nur Internet: Twitch-Chat, Twitch-API, Discord
+// und die Overlay-Seiten. Das laeuft damit auch dann, wenn der Stream-PC aus
+// ist - der Rollen-Knopf auf Discord antwortet nachts um drei, und die
+// Go-Live-Ankuendigung haengt nicht daran, dass jemand den Daemon gestartet
+// hat.
+//
+// Was NICHT hier drin ist und auch nicht hierher kann: OBS, der
+// Wiedergabepuffer, ffmpeg und whisper. Die haengen an den Dateien auf dem
+// Stream-PC und bleiben in `abdulive ingest`.
+//
+//   Hub (LXC)                          Stream-PC (abdulive ingest)
+//   ---------                          --------------------------
+//   Chat lesen und senden              OBS-Wiedergabepuffer
+//   Zuschauerzahlen, Sitzungen         !clip, Rendern, Untertitel
+//   Discord: Knopf und Go-Live
+//   Overlay-Seiten fuer OBS
+//
+// Beide schreiben in ihre eigene Datenbank. Das ist bewusst: eine gemeinsame
+// waere eine Netzwerkfreigabe fuer SQLite, und das ist der zuverlaessigste
+// Weg zu einer beschaedigten Datei.
+
+import { loadConfig } from '#core/config.ts';
+import { logger } from '#core/logger.ts';
+import { sleep } from '#core/retry.ts';
+import { openDb, closeDb } from '#db/index.ts';
+import { repos } from '#db/repos.ts';
+import { createBot } from '#discord/bot.ts';
+import { helix } from '#twitch/helix.ts';
+import { readSecrets } from '#twitch/secrets.ts';
+import { createEventSub } from '#twitch/eventsub.ts';
+import { createBadges } from '#twitch/badges.ts';
+import { createIrc, type UserNotice } from '#twitch/irc.ts';
+import { streamWechsel } from '#twitch/stream-state.ts';
+import { piperFehlt, sprechen, stimmenPfad } from '#media/piper.ts';
+import {
+  ausEventSub, createDrossel, createWarteschlange, entscheiden,
+} from './rewards.ts';
+import { createAudioAblage } from './audio-ablage.ts';
+import { createLiegestuetze } from './liegestuetze.ts';
+import { createAnnouncer, type StreamInfo } from '../../broadcaster/src/golive.ts';
+import { createSpikeDetector } from '../../ingest/src/spike.ts';
+import { createBus, type AlertEvent, type Bus } from '../../overlay-server/src/bus.ts';
+import { startOverlayServer } from '../../overlay-server/src/server.ts';
+import { ulid } from '#shared/events.ts';
+
+const log = logger('hub');
+
+export async function runHub(): Promise<void> {
+  const cfg = loadConfig();
+  const db = openDb();
+  const repo = repos(db);
+  const spikes = createSpikeDetector(cfg.ingest.spike);
+  const bus = createBus();
+
+  const state = {
+    startedAt: new Date().toISOString(),
+    streamId: null as string | null,
+    broadcasterId: null as string | null,
+    lastSeenLive: 0,
+    viewers: 0,
+    title: '',
+    category: '',
+    startedLiveAt: null as string | null,
+    chatConnected: false,
+    chatAnonymous: true,
+    messages: 0,
+    spikeCandidates: 0,
+    eventsub: false,
+    lastError: null as string | null,
+  };
+
+  const abort = new AbortController();
+  const stop = (signal: string): void => {
+    log.info(`${signal} empfangen, fahre herunter`);
+    abort.abort();
+    setTimeout(() => { closeDb(); process.exit(0); }, 500);
+  };
+  process.on('SIGINT', () => stop('SIGINT'));
+  process.on('SIGTERM', () => stop('SIGTERM'));
+
+  // ---- Go-Live-Ankuendigung. Ohne OBS gibt es kein eigenes Vorschaubild;
+  // dann nimmt der Post Twitchs Vorschau, und die ist meist gut genug.
+  const announcer = createAnnouncer({
+    cfg: {
+      enabled: cfg.broadcaster.enabled,
+      mode: cfg.broadcaster.mode,
+      delaySeconds: cfg.broadcaster.delaySecondsAfterOnline,
+      cooldownHours: cfg.broadcaster.cooldownHours,
+      pingRole: cfg.broadcaster.pingRole,
+      obsScreenshot: false,
+    },
+    repo,
+  });
+
+  // ---- Kanalpunkte
+  const warteschlange = createWarteschlange();
+  const drossel = createDrossel();
+  const liegestuetze = createLiegestuetze(db);
+  // Gleich zu Beginn in den Bus, sonst zeigt eine frisch verbundene
+  // Browser-Source 0, bis die naechste Einloesung kommt.
+  bus.publish({ kind: 'liegestuetze', ...liegestuetze.stand() });
+
+  /**
+   * Eine Einloesung abschliessen (FULFILLED) oder die Punkte zurueckgeben
+   * (CANCELED). Geht nur bei Belohnungen, die das Toolkit selbst angelegt hat
+   * (`abdulive rewards:anlegen`) - sonst lehnt Twitch ab, und es bleibt bei
+   * einer Warnung.
+   */
+  const einloesungSetzen = async (
+    rewardId: string, redemptionId: string, status: 'FULFILLED' | 'CANCELED',
+  ): Promise<void> => {
+    const was = status === 'CANCELED' ? 'Punkte nicht erstattet' : 'Einloesung nicht abgeschlossen';
+    if (!state.broadcasterId) return;
+    if (!helix.hasScope('channel:manage:redemptions')) {
+      log.warn(`${was}: dem verbundenen Konto fehlt ` +
+        'channel:manage:redemptions. Einmal neu verbinden unter /setup.');
+      return;
+    }
+    try {
+      await helix.setRedemptionStatus(state.broadcasterId, rewardId, redemptionId, status);
+    } catch (err) {
+      log.warn(`${was}: ${(err as Error).message}`);
+    }
+  };
+  const erstatten = (rewardId: string, redemptionId: string): Promise<void> =>
+    einloesungSetzen(rewardId, redemptionId, 'CANCELED');
+
+  // ---- Vorlesen. Die Stimme entsteht hier im Hub (Piper), nicht im Browser:
+  // dort haengt sie am Rechner, der streamt, und kam in OBS amerikanisch.
+  const stimme = {
+    model: stimmenPfad(cfg.rewards.tts.stimme),
+    ...(typeof cfg.rewards.tts.sprecher === 'number' ? { speaker: cfg.rewards.tts.sprecher } : {}),
+  };
+  const audio = createAudioAblage();
+  const stimmeFehlt = piperFehlt(stimme);
+  if (stimmeFehlt.length) {
+    log.warn(`Vorlesen ohne Stimme - es fehlt: ${stimmeFehlt.join(', ')}. ` +
+      'Einrichten mit scripts/install-piper.sh. Bis dahin wird nur angezeigt.');
+  }
+
+  const vorlesen = async (
+    id: string, name: string, text: string,
+    /** Fehlt beim Testknopf - dann gibt es bei Twitch nichts abzuschliessen. */
+    einloesung?: { rewardId: string; redemptionId: string },
+  ): Promise<void> => {
+    let mitTon = false;
+    try {
+      audio.ablegen(id, await sprechen(text, stimme));
+      mitTon = true;
+    } catch (err) {
+      // Lieber stumm anzeigen als gar nicht: wer Punkte ausgegeben hat, soll
+      // seine Nachricht wenigstens im Bild sehen.
+      log.warn(`Nicht gesprochen, nur angezeigt: ${(err as Error).message}`);
+    }
+    bus.publish({ kind: 'tts', id, name, text, audio: mitTon });
+    log.info(`Wird vorgelesen (${name}): ${text.slice(0, 60)}`);
+    // Auch ohne Ton abgeschlossen: angezeigt wurde es, und eine Einloesung,
+    // die ewig in Twitchs Warteschlange haengt, raeumt niemand auf.
+    if (einloesung) void einloesungSetzen(einloesung.rewardId, einloesung.redemptionId, 'FULFILLED');
+  };
+
+  const behandleEinloesung = (roh: Record<string, unknown>): void => {
+    const e = ausEventSub(roh);
+    if (!e) { log.warn('Einloesung ohne verwertbare Felder - ignoriert'); return; }
+
+    repo.event('points.redeemed', {
+      reward: e.rewardTitle, kosten: e.kosten, login: e.userName, text: e.text,
+    }, state.streamId, e.userId, e.ts);
+
+    const ent = entscheiden(e, cfg.rewards, drossel.zaehlen(e.userId));
+    drossel.merken(e.userId);
+
+    switch (ent.art) {
+      case 'unbekannt':
+        log.debug(`Belohnung "${e.rewardTitle}" hat keine hinterlegte Aktion`);
+        break;
+
+      case 'abgelehnt':
+        log.info(`Einloesung von ${e.userName} abgelehnt: ${ent.grund}`);
+        void erstatten(e.rewardId, e.id);
+        break;
+
+      case 'ausfuehren':
+        // Immer dieselbe Einblendung: sie sagt, wer was eingeloest hat. Die
+        // Aktion entscheidet nur, was zusaetzlich passiert. Frueher stand
+        // hier die Abo-Einblendung - eine Belohnung als "Neues Abo" ins Bild
+        // zu schreiben ist eine Falschmeldung, die in der Aufzeichnung bleibt.
+        bus.publish({
+          kind: 'alert', type: 'reward', id: ulid(), name: e.userName,
+          reward: e.rewardTitle,
+          ...(e.kosten ? { amount: e.kosten } : {}),
+          ...(e.text ? { message: e.text } : {}),
+        });
+        if (ent.aktion === 'konfetti') bus.publish({ kind: 'konfetti', staerke: 1 });
+        if (ent.aktion === 'emote-regen') bus.publish({ kind: 'hype', score: 5, rate: 40 });
+        if (ent.aktion === 'liegestuetze') {
+          const dazu = ent.plan.anzahl ?? 5;
+          bus.publish({ kind: 'liegestuetze', ...liegestuetze.aendern(dazu), dazu, name: e.userName });
+        }
+        log.info(`${e.userName} hat "${e.rewardTitle}" eingeloest -> ${ent.aktion}`);
+        void einloesungSetzen(e.rewardId, e.id, 'FULFILLED');
+        break;
+
+      case 'vorlesen':
+        void vorlesen(ulid(), e.userName, ent.text, { rewardId: e.rewardId, redemptionId: e.id });
+        break;
+
+      case 'warteschlange':
+        warteschlange.einreihen({
+          id: ulid(), name: e.userName, text: ent.text,
+          rewardId: e.rewardId, redemptionId: e.id, seit: new Date().toISOString(),
+        });
+        log.info(`${e.userName} wartet auf Freigabe zum Vorlesen`);
+        break;
+    }
+  };
+
+  // ---- EventSub. Nur sinnvoll mit verbundenem Konto: der WebSocket-Weg
+  // verlangt fuer das Abonnement dasselbe Nutzer-Token.
+  const eventsub = createEventSub({
+    onSession: async (sessionId) => {
+      const id = state.broadcasterId || (await helix.userByLogin(cfg.channel.login))?.id;
+      if (!id) throw new Error('Broadcaster-ID unbekannt');
+      state.broadcasterId = id;
+      await helix.subscribe({
+        type: 'channel.channel_points_custom_reward_redemption.add',
+        version: '1',
+        condition: { broadcaster_user_id: id },
+      }, sessionId);
+      log.info('Abonniert: Kanalpunkt-Einloesungen');
+    },
+    onNotification: (typ, event) => {
+      if (typ === 'channel.channel_points_custom_reward_redemption.add') {
+        behandleEinloesung(event);
+      }
+    },
+    onRevocation: (typ) => log.error(
+      `Twitch hat "${typ}" entzogen - meist zurueckgezogene Freigabe. Neu verbinden unter /setup.`),
+    onConnected: () => { state.eventsub = true; },
+    onClosed: () => { state.eventsub = false; },
+  });
+
+  // ---- Discord (Rollen-Knoepfe)
+  const bot = createBot();
+  if (bot) void bot.run(abort.signal);
+
+  // ---- Abzeichen-Bilder fuer den Chat. Twitch aendert sie selten, ein
+  // neues Abo-Abzeichen des Kanals ist nach spaetestens sechs Stunden da.
+  const badges = createBadges();
+  void (async () => {
+    while (!abort.signal.aborted) {
+      if (helix.canReadStream()) {
+        const id = state.broadcasterId || cfg.channel.userId ||
+          (await helix.userByLogin(cfg.channel.login).catch(() => null))?.id || null;
+        if (id) state.broadcasterId = id;
+        await badges.laden(id);
+      }
+      try { await sleep(6 * 60 * 60_000, abort.signal); } catch { return; }
+    }
+  })();
+
+  // ---- Chat
+  const irc = createIrc(cfg.channel.login, {
+    onConnected: (anonymous) => {
+      state.chatConnected = true;
+      state.chatAnonymous = anonymous;
+    },
+    onMessage: (msg) => {
+      try {
+        // Chatnachrichten landen nicht mehr in der Datenbank. Gelesen haben
+        // sie nur Recap und Auswertung, und die gibt es nicht mehr.
+        state.messages++;
+
+        bus.publish({
+          kind: 'chat',
+          id: msg.id,
+          userId: msg.userId,
+          login: msg.login,
+          name: msg.displayName,
+          text: msg.text,
+          color: msg.color,
+          emotes: msg.emotes,
+          gifs: msg.gifs,
+          first: msg.isFirst,
+          mod: msg.isMod,
+          sub: msg.isSub,
+          broadcaster: msg.isBroadcaster,
+          badges: badges.aufloesen(msg.badges),
+          bits: msg.bits,
+          ts: msg.ts,
+        });
+
+        if (msg.isFirst) {
+          repo.event('chat.first_message', { login: msg.login }, state.streamId, msg.userId, msg.ts);
+          bus.publish({ kind: 'alert', type: 'first', id: ulid(), name: msg.displayName });
+          log.info(`Erstchatter: ${msg.displayName}`);
+        }
+        if (msg.bits > 0) {
+          repo.event('cheer', { bits: msg.bits, login: msg.login }, state.streamId, msg.userId, msg.ts);
+          bus.publish({
+            kind: 'alert', type: 'cheer', id: ulid(),
+            name: msg.displayName, amount: msg.bits, message: msg.text,
+          });
+        }
+
+        const spike = spikes.push(msg);
+        if (spike) {
+          state.spikeCandidates++;
+          repo.event('chat.spike', spike, state.streamId, null, msg.ts);
+          bus.publish({ kind: 'hype', score: spike.score, rate: spike.rate });
+          log.info(`Spitze im Chat: Punktzahl ${spike.score} (${spike.rate} Nachrichten ` +
+            `von ${spike.chatters} Leuten, Basislinie ${spike.baseline})`);
+        }
+      } catch (err) {
+        state.lastError = (err as Error).message;
+        log.error(`Nachricht nicht verarbeitet: ${(err as Error).message}`);
+      }
+    },
+    onUserNotice: (notice) => {
+      const alert = toAlert(notice);
+      if (!alert) return;
+      repo.event(eventTypeFor(notice), notice, state.streamId);
+      bus.publish(alert);
+      log.info(notice.systemMessage || `${notice.kind} von ${notice.displayName}`);
+    },
+    onClear: (what) => bus.publish({ kind: 'clear', ...what }),
+  });
+  void irc.run(abort.signal);
+
+  // ---- Die eine oeffentliche Tuer
+  const server = startOverlayServer({
+    port: cfg.overlay.port,
+    channel: cfg.channel.login,
+    publicUrl: cfg.publicUrl,
+    bus,
+    setup: {
+      channel: cfg.channel.login,
+      port: cfg.overlay.port,
+      health: () => ({
+        ...state,
+        rolle: 'hub',
+        db: repo.stats(),
+        discordConnected: bot ? bot.isConnected() : false,
+        goLive: announcer.lastResult() ?? 'noch nichts',
+        overlayClients: bus.clients(),
+        ttsWartend: warteschlange.liste().length,
+        liegestuetze: liegestuetze.stand(),
+        ttsStimme: stimmeFehlt.length ? `fehlt: ${stimmeFehlt.join(', ')}` : 'bereit',
+        spikeArmed: spikes.isArmed(),
+        note: state.chatAnonymous
+          ? 'Chat wird anonym mitgelesen. Zum Senden und fuer Helix: Einrichtung unter /setup.'
+          : undefined,
+      }),
+    },
+    tts: {
+      wartend: () => warteschlange.liste()
+        .map((w) => ({ id: w.id, name: w.name, text: w.text, seit: w.seit })),
+      freigeben: (id) => {
+        const w = warteschlange.entnehmen(id);
+        if (!w) return false;
+        void vorlesen(w.id, w.name, w.text, { rewardId: w.rewardId, redemptionId: w.redemptionId });
+        return true;
+      },
+      ablehnen: (id) => {
+        const w = warteschlange.entnehmen(id);
+        if (!w) return false;
+        log.info(`Vorlesen abgelehnt (${w.name})`);
+        void erstatten(w.rewardId, w.redemptionId);
+        return true;
+      },
+      alleAblehnen: () => {
+        const alle = warteschlange.leeren();
+        for (const w of alle) void erstatten(w.rewardId, w.redemptionId);
+        if (alle.length) log.info(`${alle.length} wartende Nachricht(en) abgelehnt`);
+        return alle.length;
+      },
+      probe: (name, text) => { void vorlesen(ulid(), name, text); },
+      audio: (id) => audio.holen(id),
+      still: () => {
+        bus.publish({ kind: 'still' });
+        audio.leeren();
+        const alle = warteschlange.leeren();
+        for (const w of alle) void erstatten(w.rewardId, w.redemptionId);
+        log.warn('Panikschalter: Vorlesen gestoppt und Warteschlange geleert');
+      },
+    },
+    liegestuetze: {
+      stand: () => liegestuetze.stand(),
+      aendern: (n) => {
+        const neu = liegestuetze.aendern(n);
+        bus.publish({ kind: 'liegestuetze', ...neu });
+        log.info(`Liegestuetze von Hand ${n > 0 ? '+' : ''}${n} -> ` +
+          `${neu.offen} offen, ${neu.gemacht} gemacht`);
+        return neu;
+      },
+      setzen: (n) => {
+        const neu = liegestuetze.setzen(n);
+        bus.publish({ kind: 'liegestuetze', ...neu });
+        log.info(`Liegestuetze von Hand gesetzt -> ${neu.offen} offen`);
+        return neu;
+      },
+      gemachtSetzen: (n) => {
+        const neu = liegestuetze.gemachtSetzen(n);
+        bus.publish({ kind: 'liegestuetze', ...neu });
+        log.info(`Liegestuetze gemacht von Hand gesetzt -> ${neu.gemacht}`);
+        return neu;
+      },
+    },
+  });
+  void server;
+
+  // ---- Zuschauerzahlen und Stream-Sitzungen
+  void pollStream(cfg, repo, state, bus, abort.signal, (stream) => {
+    announcer.announce(stream);
+    // Nur bei einem wirklich neuen Stream, nicht beim Neustart des Hubs
+    // mitten im Stream: dann wird die Sitzung uebernommen, nicht gestartet.
+    bus.publish({ kind: 'liegestuetze', ...liegestuetze.neuerStream() });
+  });
+
+  // ---- EventSub erst, wenn ein Konto verbunden ist. Ohne Nutzer-Token
+  // wuerde der Verbindungsversuch im Minutentakt scheitern und nichts als
+  // Protokollrauschen erzeugen.
+  if (cfg.rewards.enabled && readSecrets().tokens.broadcaster) {
+    void eventsub.run(abort.signal);
+  } else if (cfg.rewards.enabled) {
+    log.warn('Kanalpunkt-Aktionen sind an, aber kein Konto verbunden - ' +
+      'EventSub bleibt aus. Verbinden unter /setup.');
+  }
+
+  log.info(`Hub laeuft fuer #${cfg.channel.login}`);
+  await new Promise<void>((resolve) => abort.signal.addEventListener('abort', () => resolve()));
+}
+
+// ---------------------------------------------------------------- Ereignisse
+
+/** USERNOTICE in eine Einblendung uebersetzen. Unbekanntes faellt weg. */
+export function toAlert(n: UserNotice): AlertEvent | null {
+  const gemeinsam = {
+    kind: 'alert' as const,
+    id: ulid(),
+    name: n.displayName,
+    ...(n.months !== undefined ? { months: n.months } : {}),
+    ...(n.tier ? { tier: n.tier } : {}),
+    ...(n.text ? { message: n.text } : {}),
+  };
+  switch (n.kind) {
+    case 'sub': case 'resub':
+      return { ...gemeinsam, type: n.kind };
+    case 'subgift':
+      return { ...gemeinsam, type: 'subgift', ...(n.recipient ? { recipient: n.recipient } : {}) };
+    case 'massgift':
+      return { ...gemeinsam, type: 'massgift', ...(n.count ? { amount: n.count } : {}) };
+    case 'raid':
+      return { ...gemeinsam, type: 'raid', ...(n.count ? { amount: n.count } : {}) };
+    default:
+      // Ankuendigungen und alles Unbekannte bekommen keine Einblendung. Eine
+      // Einblendung fuer etwas, das man nicht kennt, sieht kaputt aus.
+      return null;
+  }
+}
+
+function eventTypeFor(n: UserNotice): 'subscribe' | 'subgift' | 'raid.in' | 'chat.message' {
+  if (n.kind === 'subgift' || n.kind === 'massgift') return 'subgift';
+  if (n.kind === 'raid') return 'raid.in';
+  if (n.kind === 'sub' || n.kind === 'resub') return 'subscribe';
+  return 'chat.message';
+}
+
+// ---------------------------------------------------------------- Abfrage
+
+type State = {
+  streamId: string | null; broadcasterId: string | null; lastSeenLive: number;
+  viewers: number; title: string; category: string; startedLiveAt: string | null;
+  lastError: string | null;
+};
+
+async function pollStream(
+  cfg: ReturnType<typeof loadConfig>,
+  repo: ReturnType<typeof repos>,
+  state: State,
+  bus: Bus,
+  signal: AbortSignal,
+  onOnline: (stream: StreamInfo) => void
+): Promise<void> {
+  const gapMs = cfg.ingest.sessionGapMinutes * 60_000;
+  let warnedMissingAuth = false;
+
+  const sendState = (live: boolean): void => {
+    bus.publish({
+      kind: 'stream', live,
+      title: state.title, category: state.category,
+      viewers: state.viewers, startedAt: state.startedLiveAt,
+    });
+  };
+
+  // Ein laufender Stream wird beim Start uebernommen, damit ein Neustart
+  // mitten im Stream keine zweite Sitzung anlegt - und keinen zweiten Ping.
+  const open = repo.latestOpenStream();
+  if (open) {
+    state.streamId = open.id;
+    state.startedLiveAt = open.started_at;
+    state.lastSeenLive = Date.now();
+    log.info(`Laufende Sitzung uebernommen: ${open.id} seit ${open.started_at}`);
+  }
+
+  while (!signal.aborted) {
+    try {
+      // Client-ID und Secret genuegen: `GET /users` und `GET /streams` laufen
+      // mit einem App-Token. Auf das verbundene Konto wartet hier niemand.
+      if (!helix.canReadStream()) {
+        if (!warnedMissingAuth) {
+          log.warn('Keine Twitch-App hinterlegt - Zuschauerzahlen, Sitzungen und die ' +
+            'Go-Live-Ankuendigung bleiben aus. Einrichtung unter /setup.');
+          warnedMissingAuth = true;
+        }
+      } else {
+        warnedMissingAuth = false;
+        const userId = state.broadcasterId || cfg.channel.userId ||
+          (await helix.userByLogin(cfg.channel.login))?.id || '';
+        if (userId) state.broadcasterId = userId;
+        const live = userId ? await helix.streamByUserId(userId) : null;
+        const now = Date.now();
+
+        const wechsel = streamWechsel({
+          live: live ? { id: live.id, startedAt: live.started_at } : null,
+          laufendeId: state.streamId,
+          zuletztLive: state.lastSeenLive,
+          jetzt: now,
+          luckeMs: gapMs,
+        });
+
+        if (wechsel.art === 'gestartet') {
+          state.streamId = wechsel.id;
+          repo.openStream(wechsel.id, wechsel.startedAt);
+          repo.event('stream.online',
+            { title: live!.title, category: live!.game_name }, wechsel.id);
+          log.info(`Stream online: "${live!.title}" (${live!.game_name}), ` +
+            `gestartet ${wechsel.startedAt}`);
+          onOnline({
+            id: wechsel.id,
+            title: live!.title,
+            category: live!.game_name,
+            login: cfg.channel.login,
+            startedAt: wechsel.startedAt,
+            thumbnailUrl: live!.thumbnail_url,
+          });
+        } else if (wechsel.art === 'fortsetzung') {
+          log.info(`Neue Twitch-Stream-ID ${wechsel.neueId}, behandle als Fortsetzung ` +
+            `von ${state.streamId} - keine zweite Ankuendigung`);
+        } else if (wechsel.art === 'beendet') {
+          repo.closeStream(wechsel.id, new Date().toISOString());
+          repo.event('stream.offline', {}, wechsel.id);
+          log.info(`Stream offline: ${wechsel.id}`);
+          state.streamId = null;
+          state.viewers = 0;
+          state.startedLiveAt = null;
+          sendState(false);
+        }
+
+        if (live) {
+          state.title = live.title;
+          state.category = live.game_name;
+          state.startedLiveAt = live.started_at;
+          state.lastSeenLive = now;
+          state.viewers = live.viewer_count;
+          sendState(true);
+        }
+      }
+    } catch (err) {
+      state.lastError = (err as Error).message;
+      log.error(`Abfrage fehlgeschlagen: ${(err as Error).message}`);
+    }
+    try { await sleep(cfg.ingest.viewerPollSeconds * 1000, signal); } catch { return; }
+  }
+}

apps/hub/src/liegestuetze.test.ts

@@ -0,0 +1,89 @@
+// Der Zaehler haelt fest, was Zuschauer mit Kanalpunkten bezahlt haben und
+// was Abdu davon geschafft hat. Er darf weder beim Neustart vergessen noch
+// ins Negative laufen, und eine Korrektur ist keine Liegestuetze.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { DatabaseSync } from 'node:sqlite';
+import { migrate } from '#db/index.ts';
+import { createLiegestuetze, HOECHSTENS } from './liegestuetze.ts';
+import { entscheiden, type RewardsConfig } from './rewards.ts';
+import { zahlAus } from '../../overlay-server/src/server.ts';
+
+function datei(): string {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'abdulive-lz-'));
+  return path.join(dir, 't.db');
+}
+
+function oeffnen(file: string): DatabaseSync {
+  const db = new DatabaseSync(file);
+  migrate(db);
+  return db;
+}
+
+test('Liegestuetze: zaehlt hoch und herunter, nie unter 0', () => {
+  const lz = createLiegestuetze(oeffnen(datei()));
+  assert.deepEqual(lz.stand(), { offen: 0, gemacht: 0 });
+  assert.equal(lz.aendern(10).offen, 10);
+  assert.equal(lz.aendern(10).offen, 20);
+  assert.equal(lz.aendern(-5).offen, 15);
+  assert.equal(lz.aendern(-100).offen, 0);
+  assert.equal(lz.setzen(42).offen, 42);
+  assert.equal(lz.setzen(-3).offen, 0);
+  assert.equal(lz.setzen(10_000_000).offen, HOECHSTENS);
+});
+
+test('Liegestuetze: Herunterzaehlen ist gemacht, Setzen nicht', () => {
+  const lz = createLiegestuetze(oeffnen(datei()));
+  lz.aendern(20);
+  assert.deepEqual(lz.aendern(-5), { offen: 15, gemacht: 5 });
+  // Nur was wirklich offen war, kann gemacht sein.
+  assert.deepEqual(lz.aendern(-100), { offen: 0, gemacht: 20 });
+  lz.aendern(10);
+  assert.deepEqual(lz.setzen(3), { offen: 3, gemacht: 20 }, 'Korrektur zaehlt nicht');
+  assert.deepEqual(lz.gemachtSetzen(7), { offen: 3, gemacht: 7 });
+});
+
+test('Liegestuetze: neuer Stream setzt gemacht zurueck, offen bleibt', () => {
+  const lz = createLiegestuetze(oeffnen(datei()));
+  lz.aendern(30);
+  lz.aendern(-10);
+  assert.deepEqual(lz.neuerStream(), { offen: 20, gemacht: 0 });
+});
+
+test('Liegestuetze: der Stand ueberlebt einen Neustart', () => {
+  const file = datei();
+  const erst = oeffnen(file);
+  const lz = createLiegestuetze(erst);
+  lz.aendern(30);
+  lz.aendern(-5);
+  erst.close();
+
+  assert.deepEqual(createLiegestuetze(oeffnen(file)).stand(), { offen: 25, gemacht: 5 });
+});
+
+test('Belohnung mit Aktion liegestuetze wird ausgefuehrt und traegt die Anzahl', () => {
+  const cfg: RewardsConfig = {
+    enabled: true,
+    belohnungen: [{ titel: '5 Liegestütze', aktion: 'liegestuetze', anzahl: 5 }],
+    tts: { freigabe: true, maxZeichen: 200, blockliste: [], proPersonProStunde: 3 },
+  };
+  const ent = entscheiden({
+    id: 'r1', rewardId: 'x', rewardTitle: '5 liegestütze', userId: 'u1', userName: 'Kevin',
+    text: '', kosten: 2000, ts: '2026-10-04T20:00:00Z',
+  }, cfg);
+  assert.equal(ent.art, 'ausfuehren');
+  assert.ok(ent.art === 'ausfuehren' && ent.aktion === 'liegestuetze' && ent.plan.anzahl === 5);
+});
+
+test('zahlAus: nur ganze Zahlen, alles andere ist null', () => {
+  assert.equal(zahlAus('10'), 10);
+  assert.equal(zahlAus(' -5 '), -5);
+  assert.equal(zahlAus('+3'), 3);
+  for (const x of ['', 'abc', '1.5', '1e3', '9999999', null, undefined]) {
+    assert.equal(zahlAus(x), null, String(x));
+  }
+});

apps/hub/src/liegestuetze.ts

@@ -0,0 +1,63 @@
+// Liegestuetze aus Kanalpunkten: was offen ist und was in diesem Stream
+// schon gemacht wurde.
+//
+// Eine Einloesung zaehlt `offen` hoch. Abdu zaehlt auf der Uebersichtsseite
+// herunter, wenn er sie gemacht hat - das wandert nach `gemacht`. Setzen ist
+// dagegen eine Korrektur und zaehlt nicht als gemacht: wer einen Tippfehler
+// behebt, hat dabei keine Liegestuetze gemacht.
+//
+// Beides liegt in der Datenbank: was die Zuschauer bezahlt haben, darf ein
+// Neustart nicht loeschen. `gemacht` beginnt mit jedem neuen Stream bei 0.
+
+import type { Db } from '#db/index.ts';
+
+/** Mehr glaubt niemand, und ein Tippfehler mit sechs Nullen soll nicht im Bild stehen. */
+export const HOECHSTENS = 99_999;
+
+export type LiegestuetzStand = { offen: number; gemacht: number };
+
+export type Liegestuetze = {
+  stand: () => LiegestuetzStand;
+  /**
+   * Zaehlt `offen` um `n` hoch oder (negativ) herunter, nie unter 0. Was
+   * dabei wirklich abgezogen wurde, kommt zu `gemacht`.
+   */
+  aendern: (n: number) => LiegestuetzStand;
+  /** Setzt `offen` fest. Korrektur, zaehlt nicht als gemacht. */
+  setzen: (n: number) => LiegestuetzStand;
+  /** Setzt `gemacht` fest. Korrektur. */
+  gemachtSetzen: (n: number) => LiegestuetzStand;
+  /** Neuer Stream: `gemacht` auf 0, `offen` bleibt. */
+  neuerStream: () => LiegestuetzStand;
+};
+
+export function createLiegestuetze(db: Db, name = 'liegestuetze'): Liegestuetze {
+  const lesen = db.prepare('SELECT wert FROM zaehler WHERE name = ?');
+  const schreiben = db.prepare(`
+    INSERT INTO zaehler (name, wert, geaendert) VALUES (?, ?, ?)
+    ON CONFLICT(name) DO UPDATE SET wert = excluded.wert, geaendert = excluded.geaendert
+  `);
+  const OFFEN = name;
+  const GEMACHT = `${name}-gemacht`;
+
+  const wert = (n: string): number => (lesen.get(n) as { wert: number } | undefined)?.wert ?? 0;
+  const schreibe = (n: string, w: number): number => {
+    const sauber = Math.min(HOECHSTENS, Math.max(0, Math.trunc(w)));
+    schreiben.run(n, sauber, new Date().toISOString());
+    return sauber;
+  };
+  const stand = (): LiegestuetzStand => ({ offen: wert(OFFEN), gemacht: wert(GEMACHT) });
+
+  return {
+    stand,
+    aendern(n) {
+      const vorher = wert(OFFEN);
+      const nachher = schreibe(OFFEN, vorher + n);
+      if (nachher < vorher) schreibe(GEMACHT, wert(GEMACHT) + (vorher - nachher));
+      return stand();
+    },
+    setzen(n) { schreibe(OFFEN, n); return stand(); },
+    gemachtSetzen(n) { schreibe(GEMACHT, n); return stand(); },
+    neuerStream() { schreibe(GEMACHT, 0); return stand(); },
+  };
+}

apps/hub/src/rewards.test.ts

@@ -0,0 +1,221 @@
+// Hier entscheidet sich, ob fremder Text im Stream vorgelesen wird. Was hier
+// durchrutscht, hoert das Publikum - und die Aufzeichnung behaelt es.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  ausEventSub, createDrossel, createWarteschlange, entscheiden, fuerFilter, planFuer,
+  wortfilterTreffer, type Einloesung, type RewardsConfig,
+} from './rewards.ts';
+
+// ---- Wortfilter. Vorgelesen wird ohne Freigabe, also muss er halten.
+
+const LISTE = ['hitler', 'nazi'];
+
+test('Wortfilter: Leetspeak, Punkte und gezogene Buchstaben helfen nicht', () => {
+  for (const t of ['H1tl3r war super', 'h.i.t.l.e.r', 'H I T L E R', 'hiiiitlerrr', 'HİTLER']) {
+    assert.equal(wortfilterTreffer(t, LISTE), 'hitler', t);
+  }
+});
+
+test('Wortfilter: kurze Eintraege nur am Wortanfang, sonst trifft es Harmloses', () => {
+  assert.equal(wortfilterTreffer('ich kann azubi werden', LISTE), undefined);
+  assert.equal(wortfilterTreffer('Gymnasium', LISTE), undefined);
+  assert.equal(wortfilterTreffer('alles Nazis hier', LISTE), 'nazi');
+  assert.equal(wortfilterTreffer('N4Z1', LISTE), 'nazi');
+});
+
+test('Wortfilter: "www" wird zu "w" und darf nur als ganzes Wort treffen', () => {
+  // So im Stream passiert: jede Nachricht mit "wie" oder "weg" flog raus.
+  const liste = ['www', 'http'];
+  assert.equal(wortfilterTreffer('wie kann es sein, dass ich nicht mod bin?!', liste), undefined);
+  assert.equal(wortfilterTreffer('Ladiesman hat einen weg', liste), undefined);
+  assert.equal(wortfilterTreffer('geh auf www.example.de', liste), 'www');
+  assert.equal(wortfilterTreffer('https://example.de', liste), 'http');
+});
+
+test('Wortfilter: normaler Text geht durch', () => {
+  assert.equal(wortfilterTreffer('Grüße an Abdu, geiler Stream!', LISTE), undefined);
+});
+
+test('fuerFilter: Umlaute und ß werden zu dem, was man hoert', () => {
+  assert.equal(fuerFilter('Größe', false), 'grose');
+  assert.equal(fuerFilter('a-b c', true), 'a b c');
+});
+
+const CFG: RewardsConfig = {
+  enabled: true,
+  belohnungen: [
+    { titel: 'Konfetti', aktion: 'konfetti' },
+    { titel: 'Vorlesen', aktion: 'tts' },
+    { id: 'abc-123', aktion: 'emote-regen' },
+  ],
+  tts: { freigabe: true, maxZeichen: 200, blockliste: ['heilhitler'], proPersonProStunde: 3 },
+};
+
+function einloesung(over: Partial<Einloesung> = {}): Einloesung {
+  return {
+    id: 'r1', rewardId: 'xyz', rewardTitle: 'Vorlesen', userId: 'u1', userName: 'Kevin',
+    text: 'moin zusammen', kosten: 500, ts: '2026-09-17T20:00:00Z', ...over,
+  };
+}
+
+// ---------------------------------------------------------------- Zuordnung
+
+test('die ID gewinnt gegen den Titel', () => {
+  // Der Titel kann sich aendern, die ID nicht. Wer beides hinterlegt, meint
+  // die ID.
+  const p = planFuer({ rewardId: 'abc-123', rewardTitle: 'Konfetti' }, CFG.belohnungen);
+  assert.equal(p?.aktion, 'emote-regen');
+});
+
+test('der Titel wird ohne Ruecksicht auf Gross-/Kleinschreibung gefunden', () => {
+  assert.equal(planFuer({ rewardId: 'x', rewardTitle: 'kOnFeTtI' }, CFG.belohnungen)?.aktion,
+    'konfetti');
+});
+
+test('eine unbekannte Belohnung ist kein Fehler', () => {
+  // Abdu darf Belohnungen anlegen, die mit dem Toolkit nichts zu tun haben.
+  const e = entscheiden(einloesung({ rewardTitle: 'Nachricht anheften' }), CFG);
+  assert.equal(e.art, 'unbekannt');
+});
+
+// ---------------------------------------------------------------- Einfache Aktionen
+
+test('Konfetti laeuft sofort, ohne Freigabe', () => {
+  const e = entscheiden(einloesung({ rewardTitle: 'Konfetti', text: '' }), CFG);
+  assert.deepEqual(e, { art: 'ausfuehren', aktion: 'konfetti', plan: CFG.belohnungen[0] });
+});
+
+test('der Kill-Switch haelt alles an', () => {
+  const e = entscheiden(einloesung({ rewardTitle: 'Konfetti' }), { ...CFG, enabled: false });
+  assert.equal(e.art, 'abgelehnt');
+});
+
+// ---------------------------------------------------------------- TTS
+
+test('mit Freigabe geht Text in die Warteschlange, nicht ins Bild', () => {
+  const e = entscheiden(einloesung(), CFG);
+  assert.deepEqual(e, { art: 'warteschlange', text: 'moin zusammen' });
+});
+
+test('ohne Freigabe wird sofort vorgelesen', () => {
+  const e = entscheiden(einloesung(), { ...CFG, tts: { ...CFG.tts, freigabe: false } });
+  assert.deepEqual(e, { art: 'vorlesen', text: 'moin zusammen' });
+});
+
+test('die Einstellung an der Belohnung schlaegt die allgemeine', () => {
+  const cfg: RewardsConfig = {
+    ...CFG,
+    belohnungen: [{ titel: 'Vorlesen', aktion: 'tts', freigabe: false }],
+    tts: { ...CFG.tts, freigabe: true },
+  };
+  assert.equal(entscheiden(einloesung(), cfg).art, 'vorlesen');
+});
+
+test('zu langer Text wird abgelehnt, nicht abgeschnitten', () => {
+  // Abgeschnitten waere schlimmer: dann wird ein halber Satz vorgelesen, und
+  // niemand weiss, ob der Rest Absicht war.
+  const e = entscheiden(einloesung({ text: 'a'.repeat(201) }), CFG);
+  assert.equal(e.art, 'abgelehnt');
+  assert.match((e as { grund: string }).grund, /zu lang/);
+});
+
+test('leerer Text wird abgelehnt', () => {
+  assert.equal(entscheiden(einloesung({ text: '   ' }), CFG).art, 'abgelehnt');
+});
+
+test('der Wortfilter greift unabhaengig von Gross-/Kleinschreibung', () => {
+  const e = entscheiden(einloesung({ text: 'guck mal HeilHitler lol' }), CFG);
+  assert.equal(e.art, 'abgelehnt');
+  assert.equal((e as { grund: string }).grund, 'Wortfilter');
+});
+
+test('der Ablehnungsgrund verraet den gefilterten Text nicht', () => {
+  // Der Grund landet im Protokoll und moeglicherweise im Chat. Er darf nicht
+  // wiederholen, was gerade herausgefiltert wurde.
+  const e = entscheiden(einloesung({ text: 'heilhitler' }), CFG);
+  assert.equal((e as { grund: string }).grund.includes('heilhitler'), false);
+});
+
+test('wer zu oft einloest, wird gebremst', () => {
+  assert.equal(entscheiden(einloesung(), CFG, 2).art, 'warteschlange');
+  assert.equal(entscheiden(einloesung(), CFG, 3).art, 'abgelehnt');
+});
+
+// ---------------------------------------------------------------- Warteschlange
+
+test('eingereiht, entnommen, weg', () => {
+  const w = createWarteschlange();
+  w.einreihen({ id: 'a', name: 'Kevin', text: 'moin', rewardId: 'r', redemptionId: 'x', seit: '' });
+  assert.equal(w.liste().length, 1);
+  assert.equal(w.entnehmen('a')?.text, 'moin');
+  assert.equal(w.liste().length, 0);
+  assert.equal(w.entnehmen('a'), undefined, 'zweimal entnehmen geht nicht');
+});
+
+test('eine volle Warteschlange wirft das Aelteste raus', () => {
+  // Eine Schlange, die bei einem Ansturm auf 300 waechst, arbeitet niemand ab.
+  const w = createWarteschlange(3);
+  for (const id of ['a', 'b', 'c', 'd']) {
+    w.einreihen({ id, name: 'x', text: id, rewardId: 'r', redemptionId: id, seit: '' });
+  }
+  assert.deepEqual(w.liste().map((x) => x.id), ['b', 'c', 'd']);
+});
+
+test('leeren gibt alles zurueck, damit die Punkte erstattet werden koennen', () => {
+  const w = createWarteschlange();
+  w.einreihen({ id: 'a', name: 'x', text: '1', rewardId: 'r', redemptionId: 'a', seit: '' });
+  w.einreihen({ id: 'b', name: 'y', text: '2', rewardId: 'r', redemptionId: 'b', seit: '' });
+  assert.equal(w.leeren().length, 2);
+  assert.equal(w.liste().length, 0);
+});
+
+// ---------------------------------------------------------------- Drossel
+
+test('die Drossel zaehlt nur das gleitende Fenster', () => {
+  const d = createDrossel(3_600_000);
+  const t = Date.parse('2026-09-17T20:00:00Z');
+  d.merken('u1', t);
+  d.merken('u1', t + 60_000);
+  assert.equal(d.zaehlen('u1', t + 120_000), 2);
+  // Zwei Stunden spaeter ist beides aus dem Fenster gefallen.
+  assert.equal(d.zaehlen('u1', t + 2 * 3_600_000), 0);
+});
+
+test('die Drossel trennt nach Person', () => {
+  const d = createDrossel();
+  d.merken('u1');
+  assert.equal(d.zaehlen('u2'), 0);
+});
+
+// ---------------------------------------------------------------- EventSub
+
+test('das EventSub-Ereignis wird in unsere Form gebracht', () => {
+  const e = ausEventSub({
+    id: 'red-1',
+    user_id: '42',
+    user_name: 'Kevin',
+    user_input: 'lies das vor',
+    redeemed_at: '2026-09-17T20:00:00Z',
+    reward: { id: 'rw-9', title: 'Vorlesen', cost: 500 },
+  });
+  assert.equal(e?.id, 'red-1');
+  assert.equal(e?.rewardId, 'rw-9');
+  assert.equal(e?.rewardTitle, 'Vorlesen');
+  assert.equal(e?.text, 'lies das vor');
+  assert.equal(e?.kosten, 500);
+});
+
+test('eine Belohnung ohne Texteingabe hat einen leeren Text, nicht "undefined"', () => {
+  // Ohne das stuende im Bild woertlich "undefined".
+  const e = ausEventSub({ id: 'x', user_id: '1', reward: { id: 'r' } });
+  assert.equal(e?.text, '');
+  assert.equal(e?.userName, '');
+});
+
+test('unvollstaendige Ereignisse werden verworfen', () => {
+  assert.equal(ausEventSub({}), null);
+  assert.equal(ausEventSub({ id: 'x' }), null);
+  assert.equal(ausEventSub({ id: 'x', user_id: '1' }), null, 'ohne Belohnung keine Aktion');
+});

apps/hub/src/rewards.ts

@@ -0,0 +1,251 @@
+// Was bei einer Kanalpunkt-Einloesung passiert.
+//
+// Der Weg: EventSub meldet die Einloesung -> hier wird sie einer Aktion aus
+// der Konfiguration zugeordnet -> die Aktion laeuft, oder sie landet in der
+// Warteschlange und wartet auf Abdus Klick.
+//
+// Zur Zuordnung: Belohnungen werden ueber ihren Titel gefunden, wahlweise
+// ueber die ID. Der Titel ist lesbar und laesst sich in der Konfiguration
+// wiedererkennen, kann sich aber aendern; die ID ist stabil, aber
+// nichtssagend. Deshalb beides, und die ID gewinnt.
+//
+// Warum TTS eine Warteschlange hat, steht in docs/projects/chat-control.md:
+// Kanalpunkte sammeln sich beim Zugucken von allein an und sind damit kaum
+// eine Huerde. Wer beliebigen Fremdtext ungeprueft vorlesen laesst, hat eine
+// Vorlesefunktion fuer Fremde im eigenen Stream.
+
+import { logger } from '#core/logger.ts';
+
+const log = logger('rewards');
+
+/** Eine Einloesung, so weit sie hier gebraucht wird. */
+export type Einloesung = {
+  id: string;
+  rewardId: string;
+  rewardTitle: string;
+  userId: string;
+  userName: string;
+  /** Der eingegebene Text. Leer, wenn die Belohnung keinen verlangt. */
+  text: string;
+  kosten: number;
+  ts: string;
+};
+
+export type AktionsArt =
+  | 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'liegestuetze' | 'nichts';
+
+export type BelohnungsPlan = {
+  /** Titel der Belohnung auf Twitch. Gross-/Kleinschreibung egal. */
+  titel?: string;
+  /** Stabile Belohnungs-ID. Gewinnt gegen den Titel. */
+  id?: string;
+  aktion: AktionsArt;
+  /** Nur bei `tts`: ohne Freigabe wird sofort vorgelesen. */
+  freigabe?: boolean;
+  /** Nur bei `tts`: laengerer Text wird abgelehnt statt gekuerzt. */
+  maxZeichen?: number;
+  /** Nur bei `liegestuetze`: so viele kommen je Einloesung dazu. Vorgabe 5. */
+  anzahl?: number;
+};
+
+export type RewardsConfig = {
+  enabled: boolean;
+  belohnungen: BelohnungsPlan[];
+  tts: {
+    /** Vorgabe fuer `freigabe`, wenn eine Belohnung nichts anderes sagt. */
+    freigabe: boolean;
+    maxZeichen: number;
+    /** Woerter, die den Text ohne Nachfrage ablehnen. */
+    blockliste: string[];
+    /** So viele Einloesungen je Person und Stunde. */
+    proPersonProStunde: number;
+  };
+};
+
+/** Was mit einer Einloesung geschehen soll. Rein, damit pruefbar. */
+export type Entscheidung =
+  | { art: 'ausfuehren'; aktion: Exclude<AktionsArt, 'tts' | 'nichts'>; plan: BelohnungsPlan }
+  | { art: 'vorlesen'; text: string }
+  | { art: 'warteschlange'; text: string }
+  | { art: 'abgelehnt'; grund: string }
+  | { art: 'unbekannt' };
+
+/** Findet den Plan zu einer Einloesung. ID gewinnt, sonst der Titel. */
+export function planFuer(
+  e: Pick<Einloesung, 'rewardId' | 'rewardTitle'>, plaene: BelohnungsPlan[],
+): BelohnungsPlan | undefined {
+  return plaene.find((p) => p.id && p.id === e.rewardId)
+    ?? plaene.find((p) => p.titel && p.titel.toLowerCase() === e.rewardTitle.toLowerCase());
+}
+
+export function entscheiden(
+  e: Einloesung,
+  cfg: RewardsConfig,
+  /** Wie oft diese Person in der letzten Stunde schon eingeloest hat. */
+  bisherigeDieseStunde = 0,
+): Entscheidung {
+  if (!cfg.enabled) return { art: 'abgelehnt', grund: 'Belohnungs-Aktionen sind ausgeschaltet' };
+
+  const plan = planFuer(e, cfg.belohnungen);
+  // Unbekannte Belohnung heisst nicht "Fehler": Abdu darf Belohnungen anlegen,
+  // die mit dem Toolkit nichts zu tun haben. Sie werden protokolliert und
+  // sonst in Ruhe gelassen.
+  if (!plan) return { art: 'unbekannt' };
+  if (plan.aktion === 'nichts') return { art: 'unbekannt' };
+
+  if (plan.aktion !== 'tts') {
+    return { art: 'ausfuehren', aktion: plan.aktion, plan };
+  }
+
+  // ---- ab hier nur noch TTS
+  const text = e.text.trim();
+  if (!text) return { art: 'abgelehnt', grund: 'kein Text eingegeben' };
+
+  const max = plan.maxZeichen ?? cfg.tts.maxZeichen;
+  if (text.length > max) {
+    // Abschneiden waere schlimmer: dann wird ein halber Satz vorgelesen, und
+    // niemand weiss, ob der Rest Absicht war.
+    return { art: 'abgelehnt', grund: `zu lang (${text.length} von ${max} Zeichen)` };
+  }
+
+  if (wortfilterTreffer(text, cfg.tts.blockliste)) return { art: 'abgelehnt', grund: 'Wortfilter' };
+
+  if (bisherigeDieseStunde >= cfg.tts.proPersonProStunde) {
+    return { art: 'abgelehnt', grund: 'zu viele Einloesungen in der letzten Stunde' };
+  }
+
+  const freigabe = plan.freigabe ?? cfg.tts.freigabe;
+  return freigabe ? { art: 'warteschlange', text } : { art: 'vorlesen', text };
+}
+
+// ---------------------------------------------------------------- Wortfilter
+
+const LEET: Record<string, string> = {
+  '0': 'o', '1': 'i', '3': 'e', '4': 'a', '5': 's', '7': 't', '8': 'b',
+  '@': 'a', '$': 's', '!': 'i', '|': 'i',
+};
+
+/**
+ * Text auf das bringen, was man hoert: klein, ohne Akzente, Leetspeak
+ * zurueckuebersetzt, Buchstabenketten auf einen gekuerzt. Wer "N 3 G G 3 R"
+ * oder "h.i.t.l.e.r" schreibt, will am Filter vorbei - vorgelesen klingt es
+ * trotzdem wie das Original.
+ *
+ * `mitLuecken` laesst Wortgrenzen als Leerzeichen stehen, sonst wird alles
+ * zusammengezogen.
+ */
+export function fuerFilter(text: string, mitLuecken: boolean): string {
+  return text
+    .toLowerCase()
+    .replace(/ß/g, 'ss')
+    .normalize('NFKD').replace(/\p{M}/gu, '')
+    .replace(/[0134578@$!|]/g, (c) => LEET[c] ?? c)
+    .replace(/[^a-z]+/g, mitLuecken ? ' ' : '')
+    .replace(/([a-z])\1+/g, '$1')
+    .trim();
+}
+
+/**
+ * Trifft der Text ein Wort der Blockliste?
+ *
+ * Lange Eintraege (ab 5 Buchstaben) werden im zusammengezogenen Text
+ * gesucht, damit Punkte und Leerzeichen dazwischen nicht helfen. Kurze nur
+ * am Wortanfang: zusammengezogen stuende "nazi" sonst auch in "kann azubi".
+ * Was danach kuerzer als 3 Buchstaben ist, nur als ganzes Wort: aus "www"
+ * wird "w", und das stuende am Anfang von "wie" und "weg".
+ */
+export function wortfilterTreffer(text: string, blockliste: string[]): string | undefined {
+  const dicht = fuerFilter(text, false);
+  const woerter = fuerFilter(text, true).split(' ');
+  return blockliste.find((eintrag) => {
+    const e = fuerFilter(eintrag, false);
+    if (!e) return false;
+    if (e.length < 3) return woerter.includes(e);
+    return e.length >= 5 ? dicht.includes(e) : woerter.some((w) => w.startsWith(e));
+  });
+}
+
+// ---------------------------------------------------------------- Warteschlange
+
+export type Wartend = {
+  id: string;
+  name: string;
+  text: string;
+  /** Fuer die Erstattung, falls abgelehnt wird. */
+  rewardId: string;
+  redemptionId: string;
+  seit: string;
+};
+
+export type Warteschlange = {
+  einreihen: (w: Wartend) => void;
+  /** Gibt den Eintrag zurueck, damit der Aufrufer ihn vorlesen lassen kann. */
+  entnehmen: (id: string) => Wartend | undefined;
+  liste: () => Wartend[];
+  leeren: () => Wartend[];
+};
+
+/**
+ * Wartende Nachrichten. Bewusst im Arbeitsspeicher: was beim Neustart
+ * verloren geht, war ohnehin nicht dringend, und eine Tabelle mit fremdem
+ * Text, die niemand aufraeumt, will hier niemand.
+ */
+export function createWarteschlange(maximal = 25): Warteschlange {
+  const wartend: Wartend[] = [];
+  return {
+    einreihen(w) {
+      wartend.push(w);
+      // Laeuft sie voll, faellt das Aelteste raus. Eine Warteschlange, die
+      // bei einem Ansturm auf 300 waechst, arbeitet Abdu nie ab.
+      while (wartend.length > maximal) {
+        const weg = wartend.shift();
+        if (weg) log.warn(`Warteschlange voll, aelteste Nachricht verworfen (${weg.name})`);
+      }
+    },
+    entnehmen(id) {
+      const i = wartend.findIndex((w) => w.id === id);
+      return i === -1 ? undefined : wartend.splice(i, 1)[0];
+    },
+    liste: () => [...wartend],
+    leeren: () => wartend.splice(0, wartend.length),
+  };
+}
+
+/**
+ * Zaehlt Einloesungen je Person in einem gleitenden Fenster.
+ * Braucht keine Datenbank - nach einem Neustart faengt das Fenster neu an,
+ * und das ist bei einer Stunde Fensterbreite egal.
+ */
+export function createDrossel(fensterMs = 3_600_000) {
+  const gesehen = new Map<string, number[]>();
+  return {
+    zaehlen(userId: string, jetzt = Date.now()): number {
+      const bisher = (gesehen.get(userId) ?? []).filter((t) => jetzt - t < fensterMs);
+      gesehen.set(userId, bisher);
+      return bisher.length;
+    },
+    merken(userId: string, jetzt = Date.now()): void {
+      const bisher = (gesehen.get(userId) ?? []).filter((t) => jetzt - t < fensterMs);
+      bisher.push(jetzt);
+      gesehen.set(userId, bisher);
+    },
+  };
+}
+
+/** Das EventSub-Ereignis in unsere Form bringen. */
+export function ausEventSub(event: Record<string, unknown>): Einloesung | null {
+  const reward = event['reward'] as { id?: string; title?: string; cost?: number } | undefined;
+  const id = event['id'];
+  const userId = event['user_id'];
+  if (typeof id !== 'string' || typeof userId !== 'string' || !reward?.id) return null;
+  return {
+    id,
+    rewardId: reward.id,
+    rewardTitle: reward.title ?? '',
+    userId,
+    userName: String(event['user_name'] ?? event['user_login'] ?? ''),
+    text: String(event['user_input'] ?? ''),
+    kosten: Number(reward.cost ?? 0),
+    ts: String(event['redeemed_at'] ?? new Date().toISOString()),
+  };
+}

apps/ingest/src/fern.test.ts

@@ -0,0 +1,151 @@
+// Die Leitung zum Hub, Seite des Stream-PCs.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import type { ObsClient } from '#obs/client.ts';
+import {
+  befehlAus, einrichtenAus, SOUND_QUELLE, soundQuelleEinrichten, sseZerleger, standLesen, TON_SZENE,
+} from './fern.ts';
+
+test('SSE: Nachrichten, die zerteilt oder zu zweit ankommen', () => {
+  const z = sseZerleger();
+  assert.deepEqual(z('retry: 2000\n\n'), [], 'retry allein ist keine Nachricht');
+  assert.deepEqual(z('data: {"a"'), []);
+  assert.deepEqual(z(':1}\n\ndata: 2\n\nda'), ['{"a":1}', '2']);
+  assert.deepEqual(z('ta: 3\r\n\r\n'), ['3'], 'auch mit Windows-Zeilenenden');
+});
+
+test('nur bekannte Befehle mit ID werden ausgefuehrt', () => {
+  assert.deepEqual(befehlAus({ id: 'x', art: 'szene', szene: 'Pause' }), { id: 'x', art: 'szene', szene: 'Pause' });
+  assert.deepEqual(befehlAus({ id: 'x', art: 'stumm', quelle: 'Mikro', stumm: true }),
+    { id: 'x', art: 'stumm', quelle: 'Mikro', stumm: true });
+  assert.equal(befehlAus({ art: 'clip' }), null, 'ohne ID gibt es niemanden, dem man antwortet');
+  assert.equal(befehlAus({ id: 'x', art: 'beat' }), null);
+  assert.equal(befehlAus({ id: 'x', art: 'StopStream' }), null);
+});
+
+function falschesObs(antworten: Record<string, (d: Record<string, unknown>) => unknown>): ObsClient {
+  return {
+    run: async () => {},
+    isConnected: () => true,
+    request: async <T>(type: string, data?: unknown): Promise<T> => {
+      const f = antworten[type];
+      if (!f) throw new Error(`OBS lehnt ab (604): ${type}`);
+      return f((data ?? {}) as Record<string, unknown>) as T;
+    },
+  };
+}
+
+test('Stand: Szenen in OBS-Reihenfolge, nur Eingaenge mit Ton', async () => {
+  const obs = falschesObs({
+    GetSceneList: () => ({
+      currentProgramSceneName: 'Gameplay',
+      // OBS zaehlt von unten: Index 0 steht im Fenster ganz unten.
+      scenes: [{ sceneName: 'Pause', sceneIndex: 0 }, { sceneName: 'Gameplay', sceneIndex: 2 },
+        { sceneName: 'Just Chatting', sceneIndex: 1 }],
+    }),
+    GetInputList: () => ({ inputs: [{ inputName: 'Mikro' }, { inputName: 'Facecam' }, { inputName: 'Desktop' }] }),
+    GetInputMute: (d) => {
+      if (d['inputName'] === 'Facecam') throw new Error('kein Ton');
+      return { inputMuted: d['inputName'] === 'Desktop' };
+    },
+    GetReplayBufferStatus: () => ({ outputActive: true }),
+  });
+  assert.deepEqual(await standLesen(obs), {
+    obs: true,
+    szenen: ['Gameplay', 'Just Chatting', 'Pause'],
+    aktuell: 'Gameplay',
+    ton: [{ name: 'Mikro', stumm: false }, { name: 'Desktop', stumm: true }],
+    puffer: true,
+  });
+});
+
+test('Stand ohne Wiedergabepuffer: kein Clip-Knopf, aber Szenen', async () => {
+  const obs = falschesObs({
+    GetSceneList: () => ({ currentProgramSceneName: 'A', scenes: [{ sceneName: 'A', sceneIndex: 0 }] }),
+    GetInputList: () => ({ inputs: [] }),
+  });
+  const s = await standLesen(obs);
+  assert.equal(s.puffer, false);
+  assert.deepEqual(s.szenen, ['A']);
+});
+
+test('nur eine Adresse auf die Sound-Seite wird als Browser-Source angelegt', () => {
+  assert.deepEqual(einrichtenAus({ art: 'einrichten', soundsUrl: 'https://abdu.dimension47.de/sounds?key=4OB0-x_y' }),
+    { art: 'einrichten', soundsUrl: 'https://abdu.dimension47.de/sounds?key=4OB0-x_y' });
+  assert.equal(einrichtenAus({ art: 'einrichten', soundsUrl: 'https://boese.example/irgendwas' }), null);
+  assert.equal(einrichtenAus({ art: 'einrichten', soundsUrl: 'javascript:alert(1)//sounds?key=a' }), null);
+  assert.equal(einrichtenAus({ art: 'szene', soundsUrl: 'https://a/sounds?key=a' }), null);
+});
+
+/** OBS zum Mitschreiben: Szenen, Quellen und was darin steckt. */
+function obsMitSzenen(szenen: string[]) {
+  const inhalt = new Map<string, string[]>(szenen.map((s) => [s, []]));
+  const quellen = new Map<string, Record<string, unknown>>();
+  const aufrufe: string[] = [];
+  const obs: ObsClient = {
+    run: async () => {},
+    isConnected: () => true,
+    request: async <T>(type: string, data?: unknown): Promise<T> => {
+      const d = (data ?? {}) as Record<string, unknown>;
+      aufrufe.push(type);
+      switch (type) {
+        case 'GetSceneList': return { scenes: [...inhalt.keys()].map((sceneName) => ({ sceneName })) } as T;
+        case 'CreateScene': inhalt.set(String(d['sceneName']), []); return {} as T;
+        case 'GetInputSettings': {
+          const q = quellen.get(String(d['inputName']));
+          if (!q) throw new Error('OBS lehnt ab (600): keine Quelle');
+          return { inputSettings: q } as T;
+        }
+        case 'CreateInput':
+          quellen.set(String(d['inputName']), d['inputSettings'] as Record<string, unknown>);
+          inhalt.get(String(d['sceneName']))!.push(String(d['inputName']));
+          return {} as T;
+        case 'SetInputSettings':
+          Object.assign(quellen.get(String(d['inputName']))!, d['inputSettings']);
+          return {} as T;
+        case 'GetSceneItemList':
+          return { sceneItems: inhalt.get(String(d['sceneName']))!.map((sourceName) => ({ sourceName })) } as T;
+        case 'CreateSceneItem':
+          inhalt.get(String(d['sceneName']))!.push(String(d['sourceName']));
+          return {} as T;
+      }
+      throw new Error(`unerwartet: ${type}`);
+    },
+  };
+  return { obs, inhalt, quellen, aufrufe };
+}
+
+test('Sound-Quelle: einmal angelegt, in jeder Szene, ein zweiter Lauf aendert nichts', async () => {
+  const o = obsMitSzenen(['Gameplay', 'Pause']);
+  const url = 'https://hub/sounds?key=a';
+  const getan = await soundQuelleEinrichten(o.obs, url);
+  assert.equal(getan.length, 4);
+  assert.deepEqual(o.inhalt.get(TON_SZENE), [SOUND_QUELLE]);
+  assert.deepEqual(o.inhalt.get('Gameplay'), [TON_SZENE]);
+  assert.deepEqual(o.inhalt.get('Pause'), [TON_SZENE]);
+  const q = o.quellen.get(SOUND_QUELLE)!;
+  assert.equal(q['reroute_audio'], true, 'sonst geht der Ton am Stream vorbei');
+  assert.equal(q['shutdown'], false);
+
+  assert.deepEqual(await soundQuelleEinrichten(o.obs, url), []);
+  assert.equal(o.aufrufe.filter((a) => a.startsWith('Create')).length, 4);
+});
+
+test('Sound-Quelle: neue Szene und neuer Schluessel werden nachgezogen', async () => {
+  const o = obsMitSzenen(['Gameplay']);
+  await soundQuelleEinrichten(o.obs, 'https://hub/sounds?key=alt');
+  o.inhalt.set('Just Chatting', []);
+  const getan = await soundQuelleEinrichten(o.obs, 'https://hub/sounds?key=neu');
+  assert.deepEqual(getan, [`Adresse von "${SOUND_QUELLE}" erneuert`, 'in "Just Chatting" eingehaengt']);
+  assert.equal(o.quellen.get(SOUND_QUELLE)!['url'], 'https://hub/sounds?key=neu');
+});
+
+test('die eigene Ton-Szene steht nicht in der Szenenauswahl', async () => {
+  const obs = falschesObs({
+    GetSceneList: () => ({ currentProgramSceneName: 'A', scenes: [
+      { sceneName: 'A', sceneIndex: 1 }, { sceneName: TON_SZENE, sceneIndex: 0 }] }),
+    GetInputList: () => ({ inputs: [] }),
+  });
+  assert.deepEqual((await standLesen(obs)).szenen, ['A']);
+});

apps/ingest/src/fern.ts

@@ -0,0 +1,380 @@
+// Fernsteuerung fuer OBS, Seite des Stream-PCs.
+//
+// Das Pult am Handy redet mit dem Hub, OBS laeuft hier. Der Hub kommt an
+// diesen Rechner nicht heran (fremder Router, keine Portfreigabe), also waehlt
+// sich der PC beim Hub ein und haelt die Leitung offen:
+//
+//   GET  /fern/befehle   SSE, Befehle kommen herein     (Hub -> PC)
+//   POST /fern/stand     Szenen, aktuelle Szene, Ton    (PC -> Hub)
+//   POST /fern/antwort   ob ein Befehl geklappt hat     (PC -> Hub)
+//
+// Gegenstueck: apps/overlay-server/src/fern.ts.
+//
+// Einzurichten ist nichts. Beim ersten Start wuerfelt der PC einen Schluessel
+// und klopft damit beim Hub an; der antwortet 202, bis im Pult jemand auf
+// "Freigeben" tippt. Danach schickt der Hub die Adresse der Sound-Quelle, und
+// der PC legt sie in OBS selbst an. `abdulive fern:verbinden` bleibt als Weg
+// von Hand.
+
+import { logger } from '#core/logger.ts';
+import { forever, sleep } from '#core/retry.ts';
+import type { ObsClient } from '#obs/client.ts';
+
+const log = logger('fern');
+
+/** Der Hub schickt alle 15 s einen Herzschlag. Drei verpasste heisst: tot. */
+const TOT_NACH_MS = 45_000;
+
+/** So oft fragt ein noch nicht freigegebener PC nach. */
+const WARTEN_MS = 10_000;
+
+/**
+ * Was der PC in OBS anlegt. Die Sound-Quelle sitzt in einer eigenen Szene,
+ * und diese Szene haengt in jeder anderen: OBS gibt den Ton einer Quelle nur
+ * aus, wenn sie in der gerade gezeigten Szene liegt. So gibt es die Quelle
+ * trotzdem nur einmal, und ein Szenenwechsel startet sie nicht neu.
+ */
+export const TON_SZENE = 'abdulive Ton';
+export const SOUND_QUELLE = 'abdulive Sounds';
+
+/** Nach diesen OBS-Ereignissen stimmt der gemeldete Stand nicht mehr. */
+const STAND_EREIGNISSE = new Set([
+  'CurrentProgramSceneChanged', 'SceneListChanged', 'SceneCreated', 'SceneRemoved',
+  'SceneNameChanged', 'InputMuteStateChanged', 'InputCreated', 'InputRemoved',
+  'InputNameChanged', 'ReplayBufferStateChanged',
+]);
+
+export type Stand = {
+  obs: boolean;
+  szenen: string[];
+  aktuell: string | null;
+  ton: Array<{ name: string; stumm: boolean }>;
+  puffer: boolean;
+};
+
+export type Befehl =
+  | { id: string; art: 'szene'; szene: string }
+  | { id: string; art: 'clip' }
+  | { id: string; art: 'stumm'; quelle: string; stumm: boolean };
+
+/** Kommt gleich nach dem Verbinden, ohne ID: darauf antwortet niemand. */
+export type Einrichten = { art: 'einrichten'; soundsUrl: string };
+
+export function einrichtenAus(roh: unknown): Einrichten | null {
+  if (!roh || typeof roh !== 'object') return null;
+  const r = roh as Record<string, unknown>;
+  const url = r['soundsUrl'];
+  // Nur eine Adresse auf eine Sound-Seite. Was der Hub hier schickt, landet
+  // als Browser-Source in OBS - eine beliebige Seite haette dort nichts verloren.
+  if (r['art'] !== 'einrichten' || typeof url !== 'string' || !/^https?:\/\/[^\s]+\/sounds\?key=[\w-]+$/.test(url)) {
+    return null;
+  }
+  return { art: 'einrichten', soundsUrl: url };
+}
+
+/**
+ * Zerlegt einen SSE-Strom in Nachrichten. Bekommt beliebige Stuecke - eine
+ * Nachricht kann mitten im Wort geteilt ankommen, und zwei koennen in einem
+ * Stueck stecken.
+ */
+export function sseZerleger(): (stueck: string) => string[] {
+  let rest = '';
+  return (stueck) => {
+    rest += stueck.replace(/\r\n?/g, '\n');
+    const fertig: string[] = [];
+    let i: number;
+    while ((i = rest.indexOf('\n\n')) !== -1) {
+      const block = rest.slice(0, i);
+      rest = rest.slice(i + 2);
+      const daten = block.split('\n')
+        .filter((z) => z.startsWith('data:'))
+        .map((z) => z.slice(5).replace(/^ /, ''));
+      if (daten.length) fertig.push(daten.join('\n'));
+    }
+    return fertig;
+  };
+}
+
+/** Was vom Hub kommt, pruefen. Unbekanntes wird nicht ausgefuehrt. */
+export function befehlAus(roh: unknown): Befehl | null {
+  if (!roh || typeof roh !== 'object') return null;
+  const r = roh as Record<string, unknown>;
+  const id = typeof r['id'] === 'string' ? r['id'] : '';
+  if (!id) return null;
+  if (r['art'] === 'szene' && typeof r['szene'] === 'string') return { id, art: 'szene', szene: r['szene'] };
+  if (r['art'] === 'clip') return { id, art: 'clip' };
+  if (r['art'] === 'stumm' && typeof r['quelle'] === 'string') {
+    return { id, art: 'stumm', quelle: r['quelle'], stumm: r['stumm'] === true };
+  }
+  return null;
+}
+
+/** Szenen, aktuelle Szene, stummschaltbare Eingaenge und der Puffer. */
+export async function standLesen(obs: ObsClient): Promise<Stand> {
+  const leer: Stand = { obs: false, szenen: [], aktuell: null, ton: [], puffer: false };
+  if (!obs.isConnected()) return leer;
+  try {
+    const liste = await obs.request<{
+      currentProgramSceneName: string;
+      scenes: Array<{ sceneName: string; sceneIndex: number }>;
+    }>('GetSceneList');
+    // OBS zaehlt von unten. Im Fenster steht die mit dem hoechsten Index oben,
+    // und in dieser Reihenfolge erwartet man sie auch am Handy.
+    const szenen = [...liste.scenes]
+      .sort((a, b) => b.sceneIndex - a.sceneIndex).map((s) => s.sceneName)
+      // Die eigene Ton-Szene ist zum Einhaengen da, nicht zum Umschalten.
+      .filter((s) => s !== TON_SZENE);
+
+    const eingaenge = await obs.request<{ inputs: Array<{ inputName: string }> }>('GetInputList');
+    // Welcher Eingang Ton hat, sagt OBS nicht direkt. Wer auf GetInputMute
+    // antwortet, hat welchen; Bildquellen lehnen ab.
+    const stumm = await Promise.allSettled(eingaenge.inputs.map((e) =>
+      obs.request<{ inputMuted: boolean }>('GetInputMute', { inputName: e.inputName })
+        .then((r) => ({ name: e.inputName, stumm: r.inputMuted }))));
+    const ton = stumm.flatMap((r) => (r.status === 'fulfilled' ? [r.value] : []));
+
+    const puffer = await obs.request<{ outputActive: boolean }>('GetReplayBufferStatus')
+      .then((r) => r.outputActive, () => false);
+
+    return { obs: true, szenen, aktuell: liste.currentProgramSceneName || null, ton, puffer };
+  } catch (err) {
+    log.debug(`Stand nicht gelesen: ${(err as Error).message}`);
+    return { ...leer, obs: obs.isConnected() };
+  }
+}
+
+/**
+ * Legt die Sound-Quelle in OBS an, wenn sie fehlt, und haengt die Ton-Szene
+ * in jede Szene, in der sie noch nicht steckt. Laeuft beim Verbinden und bei
+ * jeder neuen Szene; ein zweiter Lauf aendert nichts.
+ *
+ * Gibt zurueck, was getan wurde - fuers Protokoll.
+ */
+export async function soundQuelleEinrichten(obs: ObsClient, url: string): Promise<string[]> {
+  const getan: string[] = [];
+  const liste = await obs.request<{ scenes: Array<{ sceneName: string }> }>('GetSceneList');
+  const namen = liste.scenes.map((s) => s.sceneName);
+
+  if (!namen.includes(TON_SZENE)) {
+    await obs.request('CreateScene', { sceneName: TON_SZENE });
+    getan.push(`Szene "${TON_SZENE}" angelegt`);
+  }
+
+  const vorhanden = await obs.request<{ inputSettings: Record<string, unknown> }>(
+    'GetInputSettings', { inputName: SOUND_QUELLE }).catch(() => null);
+  const einstellungen = {
+    url, width: 400, height: 120,
+    // "Audio ueber OBS steuern": ohne das geht der Ton am Mixer vorbei
+    // direkt auf die Lautsprecher und nie in den Stream.
+    reroute_audio: true,
+    // Weiterlaufen, auch wenn gerade nicht sichtbar, und beim Szenenwechsel
+    // nicht neu laden - sonst bricht jeder Wechsel den laufenden Sound ab.
+    shutdown: false,
+    restart_when_active: false,
+  };
+  if (!vorhanden) {
+    await obs.request('CreateInput', {
+      sceneName: TON_SZENE, inputName: SOUND_QUELLE, inputKind: 'browser_source',
+      inputSettings: einstellungen, sceneItemEnabled: true,
+    });
+    getan.push(`Quelle "${SOUND_QUELLE}" angelegt`);
+  } else if (vorhanden.inputSettings['url'] !== url) {
+    // Neuer Overlay-Schluessel auf dem Hub: die alte Adresse ist tot.
+    await obs.request('SetInputSettings', { inputName: SOUND_QUELLE, inputSettings: { url } });
+    getan.push(`Adresse von "${SOUND_QUELLE}" erneuert`);
+  }
+
+  for (const szene of namen) {
+    if (szene === TON_SZENE) continue;
+    const inhalt = await obs.request<{ sceneItems: Array<{ sourceName: string }> }>(
+      'GetSceneItemList', { sceneName: szene });
+    if (inhalt.sceneItems.some((i) => i.sourceName === TON_SZENE)) continue;
+    await obs.request('CreateSceneItem', { sceneName: szene, sourceName: TON_SZENE, sceneItemEnabled: true });
+    getan.push(`in "${szene}" eingehaengt`);
+  }
+  return getan;
+}
+
+export type FernDeps = {
+  url: string;
+  key: string;
+  /** So erscheint der PC bei der Freigabe im Pult. */
+  name: string;
+  obs: ObsClient;
+  /** Den Wiedergabepuffer sichern, wie bei !clip, nur ohne Abklingzeit. */
+  clip: () => Promise<{ ok: boolean; reason?: string }>;
+};
+
+export type FernAnschluss = {
+  run: (signal: AbortSignal) => Promise<void>;
+  /** Nach einem OBS-Ereignis rufen. Sammelt kurz, dann geht ein Stand raus. */
+  obsEreignis: (type: string) => void;
+  /** OBS verbunden oder getrennt. */
+  obsWechsel: () => void;
+  verbunden: () => boolean;
+};
+
+
+export function createFernanschluss(deps: FernDeps): FernAnschluss {
+  const basis = deps.url.replace(/\/+$/, '');
+  // Der Rechnername steht nur in der Freigabe im Pult. Nur ASCII: ein Umlaut
+  // im Namen machte den ganzen Kopf ungueltig, und fetch wirft.
+  const kopf = {
+    authorization: `Bearer ${deps.key}`,
+    'x-abdulive-rechner': deps.name.replace(/[^\x20-\x7e]/g, '?').slice(0, 40),
+  };
+  let verbunden = false;
+  let sammler: NodeJS.Timeout | null = null;
+  /** Kommt vom Hub nach dem Verbinden. Bis dahin wird in OBS nichts angelegt. */
+  let soundsUrl: string | null = null;
+  let richtetEin = false;
+
+  async function post(pfad: string, body: unknown): Promise<void> {
+    try {
+      const res = await fetch(`${basis}${pfad}`, {
+        method: 'POST',
+        headers: { ...kopf, 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+        signal: AbortSignal.timeout(10_000),
+      });
+      if (!res.ok) log.warn(`${pfad}: Hub antwortet ${res.status}`);
+    } catch (err) {
+      log.debug(`${pfad} nicht zugestellt: ${(err as Error).message}`);
+    }
+  }
+
+  const standSenden = async (): Promise<void> => {
+    if (!verbunden) return;
+    await post('/fern/stand', await standLesen(deps.obs));
+  };
+
+  const spaeterSenden = (): void => {
+    // OBS feuert beim Szenenwechsel mehrere Ereignisse kurz hintereinander.
+    // Ein Stand danach reicht.
+    if (sammler) clearTimeout(sammler);
+    sammler = setTimeout(() => { sammler = null; void standSenden(); }, 300);
+  };
+
+  /** Sound-Quelle in OBS anlegen bzw. pruefen. Nie zweimal gleichzeitig. */
+  const einrichten = async (): Promise<void> => {
+    if (!soundsUrl || !deps.obs.isConnected() || richtetEin) return;
+    richtetEin = true;
+    try {
+      const getan = await soundQuelleEinrichten(deps.obs, soundsUrl);
+      if (getan.length) log.info(`OBS eingerichtet: ${getan.join(', ')}`);
+      if (getan.length) spaeterSenden();
+    } catch (err) {
+      log.warn(`Sound-Quelle in OBS nicht eingerichtet: ${(err as Error).message}`);
+    } finally {
+      richtetEin = false;
+    }
+  };
+
+  async function ausfuehren(b: Befehl): Promise<{ ok: boolean; text: string }> {
+    if (b.art === 'clip') {
+      const r = await deps.clip();
+      return r.ok ? { ok: true, text: 'Clip wird gesichert.' }
+        : { ok: false, text: r.reason ?? 'Clip ging nicht.' };
+    }
+    if (!deps.obs.isConnected()) return { ok: false, text: 'OBS ist auf dem Stream-PC nicht verbunden.' };
+    try {
+      if (b.art === 'szene') {
+        await deps.obs.request('SetCurrentProgramScene', { sceneName: b.szene });
+        return { ok: true, text: `Szene: ${b.szene}` };
+      }
+      await deps.obs.request('SetInputMute', { inputName: b.quelle, inputMuted: b.stumm });
+      return { ok: true, text: `${b.quelle} ${b.stumm ? 'stumm' : 'wieder an'}` };
+    } catch (err) {
+      return { ok: false, text: (err as Error).message };
+    }
+  }
+
+  async function einmal(signal: AbortSignal): Promise<void> {
+    const wachhund = new AbortController();
+    const beides = AbortSignal.any([signal, wachhund.signal]);
+    let zuletzt = Date.now();
+    const takt = setInterval(() => {
+      if (Date.now() - zuletzt > TOT_NACH_MS) {
+        log.warn('Vom Hub nichts mehr gehoert, verbinde neu');
+        wachhund.abort();
+      }
+    }, 10_000);
+
+    try {
+      let res: Response;
+      let gemeldet = false;
+      // Solange der Hub 202 sagt, ist der PC noch nicht freigegeben. Dann im
+      // festen Takt nachfragen - die Freigabe soll ein paar Sekunden nach dem
+      // Tipp im Pult greifen, nicht erst nach einer Minute Rueckzug.
+      for (;;) {
+        res = await fetch(`${basis}/fern/befehle`, {
+          headers: { ...kopf, accept: 'text/event-stream' }, signal: beides,
+        });
+        if (res.status !== 202) break;
+        await res.body?.cancel().catch(() => {});
+        if (!gemeldet) {
+          log.info(`Wartet auf Freigabe: im Pult (${basis}/pult) unter Szenen auf „Freigeben“ tippen`);
+          gemeldet = true;
+        }
+        zuletzt = Date.now();
+        await sleep(WARTEN_MS, beides);
+      }
+      if (res.status === 403) {
+        log.error('Der Hub lehnt den Schluessel ab. Neu einrichten mit dem Befehl ' +
+          'von der Uebersichtsseite: abdulive fern:verbinden ...');
+        // Nicht im Sekundentakt anklopfen, der Schluessel wird nicht von allein richtig.
+        await sleep(5 * 60_000, signal).catch(() => {});
+        throw new Error('Schluessel abgelehnt');
+      }
+      if (!res.ok || !res.body) throw new Error(`Hub antwortet ${res.status}`);
+
+      verbunden = true;
+      log.info(`Mit dem Hub verbunden (${basis}) - das Pult kann OBS jetzt steuern`);
+      void standSenden();
+
+      const zerleger = sseZerleger();
+      const decoder = new TextDecoder();
+      for await (const stueck of res.body as unknown as AsyncIterable<Uint8Array>) {
+        zuletzt = Date.now();
+        for (const daten of zerleger(decoder.decode(stueck, { stream: true }))) {
+          let roh: unknown;
+          try { roh = JSON.parse(daten); } catch { continue; }
+          const e = einrichtenAus(roh);
+          if (e) { soundsUrl = e.soundsUrl; void einrichten(); continue; }
+          const b = befehlAus(roh);
+          if (!b) continue;
+          void ausfuehren(b).then((a) => {
+            log.info(`Pult: ${b.art} -> ${a.ok ? 'ok' : 'abgelehnt'} (${a.text})`);
+            return post('/fern/antwort', { id: b.id, ...a });
+          }).then(spaeterSenden);
+        }
+      }
+      throw new Error('Hub hat die Leitung geschlossen');
+    } catch (err) {
+      if (!signal.aborted) log.debug(`Leitung zum Hub weg: ${(err as Error).message}`);
+      throw err;
+    } finally {
+      clearInterval(takt);
+      if (verbunden) log.info('Leitung zum Hub getrennt');
+      verbunden = false;
+    }
+  }
+
+  return {
+    run: (signal) => forever(einmal, {
+      signal, baseMs: 2000, maxMs: 60_000,
+      onWait: (ms, n) => {
+        const zeile = `Hub nicht erreichbar, neuer Versuch in ${Math.round(ms / 1000)} s`;
+        if (n >= 3) log.warn(zeile); else log.debug(zeile);
+      },
+    }),
+    obsEreignis: (type) => {
+      if (STAND_EREIGNISSE.has(type)) spaeterSenden();
+      // Eine neue Szene bekommt die Ton-Szene gleich mit, sonst ist dort
+      // das Soundboard stumm.
+      if (type === 'SceneCreated') void einrichten();
+    },
+    obsWechsel: () => { spaeterSenden(); void einrichten(); },
+    verbunden: () => verbunden,
+  };
+}

apps/ingest/src/index.ts

@@ -15,8 +15,13 @@ import { createObs } from '#obs/client.ts';
 import { isWindows } from '#core/platform.ts';
 import { helix } from '#twitch/helix.ts';
 import { createIrc } from '#twitch/irc.ts';
-import { readSecrets } from '#twitch/secrets.ts';
+import { readSecrets, updateSecrets } from '#twitch/secrets.ts';
+import crypto from 'node:crypto';
+import os from 'node:os';
+import { streamWechsel } from '#twitch/stream-state.ts';
+import { createAnnouncer, type StreamInfo } from '../../broadcaster/src/golive.ts';
 import { createClipper } from './clips.ts';
+import { createFernanschluss } from './fern.ts';
 import { createRenderer } from './render.ts';
 import { createSpikeDetector } from './spike.ts';
 import { startServer } from './server.ts';
@@ -42,6 +47,7 @@ export async function runIngest(): Promise<void> {
     messages: 0,
     spikeCandidates: 0,
     clipsTriggered: 0,
+    goLive: 'noch nichts' as string,
     lastError: null as string | null,
   };
 
@@ -59,8 +65,9 @@ export async function runIngest(): Promise<void> {
     cfg.obs.url,
     () => readSecrets().obs?.password,
     {
-      onIdentified: () => { state.obsConnected = true; },
+      onIdentified: () => { state.obsConnected = true; fern?.obsWechsel(); },
-      onClosed: () => { state.obsConnected = false; },
+      onClosed: () => { state.obsConnected = false; fern?.obsWechsel(); },
+      onEvent: (type) => fern?.obsEreignis(type),
       onSceneChanged: (scene) => {
         state.obsScene = scene;
         repo.event('obs.scene_changed', { scene }, state.streamId);
@@ -111,6 +118,36 @@ export async function runIngest(): Promise<void> {
     onRawReady: (job) => renderer.enqueue(job),
   });
 
+  // ---- Fernsteuerung vom Pult (Szenen, Clip, Ton). Einzurichten ist
+  // nichts: beim ersten Start wird ein Schluessel gewuerfelt, der PC meldet
+  // sich beim Hub, und im Pult erscheint "Freigeben".
+  const fernZugang = fernZugangHolen(cfg.fern.url);
+  const fern = fernZugang
+    ? createFernanschluss({
+      url: fernZugang.url,
+      key: fernZugang.key,
+      name: os.hostname(),
+      obs,
+      clip: () => clipper.trigger('manual', { login: 'Pult' }),
+    })
+    : null;
+  if (fern) void fern.run(abort.signal);
+  else log.info('Pult-Fernsteuerung aus (fern.url ist leer)');
+
+  // ---- Go-Live-Ankuendigung auf Discord
+  const announcer = createAnnouncer({
+    cfg: {
+      enabled: cfg.broadcaster.enabled,
+      mode: cfg.broadcaster.mode,
+      delaySeconds: cfg.broadcaster.delaySecondsAfterOnline,
+      cooldownHours: cfg.broadcaster.cooldownHours,
+      pingRole: cfg.broadcaster.pingRole,
+      obsScreenshot: cfg.broadcaster.obsScreenshot,
+    },
+    repo,
+    obs,
+  });
+
   startServer({
     channel: cfg.channel.login,
     port: cfg.dashboard.port,
@@ -118,8 +155,10 @@ export async function runIngest(): Promise<void> {
       ...state,
       db: repo.stats(),
       discordConnected: bot ? bot.isConnected() : false,
+      goLive: announcer.lastResult() ?? state.goLive,
       spikeArmed: spikes.isArmed(),
       clipsWaitingForFile: clipper.pendingCount(),
+      pult: fern ? (fern.verbunden() ? 'verbunden' : 'getrennt') : 'nicht eingerichtet',
       renderQueue: renderer.pending(),
       rendering: renderer.currentJob(),
       note: state.chatAnonymous
@@ -177,22 +216,43 @@ export async function runIngest(): Promise<void> {
   if (bot) void bot.run(abort.signal);
 
   // ---- Zuschauerzahlen und Stream-Sessions
-  void pollStream(cfg, repo, state, abort.signal);
+  void pollStream(cfg, repo, state, abort.signal, (stream) => {
+    state.goLive = 'laeuft';
+    announcer.announce(stream);
+  });
 
   log.info(`Ingest laeuft fuer #${cfg.channel.login}`);
   await new Promise<void>((resolve) => abort.signal.addEventListener('abort', () => resolve()));
 }
 
+/**
+ * Adresse und Schluessel fuer die Leitung zum Hub. Was mit
+ * `abdulive fern:verbinden` von Hand eingetragen ist, gewinnt. Sonst wird
+ * einmal gewuerfelt und gemerkt - der Hub kennt den Schluessel erst nach der
+ * Freigabe im Pult, also darf er sich nicht bei jedem Start aendern.
+ */
+function fernZugangHolen(vorgabeUrl: string): { url: string; key: string } | null {
+  const da = readSecrets().fern;
+  if (da?.url && da.key) return da;
+  if (!vorgabeUrl) return null;
+  const neu = { url: vorgabeUrl, key: crypto.randomBytes(24).toString('base64url') };
+  updateSecrets((s) => { s.fern = neu; });
+  log.info(`Neuer Schluessel fuer das Pult gewuerfelt - meldet sich bei ${vorgabeUrl}`);
+  return neu;
+}
+
 type State = {
   streamId: string | null; broadcasterId: string | null;
-  lastSeenLive: number; viewers: number; lastError: string | null;
+  lastSeenLive: number; viewers: number; goLive: string; lastError: string | null;
 };
 
 async function pollStream(
   cfg: ReturnType<typeof loadConfig>,
   repo: ReturnType<typeof repos>,
   state: State,
-  signal: AbortSignal
+  signal: AbortSignal,
+  /** Genau einmal je neu erkanntem Stream. Fortsetzungen zaehlen nicht. */
+  onOnline: (stream: StreamInfo) => void
 ): Promise<void> {
   const gapMs = cfg.ingest.sessionGapMinutes * 60_000;
   let warnedMissingAuth = false;
@@ -208,10 +268,12 @@ async function pollStream(
 
   while (!signal.aborted) {
     try {
-      if (!readSecrets().tokens.broadcaster) {
+      // Client-ID und Secret genuegen: `GET /users` und `GET /streams` laufen
+      // mit einem App-Token, auch ohne verbundenes Konto.
+      if (!helix.canReadStream()) {
         if (!warnedMissingAuth) {
-          log.warn('Kein Broadcaster-Token - Zuschauerzahlen und Stream-Sitzungen bleiben aus. ' +
+          log.warn('Keine Twitch-App hinterlegt - Zuschauerzahlen und Stream-Sitzungen ' +
-            'Einrichtung unter /setup.');
+            'bleiben aus. Einrichtung unter /setup.');
           warnedMissingAuth = true;
         }
       } else {
@@ -223,33 +285,49 @@ async function pollStream(
         const live = userId ? await helix.streamByUserId(userId) : null;
         const now = Date.now();
 
+        // Die Entscheidung "neuer Stream oder Fortsetzung" steht in
+        // #twitch/stream-state.ts und ist dort geprueft. Sie haengt daran,
+        // ob ein zweiter Rundruf rausgeht.
+        const wechsel = streamWechsel({
+          live: live ? { id: live.id, startedAt: live.started_at } : null,
+          laufendeId: state.streamId,
+          zuletztLive: state.lastSeenLive,
+          jetzt: now,
+          luckeMs: gapMs,
+        });
+
+        if (wechsel.art === 'gestartet') {
+          state.streamId = wechsel.id;
+          repo.openStream(wechsel.id, wechsel.startedAt);
+          repo.event('stream.online',
+            { title: live!.title, category: live!.game_name }, wechsel.id);
+          log.info(`Stream online: "${live!.title}" (${live!.game_name}), ` +
+            `gestartet ${wechsel.startedAt}`);
+          onOnline({
+            id: wechsel.id,
+            title: live!.title,
+            category: live!.game_name,
+            login: cfg.channel.login,
+            startedAt: wechsel.startedAt,
+            thumbnailUrl: live!.thumbnail_url,
+          });
+        } else if (wechsel.art === 'fortsetzung') {
+          log.info(`Neue Twitch-Stream-ID ${wechsel.neueId}, behandle als Fortsetzung ` +
+            `von ${state.streamId}`);
+        } else if (wechsel.art === 'beendet') {
+          repo.closeStream(wechsel.id, new Date().toISOString());
+          repo.event('stream.offline', {}, wechsel.id);
+          log.info(`Stream offline: ${wechsel.id}`);
+          state.streamId = null;
+          state.viewers = 0;
+        }
+
         if (live) {
-          if (state.streamId !== live.id) {
-            // Kurze Unterbrechungen gelten als dieselbe Sitzung, sonst
-            // zerfaellt ein Stream bei jedem Aussetzer in Fragmente.
-            const wasRecent = now - state.lastSeenLive < gapMs;
-            if (state.streamId && wasRecent) {
-              log.info(`Neue Twitch-Stream-ID ${live.id}, behandle als Fortsetzung von ${state.streamId}`);
-            } else {
-              state.streamId = live.id;
-              repo.openStream(live.id, live.started_at);
-              repo.event('stream.online',
-                { title: live.title, category: live.game_name }, live.id);
-              log.info(`Stream online: "${live.title}" (${live.game_name})`);
-            }
-          }
           state.lastSeenLive = now;
           state.viewers = live.viewer_count;
           if (state.streamId) {
             repo.sample(state.streamId, new Date().toISOString(), live.viewer_count);
           }
-        } else if (state.streamId && now - state.lastSeenLive > gapMs) {
-          const ended = new Date().toISOString();
-          repo.closeStream(state.streamId, ended);
-          repo.event('stream.offline', {}, state.streamId);
-          log.info(`Stream offline: ${state.streamId}`);
-          state.streamId = null;
-          state.viewers = 0;
         }
       }
     } catch (err) {

apps/ingest/src/server.ts

@@ -59,18 +59,45 @@ async function handle(
   req: http.IncomingMessage, res: http.ServerResponse, deps: ServerDeps
 ): Promise<void> {
   const url = new URL(req.url ?? '/', `http://localhost:${deps.port}`);
+  // Auf dem Stream-PC ist die Einrichtung das Einzige, was dieser Server
+  // kann - also faengt die Wurzel dorthin. Im Hub steht auf / die
+  // Overlay-Uebersicht, deshalb liegt die Weiche hier und nicht in
+  // `setupRoutes`.
+  if (url.pathname === '/') {
+    res.writeHead(303, { location: '/setup' });
+    res.end();
+    return;
+  }
+  if (await setupRoutes(req, res, deps, url)) return;
+  res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
+  res.end('Nicht gefunden');
+}
+
+/**
+ * Die Routen der Einrichtung, ohne 404 am Ende.
+ *
+ * Ausgelagert, weil sie seit dem zentralen Betrieb an zwei Servern haengen:
+ * hier auf dem Stream-PC und im Overlay-Server des Hubs. Der Rueckgabewert
+ * sagt, ob die Anfrage beantwortet wurde - wer sie einbindet, macht sonst
+ * selbst weiter.
+ */
+export async function setupRoutes(
+  req: http.IncomingMessage, res: http.ServerResponse, deps: ServerDeps, url: URL
+): Promise<boolean> {
   const html = (body: string, code = 200) => {
     res.writeHead(code, { 'content-type': 'text/html; charset=utf-8',
       'cache-control': 'no-store', 'referrer-policy': 'no-referrer' });
     res.end(body);
+    return true;
   };
   const back = (kind: 'ok' | 'err', text: string) => {
     res.writeHead(303, { location: `/setup?${kind}=${encodeURIComponent(text)}` });
     res.end();
+    return true;
   };
 
   // ---- Einrichtungsseite
-  if (url.pathname === '/' || url.pathname === '/setup') {
+  if (url.pathname === '/setup') {
     const ok = url.searchParams.get('ok');
     const err = url.searchParams.get('err');
     return html(setupPage(secretStatus(), {
@@ -119,7 +146,7 @@ async function handle(
     try {
       res.writeHead(303, { location: authorizeUrl(role, deps.port) });
       res.end();
-      return;
+      return true;
     } catch (err) {
       return back('err', (err as Error).message);
     }
@@ -144,9 +171,8 @@ async function handle(
   if (url.pathname === '/health') {
     res.writeHead(200, { 'content-type': 'application/json; charset=utf-8' });
     res.end(JSON.stringify(deps.health(), null, 2));
-    return;
+    return true;
   }
 
-  res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
+  return false;
-  res.end('Nicht gefunden');
 }

apps/ingest/src/spike.test.ts

@@ -19,9 +19,9 @@ function msg(text: string, userId: string, advanceMs = 0): ChatMessage {
   clock += advanceMs;
   return {
     id: `m${clock}-${userId}`, ts: new Date(clock).toISOString(), userId,
-    login: `u${userId}`, displayName: `U${userId}`, text, emotes: [],
+    login: `u${userId}`, displayName: `U${userId}`, text, emotes: [], gifs: [],
     isFirst: false, isReturning: false, isCommand: text.startsWith('!'),
-    isMod: false, isSub: false, isBroadcaster: false, bits: 0, color: null,
+    isMod: false, isSub: false, isBroadcaster: false, badges: [], bits: 0, color: null,
   };
 }
 

apps/loyalty/README.md

@@ -1,5 +0,0 @@
-# @abdulive/loyalty
-
-Punktesystem mit Ledger und Shop mit echten Effekten. Modul im overlay-server.
-
-Spezifikation: [docs/projects/loyalty-shop.md](../../docs/projects/loyalty-shop.md)

apps/overlay-server/README.md

@@ -1,5 +1,56 @@
 # @abdulive/overlay-server
 
-WebSocket-Backend und Command-Registry fuer alle Overlays.
+Der einzige Server, der von außen erreichbar ist. Liefert die Seiten aus
+[`overlay-web`](../overlay-web/README.md) aus, hält den Ereignisstrom dorthin
+offen und bringt Einrichtung und OAuth-Rückruf unter dieselbe Adresse.
 
-Spezifikation: [docs/projects/chat-control.md](../../docs/projects/chat-control.md)
+```
+/              Übersicht mit den Adressen für OBS      Passwort
+/setup         Einrichtung: Twitch-Apps, Tokens        Passwort
+/callback      OAuth-Rückruf von Twitch                offen, `state` schützt
+/alerts …      die Browser-Sources                     Schlüssel in der URL
+/events        der Ereignisstrom dahinter              Schlüssel in der URL
+/pult          Steuerpult fürs Handy (PWA)             Passwort
+/soundboard/…  Sounds hochladen, ändern, spielen       Passwort (Datei: Schlüssel)
+/fern/…        Leitung zum Stream-PC für OBS           eigener Schlüssel im Kopf
+```
+
+Der Fern-Schlüssel ist der dritte Zugang und der einzige, der etwas schaltet:
+er steht deshalb nie in einer Adresse, sondern in `authorization: Bearer …`.
+
+## Server-Sent Events statt WebSocket
+
+[`chat-control.md`](../../docs/projects/chat-control.md) skizziert einen
+WS-Kanal. Es sind SSE geworden, aus drei Gründen:
+
+1. Node bringt einen WebSocket-*Client* mit, aber keinen Server. Den müsste
+   man selbst schreiben, inklusive Handshake und Rahmenformat - in einem
+   Projekt ohne Abhängigkeiten heißt das: selbst pflegen.
+2. `EventSource` verbindet sich von allein neu. Die tote Browser-Source nach
+   einem Neustart ist der häufigste Fehler bei solchen Overlays, und hier
+   löst ihn der Browser.
+3. Die Richtung stimmt. Das Overlay hört nur zu; es sendet nie.
+
+Drei Dinge halten die Verbindung ehrlich:
+
+- **Herzschlag alle 15 s**, als echtes Ereignis und nicht als SSE-Kommentar -
+  ein Kommentar hält die Verbindung offen, ist im Browser aber unsichtbar.
+- **Wachhund im Client**: 45 s ohne Nachricht heißt neu verbinden. OBS hält
+  eine tote Verbindung erstaunlich lange für lebendig.
+- **Schnappschuss beim Verbinden**: der letzte Stream-Zustand und die letzten
+  Chatnachrichten, damit die Quelle nach dem Neuverbinden nicht leer im Bild
+  steht.
+
+## Zugang
+
+Siehe [ADR-0008](../../docs/decisions/ADR-0008-geteilter-betrieb.md).
+
+- **Passwort** für alles, was ein Mensch bedient. Setzen mit
+  `abdulive web:passwort`, nie über das Netz - ein Dienst, bei dem man das
+  Passwort über die offene Weboberfläche setzen kann, hat kein Passwort.
+- **Schlüssel in der Adresse** für die Browser-Sources. Eine Browser-Source
+  kann kein Formular ausfüllen. Der Schlüssel darf nur lesen und lässt sich
+  auf der Übersichtsseite neu würfeln.
+
+Ohne `publicUrl` bindet der Server weiter auf `127.0.0.1` und verhält sich wie
+vorher.

apps/overlay-server/src/auth.test.ts

@@ -0,0 +1,79 @@
+// Das Sitzungs-Cookie ist der einzige Schutz vor der Einrichtungsseite, auf
+// der Twitch-Zugangsdaten eingetragen werden. Hier wird geprueft, dass es
+// haelt, was es soll - und dass es einen Neustart übersteht.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import crypto from 'node:crypto';
+import { sitzungGueltig, sitzungToken } from './auth.ts';
+
+const KEY = crypto.randomBytes(32);
+const HASH = 'ein-passwort-hash';
+const JETZT = Date.parse('2026-09-17T18:00:00Z');
+const IN_30_TAGEN = JETZT + 30 * 24 * 3_600_000;
+
+test('ein frisch ausgestelltes Cookie gilt', () => {
+  const t = sitzungToken(KEY, HASH, IN_30_TAGEN);
+  assert.equal(sitzungGueltig(t, KEY, HASH, JETZT), true);
+});
+
+test('ein Neustart meldet niemanden ab', () => {
+  // Der eigentliche Grund für diese Bauform: der Dienst startet bei jedem
+  // Ausrollen neu. Lag die Sitzungsliste im Arbeitsspeicher, war man danach
+  // jedes Mal draußen. Derselbe Schlüssel - dasselbe Ergebnis, ohne dass
+  // irgendwo etwas gemerkt wurde.
+  const t = sitzungToken(KEY, HASH, IN_30_TAGEN);
+  const nachNeustart = Buffer.from(KEY);          // derselbe Wert, neues Objekt
+  assert.equal(sitzungGueltig(t, nachNeustart, HASH, JETZT), true);
+});
+
+test('abgelaufen ist abgelaufen', () => {
+  const t = sitzungToken(KEY, HASH, JETZT - 1);
+  assert.equal(sitzungGueltig(t, KEY, HASH, JETZT), false);
+});
+
+test('das Ablaufdatum laesst sich nicht verlaengern', () => {
+  // Ohne Signatur ueber das Datum koennte jeder das Cookie umschreiben und
+  // waere damit dauerhaft angemeldet.
+  const t = sitzungToken(KEY, HASH, JETZT + 1000);
+  const [, sig] = t.split('.');
+  const gefaelscht = `${Buffer.from(String(IN_30_TAGEN)).toString('base64url')}.${sig}`;
+  assert.equal(sitzungGueltig(gefaelscht, KEY, HASH, JETZT), false);
+});
+
+test('ein fremder Schluessel oeffnet nichts', () => {
+  const t = sitzungToken(KEY, HASH, IN_30_TAGEN);
+  assert.equal(sitzungGueltig(t, crypto.randomBytes(32), HASH, JETZT), false);
+});
+
+test('ein neues Passwort macht alle Cookies ungueltig', () => {
+  // Das ist der Ersatz für eine Abmeldeliste: wer sein Passwort wechselt,
+  // wirft damit alle offenen Sitzungen raus.
+  const t = sitzungToken(KEY, HASH, IN_30_TAGEN);
+  assert.equal(sitzungGueltig(t, KEY, 'neuer-hash', JETZT), false);
+});
+
+test('Unsinn im Cookie wird abgewiesen, nicht geglaubt', () => {
+  for (const müll of [undefined, '', 'abc', 'abc.def', '.', 'x.y.z',
+                      `${Buffer.from('keine-zahl').toString('base64url')}.xx`]) {
+    assert.equal(sitzungGueltig(müll, KEY, HASH, JETZT), false, `"${müll}" haette abgewiesen gehoert`);
+  }
+});
+
+test('zwei Anmeldungen mit demselben Ablauf ergeben dasselbe Cookie', () => {
+  // Bewusst so: ohne Zufallsanteil gibt es nichts, was der Server sich merken
+  // müsste. Der Preis ist, dass sich eine einzelne Sitzung nicht gezielt
+  // beenden lässt - dafür gibt es den Passwortwechsel.
+  assert.equal(sitzungToken(KEY, HASH, IN_30_TAGEN), sitzungToken(KEY, HASH, IN_30_TAGEN));
+});
+
+test('der Schluessel des Stream-PCs kommt aus dem Bearer-Kopf', async () => {
+  // Hier fehlten beim ersten Wurf die Backslashes in der Regex - jeder
+  // richtige Schluessel wurde abgelehnt, und nichts im Log sah danach aus.
+  const { bearer } = await import('./auth.ts');
+  assert.equal(bearer('Bearer 33qg61wQf_ad-x9v'), '33qg61wQf_ad-x9v');
+  assert.equal(bearer('Bearer   abc'), 'abc');
+  assert.equal(bearer('Basic abc'), null);
+  assert.equal(bearer('Bearer'), null);
+  assert.equal(bearer(undefined), null);
+});

apps/overlay-server/src/auth.ts

@@ -0,0 +1,218 @@
+// Zugangskontrolle. Nur noetig, seit der Dienst zentral laeuft: solange er an
+// 127.0.0.1 hing, war "wer am Rechner sitzt, darf" die ganze Regel.
+//
+// Zwei Wege, weil es zwei Arten von Besuchern gibt:
+//
+//   Mensch   -> Passwort, einmal eingeben, danach ein Sitzungs-Cookie.
+//               Gilt fuer die Uebersicht, die Einrichtung und den Status.
+//   OBS      -> Schluessel in der Adresse (?key=...). Eine Browser-Source
+//               kann kein Formular ausfuellen und keinen Login durchhalten;
+//               ein Geheimnis in der URL ist hier der einzige Weg, der ohne
+//               Handgriff mitten im Stream auskommt.
+//
+// Der Schluessel steht damit in jedem OBS-Profil und in jedem Screenshot der
+// Einstellungen. Deshalb kann er nur lesen, nie schreiben, und er laesst sich
+// auf der Uebersichtsseite neu wuerfeln.
+
+import crypto from 'node:crypto';
+import type http from 'node:http';
+import { logger } from '#core/logger.ts';
+import { readSecrets, updateSecrets } from '#twitch/secrets.ts';
+
+const log = logger('overlay:zugang');
+
+/** Wie lange eine Anmeldung gilt. Danach einmal neu eintippen. */
+const SESSION_MS = 30 * 24 * 3_600_000;
+const COOKIE = 'abdulive_sitzung';
+
+export type Zugang = {
+  /** Darf diese Anfrage eine geschuetzte Seite sehen? */
+  istAngemeldet: (req: http.IncomingMessage) => boolean;
+  /** Stimmt der Schluessel in der Adresse? Angemeldete duerfen auch ohne. */
+  darfOverlay: (req: http.IncomingMessage, url: URL) => boolean;
+  /** Prueft das Passwort und gibt bei Erfolg den Cookie-Kopf zurueck. */
+  anmelden: (passwort: string) => string | null;
+  abmelden: () => string;
+  overlayKey: () => string;
+  neuerOverlayKey: () => string;
+  /** Schluessel des Stream-PCs, im Kopf `authorization: Bearer ...`. */
+  darfFern: (req: http.IncomingMessage) => boolean;
+  fernKey: () => string;
+  neuerFernKey: () => string;
+  /** Den Schluessel eines im Pult freigegebenen PCs eintragen. */
+  fernKeySetzen: (key: string) => void;
+  /** Ist ueberhaupt ein Passwort gesetzt? Ohne das ist alles offen. */
+  hatPasswort: () => boolean;
+};
+
+/**
+ * Vergleich in konstanter Zeit. Bei einem einzelnen Passwortfeld ist der
+ * Zeitunterschied kaum messbar, aber das ist kein Grund, ihn zu verschenken.
+ */
+function gleich(a: string, b: string): boolean {
+  const ab = Buffer.from(a);
+  const bb = Buffer.from(b);
+  if (ab.length !== bb.length) return false;
+  return crypto.timingSafeEqual(ab, bb);
+}
+
+function hash(passwort: string, salt: string): string {
+  return crypto.scryptSync(passwort, salt, 32).toString('base64');
+}
+
+/**
+ * Das Cookie traegt sein eigenes Ablaufdatum und eine Signatur darueber.
+ * Der Server merkt sich keine Sitzungen.
+ *
+ * Der Grund ist eine gelernte Lektion: eine Liste im Arbeitsspeicher ist
+ * hinfaellig, sobald der Dienst neu startet - und er startet bei jedem
+ * Ausrollen neu. Wer sich nach jeder Aenderung neu anmelden muss, waehlt
+ * irgendwann ein kuerzeres Passwort.
+ *
+ * Mit signiert wird auch der Passwort-Hash. Ein neues Passwort macht damit
+ * alle ausgegebenen Cookies ungueltig, ohne dass es eine Abmeldeliste braucht.
+ */
+export function sitzungToken(key: Buffer, passwordHash: string, bisMs: number): string {
+  const bis = String(bisMs);
+  return `${Buffer.from(bis).toString('base64url')}.${signatur(key, passwordHash, bis)}`;
+}
+
+export function sitzungGueltig(
+  token: string | undefined, key: Buffer, passwordHash: string, jetztMs = Date.now()
+): boolean {
+  if (!token) return false;
+  const [bisB64, sig] = token.split('.');
+  if (!bisB64 || !sig) return false;
+  const bis = Buffer.from(bisB64, 'base64url').toString('utf8');
+  if (!/^\d+$/.test(bis) || Number(bis) < jetztMs) return false;
+  return gleich(sig, signatur(key, passwordHash, bis));
+}
+
+function signatur(key: Buffer, passwordHash: string, bis: string): string {
+  return crypto.createHmac('sha256', key)
+    .update(`${bis}|${passwordHash}`)
+    .digest('base64url');
+}
+
+/** Der Schluessel aus `authorization: Bearer ...`, sonst `null`. */
+export function bearer(kopf: string | undefined): string | null {
+  return /^Bearer\s+(\S+)$/.exec(kopf ?? '')?.[1] ?? null;
+}
+
+function cookies(req: http.IncomingMessage): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const teil of (req.headers.cookie ?? '').split(';')) {
+    const i = teil.indexOf('=');
+    if (i > 0) out[teil.slice(0, i).trim()] = decodeURIComponent(teil.slice(i + 1).trim());
+  }
+  return out;
+}
+
+export function createZugang(): Zugang {
+  function store() {
+    const s = readSecrets();
+    return s.web ?? {};
+  }
+
+  // Beim ersten Start einen Overlay-Schluessel wuerfeln. Ohne einen waere
+  // jede Browser-Source-Adresse zu erraten.
+  function key(): string {
+    const vorhanden = store().overlayKey;
+    if (vorhanden) return vorhanden;
+    const neu = crypto.randomBytes(18).toString('base64url');
+    updateSecrets((s) => { s.web = { ...s.web, overlayKey: neu }; });
+    log.info('Neuer Overlay-Schluessel erzeugt - die Adressen stehen auf der Uebersichtsseite');
+    return neu;
+  }
+
+  function fernKey(): string {
+    const vorhanden = store().fernKey;
+    if (vorhanden) return vorhanden;
+    const neu = crypto.randomBytes(24).toString('base64url');
+    updateSecrets((s) => { s.web = { ...s.web, fernKey: neu }; });
+    return neu;
+  }
+
+  /**
+   * Schluessel zum Signieren der Sitzungen. Liegt neben dem Passwort, wird
+   * einmal gewuerfelt und ueberlebt damit jeden Neustart. Geht er verloren,
+   * sind nur die Anmeldungen weg.
+   */
+  function sitzungsKey(): Buffer {
+    const vorhanden = store().sessionKey;
+    if (vorhanden) return Buffer.from(vorhanden, 'base64');
+    const neu = crypto.randomBytes(32);
+    updateSecrets((s) => { s.web = { ...s.web, sessionKey: neu.toString('base64') }; });
+    return neu;
+  }
+
+  function istAngemeldet(req: http.IncomingMessage): boolean {
+    const hash = store().passwordHash;
+    if (!hash) return true;                   // noch nichts eingerichtet
+    return sitzungGueltig(cookies(req)[COOKIE], sitzungsKey(), hash);
+  }
+
+  return {
+    hatPasswort: () => Boolean(store().passwordHash),
+    istAngemeldet,
+
+    darfOverlay(req, url) {
+      const gegeben = url.searchParams.get('key');
+      if (gegeben && gleich(gegeben, key())) return true;
+      // Wer angemeldet ist, darf die Seiten auch im Browser ansehen - sonst
+      // muesste man zum Nachschauen jedes Mal den Schluessel anhaengen.
+      return istAngemeldet(req);
+    },
+
+    anmelden(passwort) {
+      const s = store();
+      if (!s.passwordHash || !s.passwordSalt) return null;
+      if (!gleich(hash(passwort, s.passwordSalt), s.passwordHash)) {
+        log.warn('Fehlgeschlagene Anmeldung');
+        return null;
+      }
+      const token = sitzungToken(sitzungsKey(), s.passwordHash, Date.now() + SESSION_MS);
+      // Kein `Secure`: NPM beendet TLS, und der Dienst selbst spricht HTTP.
+      // Das Cookie geht trotzdem nur ueber die HTTPS-Adresse raus, weil es
+      // keine andere gibt, die von aussen erreichbar ist.
+      return `${COOKIE}=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${SESSION_MS / 1000}`;
+    },
+
+    abmelden: () => `${COOKIE}=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0`,
+    overlayKey: key,
+
+    darfFern(req) {
+      const gegeben = bearer(req.headers.authorization);
+      return Boolean(gegeben && gleich(gegeben, fernKey()));
+    },
+    fernKey,
+    fernKeySetzen(k) {
+      updateSecrets((s) => { s.web = { ...s.web, fernKey: k }; });
+    },
+    neuerFernKey() {
+      const neu = crypto.randomBytes(24).toString('base64url');
+      updateSecrets((s) => { s.web = { ...s.web, fernKey: neu }; });
+      log.info('Schluessel fuer den Stream-PC neu gewuerfelt - dort neu eintragen');
+      return neu;
+    },
+    neuerOverlayKey() {
+      const neu = crypto.randomBytes(18).toString('base64url');
+      updateSecrets((s) => { s.web = { ...s.web, overlayKey: neu }; });
+      log.info('Overlay-Schluessel neu gewuerfelt - die alten Adressen sind damit tot');
+      return neu;
+    },
+  };
+}
+
+/**
+ * Setzt das Passwort. Wird von `abdulive web:passwort` aufgerufen, nicht ueber
+ * das Netz - ein Dienst, bei dem man das Passwort ueber die offene
+ * Weboberflaeche setzen kann, hat kein Passwort.
+ */
+export function setzePasswort(passwort: string): void {
+  if (passwort.length < 8) throw new Error('Mindestens acht Zeichen.');
+  const salt = crypto.randomBytes(16).toString('base64');
+  updateSecrets((s) => {
+    s.web = { ...s.web, passwordSalt: salt, passwordHash: hash(passwort, salt) };
+  });
+}

apps/overlay-server/src/bus.test.ts

@@ -0,0 +1,118 @@
+// Der Bus entscheidet, was eine frisch verbundene Browser-Source sieht.
+// Danach richtet sich, ob das Overlay nach einem Neustart vollstaendig ist
+// oder leer im Bild steht - und ob eine geloeschte Nachricht geloescht bleibt.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { createBus, type ChatEvent, type OverlayEvent } from './bus.ts';
+
+function nachricht(over: Partial<ChatEvent> = {}): ChatEvent {
+  return {
+    kind: 'chat', id: 'm1', userId: 'u1', login: 'kevin', name: 'Kevin',
+    text: 'moin', color: null, emotes: [], gifs: [], first: false, mod: false,
+    sub: false, broadcaster: false, badges: [], bits: 0,
+    ...over,
+  };
+}
+
+function schnappschuss(bus: ReturnType<typeof createBus>) {
+  const s = bus.snapshot();
+  assert.equal(s.kind, 'state');
+  return s as Extract<OverlayEvent, { kind: 'state' }>;
+}
+
+test('ein neuer Zuhoerer bekommt den bisherigen Chat', () => {
+  const bus = createBus();
+  bus.publish(nachricht({ id: 'a' }));
+  bus.publish(nachricht({ id: 'b' }));
+
+  const s = schnappschuss(bus);
+  assert.deepEqual(s.chat.map((m) => m.id), ['a', 'b']);
+});
+
+test('der Rueckblick waechst nicht unbegrenzt', () => {
+  const bus = createBus();
+  for (let i = 0; i < 100; i++) bus.publish(nachricht({ id: `m${i}` }));
+
+  const s = schnappschuss(bus);
+  assert.equal(s.chat.length, 30);
+  assert.equal(s.chat[s.chat.length - 1]?.id, 'm99', 'die neuesten bleiben');
+});
+
+test('der zuletzt gemeldete Stream-Zustand steht im Schnappschuss', () => {
+  const bus = createBus();
+  bus.publish({ kind: 'stream', live: true, title: 'Titel', category: 'Elden Ring',
+    viewers: 12, startedAt: '2026-09-17T18:00:00Z' });
+  bus.publish({ kind: 'stream', live: true, title: 'Titel', category: 'Elden Ring',
+    viewers: 19, startedAt: '2026-09-17T18:00:00Z' });
+
+  assert.equal(schnappschuss(bus).stream.viewers, 19);
+});
+
+test('eine geloeschte Nachricht verschwindet auch aus dem Rueckblick', () => {
+  // Sonst holt der naechste Neustart der Browser-Source sie zurueck ins Bild -
+  // und zwar genau die eine, die ein Mod entfernt hat.
+  const bus = createBus();
+  bus.publish(nachricht({ id: 'a' }));
+  bus.publish(nachricht({ id: 'b' }));
+  bus.publish({ kind: 'clear', messageId: 'a' });
+
+  assert.deepEqual(schnappschuss(bus).chat.map((m) => m.id), ['b']);
+});
+
+test('ein gesperrter Chatter verschwindet mit allen Nachrichten', () => {
+  const bus = createBus();
+  bus.publish(nachricht({ id: 'a', userId: 'u1' }));
+  bus.publish(nachricht({ id: 'b', userId: 'u2' }));
+  bus.publish(nachricht({ id: 'c', userId: 'u1' }));
+  bus.publish({ kind: 'clear', userId: 'u1' });
+
+  assert.deepEqual(schnappschuss(bus).chat.map((m) => m.id), ['b']);
+});
+
+test('ein geleerter Chat leert auch den Rueckblick', () => {
+  const bus = createBus();
+  bus.publish(nachricht({ id: 'a' }));
+  bus.publish({ kind: 'clear' });
+  assert.deepEqual(schnappschuss(bus).chat, []);
+});
+
+test('alte Einblendungen werden nicht endlos aufbewahrt', () => {
+  const bus = createBus();
+  for (let i = 0; i < 20; i++) {
+    bus.publish({ kind: 'alert', type: 'sub', id: `a${i}`, name: 'x' });
+  }
+  assert.equal(schnappschuss(bus).alerts.length, 5);
+});
+
+test('ein Zuhoerer, der wirft, reisst die anderen nicht mit', () => {
+  // Eine Browser-Source, deren Verbindung gerade zusammengebrochen ist, darf
+  // den Chat nicht fuer alle anderen anhalten.
+  const bus = createBus();
+  const gesehen: string[] = [];
+  bus.subscribe(() => { throw new Error('Verbindung weg'); });
+  bus.subscribe((ev) => { gesehen.push(ev.kind); });
+
+  bus.publish(nachricht());
+  assert.deepEqual(gesehen, ['chat']);
+});
+
+test('abgemeldete Zuhoerer bekommen nichts mehr', () => {
+  const bus = createBus();
+  let n = 0;
+  const ab = bus.subscribe(() => { n++; });
+  bus.publish(nachricht());
+  ab();
+  bus.publish(nachricht());
+
+  assert.equal(n, 1);
+  assert.equal(bus.clients(), 0);
+});
+
+test('der Schnappschuss traegt den letzten Stand der Liegestuetze', () => {
+  const bus = createBus();
+  assert.deepEqual(schnappschuss(bus).liegestuetze, { offen: 0, gemacht: 0 });
+  bus.publish({ kind: 'liegestuetze', offen: 20, gemacht: 0, dazu: 10, name: 'Kevin' });
+  bus.publish({ kind: 'liegestuetze', offen: 15, gemacht: 5 });
+  assert.deepEqual(schnappschuss(bus).liegestuetze, { offen: 15, gemacht: 5 });
+});

apps/overlay-server/src/bus.ts

@@ -0,0 +1,229 @@
+// Der Ereignisbus zwischen Daemon und Browser-Sources.
+//
+// Warum Server-Sent Events und nicht WebSocket, wie in chat-control.md
+// skizziert: Node bringt einen WebSocket-*Client* mit, aber keinen Server -
+// den muesste man selbst schreiben, inklusive Handshake und Rahmenformat.
+// SSE ist einfacher HTTP, `EventSource` verbindet sich von allein neu, und
+// die Richtung stimmt: das Overlay hoert nur zu, es sendet nie.
+//
+// Der haeufigste Fehler bei solchen Overlays ist die Browser-Source, die nach
+// einem Serverneustart tot im Bild haengt. Dagegen stehen hier drei Dinge:
+// der eingebaute Reconnect von EventSource, ein Herzschlag alle paar
+// Sekunden, und der Zustands-Schnappschuss, den jeder neue Client als erstes
+// bekommt - damit ist das Overlay nach dem Neuverbinden sofort wieder
+// vollstaendig und nicht erst nach der naechsten Chatnachricht.
+
+export type ChatEvent = {
+  kind: 'chat';
+  /** msg-id aus IRC - dieselbe ID, mit der CLEARMSG spaeter loeschen kann. */
+  id: string;
+  userId: string;
+  login: string;
+  name: string;
+  text: string;
+  color: string | null;
+  emotes: Array<{ id: string; name: string; count: number }>;
+  /** GIFs aus Twitchs Auswahlfenster, mit dem Zeichenbereich im Text. */
+  gifs: Array<{ id: string; url: string; from: number; to: number }>;
+  first: boolean;
+  mod: boolean;
+  sub: boolean;
+  broadcaster: boolean;
+  /** Abzeichen als fertige Bilder, aufgeloest im Hub (#twitch/badges.ts). */
+  badges: Array<{ url: string; title: string }>;
+  bits: number;
+  /**
+   * Sendezeit laut Twitch. Fuer die Uhrzeit im Pult: ohne sie stuende nach
+   * dem Neuverbinden an allen Nachrichten aus dem Schnappschuss dieselbe.
+   */
+  ts?: string;
+};
+
+export type AlertKind =
+  | 'sub' | 'resub' | 'subgift' | 'massgift' | 'raid' | 'cheer' | 'first' | 'clip' | 'follow'
+  /**
+   * Kanalpunkt-Einloesung. Bewusst eine eigene Art und nicht die des Abos:
+   * eine eingeloeste Belohnung als "Neues Abo" einzublenden ist eine
+   * Falschmeldung im Bild, und zwar eine, die in der Aufzeichnung bleibt.
+   */
+  | 'reward';
+
+export type AlertEvent = {
+  kind: 'alert';
+  type: AlertKind;
+  id: string;
+  name: string;
+  /** Bits, Zuschauer beim Raid, Anzahl verschenkter Abos. */
+  amount?: number;
+  months?: number;
+  tier?: string;
+  recipient?: string;
+  message?: string;
+  /** Titel der eingeloesten Belohnung. Nur bei `reward`. */
+  reward?: string;
+};
+
+export type StreamEvent = {
+  kind: 'stream';
+  live: boolean;
+  title: string;
+  category: string;
+  viewers: number;
+  startedAt: string | null;
+};
+
+/**
+ * Neuer Stand der Liegestuetze: offen und in diesem Stream gemacht. `dazu`
+ * und `name` nur bei einer Einloesung - eine Korrektur von Hand soll nicht
+ * aussehen wie eine.
+ */
+export type LiegestuetzeEvent = {
+  kind: 'liegestuetze';
+  offen: number;
+  gemacht: number;
+  dazu?: number;
+  name?: string;
+};
+
+/**
+ * Was der Stream-PC ueber OBS meldet. Kommt ueber die Fernsteuerung
+ * (fern.ts) herein und steht im Schnappschuss, damit das Pult nach dem
+ * Neuverbinden sofort die Szenen kennt.
+ */
+export type ObsStandEvent = {
+  kind: 'obs';
+  /** Ist der Stream-PC ueberhaupt mit dem Hub verbunden? */
+  pc: boolean;
+  /** Und hat er OBS erreicht? */
+  obs: boolean;
+  szenen: string[];
+  aktuell: string | null;
+  /** Toneingaenge, die sich stummschalten lassen. */
+  ton: Array<{ name: string; stumm: boolean }>;
+  /** Laeuft der Wiedergabepuffer? Ohne ihn gibt es keinen Clip. */
+  puffer: boolean;
+};
+
+export type OverlayEvent =
+  | ChatEvent
+  | AlertEvent
+  | StreamEvent
+  | { kind: 'hype'; score: number; rate: number }
+  /**
+   * Konfetti als eigenes Ereignis, nicht als Nebenwirkung einer Einblendung.
+   * So muss die Effektseite nicht wissen, welche Belohnung welche Aktion
+   * ausloest - das entscheidet der Hub.
+   */
+  | { kind: 'konfetti'; staerke: number }
+  /**
+   * Vorzulesender Text. Geht nur raus, wenn er freigegeben wurde oder die
+   * Belohnung ohne Freigabe eingerichtet ist - die Entscheidung faellt im Hub
+   * (apps/hub/src/rewards.ts), nicht hier.
+   */
+  | {
+    kind: 'tts'; id: string; name: string; text: string;
+    /** Liegt unter /tts/audio/<id> bereit. Ohne Ton wird nur angezeigt. */
+    audio?: boolean;
+  }
+  /** Alles sofort still. Fuer den Panikschalter. */
+  | { kind: 'still' }
+  | LiegestuetzeEvent
+  | { kind: 'scene'; scene: string }
+  /**
+   * Ein Sound vom Pult. Wie beim Vorlesen geht nur die ID hinaus; die Datei
+   * holt sich die Seite /sounds einzeln, damit Chat und Statusleiste keine
+   * Megabytes mitschleppen.
+   */
+  | { kind: 'sound'; id: string; name: string; laut: number }
+  /** Alle laufenden Sounds abbrechen. Vorlesen bleibt davon unberuehrt. */
+  | { kind: 'sound-stopp' }
+  /** Die Liste der Sounds hat sich geaendert - offene Pulte laden neu. */
+  | { kind: 'sounds-geaendert' }
+  /**
+   * Ein Stream-PC wartet auf Freigabe, oder die Liste hat sich geaendert.
+   * Ohne Inhalt: wer und von wo, holt sich das Pult mit Anmeldung - der
+   * Ereignisstrom geht auch an die Browser-Sources.
+   */
+  | { kind: 'fern-anfrage' }
+  | ObsStandEvent
+  | { kind: 'clear'; userId?: string; messageId?: string }
+  | { kind: 'beat'; t: number }
+  | {
+    kind: 'state'; stream: StreamEvent; chat: ChatEvent[]; alerts: AlertEvent[];
+    /** Liegestuetze, damit der Zaehler nach dem Neuverbinden stimmt. */
+    liegestuetze: { offen: number; gemacht: number };
+    obs: ObsStandEvent;
+  };
+
+/**
+ * So viele Nachrichten bekommt ein frisch verbundenes Overlay mit. Mehr
+ * braucht keine Seite: der Chat zeigt ein gutes Dutzend, und ein Alarm von
+ * vor zehn Minuten soll nach einem Neustart gerade nicht noch einmal
+ * durchlaufen.
+ */
+const KEEP_CHAT = 30;
+const KEEP_ALERTS = 5;
+
+export type Bus = {
+  publish: (ev: OverlayEvent) => void;
+  /** Meldet einen Zuhoerer an. Der Rueckgabewert meldet ihn wieder ab. */
+  subscribe: (fn: (ev: OverlayEvent) => void) => () => void;
+  /** Der Zustand, den ein neuer Client als erstes bekommt. */
+  snapshot: () => OverlayEvent;
+  clients: () => number;
+};
+
+export function createBus(): Bus {
+  const listeners = new Set<(ev: OverlayEvent) => void>();
+  const chat: ChatEvent[] = [];
+  const alerts: AlertEvent[] = [];
+  let stream: StreamEvent = {
+    kind: 'stream', live: false, title: '', category: '', viewers: 0, startedAt: null,
+  };
+  let liegestuetze = { offen: 0, gemacht: 0 };
+  let obs: ObsStandEvent = {
+    kind: 'obs', pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false,
+  };
+
+  return {
+    publish(ev) {
+      // Mitschreiben, bevor verteilt wird: ein Client, der genau jetzt
+      // verbindet, soll dasselbe sehen wie einer, der schon verbunden war.
+      if (ev.kind === 'chat') {
+        chat.push(ev);
+        if (chat.length > KEEP_CHAT) chat.shift();
+      } else if (ev.kind === 'alert') {
+        alerts.push(ev);
+        if (alerts.length > KEEP_ALERTS) alerts.shift();
+      } else if (ev.kind === 'stream') {
+        stream = ev;
+      } else if (ev.kind === 'liegestuetze') {
+        liegestuetze = { offen: ev.offen, gemacht: ev.gemacht };
+      } else if (ev.kind === 'obs') {
+        obs = ev;
+      } else if (ev.kind === 'clear') {
+        // Geloeschtes verschwindet auch aus dem Rueckblick, sonst holt der
+        // naechste Neustart der Browser-Source es zurueck ins Bild.
+        for (let i = chat.length - 1; i >= 0; i--) {
+          const m = chat[i]!;
+          if ((ev.messageId && m.id === ev.messageId) ||
+              (ev.userId && m.userId === ev.userId)) chat.splice(i, 1);
+        }
+        if (!ev.messageId && !ev.userId) chat.length = 0;
+      }
+
+      for (const fn of listeners) {
+        // Ein kaputter Zuhoerer darf die anderen nicht mitreissen.
+        try { fn(ev); } catch { /* der Transport meldet es selbst */ }
+      }
+    },
+
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => { listeners.delete(fn); };
+    },
+
+    snapshot: () => ({ kind: 'state', stream, chat: [...chat], alerts: [...alerts], liegestuetze, obs }),
+    clients: () => listeners.size,
+  };
+}

apps/overlay-server/src/demo.ts

@@ -0,0 +1,56 @@
+// Dauerbetrieb mit erfundenen Ereignissen: erfundener Chat und alle paar
+// Sekunden eine Einblendung.
+//
+// Fuer `abdulive overlay --demo` und fuer den Knopf "Vorfuehrung" auf der
+// Uebersichtsseite. Die einzelnen Ereignisse kommen aus test-events.ts - die
+// Knoepfe und der Dauerbetrieb sollen dasselbe zeigen.
+
+import { logger } from '#core/logger.ts';
+import type { Bus } from './bus.ts';
+import { testEvent, zufall, type TestArt } from './test-events.ts';
+
+const log = logger('overlay:demo');
+
+const ALARME: TestArt[] = ['sub', 'resub', 'subgift', 'massgift', 'raid', 'cheer', 'first'];
+const NACHRICHTEN: TestArt[] = ['chat', 'chat', 'chat', 'chat-emote', 'chat-emote', 'chat-erstmals'];
+
+/**
+ * Speist den Bus, bis `signal` abbricht.
+ *
+ * Der Stream-Zustand wird mitgesetzt, damit Statusleiste und Pausenbild etwas
+ * zu zeigen haben. Genau deshalb darf das nicht laufen, waehrend ein echter
+ * Stream laeuft - der Aufrufer prueft das.
+ */
+export function startDemo(bus: Bus, signal: AbortSignal): void {
+  log.info('Vorfuehrmodus: erfundener Chat und alle paar Sekunden eine Einblendung');
+
+  let viewers = 17;
+  const seit = new Date(Date.now() - 74 * 60_000).toISOString();
+
+  const stand = (): void => {
+    viewers = Math.max(3, viewers + Math.round((Math.random() - 0.45) * 4));
+    bus.publish({
+      kind: 'stream', live: true,
+      title: 'Elden Ring, aber nur mit Fäusten - Tag 3',
+      category: 'Elden Ring',
+      viewers, startedAt: seit,
+    });
+  };
+  stand();
+
+  const sende = (art: TestArt): void => {
+    const ev = testEvent(art);
+    if (ev) bus.publish(ev);
+  };
+
+  const chat = setInterval(() => sende(zufall(NACHRICHTEN)), 1400);
+  const alarm = setInterval(() => sende(zufall(ALARME)), 9000);
+  const puls = setInterval(stand, 20_000);
+  // Ab und zu eine Chat-Spitze, damit der Emote-Regen auch mal laeuft.
+  const spitze = setInterval(() => sende('hype'), 31_000);
+
+  signal.addEventListener('abort', () => {
+    clearInterval(chat); clearInterval(alarm); clearInterval(puls); clearInterval(spitze);
+    log.info('Vorfuehrmodus beendet');
+  }, { once: true });
+}

apps/overlay-server/src/fern.test.ts

@@ -0,0 +1,152 @@
+// Die Leitung zum Stream-PC, Hub-Seite. Geprueft wird ohne Netz: die
+// SSE-Antwort ist ein nachgebautes Objekt, das mitschreibt.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { EventEmitter } from 'node:events';
+import type http from 'node:http';
+import { createBus, type ObsStandEvent } from './bus.ts';
+import { createFernsteuerung, standAus } from './fern.ts';
+import { befehlAus, sichererPfad } from './server.ts';
+
+function leitung() {
+  const req = new EventEmitter();
+  const res = Object.assign(new EventEmitter(), {
+    geschrieben: [] as string[],
+    writeHead() { return this; },
+    write(s: string) { this.geschrieben.push(s); return true; },
+    end() { req.emit('close'); },
+  });
+  const befehle = (): Array<Record<string, unknown>> => res.geschrieben
+    .filter((s) => s.startsWith('data: '))
+    .map((s) => JSON.parse(s.slice(6)) as Record<string, unknown>)
+    .filter((b) => b['art'] !== 'beat');
+  return {
+    req: req as unknown as http.IncomingMessage,
+    res: res as unknown as http.ServerResponse,
+    befehle,
+    trennen: () => req.emit('close'),
+  };
+}
+
+function obsStand(bus: ReturnType<typeof createBus>): ObsStandEvent {
+  const s = bus.snapshot();
+  if (s.kind !== 'state') throw new Error('kein Schnappschuss');
+  return s.obs;
+}
+
+test('ohne Stream-PC sagt ein Befehl ehrlich, dass es nicht ging', async () => {
+  const fern = createFernsteuerung(createBus());
+  const a = await fern.senden({ art: 'szene', szene: 'Pause' });
+  assert.equal(a.ok, false);
+  assert.match(a.text, /nicht verbunden/);
+});
+
+test('Befehl geht raus, Antwort kommt zurueck', async () => {
+  const bus = createBus();
+  const fern = createFernsteuerung(bus);
+  const l = leitung();
+  fern.annehmen(l.req, l.res);
+  assert.equal(obsStand(bus).pc, true);
+
+  const warten = fern.senden({ art: 'szene', szene: 'Just Chatting' });
+  const [b] = l.befehle();
+  assert.equal(b?.['art'], 'szene');
+  assert.equal(b?.['szene'], 'Just Chatting');
+
+  fern.antwort({ id: b!['id'], ok: true, text: 'Szene: Just Chatting' });
+  assert.deepEqual(await warten, { ok: true, text: 'Szene: Just Chatting' });
+});
+
+test('reisst die Leitung ab, wartet niemand weiter', async () => {
+  const bus = createBus();
+  const fern = createFernsteuerung(bus);
+  const l = leitung();
+  fern.annehmen(l.req, l.res);
+  fern.melden({ obs: true, szenen: ['A'], aktuell: 'A', ton: [], puffer: true });
+  assert.deepEqual(obsStand(bus).szenen, ['A']);
+
+  const warten = fern.senden({ art: 'clip' });
+  l.trennen();
+  const a = await warten;
+  assert.equal(a.ok, false);
+  assert.equal(fern.verbunden(), false);
+  // Alte Szenen stehen sonst als Knoepfe da, die nichts mehr tun.
+  assert.deepEqual(obsStand(bus), { kind: 'obs', pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false });
+});
+
+test('ein zweiter PC ersetzt den ersten', () => {
+  const bus = createBus();
+  const fern = createFernsteuerung(bus);
+  const alt = leitung();
+  const neu = leitung();
+  fern.annehmen(alt.req, alt.res);
+  fern.annehmen(neu.req, neu.res);
+  // Das Schliessen der alten Leitung darf die neue nicht als getrennt melden.
+  assert.equal(fern.verbunden(), true);
+  assert.equal(obsStand(bus).pc, true);
+  void fern.senden({ art: 'clip' });
+  assert.equal(neu.befehle().length, 1);
+  assert.equal(alt.befehle().length, 0);
+});
+
+test('der Stand vom PC wird auf die erwartete Form gebracht', () => {
+  assert.deepEqual(standAus({
+    obs: true, szenen: ['A', 7, 'B'], aktuell: 'A',
+    ton: [{ name: 'Mikro', stumm: true }, { name: 3 }, null], puffer: 'ja',
+  }), { obs: true, szenen: ['A', 'B'], aktuell: 'A', ton: [{ name: 'Mikro', stumm: true }], puffer: false });
+  assert.deepEqual(standAus('quatsch'), { obs: false, szenen: [], aktuell: null, ton: [], puffer: false });
+});
+
+test('vom Pult kommen nur bekannte Befehle durch', () => {
+  const f = (o: Record<string, string>): URLSearchParams => new URLSearchParams(o);
+  assert.deepEqual(befehlAus(f({ was: 'szene', szene: 'Pause' })), { art: 'szene', szene: 'Pause' });
+  assert.deepEqual(befehlAus(f({ was: 'stumm', quelle: 'Mikro', stumm: '1' })),
+    { art: 'stumm', quelle: 'Mikro', stumm: true });
+  assert.deepEqual(befehlAus(f({ was: 'clip' })), { art: 'clip' });
+  assert.equal(befehlAus(f({ was: 'szene' })), null);
+  assert.equal(befehlAus(f({ was: 'StopStream' })), null);
+});
+
+test('nach der Anmeldung geht es nur auf bekannte Seiten', () => {
+  assert.equal(sichererPfad('/pult'), '/pult');
+  assert.equal(sichererPfad('https://boese.example'), '/');
+  assert.equal(sichererPfad('//boese.example'), '/');
+  assert.equal(sichererPfad(null), '/');
+});
+
+test('ein unbekannter PC wartet auf Freigabe und bekommt dann seinen Schluessel eingetragen', () => {
+  const bus = createBus();
+  const ereignisse: string[] = [];
+  bus.subscribe((e) => ereignisse.push(e.kind));
+  const fern = createFernsteuerung(bus);
+  const key = 'k'.repeat(32);
+
+  fern.anfragen(key, 'ABDU-PC', '203.0.113.7');
+  fern.anfragen(key, 'ABDU-PC', '203.0.113.7');
+  const [a, ...rest] = fern.offeneAnfragen();
+  assert.equal(rest.length, 0, 'derselbe PC fragt alle paar Sekunden, das ist eine Anfrage');
+  assert.equal(a?.name, 'ABDU-PC');
+  assert.equal('key' in (a as object), false, 'der Schluessel geht nie ans Pult');
+  assert.ok(ereignisse.includes('fern-anfrage'));
+
+  assert.equal(fern.freigeben(a!.id), key);
+  assert.deepEqual(fern.offeneAnfragen(), []);
+  assert.equal(fern.freigeben(a!.id), null, 'zweimal freigeben geht nicht');
+});
+
+test('mehr als drei fremde Anfragen verdraengen die aeltesten', () => {
+  const fern = createFernsteuerung(createBus());
+  for (let i = 0; i < 5; i++) fern.anfragen(`schluessel-${i}`.padEnd(30, 'x'), `PC${i}`, '');
+  assert.deepEqual(fern.offeneAnfragen().map((a) => a.name).sort(), ['PC2', 'PC3', 'PC4']);
+});
+
+test('beim Verbinden erfaehrt der PC die Adresse der Sound-Quelle', () => {
+  const fern = createFernsteuerung(createBus(), {
+    willkommen: () => ({ soundsUrl: 'https://hub.example/sounds?key=abc' }),
+  });
+  const l = leitung();
+  fern.annehmen(l.req, l.res);
+  const [hallo] = l.befehle();
+  assert.deepEqual(hallo, { art: 'einrichten', soundsUrl: 'https://hub.example/sounds?key=abc' });
+});

apps/overlay-server/src/fern.ts

@@ -0,0 +1,238 @@
+// Fernsteuerung fuer OBS, Hub-Seite.
+//
+// OBS laeuft auf dem Stream-PC, das Pult am Handy spricht mit dem Hub. Der
+// Hub kommt an den Stream-PC nicht heran - der steht hinter einem fremden
+// Router. Also waehlt sich der PC beim Hub ein, nicht umgekehrt:
+//
+//   Handy --POST /pult/obs--> Hub --SSE /fern/befehle--> Stream-PC --> OBS
+//   Handy <--SSE /events---- Hub <--POST /fern/stand---- Stream-PC
+//
+// Dieselbe Bauform wie bei den Browser-Sources (SSE statt WebSocket, siehe
+// README), nur mit einem eigenen Schluessel: der fuer OBS darf nur lesen,
+// dieser hier schaltet Szenen um.
+//
+// Jeder Befehl wartet auf eine Antwort vom PC. Ein Knopf, der "erledigt"
+// meldet, waehrend OBS gar nicht erreichbar war, ist am Handy schlimmer als
+// einer, der ehrlich sagt, dass es nicht ging.
+
+import type http from 'node:http';
+import crypto from 'node:crypto';
+import { logger } from '#core/logger.ts';
+import type { Bus, ObsStandEvent } from './bus.ts';
+
+const log = logger('overlay:fern');
+
+const HEARTBEAT_MS = 15_000;
+const ANTWORT_MS = 6_000;
+
+export type FernBefehl =
+  | { art: 'szene'; szene: string }
+  | { art: 'clip' }
+  | { art: 'stumm'; quelle: string; stumm: boolean };
+
+export type FernAntwort = { ok: boolean; text: string };
+
+/**
+ * Ein Stream-PC, der sich mit einem noch unbekannten Schluessel meldet. Er
+ * wartet, bis jemand im Pult auf "Freigeben" tippt - damit Abdu keinen Befehl
+ * abtippen muss. Der Schluessel selbst geht nie ans Pult zurueck.
+ */
+export type FernAnfrage = { id: string; name: string; adresse: string; seit: string };
+
+/** So viele Anfragen gleichzeitig, so lange gueltig. Mehr ist Laerm oder ein Angriff. */
+const MAX_ANFRAGEN = 3;
+const ANFRAGE_MS = 10 * 60_000;
+
+export type Fernsteuerung = {
+  /** Die SSE-Verbindung des Stream-PCs. Eine neue ersetzt die alte. */
+  annehmen: (req: http.IncomingMessage, res: http.ServerResponse) => void;
+  /** Ein unbekannter Schluessel klopft an. */
+  anfragen: (key: string, name: string, adresse: string) => void;
+  offeneAnfragen: () => FernAnfrage[];
+  /** Gibt den Schluessel der Anfrage zurueck, damit er eingetragen werden kann. */
+  freigeben: (id: string) => string | null;
+  ablehnen: (id: string) => boolean;
+  /** Leitung schliessen, z. B. nachdem der Schluessel neu gewuerfelt wurde. */
+  trennen: () => void;
+  /** Stand von OBS, wie ihn der PC meldet. */
+  melden: (roh: unknown) => void;
+  antwort: (roh: unknown) => void;
+  senden: (b: FernBefehl) => Promise<FernAntwort>;
+  verbunden: () => boolean;
+};
+
+const LEER: Omit<ObsStandEvent, 'kind'> = {
+  pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false,
+};
+
+/** Was vom PC kommt, auf die erwartete Form bringen. Fremdes faellt weg. */
+export function standAus(roh: unknown): Omit<ObsStandEvent, 'kind' | 'pc'> {
+  const r = (roh && typeof roh === 'object' ? roh : {}) as Record<string, unknown>;
+  const text = (v: unknown): string | null => (typeof v === 'string' && v.length <= 200 ? v : null);
+  const szenen = Array.isArray(r['szenen'])
+    ? r['szenen'].map(text).filter((s): s is string => s !== null).slice(0, 100) : [];
+  const ton = Array.isArray(r['ton'])
+    ? r['ton'].flatMap((t) => {
+      const name = text((t as Record<string, unknown>)?.['name']);
+      return name === null ? [] : [{ name, stumm: (t as Record<string, unknown>)['stumm'] === true }];
+    }).slice(0, 50) : [];
+  return {
+    obs: r['obs'] === true,
+    szenen,
+    aktuell: text(r['aktuell']),
+    ton,
+    puffer: r['puffer'] === true,
+  };
+}
+
+export type FernOptionen = {
+  /**
+   * Was der PC gleich nach dem Verbinden erfaehrt, z. B. die Adresse der
+   * Sound-Quelle mit Schluessel. Damit richtet er OBS selbst ein.
+   */
+  willkommen?: () => Record<string, unknown> | null;
+};
+
+export function createFernsteuerung(bus: Bus, fo: FernOptionen = {}): Fernsteuerung {
+  let leitung: http.ServerResponse | null = null;
+  const offen = new Map<string, { fertig: (a: FernAntwort) => void; timer: NodeJS.Timeout }>();
+  const anfragen = new Map<string, FernAnfrage & { key: string; zuletzt: number }>();
+
+  const veroeffentlichen = (stand: Omit<ObsStandEvent, 'kind'>): void => {
+    bus.publish({ kind: 'obs', ...stand });
+  };
+
+  const aufraeumen = (): void => {
+    const jetzt = Date.now();
+    for (const [id, a] of anfragen) if (jetzt - a.zuletzt > ANFRAGE_MS) anfragen.delete(id);
+  };
+
+  return {
+    anfragen(key, name, adresse) {
+      aufraeumen();
+      // Derselbe PC klopft alle paar Sekunden erneut an. Das ist dieselbe
+      // Anfrage, keine neue - sonst stuende er nach einer Minute zehnmal da.
+      for (const a of anfragen.values()) {
+        if (a.key === key) { a.zuletzt = Date.now(); return; }
+      }
+      if (anfragen.size >= MAX_ANFRAGEN) {
+        const aelteste = [...anfragen.values()].sort((x, y) => x.zuletzt - y.zuletzt)[0];
+        if (aelteste) anfragen.delete(aelteste.id);
+      }
+      const id = crypto.randomBytes(6).toString('hex');
+      const sauber = (s: string, n: number): string =>
+        s.replace(/[\u0000-\u001f\u007f]/g, '').slice(0, n) || 'unbekannt';
+      anfragen.set(id, {
+        id, key, name: sauber(name, 40), adresse: sauber(adresse, 60),
+        seit: new Date().toISOString(), zuletzt: Date.now(),
+      });
+      log.info(`Stream-PC "${sauber(name, 40)}" (${sauber(adresse, 60)}) wartet auf Freigabe im Pult`);
+      bus.publish({ kind: 'fern-anfrage' });
+    },
+
+    offeneAnfragen() {
+      aufraeumen();
+      return [...anfragen.values()].map(({ id, name, adresse, seit }) => ({ id, name, adresse, seit }));
+    },
+
+    freigeben(id) {
+      aufraeumen();
+      const a = anfragen.get(id);
+      if (!a) return null;
+      // Es gibt nur einen Stream-PC. Wer freigibt, verwirft die anderen.
+      anfragen.clear();
+      log.info(`Stream-PC "${a.name}" freigegeben`);
+      bus.publish({ kind: 'fern-anfrage' });
+      return a.key;
+    },
+
+    ablehnen(id) {
+      const weg = anfragen.delete(id);
+      if (weg) bus.publish({ kind: 'fern-anfrage' });
+      return weg;
+    },
+
+    trennen() {
+      leitung?.end();
+    },
+
+    annehmen(req, res) {
+      if (leitung) {
+        // Zwei PCs zugleich hiesse: zwei OBS schalten auf denselben Knopf.
+        // Der neuere gewinnt, meist ist der alte ohnehin eine tote Leitung.
+        log.info('Stream-PC hat sich neu verbunden, alte Leitung geschlossen');
+        leitung.end();
+      }
+      res.writeHead(200, {
+        'content-type': 'text/event-stream; charset=utf-8',
+        'cache-control': 'no-cache, no-transform',
+        connection: 'keep-alive',
+        'x-accel-buffering': 'no',
+      });
+      res.write('retry: 2000\n\n');
+      leitung = res;
+      log.info('Stream-PC verbunden');
+      veroeffentlichen({ ...LEER, pc: true });
+      const hallo = fo.willkommen?.();
+      if (hallo) res.write(`data: ${JSON.stringify({ art: 'einrichten', ...hallo })}\n\n`);
+
+      const beat = setInterval(
+        () => res.write(`data: ${JSON.stringify({ art: 'beat', t: Date.now() })}\n\n`),
+        HEARTBEAT_MS);
+      beat.unref();
+
+      const ende = (): void => {
+        clearInterval(beat);
+        if (leitung !== res) return;      // schon durch eine neuere ersetzt
+        leitung = null;
+        log.info('Stream-PC getrennt');
+        veroeffentlichen(LEER);
+        for (const [id, o] of offen) {
+          clearTimeout(o.timer);
+          o.fertig({ ok: false, text: 'Verbindung zum Stream-PC abgerissen.' });
+          offen.delete(id);
+        }
+      };
+      req.on('close', ende);
+      res.on('error', ende);
+    },
+
+    melden(roh) {
+      if (!leitung) return;
+      veroeffentlichen({ pc: true, ...standAus(roh) });
+    },
+
+    antwort(roh) {
+      const r = (roh && typeof roh === 'object' ? roh : {}) as Record<string, unknown>;
+      const id = typeof r['id'] === 'string' ? r['id'] : '';
+      const o = offen.get(id);
+      if (!o) return;
+      offen.delete(id);
+      clearTimeout(o.timer);
+      o.fertig({
+        ok: r['ok'] === true,
+        text: typeof r['text'] === 'string' ? r['text'].slice(0, 300) : '',
+      });
+    },
+
+    senden(b) {
+      const res = leitung;
+      if (!res) {
+        return Promise.resolve({
+          ok: false, text: 'Der Stream-PC ist nicht verbunden. Läuft dort abdulive?',
+        });
+      }
+      const id = crypto.randomBytes(6).toString('hex');
+      return new Promise<FernAntwort>((fertig) => {
+        const timer = setTimeout(() => {
+          offen.delete(id);
+          fertig({ ok: false, text: 'Der Stream-PC hat nicht geantwortet.' });
+        }, ANTWORT_MS);
+        offen.set(id, { fertig, timer });
+        res.write(`data: ${JSON.stringify({ id, ...b })}\n\n`);
+      });
+    },
+
+    verbunden: () => leitung !== null,
+  };
+}

apps/overlay-server/src/sounds.test.ts

@@ -0,0 +1,89 @@
+// Der Sound-Speicher nimmt Dateien vom Handy an und liefert sie unter der
+// eigenen Adresse wieder aus. Hier wird vor allem geprueft, dass er nur Ton
+// annimmt - und dass die Liste einen Neustart uebersteht.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { createSoundboard, erkenneTyp, nameAusDatei, MAX_BYTES } from './sounds.ts';
+
+const ordner = (): string => fs.mkdtempSync(path.join(os.tmpdir(), 'abdulive-sounds-'));
+
+const MP3 = Buffer.concat([Buffer.from('ID3'), Buffer.alloc(64, 1)]);
+const WAV = Buffer.concat([Buffer.from('RIFF'), Buffer.alloc(4), Buffer.from('WAVE'), Buffer.alloc(32)]);
+const M4A = Buffer.concat([Buffer.alloc(4), Buffer.from('ftypM4A '), Buffer.alloc(32)]);
+
+test('Tontypen werden an den ersten Bytes erkannt', () => {
+  assert.equal(erkenneTyp(MP3), 'audio/mpeg');
+  assert.equal(erkenneTyp(Buffer.from([0xff, 0xfb, 0x90, 0x64, 0, 0, 0, 0, 0, 0, 0, 0])), 'audio/mpeg');
+  assert.equal(erkenneTyp(WAV), 'audio/wav');
+  assert.equal(erkenneTyp(Buffer.concat([Buffer.from('OggS'), Buffer.alloc(20)])), 'audio/ogg');
+  assert.equal(erkenneTyp(M4A), 'audio/mp4');
+});
+
+test('HTML ist kein Ton, auch wenn der Browser es behauptet', () => {
+  // Sonst waere das eine Ablage fuer beliebige Seiten unter der eigenen Adresse.
+  assert.equal(erkenneTyp(Buffer.from('<!doctype html><script>alert(1)</script>')), null);
+  assert.equal(erkenneTyp(Buffer.from('kurz')), null);
+  const sb = createSoundboard(ordner());
+  assert.throws(() => sb.hinzufuegen('x', Buffer.from('<html><body>hallo welt</body></html>')), /Kein Ton/);
+  assert.equal(sb.liste().length, 0);
+});
+
+test('zu gross wird abgelehnt, bevor etwas auf der Platte landet', () => {
+  const dir = ordner();
+  const sb = createSoundboard(dir);
+  const riesig = Buffer.concat([MP3, Buffer.alloc(MAX_BYTES)]);
+  assert.throws(() => sb.hinzufuegen('lied', riesig), /Zu gross/);
+  assert.deepEqual(fs.readdirSync(dir), []);
+});
+
+test('hochladen, abholen, nach Neustart noch da', () => {
+  const dir = ordner();
+  const sb = createSoundboard(dir);
+  const s = sb.hinzufuegen('Tusch', MP3);
+  assert.equal(s.typ, 'audio/mpeg');
+  assert.ok(s.datei.endsWith('.mp3'));
+  assert.deepEqual(sb.datei(s.id)?.daten, MP3);
+
+  const nachNeustart = createSoundboard(dir);
+  assert.equal(nachNeustart.liste()[0]?.name, 'Tusch');
+  assert.deepEqual(nachNeustart.datei(s.id)?.daten, MP3);
+});
+
+test('aendern nimmt nur, was erlaubt ist', () => {
+  const sb = createSoundboard(ordner());
+  const s = sb.hinzufuegen('Tusch', MP3);
+  const neu = sb.aendern(s.id, {
+    name: '  Ba\ndum   tss ', emoji: '🥁', farbe: 'url(javascript:x)', laut: 3,
+  })!;
+  assert.equal(neu.name, 'Ba dum tss');
+  assert.equal(neu.emoji, '🥁');
+  assert.equal(neu.farbe, s.farbe, 'freie Farbwerte waeren CSS-Einschleusung');
+  assert.equal(neu.laut, 1);
+  assert.equal(sb.aendern(s.id, { name: '   ' })?.name, 'Ba dum tss', 'leerer Name behaelt den alten');
+});
+
+test('verschieben und loeschen', () => {
+  const dir = ordner();
+  const sb = createSoundboard(dir);
+  const a = sb.hinzufuegen('A', MP3);
+  const b = sb.hinzufuegen('B', WAV);
+  sb.hinzufuegen('C', M4A);
+  assert.equal(sb.verschieben(b.id, -1), true);
+  assert.deepEqual(sb.liste().map((s) => s.name), ['B', 'A', 'C']);
+  assert.equal(sb.verschieben(b.id, -1), false, 'vor dem ersten ist nichts');
+
+  assert.equal(sb.entfernen(a.id), true);
+  assert.deepEqual(sb.liste().map((s) => s.name), ['B', 'C']);
+  assert.equal(fs.existsSync(path.join(dir, a.datei)), false, 'die Datei geht mit');
+  assert.equal(sb.entfernen(a.id), false);
+});
+
+test('Name aus dem Dateinamen', () => {
+  assert.equal(nameAusDatei('ba_dum_tss.mp3'), 'ba dum tss');
+  assert.equal(nameAusDatei('.mp3'), 'Sound');
+  assert.equal(nameAusDatei('Aufnahme 12.m4a'), 'Aufnahme 12');
+});

apps/overlay-server/src/sounds.ts

@@ -0,0 +1,187 @@
+// Die Sounds fuer das Pult.
+//
+// Hochgeladen wird vom Handy aus, abgespielt in OBS ueber die Browser-Source
+// /sounds. Dazwischen liegt nur dieser Ordner:
+//
+//   <db>/sounds/sounds.json     Name, Emoji, Farbe, Lautstaerke, Reihenfolge
+//   <db>/sounds/<id>.<endung>   die Datei selbst
+//
+// Bewusst neben der Datenbank und nicht in ihr: ein Ordner mit Dateien laesst
+// sich von Hand durchsehen und sichern, und die Datenbank bleibt klein. Und
+// bewusst nicht unter /opt/abdulive: das wird bei jedem Ausrollen ersetzt.
+//
+// Der Dateityp wird an den ersten Bytes erkannt, nicht an dem, was der Browser
+// behauptet. Ausgeliefert wird nur, was hier als Ton erkannt wurde - sonst
+// waere das eine Ablage fuer beliebige Dateien unter der eigenen Adresse.
+
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+
+export type Sound = {
+  id: string;
+  name: string;
+  emoji: string;
+  /** Eine der FARBEN unten. Freie Werte gaebe es nur fuer CSS-Einschleusung. */
+  farbe: string;
+  /** 0 bis 1. Multipliziert mit der Lautstaerke der Browser-Source. */
+  laut: number;
+  datei: string;
+  typ: string;
+  bytes: number;
+  seit: string;
+};
+
+export const FARBEN = ['lila', 'tuerkis', 'pink', 'gold', 'gruen', 'rot', 'blau', 'grau'] as const;
+
+/** Groesser ist kein Soundeffekt mehr, sondern ein Lied. */
+export const MAX_BYTES = 8 * 1024 * 1024;
+export const MAX_SOUNDS = 120;
+
+const ENDUNG: Record<string, string> = {
+  'audio/mpeg': '.mp3',
+  'audio/wav': '.wav',
+  'audio/ogg': '.ogg',
+  'audio/webm': '.webm',
+  'audio/mp4': '.m4a',
+};
+
+/**
+ * Tontyp an den ersten Bytes erkennen. `null` heisst: kein Ton, den OBS'
+ * Browser sicher abspielt.
+ */
+export function erkenneTyp(b: Buffer): string | null {
+  if (b.length < 12) return null;
+  const ascii = (von: number, bis: number): string => b.subarray(von, bis).toString('latin1');
+  if (ascii(0, 3) === 'ID3') return 'audio/mpeg';
+  // MPEG-Rahmen ohne ID3-Kopf: 11 gesetzte Synchronbits.
+  if (b[0] === 0xff && (b[1]! & 0xe0) === 0xe0) return 'audio/mpeg';
+  if (ascii(0, 4) === 'RIFF' && ascii(8, 12) === 'WAVE') return 'audio/wav';
+  if (ascii(0, 4) === 'OggS') return 'audio/ogg';
+  if (b[0] === 0x1a && b[1] === 0x45 && b[2] === 0xdf && b[3] === 0xa3) return 'audio/webm';
+  // MP4/M4A: das Kaestchen `ftyp` an Stelle 4. So nimmt auch das iPhone auf.
+  if (ascii(4, 8) === 'ftyp') return 'audio/mp4';
+  return null;
+}
+
+/** Name aus dem Dateinamen: ohne Endung, ohne Unterstriche, nicht zu lang. */
+export function nameAusDatei(datei: string): string {
+  const ohne = datei.replace(/\.[A-Za-z0-9]{1,5}$/, '').replace(/[_]+/g, ' ').trim();
+  return saeubern(ohne) || 'Sound';
+}
+
+function saeubern(s: string, max = 40): string {
+  // Steuerzeichen raus. Angezeigt wird ueber textContent, aber ein
+  // Zeilenumbruch im Namen zerreisst trotzdem jede Kachel.
+  return Array.from(s.replace(/[\u0000-\u001f\u007f]/g, ' ').replace(/\s+/g, ' ').trim())
+    .slice(0, max).join('');
+}
+
+function emojiOk(s: string): string {
+  // Ein Emoji kann aus mehreren Codepoints bestehen (Hautfarbe, Familien).
+  // Zehn reichen fuer alles, was man auf eine Kachel setzt.
+  return Array.from(saeubern(s, 10)).slice(0, 10).join('');
+}
+
+export type Soundboard = {
+  liste: () => Sound[];
+  holen: (id: string) => Sound | undefined;
+  datei: (id: string) => { daten: Buffer; typ: string } | undefined;
+  hinzufuegen: (name: string, daten: Buffer) => Sound;
+  aendern: (id: string, was: Partial<Pick<Sound, 'name' | 'emoji' | 'farbe' | 'laut'>>) => Sound | undefined;
+  entfernen: (id: string) => boolean;
+  /** Um eine Stelle nach vorn (-1) oder hinten (+1). */
+  verschieben: (id: string, um: number) => boolean;
+};
+
+export function createSoundboard(ordner: string): Soundboard {
+  const index = path.join(ordner, 'sounds.json');
+  const sounds: Sound[] = lesen();
+
+  function lesen(): Sound[] {
+    try {
+      const roh = JSON.parse(fs.readFileSync(index, 'utf8')) as { sounds?: Sound[] };
+      return Array.isArray(roh.sounds) ? roh.sounds : [];
+    } catch {
+      return [];
+    }
+  }
+
+  function schreiben(): void {
+    fs.mkdirSync(ordner, { recursive: true });
+    // Erst daneben schreiben, dann umbenennen: stirbt der Prozess mittendrin,
+    // bleibt die alte Liste ganz statt einer halben neuen.
+    const tmp = `${index}.${process.pid}.tmp`;
+    fs.writeFileSync(tmp, JSON.stringify({ sounds }, null, 2));
+    fs.renameSync(tmp, index);
+  }
+
+  const holen = (id: string): Sound | undefined => sounds.find((s) => s.id === id);
+
+  return {
+    liste: () => sounds.map((s) => ({ ...s })),
+    holen,
+
+    datei(id) {
+      const s = holen(id);
+      if (!s) return undefined;
+      try {
+        return { daten: fs.readFileSync(path.join(ordner, s.datei)), typ: s.typ };
+      } catch {
+        return undefined;
+      }
+    },
+
+    hinzufuegen(name, daten) {
+      if (daten.length > MAX_BYTES) {
+        throw new Error(`Zu gross: höchstens ${MAX_BYTES / 1024 / 1024} MB.`);
+      }
+      if (sounds.length >= MAX_SOUNDS) throw new Error(`Höchstens ${MAX_SOUNDS} Sounds.`);
+      const typ = erkenneTyp(daten);
+      if (!typ) throw new Error('Kein Ton, den OBS abspielt. Erlaubt sind MP3, WAV, OGG, WebM und M4A.');
+
+      const id = crypto.randomBytes(6).toString('hex');
+      const datei = `${id}${ENDUNG[typ]}`;
+      fs.mkdirSync(ordner, { recursive: true });
+      fs.writeFileSync(path.join(ordner, datei), daten);
+      const s: Sound = {
+        id, name: saeubern(name) || 'Sound', emoji: '', farbe: FARBEN[sounds.length % FARBEN.length]!,
+        laut: 0.8, datei, typ, bytes: daten.length, seit: new Date().toISOString(),
+      };
+      sounds.push(s);
+      schreiben();
+      return { ...s };
+    },
+
+    aendern(id, was) {
+      const s = holen(id);
+      if (!s) return undefined;
+      if (was.name !== undefined) s.name = saeubern(was.name) || s.name;
+      if (was.emoji !== undefined) s.emoji = emojiOk(was.emoji);
+      if (was.farbe !== undefined && (FARBEN as readonly string[]).includes(was.farbe)) s.farbe = was.farbe;
+      if (was.laut !== undefined && Number.isFinite(was.laut)) {
+        s.laut = Math.round(Math.max(0, Math.min(1, was.laut)) * 100) / 100;
+      }
+      schreiben();
+      return { ...s };
+    },
+
+    entfernen(id) {
+      const i = sounds.findIndex((s) => s.id === id);
+      if (i === -1) return false;
+      const [weg] = sounds.splice(i, 1);
+      schreiben();
+      try { fs.unlinkSync(path.join(ordner, weg!.datei)); } catch { /* schon weg */ }
+      return true;
+    },
+
+    verschieben(id, um) {
+      const i = sounds.findIndex((s) => s.id === id);
+      const ziel = i + Math.sign(um);
+      if (i === -1 || ziel < 0 || ziel >= sounds.length) return false;
+      [sounds[i], sounds[ziel]] = [sounds[ziel]!, sounds[i]!];
+      schreiben();
+      return true;
+    },
+  };
+}

apps/overlay-server/src/test-events.test.ts

@@ -0,0 +1,117 @@
+// Die Testknoepfe sind das einzige Werkzeug, mit dem sich das Overlay
+// ausserhalb eines Streams pruefen laesst. Geht hier etwas kaputt, merkt man
+// es ausgerechnet dann nicht, wenn man es am noetigsten braucht.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { TEST_KNOEPFE, testEvent, type TestArt } from './test-events.ts';
+
+test('zu jedem Knopf gibt es ein Ereignis', () => {
+  // Ein Knopf ohne Ereignis tut beim Druecken nichts und sieht dabei aus wie
+  // ein kaputtes Overlay.
+  for (const k of TEST_KNOEPFE) {
+    if (k.art === 'chat-loeschen') continue;      // braucht eine Nachricht, siehe unten
+    assert.ok(testEvent(k.art), `${k.art} liefert kein Ereignis`);
+  }
+});
+
+test('jeder Knopf kommt nur einmal vor', () => {
+  const arten = TEST_KNOEPFE.map((k) => k.art);
+  assert.equal(new Set(arten).size, arten.length);
+});
+
+test('die Einblendungen tragen die Felder, die die Seite anzeigt', () => {
+  const raid = testEvent('raid') as { kind: string; type: string; amount: number };
+  assert.equal(raid.kind, 'alert');
+  assert.equal(raid.type, 'raid');
+  assert.ok(raid.amount > 0, 'ohne Zuschauerzahl steht "mit undefined Zuschauern" im Bild');
+
+  const gift = testEvent('subgift') as { recipient?: string };
+  assert.ok(gift.recipient, 'ohne Beschenkten fehlt die zweite Zeile');
+
+  const resub = testEvent('resub') as { months?: number };
+  assert.ok(resub.months && resub.months > 0);
+});
+
+test('"letzte löschen" braucht eine Nachricht und trifft genau die', () => {
+  assert.equal(testEvent('chat-loeschen'), null, 'ohne Chat gibt es nichts zu loeschen');
+  assert.deepEqual(testEvent('chat-loeschen', 'abc'), { kind: 'clear', messageId: 'abc' });
+});
+
+test('"Chat leeren" loescht alles, nicht nur eine Nachricht', () => {
+  assert.deepEqual(testEvent('chat-leeren'), { kind: 'clear' });
+});
+
+test('Chatnachrichten haben eine eigene ID', () => {
+  // Zwei Nachrichten mit derselben ID wuerden sich beim Loeschen gegenseitig
+  // mitnehmen.
+  const a = testEvent('chat') as { id: string };
+  const b = testEvent('chat') as { id: string };
+  assert.notEqual(a.id, b.id);
+});
+
+test('das Emote im Test ist im Text auch enthalten', () => {
+  // Sonst wird nichts ersetzt und der Knopf prueft die Emote-Anzeige nicht.
+  const ev = testEvent('chat-emote') as { text: string; emotes: Array<{ name: string }> };
+  assert.equal(ev.emotes.length, 1);
+  assert.ok(ev.text.includes(ev.emotes[0]!.name));
+});
+
+test('gesperrt ist nur, was einen falschen Stand setzt - nicht der Weg zurueck', () => {
+  // Eine Einblendung blitzt auf und ist weg. Ein erfundener Stream-Zustand
+  // bleibt in der Statusleiste stehen, bis die naechste Abfrage ihn
+  // geraderueckt - und das dauert bis zu einer Minute.
+  //
+  // "Zuruecksetzen" darf dabei nie gesperrt sein: sonst kommt man aus einem
+  // erfundenen Zustand ohne Neustart nicht mehr heraus, und auf einem Hub ohne
+  // Broadcaster-Token raeumt ueberhaupt niemand hinterher auf.
+  const gesperrt = TEST_KNOEPFE.filter((k) => k.nurOffline).map((k) => k.art);
+  assert.deepEqual(gesperrt, ['live-an']);
+
+  const zurueck = TEST_KNOEPFE.find((k) => k.art === 'live-aus');
+  assert.equal(zurueck?.nurOffline, undefined, 'der Weg zurueck bleibt immer offen');
+});
+
+test('der Stand-Knopf setzt einen anzeigbaren Stream', () => {
+  const an = testEvent('live-an') as
+    { kind: string; live: boolean; title: string; startedAt: string | null };
+  assert.equal(an.kind, 'stream');
+  assert.equal(an.live, true);
+  assert.ok(an.title.length > 0);
+  assert.ok(an.startedAt && Date.parse(an.startedAt) < Date.now(), 'Laufzeit muss positiv sein');
+
+  const aus = testEvent('live-aus') as { live: boolean; startedAt: string | null };
+  assert.equal(aus.live, false);
+  assert.equal(aus.startedAt, null);
+});
+
+test('unbekannte Knoepfe liefern nichts, statt etwas zu erfinden', () => {
+  assert.equal(testEvent('gibtsnicht' as TestArt), null);
+});
+
+// ---------------------------------------------------------------- Kanalpunkte
+
+test('eine Belohnung wird nie als Abo eingeblendet', () => {
+  // Genau das stand hier einmal: die Konfetti-Belohnung hat die Abo-
+  // Einblendung wiederverwendet und "Neues Abo" ins Bild geschrieben. Eine
+  // Falschmeldung im Stream, die in der Aufzeichnung bleibt.
+  const e = testEvent('reward') as { kind: string; type: string; reward?: string };
+  assert.equal(e.kind, 'alert');
+  assert.equal(e.type, 'reward');
+  assert.notEqual(e.type, 'sub');
+  assert.ok(e.reward, 'ohne Titel weiss niemand, welche Belohnung gemeint ist');
+});
+
+test('Konfetti ist ein eigenes Ereignis, keine Nebenwirkung einer Einblendung', () => {
+  // So muss die Effektseite nicht wissen, welche Belohnung was ausloest.
+  const e = testEvent('reward-konfetti') as { kind: string; staerke: number };
+  assert.equal(e.kind, 'konfetti');
+  assert.ok(e.staerke > 0);
+});
+
+test('der Vorlese-Knopf schickt Text, den die Seite auch sprechen kann', () => {
+  const e = testEvent('tts') as { kind: string; text: string; name: string };
+  assert.equal(e.kind, 'tts');
+  assert.ok(e.text.length > 0);
+  assert.ok(e.name.length > 0);
+});

apps/overlay-server/src/test-events.ts

@@ -0,0 +1,219 @@
+// Erfundene Ereignisse zum Ausprobieren, für die Knöpfe auf der
+// Übersichtsseite und für den Vorführmodus.
+//
+// Warum das gebraucht wird: ein Raid kommt vielleicht einmal die Woche vor.
+// Darauf zu warten, um zu sehen, ob die Einblendung passt, ist keine
+// Arbeitsweise - und mitten im Stream herauszufinden, dass der Text abgeschnitten
+// wird, ist die schlechteste aller Möglichkeiten.
+//
+// Die Knopfliste und die Ereignisse stehen hier zusammen, damit die Seite die
+// Knöpfe daraus bauen kann. Ein Knopf, den es gibt, hat damit immer auch ein
+// Ereignis dahinter.
+
+import { ulid } from '#shared/events.ts';
+import type { ChatEvent, OverlayEvent } from './bus.ts';
+
+export const NAMEN = [
+  'kevin_ohne_c', 'Melli', 'HansWurst42', 'dieNina', 'Tobi', 'Schnitzelfan',
+  'pixelpudel', 'Rewe_Kassiererin', 'Olaf', 'zwiebeljule',
+];
+
+export const SPRUECHE = [
+  'moin', 'was geht', 'der Boss hat 3 Phasen oder?', 'hahaha',
+  'rechts! RECHTS!', 'ich guck seit ner Stunde zu, richtig gut',
+  'kann jemand den Titel lesen', 'das war knapp', 'gg',
+  'mein Internet ist heute wieder Müll', 'hast du den Trank noch?',
+  'erster', 'wie lange streamst du heute noch',
+];
+
+/**
+ * Globale Twitch-Emotes mit ihren echten IDs - nachgeschlagen, nicht geraten,
+ * damit die Bilder wirklich laden. KEKW fehlt hier absichtlich: das ist ein
+ * BTTV-Emote und hat bei Twitch keine ID.
+ */
+export const EMOTES = [
+  { id: '425618', name: 'LUL', count: 1 },
+  { id: '25', name: 'Kappa', count: 1 },
+  { id: '354', name: '4Head', count: 1 },
+];
+
+export const FARBEN = ['#ff4fa3', '#4fd1c5', '#a970ff', '#ffc53d', '#4ade80', null];
+
+export function zufall<T>(list: readonly T[]): T {
+  return list[Math.floor(Math.random() * list.length)]!;
+}
+
+export type TestArt =
+  | 'sub' | 'resub' | 'subgift' | 'massgift' | 'raid' | 'cheer' | 'first' | 'clip' | 'follow'
+  | 'reward' | 'reward-konfetti' | 'tts'
+  | 'chat' | 'chat-emote' | 'chat-gif' | 'chat-erstmals' | 'chat-bits' | 'chat-lang'
+  | 'chat-loeschen' | 'chat-leeren'
+  | 'hype' | 'live-an' | 'live-aus';
+
+export type TestKnopf = {
+  art: TestArt;
+  label: string;
+  gruppe: 'Einblendungen' | 'Kanalpunkte' | 'Chat' | 'Effekte' | 'Stand';
+  /**
+   * Verändert den Zustand, den das Overlay dauerhaft anzeigt, statt nur einmal
+   * aufzublitzen. Läuft gerade ein Stream, steht danach etwas Falsches im Bild,
+   * bis die nächste Abfrage es geraderückt - solche Knöpfe sind gesperrt.
+   */
+  nurOffline?: boolean;
+};
+
+export const TEST_KNOEPFE: TestKnopf[] = [
+  { art: 'sub', label: 'Abo', gruppe: 'Einblendungen' },
+  { art: 'resub', label: 'Abo verlängert', gruppe: 'Einblendungen' },
+  { art: 'subgift', label: 'Abo verschenkt', gruppe: 'Einblendungen' },
+  { art: 'massgift', label: '5 Abos verschenkt', gruppe: 'Einblendungen' },
+  { art: 'raid', label: 'Raid', gruppe: 'Einblendungen' },
+  { art: 'cheer', label: 'Bits', gruppe: 'Einblendungen' },
+  { art: 'first', label: 'Erstchatter', gruppe: 'Einblendungen' },
+  { art: 'clip', label: 'Clip gespeichert', gruppe: 'Einblendungen' },
+  { art: 'follow', label: 'Follow', gruppe: 'Einblendungen' },
+
+  { art: 'reward', label: 'Belohnung eingelöst', gruppe: 'Kanalpunkte' },
+  { art: 'reward-konfetti', label: 'Belohnung mit Konfetti', gruppe: 'Kanalpunkte' },
+  { art: 'tts', label: 'Vorlesen', gruppe: 'Kanalpunkte' },
+
+  { art: 'chat', label: 'Nachricht', gruppe: 'Chat' },
+  { art: 'chat-emote', label: 'mit Emote', gruppe: 'Chat' },
+  { art: 'chat-gif', label: 'mit GIF', gruppe: 'Chat' },
+  { art: 'chat-erstmals', label: 'von einem Erstchatter', gruppe: 'Chat' },
+  { art: 'chat-bits', label: 'mit Bits', gruppe: 'Chat' },
+  { art: 'chat-lang', label: 'sehr lang', gruppe: 'Chat' },
+  { art: 'chat-loeschen', label: 'letzte löschen', gruppe: 'Chat' },
+  { art: 'chat-leeren', label: 'Chat leeren', gruppe: 'Chat' },
+
+  { art: 'hype', label: 'Emote-Regen', gruppe: 'Effekte' },
+
+  { art: 'live-an', label: 'Stream läuft', gruppe: 'Stand', nurOffline: true },
+  // Absichtlich NICHT gesperrt: das ist der Weg aus einem erfundenen Zustand
+  // wieder heraus. Wäre der Knopf gesperrt, sobald "Stream läuft" gedrückt
+  // wurde, käme man ohne Neustart nicht mehr zurück - und auf einem Hub ohne
+  // Broadcaster-Token räumt auch keine Abfrage hinterher auf.
+  { art: 'live-aus', label: 'Stand zurücksetzen', gruppe: 'Stand' },
+];
+
+// Twitchs globale Abzeichen. Die Adressen sind fest, so zeigt die Vorfuehrung
+// echte Bilder, ohne Helix fragen zu muessen.
+const ABZEICHEN = 'https://static-cdn.jtvnw.net/badges/v1/';
+const MOD = { url: `${ABZEICHEN}3267646d-33f0-4b17-b3df-f923a41db1d0/2`, title: 'Moderator' };
+const VIP = { url: `${ABZEICHEN}b817aba4-fad8-49e2-b88a-7cc744dfa6ec/2`, title: 'VIP' };
+const ABO = { url: `${ABZEICHEN}5d9f2208-5dd8-11e7-8513-2ff4adfae661/2`, title: 'Subscriber' };
+
+function zufallsAbzeichen(): Pick<ChatEvent, 'mod' | 'sub' | 'badges'> {
+  const mod = Math.random() < 0.15;
+  const vip = !mod && Math.random() < 0.1;
+  const sub = Math.random() < 0.3;
+  return {
+    mod, sub,
+    badges: [...(mod ? [MOD] : []), ...(vip ? [VIP] : []), ...(sub ? [ABO] : [])],
+  };
+}
+
+function chat(over: Partial<ChatEvent> = {}): ChatEvent {
+  const name = zufall(NAMEN);
+  return {
+    kind: 'chat',
+    id: ulid(),
+    userId: `test-${NAMEN.indexOf(name)}`,
+    login: name.toLowerCase(),
+    name,
+    text: zufall(SPRUECHE),
+    color: zufall(FARBEN),
+    emotes: [],
+    gifs: [],
+    first: false,
+    ...zufallsAbzeichen(),
+    broadcaster: false,
+    bits: 0,
+    ...over,
+  };
+}
+
+/**
+ * Baut das Ereignis zu einem Knopf.
+ *
+ * `letzteChatId` ist die neueste Nachricht im Rückblick des Busses - nur so
+ * kann "letzte löschen" etwas treffen, das auch wirklich im Bild steht.
+ */
+export function testEvent(art: TestArt, letzteChatId?: string): OverlayEvent | null {
+  const name = zufall(NAMEN);
+  const alarm = (rest: Record<string, unknown>): OverlayEvent =>
+    ({ kind: 'alert', id: ulid(), name, ...rest } as OverlayEvent);
+
+  switch (art) {
+    case 'sub': return alarm({ type: 'sub', tier: '1000' });
+    case 'resub': return alarm({
+      type: 'resub', months: 1 + Math.floor(Math.random() * 30),
+      message: 'endlich wieder dabei, zwei Monate Pause waren genug',
+    });
+    case 'subgift': return alarm({ type: 'subgift', recipient: zufall(NAMEN) });
+    case 'massgift': return alarm({ type: 'massgift', amount: 5 });
+    case 'raid': return alarm({ type: 'raid', amount: 5 + Math.floor(Math.random() * 60) });
+    case 'cheer': return alarm({
+      type: 'cheer', amount: 100 * (1 + Math.floor(Math.random() * 10)),
+      message: 'das musste sein',
+    });
+    case 'first': return alarm({ type: 'first' });
+    case 'clip': return alarm({ type: 'clip' });
+    case 'follow': return alarm({ type: 'follow' });
+    case 'reward': return alarm({
+      type: 'reward', reward: 'Nachricht anheften', amount: 500,
+      message: 'guck mal links oben',
+    });
+    case 'reward-konfetti': return { kind: 'konfetti', staerke: 1 };
+    case 'tts': return {
+      kind: 'tts', id: ulid(), name,
+      text: 'Das hier wird vorgelesen, sobald du es freigibst.',
+    };
+
+    case 'chat': return chat();
+    case 'chat-emote': {
+      const e = zufall(EMOTES);
+      return chat({ text: `${zufall(SPRUECHE)} ${e.name}`, emotes: [e] });
+    }
+    case 'chat-gif': {
+      // Genau so, wie Twitch es schickt: der Text ist nur ein Platzhalter,
+      // das Bild steckt im Tag. Echte Adresse, damit der Knopf auch wirklich
+      // etwas anzeigt.
+      const text = '[Idk GIF by Respective]';
+      return chat({
+        text,
+        gifs: [{
+          id: 'Pnd7qLFuGCOntZcNKB',
+          url: 'https://media0.giphy.com/media/Pnd7qLFuGCOntZcNKB/giphy.gif',
+          from: 0, to: [...text].length - 1,
+        }],
+      });
+    }
+    case 'chat-erstmals': return chat({ first: true, text: 'moin, bin neu hier' });
+    case 'chat-bits': return chat({ bits: 500, text: 'nimm die 500 Bits' });
+    case 'chat-lang': return chat({
+      // Der Fall, den man sonst erst im Stream sieht: eine Nachricht, die
+      // den Kasten sprengt.
+      text: 'also ich hab das gestern auch probiert und da ist mir aufgefallen ' +
+        'dass der Boss in Phase zwei immer nach links ausweicht, aber nur wenn ' +
+        'man vorher nicht geblockt hat, und das steht in keinem Guide drin',
+    });
+    case 'chat-loeschen':
+      return letzteChatId ? { kind: 'clear', messageId: letzteChatId } : null;
+    case 'chat-leeren': return { kind: 'clear' };
+
+    case 'hype': return { kind: 'hype', score: 4 + Math.random() * 4, rate: 45 };
+
+    case 'live-an': return {
+      kind: 'stream', live: true,
+      title: 'Probelauf des Overlays', category: 'Just Chatting',
+      viewers: 12 + Math.floor(Math.random() * 30),
+      startedAt: new Date(Date.now() - 42 * 60_000).toISOString(),
+    };
+    case 'live-aus': return {
+      kind: 'stream', live: false, title: '', category: '', viewers: 0, startedAt: null,
+    };
+
+    default: return null;
+  }
+}

apps/overlay-web/README.md

@@ -1,5 +1,182 @@
 # @abdulive/overlay-web
 
-Browser-Sources fuer OBS: Alerts, Effekte, Community-Hinweis, Umfrage, Raid-Panel.
+Die Browser-Sources für OBS. Fünf Seiten, alle mit durchsichtigem Hintergrund,
+alle an demselben Ereignisstrom.
 
-Spezifikation: [docs/projects/chat-control.md](../../docs/projects/chat-control.md)
+Kein Build, kein Framework, keine Abhängigkeit: OBS lädt die Dateien direkt,
+und jede Zwischenstufe wäre ein Ding, das mitten im Stream kaputtgehen kann.
+Gemeinsam sind nur [`theme.css`](public/theme.css) (Farben, Schrift, Kontur)
+und [`client.js`](public/client.js) (Verbindung, Escaping, Emotes).
+
+## Die Seiten
+
+| Adresse | Größe | Was sie zeigt |
+|---|---|---|
+| `/alerts` | 1920×1080 | Abos, Raids, Bits, Erstchatter. Eine nach der anderen, nie übereinander. |
+| `/chat` | 460×900 | Chatnachrichten mit Emotes, Abzeichen, Farben. |
+| `/status` | 1920×160 | Titel, Kategorie, Zuschauer, Laufzeit. |
+| `/effects` | 1920×1080 | Emote-Regen bei Chat-Spitzen, Konfetti bei Abos und Raids. |
+| `/starting` | 1920×1080 | Pausenbild als eigene Szene. Deckend, nicht durchsichtig. |
+| `/sounds` | 400×120 | Spielt die Sounds vom Pult. Unsichtbar, **mit Ton**. |
+
+Die fertigen Adressen mit Schlüssel stehen auf der Übersichtsseite (`/`).
+
+## In OBS
+
+Je Seite eine Browser-Source anlegen, Adresse eintragen, Breite und Höhe
+setzen. Zwei Häkchen sind wichtig:
+
+- **"Quelle beim Unsichtbarwerden deaktivieren" aus.** Sonst verpasst das
+  Overlay alles, was passiert, während eine andere Szene im Bild ist, und
+  baut sich bei jedem Szenenwechsel neu auf.
+- **"Browser beim Szenenwechsel aktualisieren" aus.** Eine laufende
+  Einblendung würde sonst mitten im Wechsel abgeschnitten.
+
+## Einstellungen über die Adresse
+
+Es gibt keine Konfigurationsdatei. Was einstellbar ist, hängt hinten an der
+URL - so lässt es sich in OBS ändern, ohne den Dienst anzufassen.
+
+| Seite | Parameter | Vorgabe |
+|---|---|---|
+| alle | `probe=1` | dunkler Hintergrund zum Ansehen im Browser |
+| `/alerts` | `sekunden` | 7 - wie lange eine Einblendung steht |
+| `/alerts` | `erstchatter=0` | Erstchatter nicht einblenden |
+| `/chat` | `max` | 14 - so viele Zeilen gleichzeitig |
+| `/chat` | `sekunden` | 120 - danach verblasst eine Zeile (0 = nie) |
+| `/chat` | `befehle=1` | auch `!`-Befehle zeigen |
+| `/status` | `kanal` | abdulive_ |
+| `/effects` | `max` | 260 - Obergrenze für Teilchen |
+| `/starting` | `text`, `unter` | "Gleich geht es los", leer |
+
+## Zum Ausprobieren
+
+Auf der Übersichtsseite (`/`) steht unter **Ausprobieren** für jede Einblendung,
+jede Chat-Variante und jeden Effekt ein Knopf. Er löst ein erfundenes Ereignis
+aus, das nur an die Browser-Sources geht - nichts davon landet in der Datenbank,
+auf Discord oder bei Twitch.
+
+Am besten die zu prüfende Seite über „ansehen" in einem zweiten Fenster offen
+haben. Dabei hilft `?probe=1`: das legt einen dunklen Grund unter die sonst
+durchsichtige Seite.
+
+Zwei Dinge sind gesperrt, solange ein Stream läuft: „Stream läuft" und die
+Vorführung. Beide setzen einen Zustand, der in der Statusleiste stehen bliebe,
+bis die nächste Twitch-Abfrage ihn geraderückt. „Stand zurücksetzen" ist
+absichtlich nie gesperrt - das ist der Weg aus einem erfundenen Zustand wieder
+heraus.
+
+Dieselben Ereignisse im Dauerbetrieb, auch ohne laufenden Dienst:
+
+```
+abdulive overlay --demo
+```
+
+Erfundener Chat, alle neun Sekunden eine Einblendung, ab und zu eine
+Chat-Spitze. Ohne das ließe sich eine Raid-Einblendung nur prüfen, indem man
+auf einen echten Raid wartet.
+
+## Was fehlt
+
+- **Follows.** Kommen nicht über IRC, dafür braucht es EventSub. Bis dahin
+  bleibt das Overlay bei Follows stumm; Abos, Raids und Bits kommen an.
+- **BTTV- und 7TV-Emotes.** Die hängen an einer zweiten API. Twitchs eigene
+  Emotes werden angezeigt.
+- **Töne bei Einblendungen.** Es liegen keine Audiodateien im Repo, und ein
+  Overlay, das ungefragt Krach macht, ist schlimmer als eines, das still ist.
+  Sounds gibt es nur auf Knopfdruck, über das Pult.
+
+## Das Pult (`/pult`)
+
+Keine Browser-Source, sondern eine App fürs Handy: wie ein Stream Deck, nur
+ohne Hardware. Mit Passwort, wie die Übersicht. Im Browser des Handys
+„Zum Startbildschirm hinzufügen“ (iPhone) bzw. „App installieren“ (Android),
+dann startet es ohne Adressleiste. `manifest.webmanifest` und `sw.js` machen
+das möglich; der Service Worker hält nur die Hülle vor und beantwortet nie
+einen Knopfdruck aus dem Speicher.
+
+| Reiter | Was |
+|---|---|
+| Sounds | Tasten fürs Soundboard. „+ Sound“ lädt MP3, WAV, OGG, WebM oder M4A vom Handy hoch (bis 8 MB). „Bearbeiten“: Name, Emoji, Farbe, Lautstärke, Reihenfolge, Löschen, am Handy anhören. „Stopp“ bricht alle Sounds ab. |
+| Szenen | OBS-Szenen umschalten, Clip aus dem Wiedergabepuffer speichern, Toneingänge stumm schalten. Braucht den Stream-PC (siehe unten). |
+| Stream | Liegestütze zählen, Vorlesen freigeben, „Sofort still“. |
+| Chat | Der Twitch-Chat, **nur lesend**: Abzeichen, Emotes, GIFs, Erstchatter hervorgehoben, Abos, Raids und Belohnungen als eigene Zeile, von Mods Gelöschtes durchgestrichen. |
+| Test | Dieselben Testknöpfe wie auf der Übersicht. |
+
+**Am Tablet** (ab 760 px Breite und 500 px Höhe) steht der Chat fest rechts
+und links der gewählte Reiter, der Chat-Reiter entfällt. Ohne gemerkten
+Reiter geht das Pult dort auf Szenen auf. Quer gehaltene Handys sind zu
+niedrig dafür und behalten die Reiter.
+
+Der Chat hängt am selben Ereignisstrom wie die Browser-Sources und schreibt
+nie. Er braucht kein Bot-Konto und keine weiteren Rechte bei Twitch. Nach
+dem Neuverbinden kommen die letzten 30 Nachrichten aus dem Schnappschuss,
+im Pult stehen höchstens 250. Wer hochscrollt, bleibt dort; „Neue
+Nachrichten“ springt zurück ans Ende.
+
+Die Sonne oben rechts hält den Bildschirm an (Wake Lock), solange das Pult
+offen ist.
+
+**Sounds** liegen auf dem Hub neben der Datenbank (`<db>/sounds/`), nicht im
+Repo und nicht unter `/opt/abdulive` - sie überleben jedes Ausrollen. Der
+Dateityp wird an den ersten Bytes erkannt; was kein Ton ist, wird abgelehnt.
+Gespielt wird in OBS über die Browser-Source `/sounds`, „Audio über OBS
+steuern“ an. Ist sie nicht verbunden, sagt das Pult es in Gelb. Höchstens vier
+Sounds gleichzeitig (`?max=`), `?laut=` dämpft alle.
+
+**Szenen** gehen über den Stream-PC, weil der Hub OBS nicht erreicht. Der PC
+wählt sich mit eigenem Schlüssel beim Hub ein (`apps/ingest/src/fern.ts` und
+`apps/overlay-server/src/fern.ts`). In OBS muss nur obs-websocket an sein -
+dasselbe, was `!clip` braucht.
+
+Einzurichten ist nichts. Beim ersten Start würfelt `ingest` einen Schlüssel
+und meldet sich bei `fern.url` (Vorgabe `https://abdu.dimension47.de`,
+`FERN_URL=` schaltet ab). Im Pult unter Szenen steht dann „Stream-PC … möchte
+sich verbinden“ mit **Freigeben**. Ein Tipp, nach ein paar Sekunden ist er da.
+„Stream-PC trennen“ unten im Reiter würfelt den Schlüssel neu; danach muss er
+neu freigegeben werden. `abdulive fern:verbinden <adresse> <schlüssel>` bleibt
+als Weg von Hand (Befehl auf der Übersicht).
+
+Jeder Knopf wartet auf die Antwort von OBS und sagt ehrlich, wenn es nicht ging.
+
+**Die Sound-Quelle legt der PC selbst an.** Nach dem Verbinden schickt der Hub
+die Adresse von `/sounds` mit Schlüssel, und `ingest` legt in OBS an:
+
+- die Szene `abdulive Ton` mit der Browser-Source `abdulive Sounds` darin
+  („Audio über OBS steuern“ an, beim Unsichtbarwerden nicht abschalten);
+- in **jeder** Szene ein Verweis auf `abdulive Ton`. OBS gibt Ton nur aus
+  Quellen der gerade gezeigten Szene aus; so gibt es die Quelle einmal, sie
+  läuft beim Szenenwechsel durch und ist überall zu hören.
+
+Neue Szenen bekommen den Verweis sofort, ein neuer Overlay-Schlüssel wird in
+die Quelle nachgetragen. Die Ton-Szene taucht im Pult nicht als Szene auf, die
+Quelle aber unter Ton - damit lässt sich das Soundboard stumm schalten. Wer den
+Verweis aus einer Szene löscht, bekommt ihn beim nächsten Start zurück.
+
+Die App-Symbole zeichnet `node scripts/make-icons.ts`.
+
+## Vorlesen (`/tts`)
+
+Eigene Browser-Source, 600×200, **mit Ton**. In OBS darf „Audio über OBS
+steuern" nicht ausgeschaltet sein, sonst hört der Stream nichts.
+
+Gesprochen wird im Hub mit Piper, nicht im Browser. Die eingebaute
+Sprachausgabe von OBS' Browser-Quelle sah keine deutsche Stimme und las
+amerikanisch; welche Stimmen es gibt, hängt am Rechner, der streamt. Piper
+läuft lokal im LXC, kostet nichts, und kein Zuschauertext verlässt das Haus.
+Die Seite holt sich die fertige WAV unter `/tts/audio/<id>` und spielt sie
+über ein `<audio>` ab, das sicher über OBS' Tonspur läuft.
+
+Kann der Hub nicht sprechen, springt `speechSynthesis` ein, aber nur mit
+einer deutschen Stimme. Gibt es keine, wird die Nachricht nur angezeigt,
+mit rotem Hinweis.
+
+Stimme und Sprecher: `rewards.tts.stimme` und `rewards.tts.sprecher` in der
+Konfiguration, eingerichtet mit `scripts/install-piper.sh`.
+
+Einstellungen: `?laut=1` (0 bis 1). Besser im OBS-Mixer regeln.
+`?sprache=de-DE` und `?tempo=1` gelten nur für den Notnagel im Browser.
+
+Mit `freigabe: true` wird nur vorgelesen, was auf der Übersichtsseite
+freigegeben wurde. Nach einem Neuverbinden wird **nichts nachgeholt** — eine Nachricht von vor zehn Minuten
+vorzulesen ist schlimmer, als sie zu verpassen.

apps/overlay-web/public/alerts.html

@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Einblendungen</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Einblendungen laufen nacheinander, nie uebereinander. Zwei Alarme
+ * gleichzeitig sind unlesbar, und bei einem Massengeschenk kommen zehn
+ * Stueck in derselben Sekunde. */
+.buehne {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.karte {
+  position: relative;
+  overflow: hidden;
+  min-width: 620px;
+  max-width: 1100px;
+  padding: 34px 54px 38px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0 34px;
+  border-radius: 26px;
+  background: var(--tinte-klar);
+  backdrop-filter: blur(18px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, .14);
+  box-shadow: var(--schatten), var(--glanz), 0 0 90px -20px var(--ton);
+  /* Die Kante in der Akzentfarbe ist das, was die Einblendung dem Ereignis
+   * zuordnet, bevor man ein Wort gelesen hat. */
+  border-left: 8px solid var(--ton);
+  opacity: 0;
+}
+
+.karte.an { animation: herein .75s cubic-bezier(.16, 1.2, .3, 1) both; }
+.karte.weg { animation: hinaus .45s cubic-bezier(.5, 0, .75, 0) both; }
+
+@keyframes herein {
+  from { opacity: 0; transform: translateY(46px) scale(.9); filter: blur(8px); }
+  to   { opacity: 1; transform: none; filter: none; }
+}
+@keyframes hinaus {
+  from { opacity: 1; transform: none; }
+  to   { opacity: 0; transform: translateY(-34px) scale(.96); }
+}
+
+.zeichen {
+  font-size: 92px;
+  line-height: 1;
+  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
+  animation: huepfen .9s cubic-bezier(.2, 1.6, .4, 1) .12s both;
+}
+@keyframes huepfen {
+  0%   { transform: scale(0) rotate(-25deg); }
+  70%  { transform: scale(1.18) rotate(6deg); }
+  100% { transform: scale(1) rotate(0); }
+}
+
+.kopf {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--ton);
+  margin-bottom: 4px;
+}
+.name {
+  font-size: 58px;
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -.02em;
+}
+.zusatz { font-size: 26px; color: var(--schrift-leise); margin-top: 6px; }
+.notiz {
+  margin-top: 14px;
+  font-size: 22px;
+  color: var(--schrift-leise);
+  max-width: 44ch;
+  /* Zuschauertext. Drei Zeilen, dann Schluss - sonst schiebt jemand mit
+   * einem Roman die Karte aus dem Bild. */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.notiz .emote { height: 1.4em; vertical-align: -.3em; }
+
+/* Der Balken, der unter der Karte ablaeuft: zeigt, wie lange sie noch steht. */
+.uhr {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 4px;
+  background: var(--ton);
+  transform-origin: left;
+  animation: ablaufen var(--dauer) linear both;
+  opacity: .8;
+}
+@keyframes ablaufen { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+</style>
+</head>
+<body>
+  <div class="buehne"><div id="platz"></div></div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var platz = document.getElementById('platz');
+  var dauer = Overlay.param('sekunden', 7) * 1000;
+  var warteschlange = [];
+  var laeuft = false;
+
+  /* Ein Eintrag je Art: Farbe, Zeichen, Ueberschrift und die beiden
+   * Textzeilen. Alles an einem Ort, damit eine neue Art eine Zeile ist. */
+  var ARTEN = {
+    sub:      { ton: 'var(--lila)',    zeichen: '💜', kopf: 'Neues Abo' },
+    resub:    { ton: 'var(--lila)',    zeichen: '💜', kopf: 'Abo verlängert' },
+    subgift:  { ton: 'var(--pink)',    zeichen: '🎁', kopf: 'Abo verschenkt' },
+    massgift: { ton: 'var(--pink)',    zeichen: '🎁', kopf: 'Abos verschenkt' },
+    raid:     { ton: 'var(--tuerkis)', zeichen: '🚀', kopf: 'Raid' },
+    cheer:    { ton: 'var(--gold)',    zeichen: '✨', kopf: 'Bits' },
+    follow:   { ton: 'var(--gruen)',   zeichen: '⭐', kopf: 'Neuer Follow' },
+    first:    { ton: 'var(--gruen)',   zeichen: '👋', kopf: 'Zum ersten Mal hier' },
+    clip:     { ton: 'var(--tuerkis)', zeichen: '🎬', kopf: 'Clip gespeichert' },
+    // Eigene Art, eigene Farbe, eigene Ueberschrift. Eine eingeloeste
+    // Belohnung darf nicht aussehen wie ein Abo.
+    reward:   { ton: 'var(--gold)',    zeichen: '🎟️', kopf: 'Belohnung eingelöst' },
+  };
+
+  /** Die zweite Zeile. Deutsch mit richtigen Pluralformen - "1 Monate"
+   *  liest sich wie ein Fehler, und das ist es auch. */
+  function zusatz(ev) {
+    switch (ev.type) {
+      case 'resub':
+        return ev.months ? ev.months + (ev.months === 1 ? ' Monat' : ' Monate') + ' dabei' : '';
+      case 'subgift':
+        return ev.recipient ? 'an ' + Overlay.esc(ev.recipient) : '';
+      case 'massgift':
+        return (ev.amount || 1) + (ev.amount === 1 ? ' Abo' : ' Abos') + ' an den Chat';
+      case 'raid':
+        return 'mit ' + Overlay.zahl(ev.amount || 0) +
+          ((ev.amount === 1) ? ' Zuschauer' : ' Zuschauern');
+      case 'cheer':
+        return Overlay.zahl(ev.amount || 0) + ' Bits';
+      case 'reward':
+        // Der Titel der Belohnung ist die Information, nicht die Punktzahl.
+        return Overlay.esc(ev.reward || '') +
+          (ev.amount ? ' · ' + Overlay.zahl(ev.amount) + ' Punkte' : '');
+      default:
+        return '';
+    }
+  }
+
+  function zeige(ev) {
+    var art = ARTEN[ev.type];
+    if (!art) return naechste();
+
+    var karte = document.createElement('div');
+    karte.className = 'karte an';
+    karte.style.setProperty('--ton', art.ton);
+    karte.style.setProperty('--dauer', (dauer / 1000) + 's');
+
+    var text = zusatz(ev);
+    // Die Nachricht nur dort, wo Zuschauer wirklich eine schreiben.
+    var notiz = (ev.message && (ev.type === 'resub' || ev.type === 'cheer' ||
+                                ev.type === 'sub' || ev.type === 'reward'))
+      ? '<div class="notiz">' + Overlay.emoteHtml(ev.message, []) + '</div>' : '';
+
+    karte.innerHTML =
+      '<div class="zeichen">' + art.zeichen + '</div>' +
+      '<div>' +
+        '<div class="kopf">' + art.kopf + '</div>' +
+        '<div class="name kontur">' + Overlay.esc(ev.name || 'Jemand') + '</div>' +
+        (text ? '<div class="zusatz">' + text + '</div>' : '') +
+        notiz +
+      '</div>' +
+      '<div class="uhr"></div>';
+
+    // Der Lichtstreifen liegt auf der Karte, nicht im Markup - so laeuft er
+    // genau einmal und stoert das Raster nicht.
+    karte.classList.add('streifen');
+    platz.appendChild(karte);
+
+    setTimeout(function () {
+      karte.classList.remove('an');
+      karte.classList.add('weg');
+      setTimeout(function () { karte.remove(); naechste(); }, 460);
+    }, dauer);
+  }
+
+  function naechste() {
+    var ev = warteschlange.shift();
+    if (!ev) { laeuft = false; return; }
+    laeuft = true;
+    zeige(ev);
+  }
+
+  Overlay.on('alert', function (ev) {
+    // Erstchatter sind haeufig und sollen den Bildschirm nicht sprengen -
+    // wer sie nicht will, haengt ?erstchatter=0 an die Adresse.
+    if (ev.type === 'first' && !Overlay.param('erstchatter', true)) return;
+    warteschlange.push(ev);
+    // Eine Warteschlange, die bei einem Bot-Angriff auf 200 waechst, laeuft
+    // eine halbe Stunde lang durch. Lieber die aeltesten fallen lassen.
+    if (warteschlange.length > 12) warteschlange.splice(0, warteschlange.length - 12);
+    if (!laeuft) naechste();
+  });
+
+  // Nach dem Neuverbinden NICHT die alten Alarme nachspielen: ein Abo von
+  // vor zehn Minuten noch einmal einzublenden ist schlimmer als es zu
+  // verpassen. Der Schnappschuss wird hier bewusst ignoriert.
+  Overlay.on('state', function () { });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/chat.html

@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Chat</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Von unten nach oben, wie im Chat selbst: die neueste Nachricht steht
+ * unten, wo das Auge sie erwartet. Deshalb column-reverse und nicht ein
+ * Scrollcontainer - der haette einen Balken und wuerde mitwandern. */
+#liste {
+  position: fixed;
+  inset: 0;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.zeile {
+  padding: 9px 14px 10px;
+  border-radius: 12px;
+  background: rgba(18, 14, 29, .66);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
+  font-size: 19px;
+  line-height: 1.38;
+  word-break: break-word;
+  animation: herein .42s cubic-bezier(.16, 1.1, .3, 1) both;
+  transition: opacity .6s, transform .6s;
+}
+@keyframes herein {
+  from { opacity: 0; transform: translateX(-26px) scale(.97); }
+  to   { opacity: 1; transform: none; }
+}
+.zeile.geht { opacity: 0; transform: translateX(-20px); }
+
+.name { font-weight: 700; margin-right: .45em; }
+.text .emote { height: 1.55em; vertical-align: -.4em; margin: 0 .05em; }
+
+/* Ein GIF ist kein Emote: es steht fuer sich, in eigener Zeile, und wird
+ * begrenzt. Ohne Deckel schiebt ein 500 Pixel breites GIF die ganze Spalte
+ * auf - in einer 460 Pixel schmalen Browser-Source faellt das sofort auf. */
+.text .gif {
+  display: block;
+  margin: 6px 0 2px;
+  max-width: 100%;
+  max-height: 180px;
+  width: auto;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, .35);
+}
+
+/* Twitchs eigene Abzeichen. Die Bilder loest der Hub ueber Helix auf und
+ * schickt sie mit jeder Zeile mit (#twitch/badges.ts). */
+.abzeichen {
+  height: 1.05em;
+  width: auto;
+  margin-right: .3em;
+  vertical-align: -.17em;
+}
+.abzeichen:last-of-type { margin-right: .45em; }
+
+/* Wer zum ersten Mal schreibt, wird hervorgehoben - das ist der Moment, in
+ * dem eine Begruessung am meisten bringt. Ohne den Balken an der linken Kante
+ * tragen das jetzt der Farbverlauf und die Zeile darueber allein, deshalb ist
+ * der Verlauf kraeftiger als vorher. */
+.zeile.erstmals {
+  background: linear-gradient(90deg, rgba(74, 222, 128, .24), rgba(18, 14, 29, .66) 65%);
+}
+.zeile.erstmals::before {
+  content: "zum ersten Mal hier";
+  display: block;
+  font-size: 12px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--gruen);
+  margin-bottom: 3px;
+}
+.zeile.bits { background: linear-gradient(90deg, rgba(255, 197, 61, .22), rgba(18, 14, 29, .66) 65%); }
+.zeile.bits .name { color: var(--gold) !important; }
+</style>
+</head>
+<body>
+  <div id="liste"></div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var liste = document.getElementById('liste');
+  var maximal = Overlay.param('max', 14);
+  var lebensdauer = Overlay.param('sekunden', 120) * 1000;
+  var befehleZeigen = Overlay.param('befehle', false);
+
+  /* Twitchs Farben werden auf dunklem Grund teils unlesbar - dunkelblau auf
+   * Schwarz ist nicht zu entziffern. Deshalb wird die Helligkeit angehoben
+   * statt die Farbe zu verwerfen: die Farbe ist Wiedererkennung. */
+  function lesbar(hex) {
+    if (!hex || !/^#[0-9a-f]{6}$/i.test(hex)) return '#c9a7ff';
+    var r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16),
+        b = parseInt(hex.slice(5, 7), 16);
+    var hell = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    if (hell >= 0.5) return hex;
+    var f = 0.5 / Math.max(hell, 0.08);
+    var an = function (v) { return Math.min(255, Math.round(v * f)); };
+    return '#' + [an(r), an(g), an(b)].map(function (v) {
+      return v.toString(16).padStart(2, '0');
+    }).join('');
+  }
+
+  function entferne(el) {
+    // Doppelt aufrufbar: das Zeitlimit und das Nachruecken koennen dieselbe
+    // Zeile treffen.
+    if (!el || !el.parentNode || el.classList.contains('geht')) return;
+    el.classList.add('geht');
+    setTimeout(function () { el.remove(); }, 620);
+  }
+
+  /**
+   * Zeilen, die ueber die Obergrenze hinausgehen, ausblenden.
+   *
+   * Gezaehlt wird nur, was noch nicht auf dem Weg nach draussen ist: eine
+   * ausblendende Zeile haengt noch eine halbe Sekunde im DOM. Wer stattdessen
+   * `liste.children.length` zaehlt und in einer while-Schleife entfernt,
+   * bekommt eine Endlosschleife - die Laenge sinkt ja erst nach der
+   * Animation. In OBS friert die Quelle damit beim vierzehnten Chatbeitrag
+   * ein, und im Browser sieht man einen haengenden Tab.
+   */
+  function aufraeumen() {
+    var bleibend = [];
+    var zeilen = liste.children;
+    for (var i = 0; i < zeilen.length; i++) {
+      if (!zeilen[i].classList.contains('geht')) bleibend.push(zeilen[i]);
+    }
+    // index 0 ist die neueste Zeile, also faellt das Ende zuerst.
+    for (var j = maximal; j < bleibend.length; j++) entferne(bleibend[j]);
+  }
+
+  function zeige(ev) {
+    if (!befehleZeigen && ev.text.charAt(0) === '!') return;
+
+    var el = document.createElement('div');
+    el.className = 'zeile' + (ev.first ? ' erstmals' : '') + (ev.bits > 0 ? ' bits' : '');
+    el.dataset.id = ev.id;
+    el.dataset.user = ev.userId;
+
+    var abzeichen = '';
+    var bilder = ev.badges || [];
+    for (var i = 0; i < bilder.length; i++) {
+      // Nur Twitchs eigene Bildadressen: was hier steht, laedt OBS.
+      if (!/^https:\/\/static-cdn\.jtvnw\.net\//.test(bilder[i].url)) continue;
+      abzeichen += '<img class="abzeichen" src="' + Overlay.esc(bilder[i].url) +
+        '" alt="' + Overlay.esc(bilder[i].title) + '">';
+    }
+
+    el.innerHTML =
+      abzeichen +
+      '<span class="name" style="color:' + lesbar(ev.color) + '">' +
+        Overlay.esc(ev.name) + '</span>' +
+      '<span class="text">' + Overlay.nachrichtHtml(ev.text, ev.gifs, ev.emotes) + '</span>';
+
+    // prepend, weil column-reverse die Liste ohnehin umdreht.
+    liste.insertBefore(el, liste.firstChild);
+    aufraeumen();
+
+    if (lebensdauer > 0) setTimeout(function () { entferne(el); }, lebensdauer);
+  }
+
+  Overlay.on('chat', zeige);
+
+  // Loeschen durch einen Mod muss durchschlagen: eine geloeschte Beleidigung,
+  // die noch zwei Minuten im Bild steht, steht auch in der Aufzeichnung.
+  Overlay.on('clear', function (ev) {
+    var alle = Array.prototype.slice.call(liste.children);
+    for (var i = 0; i < alle.length; i++) {
+      var el = alle[i];
+      if (!ev.messageId && !ev.userId) entferne(el);
+      else if (ev.messageId && el.dataset.id === ev.messageId) entferne(el);
+      else if (ev.userId && el.dataset.user === ev.userId) entferne(el);
+    }
+  });
+
+  // Nach dem Neuverbinden den letzten Stand zeigen, damit die Quelle nicht
+  // leer im Bild steht, bis jemand schreibt.
+  Overlay.on('state', function (ev) {
+    liste.innerHTML = '';
+    var letzte = ev.chat.slice(-maximal);
+    for (var i = 0; i < letzte.length; i++) zeige(letzte[i]);
+  });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/client.js

@@ -0,0 +1,172 @@
+/* Gemeinsamer Anschluss aller Browser-Sources an den Ereignisstrom.
+ *
+ * Bewusst kein Modul und kein Build: OBS laedt diese Datei direkt, und jede
+ * Zwischenstufe waere ein Ding, das im Stream kaputtgehen kann.
+ *
+ * Die drei Dinge, an denen solche Overlays sonst scheitern:
+ *
+ *   1. Die Quelle bleibt nach einem Neustart des Dienstes tot. -> EventSource
+ *      verbindet von allein neu, und ein Wachhund greift ein, wenn selbst das
+ *      haengt (OBS haelt tote Verbindungen erstaunlich lange fuer lebendig).
+ *   2. Die Quelle ist nach dem Neuverbinden leer. -> Der Server schickt als
+ *      erstes einen Schnappschuss, den die Seiten als `state` bekommen.
+ *   3. Chat-Text landet ungeprueft im DOM. -> `Overlay.esc` und `emoteHtml`
+ *      sind die einzigen Wege, auf denen fremder Text hier hineinkommt.
+ */
+(function () {
+  'use strict';
+
+  var params = new URLSearchParams(location.search);
+  var handlers = {};
+  var quelle = null;
+  var letzteNachricht = Date.now();
+
+  /** Ohne Nachricht in dieser Zeit gilt die Verbindung als tot. Der Server
+   *  schickt alle 15 s einen Herzschlag, also sind 45 s drei verpasste. */
+  var TOT_NACH_MS = 45000;
+
+  function verbinde() {
+    if (quelle) { try { quelle.close(); } catch (e) { /* schon zu */ } }
+    // `quelle` sagt dem Server, welche Seite zuhoert. Er zaehlt damit nur -
+    // das Pult will wissen, ob die Sound-Quelle in OBS ueberhaupt offen ist.
+    var quelleName = location.pathname.replace(/^\/+|\.html$/g, '') || 'index';
+    var url = '/events?quelle=' + encodeURIComponent(quelleName) +
+      (params.get('key') ? '&key=' + encodeURIComponent(params.get('key')) : '');
+    quelle = new EventSource(url);
+    letzteNachricht = Date.now();
+
+    quelle.onopen = function () {
+      document.body.classList.remove('offline');
+      letzteNachricht = Date.now();
+    };
+    quelle.onerror = function () {
+      document.body.classList.add('offline');
+    };
+    quelle.onmessage = function (e) {
+      letzteNachricht = Date.now();
+      document.body.classList.remove('offline');
+      var ev;
+      try { ev = JSON.parse(e.data); } catch (err) { return; }
+      if (ev.kind === 'beat') return;
+      var liste = handlers[ev.kind] || [];
+      for (var i = 0; i < liste.length; i++) {
+        try { liste[i](ev); } catch (err) { console.error('[overlay]', ev.kind, err); }
+      }
+    };
+  }
+
+  setInterval(function () {
+    if (Date.now() - letzteNachricht > TOT_NACH_MS) {
+      console.warn('[overlay] nichts mehr gehoert, verbinde neu');
+      verbinde();
+    }
+  }, 10000);
+
+  window.Overlay = {
+    /** Auf eine Ereignisart hoeren. Mehrere Hoerer je Art sind erlaubt. */
+    on: function (kind, fn) {
+      (handlers[kind] = handlers[kind] || []).push(fn);
+      return window.Overlay;
+    },
+
+    /** Einstellung aus der Adresse, z. B. ?sekunden=60. */
+    param: function (name, fallback) {
+      var v = params.get(name);
+      if (v === null || v === '') return fallback;
+      if (typeof fallback === 'number') {
+        var n = Number(v);
+        return isFinite(n) ? n : fallback;
+      }
+      if (typeof fallback === 'boolean') return v !== '0' && v !== 'false' && v !== 'nein';
+      return v;
+    },
+
+    /** Der einzige erlaubte Weg, fremden Text ins DOM zu bringen. */
+    esc: function (s) {
+      return String(s).replace(/[&<>"']/g, function (c) {
+        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+      });
+    },
+
+    /**
+     * Text mit eingesetzten Emotes. Erst maskieren, dann ersetzen - in der
+     * anderen Reihenfolge waere jeder Emote-Name ein Einfallstor.
+     *
+     * Twitch liefert nur Name und ID, nicht die Position. Ersetzt wird
+     * deshalb der Name als ganzes Wort. BTTV und 7TV sind nicht dabei; die
+     * haengen an einer zweiten API und waeren ein eigenes Stueck Arbeit.
+     */
+    emoteHtml: function (text, emotes) {
+      var html = window.Overlay.esc(text);
+      if (!emotes || !emotes.length) return html;
+      for (var i = 0; i < emotes.length; i++) {
+        var e = emotes[i];
+        if (!e.id || !e.name) continue;
+        var sicher = window.Overlay.esc(e.name).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        var src = 'https://static-cdn.jtvnw.net/emoticons/v2/' +
+          encodeURIComponent(e.id) + '/default/dark/2.0';
+        html = html.replace(new RegExp('(^|\\s)' + sicher + '(?=\\s|$)', 'g'),
+          '$1<img class="emote" src="' + src + '" alt="' + window.Overlay.esc(e.name) + '">');
+      }
+      return html;
+    },
+
+    /**
+     * Nachrichtentext mit eingesetzten GIFs und Emotes.
+     *
+     * GIFs kommen anders als Emotes mit einem Zeichenbereich: im Text steht
+     * nur ein Platzhalter wie "[Idk GIF by Respective]", und der gehoert
+     * ersetzt. Wer nur den Text anzeigt, zeigt genau diese eckige Klammer.
+     */
+    nachrichtHtml: function (text, gifs, emotes) {
+      if (!gifs || !gifs.length) return window.Overlay.emoteHtml(text, emotes);
+
+      // Nach Zeichen zerlegen, nicht nach Bytes: die Bereiche zaehlen
+      // Zeichen, und ein Emoji im Text wuerde die Rechnung sonst verschieben.
+      var chars = Array.from(text);
+      var sortiert = gifs.slice().sort(function (a, b) { return a.from - b.from; });
+      var html = '';
+      var pos = 0;
+
+      for (var i = 0; i < sortiert.length; i++) {
+        var g = sortiert[i];
+        if (typeof g.url !== 'string' || g.url.slice(0, 8) !== 'https://') continue;
+        if (g.from > pos) {
+          html += window.Overlay.emoteHtml(chars.slice(pos, g.from).join(''), emotes);
+        }
+        html += '<img class="gif" src="' + window.Overlay.esc(g.url) + '" alt="GIF"' +
+          ' onerror="this.replaceWith(document.createTextNode(this.alt))">';
+        pos = Math.max(pos, g.to + 1);
+      }
+      if (pos < chars.length) {
+        html += window.Overlay.emoteHtml(chars.slice(pos).join(''), emotes);
+      }
+      return html;
+    },
+
+    /** "2 Std 14 Min" aus einem ISO-Zeitpunkt. */
+    laufzeit: function (seit) {
+      var ms = Date.now() - Date.parse(seit);
+      if (!isFinite(ms) || ms < 0) return '';
+      var m = Math.floor(ms / 60000);
+      var h = Math.floor(m / 60);
+      return h > 0 ? h + ':' + String(m % 60).padStart(2, '0') + ' Std'
+                   : m + ' Min';
+    },
+
+    /** Zahl mit Tausenderpunkt, wie man sie in Deutschland liest. */
+    zahl: function (n) {
+      return Number(n || 0).toLocaleString('de-DE');
+    },
+  };
+
+  // Der Punkt unten rechts, der nur bei Verlust erscheint.
+  document.addEventListener('DOMContentLoaded', function () {
+    if (params.get('probe')) document.body.classList.add('probe');
+    var d = document.createElement('div');
+    d.className = 'getrennt';
+    d.textContent = 'keine Verbindung';
+    document.body.appendChild(d);
+    verbinde();
+  });
+})();

apps/overlay-web/public/effects.html

@@ -0,0 +1,194 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Effekte</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Ein Canvas fuer alles. Hunderte DOM-Knoten, die sich pro Bild bewegen,
+ * kosten in OBS spuerbar Leistung - und Leistung, die hier draufgeht, fehlt
+ * beim Encoder. */
+canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
+
+/* Der kurze Lichtschein bei einer Chat-Spitze. Liegt hinter den Teilchen und
+ * ist das, was den Effekt "teuer" wirken laesst. */
+#schein {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  background: radial-gradient(ellipse at 50% 60%,
+    rgba(169, 112, 255, .32), transparent 62%);
+}
+#schein.an { animation: blitz 1.6s ease-out both; }
+@keyframes blitz {
+  0%   { opacity: 0; }
+  12%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+</style>
+</head>
+<body>
+  <div id="schein"></div>
+  <canvas id="bild"></canvas>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var canvas = document.getElementById('bild');
+  var ctx = canvas.getContext('2d');
+  var schein = document.getElementById('schein');
+  var teilchen = [];
+  var bilder = {};          // Emote-ID -> Image
+  var letzteEmotes = [];    // was gerade im Chat benutzt wird
+  var laeuft = false;
+
+  /** Obergrenze. Ein Raid mit 200 Leuten darf den Encoder nicht umbringen. */
+  var MAX = Overlay.param('max', 260);
+
+  function passeAn() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  passeAn();
+  window.addEventListener('resize', passeAn);
+
+  function bild(id) {
+    if (bilder[id]) return bilder[id];
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = 'https://static-cdn.jtvnw.net/emoticons/v2/' +
+      encodeURIComponent(id) + '/default/dark/3.0';
+    bilder[id] = img;
+    return img;
+  }
+
+  /** Emote-Regen: faellt von oben, dreht sich leicht, verblasst unten. */
+  function regen(anzahl) {
+    var quellen = letzteEmotes.slice(-12);
+    for (var i = 0; i < anzahl && teilchen.length < MAX; i++) {
+      var e = quellen.length ? quellen[(Math.random() * quellen.length) | 0] : null;
+      teilchen.push({
+        art: e ? 'emote' : 'punkt',
+        img: e ? bild(e) : null,
+        farbe: farbe(),
+        x: Math.random() * canvas.width,
+        y: -60 - Math.random() * canvas.height * 0.5,
+        vx: (Math.random() - 0.5) * 0.8,
+        vy: 2.2 + Math.random() * 3.4,
+        g: 0.02,
+        dreh: (Math.random() - 0.5) * 0.06,
+        winkel: (Math.random() - 0.5) * 0.7,
+        groesse: 34 + Math.random() * 30,
+        leben: 1,
+        zerfall: 0.0016 + Math.random() * 0.0016,
+      });
+    }
+    starte();
+  }
+
+  var PALETTE = ['#a970ff', '#4fd1c5', '#ff4fa3', '#ffc53d', '#4ade80'];
+  function farbe() { return PALETTE[(Math.random() * PALETTE.length) | 0]; }
+
+  /** Konfetti: schiesst aus der unteren Mitte nach oben und faellt zurueck. */
+  function konfetti(anzahl) {
+    for (var i = 0; i < anzahl && teilchen.length < MAX; i++) {
+      var winkel = -Math.PI / 2 + (Math.random() - 0.5) * 1.5;
+      var tempo = 9 + Math.random() * 11;
+      teilchen.push({
+        art: 'schnipsel',
+        farbe: farbe(),
+        x: canvas.width / 2 + (Math.random() - 0.5) * 340,
+        y: canvas.height + 14,
+        vx: Math.cos(winkel) * tempo,
+        vy: Math.sin(winkel) * tempo,
+        g: 0.28,
+        dreh: (Math.random() - 0.5) * 0.4,
+        winkel: Math.random() * Math.PI,
+        groesse: 9 + Math.random() * 9,
+        leben: 1,
+        zerfall: 0.0055 + Math.random() * 0.004,
+      });
+    }
+    starte();
+  }
+
+  function starte() {
+    if (laeuft) return;
+    laeuft = true;
+    requestAnimationFrame(schritt);
+  }
+
+  function schritt() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (var i = teilchen.length - 1; i >= 0; i--) {
+      var t = teilchen[i];
+      t.vy += t.g;
+      t.x += t.vx;
+      t.y += t.vy;
+      t.winkel += t.dreh;
+      t.leben -= t.zerfall;
+
+      if (t.leben <= 0 || t.y > canvas.height + 120) { teilchen.splice(i, 1); continue; }
+
+      ctx.save();
+      ctx.globalAlpha = Math.max(0, Math.min(1, t.leben));
+      ctx.translate(t.x, t.y);
+      ctx.rotate(t.winkel);
+
+      if (t.art === 'emote' && t.img && t.img.complete && t.img.naturalWidth) {
+        ctx.drawImage(t.img, -t.groesse / 2, -t.groesse / 2, t.groesse, t.groesse);
+      } else if (t.art === 'schnipsel') {
+        ctx.fillStyle = t.farbe;
+        // Schmales Rechteck statt Quadrat: sieht in Drehung nach Papier aus.
+        ctx.fillRect(-t.groesse / 2, -t.groesse / 4, t.groesse, t.groesse / 2);
+      } else {
+        ctx.fillStyle = t.farbe;
+        ctx.beginPath();
+        ctx.arc(0, 0, t.groesse / 4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+
+    if (teilchen.length) requestAnimationFrame(schritt);
+    else { laeuft = false; ctx.clearRect(0, 0, canvas.width, canvas.height); }
+  }
+
+  // ---- Ausloeser
+
+  Overlay.on('chat', function (ev) {
+    for (var i = 0; i < ev.emotes.length; i++) {
+      if (letzteEmotes.indexOf(ev.emotes[i].id) === -1) letzteEmotes.push(ev.emotes[i].id);
+    }
+    if (letzteEmotes.length > 24) letzteEmotes.splice(0, letzteEmotes.length - 24);
+  });
+
+  Overlay.on('hype', function (ev) {
+    schein.classList.remove('an');
+    void schein.offsetWidth;
+    schein.classList.add('an');
+    // Je hoeher die Punktzahl, desto mehr - aber gedeckelt, sonst steht bei
+    // einem echten Ausbruch das Bild voll und man sieht das Spiel nicht mehr.
+    regen(Math.min(110, 34 + Math.round((ev.score || 1) * 9)));
+  });
+
+  // Konfetti als eigenes Ereignis: welche Belohnung Konfetti ausloest,
+  // entscheidet der Hub - diese Seite muss davon nichts wissen.
+  Overlay.on('konfetti', function (ev) {
+    konfetti(Math.round(90 * (ev.staerke || 1)));
+  });
+
+  Overlay.on('alert', function (ev) {
+    if (ev.type === 'raid') konfetti(Math.min(180, 70 + (ev.amount || 0) * 2));
+    else if (ev.type === 'massgift') konfetti(Math.min(180, 60 + (ev.amount || 0) * 10));
+    else if (ev.type === 'sub' || ev.type === 'resub' || ev.type === 'subgift') konfetti(80);
+    else if (ev.type === 'cheer' && (ev.amount || 0) >= 100) konfetti(60);
+  });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/kamera.html

@@ -0,0 +1,227 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Kamerarahmen</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Rahmen um die Facecam, dazu die Werte der alten Statusleiste auf einer
+ * Platte darunter.
+ *
+ * Die Kamera liegt bündig oben links, 480x270 (docs/obs-layout.md). Genau
+ * dieser Bereich wird für die Shorts ausgeschnitten, und das Gameplay ab
+ * x=515. Deshalb liegt hier NICHTS über der Kamera: der Rahmen nutzt nur den
+ * Streifen rechts (480 bis 515) und den freien Platz darunter. Wer den
+ * Rahmen nach innen zieht, hat ihn in jedem Short.
+ *
+ * Oben und links gibt es keinen Rahmen - dort ist der Bildrand.
+ *
+ * In OBS: Browser-Quelle 520x380, Position 0,0, über der Kamera. */
+:root {
+  --cam-w: 480px;
+  --cam-h: 270px;
+  --dicke: 7px;
+  --abstand: 4px;      /* Luft zwischen Kamera und Rahmen */
+  --platte-h: 74px;
+  --verlauf: linear-gradient(135deg, var(--lila), var(--pink), var(--tuerkis), var(--lila));
+}
+
+/* Der Rahmen: ein L um die rechte und untere Kante, außen abgerundet.
+ * Gezeichnet als Fläche mit ausgespartem Inneren, damit der Farbverlauf
+ * ohne Stoß um die Ecke läuft. */
+#rahmen {
+  position: fixed;
+  left: 0; top: 0;
+  width: calc(var(--cam-w) + var(--abstand) + var(--dicke));
+  height: calc(var(--cam-h) + var(--abstand) + var(--dicke));
+  border-bottom-right-radius: 22px;
+  background: var(--verlauf);
+  background-size: 300% 300%;
+  animation: wandern 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) top left / calc(var(--cam-w) + var(--abstand)) calc(var(--cam-h) + var(--abstand)) no-repeat,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  filter: drop-shadow(0 0 10px rgba(169, 112, 255, .45));
+  transition: filter .4s;
+}
+@keyframes wandern { to { background-position: 300% 300%; } }
+
+/* Platte unter der Kamera. Hängt am Rahmen, damit beides als ein Stück
+ * gelesen wird und nicht als zwei Overlays, die zufällig nah beieinander
+ * liegen. */
+#platte {
+  position: fixed;
+  left: 0;
+  top: calc(var(--cam-h) + var(--abstand) + var(--dicke));
+  width: calc(var(--cam-w) + var(--abstand) + var(--dicke));
+  height: var(--platte-h);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 16px;
+  padding: 0 18px 0 16px;
+  background: var(--tinte-klar);
+  backdrop-filter: blur(14px) saturate(140%);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 16px;
+  box-shadow: var(--schatten), var(--glanz);
+}
+
+.links { min-width: 0; }
+.zeile1 { display: flex; align-items: center; gap: 10px; }
+.punkt {
+  width: 11px; height: 11px; flex: none;
+  border-radius: 50%;
+  background: #555;
+}
+body.live .punkt { background: var(--rot); animation: klopfen 2s ease-out infinite; }
+@keyframes klopfen {
+  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
+  70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+.kanal { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
+#kategorie {
+  font-size: 15px; color: var(--schrift-leise); margin-top: 3px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.werte { display: flex; gap: 18px; }
+.wert { text-align: right; }
+.wert .zahl {
+  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
+  font: 700 22px/1.1 var(--font-zahl);
+  font-variant-numeric: tabular-nums;
+}
+.wert svg { width: 17px; height: 17px; opacity: .8; }
+.wert .beschriftung {
+  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+.zahl.neu { animation: aufleuchten .8s ease-out; }
+@keyframes aufleuchten {
+  0%   { color: var(--tuerkis); transform: translateY(-3px); }
+  100% { color: inherit; transform: none; }
+}
+
+/* Nicht live: der Rahmen wird ruhig und grau. So sieht man in der
+ * Vorschau sofort, ob der Hub den Stream erkannt hat. */
+body:not(.live) #rahmen {
+  background: linear-gradient(135deg, #3a3550, #57507a);
+  animation: none;
+  filter: none;
+}
+
+/* Aufleuchten bei Abo, Raid, Bits: der Rahmen glüht kurz in der Farbe des
+ * Ereignisses. Die große Einblendung macht alerts.html - das hier ist nur
+ * das Echo an der Kamera, damit der Blick dorthin geht, wo Abdu reagiert. */
+body.puls #rahmen { animation: wandern 1.2s linear infinite; }
+body.puls-lila   #rahmen { filter: drop-shadow(0 0 22px var(--lila)); }
+body.puls-pink   #rahmen { filter: drop-shadow(0 0 22px var(--pink)); }
+body.puls-gold   #rahmen { filter: drop-shadow(0 0 22px var(--gold)); }
+body.puls-tuerkis #rahmen { filter: drop-shadow(0 0 22px var(--tuerkis)); }
+
+/* Nur zum Ansehen im Browser (?probe=1): ein Platzhalter, wo die Kamera
+ * sitzt. In OBS liegt dort das echte Bild. */
+#kamera-probe {
+  display: none;
+  position: fixed; left: 0; top: 0;
+  width: var(--cam-w); height: var(--cam-h);
+  background:
+    radial-gradient(40% 55% at 50% 60%, #4a3b6b, transparent 70%),
+    linear-gradient(160deg, #2b2440, #17131f);
+  color: var(--schrift-leise);
+  font: 500 14px/1 var(--font-zahl);
+  display: none; place-items: center;
+}
+body.probe #kamera-probe { display: grid; }
+</style>
+</head>
+<body>
+  <div id="kamera-probe">Facecam 480 × 270</div>
+  <div id="rahmen"></div>
+  <div id="platte">
+    <div class="links">
+      <div class="zeile1">
+        <span class="punkt"></span>
+        <span class="kanal kontur" id="kanal">abdulive_</span>
+      </div>
+      <div id="kategorie">offline</div>
+    </div>
+    <div class="werte">
+      <div class="wert">
+        <span class="zahl" id="zuschauer">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
+               stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>
+          </svg><span>-</span>
+        </span>
+        <span class="beschriftung">Zuschauer</span>
+      </div>
+      <div class="wert">
+        <span class="zahl" id="laufzeit"><span>-</span></span>
+        <span class="beschriftung">live seit</span>
+      </div>
+    </div>
+  </div>
+  <div class="getrennt">keine Verbindung</div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  if (Overlay.param('probe', false)) document.body.classList.add('probe');
+
+  var kategorie = document.getElementById('kategorie');
+  var zuschauer = document.getElementById('zuschauer');
+  var laufzeit = document.getElementById('laufzeit');
+  document.getElementById('kanal').textContent = Overlay.param('kanal', 'abdulive_');
+  var seit = null;
+
+  function setze(el, wert) {
+    var ziel = el.lastElementChild;
+    if (ziel.textContent === wert) return;
+    ziel.textContent = wert;
+    el.classList.remove('neu');
+    void el.offsetWidth;
+    el.classList.add('neu');
+  }
+
+  function stand(ev) {
+    document.body.classList.toggle('live', !!ev.live);
+    // Die Kategorie statt des Titels: der Titel ist meist zu lang für 490 px
+    // und steht ohnehin auf der Twitch-Seite direkt unter dem Bild.
+    kategorie.textContent = ev.live ? (ev.category || 'live') : 'offline';
+    setze(zuschauer, ev.live ? Overlay.zahl(ev.viewers) : '-');
+    seit = ev.live ? ev.startedAt : null;
+    tick();
+  }
+  function tick() { laufzeit.lastElementChild.textContent = seit ? Overlay.laufzeit(seit) : '-'; }
+  setInterval(tick, 10000);
+
+  var FARBE = {
+    sub: 'lila', resub: 'lila', subgift: 'pink', massgift: 'pink',
+    raid: 'tuerkis', cheer: 'gold', follow: 'tuerkis', reward: 'gold',
+  };
+  var pulsTimer = null;
+  function puls(farbe) {
+    var b = document.body;
+    b.className = b.className.replace(/\bpuls(-\w+)?\b/g, '').trim();
+    void b.offsetWidth;
+    b.classList.add('puls', 'puls-' + farbe);
+    clearTimeout(pulsTimer);
+    pulsTimer = setTimeout(function () {
+      b.className = b.className.replace(/\bpuls(-\w+)?\b/g, '').trim();
+    }, 4000);
+  }
+
+  Overlay.on('stream', stand);
+  Overlay.on('state', function (ev) { stand(ev.stream); });
+  Overlay.on('alert', function (ev) { puls(FARBE[ev.type] || 'lila'); });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/liegestuetze.html

@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Liegestütze</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Liegestütze aus Kanalpunkten: groß die offenen, darunter die in diesem
+ * Stream schon gemachten.
+ *
+ * Eine Einlösung zählt hoch und zeigt kurz, wer es war. Wenn Abdu auf der
+ * Übersichtsseite herunterzählt, blinkt die Zahl grün und "gemacht" wächst -
+ * ohne Namen, damit das nicht wie eine Einlösung aussieht.
+ *
+ * In OBS: Browser-Quelle 420x200. Einstellungen in der Adresse:
+ *   ?verstecken=1   ausblenden, solange nichts offen und nichts gemacht ist
+ *   ?gemacht=0      die Zeile "gemacht" weglassen
+ *   ?titel=...      andere Beschriftung als "Liegestütze" */
+#karte {
+  position: absolute;
+  left: 12px; bottom: 12px;
+  display: flex; align-items: center; gap: 18px;
+  padding: 16px 26px 16px 18px;
+  overflow: hidden;
+  transition: opacity .5s, transform .5s, box-shadow .4s, border-color .4s;
+}
+#karte.weg { opacity: 0; transform: translateY(14px); }
+
+.symbol {
+  width: 58px; height: 58px; flex: none;
+  display: grid; place-items: center;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--lila), var(--pink));
+  box-shadow: 0 6px 18px rgba(169, 112, 255, .45);
+}
+.symbol svg { width: 36px; height: 36px; }
+
+.text { min-width: 0; }
+#titel {
+  font: 600 13px/1 var(--font-zahl);
+  letter-spacing: .16em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+#zahl {
+  display: block;
+  font: 800 54px/1 var(--font);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -.02em;
+  margin-top: 6px;
+}
+#zahl.erledigt { font-size: 30px; color: var(--gruen); padding: 8px 0 6px; }
+
+#gemacht {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 7px;
+  font: 600 16px/1 var(--font-zahl);
+  font-variant-numeric: tabular-nums;
+  color: var(--schrift-leise);
+}
+#gemacht b { color: var(--gruen); font-weight: 800; }
+#gemacht svg { width: 15px; height: 15px; color: var(--gruen); }
+#gemacht.aus { display: none; }
+#gemacht.mehr b { animation: gemacht-mehr .9s ease-out; display: inline-block; }
+@keyframes gemacht-mehr {
+  0%   { transform: scale(1.35); }
+  100% { transform: none; }
+}
+
+/* Einlösung: Karte glüht gold, Zahl springt. */
+#karte.mehr { border-color: var(--gold); box-shadow: var(--schatten), 0 0 28px rgba(255, 197, 61, .55); }
+#zahl.springen { animation: springen .6s cubic-bezier(.3, 1.6, .5, 1); }
+@keyframes springen {
+  0%   { transform: scale(1); }
+  40%  { transform: scale(1.22); color: var(--gold); }
+  100% { transform: scale(1); }
+}
+
+/* Korrektur nach unten: kurz grün, das heißt "gemacht". */
+#zahl.weniger { animation: weniger .9s ease-out; }
+@keyframes weniger {
+  0%   { color: var(--gruen); transform: translateY(-4px); }
+  100% { color: inherit; transform: none; }
+}
+
+/* "+5 von Name", steigt über der Karte auf. */
+#plus {
+  position: absolute;
+  left: 12px; bottom: 140px;
+  max-width: 396px;
+  padding: 8px 14px;
+  font: 700 20px/1.1 var(--font);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  opacity: 0;
+}
+#plus b { color: var(--gold); margin-right: 6px; }
+#plus.zeigen { animation: aufsteigen 3.6s ease-out both; }
+@keyframes aufsteigen {
+  0%   { opacity: 0; transform: translateY(16px); }
+  12%  { opacity: 1; transform: none; }
+  80%  { opacity: 1; transform: none; }
+  100% { opacity: 0; transform: translateY(-10px); }
+}
+</style>
+</head>
+<body>
+  <div id="plus" class="glas"></div>
+  <div id="karte" class="glas">
+    <div class="symbol" aria-hidden="true">
+      <!-- Figur im Liegestütz: Kopf, Rücken, Arme, Boden. -->
+      <svg viewBox="0 0 48 48" fill="none" stroke="#fff" stroke-width="3.4"
+           stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="17" r="4" fill="#fff" stroke="none"/>
+        <path d="M15 21 L41 29"/>
+        <path d="M17 22 L15 33"/>
+        <path d="M41 29 L42 33"/>
+        <path d="M6 37 H44" stroke-width="2.4" opacity=".7"/>
+      </svg>
+    </div>
+    <div class="text">
+      <div id="titel" class="kontur">Liegestütze</div>
+      <span id="zahl" class="kontur">0</span>
+      <div id="gemacht" class="kontur">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M5 12.5l4.5 4.5L19 7.5"/>
+        </svg>
+        <span><b>0</b> gemacht</span>
+      </div>
+    </div>
+  </div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var karte = document.getElementById('karte');
+  var zahl = document.getElementById('zahl');
+  var plus = document.getElementById('plus');
+  var gemacht = document.getElementById('gemacht');
+  var gemachtZahl = gemacht.querySelector('b');
+  if (!Overlay.param('gemacht', true)) gemacht.classList.add('aus');
+  var verstecken = Overlay.param('verstecken', false);
+  document.getElementById('titel').textContent = Overlay.param('titel', 'Liegestütze');
+
+  var angezeigt = null;   // was gerade im Bild steht
+  var gemachtBisher = null;
+  var lauf = null;        // laufendes Hochzählen
+  var glimmen = null;
+
+  function schreibe(n) {
+    if (n === 0 && !verstecken) {
+      zahl.textContent = 'erledigt';
+      zahl.classList.add('erledigt');
+    } else {
+      zahl.textContent = Overlay.zahl(n);
+      zahl.classList.remove('erledigt');
+    }
+  }
+
+  function sichtbarkeit() {
+    karte.classList.toggle('weg', verstecken && angezeigt === 0 && !gemachtBisher);
+  }
+
+  function zeigeGemacht(g) {
+    if (typeof g !== 'number') return;
+    var alt = gemachtBisher;
+    gemachtBisher = g;
+    gemachtZahl.textContent = Overlay.zahl(g);
+    if (alt !== null && g > alt) nochmal(gemacht, 'mehr');
+  }
+
+  function nochmal(el, klasse) {
+    el.classList.remove(klasse);
+    void el.offsetWidth;
+    el.classList.add(klasse);
+  }
+
+  /** Zählt sichtbar von der alten zur neuen Zahl hoch. Bei großen Sprüngen
+   *  nicht jede einzelne Zahl, sonst dauert ein Setzen auf 500 ewig. */
+  function hochzaehlen(von, bis) {
+    clearInterval(lauf);
+    var schritte = Math.min(bis - von, 20);
+    var i = 0;
+    lauf = setInterval(function () {
+      i++;
+      schreibe(i >= schritte ? bis : Math.round(von + (bis - von) * i / schritte));
+      if (i >= schritte) clearInterval(lauf);
+    }, 45);
+  }
+
+  function stand(n, einloesung) {
+    if (typeof n !== 'number') return;
+    var alt = angezeigt;
+    angezeigt = n;
+
+    // Erster Stand nach dem Verbinden: einfach hinschreiben, ohne Effekt.
+    if (alt === null || alt === n) { clearInterval(lauf); schreibe(n); return; }
+
+    if (n > alt) {
+      hochzaehlen(alt, n);
+      nochmal(zahl, 'springen');
+      karte.classList.add('mehr');
+      clearTimeout(glimmen);
+      glimmen = setTimeout(function () { karte.classList.remove('mehr'); }, 2500);
+    } else {
+      clearInterval(lauf);
+      schreibe(n);
+      nochmal(zahl, 'weniger');
+    }
+
+    if (einloesung && einloesung.name) {
+      plus.innerHTML = '<b>+' + Overlay.esc(einloesung.dazu) + '</b>' +
+        'von ' + Overlay.esc(einloesung.name);
+      nochmal(plus, 'zeigen');
+    }
+  }
+
+  Overlay.on('state', function (ev) {
+    if (!ev.liegestuetze) return;
+    stand(ev.liegestuetze.offen);
+    zeigeGemacht(ev.liegestuetze.gemacht);
+    sichtbarkeit();
+  });
+  Overlay.on('liegestuetze', function (ev) {
+    stand(ev.offen, ev.dazu ? { dazu: ev.dazu, name: ev.name } : null);
+    zeigeGemacht(ev.gemacht);
+    sichtbarkeit();
+  });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/manifest.webmanifest

@@ -0,0 +1,22 @@
+{
+  "name": "abdulive Pult",
+  "short_name": "Pult",
+  "description": "Soundboard, Szenen, Chat, Liegestütze und Vorlesen für den Stream von abdulive_.",
+  "lang": "de",
+  "id": "/pult",
+  "start_url": "/pult",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0d0b14",
+  "theme_color": "#0d0b14",
+  "icons": [
+    { "src": "/icons/pult-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/pult-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/pult-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ],
+  "shortcuts": [
+    { "name": "Szenen", "url": "/pult#szenen", "icons": [{ "src": "/icons/pult-192.png", "sizes": "192x192" }] },
+    { "name": "Chat", "url": "/pult#chat", "icons": [{ "src": "/icons/pult-192.png", "sizes": "192x192" }] }
+  ]
+}

apps/overlay-web/public/pult.css

@@ -0,0 +1,493 @@
+/* Das Pult. Fuers Handy gebaut, nicht fuer OBS: anders als die
+ * Browser-Sources hat es einen deckenden Hintergrund und will angefasst
+ * werden. Farben wie in theme.css, damit Pult und Overlay zusammengehoeren.
+ *
+ * Grundregel fuer alles, was man im Stream mit einem Daumen trifft: eine
+ * Taste ist mindestens 48 px hoch, und was passiert ist, sieht man an der
+ * Taste selbst - nicht nur in einer Meldung am Rand. */
+
+:root {
+  color-scheme: dark;
+  --grund: #0d0b14;
+  --flaeche: #171327;
+  --flaeche-2: #1f1a33;
+  --linie: #2c2642;
+  --linie-stark: #3a3352;
+  --schrift: #ece9f6;
+  --leise: #9b94b3;
+
+  --lila: #a970ff;
+  --lila-tief: #6441a5;
+  --tuerkis: #4fd1c5;
+  --pink: #ff4fa3;
+  --gold: #ffc53d;
+  --gruen: #4ade80;
+  --rot: #ef4444;
+  --blau: #60a5fa;
+  --grau: #8b84a3;
+
+  --rund: 16px;
+  --kopf-h: 56px;
+  --reiter-h: 64px;
+  --oben: env(safe-area-inset-top, 0px);
+  --unten: env(safe-area-inset-bottom, 0px);
+
+  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  --font-zahl: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html { background: var(--grund); }
+body {
+  margin: 0;
+  min-height: 100vh;
+  min-height: 100dvh;
+  background: var(--grund);
+  color: var(--schrift);
+  font: 16px/1.45 var(--font);
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  overscroll-behavior-y: contain;
+}
+
+a { color: var(--lila); }
+code {
+  font: .85em "Cascadia Mono", ui-monospace, Consolas, monospace;
+  background: var(--flaeche-2); padding: .1em .35em; border-radius: 6px;
+}
+svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
+      stroke-linecap: round; stroke-linejoin: round; flex: none; }
+[hidden] { display: none !important; }
+
+/* ------------------------------------------------------------ Kopf */
+
+.kopf {
+  position: sticky; top: 0; z-index: 20;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  height: calc(var(--kopf-h) + var(--oben));
+  padding: var(--oben) 16px 0;
+  background: rgba(13, 11, 20, .88);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom: 1px solid var(--linie);
+}
+.kanal { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.marke { font: 600 17px/1 var(--font-zahl); letter-spacing: -.01em; }
+.marke b { color: var(--lila); font-weight: 700; }
+
+.live {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; border-radius: 999px;
+  font: 600 13px/1.2 var(--font-zahl); font-variant-numeric: tabular-nums;
+  background: rgba(239, 68, 68, .16); color: #ffb3b3;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
+          animation: puls 1.6s ease-in-out infinite; flex: none; }
+.live.aus { background: var(--flaeche-2); color: var(--leise); }
+.live.aus i { background: var(--grau); animation: none; }
+
+.kopf-rechts { display: flex; align-items: center; gap: 8px; }
+.rund {
+  display: grid; place-items: center; width: 40px; height: 40px;
+  border-radius: 50%; border: 1px solid var(--linie); background: transparent;
+  color: var(--leise); cursor: pointer;
+}
+.rund[aria-pressed="true"] { color: var(--gold); border-color: rgba(255, 197, 61, .45);
+                             background: rgba(255, 197, 61, .1); }
+.netz { display: grid; place-items: center; width: 24px; height: 40px; }
+.netz i { width: 10px; height: 10px; border-radius: 50%; background: var(--rot);
+          box-shadow: 0 0 0 4px rgba(239, 68, 68, .15); }
+.netz.an i { background: var(--gruen); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14); }
+
+.banner {
+  position: sticky; top: calc(var(--kopf-h) + var(--oben)); z-index: 19;
+  padding: 10px 16px; font-size: 14px;
+  background: #3b1d1d; color: #ffd0d0; border-bottom: 1px solid #5c2a2a;
+}
+
+@keyframes puls { 50% { opacity: .35; } }
+
+/* ------------------------------------------------------------ Inhalt */
+
+main {
+  padding: 16px 16px calc(var(--reiter-h) + var(--unten) + 88px);
+  max-width: 980px; margin: 0 auto;
+}
+.tab { display: none; }
+.tab.an { display: block; animation: rein .18s ease-out; }
+@keyframes rein { from { opacity: 0; transform: translateY(4px); } }
+
+.leiste { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.luecke { flex: 1; }
+
+.abschnitt {
+  display: flex; align-items: center; gap: 8px;
+  margin: 26px 0 10px; font: 600 13px/1 var(--font); letter-spacing: .08em;
+  text-transform: uppercase; color: var(--leise);
+}
+.abschnitt:first-child { margin-top: 4px; }
+.klein { font-size: 13px; color: var(--leise); margin: 10px 0; }
+.klein.mitte { text-align: center; }
+
+.karte {
+  background: var(--flaeche); border: 1px solid var(--linie);
+  border-radius: var(--rund); padding: 16px; margin-bottom: 16px;
+}
+.karte .abschnitt { margin-top: 0; }
+
+.hinweis {
+  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
+  background: var(--flaeche); border: 1px solid var(--linie);
+}
+.hinweis.warn { background: rgba(255, 197, 61, .08); border-color: rgba(255, 197, 61, .4);
+                color: #ffe2a0; }
+.hinweis.warn a { color: var(--gold); }
+
+/* ------------------------------------------------------------ Knoepfe */
+
+.knopf {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 44px; padding: 0 16px;
+  font: 600 15px/1 var(--font); color: var(--schrift);
+  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
+  border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none;
+  text-decoration: none; touch-action: manipulation;
+  transition: transform .08s, background .15s, border-color .15s;
+}
+.knopf:active { transform: scale(.96); }
+.knopf:disabled { opacity: .4; cursor: not-allowed; transform: none; }
+.knopf.primaer { background: var(--lila-tief); border-color: var(--lila); color: #fff; }
+.knopf.warnung { color: #ffb3b3; border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .1); }
+.knopf.gross { min-height: 52px; padding: 0 22px; font-size: 16px; }
+.knopf.breit { width: 100%; }
+.knopf[aria-pressed="true"] { background: var(--schrift); color: var(--grund); border-color: var(--schrift); }
+.knopf.wartet { opacity: .7; pointer-events: none; }
+.knopf:focus-visible, .kachel:focus-visible, .szene:focus-visible, .rund:focus-visible,
+.reiter button:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
+
+/* ------------------------------------------------------------ Soundraster */
+
+.raster {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  gap: 10px;
+}
+@media (min-width: 640px) { .raster { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } }
+
+.kachel {
+  --c: var(--lila);
+  position: relative;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  aspect-ratio: 1; padding: 10px 8px; min-width: 0;
+  border-radius: 18px; cursor: pointer; overflow: hidden;
+  color: #fff; font: 600 14px/1.2 var(--font); text-align: center;
+  background:
+    radial-gradient(120% 90% at 30% 0%, color-mix(in oklab, var(--c) 42%, transparent), transparent 70%),
+    color-mix(in oklab, var(--c) 14%, var(--flaeche));
+  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
+  touch-action: manipulation; user-select: none; -webkit-user-select: none;
+  transition: transform .08s ease-out;
+}
+.kachel:active { transform: scale(.93); }
+.kachel .emoji { font-size: 34px; line-height: 1; }
+.kachel .name {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; overflow-wrap: anywhere; max-width: 100%;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+}
+.kachel.ohne-emoji .name { font-size: 16px; -webkit-line-clamp: 3; }
+.kachel::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
+  background: color-mix(in oklab, var(--c) 70%, #fff); opacity: 0;
+}
+.kachel.knall::after { animation: knall .6s ease-out; }
+@keyframes knall { 0% { opacity: .55; } 100% { opacity: 0; } }
+.kachel.knall { animation: wippen .35s ease-out; }
+@keyframes wippen { 40% { transform: scale(1.04); } }
+
+.raster.bearbeiten .kachel { animation: zittern .5s ease-in-out infinite alternate; }
+.raster.bearbeiten .kachel:nth-child(2n) { animation-delay: -.25s; }
+@keyframes zittern { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
+.raster.bearbeiten .kachel::before {
+  content: "✎"; position: absolute; top: 6px; right: 8px; font-size: 14px; opacity: .85;
+}
+
+.kachel[data-farbe="lila"], .farbe[data-farbe="lila"] { --c: var(--lila); }
+.kachel[data-farbe="tuerkis"], .farbe[data-farbe="tuerkis"] { --c: var(--tuerkis); }
+.kachel[data-farbe="pink"], .farbe[data-farbe="pink"] { --c: var(--pink); }
+.kachel[data-farbe="gold"], .farbe[data-farbe="gold"] { --c: var(--gold); }
+.kachel[data-farbe="gruen"], .farbe[data-farbe="gruen"] { --c: var(--gruen); }
+.kachel[data-farbe="rot"], .farbe[data-farbe="rot"] { --c: var(--rot); }
+.kachel[data-farbe="blau"], .farbe[data-farbe="blau"] { --c: var(--blau); }
+.kachel[data-farbe="grau"], .farbe[data-farbe="grau"] { --c: var(--grau); }
+
+.kachel.laedt { opacity: .55; pointer-events: none; }
+.kachel.laedt .name::after { content: " …"; }
+
+.leer { text-align: center; padding: 32px 12px; color: var(--leise); }
+.leer h2 { color: var(--schrift); font-size: 20px; margin: 18px 0 6px; }
+.leer p { max-width: 34ch; margin: 0 auto 20px; }
+.leer-bild { display: inline-grid; grid-template-columns: repeat(3, 34px); gap: 6px; }
+.leer-bild span { aspect-ratio: 1; border-radius: 9px; border: 1.5px dashed var(--linie-stark); }
+.leer-bild span:nth-child(2) { border-color: var(--lila); background: rgba(169, 112, 255, .12); }
+.leer-bild span:nth-child(6) { border-color: var(--tuerkis); background: rgba(79, 209, 197, .1); }
+
+/* ------------------------------------------------------------ Szenen */
+
+.szenen { display: grid; gap: 8px; }
+@media (min-width: 640px) { .szenen { grid-template-columns: repeat(2, 1fr); } }
+.szene {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  min-height: 64px; padding: 0 18px; width: 100%;
+  font: 600 17px/1.2 var(--font); color: var(--schrift); text-align: left;
+  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--rund);
+  cursor: pointer; touch-action: manipulation; transition: transform .08s, background .15s;
+}
+.szene:active { transform: scale(.98); }
+.szene .szene-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.szene .marke-an {
+  font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
+  padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); display: none;
+}
+.szene.aktiv { background: var(--lila-tief); border-color: var(--lila); }
+.szene.aktiv .marke-an { display: inline-block; }
+.szene.wartet { opacity: .6; }
+
+.knopf.clip {
+  width: 100%; min-height: 64px; font-size: 17px; border-radius: var(--rund);
+  background: rgba(255, 79, 163, .14); border-color: rgba(255, 79, 163, .55); color: #ffd1e8;
+}
+.knopf.clip svg { width: 24px; height: 24px; }
+
+.ton { display: grid; gap: 8px; }
+.ton-zeile {
+  display: flex; align-items: center; gap: 12px; width: 100%;
+  min-height: 56px; padding: 0 14px 0 16px;
+  font: 500 15px/1.2 var(--font); color: var(--schrift); text-align: left;
+  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; cursor: pointer;
+}
+.ton-zeile .ton-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ton-zeile .ton-stand {
+  font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
+  padding: 7px 10px; border-radius: 8px; background: rgba(74, 222, 128, .14); color: var(--gruen);
+}
+.ton-zeile.stumm { border-color: rgba(239, 68, 68, .45); }
+.ton-zeile.stumm .ton-stand { background: rgba(239, 68, 68, .16); color: #ffb3b3; }
+.ton-zeile.stumm svg { color: #ffb3b3; }
+
+.anfragen { display: grid; gap: 12px; margin-bottom: 4px; }
+.anfrage {
+  border-radius: var(--rund); padding: 16px; margin-bottom: 12px;
+  background: rgba(169, 112, 255, .1); border: 1px solid var(--lila);
+}
+.anfrage h2 { font-size: 18px; margin: 0 0 4px; }
+.anfrage p { margin: 0 0 14px; color: var(--leise); font-size: 14px; }
+.anfrage .reihe { display: flex; gap: 8px; }
+.anfrage .reihe .primaer { flex: 1; min-height: 52px; font-size: 16px; }
+.knopf.leise { margin-top: 28px; background: transparent; color: var(--leise); border-color: var(--linie); font-weight: 500; }
+
+.leer-karte { text-align: center; padding: 28px 18px; }
+.leer-karte h2 { font-size: 18px; margin: 0 0 8px; }
+.leer-karte p { color: var(--leise); margin: 0; font-size: 14px; }
+
+/* ------------------------------------------------------------ Stream */
+
+.lz-zahlen { display: flex; gap: 28px; margin: 4px 0 16px; }
+.lz-zahlen div { display: flex; flex-direction: column; }
+.lz-zahlen b { font: 700 52px/1 var(--font-zahl); font-variant-numeric: tabular-nums; }
+.lz-zahlen span { color: var(--leise); font-size: 13px; margin-top: 4px; }
+.lz-zahlen .gemacht b { color: var(--gruen); }
+.lz-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+.lz-knoepfe .knopf { min-height: 56px; font-size: 18px; font-variant-numeric: tabular-nums; }
+
+.zaehler {
+  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
+  border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; letter-spacing: 0;
+}
+.wartend { display: grid; gap: 10px; margin-bottom: 12px; }
+.wartend .leer-zeile { color: var(--leise); font-size: 14px; }
+.nachricht { background: var(--flaeche-2); border-radius: 12px; padding: 12px; }
+.nachricht .wer { font-weight: 600; color: var(--tuerkis); font-size: 14px; }
+.nachricht .was { margin: 4px 0 10px; overflow-wrap: anywhere; }
+.nachricht .reihe { display: flex; gap: 8px; }
+.nachricht .reihe .knopf { flex: 1; }
+
+.knopf.panik {
+  width: 100%; min-height: 64px; margin-top: 8px; font-size: 18px; border-radius: var(--rund);
+  background: var(--rot); border-color: var(--rot); color: #fff;
+}
+.knopf.panik svg { width: 24px; height: 24px; }
+
+/* ------------------------------------------------------------ Test */
+
+.gruppe { margin-bottom: 4px; }
+.gruppe .knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
+.gruppe .knopf { min-height: 48px; font-weight: 500; font-size: 14px; padding: 0 10px; }
+
+/* ------------------------------------------------------------ Chat */
+
+/* Ein fester Kasten zwischen Kopf und Reitern, damit nur die Liste
+ * scrollt und nicht die Seite: wer im Chat hochscrollt, soll den Kopf mit
+ * LIVE-Anzeige und Verbindungspunkt weiter sehen. */
+.tab.chat.an { display: flex; }
+.chat {
+  position: fixed; z-index: 10; left: 0; right: 0;
+  top: calc(var(--kopf-h) + var(--oben));
+  bottom: calc(var(--reiter-h) + var(--unten));
+  flex-direction: column;
+  background: var(--grund);
+}
+.chat-kopf {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
+  padding: 14px 16px 10px; border-bottom: 1px solid var(--linie);
+}
+.chat-kopf .abschnitt, .chat-kopf .klein { margin: 0; }
+/* Wenige Nachrichten stehen unten wie in jedem Chat, nicht oben unter dem
+ * Kopf. margin-top: auto statt justify-content: flex-end - mit letzterem
+ * laesst sich in manchen Browsern nicht mehr nach oben scrollen. */
+.chat-liste {
+  display: flex; flex-direction: column;
+  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  padding: 8px 10px 14px; font-size: 15px; line-height: 1.42;
+}
+.chat-leer { position: absolute; top: 50%; left: 0; right: 0; text-align: center;
+             color: var(--leise); font-size: 14px; margin: 0; }
+
+.cz { flex: none; padding: 5px 8px; border-radius: 8px; overflow-wrap: anywhere; }
+.cz:first-child { margin-top: auto; }
+.cz .zeit { color: var(--leise); font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 6px; }
+.cz .abz { height: 18px; width: auto; vertical-align: -3px; margin-right: 3px; }
+.cz .wer { font-weight: 700; }
+.cz .emote { height: 28px; width: auto; vertical-align: -8px; }
+.cz .gif { display: block; max-width: min(100%, 220px); max-height: 140px; border-radius: 6px; margin: 4px 0 2px; }
+.cz.erstmals { background: rgba(74, 222, 128, .1); box-shadow: inset 3px 0 0 var(--gruen); }
+.cz.erstmals::before {
+  content: "Zum ersten Mal hier"; display: block; margin-bottom: 1px;
+  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen);
+}
+.cz.bits { background: rgba(255, 197, 61, .1); }
+.cz.weg { opacity: .45; }
+.cz.weg .text { text-decoration: line-through; }
+.cz.system {
+  margin: 6px 0; font-size: 13px; color: var(--schrift);
+  background: rgba(169, 112, 255, .1); border: 1px solid rgba(169, 112, 255, .35);
+}
+
+.chat-runter {
+  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
+  padding: 9px 16px; border-radius: 999px; cursor: pointer;
+  font: 600 14px/1 var(--font); color: #fff;
+  background: var(--lila-tief); border: 1px solid var(--lila);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
+}
+
+/* Ab Tablet-Groesse: Chat fest rechts, links der gewaehlte Reiter. So
+ * stehen Szenen und Chat auf einem Bildschirm. Die Hoehe haelt quer
+ * gehaltene Handys heraus, dort bliebe fuer beides zu wenig. Muss in
+ * pult.js (`geteilt`) gleich lauten. */
+@media (min-width: 760px) and (min-height: 500px) {
+  :root { --chat-b: clamp(300px, 36vw, 440px); }
+  main { max-width: none; margin: 0; padding-right: calc(var(--chat-b) + 16px); }
+  .tab.chat {
+    display: flex; left: auto; width: var(--chat-b); bottom: 0;
+    padding-bottom: var(--unten); border-left: 1px solid var(--linie); animation: none;
+  }
+  .chat-runter { bottom: calc(14px + var(--unten)); }
+  .reiter { right: var(--chat-b); }
+  #nav-chat { display: none; }
+  .meldung { left: calc((100% - var(--chat-b)) / 2); }
+}
+
+/* ------------------------------------------------------------ Reiter */
+
+.reiter {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
+  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
+  height: calc(var(--reiter-h) + var(--unten));
+  padding-bottom: var(--unten);
+  background: rgba(18, 14, 29, .94);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-top: 1px solid var(--linie);
+}
+.reiter button {
+  position: relative;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+  background: none; border: 0; color: var(--leise); cursor: pointer;
+  font: 500 12px/1 var(--font); touch-action: manipulation;
+}
+.reiter button svg { width: 24px; height: 24px; }
+.reiter button.an { color: var(--schrift); }
+.reiter button.an svg { color: var(--lila); }
+.reiter .punkt { position: absolute; top: 10px; left: calc(50% + 10px); width: 9px; height: 9px;
+                 border-radius: 50%; background: var(--pink); border: 2px solid var(--grund); }
+
+/* ------------------------------------------------------------ Meldung */
+
+.meldung {
+  position: fixed; left: 50%; z-index: 40;
+  bottom: calc(var(--reiter-h) + var(--unten) + 14px);
+  transform: translate(-50%, 12px);
+  max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 12px;
+  background: #241f35; border: 1px solid var(--linie-stark); color: var(--schrift);
+  font-size: 15px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
+  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
+}
+.meldung.an { opacity: 1; transform: translate(-50%, 0); }
+.meldung.ok { border-color: rgba(74, 222, 128, .5); }
+.meldung.fehler { border-color: rgba(255, 197, 61, .6); color: #ffe2a0; }
+
+/* ------------------------------------------------------------ Blatt */
+
+.blatt {
+  width: 100%; max-width: 560px; margin: auto auto 0; padding: 0;
+  border: 1px solid var(--linie-stark); border-bottom: 0; border-radius: 22px 22px 0 0;
+  background: var(--flaeche); color: var(--schrift);
+}
+@media (min-width: 640px) { .blatt { margin: auto; border-radius: 22px; border-bottom: 1px solid var(--linie-stark); } }
+.blatt::backdrop { background: rgba(5, 4, 9, .65); backdrop-filter: blur(2px); }
+.blatt[open] { animation: hoch .22s ease-out; }
+@keyframes hoch { from { transform: translateY(40px); opacity: 0; } }
+.blatt form { padding: 10px 18px calc(18px + var(--unten)); display: grid; gap: 16px; }
+.griff { width: 40px; height: 4px; border-radius: 4px; background: var(--linie-stark); margin: 0 auto; }
+.blatt-kopf { display: flex; gap: 10px; }
+.blatt input:not([type=range]) {
+  font: inherit; color: var(--schrift); background: var(--flaeche-2);
+  border: 1px solid var(--linie-stark); border-radius: 12px; min-height: 52px; padding: 0 14px;
+}
+.blatt input:focus { outline: 2px solid var(--lila); outline-offset: 0; }
+.emoji-feld { width: 64px; text-align: center; font-size: 26px !important; padding: 0 !important; }
+.name-feld { flex: 1; min-width: 0; font-size: 17px !important; }
+.schnell { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
+.schnell button {
+  flex: none; width: 42px; height: 42px; border-radius: 10px; font-size: 22px;
+  background: var(--flaeche-2); border: 1px solid var(--linie); cursor: pointer;
+}
+.feld { display: grid; gap: 10px; }
+.feld-name { font-size: 13px; color: var(--leise); display: flex; justify-content: space-between; }
+.feld-name b { color: var(--schrift); font-variant-numeric: tabular-nums; }
+.farben { display: flex; gap: 8px; flex-wrap: wrap; }
+.farbe {
+  --c: var(--lila);
+  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
+  background: var(--c); border: 3px solid var(--flaeche); box-shadow: 0 0 0 1px var(--linie-stark);
+}
+.farbe[aria-checked="true"] { box-shadow: 0 0 0 2px var(--schrift); }
+input[type=range] { width: 100%; accent-color: var(--lila); height: 32px; }
+.blatt-reihe { display: flex; gap: 8px; align-items: center; }
+.blatt-reihe #b-hoeren { flex: 1; }
+
+/* ------------------------------------------------------------ Abgemeldet */
+
+.abgemeldet {
+  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
+  background: rgba(13, 11, 20, .96); text-align: center; padding: 24px;
+}
+.abgemeldet p { color: var(--leise); max-width: 32ch; margin: 8px auto 22px; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}

apps/overlay-web/public/pult.html

@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#0d0b14">
+<meta name="color-scheme" content="dark">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Pult">
+<title>Pult · abdulive</title>
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/icons/pult-192.png" type="image/png">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+<link rel="stylesheet" href="/pult.css">
+</head>
+<body>
+
+<header class="kopf">
+  <div class="kanal">
+    <span class="marke">abdu<b>live</b></span>
+    <span id="live" class="live aus"><i></i><span id="live-text">offline</span></span>
+  </div>
+  <div class="kopf-rechts">
+    <button id="wach" class="rund" type="button" aria-pressed="false" title="Bildschirm anlassen">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v2M12 19v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M3 12h2M19 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/><circle cx="12" cy="12" r="4"/></svg>
+    </button>
+    <span id="netz" class="netz" title="Verbindung zum Hub"><i></i></span>
+  </div>
+</header>
+
+<div id="banner" class="banner" hidden></div>
+
+<main>
+  <!-- ======================================================== Sounds -->
+  <section id="tab-sounds" class="tab an" aria-labelledby="nav-sounds">
+    <div class="leiste">
+      <button id="stopp" class="knopf warnung" type="button">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+        Stopp
+      </button>
+      <span class="luecke"></span>
+      <button id="bearbeiten" class="knopf" type="button" aria-pressed="false">Bearbeiten</button>
+      <label class="knopf primaer" for="datei">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+        Sound
+      </label>
+      <input id="datei" type="file" accept="audio/*,.mp3,.wav,.ogg,.m4a,.webm" multiple hidden>
+    </div>
+    <div id="quelle-fehlt" class="hinweis warn" hidden>
+      In OBS ist keine Sound-Quelle verbunden – die Zuschauer hören nichts. Browser-Source
+      <code>/sounds</code> anlegen, die Adresse steht auf der <a href="/">Übersicht</a>.
+    </div>
+    <div id="raster" class="raster" aria-live="polite"></div>
+    <div id="sounds-leer" class="leer" hidden>
+      <div class="leer-bild" aria-hidden="true">
+        <span></span><span></span><span></span><span></span><span></span><span></span>
+      </div>
+      <h2>Noch keine Sounds</h2>
+      <p>MP3, WAV, OGG oder M4A vom Handy hochladen. Jeder Sound wird eine Taste;
+      ein Druck spielt ihn im Stream.</p>
+      <label class="knopf primaer gross" for="datei">Ersten Sound hinzufügen</label>
+    </div>
+  </section>
+
+  <!-- ======================================================== Szenen -->
+  <section id="tab-szenen" class="tab" aria-labelledby="nav-szenen">
+    <div id="anfragen" class="anfragen"></div>
+    <div id="obs-fehlt" class="karte leer-karte" hidden>
+      <h2 id="obs-fehlt-titel">Stream-PC nicht verbunden</h2>
+      <p id="obs-fehlt-text"></p>
+    </div>
+    <div id="obs-da" hidden>
+      <h3 class="abschnitt">Szenen</h3>
+      <div id="szenen" class="szenen"></div>
+
+      <h3 class="abschnitt">Clip</h3>
+      <button id="clip" class="knopf clip" type="button">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h3l2-3h6l2 3h3v12H4z"/><circle cx="12" cy="13" r="3.5"/></svg>
+        <span>Clip speichern</span>
+      </button>
+      <p id="clip-hinweis" class="klein"></p>
+
+      <h3 class="abschnitt">Ton</h3>
+      <div id="ton" class="ton"></div>
+
+      <button id="trennen" class="knopf breit leise" type="button">Stream-PC trennen</button>
+    </div>
+  </section>
+
+  <!-- ======================================================== Stream -->
+  <section id="tab-stream" class="tab" aria-labelledby="nav-stream">
+    <div id="lz-karte" class="karte" hidden>
+      <h3 class="abschnitt">Liegestütze</h3>
+      <div class="lz-zahlen">
+        <div><b id="lz-offen">0</b><span>offen</span></div>
+        <div class="gemacht"><b id="lz-gemacht">0</b><span>gemacht</span></div>
+      </div>
+      <div class="lz-knoepfe">
+        <button class="knopf" data-um="-10" type="button">−10</button>
+        <button class="knopf" data-um="-5" type="button">−5</button>
+        <button class="knopf" data-um="-1" type="button">−1</button>
+        <button class="knopf" data-um="1" type="button">+1</button>
+        <button class="knopf" data-um="5" type="button">+5</button>
+        <button class="knopf" data-um="10" type="button">+10</button>
+      </div>
+      <p class="klein">Minus zählt als gemacht. Korrekturen ohne Zählung auf der <a href="/">Übersicht</a>.</p>
+    </div>
+
+    <div id="tts-karte" class="karte" hidden>
+      <h3 class="abschnitt">Vorlesen <span id="tts-anzahl" class="zaehler" hidden></span></h3>
+      <div id="wartend" class="wartend"></div>
+      <button id="alle-ablehnen" class="knopf" type="button">Alle ablehnen</button>
+    </div>
+
+    <button id="still" class="knopf panik" type="button">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4zM16 9l5 6M21 9l-5 6"/></svg>
+      Sofort still
+    </button>
+    <p class="klein mitte">Bricht Vorlesen und alle Sounds ab und leert die Warteschlange.</p>
+  </section>
+
+  <!-- ======================================================== Test -->
+  <section id="tab-test" class="tab" aria-labelledby="nav-test">
+    <div id="test-live" class="hinweis warn" hidden>Der Stream läuft. Was du hier auslöst, sehen die Zuschauer.</div>
+    <p class="klein">Erfundene Ereignisse, nur für die Browser-Sources. Nichts davon landet
+    in der Datenbank, auf Discord oder bei Twitch.</p>
+    <div id="test-gruppen"></div>
+    <h3 class="abschnitt">Dauerbetrieb</h3>
+    <button id="demo" class="knopf breit" type="button" data-art="demo-an">Vorführung starten</button>
+    <p class="klein"><a href="/">Übersicht und OBS-Adressen</a> · <a href="/setup">Einrichtung</a> · <a href="/logout">Abmelden</a></p>
+  </section>
+
+  <!-- ======================================================== Chat
+       Am Handy ein Reiter, ab Tablet-Breite steht er rechts daneben. -->
+  <section id="tab-chat" class="tab chat" aria-labelledby="nav-chat">
+    <div class="chat-kopf">
+      <h3 class="abschnitt">Chat</h3>
+      <span class="klein">nur lesen</span>
+    </div>
+    <div id="chat-liste" class="chat-liste" role="log" aria-live="off"></div>
+    <p id="chat-leer" class="chat-leer">Noch keine Nachrichten.</p>
+    <button id="chat-runter" class="chat-runter" type="button" hidden>Neue Nachrichten ↓</button>
+  </section>
+</main>
+
+<div id="meldung" class="meldung" role="status" aria-live="polite"></div>
+
+<nav class="reiter" aria-label="Bereiche">
+  <button id="nav-sounds" data-tab="sounds" class="an" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7.5" height="7.5" rx="2"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="2"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="2"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2"/></svg>
+    Sounds
+  </button>
+  <button id="nav-szenen" data-tab="szenen" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="5" width="19" height="13" rx="2"/><path d="M8 21h8"/></svg>
+    Szenen
+    <i id="nav-fern" class="punkt" hidden></i>
+  </button>
+  <button id="nav-stream" data-tab="stream" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>
+    Stream
+    <i id="nav-tts" class="punkt" hidden></i>
+  </button>
+  <button id="nav-chat" data-tab="chat" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z"/></svg>
+    Chat
+    <i id="nav-chat-punkt" class="punkt" hidden></i>
+  </button>
+  <button id="nav-test" data-tab="test" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4a2 2 0 0 0 1.8-3l-5-9V3"/></svg>
+    Test
+  </button>
+</nav>
+
+<dialog id="blatt" class="blatt">
+  <form method="dialog" id="blatt-form">
+    <div class="griff" aria-hidden="true"></div>
+    <div class="blatt-kopf">
+      <input id="b-emoji" class="emoji-feld" maxlength="10" placeholder="🔊" aria-label="Emoji" autocomplete="off">
+      <input id="b-name" class="name-feld" maxlength="40" placeholder="Name" aria-label="Name" autocomplete="off">
+    </div>
+    <div id="b-schnell" class="schnell" aria-label="Emoji-Vorschläge"></div>
+    <div class="feld">
+      <span class="feld-name">Farbe</span>
+      <div id="b-farben" class="farben" role="radiogroup" aria-label="Farbe"></div>
+    </div>
+    <label class="feld">
+      <span class="feld-name">Lautstärke <b id="b-laut-zahl">80 %</b></span>
+      <input id="b-laut" type="range" min="0" max="100" step="5" value="80">
+    </label>
+    <div class="blatt-reihe">
+      <button type="button" id="b-hoeren" class="knopf">Am Handy anhören</button>
+      <button type="button" id="b-vor" class="knopf" aria-label="Nach vorn">◀</button>
+      <button type="button" id="b-zurueck" class="knopf" aria-label="Nach hinten">▶</button>
+    </div>
+    <div class="blatt-reihe">
+      <button type="button" id="b-loeschen" class="knopf warnung">Löschen</button>
+      <span class="luecke"></span>
+      <button type="button" id="b-abbrechen" class="knopf">Abbrechen</button>
+      <button type="submit" id="b-speichern" class="knopf primaer">Speichern</button>
+    </div>
+  </form>
+</dialog>
+
+<div id="abgemeldet" class="abgemeldet" hidden>
+  <div>
+    <h2>Abgemeldet</h2>
+    <p>Die Anmeldung ist abgelaufen oder das Passwort wurde geändert.</p>
+    <a class="knopf primaer gross" href="/pult">Neu anmelden</a>
+  </div>
+</div>
+
+<script src="/pult.js"></script>
+</body>
+</html>

apps/overlay-web/public/pult.js

@@ -0,0 +1,876 @@
+/* Das Pult: Soundboard, Szenen, Chat, Liegestuetze, Vorlesen - am Handy,
+ * ab Tablet-Groesse mit dem Chat daneben.
+ *
+ * Zwei Wege zum Hub:
+ *   - der Ereignisstrom /events (wie bei den Browser-Sources), damit zwei
+ *     offene Pulte und die Uebersichtsseite nicht auseinanderlaufen;
+ *   - einfache POSTs fuer jeden Druck. Jede Antwort sagt, ob es geklappt
+ *     hat, und genau das steht danach an der Taste.
+ *
+ * Fremder Text (Soundnamen, Szenen, Chat) kommt nur ueber textContent ins
+ * DOM, nie ueber innerHTML. */
+(function () {
+  'use strict';
+
+  var $ = function (id) { return document.getElementById(id); };
+  /** Gleiche Grenze wie die Media Query in pult.css. */
+  var geteilt = window.matchMedia('(min-width: 760px) and (min-height: 500px)');
+  var FARBEN = ['lila', 'tuerkis', 'pink', 'gold', 'gruen', 'rot', 'blau', 'grau'];
+  var SCHNELL = ['🔊', '😂', '💀', '👏', '🎺', '🥁', '💥', '🚨', '🤡', '😱', '🔥', '❤️', '👀', '🐐', '🫡', '🎉'];
+
+  var zustand = {
+    sounds: [],
+    obs: { pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false },
+    live: false,
+    bearbeiten: false,
+    ttsAn: false,
+  };
+
+  // ------------------------------------------------------------ Hilfen
+
+  function el(tag, klasse, text) {
+    var e = document.createElement(tag);
+    if (klasse) e.className = klasse;
+    if (text !== undefined) e.textContent = text;
+    return e;
+  }
+
+  function tippen() {
+    if (navigator.vibrate) { try { navigator.vibrate(12); } catch (e) { /* egal */ } }
+  }
+
+  var meldungTimer;
+  function melden(text, art) {
+    var m = $('meldung');
+    if (!text) return;
+    m.textContent = text;
+    m.className = 'meldung an' + (art ? ' ' + art : '');
+    clearTimeout(meldungTimer);
+    meldungTimer = setTimeout(function () { m.className = 'meldung'; }, art === 'fehler' ? 4500 : 2200);
+  }
+
+  /** POST mit Formular, Antwort als JSON. Wirft nie; Fehler stehen in `ok`. */
+  function rufen(pfad, felder, roh) {
+    var opts = { method: 'POST', credentials: 'same-origin' };
+    if (roh) {
+      opts.body = roh;
+    } else {
+      opts.headers = { 'content-type': 'application/x-www-form-urlencoded' };
+      opts.body = new URLSearchParams(felder || {});
+    }
+    return fetch(pfad, opts).then(function (res) {
+      return res.json().catch(function () { return { text: 'Fehler ' + res.status }; })
+        .then(function (body) {
+          if (res.status === 401) abgemeldet();
+          body.ok = res.ok && body.ok !== false;
+          return body;
+        });
+    }, function () {
+      return { ok: false, text: 'Keine Verbindung zum Hub.' };
+    });
+  }
+
+  function holen(pfad) {
+    return fetch(pfad, { credentials: 'same-origin' }).then(function (res) {
+      if (res.status === 401) { abgemeldet(); throw new Error('abgemeldet'); }
+      if (!res.ok) throw new Error('Fehler ' + res.status);
+      return res.json();
+    });
+  }
+
+  function abgemeldet() { $('abgemeldet').hidden = false; }
+
+  /** Taste waehrend eines Rufs sperren, damit ein Doppeltipp nicht doppelt schaltet. */
+  function mitWarten(knopf, versprechen) {
+    knopf.classList.add('wartet');
+    return versprechen.then(function (r) { knopf.classList.remove('wartet'); return r; });
+  }
+
+  // ------------------------------------------------------------ Reiter
+
+  function zeigeReiter(name) {
+    // Ab Tablet-Breite steht der Chat ohnehin daneben, links bleibt dann
+    // Platz fuer das, womit man ihn zusammen braucht.
+    if (name === 'chat' && geteilt.matches) name = 'szenen';
+    var reiter = document.querySelectorAll('.reiter button');
+    for (var i = 0; i < reiter.length; i++) {
+      reiter[i].classList.toggle('an', reiter[i].dataset.tab === name);
+    }
+    var tabs = document.querySelectorAll('.tab');
+    for (var j = 0; j < tabs.length; j++) tabs[j].classList.toggle('an', tabs[j].id === 'tab-' + name);
+    try { localStorage.setItem('pult-reiter', name); } catch (e) { /* privat */ }
+    if (name === 'stream') ladeWartend();
+    if (name === 'chat') chatGesehen();
+    window.scrollTo(0, 0);
+  }
+  document.querySelector('.reiter').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-tab]');
+    if (b) { tippen(); zeigeReiter(b.dataset.tab); }
+  });
+
+  // ------------------------------------------------------------ Kopf
+
+  var laufzeitTimer;
+  function zeigeStream(s) {
+    zustand.live = !!s.live;
+    var live = $('live');
+    live.classList.toggle('aus', !s.live);
+    clearInterval(laufzeitTimer);
+    var schreiben = function () {
+      if (!s.live) { $('live-text').textContent = 'offline'; return; }
+      var teile = ['LIVE'];
+      if (s.startedAt) {
+        var min = Math.max(0, Math.floor((Date.now() - Date.parse(s.startedAt)) / 60000));
+        teile.push(Math.floor(min / 60) + ':' + String(min % 60).padStart(2, '0'));
+      }
+      teile.push((s.viewers || 0).toLocaleString('de-DE') + ' 👁');
+      $('live-text').textContent = teile.join(' · ');
+    };
+    schreiben();
+    if (s.live) laufzeitTimer = setInterval(schreiben, 30000);
+    $('test-live').hidden = !s.live;
+    var gesperrt = document.querySelectorAll('#test-gruppen [data-offline]');
+    for (var i = 0; i < gesperrt.length; i++) gesperrt[i].disabled = !!s.live;
+    var demo = $('demo');
+    if (demo.dataset.art === 'demo-an') demo.disabled = !!s.live;
+  }
+
+  // Bildschirm anlassen. Ein Pult, das nach 30 s schwarz wird, ist mitten
+  // im Stream keins. Der Wunsch wird gemerkt; das Handy gibt die Sperre bei
+  // jedem Wegwischen frei, also wird sie beim Zurueckkommen neu geholt.
+  var sperre = null;
+  var wachGewuenscht = false;
+  try { wachGewuenscht = localStorage.getItem('pult-wach') === '1'; } catch (e) { /* privat */ }
+  function wachHolen() {
+    if (!wachGewuenscht || !('wakeLock' in navigator) || document.visibilityState !== 'visible') {
+      $('wach').setAttribute('aria-pressed', String(!!sperre));
+      return;
+    }
+    navigator.wakeLock.request('screen').then(function (s) {
+      sperre = s;
+      $('wach').setAttribute('aria-pressed', 'true');
+      s.addEventListener('release', function () {
+        sperre = null;
+        $('wach').setAttribute('aria-pressed', 'false');
+      });
+    }, function () { $('wach').setAttribute('aria-pressed', 'false'); });
+  }
+  $('wach').addEventListener('click', function () {
+    tippen();
+    if (!('wakeLock' in navigator)) { melden('Dieser Browser kann den Bildschirm nicht wach halten.', 'fehler'); return; }
+    wachGewuenscht = !sperre;
+    try { localStorage.setItem('pult-wach', wachGewuenscht ? '1' : '0'); } catch (e) { /* privat */ }
+    if (sperre) { sperre.release(); sperre = null; melden('Bildschirm darf wieder ausgehen.'); }
+    else { wachHolen(); melden('Bildschirm bleibt an.', 'ok'); }
+  });
+  document.addEventListener('visibilitychange', function () {
+    if (document.visibilityState === 'visible') { wachHolen(); ladeSounds(); }
+  });
+
+  // ------------------------------------------------------------ Sounds
+
+  function ladeSounds() {
+    return holen('/soundboard/liste').then(zeigeSounds, function () { /* Meldung kommt woanders */ });
+  }
+
+  function zeigeSounds(body) {
+    if (body.sounds) zustand.sounds = body.sounds;
+    if (typeof body.quellen === 'number') $('quelle-fehlt').hidden = body.quellen > 0;
+    var raster = $('raster');
+    raster.textContent = '';
+    raster.classList.toggle('bearbeiten', zustand.bearbeiten);
+    $('sounds-leer').hidden = zustand.sounds.length > 0;
+    $('bearbeiten').hidden = zustand.sounds.length === 0;
+    if (!zustand.sounds.length && zustand.bearbeiten) setzeBearbeiten(false);
+
+    zustand.sounds.forEach(function (s) {
+      var k = el('button', 'kachel' + (s.emoji ? '' : ' ohne-emoji'));
+      k.type = 'button';
+      k.dataset.id = s.id;
+      k.dataset.farbe = FARBEN.indexOf(s.farbe) !== -1 ? s.farbe : 'lila';
+      if (s.emoji) k.appendChild(el('span', 'emoji', s.emoji));
+      k.appendChild(el('span', 'name', s.name));
+      k.setAttribute('aria-label', (zustand.bearbeiten ? 'Bearbeiten: ' : 'Abspielen: ') + s.name);
+      raster.appendChild(k);
+    });
+  }
+
+  function knall(id) {
+    var k = document.querySelector('.kachel[data-id="' + CSS.escape(id) + '"]');
+    if (!k) return;
+    k.classList.remove('knall');
+    void k.offsetWidth;               // Animation neu starten, auch beim Doppeltipp
+    k.classList.add('knall');
+  }
+
+  $('raster').addEventListener('click', function (e) {
+    var k = e.target.closest('.kachel');
+    if (!k) return;
+    tippen();
+    var id = k.dataset.id;
+    if (zustand.bearbeiten) { oeffneBlatt(id); return; }
+    knall(id);
+    rufen('/soundboard/spielen', { id: id }).then(function (r) {
+      if (!r.ok) { melden(r.text, 'fehler'); return; }
+      $('quelle-fehlt').hidden = r.quellen > 0;
+      if (!r.quellen) melden(r.text, 'fehler');
+    });
+  });
+
+  $('stopp').addEventListener('click', function () {
+    tippen();
+    rufen('/soundboard/stopp').then(function (r) { melden(r.text, r.ok ? 'ok' : 'fehler'); });
+  });
+
+  function setzeBearbeiten(an) {
+    zustand.bearbeiten = an;
+    $('bearbeiten').setAttribute('aria-pressed', String(an));
+    $('bearbeiten').textContent = an ? 'Fertig' : 'Bearbeiten';
+    $('raster').classList.toggle('bearbeiten', an);
+    var kacheln = document.querySelectorAll('.kachel');
+    for (var i = 0; i < kacheln.length; i++) {
+      var s = zustand.sounds[i];
+      if (s) kacheln[i].setAttribute('aria-label', (an ? 'Bearbeiten: ' : 'Abspielen: ') + s.name);
+    }
+  }
+  $('bearbeiten').addEventListener('click', function () { tippen(); setzeBearbeiten(!zustand.bearbeiten); });
+
+  // Hochladen: roh im Koerper, eine Datei nach der anderen. Parallel waere
+  // schneller, aber dann kommt die Reihenfolge durcheinander.
+  $('datei').addEventListener('change', function (e) {
+    var dateien = Array.prototype.slice.call(e.target.files || []);
+    e.target.value = '';
+    var weiter = Promise.resolve();
+    dateien.forEach(function (d, i) {
+      weiter = weiter.then(function () {
+        melden((dateien.length > 1 ? (i + 1) + '/' + dateien.length + ' · ' : '') + d.name + ' wird hochgeladen …');
+        return rufen('/soundboard/neu?name=' + encodeURIComponent(d.name), null, d).then(function (r) {
+          melden(r.text, r.ok ? 'ok' : 'fehler');
+          if (r.sounds) zeigeSounds(r);
+          // Der erste Sound geht gleich ins Bearbeiten: ein Emoji macht aus
+          // einer Liste von Dateinamen erst ein Pult.
+          if (r.ok && r.sound && dateien.length === 1) oeffneBlatt(r.sound.id);
+        });
+      });
+    });
+  });
+
+  // ------------------------------------------------------------ Blatt
+
+  var blatt = $('blatt');
+  var offenId = null;
+  var probe = null;
+
+  (function baueBlatt() {
+    var schnell = $('b-schnell');
+    SCHNELL.forEach(function (em) {
+      var b = el('button', '', em);
+      b.type = 'button';
+      b.addEventListener('click', function () { $('b-emoji').value = em; tippen(); });
+      schnell.appendChild(b);
+    });
+    var farben = $('b-farben');
+    FARBEN.forEach(function (f) {
+      var b = el('button', 'farbe');
+      b.type = 'button';
+      b.dataset.farbe = f;
+      b.setAttribute('role', 'radio');
+      b.setAttribute('aria-label', f);
+      b.addEventListener('click', function () { waehleFarbe(f); tippen(); });
+      farben.appendChild(b);
+    });
+  })();
+
+  function waehleFarbe(f) {
+    var alle = $('b-farben').children;
+    for (var i = 0; i < alle.length; i++) alle[i].setAttribute('aria-checked', String(alle[i].dataset.farbe === f));
+    blatt.dataset.farbe = f;
+  }
+
+  function oeffneBlatt(id) {
+    var s = zustand.sounds.find(function (x) { return x.id === id; });
+    if (!s) return;
+    offenId = id;
+    $('b-name').value = s.name;
+    $('b-emoji').value = s.emoji || '';
+    $('b-laut').value = Math.round((s.laut ?? 0.8) * 100);
+    $('b-laut-zahl').textContent = $('b-laut').value + ' %';
+    waehleFarbe(s.farbe);
+    $('b-loeschen').textContent = 'Löschen';
+    $('b-loeschen').dataset.sicher = '';
+    if (typeof blatt.showModal === 'function') blatt.showModal(); else blatt.setAttribute('open', '');
+  }
+
+  function schliesseBlatt() {
+    if (probe) { probe.pause(); probe = null; }
+    offenId = null;
+    if (blatt.open) blatt.close();
+  }
+
+  $('b-laut').addEventListener('input', function () {
+    $('b-laut-zahl').textContent = $('b-laut').value + ' %';
+    if (probe) probe.volume = Number($('b-laut').value) / 100;
+  });
+
+  $('b-hoeren').addEventListener('click', function () {
+    if (!offenId) return;
+    if (probe) { probe.pause(); probe = null; $('b-hoeren').textContent = 'Am Handy anhören'; return; }
+    probe = new Audio('/soundboard/datei/' + encodeURIComponent(offenId));
+    probe.volume = Number($('b-laut').value) / 100;
+    $('b-hoeren').textContent = 'Anhören stoppen';
+    probe.onended = function () { probe = null; $('b-hoeren').textContent = 'Am Handy anhören'; };
+    probe.play().catch(function () { melden('Abspielen am Handy ging nicht.', 'fehler'); });
+  });
+
+  function verschieben(um) {
+    if (!offenId) return;
+    tippen();
+    rufen('/soundboard/verschieben', { id: offenId, um: String(um) }).then(function (r) {
+      if (r.sounds) zeigeSounds(r);
+    });
+  }
+  $('b-vor').addEventListener('click', function () { verschieben(-1); });
+  $('b-zurueck').addEventListener('click', function () { verschieben(1); });
+
+  $('b-loeschen').addEventListener('click', function () {
+    var b = $('b-loeschen');
+    // Zweimal tippen statt confirm(): ein Dialog des Browsers sieht am Handy
+    // aus wie eine Fehlermeldung, und er haelt die Seite an.
+    if (!b.dataset.sicher) { b.dataset.sicher = '1'; b.textContent = 'Wirklich löschen?'; tippen(); return; }
+    var id = offenId;
+    schliesseBlatt();
+    rufen('/soundboard/loeschen', { id: id }).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (r.sounds) zeigeSounds(r);
+    });
+  });
+
+  $('b-abbrechen').addEventListener('click', schliesseBlatt);
+  blatt.addEventListener('close', function () { if (probe) { probe.pause(); probe = null; } });
+  blatt.addEventListener('click', function (e) { if (e.target === blatt) schliesseBlatt(); });
+
+  $('blatt-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    var id = offenId;
+    if (!id) return;
+    var felder = {
+      id: id,
+      name: $('b-name').value,
+      emoji: $('b-emoji').value,
+      farbe: blatt.dataset.farbe || 'lila',
+      laut: String(Number($('b-laut').value) / 100),
+    };
+    schliesseBlatt();
+    rufen('/soundboard/aendern', felder).then(function (r) {
+      if (!r.ok) melden(r.text, 'fehler');
+      if (r.sounds) zeigeSounds(r);
+    });
+  });
+
+  // ------------------------------------------------------------ OBS
+
+  function zeigeObs(o) {
+    zustand.obs = o;
+    var fehlt = !o.pc || !o.obs;
+    $('obs-fehlt').hidden = !fehlt;
+    $('obs-da').hidden = fehlt;
+    if (!o.pc) {
+      $('obs-fehlt-titel').textContent = 'Stream-PC nicht verbunden';
+      $('obs-fehlt-text').textContent = 'Sobald abdulive auf dem Stream-PC läuft, meldet er sich hier ' +
+        'und du tippst einmal auf „Freigeben“. Läuft er schon, ist er vielleicht aus oder offline.';
+    } else if (!o.obs) {
+      $('obs-fehlt-titel').textContent = 'OBS ist nicht erreichbar';
+      $('obs-fehlt-text').textContent = 'Der Stream-PC ist da, aber OBS nicht. Läuft OBS, und ist ' +
+        'obs-websocket an (Werkzeuge → WebSocket-Servereinstellungen)?';
+    }
+    if (fehlt) return;
+
+    var szenen = $('szenen');
+    szenen.textContent = '';
+    o.szenen.forEach(function (name) {
+      var b = el('button', 'szene' + (name === o.aktuell ? ' aktiv' : ''));
+      b.type = 'button';
+      b.dataset.szene = name;
+      b.appendChild(el('span', 'szene-name', name));
+      b.appendChild(el('span', 'marke-an', 'Im Bild'));
+      szenen.appendChild(b);
+    });
+    if (!o.szenen.length) szenen.appendChild(el('p', 'klein', 'OBS meldet keine Szenen.'));
+
+    $('clip').disabled = !o.puffer;
+    $('clip-hinweis').textContent = o.puffer
+      ? 'Sichert die letzten Sekunden aus dem Wiedergabepuffer, wie !clip im Chat – ohne Abklingzeit.'
+      : 'Der Wiedergabepuffer läuft nicht. In OBS unten rechts „Wiedergabepuffer starten“.';
+
+    var ton = $('ton');
+    ton.textContent = '';
+    o.ton.forEach(function (t) {
+      var b = el('button', 'ton-zeile' + (t.stumm ? ' stumm' : ''));
+      b.type = 'button';
+      b.dataset.quelle = t.name;
+      b.dataset.stumm = t.stumm ? '1' : '0';
+      b.innerHTML = t.stumm
+        ? '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4zM16 9l5 6M21 9l-5 6"/></svg>'
+        : '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/></svg>';
+      b.appendChild(el('span', 'ton-name', t.name));
+      b.appendChild(el('span', 'ton-stand', t.stumm ? 'stumm' : 'an'));
+      ton.appendChild(b);
+    });
+    if (!o.ton.length) ton.appendChild(el('p', 'klein', 'Keine Toneingänge gefunden.'));
+  }
+
+  function obsRuf(knopf, felder) {
+    tippen();
+    return mitWarten(knopf, rufen('/pult/obs', felder)).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      return r;
+    });
+  }
+
+  $('szenen').addEventListener('click', function (e) {
+    var b = e.target.closest('.szene');
+    if (!b || b.classList.contains('aktiv')) return;
+    obsRuf(b, { was: 'szene', szene: b.dataset.szene }).then(function (r) {
+      // Sofort umfaerben, nicht erst auf den naechsten Stand warten. Der
+      // Stand vom PC kommt hinterher und rueckt es gerade, falls noetig.
+      if (r.ok) zeigeObs(Object.assign({}, zustand.obs, { aktuell: b.dataset.szene }));
+    });
+  });
+  $('clip').addEventListener('click', function () { obsRuf($('clip'), { was: 'clip' }); });
+  $('ton').addEventListener('click', function (e) {
+    var b = e.target.closest('.ton-zeile');
+    if (!b) return;
+    obsRuf(b, { was: 'stumm', quelle: b.dataset.quelle, stumm: b.dataset.stumm === '1' ? '0' : '1' });
+  });
+
+  // ------------------------------------------------------------ Freigabe
+
+  // Ein Stream-PC, der sich zum ersten Mal meldet, wartet hier auf einen
+  // Tipp. Name und Adresse kommen vom PC selbst - eine Anfrage, die man nicht
+  // erwartet, lehnt man ab.
+  function zeigeAnfragen(liste) {
+    var box = $('anfragen');
+    box.textContent = '';
+    $('nav-fern').hidden = !liste.length;
+    liste.forEach(function (a) {
+      var k = el('div', 'anfrage');
+      k.appendChild(el('h2', '', 'Stream-PC „' + a.name + '“ möchte sich verbinden'));
+      var seit = new Date(a.seit);
+      k.appendChild(el('p', '', 'Von ' + a.adresse + ', seit ' +
+        seit.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) +
+        ' Uhr. Danach steuert das Pult OBS auf diesem Rechner.'));
+      var reihe = el('div', 'reihe');
+      var ja = el('button', 'knopf primaer', 'Freigeben');
+      ja.type = 'button'; ja.dataset.was = 'freigeben'; ja.dataset.id = a.id;
+      var nein = el('button', 'knopf', 'Ablehnen');
+      nein.type = 'button'; nein.dataset.was = 'ablehnen'; nein.dataset.id = a.id;
+      reihe.appendChild(ja); reihe.appendChild(nein);
+      k.appendChild(reihe);
+      box.appendChild(k);
+    });
+  }
+
+  function ladeAnfragen() {
+    holen('/pult/fern').then(function (b) { zeigeAnfragen(b.anfragen || []); }, function () { /* still */ });
+  }
+
+  $('anfragen').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-was]');
+    if (!b) return;
+    tippen();
+    mitWarten(b, rufen('/pult/fern', { was: b.dataset.was, id: b.dataset.id })).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (r.anfragen) zeigeAnfragen(r.anfragen);
+    });
+  });
+
+  $('trennen').addEventListener('click', function () {
+    var b = $('trennen');
+    if (!b.dataset.sicher) {
+      b.dataset.sicher = '1';
+      b.textContent = 'Wirklich trennen? Danach neu freigeben.';
+      setTimeout(function () { b.dataset.sicher = ''; b.textContent = 'Stream-PC trennen'; }, 4000);
+      return;
+    }
+    b.dataset.sicher = '';
+    b.textContent = 'Stream-PC trennen';
+    rufen('/pult/fern', { was: 'trennen' }).then(function (r) { melden(r.text, r.ok ? 'ok' : 'fehler'); });
+  });
+
+  // ------------------------------------------------------------ Liegestuetze
+
+  function zeigeLz(st) {
+    if (!st) return;
+    $('lz-karte').hidden = false;
+    if (typeof st.offen === 'number') $('lz-offen').textContent = st.offen.toLocaleString('de-DE');
+    if (typeof st.gemacht === 'number') $('lz-gemacht').textContent = st.gemacht.toLocaleString('de-DE');
+  }
+  document.querySelector('.lz-knoepfe').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-um]');
+    if (!b) return;
+    tippen();
+    mitWarten(b, rufen('/liegestuetze', { was: 'aendern', wert: b.dataset.um })).then(function (r) {
+      zeigeLz(r);
+      if (!r.ok) melden(r.text, 'fehler');
+    });
+  });
+
+  // ------------------------------------------------------------ Vorlesen
+
+  function zeigeWartend(liste) {
+    var box = $('wartend');
+    box.textContent = '';
+    $('tts-anzahl').hidden = !liste.length;
+    $('tts-anzahl').textContent = String(liste.length);
+    $('nav-tts').hidden = !liste.length;
+    $('alle-ablehnen').hidden = liste.length < 2;
+    if (!liste.length) { box.appendChild(el('div', 'leer-zeile', 'Nichts wartet auf Freigabe.')); return; }
+    liste.forEach(function (w) {
+      var n = el('div', 'nachricht');
+      n.appendChild(el('div', 'wer', w.name));
+      n.appendChild(el('div', 'was', w.text));
+      var reihe = el('div', 'reihe');
+      var ja = el('button', 'knopf primaer', 'Vorlesen');
+      ja.type = 'button'; ja.dataset.was = 'freigeben'; ja.dataset.id = w.id;
+      var nein = el('button', 'knopf', 'Ablehnen');
+      nein.type = 'button'; nein.dataset.was = 'ablehnen'; nein.dataset.id = w.id;
+      reihe.appendChild(ja); reihe.appendChild(nein);
+      n.appendChild(reihe);
+      box.appendChild(n);
+    });
+  }
+
+  function ladeWartend() {
+    if (!zustand.ttsAn) return;
+    holen('/tts/wartend').then(function (b) { zeigeWartend(b.wartend || []); }, function () { /* still */ });
+  }
+
+  function ttsRuf(was, id) {
+    tippen();
+    return rufen('/tts', { was: was, id: id || '' }).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (r.wartend) zeigeWartend(r.wartend);
+    });
+  }
+  $('wartend').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-was]');
+    if (b) ttsRuf(b.dataset.was, b.dataset.id);
+  });
+  $('alle-ablehnen').addEventListener('click', function () { ttsRuf('alle-ablehnen'); });
+
+  // Der Panikschalter. Ohne Vorlesen haelt er wenigstens die Sounds an.
+  $('still').addEventListener('click', function () {
+    tippen();
+    if (zustand.ttsAn) { ttsRuf('still'); return; }
+    rufen('/soundboard/stopp').then(function (r) { melden(r.ok ? 'Alles still.' : r.text, r.ok ? 'ok' : 'fehler'); });
+  });
+
+  // ------------------------------------------------------------ Chat
+
+  // Nur lesend. Die Nachrichten kommen ueber denselben Ereignisstrom wie bei
+  // der Chat-Browser-Source; das Pult schreibt nie in den Chat und braucht
+  // dafuer weder Bot-Konto noch weitere Rechte bei Twitch.
+  var CHAT_MAX = 250;
+  var chatListe = $('chat-liste');
+  /** Steht die Liste am Ende? Dann wandert sie mit, sonst nicht. */
+  var chatKlebt = true;
+
+  /* Wie in chat.html: dunkle Twitch-Farben aufhellen statt verwerfen. */
+  function lesbar(hex) {
+    if (!hex || !/^#[0-9a-f]{6}$/i.test(hex)) return '#c9a7ff';
+    var r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16),
+        b = parseInt(hex.slice(5, 7), 16);
+    var hell = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    if (hell >= 0.5) return hex;
+    var f = 0.5 / Math.max(hell, 0.08);
+    return '#' + [r, g, b].map(function (v) {
+      return Math.min(255, Math.round(v * f)).toString(16).padStart(2, '0');
+    }).join('');
+  }
+
+  /** Text mit Emotes als Knoten. Ersetzt wird der Name als ganzes Wort,
+   *  wie in client.js - Twitch liefert keine Positionen. */
+  function emoteKnoten(ziel, text, emotes) {
+    var ids = {};
+    (emotes || []).forEach(function (e) { if (e && e.id && e.name) ids[e.name] = e.id; });
+    text.split(/(\s+)/).forEach(function (wort) {
+      if (!wort) return;
+      if (!Object.prototype.hasOwnProperty.call(ids, wort)) {
+        ziel.appendChild(document.createTextNode(wort));
+        return;
+      }
+      var img = el('img', 'emote');
+      img.src = 'https://static-cdn.jtvnw.net/emoticons/v2/' +
+        encodeURIComponent(ids[wort]) + '/default/dark/2.0';
+      img.alt = wort;
+      img.title = wort;
+      ziel.appendChild(img);
+    });
+  }
+
+  /** GIFs kommen mit Zeichenbereich und ersetzen ihren Platzhalter im Text. */
+  function textKnoten(ziel, text, gifs, emotes) {
+    var zeichen = Array.from(text);
+    var pos = 0;
+    (gifs || []).slice().sort(function (a, b) { return a.from - b.from; }).forEach(function (g) {
+      if (typeof g.url !== 'string' || g.url.slice(0, 8) !== 'https://') return;
+      if (g.from > pos) emoteKnoten(ziel, zeichen.slice(pos, g.from).join(''), emotes);
+      var img = el('img', 'gif');
+      img.src = g.url;
+      img.alt = 'GIF';
+      img.onerror = function () { img.replaceWith(document.createTextNode('[GIF]')); };
+      ziel.appendChild(img);
+      pos = Math.max(pos, g.to + 1);
+    });
+    if (pos < zeichen.length) emoteKnoten(ziel, zeichen.slice(pos).join(''), emotes);
+  }
+
+  function uhrzeit(ts) {
+    var d = ts ? new Date(ts) : new Date();
+    if (isNaN(d.getTime())) d = new Date();
+    return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  function chatSichtbar() {
+    return geteilt.matches || $('tab-chat').classList.contains('an');
+  }
+
+  function nachUnten() {
+    chatListe.scrollTop = chatListe.scrollHeight;
+    chatKlebt = true;
+    $('chat-runter').hidden = true;
+  }
+
+  function chatGesehen() {
+    $('nav-chat-punkt').hidden = true;
+    nachUnten();
+  }
+
+  function chatAnhaengen(zeile, still) {
+    chatListe.appendChild(zeile);
+    while (chatListe.children.length > CHAT_MAX) chatListe.firstChild.remove();
+    $('chat-leer').hidden = true;
+    if (chatKlebt) nachUnten();
+    else $('chat-runter').hidden = false;
+    if (!still && !chatSichtbar()) $('nav-chat-punkt').hidden = false;
+  }
+
+  function chatNachricht(ev, still) {
+    if (!ev || !ev.id) return;
+    if (chatListe.querySelector('[data-id="' + CSS.escape(ev.id) + '"]')) return;
+    var z = el('div', 'cz' + (ev.first ? ' erstmals' : '') + (ev.bits > 0 ? ' bits' : ''));
+    z.dataset.id = ev.id;
+    z.dataset.user = ev.userId || '';
+    z.appendChild(el('span', 'zeit', uhrzeit(ev.ts)));
+    (ev.badges || []).forEach(function (b) {
+      // Nur Twitchs eigene Bildadressen, wie in chat.html.
+      if (!b || !/^https:\/\/static-cdn\.jtvnw\.net\//.test(b.url)) return;
+      var img = el('img', 'abz');
+      img.src = b.url;
+      img.alt = b.title || '';
+      img.title = b.title || '';
+      z.appendChild(img);
+    });
+    var wer = el('span', 'wer', ev.name || ev.login || '?');
+    wer.style.color = lesbar(ev.color);
+    z.appendChild(wer);
+    z.appendChild(document.createTextNode(': '));
+    var text = el('span', 'text');
+    textKnoten(text, String(ev.text || ''), ev.gifs, ev.emotes);
+    z.appendChild(text);
+    chatAnhaengen(z, still);
+  }
+
+  /** Was im Stream passiert, als eigene Zeile zwischen den Nachrichten.
+   *  Erstchatter und Bits fehlen bewusst: die zeigt schon die Nachricht. */
+  function alarmText(a) {
+    var n = a.name || 'Jemand';
+    switch (a.type) {
+      case 'sub': return n + ' hat abonniert' + (a.tier ? ' (Stufe ' + String(a.tier).charAt(0) + ')' : '');
+      case 'resub': return n + ' abonniert weiter' + (a.months ? ', seit ' + a.months + ' Monaten' : '');
+      case 'subgift': return n + ' verschenkt ein Abo' + (a.recipient ? ' an ' + a.recipient : '');
+      case 'massgift': return n + ' verschenkt ' + (a.amount || 'mehrere') + ' Abos';
+      case 'raid': return 'Raid von ' + n + (a.amount ? ' mit ' + a.amount + ' Zuschauern' : '');
+      case 'follow': return n + ' folgt jetzt';
+      case 'reward': return n + ' löst „' + (a.reward || 'Belohnung') + '“ ein';
+      default: return null;
+    }
+  }
+
+  function chatAlarm(a) {
+    var text = alarmText(a);
+    if (!text) return;
+    var z = el('div', 'cz system');
+    z.appendChild(el('span', 'zeit', uhrzeit()));
+    z.appendChild(document.createTextNode(text + (a.message ? ': ' + a.message : '')));
+    chatAnhaengen(z);
+  }
+
+  /** Von einem Mod geloescht: durchstreichen statt verschwinden lassen,
+   *  damit man am Pult sieht, dass da etwas war. */
+  function chatLoeschen(ev) {
+    var zeilen = chatListe.querySelectorAll('.cz:not(.system)');
+    for (var i = 0; i < zeilen.length; i++) {
+      var z = zeilen[i];
+      if ((!ev.messageId && !ev.userId) ||
+          (ev.messageId && z.dataset.id === ev.messageId) ||
+          (ev.userId && z.dataset.user === ev.userId)) z.classList.add('weg');
+    }
+  }
+
+  chatListe.addEventListener('scroll', function () {
+    chatKlebt = chatListe.scrollHeight - chatListe.scrollTop - chatListe.clientHeight < 40;
+    if (chatKlebt) $('chat-runter').hidden = true;
+  }, { passive: true });
+  // Emotes und GIFs laden nach und machen die Zeile hoeher. Ohne das
+  // rutscht die neueste Nachricht unter den Rand.
+  chatListe.addEventListener('load', function () { if (chatKlebt) nachUnten(); }, true);
+  $('chat-runter').addEventListener('click', function () { tippen(); nachUnten(); });
+
+  geteilt.addEventListener('change', function () {
+    if (geteilt.matches && $('tab-chat').classList.contains('an')) zeigeReiter('szenen');
+    if (geteilt.matches) chatGesehen();
+  });
+
+  // ------------------------------------------------------------ Test
+
+  function baueTest(knoepfe, demoLaeuft) {
+    var gruppen = $('test-gruppen');
+    gruppen.textContent = '';
+    var namen = [];
+    knoepfe.forEach(function (k) { if (namen.indexOf(k.gruppe) === -1) namen.push(k.gruppe); });
+    namen.forEach(function (g) {
+      var box = el('div', 'gruppe');
+      box.appendChild(el('h3', 'abschnitt', g));
+      var reihe = el('div', 'knoepfe');
+      knoepfe.filter(function (k) { return k.gruppe === g; }).forEach(function (k) {
+        var b = el('button', 'knopf', k.label);
+        b.type = 'button';
+        b.dataset.art = k.art;
+        if (k.nurOffline) b.dataset.offline = '1';
+        reihe.appendChild(b);
+      });
+      box.appendChild(reihe);
+      gruppen.appendChild(box);
+    });
+    setzeDemo(demoLaeuft);
+  }
+
+  function setzeDemo(laeuft) {
+    var d = $('demo');
+    d.dataset.art = laeuft ? 'demo-aus' : 'demo-an';
+    d.textContent = laeuft ? 'Vorführung stoppen' : 'Vorführung starten';
+    d.disabled = !laeuft && zustand.live;
+  }
+
+  function testRuf(knopf) {
+    tippen();
+    mitWarten(knopf, rufen('/test', { art: knopf.dataset.art })).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (typeof r.demo === 'boolean') setzeDemo(r.demo);
+    });
+  }
+  $('test-gruppen').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-art]');
+    if (b && !b.disabled) testRuf(b);
+  });
+  $('demo').addEventListener('click', function () { testRuf($('demo')); });
+
+  // ------------------------------------------------------------ Strom
+
+  var quelle = null;
+  var zuletzt = Date.now();
+
+  function verbinde() {
+    if (quelle) { try { quelle.close(); } catch (e) { /* zu */ } }
+    quelle = new EventSource('/events?quelle=pult');
+    zuletzt = Date.now();
+    quelle.onopen = function () { setzeNetz(true); };
+    quelle.onerror = function () {
+      setzeNetz(false);
+      // EventSource sagt nicht, ob es an der Anmeldung liegt. Eine kurze
+      // Frage klaert das, sonst stuende "keine Verbindung" fuer immer da.
+      holen('/soundboard/liste').then(function () { /* nur Netz */ }, function () { /* abgemeldet() hat schon */ });
+    };
+    quelle.onmessage = function (e) {
+      zuletzt = Date.now();
+      setzeNetz(true);
+      var ev;
+      try { ev = JSON.parse(e.data); } catch (err) { return; }
+      switch (ev.kind) {
+        case 'state':
+          zeigeStream(ev.stream);
+          if (ev.obs) zeigeObs(ev.obs);
+          if (ev.liegestuetze && !$('lz-karte').hidden) zeigeLz(ev.liegestuetze);
+          // Nach dem Neuverbinden: was fehlt, nachtragen. Schon Gezeigtes
+          // bleibt stehen, sonst waere der Rueckblick bei jedem Abriss weg.
+          (ev.chat || []).forEach(function (m) { chatNachricht(m, true); });
+          break;
+        case 'chat': chatNachricht(ev, false); break;
+        case 'alert': chatAlarm(ev); break;
+        case 'clear': chatLoeschen(ev); break;
+        case 'stream': zeigeStream(ev); break;
+        case 'obs': zeigeObs(ev); break;
+        case 'liegestuetze': if (!$('lz-karte').hidden) zeigeLz(ev); break;
+        case 'sound': knall(ev.id); break;
+        case 'sounds-geaendert': ladeSounds(); break;
+        case 'tts': ladeWartend(); break;
+        case 'fern-anfrage': ladeAnfragen(); break;
+      }
+    };
+  }
+
+  function setzeNetz(an) {
+    $('netz').classList.toggle('an', an);
+    var banner = $('banner');
+    banner.hidden = an;
+    if (!an) banner.textContent = 'Keine Verbindung zum Hub – verbinde neu …';
+  }
+
+  // Wachhund wie in client.js: der Hub schickt alle 15 s einen Herzschlag.
+  // Am Handy reisst die Leitung beim Wegwischen ab, ohne dass es jemand merkt.
+  setInterval(function () {
+    if (Date.now() - zuletzt > 45000) verbinde();
+  }, 10000);
+  document.addEventListener('visibilitychange', function () {
+    if (document.visibilityState === 'visible' && Date.now() - zuletzt > 20000) verbinde();
+  });
+
+  // ------------------------------------------------------------ Start
+
+  holen('/pult/knoepfe').then(function (b) {
+    baueTest(b.knoepfe || [], !!b.demo);
+    zustand.ttsAn = !!b.tts;
+    $('tts-karte').hidden = !b.tts;
+    if (b.liegestuetze) zeigeLz(b.liegestuetze);
+    ladeWartend();
+  }, function () { /* abgemeldet oder weg - zeigt sich oben */ });
+  ladeSounds();
+  ladeAnfragen();
+  verbinde();
+  wachHolen();
+
+  // Die Liste der Wartenden kommt nicht ueber den Strom (dort steht nur, was
+  // vorgelesen wird). Also nachsehen, solange das Pult offen ist.
+  setInterval(function () {
+    if (document.visibilityState === 'visible') ladeWartend();
+  }, 4000);
+  // Ob die Sound-Quelle in OBS offen ist, aendert sich ohne Ereignis.
+  setInterval(function () {
+    if (document.visibilityState === 'visible') ladeSounds();
+  }, 20000);
+
+  // Ein Reiter in der Adresse (Verknuepfung "Szenen" am App-Symbol) geht vor
+  // dem zuletzt benutzten.
+  var gemerkt = location.hash.slice(1) || null;
+  if (!gemerkt) { try { gemerkt = localStorage.getItem('pult-reiter'); } catch (e) { /* privat */ } }
+  // Am Tablet ist der naheliegende Anfang Szenen neben dem Chat.
+  if (!gemerkt && geteilt.matches) gemerkt = 'szenen';
+  if (gemerkt && $('tab-' + gemerkt)) zeigeReiter(gemerkt);
+
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js').catch(function (e) {
+      console.warn('[pult] Service Worker nicht registriert', e);
+    });
+  }
+})();

apps/overlay-web/public/sounds.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Soundboard</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Eine reine Tonquelle. Im Stream ist nichts zu sehen - ein Sound, der
+ * zusaetzlich seinen Namen ins Bild schreibt, nimmt ihm die Pointe.
+ *
+ * Mit ?probe=1 steht unten, was gerade klingt. Damit laesst sich im Browser
+ * pruefen, ob ein Druck am Handy hier ankommt, auch ohne Lautsprecher. */
+#liste {
+  position: fixed;
+  left: 12px; right: 12px; bottom: 12px;
+  display: none;
+  flex-direction: column;
+  gap: 6px;
+  font: 600 16px/1.2 var(--font-zahl);
+}
+body.probe #liste { display: flex; }
+.laeuft {
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: var(--tinte-klar);
+  border-left: 4px solid var(--lila);
+}
+.laeuft.fehler { border-left-color: var(--rot); }
+</style>
+</head>
+<body>
+  <div id="liste"></div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var liste = document.getElementById('liste');
+  var schluessel = Overlay.param('key', '');
+  /* Lautstaerke der ganzen Quelle. Besser im OBS-Mixer regeln; das hier ist
+   * fuer den Fall, dass alle Sounds gemeinsam zu laut aufgenommen sind. */
+  var gesamt = Math.max(0, Math.min(1, Overlay.param('laut', 1)));
+  /* Mehr gleichzeitig klingt nicht mehr nach Soundboard, sondern nach Unfall.
+   * Der aelteste Sound macht dem neuen Platz. */
+  var maxGleichzeitig = Math.max(1, Overlay.param('max', 4));
+  var laufend = [];
+
+  function zeile(name, fehler) {
+    var d = document.createElement('div');
+    d.className = 'laeuft' + (fehler ? ' fehler' : '');
+    d.textContent = name;
+    liste.appendChild(d);
+    return d;
+  }
+
+  function aufhoeren(eintrag) {
+    var i = laufend.indexOf(eintrag);
+    if (i !== -1) laufend.splice(i, 1);
+    try { eintrag.ton.pause(); } catch (e) { /* egal */ }
+    eintrag.ton.removeAttribute('src');
+    if (eintrag.zeile.parentNode) eintrag.zeile.parentNode.removeChild(eintrag.zeile);
+  }
+
+  function alleStopp() {
+    laufend.slice().forEach(aufhoeren);
+  }
+
+  Overlay.on('sound', function (ev) {
+    while (laufend.length >= maxGleichzeitig) aufhoeren(laufend[0]);
+
+    var ton = new Audio('/soundboard/datei/' + encodeURIComponent(ev.id) +
+      (schluessel ? '?key=' + encodeURIComponent(schluessel) : ''));
+    var laut = typeof ev.laut === 'number' ? ev.laut : 0.8;
+    ton.volume = Math.max(0, Math.min(1, laut * gesamt));
+    var eintrag = { ton: ton, zeile: zeile(ev.name || 'Sound') };
+    laufend.push(eintrag);
+
+    ton.onended = function () { aufhoeren(eintrag); };
+    ton.onerror = function () {
+      console.error('[sounds] nicht abspielbar', ev.name, ton.error && ton.error.code);
+      eintrag.zeile.classList.add('fehler');
+      setTimeout(function () { aufhoeren(eintrag); }, 3000);
+    };
+    // Notbremse: ein Sound, der nie "zu Ende" meldet, belegte sonst fuer
+    // immer einen Platz.
+    setTimeout(function () { aufhoeren(eintrag); }, 5 * 60 * 1000);
+
+    var p = ton.play();
+    // Ein normaler Browser spielt erst nach einem Klick in die Seite. OBS
+    // nicht - wer hier im Browser testet, sieht es an der roten Zeile.
+    if (p && p.catch) p.catch(function (e) {
+      console.error('[sounds] Wiedergabe verweigert', e && e.name);
+      eintrag.zeile.textContent = (ev.name || 'Sound') + ' (erst in die Seite klicken)';
+      eintrag.zeile.classList.add('fehler');
+      setTimeout(function () { aufhoeren(eintrag); }, 3000);
+    });
+  });
+
+  Overlay.on('sound-stopp', alleStopp);
+  // Der Panikschalter gilt auch hier.
+  Overlay.on('still', alleStopp);
+  // Nach dem Neuverbinden nichts nachholen: ein Sound zur falschen Zeit ist
+  // schlimmer als keiner.
+  Overlay.on('state', function () { });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/starting.html

@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Pausenbild</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Das einzige Overlay mit deckendem Hintergrund: es ersetzt das Bild, statt
+ * darueber zu liegen. Gedacht als eigene OBS-Szene fuer "gleich geht es los",
+ * Pause und Ende. Text ueber ?text= und ?unter=. */
+body { background: #0a0813; }
+
+#grund {
+  position: fixed;
+  inset: -20%;
+  background:
+    radial-gradient(42% 42% at 22% 28%, rgba(169, 112, 255, .55), transparent 70%),
+    radial-gradient(38% 38% at 78% 32%, rgba(79, 209, 197, .45), transparent 70%),
+    radial-gradient(45% 45% at 55% 82%, rgba(255, 79, 163, .40), transparent 70%);
+  filter: blur(48px);
+  animation: treiben 28s ease-in-out infinite alternate;
+}
+@keyframes treiben {
+  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
+  50%  { transform: translate(-3%, 2.5%) scale(1.1) rotate(4deg); }
+  100% { transform: translate(3%, -2%) scale(1.04) rotate(-3deg); }
+}
+
+/* Feines Raster darueber: nimmt dem Verlauf das Billige und gibt dem Bild
+ * eine Struktur, die auch nach der Twitch-Kompression noch da ist. */
+#raster {
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
+}
+
+#mitte {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  text-align: center;
+  gap: 26px;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(64px, 8.5vw, 148px);
+  font-weight: 800;
+  letter-spacing: -.035em;
+  /* Unterlaengen brauchen Platz. `background-clip: text` faerbt nur, was
+   * innerhalb der Polsterbox liegt - was darueber hinausragt, bleibt
+   * durchsichtig und sieht abgeschnitten aus. Bei fetter Schrift in dieser
+   * Groesse reicht eine knappe Zeilenhoehe dafuer nicht.
+   *
+   * Nachgemessen am "g" in "Gleich geht es los": mit 1.04 und .06em fehlte
+   * noch ein Stueck vom Bogen. */
+  line-height: 1.18;
+  padding-bottom: .14em;
+  background: linear-gradient(100deg, #fff 18%, var(--lila) 48%, var(--tuerkis) 78%, #fff 96%);
+  background-size: 260% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: schimmern 7s linear infinite;
+  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .55));
+}
+@keyframes schimmern { to { background-position: 260% 0; } }
+
+#unter {
+  font-size: clamp(20px, 2vw, 30px);
+  color: var(--schrift-leise);
+  max-width: 34ch;
+}
+
+/* Der Taktgeber: fuenf Balken, die atmen. Ohne bewegtes Element wirkt ein
+ * Standbild wie ein eingefrorener Stream, und Zuschauer laden neu. */
+#takt { display: flex; gap: 12px; align-items: flex-end; height: 68px; margin-top: 10px; }
+#takt i {
+  display: block;
+  width: 13px;
+  border-radius: 5px;
+  background: linear-gradient(180deg, var(--tuerkis), var(--lila));
+  animation: atmen 1.5s ease-in-out infinite;
+}
+#takt i:nth-child(1) { height: 40%; animation-delay: 0s; }
+#takt i:nth-child(2) { height: 75%; animation-delay: .18s; }
+#takt i:nth-child(3) { height: 100%; animation-delay: .36s; }
+#takt i:nth-child(4) { height: 65%; animation-delay: .54s; }
+#takt i:nth-child(5) { height: 35%; animation-delay: .72s; }
+@keyframes atmen {
+  0%, 100% { transform: scaleY(.35); opacity: .6; }
+  50%      { transform: scaleY(1); opacity: 1; }
+}
+
+#fuss {
+  position: fixed;
+  left: 0; right: 0; bottom: 42px;
+  display: flex;
+  justify-content: center;
+  gap: 44px;
+  font-size: 22px;
+  color: var(--schrift-leise);
+}
+#fuss b { color: var(--schrift); font-weight: 600; }
+#uhr { font-variant-numeric: tabular-nums; }
+</style>
+</head>
+<body>
+  <div id="grund"></div>
+  <div id="raster"></div>
+  <div id="mitte">
+    <h1 id="gross">Gleich geht es los</h1>
+    <div id="unter"></div>
+    <div id="takt"><i></i><i></i><i></i><i></i><i></i></div>
+  </div>
+  <div id="fuss">
+    <span id="uhr"></span>
+    <span>twitch.tv/<b id="kanal">abdulive_</b></span>
+    <span id="thema"></span>
+  </div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  document.getElementById('gross').textContent = Overlay.param('text', 'Gleich geht es los');
+  document.getElementById('unter').textContent = Overlay.param('unter', '');
+  document.getElementById('kanal').textContent = Overlay.param('kanal', 'abdulive_');
+
+  var uhr = document.getElementById('uhr');
+  function zeit() {
+    uhr.textContent = new Date().toLocaleTimeString('de-DE',
+      { hour: '2-digit', minute: '2-digit' });
+  }
+  zeit();
+  setInterval(zeit, 10000);
+
+  // Laeuft der Stream schon, steht unten, worum es geht. Das ist der
+  // Unterschied zwischen einem Pausenbild und einem Standbild.
+  var thema = document.getElementById('thema');
+  function stand(s) {
+    thema.textContent = s.live && s.category ? 'heute: ' + s.category : '';
+  }
+  Overlay.on('stream', stand);
+  Overlay.on('state', function (ev) { stand(ev.stream); });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/status.html

@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Statusleiste</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+#leiste {
+  position: fixed;
+  left: 28px; right: 28px; top: 22px;
+  height: 92px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 28px;
+  padding: 0 30px;
+  border-radius: 20px;
+  background: var(--tinte-klar);
+  backdrop-filter: blur(16px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, .1);
+  box-shadow: var(--schatten), var(--glanz);
+  /* Ein Farbverlauf an der Oberkante statt eines Rahmens: er bindet die
+   * Leiste an die Marke, ohne einen Kasten um alles zu ziehen. */
+  overflow: hidden;
+}
+#leiste::before {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--lila), var(--pink), var(--tuerkis), var(--lila));
+  background-size: 300% 100%;
+  animation: wandern 9s linear infinite;
+}
+@keyframes wandern { to { background-position: 300% 0; } }
+
+.marke { display: flex; align-items: center; gap: 12px; }
+.punkt {
+  width: 13px; height: 13px;
+  border-radius: 50%;
+  background: var(--rot);
+  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
+}
+body.live .punkt { background: var(--rot); animation: klopfen 2s ease-out infinite; }
+body:not(.live) .punkt { background: #555; }
+@keyframes klopfen {
+  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
+  70%  { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+.kanal { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
+
+.mitte { min-width: 0; }
+#titel {
+  font-size: 25px; font-weight: 600;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#kategorie { font-size: 17px; color: var(--schrift-leise); margin-top: 2px; }
+
+.werte { display: flex; gap: 30px; }
+.wert { text-align: right; min-width: 92px; }
+.wert .zahl {
+  font-size: 30px; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  display: block;
+}
+.wert .beschriftung {
+  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+/* Kurzes Aufleuchten, wenn sich eine Zahl aendert. Ohne das uebersieht man
+ * jede Veraenderung, weil die Leiste sonst voellig still steht. */
+.zahl.neu { animation: aufleuchten .8s ease-out; }
+@keyframes aufleuchten {
+  0%   { color: var(--tuerkis); transform: translateY(-3px); }
+  100% { color: inherit; transform: none; }
+}
+</style>
+</head>
+<body>
+  <div id="leiste">
+    <div class="marke">
+      <span class="punkt"></span>
+      <span class="kanal kontur" id="kanal">abdulive_</span>
+    </div>
+    <div class="mitte">
+      <div id="titel" class="kontur">nicht live</div>
+      <div id="kategorie"></div>
+    </div>
+    <div class="werte">
+      <div class="wert"><span class="zahl" id="zuschauer">-</span>
+        <span class="beschriftung">Zuschauer</span></div>
+      <div class="wert"><span class="zahl" id="laufzeit">-</span>
+        <span class="beschriftung">live seit</span></div>
+    </div>
+  </div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var titel = document.getElementById('titel');
+  var kategorie = document.getElementById('kategorie');
+  var zuschauer = document.getElementById('zuschauer');
+  var laufzeit = document.getElementById('laufzeit');
+  var kanal = document.getElementById('kanal');
+  var seit = null;
+
+  kanal.textContent = Overlay.param('kanal', 'abdulive_');
+
+  function setze(el, wert) {
+    if (el.textContent === wert) return;
+    el.textContent = wert;
+    el.classList.remove('neu');
+    // Neuzeichnen erzwingen, sonst startet die Animation beim zweiten Mal nicht.
+    void el.offsetWidth;
+    el.classList.add('neu');
+  }
+
+  function stand(ev) {
+    document.body.classList.toggle('live', !!ev.live);
+    titel.textContent = ev.live ? (ev.title || 'ohne Titel') : 'nicht live';
+    kategorie.textContent = ev.live ? (ev.category || '') : '';
+    setze(zuschauer, ev.live ? Overlay.zahl(ev.viewers) : '-');
+    seit = ev.live ? ev.startedAt : null;
+    tick();
+  }
+
+  function tick() {
+    laufzeit.textContent = seit ? Overlay.laufzeit(seit) : '-';
+  }
+  setInterval(tick, 10000);
+
+  Overlay.on('stream', stand);
+  Overlay.on('state', function (ev) { stand(ev.stream); });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/sw.js

@@ -0,0 +1,47 @@
+/* Service Worker fuer das Pult.
+ *
+ * Er macht genau zwei Dinge: er ist da, damit sich das Pult als App
+ * installieren laesst, und er haelt die Huelle des Pults vor, damit es ohne
+ * Netz wenigstens aufgeht und "keine Verbindung" sagen kann statt einer
+ * leeren Fehlerseite des Browsers.
+ *
+ * Immer zuerst das Netz: nach dem Ausrollen soll sofort die neue Fassung
+ * laufen, nicht die aus dem Speicher. Alles, was nicht auf der Liste steht -
+ * Ereignisstrom, Knoepfe, Sounds, die Browser-Sources fuer OBS -, fasst er
+ * nicht an. Ein Pult, das einen Szenenwechsel aus dem Speicher beantwortet,
+ * waere schlimmer als gar keins. */
+
+var SPEICHER = 'pult-v1';
+var HUELLE = ['/pult', '/pult.css', '/pult.js', '/manifest.webmanifest',
+  '/icons/pult-192.png', '/icons/apple-touch-icon.png'];
+
+self.addEventListener('install', function () { self.skipWaiting(); });
+
+self.addEventListener('activate', function (e) {
+  e.waitUntil(caches.keys().then(function (namen) {
+    return Promise.all(namen.filter(function (n) { return n !== SPEICHER; })
+      .map(function (n) { return caches.delete(n); }));
+  }).then(function () { return self.clients.claim(); }));
+});
+
+self.addEventListener('fetch', function (e) {
+  var url = new URL(e.request.url);
+  if (e.request.method !== 'GET' || url.origin !== self.location.origin) return;
+  if (HUELLE.indexOf(url.pathname) === -1) return;
+
+  e.respondWith(fetch(e.request).then(function (res) {
+    // Nur Gelungenes merken. Die Anmeldeseite (401) gehoert nicht in den
+    // Speicher, sonst steht sie beim naechsten Funkloch statt des Pults da.
+    if (res.ok) {
+      var kopie = res.clone();
+      caches.open(SPEICHER).then(function (c) { c.put(url.pathname, kopie); });
+    }
+    return res;
+  }, function () {
+    return caches.match(url.pathname).then(function (r) {
+      return r || new Response('Keine Verbindung zum Hub.', {
+        status: 503, headers: { 'content-type': 'text/plain; charset=utf-8' },
+      });
+    });
+  }));
+});

apps/overlay-web/public/theme.css

@@ -0,0 +1,122 @@
+/* Gemeinsames Aussehen aller Browser-Sources.
+ *
+ * Zwei Dinge gelten auf jeder Seite und sind der Grund, warum es diese Datei
+ * gibt:
+ *
+ * 1. Der Hintergrund ist durchsichtig. Eine Browser-Source mit weissem
+ *    Hintergrund ist der haeufigste Anfaengerfehler, und man sieht ihn erst
+ *    in der Aufzeichnung.
+ * 2. Text liegt ueber bewegtem Bild. Reine Farbe reicht dafuer nicht -
+ *    jeder Text bekommt eine dunkle Kontur, sonst verschwindet er im hellen
+ *    Gameplay. Deshalb `paint-order` und der Schatten unten.
+ */
+
+:root {
+  /* Twitch-Lila wie im Discord-Bauplan, damit Stream und Server zusammengehoeren. */
+  --lila: #a970ff;
+  --lila-tief: #6441a5;
+  --tuerkis: #4fd1c5;
+  --pink: #ff4fa3;
+  --gold: #ffc53d;
+  --gruen: #4ade80;
+  --rot: #ef4444;
+
+  --tinte: #120e1d;
+  --tinte-klar: rgba(18, 14, 29, .72);
+  --schrift: #f6f3ff;
+  --schrift-leise: #c5bde0;
+
+  --rund: 14px;
+  --schatten: 0 12px 40px rgba(0, 0, 0, .55);
+  --glanz: inset 0 1px 0 rgba(255, 255, 255, .12);
+
+  /* Segoe UI Variable gibt es auf Windows 11 - Abdus Rechner. Der Rest der
+   * Liste ist Rueckfall fuer Entwicklung auf anderen Systemen. */
+  --font: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
+  --font-zahl: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  overflow: hidden;
+  font-family: var(--font);
+  color: var(--schrift);
+  /* OBS rendert mit eigener Skalierung; ohne das wirken Kanten weich. */
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  cursor: none;
+}
+
+.kontur {
+  paint-order: stroke fill;
+  -webkit-text-stroke: 4px rgba(0, 0, 0, .55);
+  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
+}
+
+/* Glasplatte: der Traeger fuer alles, was ueber dem Spiel steht. */
+.glas {
+  background: var(--tinte-klar);
+  backdrop-filter: blur(14px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, .1);
+  border-radius: var(--rund);
+  box-shadow: var(--schatten), var(--glanz);
+}
+
+/* Der Lichtstreifen, der einmal ueber eine Flaeche wandert. Wird von den
+ * Einblendungen benutzt und ist der Grund, warum eine Einblendung "teuer"
+ * aussieht, ohne dass ein Video dahintersteckt. */
+@keyframes streifen {
+  from { transform: translateX(-120%) skewX(-18deg); }
+  to   { transform: translateX(320%)  skewX(-18deg); }
+}
+
+.streifen::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 28%;
+  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
+  animation: streifen 1.5s cubic-bezier(.3, 0, .2, 1) .35s both;
+  pointer-events: none;
+}
+
+@keyframes pulsieren {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%      { opacity: .55; transform: scale(.82); }
+}
+
+/* Zum Ansehen im normalen Browser: ?probe=1 legt einen dunklen Grund unter
+ * die Seite. Ohne den steht heller Text auf Weiss, und man sieht nichts -
+ * in OBS liegt das Overlay ueber dem Spiel, im Browser ueber gar nichts. */
+body.probe {
+  background:
+    radial-gradient(60% 60% at 30% 25%, #2a1f45, transparent 70%),
+    radial-gradient(50% 50% at 75% 70%, #123c3a, transparent 70%),
+    #0b0912;
+}
+
+/* Wer im Browser nachsieht, will nicht raten, ob die Verbindung steht.
+ * In OBS ist der Punkt unsichtbar, weil er nur bei Verlust erscheint. */
+.getrennt {
+  position: fixed;
+  right: 10px;
+  bottom: 8px;
+  font: 500 12px/1 var(--font-zahl);
+  color: var(--rot);
+  background: rgba(0, 0, 0, .7);
+  padding: 6px 10px;
+  border-radius: 999px;
+  opacity: 0;
+  transition: opacity .4s;
+}
+body.offline .getrennt { opacity: 1; }
+
+/* Wer mit prefers-reduced-motion arbeitet, bekommt in OBS trotzdem die
+ * Animationen - eine Browser-Source hat keinen Menschen mit Vestibular-
+ * problemen davor. Die Einstellung wird hier bewusst nicht beachtet. */

apps/overlay-web/public/tts.html

@@ -0,0 +1,184 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Vorlesen</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Die Seite zeigt fast nichts. Sie ist eine Tonquelle mit einer kleinen
+ * Sichtkontrolle daneben - man soll sehen, was gerade gesprochen wird, und
+ * zwar auch als Zuschauer. Wer nur hoert, was vorgelesen wird, kann nicht
+ * nachlesen, wenn er es nicht verstanden hat. */
+#kasten {
+  position: fixed;
+  left: 16px; right: 16px; bottom: 16px;
+  padding: 14px 18px;
+  border-radius: 14px;
+  background: var(--tinte-klar);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, .1);
+  box-shadow: var(--schatten), var(--glanz);
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity .3s, transform .3s;
+}
+#kasten.an { opacity: 1; transform: none; }
+
+.wer {
+  font-size: 13px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--tuerkis);
+  margin-bottom: 3px;
+}
+.was { font-size: 22px; line-height: 1.35; }
+
+/* Ein Hinweis fuer den Fall, dass eine Nachricht ohne Ton bleibt. Im Stream
+ * soll das auffallen, nicht stillschweigend fehlen. */
+#fehlt {
+  position: fixed;
+  left: 16px; top: 16px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(239, 68, 68, .9);
+  font: 600 15px/1.3 var(--font-zahl);
+  max-width: 520px;
+  display: none;
+}
+</style>
+</head>
+<body>
+  <div id="fehlt">
+    Kein Ton: der Hub konnte nicht sprechen, und hier gibt es keine deutsche
+    Stimme. Die Nachricht wird nur angezeigt.
+  </div>
+  <div id="kasten"><div class="wer" id="wer"></div><div class="was" id="was"></div></div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var kasten = document.getElementById('kasten');
+  var werEl = document.getElementById('wer');
+  var wasEl = document.getElementById('was');
+
+  var sprache = Overlay.param('sprache', 'de-DE');
+  var tempo = Overlay.param('tempo', 1);
+  var lautstaerke = Math.max(0, Math.min(1, Overlay.param('laut', 1)));
+  var schluessel = Overlay.param('key', '');
+  var fehltEl = document.getElementById('fehlt');
+  var warteschlange = [];
+  var laeuft = false;
+  /* Was gerade klingt, damit der Panikschalter es abbrechen kann. */
+  var aktuell = null;
+
+  /* Gesprochen wird im Hub (Piper), hier wird nur abgespielt. Das hat zwei
+   * Gruende: die eingebaute Sprachausgabe von OBS' Browser sah keine deutsche
+   * Stimme und las amerikanisch, und ein <audio> laeuft sicher ueber OBS'
+   * Tonspur statt am Mixer vorbei.
+   *
+   * Die Browser-Sprachausgabe bleibt nur als Notnagel, wenn der Hub keinen
+   * Ton liefern konnte - und auch dann nur mit einer deutschen Stimme. Eine
+   * englische Stimme, die deutschen Text radebrecht, ist schlimmer als Stille. */
+  function deutscheStimme() {
+    if (typeof window.speechSynthesis === 'undefined' ||
+        typeof window.SpeechSynthesisUtterance === 'undefined') return null;
+    var alle = window.speechSynthesis.getVoices() || [];
+    var kurz = sprache.slice(0, 2).toLowerCase();
+    for (var i = 0; i < alle.length; i++) {
+      if (alle[i].lang && alle[i].lang.toLowerCase().indexOf(kurz) === 0) return alle[i];
+    }
+    return null;
+  }
+
+  function zeige(name, text) {
+    werEl.textContent = name;
+    wasEl.textContent = text;
+    kasten.classList.add('an');
+  }
+  function verstecke() { kasten.classList.remove('an'); fehltEl.style.display = 'none'; }
+
+  /* Geschaetzte Sprechdauer, als Notbremse und fuer die stumme Anzeige. */
+  function dauerMs(text) { return 3000 + text.length * 90; }
+
+  function naechste() {
+    var n = warteschlange.shift();
+    aktuell = null;
+    if (!n) { laeuft = false; verstecke(); return; }
+    laeuft = true;
+    zeige(n.name, n.text);
+
+    var weiter = false;
+    var gehWeiter = function () {
+      if (weiter) return;
+      weiter = true;
+      setTimeout(naechste, 400);
+    };
+    // Notbremse: haengt die Wiedergabe, steht die Warteschlange sonst fuer
+    // den Rest des Streams. Grosszuegig bemessen.
+    setTimeout(gehWeiter, 8000 + dauerMs(n.text) * 2);
+
+    if (n.audio) {
+      var ton = new Audio('/tts/audio/' + encodeURIComponent(n.id) +
+        (schluessel ? '?key=' + encodeURIComponent(schluessel) : ''));
+      ton.volume = lautstaerke;
+      ton.onended = gehWeiter;
+      ton.onerror = function () {
+        console.error('[tts] Ton nicht abspielbar', ton.error && ton.error.code);
+        gehWeiter();
+      };
+      aktuell = { stopp: function () { try { ton.pause(); } catch (e) { /* egal */ } } };
+      var p = ton.play();
+      // Ein normaler Browser blockiert Ton ohne vorherigen Klick. OBS nicht -
+      // wer die Seite zum Testen im Browser offen hat, sieht es hier.
+      if (p && p.catch) p.catch(function (e) {
+        console.error('[tts] Wiedergabe verweigert', e && e.name);
+        gehWeiter();
+      });
+      return;
+    }
+
+    var stimme = deutscheStimme();
+    if (!stimme) {
+      console.error('[tts] Kein Ton vom Hub und keine deutsche Stimme - nur Anzeige.');
+      fehltEl.style.display = 'block';
+      setTimeout(gehWeiter, dauerMs(n.text));
+      return;
+    }
+    var rede = new SpeechSynthesisUtterance(n.text);
+    rede.lang = stimme.lang;
+    rede.voice = stimme;
+    rede.rate = tempo;
+    rede.volume = lautstaerke;
+    rede.onend = gehWeiter;
+    rede.onerror = function (e) {
+      console.error('[tts] Sprachausgabe fehlgeschlagen', e && e.error);
+      gehWeiter();
+    };
+    aktuell = { stopp: function () { try { window.speechSynthesis.cancel(); } catch (e) { /* egal */ } } };
+    window.speechSynthesis.speak(rede);
+  }
+
+  Overlay.on('tts', function (ev) {
+    warteschlange.push({ id: ev.id, name: ev.name, text: ev.text, audio: !!ev.audio });
+    if (warteschlange.length > 10) warteschlange.splice(0, warteschlange.length - 10);
+    if (!laeuft) naechste();
+  });
+
+  // Panikschalter: sofort still, Warteschlange weg.
+  Overlay.on('still', function () {
+    warteschlange.length = 0;
+    if (aktuell) aktuell.stopp();
+    aktuell = null;
+    laeuft = false;
+    verstecke();
+  });
+
+  // Nach dem Neuverbinden NICHT nachholen: eine Nachricht von vor zehn
+  // Minuten vorzulesen ist schlimmer, als sie zu verpassen.
+  Overlay.on('state', function () { });
+})();
+</script>
+</body>
+</html>

apps/raid-scout/README.md

@@ -1,5 +0,0 @@
-# @abdulive/raid-scout
-
-Raid-Ziele finden und bewerten, Raid-Historie und Erwiderungs-Erinnerung.
-
-Spezifikation: [docs/projects/raid-network.md](../../docs/projects/raid-network.md)

apps/recap/README.md

@@ -1,5 +0,0 @@
-# @abdulive/recap
-
-Stream-Zusammenfassung nach Streamende als Discord-Post.
-
-Spezifikation: [docs/projects/stream-recap.md](../../docs/projects/stream-recap.md)

apps/vod-chapters/README.md

@@ -1,5 +0,0 @@
-# @abdulive/vod-chapters
-
-Kapitel-Timestamps aus Kategorie- und Szenenwechseln.
-
-Spezifikation: [docs/projects/vod-chapters.md](../../docs/projects/vod-chapters.md)

config/config.example.yaml

@@ -70,47 +70,87 @@ clipper:
     # Der Hotkey wird in OBS auf "Wiedergabepuffer speichern" gelegt. Es gibt
     # bewusst keinen eigenen Hotkey-Dienst - siehe ADR-0004, Punkt 4.
 
+# Go-Live-Ankuendigung auf Discord.
+#
+# mode: live  -> Post in #ankuendigungen, mit Ping an die Rolle Live-Ping
+#       draft -> derselbe Post in #technik-log, ohne Ping. Zum Zusehen.
+#
+# Zum Ausprobieren, ohne auf einen Stream zu warten:
+#   abdulive golive:test           (interner Kanal, ohne Ping)
+#   abdulive golive:test --echt    (echter Kanal, mit Ping)
 broadcaster:
   enabled: true
-  mode: draft                 # draft | live
+  mode: live
+  # Twitch setzt Titel und Kategorie erst kurz nach dem Start. Wer sofort
+  # postet, kuendigt regelmaessig den Titel des letzten Streams an.
   delaySecondsAfterOnline: 60
+  # Innerhalb dieser Zeit wird kein zweites Mal angekuendigt. Faengt den Fall
+  # ab, dass Twitch nach einem Aussetzer eine neue Stream-ID vergibt.
   cooldownHours: 6
+  pingRole: Live-Ping         # leer = Post ohne Ping
+  obsScreenshot: true         # Vorschaubild aus OBS statt von Twitch
   platforms:
     discord: true
-    bluesky: true
+    bluesky: false            # noch nicht gebaut
     mastodon: false
-    instagramStoryImage: true
+    instagramStoryImage: false
 
-community:
+# Kanalpunkt-Belohnungen und was sie ausloesen.
-  greetings:
+#
-    enabled: true
+# Zugeordnet wird ueber den Titel der Belohnung auf Twitch (Gross-/Klein-
-    minSecondsBetween: 20
+# schreibung egal) oder ueber die stabile ID; liegt beides vor, gewinnt die ID.
-    maxPerStream: 10
+# Belohnungen, die hier nicht stehen, werden protokolliert und sonst in Ruhe
-    returningAfterDays: 21
+# gelassen - nicht jede Belohnung geht das Toolkit etwas an.
-    milestones: [5, 10, 25, 50, 100]
+#
-    suppressWhileStreamerSpeaking: true
+# Aktionen: konfetti | emote-regen | einblendung | tts | liegestuetze | nichts
-  overlayHint: true
+rewards:
+  enabled: false              # aus, bis hier bewusst Belohnungen stehen
+  belohnungen: []
+  # Beispiel:
+  # belohnungen:
+  #   - titel: Konfetti
+  #     aktion: konfetti
+  #   - titel: Nachricht vorlesen
+  #     aktion: tts
+  #     maxZeichen: 150
+  #   - titel: 5 Liegestütze
+  #     aktion: liegestuetze
+  #     anzahl: 5               # so viele kommen je Einloesung dazu
+  tts:
+    # Vorgabe ist die Freigabe von Hand, und das aus gutem Grund: Kanalpunkte
+    # sammeln sich beim Zugucken von allein an und sind damit kaum eine
+    # Huerde. Auf `false` gestellt hat man eine Vorlesefunktion fuer Fremde
+    # im eigenen Stream. Siehe docs/projects/chat-control.md.
+    freigabe: true
+    maxZeichen: 200
+    # Zu langer Text wird abgelehnt, nicht gekuerzt - ein halb vorgelesener
+    # Satz ist schlimmer als gar keiner.
+    blockliste: []
+    proPersonProStunde: 3
+    # Gesprochen wird im Hub mit Piper, nicht im Browser - dort haengt die
+    # Stimme am Rechner, der streamt. Name einer Datei unter models/piper/
+    # (ohne .onnx) oder ein absoluter Pfad. Einrichten: scripts/install-piper.sh
+    stimme: de_DE-thorsten-medium
+    # Nur bei Stimmen mit mehreren Sprechern, z. B. de_DE-mls-medium (0-235).
+    # Die klang im Stream allerdings verwaschen.
+    # sprecher: 0
 
-raidScout:
+# Overlay-Server. Zugleich die einzige Tuer nach aussen, wenn der Dienst
-  minViewers: 5
+# zentral laeuft: Uebersicht, Einrichtung und OAuth-Rueckruf haengen daran.
-  maxViewers: 30
-  minUptimeMinutes: 30
-  maxUptimeMinutes: 300
-  languages: [de]
-  topN: 5
-
-recap:
-  enabled: true
-  delayMinutesAfterOffline: 10
-  minStreamMinutes: 20
-  hideViewerNumbersIfWeak: true
-  topChatters: 3
-  topClips: 2
-
-loyalty:
-  enabled: false              # spaetere Ausbaustufe
 overlay:
   port: 4791
+  enabled: true
+
+# Oeffentliche Adresse, ohne Schraegstrich am Ende.
+#
+# Leer = der Dienst laeuft lokal und bindet an 127.0.0.1. Ist etwas gesetzt,
+# bindet er an 0.0.0.0 (der Reverse-Proxy sitzt in einem anderen Container)
+# und der OAuth-Rueckruf von Twitch geht an <publicUrl>/callback - genau so
+# muss er auch in der Twitch-App hinterlegt sein.
+#
+# Die Umgebungsvariable PUBLIC_URL gewinnt gegen diesen Wert.
+publicUrl: ""
+
 dashboard:
   port: 4792
 ingestServer:

docs/01-architecture.md

@@ -2,6 +2,9 @@
 
 ## Bild
 
+Stand vor dem Umzug in den Hub (ADR-0008). Raid-Scout, Auswertung,
+VOD-Kapitel, Community-Gedaechtnis und Recap sind seit 2026-10-27 gestrichen.
+
 ```
                     Twitch                     OBS
               ┌──────────────────┐        ┌───────────┐
@@ -20,19 +23,15 @@
               ┌─────────────────┐   ┌──────────────────────┐
               │  SQLite         │   │  Event-Bus           │
               │  data/db/       │   │  (in-proc + WS 4790) │
-              └────────┬────────┘   └──────────┬───────────┘
+              └─────────────────┘   └──────────┬───────────┘
-                       │                       │
+                                               │
-   ┌───────────┬───────┼───────────┬───────────┼───────────┬──────────┐
+                                     ┌─────────┴─────────┐
-   ▼           ▼       ▼           ▼           ▼           ▼          ▼
+                                     ▼                   ▼
- dashboard  recap  raid-scout  vod-chapters community  overlay-   clipper
+                               overlay-server      clipper-Kette
-                                                        server       │
+                               (Pult, Sounds)      ffmpeg, whisper
-                                                          │          │
+                                     │                   │
-                                                    overlay-web   ffmpeg
+                               overlay-web         data/clips
-                                                    (Browser-      whisper
+                               (Browser-Source)
-                                                     Source)          │
-                                                                 data/clips
-                                                                      │
-                                                                 broadcaster
 ```
 
 ## Prozesse

docs/04-roadmap.md

@@ -29,24 +29,11 @@ und Chat sowie Zuschauerzahlen vollständig in der DB stehen.
 **Fertig, wenn:** Erstchatter werden erkannt und begrüßt, Stream-Start wird
 automatisch angekündigt.
 
-## M4 — Auswertung (Woche 5–6)
+## M4 bis M6 — gestrichen
 
-- [ ] `apps/dashboard`: Stream-Zeitachse, Abgangs-Analyse
+Auswertung (`apps/dashboard`), Netzwerk (`apps/raid-scout`) und Recap
-- [ ] Titel-/Kategorie-Performance mit Stichprobenhinweis
+(`apps/recap`) sind seit 2026-10-27 gestrichen, samt Spezifikationen. Der Hub
-- [ ] Kohortenansicht neu vs. wiederkehrend
+bleibt bei OBS-Anbindung, Overlay, Pult, Kanalpunkten und Discord.
-- [ ] Betriebsstatus-Seite
-- [ ] Spike-Detektor an echten Daten kalibrieren und scharf schalten
-
-## M5 — Netzwerk (Woche 7)
-
-- [ ] `apps/raid-scout`: Kandidatensuche, Scoring, `!raidziel`
-- [ ] Raid-Historie und Erwiderungs-Erinnerung
-- [ ] Overlay-Panel für das Streamende
-
-## M6 — Recap (Woche 8)
-
-- [ ] `apps/recap`: Discord-Post nach Streamende
-- [ ] Clip-Einbettung, Erstchatter-Begrüßung, Wochenvergleich
 
 ## Später
 

docs/07-mvp-plan.md

@@ -260,8 +260,8 @@ in unter zwei Minuten entscheiden, welche Clips hochgeladen werden.
 
 Der IRC-Client aus S1 liegt ohnehin da, das `first-msg`-Tag ebenso. Eine
 Begrüßung für Erstchatter, eine für Rückkehrer nach mehr als 21 Tagen, mit
-Cooldown und Obergrenze pro Stream. Details in
+Cooldown und Obergrenze pro Stream. (Die ausführliche Spezifikation lag in
-[`projects/community-memory.md`](projects/community-memory.md).
+`projects/community-memory.md` und ist mit dem Community-Gedächtnis gestrichen.)
 
 Diese Scheibe steht am Ende, weil sie unabhängig ist und notfalls entfällt.
 Sie kostet fast nichts und ist das Einzige im MVP, das die Zuschauer direkt

docs/decisions/ADR-0008-geteilter-betrieb.md

@@ -0,0 +1,100 @@
+# ADR-0008: Geteilter Betrieb - Hub im LXC, Ingest am Stream-PC
+
+Datum: 2026-09-17
+Status: akzeptiert
+Berührt: [ADR-0005](ADR-0005-zugangsdaten.md), [ADR-0006](ADR-0006-ein-dach.md),
+[ADR-0007](ADR-0007-native-windows.md)
+
+## Kontext
+
+Bis hierher lief alles in einem Prozess auf Abdus Rechner (ADR-0007), und
+alles band an `127.0.0.1` (ADR-0005). Das war richtig, solange jede Aufgabe
+etwas mit OBS zu tun hatte.
+
+Zwei neue Aufgaben haben damit aber nichts zu tun:
+
+- **Der Rollen-Knopf auf Discord.** Er hängt an einer Gateway-Verbindung im
+  Ingest-Daemon. Ist Abdus Rechner aus, klickt jemand auf den Knopf und
+  bekommt "Interaktion fehlgeschlagen". Ein Knopf, der nur läuft, während
+  der Besitzer am Rechner sitzt, ist kein Knopf.
+- **Die Go-Live-Ankündigung.** Sie braucht Twitch und Discord, sonst nichts.
+
+Dazu kam das Overlay. Eine Browser-Source in OBS holt ihre Seite über HTTP;
+ob die von `127.0.0.1` kommt oder aus dem Netz, ist ihr gleich.
+
+## Entscheidung
+
+Das Toolkit läuft ab jetzt an zwei Stellen, mit einem klaren Schnitt:
+
+| | Hub (LXC 141, `abdu.dimension47.de`) | Ingest (Abdus PC) |
+|---|---|---|
+| Befehl | `abdulive hub` | `abdulive ingest` |
+| Twitch-Chat lesen und senden | ja | ja |
+| Zuschauerzahlen, Stream-Sitzungen | ja | ja |
+| Discord: Rollen-Knopf, Go-Live | **ja** | nein |
+| Overlay-Seiten ausliefern | **ja** | nein |
+| OBS, Wiedergabepuffer, `!clip` | nein | **ja** |
+| Rendern, Untertitel | nein | **ja** |
+
+Der Schnitt verläuft entlang einer einzigen Frage: **braucht die Aufgabe eine
+Datei oder ein Programm, das nur auf dem Stream-PC existiert?** Alles, was mit
+Nein zu beantworten ist, gehört in den Hub.
+
+Der Hub ist damit der einzige Teil, der von außen erreichbar ist. Er bindet
+auf `0.0.0.0`, hinter dem vorhandenen Nginx Proxy Manager, und bringt Overlay,
+Einrichtungsseite und OAuth-Rückruf unter einer Adresse zusammen.
+
+## Begründung
+
+**Warum nicht alles zentral.** Der Wiedergabepuffer von OBS liegt als Datei
+auf Abdus Platte, ffmpeg und whisper arbeiten darauf, und ein Clip ist
+mehrere hundert Megabyte. Das über das Netz zu schieben wäre teurer als es
+bringt, und obs-websocket gehört ohnehin nicht ins Internet.
+
+**Warum nicht alles lokal bleiben.** Genau die zwei Dinge, die Reichweite
+bringen sollen - der Ping und der Knopf - sind die, die durchlaufen müssen.
+Sie an den Stream-PC zu hängen heißt, sie an die Verfügbarkeit einer Person zu
+hängen.
+
+**Warum zwei Datenbanken und nicht eine.** Beide Seiten schreiben in ihre
+eigene SQLite-Datei. Eine gemeinsame wäre eine Netzwerkfreigabe für SQLite,
+und das ist der zuverlässigste bekannte Weg zu einer beschädigten Datei. Was
+zusammengeführt werden muss, wird später über Ereignisse zusammengeführt, nicht
+über geteilten Dateizugriff.
+
+**Warum der Bruch mit ADR-0005 vertretbar ist.** Dort war die Begründung: was
+nur auf `127.0.0.1` hört, ist gegen alles geschützt, was nicht vor dem Rechner
+sitzt. Diese Eigenschaft geht verloren, und der Schutz wandert auf zwei Dinge:
+
+- Passwort mit Sitzungs-Cookie für Übersicht, Einrichtung und Status.
+- Ein zufälliger Schlüssel in der Adresse jeder Browser-Source. Er darf nur
+  lesen, nie schreiben, und lässt sich auf der Übersichtsseite neu würfeln.
+
+Der Schlüssel in der URL ist kein schönes Verfahren. Er steht in jedem
+OBS-Profil und in jedem Screenshot der Einstellungen. Er ist trotzdem der
+richtige: eine Browser-Source kann kein Formular ausfüllen, keinen Login
+durchhalten und keinen zweiten Faktor bedienen. Jedes Verfahren, das mehr
+verlangt, wird spätestens beim ersten Ausfall mitten im Stream abgeschaltet.
+
+**Warum die Zugangsdaten trotzdem verschlüsselt neben der Datenbank liegen.**
+Daran ändert sich nichts. Der Hub hat seinen eigenen Speicher, mit eigenem
+Schlüssel, und die Twitch-Apps brauchen jetzt eine zweite Redirect-URI
+(`https://abdu.dimension47.de/callback`) neben der bisherigen.
+
+## Konsequenzen
+
+- Die Twitch-App braucht eine zweite Redirect-URI. Twitch vergleicht
+  zeichengenau; ein fehlender Schrägstrich sieht im Fehlertext aus wie ein
+  falsches Client-Secret.
+- Der Discord-Bot darf nur an **einer** Stelle laufen. Laufen Hub und Ingest
+  beide mit hinterlegtem Bot-Token, antworten zwei Prozesse auf denselben
+  Klick. Auf dem Stream-PC bleibt das Discord-Token deshalb leer.
+- `abdulive ingest` verliert nichts, macht aber weniger. Der Go-Live-Post ist
+  dort weiterhin eingebaut - wer nur lokal fährt, hat damit alles an einer
+  Stelle, und dort gibt es zusätzlich das OBS-Vorschaubild.
+- Der Hub kennt OBS nicht und kann deshalb keinen Screenshot für die
+  Ankündigung machen. Er nimmt Twitchs Vorschaubild. Das ist kurz nach dem
+  Start manchmal noch schwarz - der Preis dafür, dass der Post auch dann
+  rausgeht, wenn der Daemon am Stream-PC nicht läuft.
+- ADR-0006 ("ein Dach") gilt weiter, aber jetzt je Seite: der Hub hat ein
+  Dach, der Stream-PC hat eins.

docs/decisions/README.md

@@ -9,6 +9,7 @@
 | [0005](ADR-0005-zugangsdaten.md) | Zugangsdaten ueber Einrichtungs-Assistent statt .env | akzeptiert |
 | [0006](ADR-0006-ein-dach.md) | Ein Dach: lokale Weboberflaeche, lokale Arbeitsprozesse | akzeptiert |
 | [0007](ADR-0007-native-windows.md) | Native Windows-Anwendung statt Container | akzeptiert |
+| [0008](ADR-0008-geteilter-betrieb.md) | Geteilter Betrieb: Hub im LXC, Ingest am Stream-PC | akzeptiert |
 
 Neue Entscheidung: Datei `ADR-<nummer>-<kurzname>.md`, Aufbau Kontext /
 Entscheidung / Begruendung / Konsequenzen.

docs/handoff.md

@@ -1,6 +1,6 @@
 # Übergabe
 
-Stand **2026-09-15**, letztes gebautes Paket 0.5.4. Wer hier weitermacht,
+Stand **2026-10-27**, letztes gebautes Paket 0.5.7. Wer hier weitermacht,
 liest zuerst diese Seite, dann [`07-mvp-plan.md`](07-mvp-plan.md). Für Abdu
 selbst gibt es das [Handbuch](handbuch/handbuch.pdf).
 
@@ -20,9 +20,242 @@ Auslöser bis zum fertigen Short steht im Code vollständig. Geprüft ist sie
 | S5 Onboarding + Sichtung | offen | |
 | S6 Erstchatter-Begrüßung | offen | |
 
-162 Tests, alle grün. Was noch fehlt, steht vollständig in
+322 Tests, alle grün. Was noch fehlt, steht vollständig in
 [`offene-punkte.md`](offene-punkte.md).
 
+## Neu: der Dienst läuft zentral
+
+Seit 2026-09-17 läuft ein Teil des Toolkits nicht mehr auf Abdus Rechner,
+sondern in einem LXC auf dem Proxmox-Host. Der Schnitt und seine Begründung
+stehen in [ADR-0008](decisions/ADR-0008-geteilter-betrieb.md); die Kurzfassung
+ist: alles, was nur Internet braucht, gehört dorthin, wo durchgehend Strom
+ist.
+
+| | Hub (LXC 141, `192.168.2.15`) | Ingest (Abdus PC) |
+|---|---|---|
+| Befehl | `abdulive hub` | `abdulive ingest` |
+| Chat, Zuschauerzahlen | ja | ja |
+| Discord-Knopf, Go-Live-Ping | **ja** | nein |
+| Overlay für OBS | **ja** | nein |
+| OBS, `!clip`, Rendern | nein | **ja** |
+
+Erreichbar unter `https://abdu.dimension47.de`, hinter dem vorhandenen Nginx
+Proxy Manager (Proxy-Eintrag 42, eigenes Let's-Encrypt-Zertifikat, Pufferung
+abgeschaltet - ohne das sammelt nginx die Overlay-Ereignisse und liefert sie
+gebündelt aus). Ausgerollt wird mit `scripts/deploy-hub.sh`, gestartet von
+systemd (`abdulive-hub`). Der Container hat keinen Zugang zum Repo - das
+Skript schiebt den Arbeitsstand als Archiv hinüber.
+
+Der Discord-Teil der Zugangsdaten ist übertragen, der Bot hängt am Hub und
+meldet beim Start "Rollen-Knöpfe sind scharf". **Abdu hat am 2026-09-23 sein
+Konto verbunden** (`abdulive_`, alle 9 Scopes). Damit laufen Helix mit
+Nutzer-Token und EventSub. Der Chat liest weiter anonym mit, weil das
+Bot-Konto noch nicht verbunden ist.
+
+**Das kostet ADR-0005 seine Hauptbegründung.** "Bindet nur auf 127.0.0.1" gilt
+für den Hub nicht mehr. An seine Stelle treten ein Passwort für alles, was ein
+Mensch bedient, und ein Schlüssel in der Adresse für die Browser-Sources.
+
+## Der Go-Live-Ping geht raus
+
+War in der letzten Übergabe noch Vorarbeit, ist jetzt gebaut
+(`apps/broadcaster`). Ablauf: neuer Stream erkannt, eine Minute warten, Titel
+und Kategorie frisch holen, Webhook posten, Rolle `Live-Ping` anpingen.
+
+Der Ping funktioniert nur mit `allowed_mentions` im Nachrichtenkörper. `<@&ID>`
+allein färbt die Erwähnung ein und benachrichtigt niemanden - das ist der
+Fehler, den man erst nach drei leeren Streams bemerkt, und dagegen steht ein
+eigener Test.
+
+Gegen den doppelten Ping stehen drei Dinge, denn wer zweimal in zehn Minuten
+angepingt wird, nimmt sich die Rolle wieder ab: die Tabelle `posts` mit einem
+eindeutigen Index je Stream, eine Abklingzeit von sechs Stunden, und der
+Umstand, dass der Fortsetzungszweig im Polling gar nicht erst auslöst.
+
+Der Hub steht auf `mode: draft` - der Post geht vollständig, aber in
+`#technik-log` und ohne Ping. Ein Probelauf ist dort gelandet, der Weg zum
+Webhook ist damit nachgewiesen. Zum Scharfschalten: `mode: live` in
+`/var/lib/abdulive/config/config.yaml`.
+
+**Ausgelöst hat er noch nie.** Bis zum 2026-09-23 fehlte das
+Broadcaster-Token; das ist jetzt da. Der nächste Stream ist der erste echte
+Durchlauf, im Entwurfsmodus.
+
+## Das Overlay steht
+
+Browser-Sources unter `apps/overlay-web/public`, ausgeliefert vom
+Overlay-Server: Einblendungen, Chat, Kamerarahmen, Statusleiste, Effekte,
+Pausenbild, Vorlesen, Liegestütze. Kein Build, kein Framework - OBS lädt die
+Dateien direkt.
+
+**Nächste Sitzung: das Overlay wird neu gemacht.** Gestaltung von Grund auf,
+nicht nur der Kamerarahmen. Was bleiben sollte, weil es Fehler verhindert, die
+man erst im Stream bemerkt: `client.js` (Neuverbinden, Wachhund,
+Schnappschuss, `Overlay.esc`), der durchsichtige Hintergrund und die Kontur
+aus `theme.css`, `?probe=1` zum Ansehen im Browser. Die Ereignisse auf dem Bus
+(`apps/overlay-server/src/bus.ts`) sind die Schnittstelle, an der sich die
+neuen Seiten festhalten können.
+
+**Chat-Abzeichen sind seit 2026-10-27 Twitchs echte Bilder** statt farbiger
+Punkte. IRC liefert nur `moderator/1`, `subscriber/3012` usw.; der Hub löst das
+über Helix (global und Kanal, Kanal gewinnt) zu Bildadressen auf und hängt sie
+an jede Chatzeile (`packages/twitch/src/badges.ts`, Feld `badges` im
+`ChatEvent`). Geladen beim Start und alle sechs Stunden, beim Ausrollen
+kamen 552. Unbekanntes fällt weg, die Seite nimmt nur Adressen von
+`static-cdn.jtvnw.net`. Im echten Stream noch nicht angesehen; zeigt OBS
+weiter Punkte, die Browser-Source einmal aktualisieren.
+
+Die Ereignisse kommen über Server-Sent Events statt WebSocket. Warum, und was
+gegen die tote Browser-Source nach einem Neustart getan ist, steht in
+[`apps/overlay-server/README.md`](../apps/overlay-server/README.md).
+
+Abos, Raids und Bits kommen über IRC-USERNOTICE herein, das wird jetzt
+ausgewertet. **Follows fehlen** - die gibt es nur über EventSub. EventSub
+läuft inzwischen, abonniert ist aber nur `channel_points_custom_reward_redemption.add`.
+Follows wären ein zweites Abonnement (`channel.follow`, Version 2, braucht
+`moderator:read:followers`, der Scope ist schon da).
+
+**Kamerarahmen, Entwurf** (`/kamera`, 520×380 auf 0,0): ein Rahmen rechts und
+unten um die Facecam, darunter eine Platte mit Kanal, Kategorie, Zuschauern
+und Laufzeit. Soll die Statusleiste ersetzen, die als unschön empfunden wird.
+Über der Kamera liegt bewusst nichts, weil genau dieser Bereich für die
+Shorts ausgeschnitten wird. Noch nicht ausgerollt, Rückmeldung zur Richtung
+steht aus. Ansehen: `node apps/cli/main.ts overlay --demo`, dann
+`http://127.0.0.1:4791/kamera?probe=1`.
+
+Zum Ansehen ohne Stream: auf der Übersichtsseite gibt es unter
+**Ausprobieren** für jede Einblendung, jede Chat-Variante und jeden Effekt
+einen Knopf. Die Ereignisse gehen nur an die Browser-Sources. Dasselbe im
+Dauerbetrieb: `abdulive overlay --demo` oder der Knopf „Vorführung starten".
+
+## Das Pult: Handy als Stream Deck
+
+Seit 2026-10-26 auf dem Hub ausgerollt und im Paket 0.5.7. **Seit 2026-10-27
+hängt Abdus Stream-PC dran:** obs-websocket an, Passwort auf der
+Einrichtungsseite hinterlegt, der PC (`DESKTOP-DGJ4HC6`) hat sich beim Hub
+gemeldet und ist freigegeben, im Hub-Log steht `Stream-PC verbunden`. Ob
+Szenenwechsel, Stummschalter, Sounds und das Anlegen der Quelle in OBS
+greifen, ist damit noch nicht beobachtet. Auf Abdus Rechner ist nichts auszuführen: das Update kommt über
+die tägliche Aufgabe, danach meldet sich der PC von selbst, Abdu tippt im Pult
+einmal „Freigeben“, und die Sound-Quelle legt `ingest` selbst in OBS an. `/pult` auf dem Hub ist eine installierbare Web-App (PWA) mit
+Soundboard, Szenenwechsel, Clip-Knopf, Stummschaltern, Liegestützen,
+Vorlese-Freigabe und den Testknöpfen. Beschreibung in
+[`apps/overlay-web/README.md`](../apps/overlay-web/README.md#das-pult-pult).
+
+**Seit 2026-10-27 mit Chat, nur lesend.** Eigener Reiter am Handy; ab
+Tablet-Größe (760×500) steht der Chat fest rechts neben dem gewählten
+Reiter, also etwa Szenen und Chat auf einem Bildschirm. Reiner Client-Code in
+`pult.js`: der Chat kam schon immer über den Ereignisstrom des Pults, es
+braucht weder neue Routen noch Rechte. Neu am Bus ist nur `ts` an der
+Chatzeile, für die Uhrzeit. Geprüft im Browser mit `overlay --demo` in vier
+Größen (Handy hoch und quer, iPad hoch und quer); auf einem echten Tablet
+und im Stream noch nicht.
+
+- **Sounds lädt Abdu selbst hoch**, am Handy über „+ Sound“. Sie liegen auf
+  dem Hub unter `<db>/sounds/`, gespielt wird über die Browser-Source
+  `abdulive Sounds`, die `ingest` selbst in OBS anlegt.
+- **Szenen** laufen über die Leitung Stream-PC → Hub. Der PC meldet sich
+  beim ersten Start von selbst, die Freigabe ist ein Tipp im Pult. In OBS
+  muss nur obs-websocket an sein.
+- **Restrisiko der Freigabe:** Anfragen kann jeder, der die Adresse kennt.
+  Freigeben kann nur, wer im Pult angemeldet ist, und das Pult zeigt Name und
+  Adresse des Rechners. Wer etwas freigibt, das er nicht erwartet, gibt einem
+  Fremden Szenen, Stummschalter und Clip-Knopf - nicht mehr.
+- Geprüft: 319 Tests, Typprüfung, Durchläufe im Browser gegen einen
+  nachgebauten Stream-PC mit falschem OBS (Freigabe, Einrichten der
+  Sound-Quelle, Szenenwechsel, Stummschalten, Hochladen, Abspielen); 8 MB
+  Upload durch den Proxy. Ungeprüft: echtes OBS (vor allem das Anlegen der
+  Quelle), iPhone/Android-Installation.
+- **Die Adresse in der Anfragekarte** stimmt: bei Abdus echter Anfrage stand
+  seine öffentliche Adresse da, nicht die Docker-Brücke (`172.18.0.1` kam nur
+  bei der Probe aus dem eigenen Netz). Sie ist reine Anzeige - die Freigabe
+  hängt am Schlüssel, eine wechselnde IP stört nicht, eine feste braucht er
+  nicht.
+- Auf dem Hub stand am 2026-10-26 kurz eine Probe-Anfrage „PRUEFUNG-CLAUDE“.
+  Sie ist nach zehn Minuten von selbst verfallen und wurde nicht freigegeben.
+
+## Kanalpunkte: „Nachricht vorlesen" läuft
+
+Seit 2026-09-23 scharf. Der Weg: EventSub meldet die Einlösung, der Hub
+prüft (`apps/hub/src/rewards.ts`), Piper spricht, `/tts` spielt ab.
+
+| | |
+|---|---|
+| Belohnung | „Nachricht vorlesen", 1000 Punkte, Texteingabe Pflicht |
+| Freigabe | keine, wird direkt vorgelesen |
+| Schutz | Wortfilter (29 Einträge), 200 Zeichen, 3 je Person und Stunde, „Sofort still" auf der Übersichtsseite |
+| Stimme | Piper, `de_DE-thorsten-medium` (mls klang verwaschen) |
+
+**Die Stimme entsteht im Hub, nicht im Browser.** Zuerst lief es über
+`speechSynthesis` in der Browser-Quelle. Das hat in OBS gesprochen, aber
+amerikanisch: OBS' Browser sah keine deutsche Stimme und die Seite nahm die
+erste beliebige. Piper liegt unter `/opt/piper` im LXC (2 Kerne: 200 Zeichen
+in 0,7 s), das Stimmenmodell unter `models/piper/`. Beides überlebt jedes
+Ausrollen; eingerichtet mit `scripts/install-piper.sh`.
+
+**Die erste Stimme war `de_DE-mls-medium`, Sprecher 0**, und klang im Stream
+„wie jemand mit Schlaganfall". Die Phoneme stimmten (`piper --debug`), es lag
+am Modell: Hörbuch-Aufnahmen von 236 Laien, Sprecher 0 ist ein beliebiger.
+Seit 2026-09-24 läuft `de_DE-thorsten-medium`, ein Sprecher, darum kein
+`sprecher` mehr in der Konfiguration. Das mls-Modell liegt noch daneben.
+
+**Die Belohnung muss über die API angelegt sein** (`abdulive rewards:anlegen`).
+Nur die App, die eine Belohnung angelegt hat, darf deren Einlösungen
+abschließen oder erstatten. Im Dashboard sieht man davon nichts. Titel,
+Kosten und Abklingzeit darf man dort ändern; löschen und neu anlegen nicht,
+dann ist die ID weg, die in der Hub-Konfiguration steht.
+
+**Der Wortfilter normalisiert vorher**: Leetspeak, Punkte zwischen den
+Buchstaben, gezogene Buchstaben, Akzente. Einträge ab 5 Buchstaben werden im
+zusammengezogenen Text gesucht, kürzere nur am Wortanfang, sonst stünde
+„nazi" in „kann azubi". Die Liste steht nur in der Hub-Konfiguration, nicht
+im Repo.
+
+**Der Filter hat eine Stunde lang fast alles abgelehnt.** `www` in der Liste
+wurde zusammengezogen zu `w` und traf damit jedes Wort, das mit w anfängt
+(„wie", „weg"). Die Punkte gingen zurück, im Log stand nur `Wortfilter`.
+Behoben am 2026-09-24: was nach dem Zusammenziehen unter 3 Buchstaben hat,
+trifft nur noch als ganzes Wort. **Noch offen:** lange Einträge treffen über
+Wortgrenzen hinweg, „Spaß tut gut" fliegt wegen `spast` raus, „eine Gerade"
+wegen `neger`. Wer eine Ablehnung nachvollziehen will: der Text steht im
+Ereignis `points.redeemed` in der Datenbank.
+
+**Der YAML-Leser konnte keine Listen aus Maps.** `- titel: X` zerfiel in
+Zeichenketten, jede Belohnung war ohne Meldung unwirksam - auch das Beispiel
+in `config.example.yaml`. Behoben und getestet; die bestehenden Dateien
+werden nachweislich gleich gelesen wie vorher.
+
+## Kanalpunkte: Liegestütze
+
+Seit 2026-10-04 scharf. Die Belohnung „5 Liegestütze" gab es auf Twitch schon
+(von Hand angelegt, 61 Einlösungen bis dahin). Sie steht jetzt in der
+Hub-Konfiguration mit `aktion: liegestuetze`, `anzahl: 5`, zugeordnet über den
+Titel. Wird sie auf Twitch umbenannt, zählt der Hub nicht mehr mit.
+
+| | |
+|---|---|
+| Zähler | `apps/hub/src/liegestuetze.ts`, Tabelle `zaehler` (Migration 003), übersteht Neustarts |
+| Offen | Einlösung +5. Auf der Übersicht −1/−5/−10, Setzen, auf 0 |
+| Gemacht | Was mit −1/−5/−10 abgezogen wird. Setzen zählt nicht, das ist Korrektur. Eigenes Feld zum Korrigieren |
+| Neuer Stream | Gemacht auf 0, offen bleibt. Nicht beim Neustart des Hubs mitten im Stream, nicht bei einer Lücke bis 5 Minuten |
+| Overlay | `/liegestuetze`, 420×200. `?verstecken=1`, `?gemacht=0`, `?titel=...` |
+
+**Ungeprüft im Stream.** Getestet mit Probeserver und Browser. Weder eine
+echte Einlösung noch das Nullen beim Streamstart ist seit dem Ausrollen
+passiert. Der Zähler startete bei 0 offen, die 61 alten Einlösungen sind nicht
+übernommen. In OBS ist die Quelle noch nicht eingetragen.
+
+**Die Belohnung ist nicht über die API angelegt.** Der Hub kann ihre
+Einlösungen deshalb nicht als erledigt melden und schreibt bei jeder eine
+Warnung ins Log. Für das Zählen egal. Eine ältere Belohnung „10 Liegestütze"
+(12 Einlösungen bis 2026-09-24) steht nicht in der Konfiguration.
+
+**Nebenbei behoben: die Vorlese-Freigabe auf der Übersicht war tot.**
+`POST /tts` landete bei der Overlay-Seite `/tts` statt bei der Freigabe, auf
+dem Hub ohne Schlüssel sogar mit 403. „Vorlesen", „Ablehnen" und „Sofort
+still" haben damit nie gewirkt. Overlay-Seiten werden jetzt nur bei GET
+ausgeliefert. Gegen eine echte Warteschlange nicht nachgeprüft.
+
 ## Der Discord-Server steht
 
 Dazugekommen seit der letzten Übergabe, und kein Teil des MVP: der
@@ -33,21 +266,41 @@ aufgetragen wird er mit `abdulive discord:setup`. Wiederholbar: gefunden wird
 nichts, gelöscht wird nie.
 
 Das ist Vorarbeit für drei Werkzeuge. Die Webhooks für
-[Go-Live](projects/go-live-broadcaster.md), [Recap](projects/stream-recap.md)
+[Go-Live](projects/go-live-broadcaster.md), Recap (inzwischen gestrichen)
 und [Clips](projects/clip-shorts.md) liegen fertig im verschlüsselten Speicher
 unter `goLiveWebhook`, `recapWebhook` und `clipsWebhook`. Wer diese Werkzeuge
 baut, muss sich um Discord nicht mehr kümmern, sondern nur noch posten.
 
-Sieben Kanäle, vier Rollen, zwei AutoMod-Regeln. Der Entwurf und seine
+Zehn Kanäle, vier Rollen, zwei AutoMod-Regeln. Seit 2026-10-17 dabei:
+`🙋│begrüßung` für Discords Beitrittsmeldungen (liefen vorher in
+`#allgemein`), und die Foren `🎮│spielvorschläge` und
+`👀│reaction-einsendungen`. Beide hatte Abdu als Textkanäle angelegt, sie sind
+jetzt Foren mit Tags, die nur Mods setzen, und 👍 als Standard-Reaktion.
+Discord wandelt keinen Textkanal in ein Forum um: die beiden leeren
+Textkanäle wurden einmalig über die API gelöscht, das Setup-Skript selbst
+löscht weiterhin nichts.
+
+Im Spielvorschläge-Forum stehen neun Beiträge, einer je Spiel aus Abdus
+Liste, vom Bot angelegt (Titel vorher nachgeschlagen, „involkyr" heißt
+Invokyr). In `📢│ankündigungen` hat der Bot das Forum angekündigt, ohne Ping.
+Der Bot darf dort trotz Schreibsperre für `@everyone` posten.
+
+**Der Hub ist nicht neu ausgerollt.** Das Setup lief aus einer Kopie im
+Container, der laufende Prozess hat noch den Stand davor. Für den Server ist
+das egal, für den Knopf auch. Beim nächsten Ausrollen kommt es mit. Der Entwurf und seine
 Begründung stehen in [`projects/discord-community.md`](projects/discord-community.md);
 die Kurzfassung ist, dass bei 5 bis 30 Zuschauern fünf sichtbare Kanäle besser
 sind als zwanzig leere.
 
 Ein Teil davon läuft dauerhaft: der Knopf unter dem Willkommenstext, mit dem
-man sich die Rolle `Live-Ping` selbst gibt. Er hängt als Gateway-Verbindung im
+man sich die Rolle `Live-Ping` selbst gibt. Er hängt als Gateway-Verbindung mit
-Ingest-Daemon mit drin und meldet sich als `discordConnected` auf der
+im Prozess und meldet sich als `discordConnected` auf der Statusseite. Seit dem
-Statusseite. **Läuft der Daemon nicht, tut der Knopf nichts** - der Klick
+Umzug in den Hub läuft er durch, auch wenn Abdus Rechner aus ist.
-läuft dann in Discords Zeitüberschreitung.
+
+Dazugekommen ist ein vierter Webhook: `technikWebhook` in `#technik-log`. Dort
+landet der Go-Live-Post im Entwurfsmodus - dieselbe Nachricht wie im Betrieb,
+nur ohne Ping und nur für Mods sichtbar. Wer den Server vor dieser Fassung
+eingerichtet hat, muss `abdulive discord:setup` einmal erneut laufen lassen.
 
 ## Was jemand wissen muss, bevor er etwas anfasst
 
@@ -58,9 +311,10 @@ keine Parameter-Properties im Konstruktor, keine `namespace`.
 `erasableSyntaxOnly` in der `tsconfig.json` erzwingt das und hat schon einen
 echten Fehler gefangen.
 
-**Alles läuft in einem Prozess.** Schwere Arbeit (ffmpeg, whisper) läuft als
+**Alles läuft in einem Prozess** - aber es gibt jetzt zwei davon, Hub und
-Kindprozess und darf abstürzen. Der Ingest darf nie sterben. Was er nicht
+Ingest (siehe oben). Schwere Arbeit (ffmpeg, whisper) läuft als Kindprozess und
-mitschreibt, ist für immer weg.
+darf abstürzen. Der Chat-Prozess darf nie sterben. Was er nicht mitschreibt,
+ist für immer weg.
 
 **Zugangsdaten kommen aus der Weboberfläche**, nicht aus einer Datei. Sie
 liegen verschlüsselt neben der Datenbank, aber bewusst nicht *in* ihr. Die
@@ -74,6 +328,16 @@ nichts Vertrauliches mehr hineinschreiben, auch nicht in die Doku.
 (`ZeasyAlex/abdulive`) und `discord` (`ZeasyAlex/abdulive_-discord`). Wer
 pusht, pusht auf beide, sonst laufen sie auseinander.
 
+**`deploy-hub.sh` schiebt den Arbeitsstand, nicht den Commit.** Liegt
+Unfertiges herum, landet es im LXC. Sauber ausrollen aus einem eigenen
+Checkout:
+
+```bash
+git worktree add --detach ../abdulive-deploy HEAD
+../abdulive-deploy/scripts/deploy-hub.sh
+git worktree remove ../abdulive-deploy
+```
+
 Die Begründungen stehen in [`decisions/`](decisions/), acht ADRs. Wer eine
 davon umwerfen will, liest sie vorher. ADR-0004 (Docker) ist durch ADR-0007
 ersetzt; die Analyse darin bleibt lesenswert, weil zwei der vier
@@ -97,9 +361,16 @@ Zum Entwickeln reicht ein Checkout und Node 24 oder neuer:
 ```powershell
 node apps/cli/main.ts check-env
 node --test "packages/**/*.test.ts" "apps/**/*.test.ts"
+node apps/cli/main.ts overlay --demo               # Overlay ohne Stream ansehen
 node scripts/build-package.ts --version 0.5.5     # baut dist/
 ```
 
+Den Hub ausrollen (braucht SSH auf den Proxmox-Host):
+
+```bash
+scripts/deploy-hub.sh
+```
+
 Typprüfung, das Einzige wofür npm gebraucht wird:
 
 ```powershell
@@ -109,15 +380,22 @@ npx tsc --noEmit
 
 ## Ausliefern
 
+Zwei Wege, je nachdem was sich ändert: Hub-Teil (Overlay, Pult, Discord, Chat)
+ist mit `deploy-hub.sh` sofort live, Abdu muss nichts tun. Der PC-Teil
+(`ingest`) kommt nur mit einem neuen Paket an, also nach einem Versions-Tag;
+ein Push auf `main` allein erreicht seinen Rechner nicht.
+
 `build-package.ts` lädt Node, ffmpeg und whisper.cpp bei ihren Herausgebern,
 packt alles nach `dist/` und schreibt `abdulive.json`. Dieses Manifest fragt
 `abdulive update` auf Abdus Rechner ab.
 
 Die Veröffentlichung `latest` trägt beide Dateien und wird bei jedem Bau
 ersetzt, damit die Adresse gleich bleibt.
-`.gitea/workflows/release.yml` macht das beim Tag automatisch. **Die Pipeline
+`.gitea/workflows/release.yml` macht das beim Tag automatisch. **Seit
-ist noch nie gelaufen**, bisher wurde von Hand veröffentlicht. Der Runner
+2026-10-26 läuft sie** (0.5.6, danach 0.5.7). Der erste Lauf (`v0.5.5`) scheiterte daran,
-(`ubuntu-latest`) steht.
+dass whisper.cpp seine Windows-Programme nicht mehr an `latest` hängt, sondern
+an eigene `b…`-Veröffentlichungen; `githubAsset()` sucht jetzt die neueste
+mit passendem Archiv. Unter `v0.5.5` liegt kein Paket.
 
 ## Windows-Fallen, die schon zugeschlagen haben
 
@@ -212,27 +490,44 @@ Umlaute und das Trennzeichen `│` (U+2502) bleiben unverändert stehen.
 dieselbe Umbenennung erneut raus - und läuft nach zwei Läufen in das Limit von
 oben.
 
-## Die drei Dinge, die Abdu tun muss
+## Was Abdu tun muss
 
-1. **Broadcaster-Konto verbinden.** Die beiden Twitch-Apps
+1. ~~**Broadcaster-Konto verbinden.**~~ Erledigt am 2026-09-23. Der Rest
-   (dev.twitch.tv/console/apps, Redirect-URI `http://localhost:4792/callback`)
+   dieses Punkts bleibt als Nachschlag stehen, falls neu verbunden werden
-   kann auch jemand anders anlegen, sie hängen nicht am Kanal. Was nur Abdu
+   muss.
-   kann: auf der Einrichtungsseite eingeloggt als er selbst auf „Mit Twitch
+
-   verbinden" klicken. Dafür muss die Anwendung auf seinem Rechner laufen,
+   Die beiden Twitch-Apps (dev.twitch.tv/console/apps) kann auch jemand anders
-   die Seite hört nur auf `127.0.0.1`.
+   anlegen, sie hängen nicht am Kanal. Seit dem Umzug in den Hub brauchen sie
+   als Redirect-URI **`https://abdu.dimension47.de/callback`**; die alte
+   `http://localhost:4792/callback` bleibt daneben stehen, wenn auf dem
+   Stream-PC weiter eingerichtet werden soll. Twitch vergleicht zeichengenau.
+
+   Die App ist inzwischen hinterlegt. Was nur Abdu kann: auf
+   `https://abdu.dimension47.de/setup` eingeloggt als er selbst auf „Mit
+   Twitch verbinden" klicken. Der Vorteil gegenüber vorher: das geht von jedem
+   Gerät, der Stream-PC muss nicht laufen.
+
+   Ob die Redirect-URI in der App richtig eingetragen ist, zeigt sich erst bei
+   diesem Klick. Twitch prüft sie erst nach dem Login und gibt vorher auch bei
+   einer falschen URI ein freundliches 302 zurück - von außen ist das nicht
+   nachweisbar.
 2. **OBS einrichten**: obs-websocket an (Port 4455), Wiedergabepuffer 90 s,
    Hotkey auf „Wiedergabepuffer speichern", getrennte Audiospuren.
 3. **Layout umstellen** nach [`obs-layout.md`](obs-layout.md), danach
    `abdulive calibrate` zur Kontrolle.
+4. ~~**Stream-PC im Pult freigeben.**~~ Erledigt am 2026-10-27, ebenso
+   obs-websocket und das Passwort aus Punkt 2. Offen aus Punkt 2 bleiben
+   Wiedergabepuffer, Hotkey und Audiospuren - nicht nachgeprüft.
 
-Ohne Punkt 1 liest das Toolkit den Chat anonym mit und kann nichts senden.
+Das Bot-Konto ist noch nicht verbunden: bis dahin liest das Toolkit den
+Chat anonym mit und kann nichts senden.
 Ohne Punkt 2 gibt es keine Clips. Ohne Punkt 3 sitzt der Ausschnitt schief.
 
 Dazu eine Kleinigkeit mit Wirkung: das Bot-Konto sollte Moderator sein
 (`/mod <botname>`). Ohne das gilt ein Limit von 20 Chat-Nachrichten je 30
 Sekunden statt 100, und im Follower-only-Modus kommt der Bot gar nicht durch.
 
-Und zwei für Discord, beide nicht über die API machbar:
+Und drei für Discord, die nicht über die API gehen:
 
 1. **Sich selbst die Rolle `Abdu` geben.** Das Skript legt Rollen an, aber es
    hängt sie niemandem um.
@@ -240,6 +535,9 @@ Und zwei für Discord, beide nicht über die API machbar:
    Kanalinfo und in einen Chat-Befehl eintragen. Ein Server, den im Stream
    niemand erwähnt, bleibt leer. Das ist der eine Handgriff, an dem hängt, ob
    der Server überhaupt jemanden bekommt.
+3. **Tags in den Foren pflegen.** „Wird gespielt", „Gespielt", „Eher nicht"
+   bzw. „Kommt dran", „Angeschaut" setzen nur Abdu und Mods. Ein Vorschlag,
+   der sichtbar umgesetzt wird, bringt den nächsten.
 
 ## Wo ich weitermachen würde
 
@@ -248,10 +546,30 @@ in der ganzen Kette, und alles Weitere hängt daran. Seit es `abdulive sources`
 gibt, ist auch die Frage beantwortbar, welche OBS-Quelle fremden Text ins Bild
 malt. Das war vorher nicht zu erraten.
 
-**Discord braucht jetzt nichts mehr.** Der Server steht, die Webhooks liegen
+**Das Pult an Abdus OBS abnehmen.** Die Freigabe ist erteilt. Jetzt nachsehen, ob die
-bereit. Wer als Nächstes `apps/broadcaster` oder `apps/recap` baut, findet
+Szene `abdulive Ton` mit der Quelle `abdulive Sounds` angelegt und in jede
-alles vor und muss nur noch posten. Das wäre auch ein guter Nebenweg, wenn der
+Szene eingehängt ist, ob ein Sound im Stream zu hören ist und ob Szenenwechsel
-Stream-PC gerade nicht verfügbar ist, denn anders als S2 hängt daran nichts.
+und Stummschalter greifen. Das fällt mit der Abnahme von S2 zusammen, beides
+braucht nur ein laufendes OBS.
+
+**Den Go-Live-Ping scharf schalten.** Er steht auf `draft`. Einmal
+`abdulive golive:test --echt` laufen lassen, prüfen ob das Handy klingelt, dann
+`mode: live`. Das ist der kleinste verbleibende Handgriff mit der größten
+Wirkung.
+
+**Das Overlay neu machen** (nächste Sitzung, siehe oben). Der Kamerarahmen
+als Entwurf geht darin auf, die Statusleiste soll ersetzt werden. Danach die
+Liegestütze-Quelle in OBS eintragen und im Stream einmal beobachten.
+
+**Recap und die übrigen geplanten Werkzeuge sind gestrichen** (2026-10-27).
+Raid-Scout, Auswertung, VOD-Kapitel, Community-Gedächtnis, Punkteshop und
+Recap sind samt Platzhaltern, Spezifikationen und Konfigurationsabschnitten
+entfernt. Der Hub schreibt keine Chatnachrichten und Zuschauerproben mehr in
+die Datenbank, gelesen haben die nur diese Werkzeuge; die Tabellen bleiben
+stehen. Der angefangene Recap liegt nur im Git-Stash
+`recap WIP (vor dem Rueckbau 2026-10-27)` des Rechners, auf dem er
+angefangen wurde. Der Webhook `recapWebhook` steht weiter im Discord-Bauplan,
+weil das Setup-Skript nie löscht.
 
 **Danach S5.** Nicht wegen des Codes, sondern weil das Werkzeug ohne
 Sichtungsseite für Abdu nicht bedienbar ist. Die Kette funktioniert, aber sie
@@ -271,17 +589,26 @@ hörbar („Danke" wurde „Dank es"), DejaVu Sans ist unauffällig, und das
 fortlaufende Einfärben ist nicht der Stil, der auf Shorts trägt. Sechs
 konkrete Verbesserungen stehen in [`offene-punkte.md`](offene-punkte.md).
 
-**Die CI ist geschrieben, aber ungetestet.** Beim ersten Tag zusehen.
+**Die CI läuft, aber nur einmal erfolgreich.** Beim nächsten Tag kurz hinsehen.
 
 **Das Paket ist nicht signiert.** SmartScreen warnt bei jeder Installation.
 Solange nur Abdu installiert, reicht ein Klick. Sobald jemand Drittes es
 bekommt, nicht mehr.
 
-**Der Discord-Knopf hängt am Daemon.** Läuft der Ingest nicht, passiert beim
+**Der Discord-Knopf hängt am Daemon** - das war der Punkt aus der letzten
-Klick nichts, und die klickende Person sieht nur „Interaktion fehlgeschlagen".
+Übergabe und ist mit dem Hub erledigt. Dafür gibt es jetzt einen neuen: der
-Das ist vertretbar, solange der Daemon ohnehin durchläuft, aber es ist eine
+Bot darf nur an **einer** Stelle laufen. Steht auf dem Stream-PC ein
-stille Abhängigkeit zwischen zwei Dingen, die sonst nichts miteinander zu tun
+Discord-Bot-Token im Speicher und läuft dort `ingest`, antworten zwei Prozesse
-haben.
+auf denselben Klick. Auf dem Stream-PC bleibt das Discord-Token leer.
+
+**Der Overlay-Schlüssel steht in der Adresse.** Damit steht er in jedem
+OBS-Profil und auf jedem Screenshot der Einstellungen. Neu würfeln geht auf
+der Übersichtsseite, aber danach müssen alle Adressen in OBS neu
+eingetragen werden.
+
+**Das Overlay hat nie unter Last gelaufen.** Geprüft ist es gegen den
+Vorführmodus und im Browser. Wie es sich bei 200 Nachrichten pro Minute
+verhält, und was der Emote-Regen beim Encoder kostet, ist offen.
 
 **Der Discord-Bot ist nie unter Last gelaufen.** Getestet sind die Bausteine
 und ein Klickweg gegen einen nachgebauten Server; am echten Server ist die

docs/projects/README.md

@@ -6,13 +6,7 @@ Entscheidungen, Fallstricke, Abnahmekriterien.
 | # | Dokument | App |
 |---|---|---|
 | — | [Ingest-Daemon](00-ingest.md) | `apps/ingest` |
-| 1 | [Clip-to-Shorts](clip-shorts.md) | `apps/clipper` |
+| 1 | [Clip-to-Shorts](clip-shorts.md) | `apps/ingest` |
 | 2 | [Go-Live-Broadcaster](go-live-broadcaster.md) | `apps/broadcaster` |
-| 3 | [Raid- und Netzwerk-Tool](raid-network.md) | `apps/raid-scout` |
-| 4 | [Analytics-Dashboard](analytics.md) | `apps/dashboard` |
-| 5 | [VOD-Kapitel](vod-chapters.md) | `apps/vod-chapters` |
-| 6 | [Community-Gedaechtnis](community-memory.md) | `apps/community` |
 | 7 | [Chat steuert Dinge](chat-control.md) | `apps/overlay-server`, `apps/overlay-web` |
-| 8 | [Punktesystem und Shop](loyalty-shop.md) | `apps/loyalty` |
-| 9 | [Stream-Recap](stream-recap.md) | `apps/recap` |
 | — | [Discord-Community](discord-community.md) | `packages/discord` |

docs/projects/analytics.md

@@ -1,68 +0,0 @@
-# 4 — Analytics-Dashboard (`apps/dashboard`)
-
-**Wirkrichtung:** Steuerung. Beantwortet die Frage "was funktioniert
-eigentlich", die Twitch selbst nicht beantwortet.
-
-Läuft auf `http://localhost:4792`. Vite + Preact + uPlot, liest direkt aus
-SQLite. Keine Authentifizierung, weil nur lokal erreichbar.
-
-## Seiten
-
-### Stream-Zeitachse (die wichtigste)
-
-Eine gemeinsame X-Achse (Stream-Laufzeit), darauf übereinander:
-
-- Viewerzahl (Linie, aus `viewer_samples`)
-- Chat-Nachrichten pro Minute (Balken)
-- unterschiedliche Chatter pro 5 min (Linie)
-- Marker: Kategoriewechsel, Titelwechsel, Raids rein/raus, Clips, Follows, Subs
-
-Damit sieht man direkt: An welcher Stelle kamen Leute rein, an welcher gingen
-sie, und war der Chat da tot oder wach. **Zusammenhang von Viewerzahl und
-Chat-Aktivität ist die Kernfrage** — 15 Zuschauer mit stillem Chat sind
-weniger wert als 8 mit lebendigem.
-
-### Abgangs-Analyse
-
-Aus `viewer_samples`: Ableitung über die Zeit, die stärksten Abfälle markiert
-und mit dem gleichzeitigen `stream_segments`-Eintrag und den Chat-Nachrichten
-der Minute davor angereichert. Antwort auf "wann gehen die Leute".
-
-Wichtige Einschränkung, die im UI stehen muss: `viewer_samples` ist eine
-Momentaufnahme der Gesamtzahl, keine Ein-/Austrittsliste. Twitch liefert das
-nicht. Ein Abfall von 12 auf 8 kann vier Abgänge oder sechs Abgänge plus zwei
-Zugänge bedeuten. Für Chatter ist es exakt (über `user_streams`), für stille
-Zuschauer geschätzt.
-
-### Titel- und Kategorie-Performance
-
-Aggregation über `stream_segments`: pro Titel/Kategorie die durchschnittliche
-Viewerzahl, der Nettozufluss während des Segments, Chat-Rate, gewonnene
-Follower pro Stunde. Sortierbar. Mit Hinweis auf die Stichprobengröße —
-bei drei Streams pro Titel ist jede Zahl Rauschen, und das Dashboard sagt das,
-statt eine Rangliste vorzutäuschen.
-
-### Chatter: neu vs. wiederkehrend
-
-Pro Stream ein Stapelbalken: Erstchatter / wiederkehrend (1–4 Streams) /
-Stammgast (5+). Dazu eine Kohorten-Tabelle: Von den Erstchattern aus Stream N,
-wie viele waren in N+1, N+2, N+3 wieder da. Das ist die Zahl, die tatsächlich
-über Wachstum entscheidet.
-
-### Betriebsstatus
-
-`GET /health` vom Ingest, letzte Fehler aus `logs/`, Größe der DB,
-Clip-Warteschlange.
-
-## Clip-Freigabe
-
-Zusätzlich hostet das Dashboard die Freigabe-Ansicht für die Clip-Pipeline
-(siehe [`clip-shorts.md`](clip-shorts.md)): Kandidatenliste mit
-Videovorschau, Score, Chat-Ausschnitt und den Knöpfen *Übernehmen* /
-*Verwerfen*.
-
-## Abnahmekriterien
-
-- Die Zeitachse eines abgeschlossenen Streams lädt in unter 2 s.
-- Alle Marker liegen zeitlich korrekt (Abgleich gegen das VOD).
-- Die Kohorten-Tabelle stimmt mit einer manuellen SQL-Auszählung überein.

docs/projects/community-memory.md

@@ -1,76 +0,0 @@
-# 6 — Community-Gedächtnis (`apps/community`)
-
-**Wirkrichtung:** Bindung. Bei 10 Zuschauern der Unterschied zwischen
-"Zuschauer" und "Community".
-
-Läuft als Modul im `overlay-server`, nicht als eigener Prozess — es braucht
-dieselbe Chat-Verbindung und denselben WS-Kanal zum Overlay.
-
-## Datenlage
-
-Alles Nötige liegt bereits in `users` und `user_streams` (siehe
-[`../03-data-model.md`](../03-data-model.md)). Dieses Tool ist überwiegend
-**Auswertung und Ausgabe**, kaum neue Datenerfassung — deshalb ist es billig,
-sobald der Ingest steht.
-
-## Die drei Ausgaben
-
-### 1. Chat-Begrüßung
-
-Ausgelöst durch die erste Nachricht eines Users im laufenden Stream:
-
-| Fall | Bedingung | Beispiel |
-|---|---|---|
-| **Erstchatter** | `first-msg`-Tag oder `users.message_count = 0` | "Oh, @name schreibt zum ersten Mal — willkommen!" |
-| **Rückkehrer** | letzter Besuch > 21 Tage her | "@name, lange nicht gesehen." |
-| **Meilenstein** | `streams_chatted` in {5, 10, 25, 50, 100} | "Stream Nummer 25 für @name." |
-| **Stammgast** | `streams_chatted >= 5` | individuelle Begrüßung aus `users.greeting` |
-| sonst | — | nichts |
-
-Regeln, damit es nicht nervt: höchstens eine Begrüßung alle 20 s, höchstens
-zehn pro Stream, `muted_greeting` respektiert, und **keine Begrüßung, wenn Abdu
-in den letzten 15 s selbst gesprochen hat** (der Ingest weiß über OBS bzw. über
-eine Audiopegel-Schwelle, ob gerade geredet wird) — sonst redet der Bot dem
-Streamer ins Wort.
-
-### 2. Overlay-Hinweis für Abdu
-
-Kleines, nur für Abdu sichtbares Panel (eigene Browser-Source in der
-Studio-Ansicht oder zweiter Monitor). Wenn jemand schreibt:
-
-```
-┌──────────────────────────────────┐
-│ maxi_2k    Stream 15  ·  Sub 3M  │
-│ zuletzt: vor 2 Tagen             │
-│ Notiz: studiert Maschinenbau,    │
-│        spielt selbst Elden Ring  │
-│ erste Nachricht: 04.03.2026      │
-└──────────────────────────────────┘
-```
-
-**Das ist der eigentliche Wert.** Nicht der Bot, der etwas schreibt, sondern
-Abdu, der weiß, mit wem er redet. Ein Bot, der "willkommen zurück" sagt, ist
-Deko; ein Streamer, der "na, wie war die Klausur" sagt, bindet Menschen.
-
-### 3. Notizen
-
-Chat-Command für Abdu und Mods: `!notiz <name> <text>` hängt an `users.notes` an.
-Im Dashboard editierbar. Das ist die einzige Datenquelle, die Handarbeit
-braucht, und die mit dem höchsten Nutzen pro Aufwand.
-
-## Datenschutz
-
-Die DB enthält personenbezogene Daten (Chatverläufe, Notizen). Sie liegt lokal,
-wird nicht geteilt und nicht in ein Repo committet (`data/` ist in `.gitignore`).
-`!vergissmich` löscht auf Wunsch alle Daten eines Users bis auf die anonyme
-Aggregatstatistik. Notizen enthalten nichts, was man der Person nicht ins
-Gesicht sagen würde.
-
-## Abnahmekriterien
-
-- Ein Testkonto, das zum ersten Mal schreibt, wird als Erstchatter erkannt und
-  genau einmal begrüßt.
-- Nach einem Namenswechsel des Testkontos bleibt die Historie erhalten
-  (Verknüpfung über `user_id`, nicht `login`).
-- Das Overlay-Panel zeigt den Hinweis innerhalb von 500 ms nach der Nachricht.
-- Zwanzig Nachrichten in fünf Sekunden erzeugen höchstens eine Begrüßung.

docs/projects/discord-community.md

@@ -5,7 +5,7 @@ ist der Ort, an dem sie zwischen den Streams noch da sind. Ohne den zweiten Ort
 faengt jeder Stream bei null an.
 
 Der Server ist kein Tool aus der Neunerliste, aber drei davon posten dorthin:
-[Go-Live-Broadcaster](go-live-broadcaster.md), [Stream-Recap](stream-recap.md)
+[Go-Live-Broadcaster](go-live-broadcaster.md), Stream-Recap (gestrichen)
 und [Clip-to-Shorts](clip-shorts.md). Deshalb steht die Struktur hier im Repo
 und nicht nur in einer Oberflaeche.
 
@@ -33,9 +33,12 @@ und ist die massgebliche Fassung. Was hier steht, ist die Begruendung dazu.
 | Kategorie | Kanal | Wer schreibt | Wofuer |
 |---|---|---|---|
 | 📌 Info | `👋│willkommen` | niemand | Die drei Regeln, einmal gepostet |
+| 📌 Info | `🙋│begrüßung` | alle | Discords Beitrittsmeldungen |
 | 📌 Info | `📢│ankündigungen` | nur Webhooks | Stream-Start und Recap; Diskussion in Threads |
 | 🎮 Community | `💬│allgemein` | alle | Der Hauptkanal. Im Zweifel hier |
 | 🎮 Community | `🎬│clips` | alle + Clip-Knopf | Gute Momente |
+| 🎮 Community | `🎮│spielvorschläge` | alle (Forum) | Ein Beitrag je Spiel, abgestimmt per 👍 |
+| 🎮 Community | `👀│reaction-einsendungen` | alle (Forum) | Ein Beitrag je Clip, auf den Abdu reagieren soll |
 | 🎮 Community | `🔊 Zusammen zocken` | — | Sprachkanal |
 | 🔒 Intern | `🔨│mod-chat` | Mods | Fuer alle anderen unsichtbar |
 | 🔒 Intern | `🤖│technik-log` | Toolkit | Probelaeufe, Fehler, AutoMod-Treffer |
@@ -54,6 +57,23 @@ Server ist der erste Eindruck, den jemand davon bekommt.
 So bleibt die Kanalansicht eine saubere Liste von Streams, und die Diskussion
 ueber das Recap haengt trotzdem direkt daran.
 
+`🙋│begrüßung` gibt es, weil Discord die Beitrittsmeldungen sonst in den
+ersten Kanal des Servers schreibt, und das war `💬│allgemein`. Dort gingen die
+Meldungen im Gespräch unter und das Gespräch in den Meldungen. Der Kanal ist
+beschreibbar, sonst tut der Winke-Knopf unter der Meldung nichts. Welcher
+Kanal es ist, steht in `SYSTEM_CHANNEL`.
+
+Die beiden Foren hat Abdu als Textkanäle angelegt, seit 2026-10-17 stehen sie
+als Foren im Bauplan. In einem Textkanal schlägt nach drei Wochen jemand
+dasselbe Spiel noch einmal vor, weil der erste Vorschlag weggescrollt ist. Im
+Forum gibt es einen Beitrag je Spiel, darunter wird per 👍 abgestimmt. Die
+Tags für den Stand („Wird gespielt", „Gespielt", „Eher nicht" bzw. „Kommt
+dran", „Angeschaut") setzen nur Mods. Sonst markiert jeder sein eigenes Spiel
+als „wird gespielt". Discord wandelt einen Textkanal nicht in ein Forum um:
+die leeren Textkanäle wurden einmalig von Hand gelöscht, das Skript selbst
+löscht weiterhin nichts. Foren gehen auch ohne Community-Server, am echten
+Server nachgeprüft.
+
 Der Sprachkanal ist bewusst dabei, obwohl er anfangs leer sein wird. Ein
 Sprachkanal, den zwei Leute nutzen, ist der Anfang; einer, den es nicht gibt,
 wird nie einer.

docs/projects/loyalty-shop.md

@@ -1,71 +0,0 @@
-# 8 — Punktesystem mit Bedeutung (`apps/loyalty`)
-
-**Wirkrichtung:** Bindung. Läuft als Modul im `overlay-server`.
-
-## Warum nicht Channel Points?
-
-Twitch-Channel-Points funktionieren, haben aber zwei Grenzen: Man kann die
-Vergabelogik nicht anpassen (keine Boni für Verhalten, das man belohnen will),
-und Einlösungen sind an das Twitch-UI gebunden. Eigene Punkte laufen daneben.
-
-**Beides parallel betreiben.** Channel Points bleiben für simple Sachen,
-eigene Punkte für alles, was Logik braucht. `channel.channel_points_custom_reward_redemption.add`
-wird ohnehin schon ingested, also können beide Systeme dieselben Aktionen
-auslösen.
-
-## Vergabe
-
-| Anlass | Punkte |
-|---|---|
-| pro 10 Minuten Anwesenheit | 10 |
-| ...davon aktiv im Chat | +5 |
-| erste Nachricht des Streams | 25 |
-| Anwesenheit in Streamminute 1–10 | +50 (belohnt pünktliches Erscheinen) |
-| Follow | 200 (einmalig) |
-| Sub / Resub | 500 |
-| Raid rein | 300 an den Raider |
-| Clip, der übernommen wird | 250 an den Auslöser |
-
-Anwesenheit kommt aus `user_streams.minutes` (Helix-Chatter-Liste alle 5 min),
-nicht aus dem Chat allein — sonst bekommen stille Zuschauer nie etwas.
-
-## Shop
-
-Der Punkt der Sache ist, dass Einlösungen **wirklich etwas tun**:
-
-| Artikel | Kosten | Aktion | Freigabe |
-|---|---|---|---|
-| Streamtitel für 10 min | 5.000 | `PATCH /helix/channels`, Timer setzt zurück | ja |
-| Emote-Regen 30 s | 800 | Overlay-Effekt | nein |
-| Sound aus dem Board | 300 | Overlay + Audio | nein |
-| Challenge für Abdu | 3.000 | Karte im Overlay, Abdu bestätigt | ja |
-| Nächstes Spiel bestimmen | 10.000 | Eintrag in die Warteschlange | ja |
-| Facecam-Filter 60 s | 1.500 | obs-websocket Filter an | nein |
-
-`requires_approval` ist bei allem gesetzt, was den Stream nach außen verändert
-(Titel!) oder Abdu zu etwas verpflichtet. Titeländerung zusätzlich abgesichert:
-Wortfilter, Längenbegrenzung, automatische Rückkehr zum Originaltitel per
-Timer, und der Originaltitel wird vorher in `stream_segments` gesichert.
-
-## Rückerstattung
-
-Wenn eine Aktion fehlschlägt (OBS nicht erreichbar, Helix-Fehler, Abdu lehnt
-ab), werden die Punkte automatisch zurückgebucht und der User im Chat
-informiert. `redemptions.status = 'refunded'`.
-
-## Bilanz-Integrität
-
-Punkte werden nie direkt auf `users.points` geschrieben, sondern als Zeilen in
-einer `points_ledger`-Tabelle geführt; `users.points` ist ein
-Materialized-Summenfeld, das über einen Trigger aktualisiert wird. So ist jede
-Punktzahl nachvollziehbar und ein Fehler in der Vergabelogik reparierbar, ohne
-dass jemandem grundlos Punkte fehlen.
-
-## Abnahmekriterien
-
-- Ein Zuschauer, der 30 min anwesend ist und dreimal schreibt, hat exakt die
-  erwartete Punktzahl.
-- Titel-Einlösung ändert den Titel und setzt ihn nach 10 min zurück, auch wenn
-  der Server dazwischen neu startet (Timer wird persistiert).
-- Fehlgeschlagene Einlösung bucht zurück.
-- `points_ledger`-Summe stimmt mit `users.points` überein.

docs/projects/raid-network.md

@@ -1,64 +0,0 @@
-# 3 — Raid- und Netzwerk-Tool (`apps/raid-scout`)
-
-**Wirkrichtung:** Reichweite über Menschen statt über Algorithmen. In dieser
-Kanalgröße die zuverlässigste Quelle für neue Stammzuschauer.
-
-## Kandidaten finden
-
-`GET /helix/streams?game_id=<aktuelle Kategorie>&first=100&language=de`,
-seitenweise bis die Viewerzahl unter die Untergrenze fällt (Twitch sortiert
-absteigend, also von hinten interessant). Filter:
-
-- Viewer zwischen `min` und `max` (Default 5–30, konfigurierbar)
-- Sprache `de`
-- Uptime mindestens 30 min und höchstens 5 h — wer gerade erst angefangen hat,
-  verliert durch einen Raid nichts, wer gleich aufhört, kann nichts damit
-  anfangen
-- nicht auf der Sperrliste (`config/raid-blocklist.yaml`)
-
-## Bewertung
-
-```
-score = 0.35 * viewerNaehe        (Ziel: aehnliche Groesse wie wir)
-      + 0.25 * kategorieUeberlapp (gleiche Kategorie > gleiche Sparte)
-      + 0.20 * beziehung          (schon mal Kontakt gehabt? zurueckgeraidet?)
-      + 0.10 * frische            (lange nicht mehr geraidet)
-      + 0.10 * uptimeFenster
-```
-
-`beziehung` kommt aus der `raids`-Tabelle: Wer uns geraidet hat und noch keinen
-Raid zurückbekommen hat, steht ganz oben. **Das ist der eigentliche Kern des
-Tools** — nicht das Finden von Fremden, sondern das Nicht-Vergessen von
-Leuten, die schon Kontakt aufgenommen haben.
-
-## Oberfläche
-
-- **Chat-Command `!raidziel`** (nur Mods/Broadcaster): Bot postet die Top 3 mit
-  Login, Viewerzahl und Kategorie in den Chat.
-- **Overlay-Panel**, das Abdu am Streamende einblenden kann: Top 5 als Karten,
-  Klick kopiert `/raid <login>` in die Zwischenablage. Bewusst **kein
-  automatisches Auslösen** — ein Raid ist eine soziale Geste, die einen
-  Menschen braucht.
-- **Dashboard-Seite** mit der vollständigen Raid-Historie.
-
-## Netzwerk-Gedächtnis
-
-Für jeden Kanal, mit dem es je Kontakt gab:
-
-| Feld | Quelle |
-|---|---|
-| Raids rein / raus, mit Datum und Viewerzahl | `channel.raid` EventSub |
-| erwidert ja/nein | berechnet |
-| Notizen | manuell im Dashboard |
-| letzter Kontakt | berechnet |
-
-Wöchentliche Erinnerung im Dashboard: "Diese 3 haben dich geraidet, du sie noch
-nicht."
-
-## Abnahmekriterien
-
-- `!raidziel` liefert im laufenden Stream innerhalb von 3 s drei plausible
-  Kanäle in der aktuellen Kategorie.
-- Ein eingehender Raid landet automatisch in `raids` mit `direction='in'`.
-- Ein ausgehender Raid (manuell in Twitch ausgelöst) wird ebenfalls erfasst.
-- Kanäle auf der Sperrliste tauchen nie auf.

docs/projects/stream-recap.md

@@ -1,67 +0,0 @@
-# 9 — Stream-Recap (`apps/recap`)
-
-**Wirkrichtung:** Bindung. Gibt Leuten einen Grund, im Discord zu sein, und
-hält den Kanal zwischen zwei Streams präsent.
-
-## Ablauf
-
-`stream.offline` → 10 Minuten warten (VOD-Verarbeitung, letzte Clips rendern)
-→ Zahlen aus der DB ziehen → Discord-Post → optional Bluesky-Kurzfassung.
-
-## Inhalt
-
-```
-🔴 Stream vom 09.09.  ·  3 h 42 min  ·  Elden Ring, Just Chatting
-
-  Peak 17 Zuschauer   ·   Schnitt 11
-  23 Leute im Chat, davon 4 zum ersten Mal
-  +6 Follower
-
-  Top-Chatter
-    1. maxi_2k        84 Nachrichten
-    2. lenaaa          61
-    3. der_olli        47
-
-  Willkommen im Chat 👋
-    @neuer1  @neuer2  @neuer3  @neuer4
-
-  Beste Momente
-    ▸ "Malenia Versuch 41"        clips.twitch.tv/...
-    ▸ "Der Hund im Hintergrund"   clips.twitch.tv/...
-
-  VOD-Kapitel
-    00:00 Start
-    00:14 Elden Ring
-    01:32 Pause
-    ...
-
-  Nächster Stream: Mittwoch 20 Uhr
-```
-
-## Regeln, damit es gelesen wird
-
-- **Namen vor Zahlen.** Der Teil, der Leute in den Discord bringt, ist die
-  Liste mit ihren Namen darin — nicht die Peak-Viewer-Zahl. Erstchatter werden
-  namentlich begrüßt, Top-Chatter genannt.
-- **Keine schlechten Streams schönreden, aber auch nicht ausstellen.** Wenn Peak
-  unter der Hälfte des Schnitts der letzten fünf Streams liegt, entfallen die
-  Viewer-Zahlen und der Post konzentriert sich auf Chat und Momente. Öffentlich
-  schwache Zahlen zu posten schadet mehr, als es nützt; im Dashboard stehen sie
-  trotzdem.
-- **Kein Post ohne Inhalt.** Streams unter 20 Minuten oder ohne Chat-Aktivität
-  erzeugen keinen Recap.
-- **Clips einbetten, nicht verlinken.** Discord bettet Twitch-Clips ab; die
-  besten zwei nach `clips.score`.
-
-## Vergleich zur Vorwoche
-
-Zweite Zeile, klein: "Chat +18 % ggü. letzten 4 Streams". Nur bei mindestens
-vier Vergleichsstreams, sonst weggelassen — Prozentangaben auf Basis von zwei
-Datenpunkten sind Unsinn.
-
-## Abnahmekriterien
-
-- Der Post erscheint innerhalb von 15 min nach Streamende.
-- Alle Zahlen stimmen mit dem Dashboard überein.
-- Ein Stream ohne Chat erzeugt keinen Post.
-- Clip-Einbettungen funktionieren in Discord (nicht nur als nackte URL).

docs/projects/vod-chapters.md

@@ -1,54 +0,0 @@
-# 5 — VOD-Kapitel (`apps/vod-chapters`)
-
-**Wirkrichtung:** Steuerung und ein wenig Reichweite (YouTube-Zweitverwertung).
-
-## Was aufgezeichnet wird
-
-Während des Streams sammelt der Ingest ohnehin schon:
-
-| Signal | Quelle | wird Kapitel? |
-|---|---|---|
-| Kategoriewechsel | EventSub `channel.update` | immer |
-| Titelwechsel | EventSub `channel.update` | wenn Kategorie gleich bleibt |
-| OBS-Szenenwechsel | obs-websocket | nur bei Szenen aus der Whitelist |
-| Stream-Marker | `POST /helix/streams/markers` | immer |
-| erstellter Clip | `clips` | als Kapitel-Kandidat |
-
-OBS-Szenen sind das rauschendste Signal — ein Wechsel auf "BRB" und zurück sind
-zwei Wechsel, die kein Kapitel sind. Deshalb Whitelist in `config/obs-scenes.yaml`
-plus Mindestabstand von 5 Minuten zwischen Kapiteln; kürzere Segmente werden mit
-dem vorherigen verschmolzen.
-
-## Ausgabe
-
-Nach `stream.offline`: VOD über `GET /helix/videos?user_id=&type=archive&first=1`
-holen, Zeitstempel relativ zu `streams.started_at` umrechnen, Text erzeugen:
-
-```
-00:00 Start & Begrüßung
-00:14 Elden Ring — Malenia, Versuch 40
-01:32 Pause
-01:47 Elden Ring — sie ist tot
-02:55 Just Chatting — Community-Fragen
-```
-
-Format wählbar: Twitch-VOD-Beschreibung, YouTube-Kapitel (identisch, muss aber
-bei `00:00` beginnen und mindestens drei Einträge mit je mindestens 10 s haben,
-sonst zeigt YouTube keine Kapitel an), Discord-Nachricht.
-
-Twitch erlaubt kein Setzen der VOD-Beschreibung über die API — der Text landet
-deshalb in `data/vods/<datum>/chapters.txt` und wird per Push-Nachricht
-zugestellt, plus als Block im Recap-Post. Einfügen dauert zehn Sekunden.
-
-## Kapitel-Titel
-
-Der Rohtitel ist der Twitch-Titel bzw. der Kategoriename. Optional (Ausbaustufe 2)
-eine Verdichtung aus dem Chat: die häufigsten Substantive im Segment als
-Zusatz. Erst sinnvoll, wenn genug Chat-Volumen da ist.
-
-## Abnahmekriterien
-
-- Ein Testtream mit zwei Kategoriewechseln und drei Szenenwechseln erzeugt
-  genau die erwarteten Kapitel.
-- Zeitstempel weichen vom VOD um weniger als 5 s ab.
-- Kein Kapitel unter 5 Minuten Länge.

packages/core/src/config.ts

@@ -45,6 +45,47 @@ export type Config = {
     ffmpeg: { encoder: string; preset: string; crf: number; niceness: number };
     whisper: { model: string; language: string; threads: number };
   };
+  broadcaster: {
+    enabled: boolean;
+    /** `live` postet in die Ankuendigungen, `draft` in den internen Kanal. */
+    mode: 'live' | 'draft';
+    delaySecondsAfterOnline: number;
+    cooldownHours: number;
+    /** Rollenname aus dem Discord-Bauplan. Leer heisst: Post ohne Ping. */
+    pingRole: string;
+    obsScreenshot: boolean;
+  };
+  /** Kanalpunkt-Belohnungen und was sie ausloesen. Siehe apps/hub/src/rewards.ts. */
+  rewards: {
+    enabled: boolean;
+    belohnungen: Array<{
+      titel?: string; id?: string;
+      aktion: 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'liegestuetze' | 'nichts';
+      freigabe?: boolean; maxZeichen?: number; anzahl?: number;
+    }>;
+    tts: {
+      freigabe: boolean; maxZeichen: number;
+      blockliste: string[]; proPersonProStunde: number;
+      /** Piper-Stimme: Name im Modellordner (models/piper/<name>.onnx) oder absoluter Pfad. */
+      stimme: string;
+      /** Sprecher-Nummer bei Stimmen mit mehreren Sprechern. Leer: der erste. */
+      sprecher?: number;
+    };
+  };
+  overlay: { port: number; enabled: boolean };
+  /**
+   * Oeffentliche Adresse des Dienstes, ohne Schraegstrich am Ende. Nur noetig,
+   * wenn er nicht auf demselben Rechner wie der Browser laeuft - dann haengt
+   * daran der OAuth-Rueckruf von Twitch, der exakt zur eingetragenen
+   * Redirect-URI passen muss.
+   */
+  publicUrl: string;
+  /**
+   * Wo der Hub steht, bei dem sich der Stream-PC fuers Pult anmeldet. Als
+   * Vorgabe fest eingetragen, damit auf Abdus Rechner nichts einzurichten
+   * ist. Leer heisst: keine Fernsteuerung (auch per FERN_URL= abschaltbar).
+   */
+  fern: { url: string };
   ingestServer: { port: number };
   dashboard: { port: number };
   raw: YamlMap;
@@ -81,6 +122,42 @@ const DEFAULTS = {
     ffmpeg: { encoder: 'libx264', preset: 'veryfast', crf: 20, niceness: 15 },
     whisper: { model: 'ggml-small.bin', language: 'de', threads: 4 },
   },
+  broadcaster: {
+    enabled: true,
+    // Vorgabe ist `live`: der Sinn der Sache ist der Ping. Wer erst zusehen
+    // will, stellt `draft` ein - dann landet dieselbe Nachricht ohne Ping im
+    // internen Kanal. Zum Ausprobieren gibt es `abdulive golive:test`.
+    mode: 'live' as const,
+    // Twitch setzt Titel und Kategorie erst kurz nach dem Start. Wer sofort
+    // postet, kuendigt regelmaessig den Titel des letzten Streams an.
+    delaySecondsAfterOnline: 60,
+    cooldownHours: 6,
+    pingRole: 'Live-Ping',
+    obsScreenshot: true,
+  },
+  rewards: {
+    // Aus, bis jemand bewusst Belohnungen eintraegt. Eine Aktion, die
+    // niemand erwartet, ist im Stream schlimmer als gar keine.
+    enabled: false,
+    belohnungen: [] as Array<{
+      titel?: string; id?: string;
+      aktion: 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'liegestuetze' | 'nichts';
+      freigabe?: boolean; maxZeichen?: number; anzahl?: number;
+    }>,
+    tts: {
+      // Vorgabe ist die Freigabe durch Abdu. Kanalpunkte sammeln sich beim
+      // Zugucken von allein an und sind damit kaum eine Huerde; ohne diesen
+      // Schalter hat man eine Vorlesefunktion fuer Fremde im eigenen Stream.
+      freigabe: true,
+      maxZeichen: 200,
+      blockliste: [] as string[],
+      proPersonProStunde: 3,
+      stimme: 'de_DE-thorsten-medium',
+    },
+  },
+  overlay: { port: 4791, enabled: true },
+  publicUrl: '',
+  fern: { url: 'https://abdu.dimension47.de' },
   ingestServer: { port: 4790 },
   dashboard: { port: 4792 },
 };
@@ -105,7 +182,18 @@ export function loadConfig(): Config {
   if (fs.existsSync(file)) {
     raw = parseYaml(fs.readFileSync(file, 'utf8'));
   }
-  cached = { ...merge(DEFAULTS, raw), raw } as Config;
+  const merged = merge(DEFAULTS, raw) as Omit<Config, 'raw'>;
+  // Die Umgebung gewinnt: im Container steht die oeffentliche Adresse in der
+  // Unit-Datei, nicht in einer YAML, die mitversioniert wird.
+  if (process.env.PUBLIC_URL) merged.publicUrl = process.env.PUBLIC_URL;
+  merged.publicUrl = merged.publicUrl.replace(/\/+$/, '');
+  // Auch leer gesetzt gewinnt die Umgebung: so meldet sich ein Rechner zum
+  // Entwickeln nicht beim echten Hub an.
+  // Neues Objekt statt Zuweisung: ohne Eintrag in der YAML ist merged.fern
+  // dasselbe Objekt wie in DEFAULTS.
+  const fernUrl = process.env.FERN_URL ?? merged.fern.url;
+  merged.fern = { ...merged.fern, url: fernUrl.replace(/\/+$/, '') };
+  cached = { ...merged, raw } as Config;
   return cached;
 }
 

packages/core/src/yaml.test.ts

@@ -53,3 +53,37 @@ test('ein Byte Order Mark verstellt nicht den ersten Schluessel', () => {
   assert.deepEqual(y, { channel: { login: 'abdulive_' } });
   assert.ok(!Object.keys(y).some((k) => k.charCodeAt(0) === 0xfeff));
 });
+
+test('Listen aus Maps, wie in rewards.belohnungen', () => {
+  // Frueher zerfiel das in Zeichenketten wie "id: abc", und die Belohnung
+  // war ohne jede Meldung unwirksam.
+  const y = parseYaml([
+    'rewards:',
+    '  enabled: true',
+    '  belohnungen:',
+    '    - id: abc-123',
+    '      titel: Nachricht vorlesen',
+    '      aktion: tts',
+    '    - titel: Konfetti',
+    '      aktion: konfetti',
+    '  tts:',
+    '    blockliste:',
+    '      - sieg heil',
+    '      - http',
+    '    maxZeichen: 200',
+  ].join('\n'));
+  assert.deepEqual(y, {
+    rewards: {
+      enabled: true,
+      belohnungen: [
+        { id: 'abc-123', titel: 'Nachricht vorlesen', aktion: 'tts' },
+        { titel: 'Konfetti', aktion: 'konfetti' },
+      ],
+      tts: { blockliste: ['sieg heil', 'http'], maxZeichen: 200 },
+    },
+  });
+});
+
+test('Listeneintrag mit Doppelpunkt ohne Leerzeichen bleibt Text', () => {
+  assert.deepEqual(parseYaml('a:\n  - http://x.de\n'), { a: ['http://x.de'] });
+});

packages/core/src/yaml.ts

@@ -1,8 +1,8 @@
 // Minimaler YAML-Leser fuer unsere eigenen Konfigurationsdateien.
 //
 // Deckt genau das ab, was config/*.yaml benutzt: verschachtelte Maps ueber
-// Einrueckung, Skalare, Inline-Maps `{a: 1, b: 2}`, Listen aus Skalaren und
+// Einrueckung, Skalare, Inline-Maps `{a: 1, b: 2}`, Listen aus Skalaren oder
-// Blockskalare (`>` / `|`). Bewusst kein vollstaendiges YAML - das Projekt
+// Maps (`- titel: X`) und Blockskalare (`>` / `|`). Bewusst kein vollstaendiges YAML - das Projekt
 // kommt ohne npm-Abhaengigkeiten aus, und der Sprachumfang, den wir selbst
 // schreiben, ist ueberschaubar.
 
@@ -73,7 +73,20 @@ export function parseYaml(text: string): YamlMap {
     if (body.startsWith('- ')) {
       const key = frame.listKey;
       const list = key ? frame.target[key] : undefined;
-      if (Array.isArray(list)) list.push(scalar(body.slice(2)));
+      const item = body.slice(2);
+      // `- titel: X` beginnt eine Map als Listeneintrag. Die Zeile wird mit
+      // der Einrueckung ihres Inhalts neu gelesen, die folgenden, tiefer
+      // eingerueckten Zeilen landen in derselben Map. Ohne das zerfiel
+      // `rewards.belohnungen` in einzelne Zeichenketten, und jede Belohnung
+      // war ohne Fehlermeldung unwirksam.
+      if (Array.isArray(list) && /^[^\s'"{[#-][^:]*:(\s|$)/.test(item)) {
+        const map: YamlMap = {};
+        list.push(map);
+        stack.push({ indent, target: map });
+        lines[i] = ' '.repeat(indent + 2) + item;
+        continue;
+      }
+      if (Array.isArray(list)) list.push(scalar(item));
       i++;
       continue;
     }

packages/db/migrations/002_posts.sql

@@ -0,0 +1,34 @@
+-- Was das Toolkit nach draussen geschickt hat. Eine Zeile je Plattform und
+-- Anlass.
+--
+-- Der Zweck ist nicht Statistik, sondern Verhinderung: Twitch schickt nach
+-- einem Verbindungsabbruch ein zweites stream.online, und ohne diese Tabelle
+-- bekommt der Discord-Server dann einen zweiten Rundruf. Ein Ping zu viel
+-- kostet Abonnenten der Rolle, ein Ping zu wenig kostet nur einen Stream.
+
+-- stream_id ist bewusst KEIN Fremdschluessel. Ein Post ist die Quittung fuer
+-- etwas, das den Rechner verlassen hat; die muss auch dann schreibbar sein,
+-- wenn es die Sitzung in `streams` nicht gibt - beim Probelauf von
+-- `golive:test` etwa. Ein Fremdschluessel wuerde hier ausgerechnet das
+-- Protokoll verhindern, das erklaeren soll, was passiert ist.
+CREATE TABLE posts (
+  id         TEXT PRIMARY KEY,
+  stream_id  TEXT,
+  kind       TEXT NOT NULL,          -- golive | recap | clip
+  platform   TEXT NOT NULL,          -- discord | bluesky | mastodon | ...
+  mode       TEXT NOT NULL,          -- live | draft
+  created_at TEXT NOT NULL,
+  status     TEXT NOT NULL,          -- gesendet | fehlgeschlagen | entwurf
+  title      TEXT,
+  category   TEXT,
+  url        TEXT,                   -- Nachricht auf der Zielplattform
+  detail     TEXT                    -- Fehlertext, wenn es schiefging
+);
+
+-- Die Frage, die vor jedem Post gestellt wird: gab es das hier schon?
+-- Nur gesendete Posts sperren; ein fehlgeschlagener Versuch darf wiederholt
+-- werden, sonst kostet ein Netzwerkaussetzer die Ankuendigung des Streams.
+CREATE UNIQUE INDEX idx_posts_einmal
+  ON posts(stream_id, kind, platform)
+  WHERE stream_id IS NOT NULL AND status = 'gesendet';
+CREATE INDEX idx_posts_kind ON posts(kind, created_at);

packages/db/migrations/003_zaehler.sql

@@ -0,0 +1,8 @@
+-- Zaehler, die einen Neustart ueberleben muessen. Erster Fall: offene
+-- Liegestuetze aus Kanalpunkten. Wer 2000 Punkte ausgegeben hat, will nicht
+-- erleben, dass ein Update des Hubs seine Liegestuetze verschluckt.
+CREATE TABLE zaehler (
+  name      TEXT PRIMARY KEY,
+  wert      INTEGER NOT NULL,
+  geaendert TEXT NOT NULL
+);

packages/db/src/repos.test.ts

@@ -21,8 +21,8 @@ function msg(over: Partial<ChatMessage> = {}): ChatMessage {
     id: `m-${Math.random().toString(36).slice(2)}`,
     ts: '2026-09-09T20:00:00.000Z',
     userId: '42', login: 'maxi_2k', displayName: 'maxi_2k',
-    text: 'moin', emotes: [], isFirst: false, isReturning: false,
+    text: 'moin', emotes: [], gifs: [], isFirst: false, isReturning: false,
-    isCommand: false, isMod: false, isSub: false, isBroadcaster: false,
+    isCommand: false, isMod: false, isSub: false, isBroadcaster: false, badges: [],
     bits: 0, color: null, ...over,
   };
 }

packages/db/src/repos.ts

@@ -19,6 +19,12 @@ export type ClipRow = {
   status: string; score: number | null;
 };
 
+export type PostRow = {
+  id: string; stream_id: string | null; kind: string; platform: string;
+  mode: string; created_at: string; status: string;
+  title: string | null; category: string | null; url: string | null; detail: string | null;
+};
+
 export type StreamRow = {
   id: string; started_at: string; ended_at: string | null;
   peak_viewers: number; unique_chatters: number;
@@ -84,6 +90,21 @@ export function repos(db: Db) {
     clipsOfStream: db.prepare(
       'SELECT * FROM clips WHERE stream_id IS ? ORDER BY created_at DESC'
     ),
+    insertPost: db.prepare(`
+      INSERT INTO posts
+        (id, stream_id, kind, platform, mode, created_at, status, title, category, url, detail)
+      VALUES (?,?,?,?,?,?,?,?,?,?,?)
+    `),
+    postFor: db.prepare(`
+      SELECT * FROM posts
+      WHERE stream_id IS ? AND kind = ? AND platform = ? AND status = 'gesendet'
+      LIMIT 1
+    `),
+    lastPost: db.prepare(`
+      SELECT * FROM posts
+      WHERE kind = ? AND platform = ? AND status = 'gesendet'
+      ORDER BY created_at DESC LIMIT 1
+    `),
     stats: db.prepare(`
       SELECT
         (SELECT COUNT(*) FROM chat_messages) AS messages,
@@ -160,6 +181,37 @@ export function repos(db: Db) {
         .run(...keys.map((k) => fields[k] ?? null), id);
     },
 
+    /**
+     * Haelt fest, was rausgegangen ist. Wirft nicht, wenn der eindeutige Index
+     * zuschlaegt - dann war jemand anders schneller, und genau das soll er.
+     */
+    insertPost(p: {
+      streamId: string | null; kind: string; platform: string; mode: string;
+      status: string; title?: string | null; category?: string | null;
+      url?: string | null; detail?: string | null;
+    }): string | null {
+      const id = ulid();
+      try {
+        stmt.insertPost.run(id, p.streamId, p.kind, p.platform, p.mode,
+          new Date().toISOString(), p.status,
+          p.title ?? null, p.category ?? null, p.url ?? null, p.detail ?? null);
+        return id;
+      } catch (err) {
+        if (/UNIQUE/i.test((err as Error).message)) return null;
+        throw err;
+      }
+    },
+
+    /** Gab es fuer diesen Stream schon einen gesendeten Post dieser Art? */
+    postFor(streamId: string | null, kind: string, platform: string) {
+      return stmt.postFor.get(streamId, kind, platform) as PostRow | undefined;
+    },
+
+    /** Der letzte gesendete Post dieser Art - fuer die Abklingzeit. */
+    lastPost(kind: string, platform: string) {
+      return stmt.lastPost.get(kind, platform) as PostRow | undefined;
+    },
+
     getClip(id: string) { return stmt.getClip.get(id) as ClipRow | undefined; },
     clipsOfStream(streamId: string | null) {
       return stmt.clipsOfStream.all(streamId) as ClipRow[];

packages/discord/src/api.ts

@@ -161,8 +161,24 @@ export type RestFull = Rest & {
 
 export type ApiRole = { id: string; name: string; permissions: string; position: number; color: number; hoist: boolean; mentionable: boolean; managed: boolean };
 export type ApiOverwrite = { id: string; type: 0 | 1; allow: string; deny: string };
-export type ApiChannel = { id: string; name: string; type: number; position: number; parent_id: string | null; topic?: string | null; permission_overwrites?: ApiOverwrite[] };
+export type ApiTag = { id?: string; name: string; emoji_id?: string | null; emoji_name: string | null; moderated: boolean };
-export type ApiGuild = { id: string; name: string; owner_id: string; roles: ApiRole[]; features: string[] };
+export type ApiChannel = {
+  id: string; name: string; type: number; position: number; parent_id: string | null;
+  topic?: string | null; permission_overwrites?: ApiOverwrite[];
+  // Nur Foren.
+  available_tags?: ApiTag[];
+  default_reaction_emoji?: { emoji_id: string | null; emoji_name: string | null } | null;
+};
+export type ApiGuild = {
+  id: string; name: string; owner_id: string; roles: ApiRole[]; features: string[];
+  // Die Felder aus GUILD_SETTINGS, damit sich vergleichen laesst, statt bei
+  // jedem Lauf blind zu schreiben.
+  verification_level?: number;
+  explicit_content_filter?: number;
+  default_message_notifications?: number;
+  system_channel_flags?: number;
+  system_channel_id?: string | null;
+};
 export type ApiWebhook = { id: string; name: string; channel_id: string; url?: string; token?: string };
 export type ApiUser = { id: string; username: string; bot?: boolean };
 

packages/discord/src/apply.test.ts

@@ -7,7 +7,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { CH, type ApiChannel, type ApiGuild, type ApiOverwrite, type ApiRole, type ApiWebhook, type Rest } from './api.ts';
-import { applyPlan, type Step } from './apply.ts';
+import { applyPlan, mergeTags, type Step } from './apply.ts';
 import { CATEGORIES, CHANNELS, EVERYONE, ROLES } from './plan.ts';
 import { str } from './permissions.ts';
 
@@ -109,7 +109,13 @@ class FakeDiscord implements Rest {
 
   async patch<T>(path: string, body: unknown): Promise<T> {
     this.calls.push(`PATCH ${path}`);
-    if (path === `/guilds/${GUILD}`) return {} as T;
+    if (path === `/guilds/${GUILD}`) {
+      // Wie der echte Server: gesetzte Einstellungen stehen danach auch drin.
+      // Ohne das liesse sich nicht pruefen, ob ein zweiter Lauf sie in Ruhe
+      // laesst.
+      Object.assign(this.guild, body as Record<string, unknown>);
+      return structuredClone(this.guild) as T;
+    }
     if (path === `/guilds/${GUILD}/roles`) {                         // Rangfolge
       for (const e of body as Array<{ id: string; position: number }>) {
         const r = this.guild.roles.find((x) => x.id === e.id);
@@ -187,7 +193,7 @@ test('der erste Lauf legt Rollen, Kategorien, Kanaele und Webhooks an', async ()
   for (const c of CHANNELS) {
     assert.ok(api.channels.find((x) => x.name === c.name), `Kanal ${c.name} fehlt`);
   }
-  assert.equal(res.webhooks, 3);
+  assert.equal(res.webhooks, 4);
   assert.equal(api.automod.length, 2);
   assert.equal(counts(res.steps)['uebersprungen'] ?? 0, 0);
 });
@@ -259,7 +265,7 @@ test('der zweite Lauf aendert nichts', async () => {
     `unerwartete Schreibzugriffe: ${schreibend.join(', ')}`);
 
   assert.equal(counts(res.steps)['erstellt'] ?? 0, 0);
-  assert.equal(res.webhooks, 3, 'die bestehenden Webhook-URLs muessen wiedergefunden werden');
+  assert.equal(res.webhooks, 4, 'die bestehenden Webhook-URLs muessen wiedergefunden werden');
 });
 
 test('die Begruessung wird nicht ein zweites Mal gepostet', async () => {
@@ -320,7 +326,7 @@ test('ein von Hand angelegter Webhook wird gemeldet, nicht ueberschrieben', asyn
   const step = res.steps.find((s) => s.kind === 'Webhook' && s.name.startsWith('Go-Live'));
   assert.equal(step?.change, 'uebersprungen');
   assert.match(step?.note ?? '', /nicht auslesbar/);
-  assert.equal(res.webhooks, 2);
+  assert.equal(res.webhooks, 3, 'die drei uebrigen muessen trotzdem durchkommen');
 });
 
 test('eine von Discord verwaltete Rolle wird in Ruhe gelassen', async () => {
@@ -375,7 +381,7 @@ test('Bot-Rolle ganz unten: Rangfolge wird gemeldet statt zu scheitern', async (
   assert.match(step?.note ?? '', /nach oben ziehen/);
   // Alles andere muss trotzdem stehen.
   assert.equal(api.channels.length, 3 + CHANNELS.length);
-  assert.equal(res.webhooks, 3);
+  assert.equal(res.webhooks, 4);
 });
 
 // ---------------------------------------------------------------- Umbenennen
@@ -421,10 +427,31 @@ test('haengt Discord beim Umbenennen im Rate Limit, laeuft der Rest weiter', asy
   assert.equal(step?.change, 'uebersprungen');
   assert.match(step?.note ?? '', /530 s/);
   // Die uebrigen Kanaele und die Webhooks muessen trotzdem entstehen.
-  assert.equal(res.webhooks, 3);
+  assert.equal(res.webhooks, 4);
   assert.equal(api.automod.length, 2);
 });
 
+test('der zweite Lauf schreibt nichts mehr - auch nicht Einstellungen und Rangfolge', async () => {
+  // Der Bauplan verspricht, dass ein zweiter Lauf nichts aendert. Zwei
+  // Schritte haben das lange gebrochen, weil sie ohne Vergleich geschrieben
+  // haben: die Servereinstellungen und die Rangfolge der Rollen. Folgenlos
+  // war das nicht - jeder Lauf hinterliess zwei Eintraege im Audit-Log und
+  // liess den Bericht so aussehen, als sei etwas passiert.
+  const api = new FakeDiscord();
+  await run(api);
+
+  api.calls.length = 0;
+  const res = await run(api);
+
+  assert.equal(api.calls.some((c) => c === `PATCH /guilds/${GUILD}`), false,
+    'Servereinstellungen standen schon');
+  assert.equal(api.calls.some((c) => c === `PATCH /guilds/${GUILD}/roles`), false,
+    'die Rangfolge stand schon');
+  assert.equal(res.steps.find((s) => s.kind === 'Server')?.change, 'unveraendert');
+  assert.equal(res.steps.find((s) => s.name === 'Rangfolge')?.change, 'unveraendert');
+  assert.equal(res.steps.some((s) => s.change === 'erstellt'), false, 'nichts neu angelegt');
+});
+
 test('ein geaenderter Blocktext wird auf eine bestehende Regel nachgezogen', async () => {
   const api = new FakeDiscord();
   await run(api);
@@ -477,3 +504,41 @@ test('eine Nachricht ohne Knopfleiste bekommt sie nachgereicht', async () => {
   assert.equal((api.messages.get(kanal)![0]!.components as unknown[]).length, 1);
   assert.equal(api.messages.get(kanal)!.length, 1, 'nicht neu posten');
 });
+
+// ---------------------------------------------------------------- Foren
+
+test('ein Forum bekommt Tags und Standard-Reaktion aus dem Bauplan', async () => {
+  const api = new FakeDiscord();
+  await run(api);
+  const plan = CHANNELS.find((c) => c.key === 'spielvorschlaege')!;
+  const forum = live(api, 'spielvorschlaege')!;
+  assert.equal(forum.type, CH.FORUM);
+  assert.deepEqual(forum.available_tags?.map((t) => t.name), plan.tags?.map((t) => t.name));
+  assert.equal(forum.default_reaction_emoji?.emoji_name, plan.reaction);
+});
+
+test('ein Textkanal gleichen Namens wird nicht fuer das Forum gehalten', async () => {
+  // Discord kann einen Textkanal nicht in ein Forum umwandeln. Der alte steht
+  // also daneben, bis ihn jemand loescht - angepasst werden darf er nicht.
+  const api = new FakeDiscord();
+  api.channels.push({ id: '1', name: '🎮│spielvorschläge', type: CH.TEXT, position: 0, parent_id: null });
+  await run(api);
+  assert.equal(api.channels.filter((c) => c.name === '🎮│spielvorschläge').length, 2);
+  assert.equal(api.channels.find((c) => c.id === '1')?.available_tags, undefined);
+});
+
+test('von Hand angelegte Tags bleiben mit ihrer ID stehen', async () => {
+  const fremd = { id: '77', name: 'Horror', emoji_name: '👻', moderated: false };
+  const eigen = { id: '78', name: 'gespielt', emoji_name: '✔️', moderated: false };
+  const out = mergeTags([fremd, eigen], [
+    { name: 'Gespielt', emoji: '✅', moderated: true },
+    { name: 'Eher nicht', emoji: '❌', moderated: true },
+  ]);
+  assert.ok(out);
+  assert.deepEqual(out.find((t) => t.name === 'Horror'), fremd);
+  const g = out.find((t) => t.name === 'Gespielt')!;
+  assert.equal(g.id, '78', 'ohne ID verlieren die Beitraege ihre Markierung');
+  assert.equal(g.emoji_name, '✅');
+  assert.ok(out.find((t) => t.name === 'Eher nicht'));
+  assert.equal(mergeTags(out, [{ name: 'Gespielt', emoji: '✅', moderated: true }]), null);
+});

packages/discord/src/apply.ts

@@ -11,14 +11,14 @@
 import { logger } from '#core/logger.ts';
 import { updateSecrets } from '#twitch/secrets.ts';
 import {
-  CH, type ApiChannel, type ApiGuild, type ApiOverwrite, type ApiRole, type ApiUser,
+  CH, type ApiChannel, type ApiGuild, type ApiOverwrite, type ApiRole, type ApiTag, type ApiUser,
   type ApiWebhook, type Rest,
 } from './api.ts';
 import { str } from './permissions.ts';
 import { selfRoleComponents } from './selfroles.ts';
 import {
-  AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, GUILD_SETTINGS, ROLES, WELCOME,
+  AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, GUILD_SETTINGS, ROLES, SYSTEM_CHANNEL, WELCOME,
-  type CategoryPlan, type ChannelPlan, type OverwritePlan, type WebhookSlot,
+  type CategoryPlan, type ChannelPlan, type OverwritePlan, type TagPlan, type WebhookSlot,
 } from './plan.ts';
 
 const log = logger('discord:setup');
@@ -193,9 +193,11 @@ async function applyRoleOrder(
   if (dry || wanted.length === 0) return;
 
   let botTop: number;
+  let istPosition = new Map<string, number>();
   try {
     const member = await api.get<{ roles: string[] }>(`/guilds/${guild.id}/members/${botUserId}`);
     const fresh = await api.get<ApiRole[]>(`/guilds/${guild.id}/roles`);
+    istPosition = new Map(fresh.map((r) => [r.id, r.position]));
     botTop = fresh
       .filter((r) => member.roles.includes(r.id))
       .reduce((max, r) => Math.max(max, r.position), 0);
@@ -211,6 +213,15 @@ async function applyRoleOrder(
     return;
   }
 
+  // Stimmt die Rangfolge schon, nicht schreiben. Ein PATCH mit denselben
+  // Werten ist zwar folgenlos, kostet aber bei jedem Lauf einen Aufruf und
+  // einen Eintrag im Audit-Log - und laesst den Lauf so aussehen, als haette
+  // er etwas geaendert.
+  if (wanted.every((id, i) => istPosition.get(id) === fit.positions[i])) {
+    steps.push({ kind: 'Rollen', name: 'Rangfolge', change: 'unveraendert' });
+    return;
+  }
+
   try {
     await api.patch(`/guilds/${guild.id}/roles`,
       wanted.map((id, i) => ({ id, position: fit.positions[i] })), 'Rangfolge aus dem Bauplan');
@@ -230,7 +241,30 @@ function kindOf(type: number): string {
 }
 
 /** Kategorie und Kanal unterscheiden sich fuers Auftragen nur im Typ. */
-type AnyPlan = CategoryPlan & { type: number; topic?: string };
+type AnyPlan = CategoryPlan & { type: number; topic?: string; tags?: TagPlan[]; reaction?: string };
+
+/**
+ * Tags eines Forums: die aus dem Plan nachziehen, fremde stehen lassen.
+ * Discord ersetzt beim PATCH die ganze Liste, deshalb gehen die vorhandenen
+ * mit ihrer ID wieder mit - ohne ID waere es ein neuer Tag, und Beitraege
+ * verloeren ihre Markierung. Gibt null zurueck, wenn alles passt.
+ */
+export function mergeTags(existing: ApiTag[], plan: TagPlan[]): ApiTag[] | null {
+  let changed = false;
+  const out = existing.map((t) => ({ ...t }));
+  for (const p of plan) {
+    const want = { name: p.name, emoji_name: p.emoji, moderated: p.moderated ?? false };
+    const hit = out.find((t) => eq(t.name, p.name));
+    if (!hit) {
+      out.push(want);
+      changed = true;
+    } else if (hit.name !== want.name || hit.emoji_name !== want.emoji_name || hit.moderated !== want.moderated) {
+      Object.assign(hit, want, { emoji_id: null });
+      changed = true;
+    }
+  }
+  return changed ? out : null;
+}
 
 async function applyChannel(
   api: Rest, guild: ApiGuild, existing: ApiChannel[], steps: Step[], dry: boolean,
@@ -257,6 +291,8 @@ async function applyChannel(
       ...(parentId ? { parent_id: parentId } : {}),
       ...(plan.topic ? { topic: plan.topic } : {}),
       ...(overwrites.length ? { permission_overwrites: overwrites } : {}),
+      ...(plan.tags?.length ? { available_tags: mergeTags([], plan.tags) } : {}),
+      ...(plan.reaction ? { default_reaction_emoji: { emoji_id: null, emoji_name: plan.reaction } } : {}),
     }, 'Kanal aus dem Bauplan');
     steps.push({ kind, name: plan.name, change: 'erstellt' });
     return made;
@@ -269,6 +305,11 @@ async function applyChannel(
   if (parentId && found.parent_id !== parentId) patch['parent_id'] = parentId;
   const merged = mergeOverwrites(found.permission_overwrites ?? [], plan.overwrites ?? [], roleId);
   if (merged) patch['permission_overwrites'] = merged;
+  const tags = plan.tags?.length ? mergeTags(found.available_tags ?? [], plan.tags) : null;
+  if (tags) patch['available_tags'] = tags;
+  if (plan.reaction && found.default_reaction_emoji?.emoji_name !== plan.reaction) {
+    patch['default_reaction_emoji'] = { emoji_id: null, emoji_name: plan.reaction };
+  }
 
   if (Object.keys(patch).length === 0) {
     steps.push({ kind, name: plan.name, change: 'unveraendert' });
@@ -480,9 +521,17 @@ export async function applyPlan(
   const me = await api.get<ApiUser>('/users/@me');
   log.info(`Server "${guild.name}"${dry ? ' (Vorschau, es wird nichts geaendert)' : ''}`);
 
-  // 1. Servereinstellungen
+  // 1. Servereinstellungen. Vergleichen statt blind schreiben: sonst meldet
-  if (!dry) await api.patch(`/guilds/${guild.id}`, GUILD_SETTINGS, 'Servereinstellungen aus dem Bauplan');
+  // jeder Lauf eine Aenderung, auch wenn es keine gab, und die Vorschau sagt
-  steps.push({ kind: 'Server', name: guild.name, change: dry ? 'unveraendert' : 'angepasst' });
+  // etwas anderes als der echte Lauf.
+  const abweichend = (Object.entries(GUILD_SETTINGS) as Array<[keyof ApiGuild, number]>)
+    .some(([k, v]) => guild[k] !== v);
+  if (abweichend) {
+    if (!dry) await api.patch(`/guilds/${guild.id}`, GUILD_SETTINGS, 'Servereinstellungen aus dem Bauplan');
+    steps.push({ kind: 'Server', name: guild.name, change: dry ? 'erstellt' : 'angepasst' });
+  } else {
+    steps.push({ kind: 'Server', name: guild.name, change: 'unveraendert' });
+  }
 
   // 2. Rollen
   const roleIds = await applyRoles(api, guild, me.id, steps, dry);
@@ -506,7 +555,13 @@ export async function applyPlan(
     await applyWebhooks(api, channel, plan, steps, dry, urls);
   }
 
-  // 4. AutoMod und Begruessung - beides braucht Kanaele, die es geben muss.
+  // 4. Beitrittsmeldungen, AutoMod und Begruessung - alles braucht Kanaele,
+  // die es geben muss.
+  const system = made.get(SYSTEM_CHANNEL);
+  if (system && guild.system_channel_id !== system.id) {
+    if (!dry) await api.patch(`/guilds/${guild.id}`, { system_channel_id: system.id }, 'Beitrittsmeldungen aus dem Bauplan');
+    steps.push({ kind: 'Server', name: `Beitrittsmeldungen nach ${system.name}`, change: dry ? 'erstellt' : 'angepasst' });
+  }
   await applyAutomod(api, guild, made.get('technik-log')?.id ?? null, steps, dry);
   const welcome = made.get('willkommen');
   if (welcome) {

packages/discord/src/plan.test.ts

@@ -6,7 +6,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { P, bits, names, str } from './permissions.ts';
-import { AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, ROLES, WELCOME } from './plan.ts';
+import { AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, ROLES, SYSTEM_CHANNEL, WELCOME } from './plan.ts';
 import { findChannel, mergeOverwrites, normalizeName, rolePositions } from './apply.ts';
 import { CH } from './api.ts';
 
@@ -150,8 +150,20 @@ test('alle internen Kanaele liegen wirklich in der internen Kategorie', () => {
 });
 
 test('jeder Webhook-Platz kommt genau einmal vor', () => {
+  // Zweimal derselbe Platz hiesse: der zweite Kanal ueberschreibt die URL des
+  // ersten im Zugangsdaten-Speicher, und einer der beiden postet ins Leere.
   const slots = CHANNELS.flatMap((c) => (c.webhooks ?? []).map((w) => w.slot));
-  assert.deepEqual([...slots].sort(), ['clipsWebhook', 'goLiveWebhook', 'recapWebhook']);
+  assert.deepEqual([...slots].sort(),
+    ['clipsWebhook', 'goLiveWebhook', 'recapWebhook', 'technikWebhook']);
+  assert.equal(new Set(slots).size, slots.length);
+});
+
+test('der Entwurfsmodus postet in einen Kanal, den Mitglieder nicht sehen', () => {
+  // `broadcaster.mode: draft` schickt dieselbe Nachricht wie im Betrieb,
+  // nur ohne Ping. Laege der Kanal oeffentlich, waere jeder Probelauf eine
+  // falsche Ankuendigung im Server.
+  const kanal = CHANNELS.find((c) => (c.webhooks ?? []).some((w) => w.slot === 'technikWebhook'));
+  assert.equal(kanal?.category, 'intern');
 });
 
 test('Webhooks haengen nur an Kanaelen, in denen Mitglieder nicht dazwischenfunken', () => {
@@ -168,6 +180,16 @@ test('der Begruessungstext verweist nur auf Kanaele, die angelegt werden', () =>
   }
 });
 
+test('Beitritte landen in einem eigenen, beschreibbaren Kanal', () => {
+  // Ohne Angabe nimmt Discord den ersten Kanal, und das war #allgemein.
+  const c = CHANNELS.find((x) => x.key === SYSTEM_CHANNEL);
+  assert.ok(c, `${SYSTEM_CHANNEL} gibt es nicht`);
+  assert.notEqual(c.key, 'allgemein');
+  // Der Winke-Knopf unter der Meldung schreibt im Namen dessen, der klickt.
+  const deny = c.overwrites?.find((o) => o.role === '@everyone')?.deny ?? 0n;
+  assert.equal(deny & P.SEND_MESSAGES, 0n);
+});
+
 // ---------------------------------------------------------------- Merge
 
 const ID = (name: string): string | undefined =>
@@ -322,3 +344,16 @@ test('die AutoMod-Regel kennt ihren frueheren Namen', () => {
   assert.ok(regel?.aliases?.includes('Erwaehnungs-Spam'),
     'sonst steht die Regel nach der Umbenennung zweimal da');
 });
+
+test('Tags und Standard-Reaktion stehen nur an Foren und passen in Discords Grenzen', () => {
+  for (const c of CHANNELS) {
+    if (c.type !== CH.FORUM) {
+      assert.equal(c.tags, undefined, `${c.name}: Tags gibt es nur in Foren`);
+      assert.equal(c.reaction, undefined, `${c.name}: Standard-Reaktion gibt es nur in Foren`);
+      continue;
+    }
+    assert.ok((c.tags?.length ?? 0) <= 20, `${c.name}: hoechstens 20 Tags`);
+    for (const t of c.tags ?? []) assert.ok(t.name.length <= 20, `Tag ${t.name} ist laenger als 20 Zeichen`);
+    assert.ok((c.topic?.length ?? 0) <= 4096, `${c.name}: Richtlinien zu lang`);
+  }
+});

packages/discord/src/plan.ts

@@ -21,7 +21,7 @@ import { CH } from './api.ts';
 // und der erste Eindruck eines Servers ist der Text darin.
 
 /** Schluessel, unter denen eine Webhook-URL im Zugangsdaten-Speicher landet. */
-export type WebhookSlot = 'goLiveWebhook' | 'recapWebhook' | 'clipsWebhook';
+export type WebhookSlot = 'goLiveWebhook' | 'recapWebhook' | 'clipsWebhook' | 'technikWebhook';
 
 export type RolePlan = {
   name: string;
@@ -49,16 +49,30 @@ export type CategoryPlan = {
   overwrites?: OverwritePlan[];
 };
 
+/** Ein Stichwort, mit dem Forenbeitraege markiert werden. */
+export type TagPlan = {
+  /** Hoechstens 20 Zeichen, sonst lehnt Discord ab. */
+  name: string;
+  emoji: string;
+  /** Setzen duerfen nur Mods (MANAGE_THREADS), nicht der Verfasser. */
+  moderated?: boolean;
+};
+
 export type ChannelPlan = {
   key: string;
   name: string;
   aliases?: string[];
   type: number;
+  /** Bei Foren sind das die Richtlinien, die ueber jedem neuen Beitrag stehen. */
   topic?: string;
   /** `key` einer Kategorie aus CATEGORIES. */
   category?: string;
   overwrites?: OverwritePlan[];
   webhooks?: Array<{ name: string; slot: WebhookSlot }>;
+  /** Nur Foren. Von Hand angelegte Tags bleiben daneben stehen. */
+  tags?: TagPlan[];
+  /** Nur Foren: die Reaktion, die unter jedem Beitrag schon angeboten wird. */
+  reaction?: string;
 };
 
 // ---------------------------------------------------------------- Rechte
@@ -184,6 +198,17 @@ export const CHANNELS: ChannelPlan[] = [
     topic: 'Was das hier ist und die drei Regeln.',
     overwrites: READONLY,
   },
+  {
+    // Hier landen Discords Beitrittsmeldungen (SYSTEM_CHANNEL). Beschreibbar,
+    // damit der Winke-Knopf unter der Meldung funktioniert - der antwortet im
+    // Namen dessen, der klickt.
+    key: 'begruessung',
+    name: '🙋│begrüßung',
+    aliases: ['begrüßung', 'begruessung'],
+    type: CH.TEXT,
+    category: 'info',
+    topic: 'Wer neu ist, taucht hier auf. Sag Hallo.',
+  },
   {
     key: 'ankuendigungen',
     name: '📢│ankündigungen',
@@ -214,6 +239,44 @@ export const CHANNELS: ChannelPlan[] = [
     topic: 'Gute Momente aus dem Stream. Der Clip-Knopf postet hier hin.',
     webhooks: [{ name: 'Clips', slot: 'clipsWebhook' }],
   },
+  {
+    // Von Abdu als Textkanal angelegt, seit 2026-10-17 ein Forum: ein Beitrag
+    // je Spiel, abgestimmt wird per Daumen. Im Textkanal schlaegt nach drei
+    // Wochen jemand dasselbe Spiel noch einmal vor, weil der erste Vorschlag
+    // weggescrollt ist. Der erste Satz der Richtlinien ist Abdus eigener.
+    // Die Stand-Tags setzen nur Mods, sonst markiert jeder sein Spiel als
+    // "wird gespielt".
+    key: 'spielvorschlaege',
+    name: '🎮│spielvorschläge',
+    aliases: ['spielvorschläge', 'spielvorschlaege'],
+    type: CH.FORUM,
+    category: 'community',
+    topic: 'Ihr wollt sehen wie ich Spiele zocke, die euch gefallen? Schreibt gerne eure Vorschläge rein!\n\n' +
+      'Ein Beitrag pro Spiel. Gibt es das Spiel schon, Daumen hoch drücken statt noch einmal posten - ' +
+      'so sehe ich, was ihr am meisten sehen wollt.',
+    reaction: '👍',
+    tags: [
+      { name: 'Wird gespielt', emoji: '🎮', moderated: true },
+      { name: 'Gespielt', emoji: '✅', moderated: true },
+      { name: 'Eher nicht', emoji: '❌', moderated: true },
+    ],
+  },
+  {
+    // Ebenfalls von Abdu angelegt und ebenfalls ein Forum: ein Beitrag je
+    // Clip, damit man sieht, was schon dran war.
+    key: 'reaction',
+    name: '👀│reaction-einsendungen',
+    aliases: ['reaction-einsendungen'],
+    type: CH.FORUM,
+    category: 'community',
+    topic: 'Ihr habt Clips oder Videos worauf ich reagieren sollte? Schickt hier die Clips rein!\n\n' +
+      'Ein Beitrag pro Clip, Link in den Beitrag.',
+    reaction: '👍',
+    tags: [
+      { name: 'Kommt dran', emoji: '🔜', moderated: true },
+      { name: 'Angeschaut', emoji: '✅', moderated: true },
+    ],
+  },
   {
     key: 'voice',
     name: '🔊 Zusammen zocken',
@@ -236,6 +299,10 @@ export const CHANNELS: ChannelPlan[] = [
     type: CH.TEXT,
     category: 'intern',
     topic: 'Meldungen des Toolkits: Probeläufe, Fehler, AutoMod-Treffer.',
+    // Der Entwurfsmodus des Go-Live-Posts landet hier: dieselbe Nachricht,
+    // die sonst in die Ankuendigungen ginge, nur ohne Ping und nur fuer Mods.
+    // So sieht man das Ergebnis, bevor es der Server sieht.
+    webhooks: [{ name: 'Technik', slot: 'technikWebhook' }],
   },
 ];
 
@@ -256,6 +323,14 @@ export const GUILD_SETTINGS = {
   system_channel_flags: 4,        // Einrichtungstipps unterdruecken, Beitritte zeigen
 };
 
+/**
+ * `key` des Kanals, in den Discord "X ist beigetreten" schreibt. Ohne Angabe
+ * nimmt Discord den ersten Kanal des Servers, und das war #allgemein: dort
+ * gingen die Beitritte zwischen den Gespraechen unter, und umgekehrt.
+ * Steht nicht in GUILD_SETTINGS, weil die ID erst nach den Kanaelen feststeht.
+ */
+export const SYSTEM_CHANNEL = 'begruessung';
+
 /**
  * Wird einmalig in #willkommen gepostet, wenn der Kanal noch leer ist.
  * {key} wird durch die Erwaehnung des Kanals mit diesem `key` ersetzt.
@@ -272,6 +347,8 @@ Das hier ist der Ort zwischen den Streams. Wer mitliest, gehört dazu.
 **Wo was passiert**
 > {allgemein} - alles andere
 > {clips} - die guten Momente
+> {spielvorschlaege} - was Abdu mal spielen sollte
+> {reaction} - Clips, auf die Abdu reagieren soll
 > {ankuendigungen} - Stream-Start und die Zusammenfassung danach
 
 **Bescheid wissen, wenn der Stream startet**

packages/discord/src/roles.ts

@@ -0,0 +1,54 @@
+// Rollennamen zu Rollen-IDs. Der Bauplan verweist auf Namen, Discord auf IDs.
+//
+// Bewusst eigenstaendig: die Knopfleiste braucht das, und der Go-Live-Ping
+// braucht es auch - der muss `<@&ID>` in die Nachricht schreiben, weil ein
+// Webhook eine Rolle nicht ueber ihren Namen anpingen kann.
+
+import type { ApiRole, Rest } from './api.ts';
+
+export type RoleResolver = {
+  /**
+   * Gross-/Kleinschreibung spielt keine Rolle. Ein Fehlschlag laedt die Liste
+   * einmal neu, bevor er `undefined` zurueckgibt: eine Rolle kann nach dem
+   * Start des Daemons angelegt worden sein, und ein Neustart ist eine
+   * schlechte Antwort auf eine neue Rolle.
+   */
+  id: (name: string) => Promise<string | undefined>;
+  /** Vergisst die gemerkte Liste - fuer Tests und nach einem Umbau. */
+  forget: () => void;
+};
+
+/**
+ * `reloadAfterMs` bremst das Nachladen nach einem Fehlschlag. Vorgabe ist 0:
+ * jeder Fehlschlag laedt neu, denn ein Klick kommt von einem Menschen und ist
+ * selten. Wer im Hintergrund fragt - der Go-Live-Ping etwa - setzt eine
+ * Bremse, sonst fragt ein Tippfehler im Bauplan im Sekundentakt bei Discord
+ * nach, und zwar genau dann, wenn es dort keine Antwort gibt.
+ */
+export function createRoleResolver(
+  api: Rest, guildId: string, reloadAfterMs = 0
+): RoleResolver {
+  let cache = new Map<string, string>();
+  let loaded = false;
+  let lastLoad = 0;
+
+  async function load(): Promise<void> {
+    const roles = await api.get<ApiRole[]>(`/guilds/${guildId}/roles`);
+    cache = new Map(roles.map((r) => [r.name.toLowerCase(), r.id]));
+    loaded = true;
+    lastLoad = Date.now();
+  }
+
+  return {
+    async id(name) {
+      const key = name.toLowerCase();
+      if (!loaded) await load();
+      const hit = cache.get(key);
+      if (hit) return hit;
+      if (reloadAfterMs > 0 && Date.now() - lastLoad < reloadAfterMs) return undefined;
+      await load();
+      return cache.get(key);
+    },
+    forget() { loaded = false; cache = new Map(); },
+  };
+}

packages/discord/src/selfroles.ts

@@ -7,9 +7,10 @@
 // Knopf unter dem Willkommenstext.
 
 import { logger } from '#core/logger.ts';
-import type { ApiRole, RestFull } from './api.ts';
+import type { RestFull } from './api.ts';
 import type { Interaction } from './gateway.ts';
 import { SELF_ROLES, type SelfRolePlan } from './plan.ts';
+import { createRoleResolver } from './roles.ts';
 
 const log = logger('discord:rollen');
 
@@ -42,19 +43,9 @@ export type RoleButtons = {
 };
 
 export function createRoleButtons(api: RestFull, guildId: string): RoleButtons {
-  // Rollennamen einmal aufloesen und merken. Kommt ein Name nicht vor, wird
+  // Ohne Bremse: ein Klick kommt von einem Menschen, und wenn eine Rolle
-  // einmal neu geladen - eine Rolle kann nach dem Start angelegt worden sein.
+  // gerade erst angelegt wurde, soll der naechste Klick sie finden.
-  let cache: Map<string, string> | null = null;
+  const roles = createRoleResolver(api, guildId);
-
-  async function roleId(name: string, force = false): Promise<string | undefined> {
-    if (!cache || force) {
-      const roles = await api.get<ApiRole[]>(`/guilds/${guildId}/roles`);
-      cache = new Map(roles.map((r) => [r.name.toLowerCase(), r.id]));
-    }
-    const hit = cache.get(name.toLowerCase());
-    if (hit || force) return hit;
-    return roleId(name, true);
-  }
 
   async function reply(interaction: Interaction, content: string): Promise<void> {
     await api.post(`/interactions/${interaction.id}/${interaction.token}/callback`, {
@@ -78,7 +69,7 @@ export function createRoleButtons(api: RestFull, guildId: string): RoleButtons {
       }
 
       try {
-        const id = await roleId(plan.role);
+        const id = await roles.id(plan.role);
         if (!id) {
           await reply(interaction, `Die Rolle **${plan.role}** gibt es gerade nicht. Sag einem Mod Bescheid.`);
           log.error(`Rolle "${plan.role}" nicht gefunden - Bauplan und Server laufen auseinander`);

packages/discord/src/webhook.ts

@@ -0,0 +1,159 @@
+// Posten ueber einen Webhook. Kein Bot-Token, kein Gateway - die URL allein
+// genuegt, und genau deshalb legt `discord:setup` sie an.
+//
+// Eigener Client statt `Discord` aus api.ts: Webhooks haben eigene
+// Drosselungs-Eimer, brauchen keinen Authorization-Kopf, und sie koennen als
+// Einzige eine Datei anhaengen. Gemeinsam ist nur der Umgang mit 429.
+
+import { logger } from '#core/logger.ts';
+import { retry, sleep } from '#core/retry.ts';
+
+const log = logger('discord:webhook');
+
+/**
+ * Laenger warten wir nicht. Ein Go-Live-Post, der eine Viertelstunde spaeter
+ * kommt, ist schlimmer als gar keiner - dann steht in den Ankuendigungen
+ * "jetzt live", waehrend der Stream laeuft und keiner mehr kommt.
+ */
+const MAX_WAIT_MS = 30_000;
+
+export type Embed = {
+  title?: string;
+  description?: string;
+  url?: string;
+  color?: number;
+  timestamp?: string;
+  footer?: { text: string; icon_url?: string };
+  image?: { url: string };
+  thumbnail?: { url: string };
+  author?: { name: string; url?: string; icon_url?: string };
+  fields?: Array<{ name: string; value: string; inline?: boolean }>;
+};
+
+export type WebhookMessage = {
+  content?: string;
+  embeds?: Embed[];
+  username?: string;
+  avatar_url?: string;
+  /**
+   * Ohne dieses Feld entscheidet Discord selbst, was aus `@everyone` und
+   * `<@&...>` im Text wird. Wir entscheiden das immer selbst - ein Rundruf
+   * aus Versehen ist der einzige Fehler hier, den man nicht zuruecknehmen kann.
+   */
+  allowed_mentions?: { parse: string[]; roles?: string[]; users?: string[] };
+  /** Komponenten braucht der Go-Live-Post nicht, der Willkommenstext schon. */
+  components?: Array<Record<string, unknown>>;
+};
+
+export type Attachment = { name: string; type: string; data: Uint8Array };
+
+/** Was Discord von einer gesendeten Nachricht zurueckmeldet. */
+export type PostedMessage = { id: string; channel_id: string };
+
+/**
+ * Baut eine Erwaehnung, die auch wirklich pingt.
+ *
+ * `<@&ID>` allein reicht nicht: ohne `allowed_mentions.roles` faerbt Discord
+ * die Erwaehnung zwar ein, schickt aber keine Benachrichtigung. Das ist der
+ * Fehler, den man erst bemerkt, wenn drei Streams lang niemand gekommen ist.
+ */
+export type Ping = {
+  /** Was in den Text gehoert. Leer, wenn es nichts zu pingen gibt. */
+  mention: string;
+  allowed_mentions: { parse: string[]; roles?: string[] };
+};
+
+export function rolePing(roleId: string | undefined): Ping {
+  if (!roleId) return { mention: '', allowed_mentions: { parse: [] } };
+  return { mention: `<@&${roleId}>`, allowed_mentions: { parse: [], roles: [roleId] } };
+}
+
+function isWebhookUrl(url: string): boolean {
+  return /^https:\/\/(canary\.|ptb\.)?discord\.com\/api\/webhooks\/\d+\/[\w-]+/.test(url);
+}
+
+/**
+ * Schickt die Nachricht. Mit `?wait=true`, damit Discord die angelegte
+ * Nachricht zurueckgibt - ohne das kommt ein 204 ohne Inhalt, und wir koennten
+ * hinterher nicht sagen, wo der Post steht.
+ */
+export async function postWebhook(
+  url: string,
+  message: WebhookMessage,
+  files: Attachment[] = []
+): Promise<PostedMessage> {
+  if (!isWebhookUrl(url)) {
+    // Die URL kommt aus dem verschluesselten Speicher. Steht dort etwas
+    // anderes, ist das ein Einrichtungsfehler und kein Netzwerkproblem.
+    throw new Error('Das ist keine Discord-Webhook-URL.');
+  }
+
+  const target = `${url}${url.includes('?') ? '&' : '?'}wait=true`;
+
+  return await retry(async () => {
+    let body: BodyInit;
+    let headers: Record<string, string> = {};
+
+    if (files.length === 0) {
+      body = JSON.stringify(message);
+      headers = { 'content-type': 'application/json' };
+    } else {
+      // Mit Anhang verlangt Discord multipart: die Nachricht als
+      // `payload_json`, die Dateien als `files[n]`. Die Namen in
+      // `attachment://...` eines Embeds muessen exakt den Dateinamen treffen.
+      const form = new FormData();
+      form.set('payload_json', JSON.stringify(message));
+      files.forEach((f, i) => {
+        form.set(`files[${i}]`, new File([f.data as BlobPart], f.name, { type: f.type }));
+      });
+      body = form;
+    }
+
+    const res = await fetch(target, {
+      method: 'POST',
+      headers: { 'User-Agent': 'abdulive-toolkit (https://git.zeasy.dev/ZeasyAlex/abdulive)', ...headers },
+      body,
+    });
+
+    if (res.status === 429) {
+      const info = await res.json().catch(() => ({})) as { retry_after?: number };
+      const waitMs = Math.max(1000, (info.retry_after ?? 1) * 1000 + 100);
+      if (waitMs > MAX_WAIT_MS) {
+        throw Object.assign(new Error(
+          `Discord verlangt ${Math.round(waitMs / 1000)} s Pause - Post faellt aus`
+        ), { final: true });
+      }
+      log.warn(`Rate Limit am Webhook, warte ${Math.round(waitMs)} ms`);
+      await sleep(waitMs);
+      throw new Error('Rate Limit erreicht');
+    }
+
+    if (!res.ok) {
+      const text = (await res.text()).slice(0, 300);
+      const err = Object.assign(
+        new Error(`Webhook: HTTP ${res.status} ${text}`),
+        // 401/403/404 heisst: Webhook geloescht oder Kanal weg. Wiederholen
+        // hilft nicht, und der Text soll sagen, was zu tun ist.
+        res.status === 401 || res.status === 403 || res.status === 404
+          ? { final: true } : {}
+      );
+      if (res.status === 404) {
+        err.message += ' - der Webhook existiert nicht mehr. Neu anlegen mit: abdulive discord:setup';
+      }
+      throw err;
+    }
+
+    return await res.json() as PostedMessage;
+  }, {
+    attempts: 4,
+    onRetry: (err, n, ms) => {
+      if ((err as { final?: boolean }).final) throw err;
+      log.warn(`Wiederhole den Webhook-Post (${n}) in ${ms} ms`, { err: String(err) });
+    },
+  });
+}
+
+/** Link auf eine gepostete Nachricht - fuers Protokoll und die Statusseite. */
+export function messageUrl(guildId: string, m: PostedMessage): string {
+  return `https://discord.com/channels/${guildId}/${m.channel_id}/${m.id}`;
+}

packages/media/src/piper.test.ts

@@ -0,0 +1,36 @@
+// Piper selbst laeuft hier nicht - das Programm gibt es nur im Hub. Geprueft
+// wird, was vorher mit dem fremden Text passiert.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { piperFehlt, sprechen, stimmenPfad, textFuerPiper } from './piper.ts';
+
+test('Zeilenumbrueche werden zu Leerzeichen, sonst liest Piper zwei Durchlaeufe', () => {
+  assert.equal(textFuerPiper('Hallo\nWelt\r\nwie gehts'), 'Hallo Welt wie gehts');
+});
+
+test('Steuerzeichen fliegen raus, Umlaute und Emoji bleiben', () => {
+  assert.equal(textFuerPiper('Grüße\u0007 aus\u0000 Köln 🎉'), 'Grüße aus Köln 🎉');
+});
+
+test('leerer Text wird gar nicht erst gesprochen', async () => {
+  await assert.rejects(sprechen('  \n ', { model: '/gibt/es/nicht.onnx' }), /kein Text/);
+});
+
+test('fehlendes Programm meldet sich als Fehler statt als Stille', async () => {
+  await assert.rejects(
+    sprechen('Hallo', { binary: '/gibt/es/nicht/piper', model: '/gibt/es/nicht.onnx' }),
+    /Piper nicht startbar/,
+  );
+});
+
+test('piperFehlt nennt Programm und Stimme', () => {
+  const fehlt = piperFehlt({ binary: '/gibt/es/nicht/piper', model: '/gibt/es/nicht.onnx' });
+  assert.equal(fehlt.length, 2);
+});
+
+test('Stimmenname wird zum Pfad im Modellordner, ein absoluter Pfad bleibt', () => {
+  assert.match(stimmenPfad('de_DE-thorsten-medium'), /piper[\\/]de_DE-thorsten-medium\.onnx$/);
+  const abs = process.platform === 'win32' ? 'C:\\x\\s.onnx' : '/x/s.onnx';
+  assert.equal(stimmenPfad(abs), abs);
+});

packages/media/src/piper.ts

@@ -0,0 +1,114 @@
+// Text in Sprache, mit Piper.
+//
+// Warum nicht mehr `speechSynthesis` im Browser: in OBS' Browser-Quelle
+// kam eine amerikanische Stimme heraus, weil der eingebaute Browser keine
+// deutsche sah. Welche Stimmen es gibt, haengt am Rechner, der streamt - und
+// damit an etwas, das hier niemand in der Hand hat. Piper laeuft im Hub, die
+// Stimme liegt als Datei daneben und klingt auf jedem Rechner gleich.
+//
+// Gemessen im LXC (2 Kerne): 200 Zeichen in 0,7 s, rund 11 s Audio. Das ist
+// schnell genug, um es pro Nachricht frisch zu erzeugen.
+//
+// Der Text geht ueber stdin hinein, nie als Argument - er ist fremder Text
+// aus dem Chat, und so kommt er gar nicht erst in die Naehe einer Shell.
+
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { paths } from '#core/config.ts';
+import { findBinary } from '#core/platform.ts';
+import { logger } from '#core/logger.ts';
+
+const log = logger('piper');
+
+export type PiperOptions = {
+  binary?: string;
+  /** Pfad zur .onnx-Datei. Die .onnx.json muss daneben liegen. */
+  model: string;
+  /**
+   * Nummer des Sprechers bei Modellen mit mehreren (z. B. `mls` mit 236).
+   * Ohne Angabe nimmt Piper den ersten.
+   */
+  speaker?: number;
+  timeoutMs?: number;
+};
+
+/** Pfad zum Stimmenmodell aus seinem Namen, z. B. `de_DE-thorsten-medium`. */
+export function stimmenPfad(name: string): string {
+  return path.isAbsolute(name) ? name : path.join(paths.models, 'piper', `${name}.onnx`);
+}
+
+export const piperBinary = (): string => findBinary('piper', 'PIPER_BIN');
+
+/**
+ * Text so herrichten, dass Piper ihn als einen Satzblock liest.
+ *
+ * Piper liest zeilenweise: jede Zeile waere ein eigener Durchlauf. Steuer-
+ * zeichen haben in gesprochenem Text nichts verloren.
+ */
+export function textFuerPiper(text: string): string {
+  return text
+    .replace(/[\u0000-\u001f\u007f]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/** Was fehlt, damit gesprochen werden kann. Leer heisst: alles da. */
+export function piperFehlt(opts: PiperOptions): string[] {
+  const fehlt: string[] = [];
+  const bin = opts.binary ?? piperBinary();
+  // Ein blanker Name wird erst beim Start im PATH gesucht; das laesst sich
+  // hier nicht vorab pruefen, also nur absolute Pfade.
+  if (path.isAbsolute(bin) && !fs.existsSync(bin)) fehlt.push(`Programm ${bin}`);
+  if (!fs.existsSync(opts.model)) fehlt.push(`Stimme ${opts.model}`);
+  else if (!fs.existsSync(`${opts.model}.json`)) fehlt.push(`Stimmen-Einstellungen ${opts.model}.json`);
+  return fehlt;
+}
+
+/** Erzeugt eine WAV-Datei im Speicher. */
+export function sprechen(text: string, opts: PiperOptions): Promise<Buffer> {
+  const eingabe = textFuerPiper(text);
+  if (!eingabe) return Promise.reject(new Error('kein Text'));
+  const bin = opts.binary ?? piperBinary();
+
+  return new Promise((resolve, reject) => {
+    // `--output_file -` schreibt die fertige WAV samt Kopf nach stdout; eine
+    // Zwischendatei braucht es damit nicht.
+    const args = ['--model', opts.model, '--output_file', '-', '--quiet'];
+    if (opts.speaker !== undefined) args.push('--speaker', String(opts.speaker));
+    const child = spawn(bin, args, {
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+
+    const teile: Buffer[] = [];
+    let fehler = '';
+    let fertig = false;
+    const ende = (fn: () => void): void => {
+      if (fertig) return;
+      fertig = true;
+      clearTimeout(timer);
+      fn();
+    };
+
+    const timer = setTimeout(() => ende(() => {
+      child.kill('SIGKILL');
+      reject(new Error('Piper hat das Zeitlimit ueberschritten'));
+    }), opts.timeoutMs ?? 20_000);
+
+    child.stdout.on('data', (d: Buffer) => teile.push(d));
+    child.stderr.on('data', (d: Buffer) => { fehler = (fehler + d.toString()).slice(-2000); });
+    child.on('error', (err) => ende(() => reject(new Error(`Piper nicht startbar (${bin}): ${err.message}`))));
+    child.on('close', (code) => ende(() => {
+      const wav = Buffer.concat(teile);
+      if (code !== 0 || wav.length < 44) {
+        reject(new Error(`Piper beendet mit Code ${code}: ${fehler.trim().split('\n').pop() ?? ''}`));
+        return;
+      }
+      log.debug(`${eingabe.length} Zeichen -> ${Math.round(wav.length / 1024)} KB`);
+      resolve(wav);
+    }));
+
+    child.stdin.on('error', () => { /* Prozess schon weg, das meldet 'close' */ });
+    child.stdin.end(eingabe + '\n');
+  });
+}

packages/obs/src/client.ts

@@ -11,9 +11,13 @@ import { forever } from '#core/retry.ts';
 
 const log = logger('obs');
 
-/** Ereignisgruppen als Bitmaske. Wir brauchen General, Scenes und Outputs. */
+/**
-export const SUBSCRIPTIONS = { general: 1, config: 2, scenes: 4, outputs: 64 } as const;
+ * Ereignisgruppen als Bitmaske. Wir brauchen General, Scenes und Outputs,
-const DEFAULT_SUBS = SUBSCRIPTIONS.general | SUBSCRIPTIONS.scenes | SUBSCRIPTIONS.outputs;
+ * dazu Inputs fuer die Stummschalter auf dem Pult.
+ */
+export const SUBSCRIPTIONS = { general: 1, config: 2, scenes: 4, inputs: 8, outputs: 64 } as const;
+const DEFAULT_SUBS = SUBSCRIPTIONS.general | SUBSCRIPTIONS.scenes |
+  SUBSCRIPTIONS.inputs | SUBSCRIPTIONS.outputs;
 
 /**
  * Antwort auf die Authentifizierungsaufforderung.
@@ -31,6 +35,8 @@ export type ObsEventHandlers = {
   onSceneChanged?: (scene: string) => void;
   onIdentified?: () => void;
   onClosed?: () => void;
+  /** Jedes Ereignis, auch die oben schon einzeln gemeldeten. */
+  onEvent?: (type: string, data: Record<string, unknown>) => void;
 };
 
 export type ObsClient = {
@@ -105,6 +111,7 @@ export function createObs(
         } else if (type === 'CurrentProgramSceneChanged') {
           handlers.onSceneChanged?.(String(data['sceneName'] ?? ''));
         }
+        handlers.onEvent?.(type, data);
         break;
       }
       case 7: {  // RequestResponse

packages/shared/src/events.ts

@@ -30,12 +30,19 @@ export type ChatMessage = {
   displayName: string;
   text: string;
   emotes: Array<{ id: string; name: string; count: number }>;
+  /**
+   * GIFs aus Twitchs Auswahlfenster. `from`/`to` zeigen auf die Zeichen im
+   * Text, an denen der Platzhalter steht - siehe `parseGifs` in #twitch/irc.ts.
+   */
+  gifs: Array<{ id: string; url: string; from: number; to: number }>;
   isFirst: boolean;           // first-msg Tag
   isReturning: boolean;       // returning-chatter Tag
   isCommand: boolean;
   isMod: boolean;
   isSub: boolean;
   isBroadcaster: boolean;
+  /** Twitchs Abzeichen in Anzeigereihenfolge, z. B. moderator/1, subscriber/3012. */
+  badges: Array<{ set: string; version: string }>;
   bits: number;
   color: string | null;
 };

packages/twitch/src/badges.test.ts

@@ -0,0 +1,23 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { badgeKarte, badgesAufloesen } from './badges.ts';
+
+const v = (id: string, url: string) =>
+  ({ id, title: url, image_url_1x: '', image_url_2x: url, image_url_4x: '' });
+
+test('Kanal-Abzeichen ueberdecken die globalen', () => {
+  const karte = badgeKarte(
+    [{ set_id: 'subscriber', versions: [v('0', 'global-sub')] }, { set_id: 'moderator', versions: [v('1', 'mod')] }],
+    [{ set_id: 'subscriber', versions: [v('0', 'kanal-sub'), v('3012', 'kanal-sub-t3')] }],
+  );
+  assert.deepEqual(
+    badgesAufloesen(karte, [{ set: 'moderator', version: '1' }, { set: 'subscriber', version: '0' }])
+      .map((b) => b.url),
+    ['mod', 'kanal-sub'],
+  );
+  assert.equal(badgesAufloesen(karte, [{ set: 'subscriber', version: '3012' }])[0]?.url, 'kanal-sub-t3');
+});
+
+test('unbekannte Abzeichen fallen weg', () => {
+  assert.deepEqual(badgesAufloesen(new Map(), [{ set: 'vip', version: '1' }]), []);
+});

packages/twitch/src/badges.ts

@@ -0,0 +1,55 @@
+// Abzeichen im Chat als Bilder. IRC liefert nur `subscriber/3012`, das Bild
+// dazu kennt nur Helix. Die Kanal-Abzeichen (eigene Abo-Stufen) ueberdecken
+// die globalen gleichen Namens - so zeigt Twitch sie auch an.
+
+import { logger } from '#core/logger.ts';
+import { helix, type HelixBadgeSet } from './helix.ts';
+
+const log = logger('badges');
+
+export type BadgeBild = { url: string; title: string };
+export type BadgeKarte = Map<string, BadgeBild>;
+
+export function badgeKarte(global: HelixBadgeSet[], kanal: HelixBadgeSet[]): BadgeKarte {
+  const karte: BadgeKarte = new Map();
+  for (const set of [...global, ...kanal]) {
+    for (const v of set.versions) {
+      // 2x ist 36 px: bei 19 px Schrift im Overlay scharf, auch skaliert.
+      karte.set(`${set.set_id}/${v.id}`, { url: v.image_url_2x, title: v.title });
+    }
+  }
+  return karte;
+}
+
+/** Unbekannte Abzeichen fallen weg, statt als kaputtes Bild zu erscheinen. */
+export function badgesAufloesen(
+  karte: BadgeKarte, badges: Array<{ set: string; version: string }>,
+): BadgeBild[] {
+  return badges.flatMap((b) => {
+    const bild = karte.get(`${b.set}/${b.version}`);
+    return bild ? [bild] : [];
+  });
+}
+
+export function createBadges(): {
+  laden: (broadcasterId: string | null) => Promise<void>;
+  aufloesen: (badges: Array<{ set: string; version: string }>) => BadgeBild[];
+} {
+  let karte: BadgeKarte = new Map();
+  return {
+    async laden(broadcasterId) {
+      try {
+        const [global, kanal] = await Promise.all([
+          helix.chatBadges(),
+          broadcasterId ? helix.chatBadges(broadcasterId) : Promise.resolve([]),
+        ]);
+        karte = badgeKarte(global, kanal);
+        log.info(`Abzeichen geladen: ${karte.size}`);
+      } catch (err) {
+        // Die alte Karte bleibt stehen. Ohne Karte zeigt der Chat eben keine.
+        log.warn(`Abzeichen nicht geladen: ${(err as Error).message}`);
+      }
+    },
+    aufloesen: (badges) => badgesAufloesen(karte, badges),
+  };
+}

packages/twitch/src/eventsub.test.ts

@@ -0,0 +1,98 @@
+// EventSub liefert Ereignisse, die sich nicht wiederholen lassen. Wer eine
+// Nachricht falsch deutet, verpasst eine Einloesung - und der Zuschauer hat
+// die Punkte bezahlt. Deshalb ist das Deuten hier von der Verbindung getrennt
+// und einzeln geprueft.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { deuten, type EventSubNachricht } from './eventsub.ts';
+
+const n = (o: unknown): EventSubNachricht => o as EventSubNachricht;
+
+test('der Willkommensgruss traegt Sitzung und Zeitlimit', () => {
+  const f = deuten(n({
+    metadata: { message_id: '1', message_type: 'session_welcome' },
+    payload: { session: { id: 'sess-1', keepalive_timeout_seconds: 10, reconnect_url: null } },
+  }));
+  assert.equal(f.art, 'sitzung');
+  assert.equal((f as { sessionId: string }).sessionId, 'sess-1');
+  // 10 s Zeitlimit plus Puffer: der Wachhund soll eine tote Verbindung finden,
+  // nicht eine langsame abwuergen.
+  assert.equal((f as { keepaliveMs: number }).keepaliveMs, 15_000);
+});
+
+test('ohne Angabe gilt Twitchs dokumentierte Vorgabe', () => {
+  const f = deuten(n({
+    metadata: { message_type: 'session_welcome' },
+    payload: { session: { id: 's', keepalive_timeout_seconds: null, reconnect_url: null } },
+  }));
+  assert.equal((f as { keepaliveMs: number }).keepaliveMs, 15_000);
+});
+
+test('eine Benachrichtigung traegt Typ und Ereignis', () => {
+  const f = deuten(n({
+    metadata: {
+      message_type: 'notification',
+      subscription_type: 'channel.channel_points_custom_reward_redemption.add',
+    },
+    payload: { event: { id: 'red-1', user_name: 'Kevin' } },
+  }));
+  assert.equal(f.art, 'ereignis');
+  assert.match((f as { typ: string }).typ, /reward_redemption\.add$/);
+  assert.equal(((f as { event: Record<string, unknown> }).event)['user_name'], 'Kevin');
+});
+
+test('fehlt der Typ in den Kopfdaten, wird er aus dem Abonnement genommen', () => {
+  const f = deuten(n({
+    metadata: { message_type: 'notification' },
+    payload: { subscription: { id: 's', type: 'channel.follow', status: 'enabled' },
+               event: { user_name: 'x' } },
+  }));
+  assert.equal((f as { typ: string }).typ, 'channel.follow');
+});
+
+test('eine Benachrichtigung ohne Ereignis wird nicht durchgereicht', () => {
+  const f = deuten(n({
+    metadata: { message_type: 'notification', subscription_type: 'channel.follow' },
+    payload: {},
+  }));
+  assert.equal(f.art, 'unbekannt');
+});
+
+test('der Umzug nennt die neue Adresse', () => {
+  const f = deuten(n({
+    metadata: { message_type: 'session_reconnect' },
+    payload: { session: { id: 's', keepalive_timeout_seconds: 10,
+                          reconnect_url: 'wss://eventsub.wss.twitch.tv/ws?id=neu' } },
+  }));
+  assert.deepEqual(f, { art: 'umziehen', url: 'wss://eventsub.wss.twitch.tv/ws?id=neu' });
+});
+
+test('ein Umzug ohne Adresse wird ignoriert statt zu einer leeren Verbindung zu fuehren', () => {
+  const f = deuten(n({
+    metadata: { message_type: 'session_reconnect' },
+    payload: { session: { id: 's', keepalive_timeout_seconds: 10, reconnect_url: null } },
+  }));
+  assert.equal(f.art, 'unbekannt');
+});
+
+test('ein Entzug wird als solcher erkannt', () => {
+  // Passiert, wenn Abdu die App-Freigabe zurueckzieht. Wiederverbinden hilft
+  // dagegen nichts, deshalb darf es nicht wie ein Netzwerkfehler aussehen.
+  const f = deuten(n({
+    metadata: { message_type: 'revocation' },
+    payload: { subscription: { id: 's', type: 'channel.follow', status: 'authorization_revoked' } },
+  }));
+  assert.deepEqual(f, { art: 'entzogen', typ: 'channel.follow', grund: 'authorization_revoked' });
+});
+
+test('ein Lebenszeichen ist ein Lebenszeichen', () => {
+  assert.deepEqual(deuten(n({ metadata: { message_type: 'session_keepalive' }, payload: {} })),
+    { art: 'lebenszeichen' });
+});
+
+test('Unsinn wird verworfen, nicht geraten', () => {
+  for (const muell of [{}, { metadata: {} }, { metadata: { message_type: 'gibtsnicht' }, payload: {} }]) {
+    assert.equal(deuten(n(muell)).art, 'unbekannt');
+  }
+});

packages/twitch/src/eventsub.ts

@@ -0,0 +1,229 @@
+// EventSub ueber WebSocket. Beschlossen in ADR-0003, gebaut erst jetzt.
+//
+// Warum ueberhaupt, wo der Chat doch schon da ist: Kanalpunkt-Einloesungen
+// kommen ueber IRC nur dann an, wenn die Belohnung eine Texteingabe verlangt -
+// und selbst dann ohne Einloese-ID. Ohne die ID lassen sich Punkte nicht
+// zurueckgeben, wenn eine Aktion schiefgeht. Wer Punkte nimmt und nichts
+// liefert, verliert das Vertrauen schneller als durch jeden Fehler im Bild.
+//
+// Ablauf des Protokolls:
+//
+//   verbinden -> session_welcome (traegt session.id und das Zeitlimit)
+//             -> Abonnements ueber Helix anlegen, mit dieser session.id
+//             -> notification ... notification ... session_keepalive ...
+//
+// Zwei Eigenheiten, die man kennen muss:
+//
+//   * Ein Abonnement muss innerhalb von 10 Sekunden nach dem Willkommensgruss
+//     stehen, sonst schliesst Twitch die Verbindung wieder.
+//   * `session_reconnect` nennt eine neue Adresse. Die alte Verbindung bleibt
+//     offen, bis die neue steht - erst verbinden, dann schliessen, sonst
+//     entsteht genau in dieser Luecke ein verpasstes Ereignis.
+
+import { logger } from '#core/logger.ts';
+import { forever } from '#core/retry.ts';
+
+const log = logger('eventsub');
+
+export const EVENTSUB_URL = 'wss://eventsub.wss.twitch.tv/ws';
+
+/**
+ * Wie lange ohne ein Lebenszeichen gewartet wird, bevor neu verbunden wird.
+ * Twitch nennt sein eigenes Zeitlimit im Willkommensgruss (ueblich 10 s); wir
+ * legen Luft drauf, damit ein kurzer Netzhaenger nicht sofort neu verbindet.
+ */
+const KEEPALIVE_PUFFER_MS = 5_000;
+
+export type EventSubNachricht = {
+  metadata: {
+    message_id: string;
+    message_type: 'session_welcome' | 'session_keepalive' | 'notification'
+      | 'session_reconnect' | 'revocation';
+    subscription_type?: string;
+    subscription_version?: string;
+  };
+  payload: {
+    session?: { id: string; keepalive_timeout_seconds: number | null; reconnect_url: string | null };
+    subscription?: { id: string; type: string; status: string };
+    event?: Record<string, unknown>;
+  };
+};
+
+/** Ein Abonnement, so wie Helix es entgegennimmt. */
+export type Abonnement = {
+  type: string;
+  version: string;
+  condition: Record<string, string>;
+};
+
+export type EventSubHandlers = {
+  /** Die Sitzung steht. Hier gehoeren die Abonnements angelegt. */
+  onSession: (sessionId: string) => Promise<void>;
+  onNotification: (typ: string, event: Record<string, unknown>) => void;
+  /**
+   * Twitch hat ein Abonnement entzogen - etwa weil das Token zurueckgezogen
+   * wurde. Das ist kein Netzwerkproblem und geht durch Wiederverbinden nicht
+   * weg, deshalb bekommt es einen eigenen Weg.
+   */
+  onRevocation?: (typ: string, grund: string) => void;
+  onConnected?: () => void;
+  onClosed?: () => void;
+};
+
+/**
+ * Was aus einer eingehenden Nachricht folgen soll. Ausgelagert und rein,
+ * damit sich die Faelle pruefen lassen, die im Betrieb selten sind und dann
+ * mitten im Stream zuschlagen.
+ */
+export type Folge =
+  | { art: 'sitzung'; sessionId: string; keepaliveMs: number }
+  | { art: 'ereignis'; typ: string; event: Record<string, unknown> }
+  | { art: 'umziehen'; url: string }
+  | { art: 'entzogen'; typ: string; grund: string }
+  | { art: 'lebenszeichen' }
+  | { art: 'unbekannt' };
+
+export function deuten(n: EventSubNachricht): Folge {
+  switch (n.metadata?.message_type) {
+    case 'session_welcome': {
+      const s = n.payload?.session;
+      if (!s?.id) return { art: 'unbekannt' };
+      // Ohne Angabe 10 Sekunden annehmen, so wie Twitch es dokumentiert.
+      const sek = s.keepalive_timeout_seconds ?? 10;
+      return { art: 'sitzung', sessionId: s.id, keepaliveMs: sek * 1000 + KEEPALIVE_PUFFER_MS };
+    }
+    case 'session_reconnect': {
+      const url = n.payload?.session?.reconnect_url;
+      return url ? { art: 'umziehen', url } : { art: 'unbekannt' };
+    }
+    case 'notification': {
+      const typ = n.metadata.subscription_type ?? n.payload?.subscription?.type ?? '';
+      const event = n.payload?.event;
+      if (!typ || !event) return { art: 'unbekannt' };
+      return { art: 'ereignis', typ, event };
+    }
+    case 'revocation':
+      return {
+        art: 'entzogen',
+        typ: n.payload?.subscription?.type ?? 'unbekannt',
+        grund: n.payload?.subscription?.status ?? 'unbekannt',
+      };
+    case 'session_keepalive':
+      return { art: 'lebenszeichen' };
+    default:
+      return { art: 'unbekannt' };
+  }
+}
+
+export type EventSubClient = {
+  run: (signal: AbortSignal) => Promise<void>;
+  isConnected: () => boolean;
+};
+
+export function createEventSub(handlers: EventSubHandlers): EventSubClient {
+  let verbunden = false;
+
+  return {
+    run: (signal) => forever(
+      async (sig) => { await einmalVerbinden(EVENTSUB_URL, handlers, sig, (v) => { verbunden = v; }); },
+      {
+        signal,
+        onWait: (ms, n) =>
+          log.warn(`EventSub getrennt, neuer Versuch in ${Math.round(ms / 1000)} s (${n}.)`),
+      },
+    ),
+    isConnected: () => verbunden,
+  };
+}
+
+function einmalVerbinden(
+  url: string,
+  handlers: EventSubHandlers,
+  signal: AbortSignal,
+  setzeStatus: (v: boolean) => void,
+): Promise<void> {
+  return new Promise<void>((_erfuellt, ablehnen) => {
+    const ws = new WebSocket(url);
+    let wachhund: ReturnType<typeof setTimeout> | null = null;
+    let umzug: WebSocket | null = null;
+    // Twitch nennt sein Zeitlimit im Willkommensgruss. Bis dahin grosszuegig.
+    let frist = 30_000;
+
+    const abbrechen = (warum: string): void => {
+      if (wachhund) clearTimeout(wachhund);
+      setzeStatus(false);
+      handlers.onClosed?.();
+      try { ws.close(); } catch { /* schon zu */ }
+      try { umzug?.close(); } catch { /* schon zu */ }
+      ablehnen(new Error(warum));
+    };
+
+    signal.addEventListener('abort', () => abbrechen('abgebrochen'), { once: true });
+
+    /** Kommt zu lange nichts, ist die Verbindung tot, ohne es zu melden. */
+    const wachhundStellen = (ms: number): void => {
+      if (wachhund) clearTimeout(wachhund);
+      wachhund = setTimeout(() => abbrechen('kein Lebenszeichen mehr'), ms);
+    };
+
+    ws.addEventListener('open', () => wachhundStellen(30_000));
+
+    ws.addEventListener('message', (ev) => {
+      let nachricht: EventSubNachricht;
+      try { nachricht = JSON.parse(String(ev.data)); } catch { return; }
+      const folge = deuten(nachricht);
+
+      switch (folge.art) {
+        case 'sitzung':
+          frist = folge.keepaliveMs;
+          wachhundStellen(frist);
+          setzeStatus(true);
+          handlers.onConnected?.();
+          // Die Abonnements muessen jetzt angelegt werden. Scheitert das,
+          // haelt Twitch die Verbindung ohnehin nicht lange.
+          void handlers.onSession(folge.sessionId).catch((err: Error) => {
+            log.error(`Abonnements nicht angelegt: ${err.message}`);
+            abbrechen('Abonnements fehlgeschlagen');
+          });
+          break;
+
+        case 'lebenszeichen':
+          wachhundStellen(frist);
+          break;
+
+        case 'ereignis':
+          wachhundStellen(frist);
+          try { handlers.onNotification(folge.typ, folge.event); }
+          catch (err) { log.error(`Ereignis nicht verarbeitet: ${(err as Error).message}`); }
+          break;
+
+        case 'umziehen': {
+          // Erst die neue Verbindung aufbauen, dann die alte schliessen.
+          // Andersherum faellt genau dazwischen ein Ereignis unter den Tisch.
+          log.info('Twitch bittet um Umzug auf eine neue Verbindung');
+          umzug = new WebSocket(folge.url);
+          umzug.addEventListener('open', () => {
+            log.info('Umzug steht, alte Verbindung wird geschlossen');
+            abbrechen('umgezogen');
+          });
+          umzug.addEventListener('error', () => {
+            log.warn('Umzug fehlgeschlagen, bleibe auf der alten Verbindung');
+            umzug = null;
+          });
+          break;
+        }
+
+        case 'entzogen':
+          log.error(`Abonnement entzogen: ${folge.typ} (${folge.grund})`);
+          handlers.onRevocation?.(folge.typ, folge.grund);
+          break;
+
+        default:
+          break;
+      }
+    });
+
+    ws.addEventListener('error', () => abbrechen('WebSocket-Fehler'));
+    ws.addEventListener('close', (ev) => abbrechen(`Verbindung geschlossen (${ev.code})`));
+  });
+}

packages/twitch/src/helix.ts

@@ -4,7 +4,7 @@
 
 import { logger } from '#core/logger.ts';
 import { retry, sleep } from '#core/retry.ts';
-import { accessToken } from './oauth.ts';
+import { accessToken, appToken } from './oauth.ts';
 import { readSecrets, type Role } from './secrets.ts';
 
 const log = logger('helix');
@@ -47,15 +47,57 @@ export type HelixStream = {
   title: string; viewer_count: number; started_at: string; language: string; thumbnail_url: string;
 };
 
+export type HelixBadgeSet = {
+  set_id: string;
+  versions: Array<{ id: string; title: string; image_url_1x: string; image_url_2x: string; image_url_4x: string }>;
+};
+
 export type HelixUser = { id: string; login: string; display_name: string };
 
-async function call<T>(role: Role, endpoint: string, init: RequestInit = {}): Promise<T> {
+export type HelixReward = {
-  const app = readSecrets().apps[role];
+  id: string; title: string; cost: number; prompt: string;
+  is_enabled: boolean; is_user_input_required: boolean;
+};
+
+/** Was beim Anlegen einer Belohnung mitgeht. Namen wie in der Helix-API. */
+export type NeueBelohnung = {
+  title: string;
+  cost: number;
+  prompt?: string;
+  is_user_input_required?: boolean;
+  is_global_cooldown_enabled?: boolean;
+  global_cooldown_seconds?: number;
+  /** Die Einloesung sofort als erledigt markieren. Aus, damit wir erstatten koennen. */
+  should_redemptions_skip_request_queue?: boolean;
+};
+
+/**
+ * `appOk` heisst: dieser Endpunkt kommt auch ohne Nutzer-Token aus.
+ *
+ * Das ist kein Detail, sondern der Unterschied zwischen "laeuft" und "wartet
+ * auf einen Klick": Stream-Erkennung und damit die Go-Live-Ankuendigung
+ * brauchen nur `GET /users` und `GET /streams`, und beide sind oeffentlich.
+ * Ohne diese Unterscheidung stuende der ganze Dienst still, bis der
+ * Broadcaster sein Konto verbindet.
+ */
+type CallOpts = { appOk?: boolean };
+
+async function call<T>(
+  role: Role, endpoint: string, init: RequestInit = {}, opts: CallOpts = {}
+): Promise<T> {
+  const secrets = readSecrets();
+  const app = secrets.apps[role];
   if (!app?.clientId) throw new Error(`Fuer "${role}" ist keine Client-ID hinterlegt.`);
+  const hatNutzerToken = Boolean(secrets.tokens[role]);
+  if (!hatNutzerToken && !opts.appOk) {
+    throw new Error(`"${role}" ist nicht verbunden - Einrichtung unter /setup.`);
+  }
 
   return await retry(async () => {
     await bucket.take();
-    const token = await accessToken(role);
+    // Das Nutzer-Token gewinnt, wenn es da ist: es sieht mehr (Abos, Chatter)
+    // und zaehlt auf ein eigenes Kontingent.
+    const token = hatNutzerToken ? await accessToken(role) : await appToken(role);
     const res = await fetch(`${BASE}${endpoint}`, {
       ...init,
       headers: {
@@ -85,15 +127,26 @@ async function call<T>(role: Role, endpoint: string, init: RequestInit = {}): Pr
 
 export const helix = {
   async userByLogin(login: string): Promise<HelixUser | null> {
-    const r = await call<{ data: HelixUser[] }>('broadcaster', `/users?login=${encodeURIComponent(login)}`);
+    const r = await call<{ data: HelixUser[] }>(
+      'broadcaster', `/users?login=${encodeURIComponent(login)}`, {}, { appOk: true });
     return r.data[0] ?? null;
   },
 
   async streamByUserId(userId: string): Promise<HelixStream | null> {
-    const r = await call<{ data: HelixStream[] }>('broadcaster', `/streams?user_id=${userId}`);
+    const r = await call<{ data: HelixStream[] }>(
+      'broadcaster', `/streams?user_id=${userId}`, {}, { appOk: true });
     return r.data[0] ?? null;
   },
 
+  /**
+   * Reicht das Hinterlegte, um den Stream-Zustand abzufragen? Client-ID und
+   * Secret genuegen dafuer - ein verbundenes Konto ist nicht noetig.
+   */
+  canReadStream(): boolean {
+    const app = readSecrets().apps.broadcaster;
+    return Boolean(app?.clientId && app.clientSecret);
+  },
+
   async chatters(broadcasterId: string, moderatorId: string): Promise<string[]> {
     const out: string[] = [];
     let cursor = '';
@@ -108,6 +161,82 @@ export const helix = {
     return out;
   },
 
+  /**
+   * Abonnement fuer die WebSocket-Sitzung anlegen.
+   *
+   * Zwingend mit dem Nutzer-Token: Twitch verlangt fuer den WebSocket-Weg
+   * dasselbe Token, mit dem die Sitzung geoeffnet wurde. Ein App-Token wird
+   * hier abgelehnt, und die Fehlermeldung sagt nicht, warum.
+   */
+  async subscribe(
+    sub: { type: string; version: string; condition: Record<string, string> },
+    sessionId: string,
+  ): Promise<{ id: string }> {
+    const r = await call<{ data: Array<{ id: string }> }>('broadcaster', '/eventsub/subscriptions', {
+      method: 'POST',
+      body: JSON.stringify({ ...sub, transport: { method: 'websocket', session_id: sessionId } }),
+    });
+    const angelegt = r.data[0];
+    if (!angelegt) throw new Error(`Abonnement ${sub.type} wurde nicht angelegt`);
+    return angelegt;
+  },
+
+  /**
+   * Eine Einloesung abschliessen oder die Punkte zurueckgeben.
+   *
+   * Braucht `channel:manage:redemptions`; `channel:read:redemptions` allein
+   * genuegt nicht. Fehlt der Scope, meldet Twitch 401 - der Aufrufer faengt
+   * das ab und macht weiter, statt die Aktion daran scheitern zu lassen.
+   */
+  async setRedemptionStatus(
+    broadcasterId: string, rewardId: string, redemptionId: string,
+    status: 'FULFILLED' | 'CANCELED',
+  ): Promise<void> {
+    await call('broadcaster',
+      `/channel_points/custom_rewards/redemptions?broadcaster_id=${broadcasterId}` +
+      `&reward_id=${encodeURIComponent(rewardId)}&id=${encodeURIComponent(redemptionId)}`,
+      { method: 'PATCH', body: JSON.stringify({ status }) });
+  },
+
+  /**
+   * Die Kanalpunkt-Belohnungen des Kanals. Mit `nurEigene` nur die, die diese
+   * App angelegt hat - und nur deren Einloesungen darf sie spaeter aendern,
+   * also auch erstatten. Eine im Dashboard angelegte Belohnung taugt dafuer
+   * nicht.
+   */
+  async customRewards(broadcasterId: string, nurEigene = false): Promise<HelixReward[]> {
+    const r = await call<{ data: HelixReward[] }>('broadcaster',
+      `/channel_points/custom_rewards?broadcaster_id=${broadcasterId}` +
+      (nurEigene ? '&only_manageable_rewards=true' : ''));
+    return r.data;
+  },
+
+  async createCustomReward(broadcasterId: string, reward: NeueBelohnung): Promise<HelixReward> {
+    const r = await call<{ data: HelixReward[] }>('broadcaster',
+      `/channel_points/custom_rewards?broadcaster_id=${broadcasterId}`,
+      { method: 'POST', body: JSON.stringify(reward) });
+    const angelegt = r.data[0];
+    if (!angelegt) throw new Error('Twitch hat keine Belohnung zurueckgegeben');
+    return angelegt;
+  },
+
+  /** Hat das verbundene Konto diesen Scope freigegeben? */
+  hasScope(scope: string): boolean {
+    return (readSecrets().tokens.broadcaster?.scopes ?? []).includes(scope);
+  },
+
+  /**
+   * Abzeichen-Bilder, ohne `broadcasterId` die globalen (Moderator, VIP,
+   * Broadcaster ...), mit die des Kanals (Abo-Stufen, Bits). Ein App-Token
+   * reicht fuer beides.
+   */
+  async chatBadges(broadcasterId?: string): Promise<HelixBadgeSet[]> {
+    const r = await call<{ data: HelixBadgeSet[] }>('broadcaster',
+      broadcasterId ? `/chat/badges?broadcaster_id=${broadcasterId}` : '/chat/badges/global',
+      {}, { appOk: true });
+    return r.data;
+  },
+
   async createClip(broadcasterId: string): Promise<{ id: string; edit_url: string }> {
     const r = await call<{ data: Array<{ id: string; edit_url: string }> }>(
       'broadcaster', `/clips?broadcaster_id=${broadcasterId}`, { method: 'POST' });