Protokollseite: die Logs der Hintergrundprozesse im Dashboard

Bisher kam man an die Ausgabe von solarManager.py, dem Runner und den
uebrigen Dauerprozessen nur per SSH heran. Die neue Seite unter
"Protokolle" zeigt sie: links die fuenf Dateien mit Groesse und Alter -
eine, die seit Tagen nicht gewachsen ist, faellt so auf, ohne dass man sie
oeffnet -, rechts die Zeilen mit Volltextsuche, Level-Filter und
optionalem Nachladen.

Nicht in die Datenbank geschrieben, obwohl das naheliegt: ein Log muss
genau dann noch funktionieren, wenn die Datenbank es nicht tut. Ein
Handler, der nach MySQL schreibt, verschluckt ausgerechnet die Meldung
"Datenbank nicht erreichbar" - also die, wegen der man nachsieht. Was
strukturiert ausgewertet werden soll, steht ohnehin in automation_log.

Gelesen wird rueckwaerts in Bloecken: 5000 Zeilen aus der 329 MB grossen
Datei der Wallbox kosten 46 ms, weil nur das Ende angefasst wird. Sucht
man ins Leere, bricht der Server nach 4 MB ab und sagt es auch.

Die beiden Prozesse formatieren unterschiedlich - der eine stellt das
Level voran, der andere den Zeitstempel -, deshalb wird beides gesucht
statt an fester Stelle erwartet. Zeilen ohne eigenes Level erben das der
Zeile darueber, sonst filterte "nur Fehler" die Tracebacks weg, die den
Fehler erklaeren.

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

css/solar.css

@@ -906,3 +906,64 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 
 .skoda-alter { font-size: .85rem; }
+
+/* === Protokollseite ======================================================
+   Ein Log liest sich nur in einer Schrift mit fester Breite: die Zeitstempel
+   stehen dann untereinander, und das Auge findet die Stelle, an der etwas
+   anders wird. Die Zeilen umbrechen statt seitlich zu scrollen - ein
+   Traceback ist lang, und waagerecht zu blaettern verliert man sofort. */
+.log-ausgabe {
+  max-height: calc(100vh - 22rem);
+  min-height: 20rem;
+  overflow-y: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: .78rem;
+  line-height: 1.45;
+  background: var(--bs-body-bg, #1b1e21);
+  border: 1px solid var(--bs-border-color, #2c3034);
+  border-radius: .375rem;
+}
+
+.log-ausgabe .log-zeile {
+  display: flex;
+  gap: .6rem;
+  padding: .1rem .6rem;
+  border-left: 3px solid transparent;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.log-ausgabe .log-zeile:hover { background: rgba(255, 255, 255, .04); }
+
+.log-ausgabe .log-zeit  { flex: 0 0 5rem; color: var(--bs-secondary-color, #8b9198); }
+.log-ausgabe .log-level { flex: 0 0 4.5rem; font-weight: 600; }
+.log-ausgabe .log-text  { flex: 1 1 auto; }
+
+/* Fortsetzungszeilen - die zweite bis letzte Zeile eines Tracebacks - tragen
+   kein eigenes Level. Sie bleiben in der Farbe ihrer Kopfzeile, ruecken aber
+   ein: so sieht man auf einen Blick, was zusammengehoert. */
+.log-ausgabe .log-fortsetzung .log-text { padding-left: 1.2rem; opacity: .85; }
+
+.log-ausgabe .log-debug   { color: var(--bs-secondary-color, #8b9198); }
+.log-ausgabe .log-info    .log-level { color: #6ea8dc; }
+.log-ausgabe .log-warning { border-left-color: #d9a441; background: rgba(217, 164, 65, .07); }
+.log-ausgabe .log-warning .log-level { color: #d9a441; }
+.log-ausgabe .log-error   { border-left-color: #e06060; background: rgba(224, 96, 96, .09); }
+.log-ausgabe .log-error   .log-level { color: #f08a8a; }
+
+/* Tagestrenner: das Datum steht einmal da, nicht in jeder Zeile. */
+.log-ausgabe .log-tag {
+  position: sticky;
+  top: 0;
+  padding: .15rem .6rem;
+  font-size: .72rem;
+  letter-spacing: .04em;
+  color: var(--bs-secondary-color, #8b9198);
+  background: var(--bs-tertiary-bg, #23272b);
+  border-top: 1px solid var(--bs-border-color, #2c3034);
+  border-bottom: 1px solid var(--bs-border-color, #2c3034);
+}
+
+/* Die Dateiliste links: der aktive Eintrag wird von AdminLTE eingefaerbt,
+   die Zustandszeile darunter soll trotzdem lesbar bleiben. */
+.log-liste .log-wahl.active .text-secondary,
+.log-liste .log-wahl.active .text-warning { color: rgba(255, 255, 255, .75) !important; }