Oeffentliche Statusseite nach Statuspage-Vorbild

Neue Seite /status auf dem Hub: Gesamtlage als Banner, darunter die
freigegebenen Dienste mit 90-Tage-Balken, die Game-Server, und die
Stoerungs-Historie der letzten 90 Tage.

Die Adressliste ist von einer kommagetrennten Einstellung in eine Tabelle
gewandert. Jeder Dienst hat jetzt Namen, Gruppe und einen Schalter
"oeffentlich" — sonst stuende auf einer oeffentlichen Seite die nackte URL,
auch von internen Diensten. Die alte Liste wird beim ersten Start uebernommen,
bewusst als nicht oeffentlich: was dort auftaucht, soll eine Entscheidung sein
und nicht durch eine Migration passieren.

/api/status liefert nur freigegebene Dienste und dabei keine Adressen, nur
Namen. Auch die Stoerungs-Historie ist gefiltert — sonst verriete sie, was es
sonst noch gibt. Im Browser gegengeprueft: auf der ganzen Seite steht kein
einziges https://.

Stoerungen werden jetzt aufgezeichnet, nicht nur gemeldet: pro Adresse ein
offener Eintrag, bis es wieder laeuft. Beim Wiederkommen wird er geschlossen,
bevor die DM rausgeht — sonst bliebe er bei einem Sendefehler ewig offen.

Aufbewahrung von 7 auf 90 Tage. Der Balken kann jetzt zwei Aufloesungen:
168 Stunden fuers Panel ("was war letzte Nacht?") und 90 Tage fuer die
Statusseite ("wie zuverlaessig?"). Stuendlich ueber 90 Tage waeren ueber 2000
Striche und unlesbar.

Im Panel sind aus der reinen Anzeige Verwaltung geworden: anlegen, bearbeiten,
entfernen, freigeben — dazu die Stoerungsliste.

Beim Bauen gefunden: die Uebernahme der alten Liste stand mitten in db.js und
rief getSetting(), dessen prepared statement erst 300 Zeilen weiter unten
entsteht. Der Bot starb beim Start mit "Cannot access getSettingStmt before
initialization" — nachgewiesen, dann ans Dateiende verschoben.

Geprueft: 182 SQL-Abfragen gegen das Schema, alle schreibenden Routen bewacht,
Stoerungs-Logik durchgespielt (doppeltes Eroeffnen wird abgelehnt, Schliessen
ohne offene gibt null), und beide Seiten im Browser mit drei Diensten in allen
drei Zustaenden.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/Settings.jsx

@@ -343,6 +343,7 @@ export default function Settings({ me }) {
     const [audit, setAudit] = useState([]);
     const [serverStats, setServerStats] = useState(null);
     const [watchdog, setWatchdog] = useState(null);
+    const [dienstDraft, setDienstDraft] = useState({ id: null, name: '', url: '', gruppe: 'Dienste', oeffentlich: false });
     const [owner, setOwner] = useState(null);
     const [auditAlle, setAuditAlle] = useState(false);
     // Module (An/Aus für alle Funktionen)
@@ -2353,16 +2354,76 @@ export default function Settings({ me }) {
                         <div className="wd-card card" key={a.url}>
                             <div className="wd-head">
                                 <span className={`wd-dot ${a.online === null ? 'wartet' : a.online ? 'an' : 'aus'}`} />
-                                <a className="wd-url" href={a.url} target="_blank" rel="noreferrer">{a.url}</a>
+                                <span className="st-name">{a.name}</span>
+                                {a.oeffentlich && <span className="tm-chip alle">öffentlich</span>}
                                 <span className="wd-meta">
                                     {a.online === null && 'noch nicht geprüft'}
                                     {a.online === true && `${a.status ?? 'OK'}${a.ms != null ? ` · ${a.ms} ms` : ''}`}
                                     {a.online === false && `seit ${vorWieLange(new Date(a.seit).toISOString())} weg`}
                                 </span>
+                                <button
+                                    className="btn btn-mini"
+                                    onClick={() => setDienstDraft({
+                                        id: a.id, name: a.name, url: a.url,
+                                        gruppe: a.gruppe, oeffentlich: a.oeffentlich,
+                                    })}
+                                >
+                                    Bearbeiten
+                                </button>
+                                <button className="card-delete" title="Nicht mehr überwachen" onClick={() => dienstLoeschen(a.id, a.name)}>✕</button>
                             </div>
+                            <a className="wd-url" href={a.url} target="_blank" rel="noreferrer">{a.url}</a>
                             <UptimeTrack buckets={a.uptime} />
                         </div>
                     ))}
