mischlabs/Brain.md

Brain.md - Projekt mischlabs.de Landing Page

Projektziel

Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.

Aktueller Stand: Die Seite ist keine reine Linkliste mehr, sondern ein kompaktes Service-Dashboard mit Kategorien, Suche, Hintergrund-Statuscheck und PWA-Unterstuetzung.

Status

• Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
• Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
• Landing Page Design und Implementierung (index.html + style.css)
• Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
• PWA-Grundlage fuer iOS/Home-Screen-Installation
• Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
• Push zum Remote
• MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
• Push des MiChess-Commits (Git-Auth-Token erneuern)

Verwandte Projekte

• auth (d:\Vibecoding\Website\auth) - Keycloak SSO fuer alle Dienste
  • Repo: https://git.mischlabs.de/MrDiderot/auth.git
  • Subdomain: auth.mischlabs.de
  • Siehe auth/Brain.md fuer Details

Dienste-Uebersicht (8 Stueck)

#	Subdomain	Beschreibung	Farbe/Accent
1	drive.mischlabs.de	Cloud-Speicher	#4285f4 (Blau)
2	git.mischlabs.de	Code-Repositories	#f05033 (Rot)
3	movies.mischlabs.de	Filme & Serien	#a855f7 (Lila)
4	audiobook.mischlabs.de	Hoerbuecher	#22c55e (Gruen)
5	password.mischlabs.de	Passwort-Manager	#eab308 (Gelb)
6	docs.mischlabs.de	Dokumentation	#06b6d4 (Cyan)
7	michess.mischlabs.de	Schach	#10b981 (Gruen)
8	tom.mischlabs.de	Persoenliche Seite	#ec4899 (Pink)

Technische Entscheidungen

• Reines HTML + CSS mit minimalem Dashboard-/PWA-JS (kein Framework) - maximale Performance, minimales Docker-Image
• nginx:alpine als Base-Image - extrem leichtgewichtig (~5MB)
• Google Fonts (Inter) fuer moderne Typografie
• Inline SVG Icons - keine externen Dependencies
• CSS Grid mit auto-fill + minmax(240px, 1fr) fuer responsives Layout
• Dark Theme mit subtilen Glow-Effekten
• Staggered Animations: Kacheln faden nacheinander ein (9 Stueck)
• PWA: Manifest, Apple-Touch-Icon, App-Icons und Service Worker fuer installierbare iOS/Web-App
• Dashboard: Kategorien Zugang, Medien, Arbeit, Persoenlich, Suche und clientseitige no-cors Statuschecks
• Auth-Link: Zeigt auf die Keycloak Account Console (/realms/mischlabs/account), nicht mehr auf die Admin-Konsole
• Adminseite: /admin.html nutzt Keycloak Authorization Code + PKCE fuer Login und bietet Editor/Statusdiagnose fuer Dienste

Docker-Setup

• Container-Name: mischlabs
• Base-Image: nginx:alpine
• Port-Mapping: 8085:80 (anpassbar in docker-compose.yml)
• Restart-Policy: unless-stopped
• nginx.conf: Caching fuer Static Assets (7 Tage), Security-Headers

Dateistruktur

mischlabs/
  index.html          - Haupt-HTML mit allen 9 Service-Kacheln
  style.css           - Komplettes Styling (Dark Theme, Grid, Animationen)
  app.js              - Suche, Filter, Statuschecks, Service-Worker-Registrierung
  admin.html          - SSO-geschuetzte Adminoberflaeche
  admin.js            - Keycloak PKCE Login, Editor, Statusdiagnose
  services.json       - Zentrale Service-/Kategorie-Konfiguration
  offline.html        - Offline-Fallback fuer installierte PWA
  manifest.webmanifest - PWA-Metadaten fuer installierbare App
  sw.js               - Schlanker Service Worker mit App-Shell-Cache
  icons/              - App-Icons fuer iOS/PWA
  Dockerfile          - nginx:alpine mit kopierten Static Files
  docker-compose.yml  - Container-Definition (Name: mischlabs, Port 8085)
  nginx.conf          - Server-Konfiguration, Caching, Security-Headers
  .gitignore          - Git-Ausschluesse
  Brain.md            - Dieses Dokument (KI-Uebergabe)

Deployment-Workflow

1. Code aendern und committen
2. Push zu git.mischlabs.de
3. Auf dem Server: git pull && docker compose up -d --build

Erkenntnisse & Notizen

• Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports
• Oeffentlich erreichbar ueber *.mischlabs.de Subdomains (Cloudflare Tunnel)
• Port 8085 gewaehlt da gaengige Ports (80, 8080, 8090) bereits belegt
• Kein JavaScript noetig - pure CSS reicht fuer alle Effekte
• color-mix() CSS-Funktion fuer dynamische Icon-Hintergruende
• Git-Push-Fehler aufgetreten (Authentication failed) - Token muss erneuert werden
• DNS: Alte A-Records (185.181.104.242) von INWX wurden geloescht, nur noch Tunnel-Eintraege
• NAS hat kein git installiert - entweder Git Server Paket installieren oder wget nutzen

