Status-Seite wird ein Dashboard

Statt sieben flacher Kacheln jetzt: Kopfzeile mit Bot-Identitaet und Laufzeit,
vier Kennzahlen mit Nebenzeile, Aktivitaetsverlauf und Modul-Zustand pro
Bereich. Die Bereichs-Zeilen sind klickbar und springen in den Modul-Ueberblick.

Fast alles war schon da und musste nur zusammengestellt werden. Neu am Server
sind zwei Zeitstempel in archiveStats(): lastDevlog und lastCommit. Reine
Zaehler sagen nicht, ob noch etwas passiert — "142 Devlogs, zuletzt vor zwei
Tagen" schon.

Der Mitglieder-Zuwachs kommt aus joins/leaves der Tagesdaten, der Verlauf
fuellt fehlende Tage mit 0 statt sie wegzulassen, sonst staucht er sich.

Beim Bauen gefunden: die Spalte in commits heisst committed_at, nicht ts. Da
better-sqlite3 beim Vorbereiten sofort auswertet, waere der Bot beim Start
abgestuerzt. Beide neuen Abfragen gegen das echte Schema geprueft.

Dazu ein Dev-Server-Eintrag in launch.json: der Build ist minifiziert, im
Fehlerfall steht dort nur "at bp". Mit dem Dev-Server kommt der Komponenten-
und Zeilenverweis — genau das hat den Weg zur Ursache abgekuerzt.

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

.claude/launch.json

@@ -6,6 +6,12 @@
             "runtimeExecutable": "npx",
             "runtimeArgs": ["vite", "preview", "frontend", "--port", "4173"],
             "port": 4173
+        },
+        {
+            "name": "frontend-dev",
+            "runtimeExecutable": "npx",
+            "runtimeArgs": ["vite", "frontend", "--port", "4174"],
+            "port": 4174
         }
     ]
 }

frontend/src/pages/Settings.jsx