+
+                    <h3 className="tm-form-title" style={{ marginTop: '1.6rem' }}>
+                        {dienstDraft.id ? 'Dienst bearbeiten' : 'Dienst hinzufügen'}
+                    </h3>
+                    <div className="field">
+                        <label>Name <span className="field-hint">steht so auf der öffentlichen Statusseite</span></label>
+                        <input type="text" maxLength={60} placeholder="z. B. Gitea" value={dienstDraft.name}
+                            onChange={(e) => setDienstDraft({ ...dienstDraft, name: e.target.value })} />
+                    </div>
+                    <div className="field">
+                        <label>Adresse <span className="field-hint">wird geprüft; erscheint nie öffentlich</span></label>
+                        <input type="text" placeholder="https://git.d4rkst3r.de" value={dienstDraft.url}
+                            onChange={(e) => setDienstDraft({ ...dienstDraft, url: e.target.value })} />
+                    </div>
+                    <div className="field">
+                        <label className="toggle">
+                            <input type="checkbox" checked={dienstDraft.oeffentlich}
+                                onChange={(e) => setDienstDraft({ ...dienstDraft, oeffentlich: e.target.checked })} />
+                            Auf der öffentlichen Statusseite zeigen
+                        </label>
+                    </div>
+                    <div className="settings-actions">
+                        <button className="btn btn-save" onClick={dienstSpeichern}>
+                            {dienstDraft.id ? 'Änderungen speichern' : 'Hinzufügen'}
+                        </button>
+                        {dienstDraft.id && (
+                            <button className="btn btn-ghost" onClick={() => setDienstDraft({ id: null, name: '', url: '', gruppe: 'Dienste', oeffentlich: false })}>
+                                Abbrechen
+                            </button>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {watchdog?.stoerungen?.length > 0 && (
+                <div className="settings-section">
+                    <h2 className="settings-title">// Störungen</h2>
+                    <div className="st-incidents">
+                        {watchdog.stoerungen.slice(0, 20).map((v) => (
+                            <div className={`st-incident${v.beendet ? '' : ' offen'}`} key={v.id}>
+                                <span className="st-inc-name">
+                                    {watchdog.adressen.find((a) => a.url === v.url)?.name ?? v.url}
+                                </span>
+                                <span className="st-inc-time">{vorWieLange(v.begonnen)}</span>
+                                <span className="st-inc-dur">{v.beendet ? `${v.minuten} min` : 'läuft noch'}</span>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             )}
         </>
@@ -2974,6 +3035,26 @@ export default function Settings({ me }) {
         </div>
     );
 
+    async function dienstSpeichern() {
+        const body = { ...dienstDraft };
+        try {
+            if (body.id) await apiPut(`/api/monitored/${body.id}`, body);
+            else await apiPost('/api/monitored', body);
+            setDienstDraft({ id: null, name: '', url: '', gruppe: 'Dienste', oeffentlich: false });
+            apiGet('/api/watchdog').then(setWatchdog).catch(() => {});
+            setFeedback('Gespeichert.');
+        } catch (e) {
+            setFeedback(e.body?.error ?? 'Speichern fehlgeschlagen.');
+        }
+        setTimeout(() => setFeedback(null), 3000);
+    }
+
+    async function dienstLoeschen(id, name) {
+        if (!window.confirm(`\u201e${name}" nicht mehr überwachen?`)) return;
+        await apiDelete(`/api/monitored/${id}`).catch(() => {});
+        apiGet('/api/watchdog').then(setWatchdog).catch(() => {});
+    }
+
     const auditSichtbar = auditAlle ? audit : audit.slice(0, 12);
     const teamBearbeitet = team.some((t) => t.user_id === teamDraft.user_id);
 

frontend/src/pages/Status.jsx

@@ -0,0 +1,137 @@
+// Öffentliche Statusseite im Statuspage-Stil: Gesamtlage oben, darunter die
+// freigegebenen Dienste und die Game-Server, unten die Störungs-Historie.
+//
+// Adressen stehen hier bewusst nicht — der Server liefert nur Namen. Was auf
+// dieser Seite auftaucht, entscheidet der Schalter „öffentlich" je Dienst.
+import { useEffect, useState } from 'react';
+import { apiGet } from '../api.js';
+import { SkeletonCards } from '../components/Skeleton.jsx';
+import UptimeTrack from '../components/UptimeTrack.jsx';
+import { useT, useFmt } from '../i18n.jsx';
+import { IconCheck, IconWarning, IconClock } from '../icons.jsx';
+
+/** Gesamtlage aus allen Teilen — die schlechteste zählt */
+function gesamtlage(daten) {
+    const alles = [
+        ...(daten.dienste ?? []).map((d) => d.online),
+        ...(daten.server ?? []).map((s) => s.online),
+    ];
+    if (alles.length === 0) return 'leer';
+    if (alles.some((o) => o === false)) return alles.every((o) => o === false) ? 'aus' : 'teil';
+    // null heißt „noch nicht geprüft" und ist keine Störung
+    return alles.some((o) => o === true) ? 'gut' : 'wartet';
+}
+
+export default function Status() {
+    const { t } = useT();
+    const { datum } = useFmt();
+    const [daten, setDaten] = useState(null);
+    const [fehler, setFehler] = useState(false);
+
+    useEffect(() => {
+        const laden = () => apiGet('/api/status').then(setDaten).catch(() => setFehler(true));
+        laden();
+        const timer = setInterval(laden, 60_000);
+        window.scrollTo(0, 0);
+        return () => clearInterval(timer);
+    }, []);
+
+    const lage = daten ? gesamtlage(daten) : null;
+    const BANNER = {
+        gut: { icon: IconCheck, text: t('status.allOk') },
+        teil: { icon: IconWarning, text: t('status.partial') },
+        aus: { icon: IconWarning, text: t('status.majorOutage') },
+        wartet: { icon: IconClock, text: t('status.waiting') },
+        leer: { icon: IconClock, text: t('status.nothing') },
+    };
+    const Banner = lage ? BANNER[lage].icon : null;
+
+    return (
+        <>
+            <section className="page-header">
+                <div className="page-bg-text">STATUS</div>
+                <div className="page-header-grid" aria-hidden="true" />
+                <div className="page-header-content">
+                    <div className="page-tag">{t('status.tag')}</div>
+                    <h1 className="page-title">{t('nav.status')}</h1>
+                    <p className="page-subtitle">{t('status.subtitle')}</p>
+                </div>
+            </section>
+
+            <section className="content">
+                {fehler && <p className="notice">{t('status.error')}</p>}
+                {!fehler && !daten && <SkeletonCards n={2} />}
+
+                {lage && (
+                    <div className={`st-banner ${lage}`}>
+                        <Banner size={20} />
+                        <span>{BANNER[lage].text}</span>
+                    </div>
+                )}
+
+                {daten?.dienste?.length > 0 && (
+                    <div className="roadmap-group">
+                        <h2 className="settings-title">{t('status.services')}</h2>
+                        {daten.dienste.map((d) => (
+                            <div className="st-row card" key={d.id}>
+                                <div className="st-head">
+                                    <span className={`wd-dot ${d.online === null ? 'wartet' : d.online ? 'an' : 'aus'}`} />
+                                    <span className="st-name">{d.name}</span>
+                                    <span className="st-state">
+                                        {d.online === null ? t('status.waiting') : d.online ? t('status.ok') : t('status.down')}
+                                    </span>
+                                </div>
+                                <UptimeTrack buckets={d.uptime} modus="tage" />
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {daten?.server?.length > 0 && (
+                    <div className="roadmap-group">
+                        <h2 className="settings-title">{t('status.gameservers')}</h2>
+                        <div className="st-servers">
+                            {daten.server.map((s) => (
+                                <div className="st-server card" key={s.id}>
+                                    <span className="st-server-icon">{s.icon}</span>
+                                    <span className="st-name">{s.name}</span>
+                                    <span className={`wd-dot ${s.online === null ? 'wartet' : s.online ? 'an' : 'aus'}`} />
+                                    <span className="st-state">
+                                        {s.online
+                                            ? `${s.players ?? 0}${s.max ? ` / ${s.max}` : ''}`
+                                            : s.online === null ? t('status.waiting') : t('status.down')}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {daten && (
+                    <div className="roadmap-group">
+                        <h2 className="settings-title">{t('status.incidents')}</h2>
+                        {daten.stoerungen.length === 0 ? (
+                            <p className="notice">{t('status.noIncidents')}</p>
+                        ) : (
+                            <div className="st-incidents">
+                                {daten.stoerungen.map((v) => (
+                                    <div className={`st-incident${v.beendet ? '' : ' offen'}`} key={v.id}>
+                                        <span className="st-inc-name">{v.name}</span>
+                                        <span className="st-inc-time">
+                                            {datum(`${v.begonnen.replace(' ', 'T')}Z`, {
+                                                day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+                                            })}
+                                        </span>
+                                        <span className="st-inc-dur">
+                                            {v.beendet ? t('status.minutes', v.minuten) : t('status.ongoing')}
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                )}
+            </section>
+        </>
+    );
+}