PWA-Stand 2026-05-21

• MischLabs wurde als PWA vorbereitet.
• iOS-relevante Meta-Tags in index.html:
  • apple-mobile-web-app-capable
  • apple-mobile-web-app-status-bar-style
  • apple-mobile-web-app-title
  • apple-touch-icon
• Manifest:
  • name: MischLabs
  • display: standalone
  • theme_color: #10b981
  • background_color: #0a0a0f
• Icons:
  • icons/app-icon-source.png (1024x1024, quadratischer Ausschnitt aus dem MischLabs-Bild)
  • icons/apple-touch-icon-v2.png (180x180, frischer Dateiname gegen iOS-Icon-Cache)
  • icons/apple-touch-icon.png (180x180, alte Kompatibilitaetskopie)
  • icons/icon-192.png (192x192)
  • icons/icon-512.png (512x512)
  • icons/maskable-512.png (512x512, maskable)
• Service Worker:
  • Cache-Name: mischlabs-pwa-v4
  • Cached die App-Shell (/, index.html, offline.html, style.css?v=10, app.js?v=2, services.json?v=1, Manifest und Icons)
  • Navigationen fallen offline auf offline.html zurueck
• Dockerfile kopiert Manifest, Service Worker und Icons in das Nginx-Image.
• nginx.conf liefert manifest.webmanifest mit application/manifest+json und sw.js mit harten No-Cache-Headern aus.

Dashboard-v2-Stand 2026-05-21

• Neues Logo oben nutzt icons/app-icon-source.png.
• Die alte oeffentliche Auth-Kachel wurde auf die Keycloak Account Console umgebogen: https://auth.mischlabs.de/realms/mischlabs/account
• Kategorien:
  • Zugang: SSO, Drive, Passwords
  • Medien: Movies, Audiobooks, Books
  • Arbeit: Git, MiChess
  • Persoenlich: Tom
• app.js prueft Dienste im Hintergrund per fetch(..., { mode: "no-cors" }). Das ist bewusst nur ein Erreichbarkeitsindikator, kein vollwertiges Monitoring.

Adminseite Stand 2026-05-21

• URL: https://mischlabs.de/admin.html
• SSO-Client in Keycloak benoetigt:
  • Client ID: mischlabs-admin
  • Client type: OpenID Connect
  • Client authentication: Off/Public Client
  • Standard flow: On
  • Valid redirect URI: https://mischlabs.de/admin.html
  • Valid post logout redirect URI: https://mischlabs.de/admin.html
  • Web origin: https://mischlabs.de
  • Scopes: openid email profile
• Erlaubter Admin in der statischen UI:
  • preferred_username=mrdiderot oder email=mail.misch@pm.me
• Aktuelle Grenze: Weil mischlabs noch rein statisch ueber Nginx laeuft, kann /admin.html globale Aenderungen noch nicht serverseitig speichern. Der Editor speichert lokal im Browser (localStorage) und kann eine neue services.json exportieren. Fuer echte Live-Aenderungen braucht der naechste Schritt ein kleines Backend oder einen Gitea-Commit-Workflow.
• Statusdiagnose nutzt Browser-Fetch mit mode: "no-cors". Dadurch erkennt sie Erreichbarkeit/Timeouts, aber bei fremden Subdomains keine echten HTTP-Statuscodes.
• Wenn der Browser die Pruefung wegen CORS/CORB blockiert (Failed to fetch), wird der Dienst nicht mehr als offline markiert, sondern als "Nicht im Browser pruefbar". Das betraf z. B. Vaultwarden/password.mischlabs.de.
• Fuer echte Fehlerdetails braucht es ein kleines Backend bzw. einen Statusproxy, der serverseitig HEAD/GET prueft.

Statusproxy Stand 2026-05-21

• mischlabs wurde von Nginx auf einen kleinen Node-Server (server.js) umgestellt.
• Der Node-Server serviert die statischen Dateien weiter und stellt /api/status bereit.
• /api/status liefert:
  • Docker-Container via /var/run/docker.sock
  • Watchtower-Logs und letzten Watchtower-Lauf
  • Speicherplatz fuer /volume1 und /volume2, im Container gemountet als /host/volume1 und /host/volume2
  • Serverseitige Service-Checks mit HTTP-Status und Latenz
• NAS-Compose fuer mischlabs braucht diese Mounts:

volumes:
  - /var/run/docker.sock:/var/run/docker.sock
  - /volume1:/host/volume1:ro
  - /volume2:/host/volume2:ro

