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
- [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
- [x] Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
- [x] Landing Page Design und Implementierung (index.html + style.css)
- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
- [x] PWA-Grundlage fuer iOS/Home-Screen-Installation
- [x] Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
- [x] Push zum Remote
- [x] 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.