@@ -322,6 +322,7 @@ export default function Settings({ me }) {
     const [botDesc, setBotDesc] = useState('');
     const [team, setTeam] = useState([]);
     const [audit, setAudit] = useState([]);
+    const [serverStats, setServerStats] = useState(null);
     const [owner, setOwner] = useState(null);
     const [auditAlle, setAuditAlle] = useState(false);
     // Module (An/Aus für alle Funktionen)
@@ -446,6 +447,8 @@ export default function Settings({ me }) {
             .then((d) => { setTeam(d.admins); setOwner(d.owner); })
             .catch(() => {});
         apiGet('/api/auditlog').then((d) => setAudit(d.entries)).catch(() => {});
+        // Fuers Dashboard: Mitgliederzahl und Nachrichten pro Tag
+        apiGet('/api/serverstats').then(setServerStats).catch(() => {});
         apiGet('/api/ssoapps').then((d) => setSsoApps(d.apps)).catch(() => {});
         apiGet('/api/services').then((d) => setServices(d.services)).catch(() => {});
         apiGet('/api/pages/all/list').then((d) => setPages(d.pages)).catch(() => {});
@@ -1108,29 +1111,138 @@ export default function Settings({ me }) {
     const activeModules = modules.filter((m) => m.enabled);
     const unfinished = activeModules.filter((m) => m.missing.length > 0);
 
+    /** Wie alt ist ein Zeitstempel, in Tagen — fuer die Nebenzeilen */
+    function alterInTagen(iso) {
+        if (!iso) return null;
+        return Math.floor((Date.now() - new Date(iso.replace(' ', 'T') + 'Z').getTime()) / 86400000);
+    }
+
+    /** „vor 3 Tagen" bzw. „heute" fuer eine Nebenzeile */
+    function seit(iso, nie) {
+        const t = alterInTagen(iso);
+        if (t == null) return nie;
+        if (t <= 0) return 'heute';
+        return t === 1 ? 'gestern' : `vor ${t} Tagen`;
+    }
+
+    // Mitglieder-Zuwachs der letzten 7 Tage aus den Tagesdaten
+    const memberDelta = serverStats?.days
+        ? serverStats.days.slice(-7).reduce((n, d) => n + (d.joins ?? 0) - (d.leaves ?? 0), 0)
+        : null;
+
+    // Nachrichten der letzten 30 Tage, luckenlos — fehlende Tage sind 0 und
+    // nicht einfach weg, sonst staucht sich der Verlauf
+    const aktivitaet = (() => {
+        if (!serverStats?.days) return null;
+        const proTag = new Map(serverStats.days.map((d) => [d.day, d.messages ?? 0]));
+        const tage = [];
+        for (let i = 29; i >= 0; i--) {
+            const key = new Date(Date.now() - i * 86400000).toISOString().slice(0, 10);
+            tage.push({ key, n: proTag.get(key) ?? 0 });
+        }
+        return { tage, gesamt: tage.reduce((n, t) => n + t.n, 0), max: Math.max(1, ...tage.map((t) => t.n)) };
+    })();
+
+    const backupTage = alterInTagen(data.status.lastBackup);
+
     const tabStatus = (
         <>
             <div className="settings-section">
-                <h2 className="settings-title">// Status</h2>
-                <div className="stats">
-                    <div className="stat"><span className="stat-value">{data.status.botTag ?? '—'}</span><span className="stat-label">Bot</span></div>
-                    <div className="stat"><span className="stat-value">{fmtUptime(data.status.uptimeSeconds)}</span><span className="stat-label">Uptime</span></div>
-                    {modules.length > 0 && (
-                        <div className="stat">
-                            <span className="stat-value">{activeModules.length}<span className="stat-of">/{modules.length}</span></span>
-                            <span className="stat-label">Module an</span>
-                        </div>
-                    )}
-                    <div className="stat"><span className="stat-value">{data.status.devlogs}</span><span className="stat-label">Devlogs</span></div>
-                    <div className="stat"><span className="stat-value">{data.status.commits}</span><span className="stat-label">Commits</span></div>
-                    <div className="stat"><span className="stat-value">{fmtBytes(data.status.dbSizeBytes)}</span><span className="stat-label">Datenbank</span></div>
-                    <div className="stat">
-                        <span className="stat-value">{data.status.lastBackup ? data.status.lastBackup.slice(0, 10) : '—'}</span>
-                        <span className="stat-label">Letztes Backup</span>
+                <div className="dash-head">
+                    {data.status.botAvatar
+                        ? <img className="dash-avatar" src={data.status.botAvatar} alt="" />
+                        : <span className="dash-avatar leer">?</span>}
+                    <div className="dash-ident">
+                        <span className="dash-name">
+                            {data.status.botName ?? 'Bot'}
+                            {data.status.botTag && <span className="dash-tag">{data.status.botTag}</span>}
+                        </span>
+                        <span className="dash-pill"><span className="dash-dot" /> online</span>
+                    </div>
+                    <span className="dash-uptime">
+                        seit {fmtUptime(data.status.uptimeSeconds)}
+                        {data.status.guilds > 0 && ` · ${data.status.guilds} Server`}
+                    </span>
+                </div>
+
+                <div className="dash-kpis">
+                    <div className="card dash-kpi">
+                        <span className="dash-v">{activeModules.length}<span className="dash-of">/{modules.length || '–'}</span></span>
+                        <span className="dash-l">Module an</span>
+                        <span className={`dash-t${unfinished.length > 0 ? ' warn' : ' gut'}`}>
+                            {unfinished.length > 0 ? `${unfinished.length} unvollständig` : 'alle einsatzbereit'}
+                        </span>
+                    </div>
+                    <div className="card dash-kpi">
+                        <span className="dash-v">{serverStats?.members != null ? serverStats.members.toLocaleString('de-DE') : '—'}</span>
+                        <span className="dash-l">Member</span>
+                        <span className={`dash-t${memberDelta > 0 ? ' gut' : ''}`}>
+                            {memberDelta == null
+                                ? ' '
+                                : `${memberDelta >= 0 ? '+' : ''}${memberDelta} in 7 Tagen`}
+                        </span>
+                    </div>
+                    <div className="card dash-kpi">
+                        <span className="dash-v">{data.status.devlogs}</span>
+                        <span className="dash-l">Devlogs</span>
+                        <span className="dash-t">{seit(data.status.lastDevlog, 'noch keins')}</span>
+                    </div>
+                    <div className="card dash-kpi">
+                        <span className="dash-v">{fmtBytes(data.status.dbSizeBytes)}</span>
+                        <span className="dash-l">Datenbank</span>
+                        <span className={`dash-t${backupTage == null || backupTage > 2 ? ' warn' : ' gut'}`}>
+                            Backup {seit(data.status.lastBackup, 'fehlt')}
+                        </span>
                     </div>
                 </div>
             </div>
 
+            {aktivitaet && aktivitaet.gesamt > 0 && (
+                <div className="settings-section">
+                    <h2 className="settings-title">
+                        // Aktivität — {aktivitaet.gesamt.toLocaleString('de-DE')} Nachrichten in 30 Tagen
+                    </h2>
+                    <div className="dash-spark">
+                        {aktivitaet.tage.map((t) => (
+                            <span
+                                key={t.key}
+                                className="dash-bar"
+                                style={{ height: `${Math.max(3, (t.n / aktivitaet.max) * 100)}%` }}
+                                title={`${t.key}: ${t.n} Nachrichten`}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {modules.length > 0 && moduleGroups.length > 0 && (
+                <div className="settings-section">
+                    <h2 className="settings-title">// Module nach Bereich</h2>
+                    <div className="dash-groups">
+                        {moduleGroups.map((g) => {
+                            const drin = modules.filter((m) => m.group === g.id);
+                            if (drin.length === 0) return null;
+                            const an = drin.filter((m) => m.enabled).length;
+                            const offen = drin.filter((m) => m.enabled && m.missing.length > 0).length;
+                            return (
+                                <button
+                                    className="dash-group"
+                                    key={g.id}
+                                    onClick={() => setTab('module')}
+                                    title={`${g.label} im Modul-Überblick öffnen`}
+                                >
+                                    <span className="dash-group-name">{g.label}</span>
+                                    <span className={`dash-group-bar${offen > 0 ? ' warn' : ''}`}>
+                                        <i style={{ width: `${(an / drin.length) * 100}%` }} />
+                                    </span>
+                                    <span className="dash-group-n">{an}/{drin.length}</span>
+                                </button>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
             {modules.length > 0 && (
                 <div className="settings-section">
                     <h2 className="settings-title">// Noch einzurichten</h2>

frontend/src/style.css

@@ -1736,6 +1736,85 @@ label.toggle {
 .srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; }
 
 /* ── AUDIT-LOG ─────────────────────────────────────── */
+/* ── STATUS-DASHBOARD ──────────────────────────────── */
+.dash-head {
+    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
+    margin-bottom: 1.2rem;
+}
+.dash-avatar {
+    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
+    border: 1px solid color-mix(in srgb, var(--neon) 35%, transparent);
+}
+.dash-avatar.leer {
+    display: grid; place-items: center;
+    background: rgba(255, 255, 255, .05); color: var(--muted);
+}
+.dash-ident { display: flex; flex-direction: column; gap: .35rem; }
+.dash-name { font-weight: 700; font-size: 1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
+.dash-tag { font-family: var(--mono); font-size: .62rem; color: var(--muted2); letter-spacing: .06em; }
+.dash-pill {
+    display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
+    font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
+    padding: .16rem .5rem; border-radius: 999px;
+    border: 1px solid rgba(59, 165, 93, .45); color: #3ba55d;
+}
+.dash-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.dash-uptime {
+    margin-left: auto; font-family: var(--mono);
+    font-size: .64rem; letter-spacing: .08em; color: var(--muted2);
+}
+
+.dash-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); }
+.dash-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; min-width: 0; }
+.dash-v { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
+.dash-of { font-size: .85rem; color: var(--muted2); font-weight: 400; }
+.dash-l {
+    font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
+    text-transform: uppercase; color: var(--muted);
+}
+/* Nebenzeile: min-height, damit Karten ohne Wert nicht kürzer werden */
+.dash-t {
+    font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
+    color: var(--muted2); margin-top: .35rem; min-height: 1em;
+}
+.dash-t.gut { color: #3ba55d; }
+.dash-t.warn { color: var(--neon2); }
+
+.dash-spark {
+    display: flex; align-items: flex-end; gap: 2px;
+    height: 70px; margin-top: 1rem;
+}
+.dash-bar {
+    flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
+    background: linear-gradient(180deg, var(--neon), color-mix(in srgb, var(--neon) 15%, transparent));
+}
+.dash-bar:hover { background: var(--neon2); }
+
+.dash-groups { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
+.dash-group {
+    display: flex; align-items: center; gap: .8rem;
+    background: none; border: none; padding: .25rem 0; cursor: pointer;
+    font-size: .82rem; color: var(--muted); text-align: left;
+}
+.dash-group:hover { color: var(--text); }
+.dash-group-name { flex: 0 0 12rem; }
+.dash-group-bar {
+    flex: 1; height: 5px; border-radius: 3px;
+    background: rgba(255, 255, 255, .07); overflow: hidden;
+}
+.dash-group-bar i { display: block; height: 100%; background: var(--neon); }
+.dash-group-bar.warn i { background: var(--neon2); }
+.dash-group-n {
+    font-family: var(--mono); font-size: .64rem; color: var(--muted2);
+    flex: 0 0 3rem; text-align: right;
+}
+
+@media (max-width: 820px) {
+    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
+    .dash-uptime { margin-left: 0; width: 100%; }
+    .dash-group-name { flex-basis: 7rem; }
+}
+
 /* ── ERREICHBARKEITS-BALKEN ────────────────────────── */
 /* Ein Strich pro Stunde, 168 Stück. Auf schmalen Schirmen werden die Striche
    dünner als ein Pixel — deshalb scrollt der Balken dort lieber, statt zu

src/db.js

@@ -1127,11 +1127,17 @@ export function weeklyStats() {
     return { perDay, topRepos, devlogs };
 }
 
+const lastDevlogStmt = db.prepare('SELECT max(posted_at) AS ts FROM devlogs');
+const lastCommitStmt = db.prepare('SELECT max(committed_at) AS ts FROM commits');
+
 /** Statistiken fürs Status-Panel der Settings-Seite */
 export function archiveStats() {
     return {
         devlogs: countDevlogsStmt.get().n,
         commits: countCommitsStmt.get().n,
         dbSizeBytes: statSync(dbFile).size,
+        // Reine Zahlen sagen nicht, ob noch etwas passiert — das Datum schon
+        lastDevlog: lastDevlogStmt.get().ts ?? null,
+        lastCommit: lastCommitStmt.get().ts ?? null,
     };
 }