• Aktuelle NAS-Werte bei Planung:
  • /volume1: 3.7T total, 2.5T used, 1.2T free, 68%
  • /volume2: 104G total, 88G used, 12G free, 89%
  • Watchtower: Scanned=23, Updated=0, Failed=0 beim manuellen Lauf um 2026-05-21 14:16 UTC

Globale KI-Systemeinstellung (WICHTIG!)

Important

Arbeitsanweisung für alle KI-Systeme (LLM / Agenten): Nach dem erfolgreichen Abschluss einer Aufgabe oder eines Meilensteins MUSS automatisch ein strukturierter Eintrag in dieser Brain.md vorgenommen werden. Dieser Eintrag soll dokumentieren:

1. Welche Änderungen an welchen Dateien vorgenommen wurden (inklusive Begründung).
2. Welche neuen Features, Endpoints oder Design-Anpassungen integriert wurden.
3. Der aktuelle Stand des Deployments und eventuelle offene Punkte oder nächste Schritte. Dies stellt sicher, dass alle nachfolgenden KI-Systeme und der Benutzer stets einen konsistenten, lückenlosen Projektverlauf nachvollziehen können.

Letzte Änderungen & Meilensteine (Stand: 2026-05-21)

• Erweitertes Admin-Tool (Universal Admin Panel):
  • Docker Container Logs Modal: Integration eines interaktiven, terminal-ähnlichen Log-Overlays in admin.html und admin.js. Jeder Container auf der Übersicht sowie Watchtower bieten nun einen Logs-Button. Logs können dynamisch mit Tiefenbeschränkungen (50, 150, 300, 500 Zeilen) abgefragt und manuell aktualisiert werden. Backend-Endpunkt: GET /api/containers/:name/logs.
  • Live Service-Inspektion (🔍): Status-Kacheln der Dienste bieten ein Lupensymbol. Klicks darauf starten eine serverseitige Node-Anfrage (CORS-frei) an die Zieladresse und geben Antwortlatenz, HTTP-Statuscode, vollständige HTTP-Header und eine Vorschau der ersten 1000 Zeichen der Antwort zurück. Backend-Endpunkt: GET /api/services/inspect.
  • Interaktiver NAS Verzeichnis-Scanner: Hinzufügen eines Ordnergrößen-Scanners im NAS-Speicher-Panel. Berechnet rekursiv Ordnergrößen für gemountete Volumes (/host/volume1, /host/volume2), sortiert sie absteigend und erlaubt durch Anklicken von Unterordnern ein direktes Weiterscannen im entsprechenden Pfad. Backend-Endpunkt: GET /api/disks/scan-folder.
• Premium Design-Branding:
  • Textlogo mit Farbverlauf: Das "MischLabs"-Textlogo (.brand h1) auf dem Dashboard (index.html) und im Adminbereich (admin.html) erstrahlt nun in einem modernen, dynamischen Farbverlauf von Blau (#38bdf8) zu Lila/Flieder (#c084fc) unter Verwendung von Text-Maskierungen.
  • Cache-Buster-Update: Cache-Busting-Parameter in den CSS-Verknüpfungen wurden auf v=26 erhöht, damit der geänderte Farbverlauf sofort ohne manuelles Cache-Leeren im Browser gerendert wird.
• Git Deployment & Sync:
  • Sämtliche Implementierungen wurden sicher staged, committet und direkt auf das selbstgehostete Gitea-Remote (https://git.mischlabs.de/MrDiderot/mischlabs.git, Branch master) gepusht.
• Frontend Optimierung & Mobile Usability (Stand: 2026-05-22):
  • PWA-Kachel Entfernung: Die ungenutzte "PWA Installierbar"-Statistik-Kachel wurde aus der oberen Übersichtsleiste (index.html) entfernt. Das Layout der verbleibenden zwei Kacheln ("Online" & "Dienste") wurde in style.css auf ein stabiles, zentriertes 2-Spalten-Raster für Desktop und mobile Ansichten angepasst.
  • Kompakte Service-Kategoriefilter: Die Kategorieauswahl (.segments) wurde aus der klebrigen (sticky) oberen .control-bar herausgelöst und in einem separaten #categoryFilters-Bereich direkt über dem Dienste-Grid platziert. Sie verbraucht dadurch im ungescrollten Zustand keinen kostbaren Platz mehr auf Mobilgeräten.
  • Visual-Premium Redesign: Die Filter-Pills wurden verkleinert (Höhe von 36px auf 28px reduziert, kleinere Schriftgröße 0.78rem und kompakteres Padding), linksbündig ausgerichtet und mit sanften Hover- & Aktiv-Transitions versehen.
  • Cache-Buster & PWA Cache Update: Die Cache-Busting-Parameter für style.css und app.js wurden in index.html hochgestuft (v=31 bzw. v=38). Im Service-Worker (sw.js) wurde der Cache-Name auf mischlabs-pwa-v22 erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.