chore: ungenutzte experimental.serverActions-Option entfernen

Die Anwendung nutzt ausschliesslich Route Handler, keine Server Actions. Die
Option bewirkte nichts, liess Next beim Build aber "Experiments (use with
caution)" ausgeben.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.env.example

@@ -0,0 +1,40 @@
+# ─────────────────────────────────────────────────────────────
+#  Nebula – Beispielkonfiguration
+#  Kopieren nach ".env" und Werte anpassen.
+#  (Die .env wird sowohl von Next.js als auch von docker compose gelesen.)
+# ─────────────────────────────────────────────────────────────
+
+# ── Datenbank ────────────────────────────────────────────────
+# Standalone-Betrieb: App laeuft lokal, Postgres via "docker compose up -d db"
+# oder als nativ installierter Dienst.
+DATABASE_URL="postgresql://nebula:nebula@localhost:5432/nebula?schema=public"
+
+# Im Docker-Vollbetrieb (--profile full) setzt compose DATABASE_URL selbst
+# auf den Service-Hostnamen "db" – der Wert oben wird dann nicht verwendet.
+
+# Zugangsdaten des Postgres-Containers aus docker-compose.yml
+POSTGRES_USER="nebula"
+POSTGRES_PASSWORD="nebula"
+POSTGRES_DB="nebula"
+# Host-Port, unter dem die Datenbank erreichbar ist
+POSTGRES_PORT="5432"
+
+# ── Sicherheit ───────────────────────────────────────────────
+# Schluessel zur Verschluesselung der Git-Access-Tokens (AES-256-GCM).
+# Erzeugen mit:  openssl rand -base64 32
+#           oder: node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
+#           oder: npm run setup   (legt die .env inkl. Schluessel an)
+# WICHTIG: Wird der Wert nachtraeglich geaendert, sind gespeicherte Tokens
+# nicht mehr entschluesselbar und muessen neu hinterlegt werden.
+APP_SECRET="bitte-aendern-mindestens-32-zeichen-langer-zufallswert"
+
+# ── App ──────────────────────────────────────────────────────
+# Port innerhalb des Containers bzw. im Standalone-Betrieb
+PORT="3000"
+# Host-Port-Mapping fuer den App-Container (--profile full)
+APP_PORT="3000"
+# Host-Port fuer Adminer (--profile tools)
+ADMINER_PORT="8080"
+
+# Timeout fuer Git-API-Aufrufe in Millisekunden
+GIT_API_TIMEOUT_MS="15000"

Dockerfile

@@ -0,0 +1,72 @@
+# syntax=docker/dockerfile:1
+
+# ─────────────────────────────────────────────────────────────
+#  Nebula – Produktions-Image (Next.js standalone + Prisma)
+#  Build:  docker compose --profile full build
+#  Start:  docker compose --profile full up -d
+# ─────────────────────────────────────────────────────────────
+
+FROM node:22-alpine AS base
+# openssl wird von den Prisma-Engines benoetigt, libc6-compat von Next.js.
+RUN apk add --no-cache libc6-compat openssl
+WORKDIR /app
+ENV NEXT_TELEMETRY_DISABLED=1
+
+
+# ── Abhaengigkeiten ──────────────────────────────────────────
+FROM base AS deps
+COPY package.json package-lock.json* ./
+# prisma/ wird schon hier gebraucht, weil "postinstall" prisma generate ausfuehrt.
+COPY prisma ./prisma
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+
+
+# ── Build ────────────────────────────────────────────────────
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+# Zur Build-Zeit wird keine echte Datenbank kontaktiert (alle Seiten sind
+# dynamisch), Prisma verlangt die Variable aber beim Generieren.
+ENV DATABASE_URL="postgresql://build:build@127.0.0.1:5432/build?schema=public"
+RUN npm run build
+
+
+# ── Laufzeit ─────────────────────────────────────────────────
+FROM base AS runner
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
+
+# Prisma-CLI fuer "migrate deploy" beim Containerstart. Sie bekommt eine
+# eigene, minimale Installation unter /opt: aus dem Builder laesst sie sich
+# nicht herausloesen, weil @prisma/config einen ganzen Abhaengigkeitsbaum
+# nachzieht (effect, c12, …). Die Version wird aus dem Builder uebernommen,
+# damit CLI und generierter Client nicht auseinanderlaufen.
+COPY --from=builder /app/node_modules/prisma/package.json /tmp/prisma-cli.json
+RUN npm install --prefix /opt/prisma-cli --no-save --no-audit --no-fund \
+      "prisma@$(node -p "require('/tmp/prisma-cli.json').version")" \
+ && rm -f /tmp/prisma-cli.json \
+ && npm cache clean --force
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Query-Engine und Schema fuer die Laufzeit bzw. die Migration.
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/@prisma ./node_modules/@prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
+
+COPY docker/entrypoint.sh /usr/local/bin/entrypoint.sh
+RUN chmod +x /usr/local/bin/entrypoint.sh
+
+USER nextjs
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=40s --retries=3 \
+  CMD wget -q --spider http://127.0.0.1:3000/api/health || exit 1
+
+ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
+CMD ["node", "server.js"]

FEATURES.md

@@ -0,0 +1,207 @@
+# Funktionsübersicht
+
+Vollständige Auflistung dessen, was Nebula kann — gegliedert nach Bereichen.
+Für Installation und Betrieb siehe [README.md](README.md).
+
+---
+
+## 1. Projekte
+
+### 1.1 Anlegen und Verwalten
+
+- **Idee genügt.** Ein Projekt braucht nur einen Namen. Alles Weitere — Beschreibung,
+  Repository, Tags — lässt sich jederzeit nachtragen. Neue Projekte starten deshalb
+  standardmäßig im Status *Idee*.
+- **Bearbeiten** über einen Dialog, der auf dem Dashboard und der Projektseite
+  identisch funktioniert.
+- **Löschen** mit Rückfrage; zugehörige Notizen und der Repo-Snapshot verschwinden mit
+  (Fremdschlüssel mit `ON DELETE CASCADE`).
+- **Slug** wird automatisch aus dem Namen erzeugt (umlautfest) und bei Namenskollision
+  durchnummeriert.
+
+### 1.2 Felder
+
+| Feld | Beschreibung |
+| --- | --- |
+| Name | Pflichtfeld |
+| Kurzbeschreibung | Ein Satz für die Karte im Board |
+| Beschreibung | Ausführliche Ideenskizze, Zeilenumbrüche bleiben erhalten |
+| Status | Idee · In Planung · Offen · In Entwicklung · Fertig · Archiviert |
+| Priorität | Niedrig · Normal · Hoch · Kritisch |
+| Fortschritt | 0–100 %, per Regler |
+| Akzentfarbe | Sechs Farbverläufe, prägen Karte und Detailseite |
+| Tags | Kommagetrennt, bis zu 12 Stück, kleingeschrieben und dedupliziert |
+| Favorit | Anpinnen — Favoriten stehen im Board immer oben |
+| Git-Verbindung | Optionale Zuordnung zu einem Git-System |
+| Repository | URL sowie Owner/Name (werden aus der URL abgeleitet) |
+
+### 1.3 Status
+
+Sechs Zustände, jeder mit eigener Farbe und Erklärung im Auswahlmenü:
+
+| Status | Bedeutung |
+| --- | --- |
+| **Idee** | Noch ein Gedanke — nichts gebaut, nichts entschieden |
+| **In Planung** | Scope, Stack und Schnitt werden festgelegt |
+| **Offen** | Startklar, liegt aber gerade still |
+| **In Entwicklung** | Wird aktiv gebaut |
+| **Fertig** | Ausgeliefert und abgeschlossen |
+| **Archiviert** | Ruht — bleibt erhalten, ist im Board aber ausgeblendet |
+
+Der Status ist **direkt auf der Projektkarte** umschaltbar, ohne den Detailbereich zu
+öffnen. Die Änderung wird optimistisch angezeigt und bei einem Fehler zurückgerollt.
+
+---
+
+## 2. Dashboard
+
+- **Kennzahlen** oben: Anzahl Projekte mit Ø-Fortschritt, offene Ideen, aktive
+  Entwicklungen, fertige Projekte, verknüpfte Repositories.
+- **Volltextsuche** über Name, Kurzbeschreibung, Beschreibung, Tags und Repo-Pfad.
+- **Statusfilter** als Chips mit Trefferzähler, mehrere gleichzeitig kombinierbar.
+- **Sortierung** nach zuletzt geändert, Anlagedatum, Name, Fortschritt oder Priorität —
+  Favoriten bleiben stets oben.
+- **Zwei Ansichten**: freies Raster oder nach Status gruppierte Abschnitte.
+- **Archiv** ist standardmäßig ausgeblendet und per Schalter einblendbar.
+- **Leerzustände** mit direktem Einstieg statt einer leeren Fläche.
+
+### Projektkarte auf einen Blick
+
+Name und Favoritenstern · Kurzbeschreibung · Fortschrittsbalken · Provider-Badge ·
+Default-Branch samt Anzahl weiterer Branches · letzter Tag · Alter des letzten Commits ·
+Anzahl Notizen · Warnung bei Sync-Fehler · Tags · Statusauswahl · Priorität.
+
+---
+
+## 3. Notizen
+
+- **Beliebig viele Notizen pro Projekt**, mit optionalem Titel und mehrzeiligem Text.
+- **Anpinnen** — angepinnte Notizen stehen oben und sind farblich hervorgehoben.
+- **Bearbeiten und Löschen** direkt in der Liste; Löschen fragt nach.
+- **Zeitstempel**: Anlagedatum immer, „bearbeitet vor …" nur bei echter Änderung.
+- Zeilenumbrüche und Einrückungen bleiben erhalten — Checklisten und Code-Schnipsel
+  überleben das Speichern.
+- Eine neue Notiz aktualisiert die Änderungszeit des Projekts, damit die Sortierung
+  „zuletzt geändert" die tatsächliche Aktivität abbildet.
+
+---
+
+## 4. Git-Anbindung
+
+### 4.1 Unterstützte Systeme
+
+| System | API | Authentifizierung | Besonderheit |
+| --- | --- | --- | --- |
+| **GitHub** | REST v3 | `Authorization: Bearer` | github.com und GitHub Enterprise (`/api/v3`) |
+| **GitLab** | API v4 | `PRIVATE-TOKEN` | gitlab.com und Self-Hosted, verschachtelte Gruppen |
+| **Gitea / Forgejo** | API v1 | `Authorization: token` | beliebige eigene Instanz |
+
+Mehrere Verbindungen desselben Typs sind möglich — etwa privates GitHub und
+Firmen-Gitea nebeneinander.
+
+### 4.2 Verbindungen verwalten
+
+- Anlegen mit Anzeigename, System, Basis-URL und Access Token.
+- **Verbindungstest** auf Knopfdruck: prüft Erreichbarkeit und Token, zeigt den erkannten
+  Benutzer und bei Gitea zusätzlich die Serverversion. Ergebnis und Zeitpunkt werden
+  gespeichert und in der Karte angezeigt.
+- **Token-Verwaltung**: verschlüsselt gespeichert, in der UI nur als Hinweis (`ghp_…9f3a`)
+  sichtbar. Beim Bearbeiten bedeutet ein leeres Feld „unverändert lassen".
+- **Repository-Auswahl**: Nebula listet alle Repos, auf die der Token Zugriff hat, mit
+  Suchfeld. Ein Klick übernimmt URL, Owner, Name und — falls noch leer — Projektname und
+  Kurzbeschreibung.
+- **Löschen** trennt nur die Verknüpfung; die Projekte selbst bleiben erhalten.
+
+### 4.3 Was beim Sync geholt wird
+
+| Bereich | Details |
+| --- | --- |
+| Repository | Voller Pfad, Beschreibung, Default-Branch, Sichtbarkeit, Größe, letzte Aktivität |
+| Kennzahlen | Stars, Forks, offene Issues, offene Pull-/Merge-Requests |
+| Branches | bis zu 50, mit SHA, Default-Markierung, Schutzstatus und (wo die API es liefert) letztem Commit |
+| Tags | bis zu 25, mit SHA, Nachricht und Datum |
+| Commits | die letzten 15, mit Kurz-SHA, Nachricht, Autor, Datum und Link |
+| Releases | bis zu 10, inklusive Pre-Release- und Draft-Kennzeichnung |
+| Sprachen | Verteilung als Balken mit Prozentwerten |
+
+- **Snapshot-Prinzip**: Alle Daten werden in der Datenbank abgelegt. Das Dashboard bleibt
+  ohne Netzverbindung oder bei erreichtem Rate-Limit vollständig nutzbar.
+- **URL-Erkennung** für `https://…`, `git@host:owner/repo.git` und GitLab-Weboberflächen-URLs
+  mit `/-/tree/…`; verschachtelte Gruppenpfade bleiben erhalten.
+- **Ohne Token** funktionieren öffentliche Repositories, mit deutlich strengerem Rate-Limit.
+- **Fehler landen am Projekt** statt in einer Fehlerseite: die Karte zeigt „Sync-Fehler",
+  die Projektseite die genaue Meldung. Typische HTTP-Codes werden in Klartext übersetzt
+  (401 Token, 403 Scopes/Rate-Limit, 404 Pfad, 408 Timeout).
+- **Zeitlimit** pro Aufruf über `GIT_API_TIMEOUT_MS` einstellbar; die Teilabfragen laufen
+  parallel, eine fehlschlagende Liste bricht den restlichen Sync nicht ab.
+
+---
+
+## 5. Oberfläche
+
+- **Dark Glassmorphism**: milchige Glasflächen, driftende Nebel im Hintergrund, feines
+  Raster, Neon-Akzente pro Projektfarbe.
+- **Animationen**: gestaffelt einblendende Karten, Hover-Lift mit Farbverlaufsrand,
+  animierte Fortschrittsbalken.
+- **Responsiv** von Handy bis Ultrawide (bis zu vier Kartenspalten).
+- **Barrierearm**: durchgehende ARIA-Labels, Escape schließt Dialoge, sichtbarer
+  Fokusring, `prefers-reduced-motion` schaltet Animationen ab.
+- **Deutschsprachig**, Datums- und Zahlenformate in `de-DE` mit fester Zeitzone
+  Europe/Berlin, damit Server- und Browser-Darstellung übereinstimmen.
+
+---
+
+## 6. Daten und Technik
+
+### 6.1 Datenmodell
+
+| Tabelle | Inhalt |
+| --- | --- |
+| `Project` | Projektstammdaten, Status, Fortschritt, Repo-Verknüpfung |
+| `Note` | Notizen (n:1 zu Projekt, Cascade-Delete) |
+| `GitConnection` | Git-Systeme inkl. verschlüsseltem Token |
+| `RepoSnapshot` | Zwischengespeicherter Repo-Stand (1:1 zu Projekt) |
+
+Listen wie Branches oder Commits liegen als `JSONB`, damit providerspezifische Felder
+nicht verloren gehen. Indizes auf Status, Verbindung und Änderungsdatum.
+
+### 6.2 Sicherheit
+
+- Access Tokens verschlüsselt mit **AES-256-GCM**, Schlüssel per **scrypt** aus
+  `APP_SECRET` abgeleitet, Chiffrat versioniert (`v1.<iv>.<tag>.<data>`).
+- Tokens werden nie an den Browser gesendet — alle API-Antworten nutzen eine Feldauswahl
+  ohne `tokenCipher`.
+- **Zod-Validierung** jeder Eingabe an der API-Grenze mit Feldfehlern für die UI.
+- Prisma arbeitet ausschließlich mit parametrisierten Abfragen.
+
+### 6.3 Betrieb
+
+- **Zwei gleichwertige Betriebsarten**: Standalone (Node-Prozess, beliebige PostgreSQL)
+  oder komplett in Docker — dieselbe Codebasis, dieselbe `.env`.
+- **Docker-Compose-Profile**: `db` läuft immer, `--profile full` startet zusätzlich die
+  App, `--profile tools` bringt Adminer als DB-Oberfläche mit.
+- **Automatische Migration** beim Containerstart, inklusive Warteschleife auf die
+  Datenbank.
+- **Healthchecks**: `pg_isready` für Postgres, `/api/health` für die App.
+- **Setup-Skript** erzeugt die `.env` samt zufälligem `APP_SECRET`.
+- **Seed-Daten** auf Wunsch, idempotent — mehrfaches Ausführen legt nichts doppelt an.
+
+### 6.4 API
+
+Zehn REST-Endpunkte für Projekte, Notizen, Verbindungen, Sync, Repo-Listen und Health.
+Alles, was die Oberfläche kann, ist damit auch scriptbar. Übersicht in der
+[README](README.md#api).
+
+---
+
+## 7. Ideen für später
+
+Bewusst nicht umgesetzt, aber vorgemerkt:
+
+- Kanban-Board mit Drag & Drop zwischen den Statusspalten
+- Webhooks, damit Pushes den Snapshot ohne Knopfdruck aktualisieren
+- Markdown-Rendering in Beschreibung und Notizen
+- Volltextsuche über Notizen hinweg
+- Export eines Projekts als Markdown
+- Automatischer Sync im Hintergrund (Intervall pro Verbindung)
+- Mehrbenutzerbetrieb mit Login

README.md

@@ -0,0 +1,252 @@
+<div align="center">
+
+# ✦ Nebula
+
+**Das Kontrollzentrum für deine Vibe-Coding Projekte.**
+
+Ideen festhalten · Status pflegen · Notizen sammeln · Git-Repos live im Blick
+
+<sub>Next.js 15 · TypeScript · Tailwind CSS 4 · Prisma · PostgreSQL · Docker</sub>
+
+</div>
+
+---
+
+## Was ist Nebula?
+
+Vibe Coding produziert schnell viele halbfertige Projekte: ein Repo hier, eine Idee dort,
+irgendwo eine Notiz in einer Textdatei. Nebula bündelt das an einem Ort.
+
+Jedes Projekt bekommt einen **Status** (von der rohen Idee bis „Fertig"), beliebig viele
+**Notizen** und optional ein **verknüpftes Repository**. Nebula holt sich von dort per API
+Branches, Tags, Commits, Releases und offene Issues/PRs — egal ob **GitHub**, **GitLab**
+oder eine selbst gehostete **Gitea**-Instanz.
+
+Alle Daten liegen in **deiner lokalen PostgreSQL**. Es gibt keinen Cloud-Dienst dahinter,
+Access Tokens werden verschlüsselt abgelegt.
+
+Eine vollständige Auflistung aller Funktionen steht in **[FEATURES.md](FEATURES.md)**.
+
+---
+
+## Schnellstart
+
+Zwei Betriebsarten, dieselbe Codebasis. Beide brauchen zuerst eine `.env`:
+
+```bash
+node scripts/setup.mjs      # legt .env an und erzeugt ein zufälliges APP_SECRET
+```
+
+> Ohne Node zur Hand? Einfach `.env.example` nach `.env` kopieren und `APP_SECRET` von Hand
+> auf einen langen Zufallswert setzen.
+
+### Variante A — Standalone (empfohlen zum Entwickeln)
+
+Die App läuft nativ auf dem Rechner, nur PostgreSQL kommt aus dem Container:
+
+```bash
+docker compose up -d db      # Postgres 17 auf localhost:5432
+npm install
+npm run db:migrate           # Schema anlegen
+npm run db:seed              # optional: drei Beispielprojekte
+npm run dev                  # → http://localhost:3000
+```
+
+Für den Produktivbetrieb ohne Docker:
+
+```bash
+npm run build
+npm start                    # → http://localhost:3000
+```
+
+### Variante B — Alles in Docker
+
+```bash
+docker compose --profile full up -d --build     # → http://localhost:3000
+```
+
+Der App-Container spielt beim Start automatisch die Migrationen ein und wartet dabei auf
+die Datenbank. Logs mitlesen:
+
+```bash
+docker compose --profile full logs -f app
+```
+
+Stoppen:
+
+```bash
+docker compose --profile full down              # Container weg, Daten bleiben
+docker compose --profile full down -v           # inkl. Datenbank-Volume
+```
+
+### Variante C — Eigene, bereits laufende PostgreSQL
+
+Docker wird gar nicht gebraucht. In der `.env` nur den Connection-String setzen:
+
+```env
+DATABASE_URL="postgresql://benutzer:passwort@dbhost:5432/nebula?schema=public"
+```
+
+Dann `npm install && npm run db:migrate && npm run dev`.
+
+---
+
+## Voraussetzungen
+
+| Variante | Benötigt |
+| --- | --- |
+| Standalone | Node.js ≥ 20.11, npm, PostgreSQL ≥ 14 (lokal oder via Docker) |
+| Docker | Docker Engine ≥ 24 mit Compose v2 |
+
+---
+
+## Konfiguration
+
+Alle Variablen sind in [`.env.example`](.env.example) dokumentiert.
+
+| Variable | Bedeutung | Default |
+| --- | --- | --- |
+| `DATABASE_URL` | PostgreSQL-Verbindung (Prisma) | `postgresql://nebula:nebula@localhost:5432/nebula` |
+| `APP_SECRET` | Schlüssel für die Token-Verschlüsselung (AES-256-GCM) | — **unbedingt setzen** |
+| `PORT` | Port der Anwendung | `3000` |
+| `APP_PORT` | Host-Port-Mapping des App-Containers | `3000` |
+| `POSTGRES_USER` / `POSTGRES_PASSWORD` / `POSTGRES_DB` | Zugangsdaten des DB-Containers | `nebula` |
+| `POSTGRES_PORT` | Host-Port der Datenbank | `5432` |
+| `ADMINER_PORT` | Host-Port von Adminer (`--profile tools`) | `8080` |
+| `GIT_API_TIMEOUT_MS` | Timeout für Git-API-Aufrufe | `15000` |
+
+> **`APP_SECRET` nachträglich ändern** macht bereits gespeicherte Git-Tokens unlesbar.
+> Sie müssen dann in den Verbindungen neu hinterlegt werden — die restlichen Daten bleiben
+> unberührt.
+
+---
+
+## Git-Verbindung einrichten
+
+1. Im Git-System einen **Personal Access Token** mit Leserechten erzeugen:
+
+   | System | Scopes |
+   | --- | --- |
+   | GitHub | Fine-grained Token: *Contents: Read*, *Metadata: Read*, *Issues: Read*, *Pull requests: Read* |
+   | GitLab | `read_api` (alternativ `read_repository`) |
+   | Gitea / Forgejo | `repository:read`, `issue:read`, `user:read` |
+
+2. In Nebula unter **Git-Verbindungen → Verbindung hinzufügen** eintragen:
+   System wählen, Basis-URL (z. B. `https://git.meine-firma.de`, ohne `/api`) und Token.
+3. Mit **Testen** prüfen — Nebula meldet den erkannten Benutzer zurück.
+4. Beim Anlegen oder Bearbeiten eines Projekts die Verbindung auswählen und über
+   **Repos laden** das Repository aussuchen (oder die URL direkt eintippen).
+5. Auf der Projektseite **Jetzt synchronisieren** — Branches, Tags, Commits und Releases
+   werden geholt und als Snapshot gespeichert.
+
+Der Snapshot bleibt in der Datenbank, das Dashboard funktioniert also auch offline.
+Ohne Token gehen nur öffentliche Repositories, mit strengem Rate-Limit.
+
+---
+
+## Projektstruktur
+
+```
+nebula/
+├── docker/entrypoint.sh        Migrationen + Serverstart im Container
+├── docker-compose.yml          db (immer) · app (--profile full) · adminer (--profile tools)
+├── Dockerfile                  Multi-Stage-Build auf Basis des Next-Standalone-Outputs
+├── prisma/
+│   ├── schema.prisma           Datenmodell
+│   ├── migrations/             versionierte SQL-Migrationen
+│   └── seed.ts                 Beispieldaten
+├── scripts/setup.mjs           .env erzeugen inkl. APP_SECRET
+└── src/
+    ├── app/
+    │   ├── page.tsx            Dashboard (Board, Filter, Kennzahlen)
+    │   ├── projects/[id]/      Projektdetail: Beschreibung, Notizen, Git
+    │   ├── connections/        Verwaltung der Git-Verbindungen
+    │   └── api/                REST-Endpunkte (Projekte, Notizen, Verbindungen, Sync)
+    ├── components/             UI-Komponenten (Board, Karten, Panels, Dialoge)
+    ├── lib/
+    │   ├── crypto.ts           AES-256-GCM für Access Tokens
+    │   ├── db.ts               Prisma-Client
+    │   ├── git/                Provider-Adapter: github.ts · gitlab.ts · gitea.ts
+    │   ├── sync.ts             Repo-Snapshot holen und speichern
+    │   └── validation.ts       Zod-Schemas für alle Eingaben
+    └── types/                  gemeinsame Typen für Server und Client
+```
+
+---
+
+## npm-Skripte
+
+| Skript | Zweck |
+| --- | --- |
+| `npm run dev` | Entwicklungsserver mit Hot Reload |
+| `npm run build` / `npm start` | Produktionsbuild und -start (ohne Docker) |
+| `npm run setup` | `.env` anlegen inkl. generiertem `APP_SECRET` |
+| `npm run db:migrate` | Migrationen einspielen (`prisma migrate deploy`) |
+| `npm run db:migrate:dev` | Neue Migration aus Schemaänderungen erzeugen |
+| `npm run db:seed` | Beispielprojekte anlegen |
+| `npm run db:studio` | Prisma Studio öffnen |
+| `npm run db:reset` | Datenbank zurücksetzen (**löscht alles**) |
+| `npm run typecheck` | TypeScript prüfen |
+| `npm run docker:db` | Nur die Datenbank starten |
+| `npm run docker:up` / `docker:down` | Kompletten Stack starten / stoppen |
+| `npm run docker:tools` | Adminer auf `http://localhost:8080` |
+
+---
+
+## API
+
+Alle Endpunkte liefern und erwarten JSON.
+
+| Methode | Pfad | Zweck |
+| --- | --- | --- |
+| `GET` | `/api/health` | Status inkl. Datenbankverbindung (Docker-Healthcheck) |
+| `GET` `POST` | `/api/projects` | Projekte auflisten / anlegen |
+| `GET` `PATCH` `DELETE` | `/api/projects/:id` | Projekt lesen / ändern / löschen |
+| `POST` | `/api/projects/:id/sync` | Repo-Daten vom Git-System holen |
+| `GET` `POST` | `/api/projects/:id/notes` | Notizen des Projekts |
+| `PATCH` `DELETE` | `/api/notes/:id` | Notiz ändern / löschen |
+| `GET` `POST` | `/api/connections` | Git-Verbindungen |
+| `PATCH` `DELETE` | `/api/connections/:id` | Verbindung ändern / löschen |
+| `POST` | `/api/connections/:id/check` | Verbindung und Token testen |
+| `GET` | `/api/connections/:id/repos` | Zugängliche Repositories auflisten |
+
+Beispiel — Idee per Kommandozeile anlegen:
+
+```bash
+curl -X POST http://localhost:3000/api/projects \
+  -H "Content-Type: application/json" \
+  -d '{"name":"Neue Idee","status":"IDEA","tags":["experiment"]}'
+```
+
+---
+
+## Sicherheitshinweise
+
+- Nebula hat **keine Benutzerverwaltung** und ist für den Betrieb im eigenen Netz gedacht.
+  Vor einer Veröffentlichung im Internet unbedingt einen Reverse Proxy mit Authentifizierung
+  davorschalten.
+- Access Tokens werden mit **AES-256-GCM** verschlüsselt gespeichert, aus `APP_SECRET` per
+  scrypt abgeleitet. Sie werden ausschließlich serverseitig entschlüsselt und nie an den
+  Browser ausgeliefert — die API zeigt nur einen Hinweis wie `ghp_…9f3a`.
+- Ist `APP_SECRET` nicht gesetzt, warnt die App beim Start und nutzt einen unsicheren
+  Entwicklungsschlüssel.
+
+---
+
+## Fehlersuche
+
+| Symptom | Ursache / Lösung |
+| --- | --- |
+| `Can't reach database server` | Läuft `docker compose up -d db`? Stimmt `DATABASE_URL`? |
+| `The table ... does not exist` | Migrationen fehlen: `npm run db:migrate` |
+| Sync meldet `401` | Token abgelaufen oder falsche Scopes — unter Git-Verbindungen neu setzen |
+| Sync meldet `404` | Owner/Repo prüfen; bei GitLab gehört die volle Gruppenkette in „Owner" |
+| Sync meldet `403 Rate-Limit` | Ohne Token ist das Limit sehr niedrig — Token hinterlegen |
+| Tokens plötzlich ungültig | `APP_SECRET` wurde geändert — Tokens neu eintragen |
+| Port 3000 belegt | `APP_PORT` in der `.env` ändern (Docker) bzw. `npm run dev -- -p 3001` |
+
+---
+
+## Lizenz
+
+MIT — siehe [LICENSE](LICENSE).

docker-compose.yml

@@ -0,0 +1,78 @@
+name: nebula
+
+# ─────────────────────────────────────────────────────────────
+#  Zwei Betriebsarten aus einer Datei:
+#
+#  1) Standalone-Entwicklung – nur die Datenbank im Container:
+#       docker compose up -d db
+#       npm run dev
+#
+#  2) Alles im Container:
+#       docker compose --profile full up -d --build
+#
+#  Optionales DB-Webinterface:
+#       docker compose --profile tools up -d adminer   → http://localhost:8080
+# ─────────────────────────────────────────────────────────────
+
+services:
+  db:
+    image: postgres:17-alpine
+    container_name: nebula-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-nebula}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-nebula}
+      POSTGRES_DB: ${POSTGRES_DB:-nebula}
+      # Deterministische Sortierung unabhaengig vom Host-Locale
+      POSTGRES_INITDB_ARGS: "--encoding=UTF8"
+    ports:
+      - "${POSTGRES_PORT:-5432}:5432"
+    volumes:
+      - nebula-db-data:/var/lib/postgresql/data
+    healthcheck:
+      test:
+        ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-nebula} -d ${POSTGRES_DB:-nebula}"]
+      interval: 5s
+      timeout: 5s
+      retries: 20
+      start_period: 10s
+
+  app:
+    profiles: ["full"]
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: nebula-app:latest
+    container_name: nebula-app
+    restart: unless-stopped
+    depends_on:
+      db:
+        condition: service_healthy
+    environment:
+      DATABASE_URL: postgresql://${POSTGRES_USER:-nebula}:${POSTGRES_PASSWORD:-nebula}@db:5432/${POSTGRES_DB:-nebula}?schema=public
+      # Unbedingt in der .env ueberschreiben – verschluesselt die Git-Tokens.
+      APP_SECRET: ${APP_SECRET:-nebula-dev-secret-bitte-in-der-env-aendern}
+      GIT_API_TIMEOUT_MS: ${GIT_API_TIMEOUT_MS:-15000}
+      NODE_ENV: production
+      PORT: 3000
+      HOSTNAME: 0.0.0.0
+    ports:
+      - "${APP_PORT:-3000}:3000"
+
+  adminer:
+    profiles: ["tools"]
+    image: adminer:latest
+    container_name: nebula-adminer
+    restart: unless-stopped
+    depends_on:
+      db:
+        condition: service_healthy
+    environment:
+      ADMINER_DEFAULT_SERVER: db
+      ADMINER_DESIGN: dracula
+    ports:
+      - "${ADMINER_PORT:-8080}:8080"
+
+volumes:
+  nebula-db-data:
+    name: nebula-db-data

docker/entrypoint.sh

@@ -0,0 +1,35 @@
+#!/bin/sh
+# ─────────────────────────────────────────────────────────────
+#  Startet Nebula im Container: erst Migrationen, dann der Server.
+# ─────────────────────────────────────────────────────────────
+set -e
+
+PRISMA_CLI="/opt/prisma-cli/node_modules/prisma/build/index.js"
+SCHEMA="/app/prisma/schema.prisma"
+
+if [ -z "$DATABASE_URL" ]; then
+  echo "[nebula] FEHLER: DATABASE_URL ist nicht gesetzt." >&2
+  exit 1
+fi
+
+if [ ! -f "$PRISMA_CLI" ]; then
+  echo "[nebula] FEHLER: Prisma-CLI nicht unter $PRISMA_CLI gefunden." >&2
+  exit 1
+fi
+
+echo "[nebula] Migrationen werden eingespielt…"
+
+attempt=0
+max_attempts=15
+until node "$PRISMA_CLI" migrate deploy --schema "$SCHEMA"; do
+  attempt=$((attempt + 1))
+  if [ "$attempt" -ge "$max_attempts" ]; then
+    echo "[nebula] FEHLER: Migration nach $max_attempts Versuchen fehlgeschlagen." >&2
+    exit 1
+  fi
+  echo "[nebula] Datenbank noch nicht bereit – neuer Versuch in 3s ($attempt/$max_attempts)"
+  sleep 3
+done
+
+echo "[nebula] Migrationen ok. Server startet auf Port ${PORT:-3000}."
+exec "$@"

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -7,12 +7,7 @@ const nextConfig: NextConfig = {
   output: "standalone",
   reactStrictMode: true,
   poweredByHeader: false,
-  experimental: {
   // Prisma darf nicht gebundlet werden, sonst findet der Client seine Engine nicht.
-    serverActions: {
-      bodySizeLimit: "2mb",
-    },
-  },
   serverExternalPackages: ["@prisma/client", "prisma"],
 };
 

prisma/migrations/20260725090000_init/migration.sql

@@ -0,0 +1,132 @@
+-- CreateEnum
+CREATE TYPE "ProjectStatus" AS ENUM ('IDEA', 'OPEN', 'PLANNING', 'IN_DEVELOPMENT', 'DONE', 'ARCHIVED');
+
+-- CreateEnum
+CREATE TYPE "GitProvider" AS ENUM ('GITHUB', 'GITLAB', 'GITEA');
+
+-- CreateTable
+CREATE TABLE "GitConnection" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "provider" "GitProvider" NOT NULL,
+    "baseUrl" TEXT NOT NULL,
+    "username" TEXT,
+    "tokenCipher" TEXT,
+    "tokenHint" TEXT,
+    "lastCheckedAt" TIMESTAMP(3),
+    "lastCheckOk" BOOLEAN,
+    "lastCheckMessage" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "GitConnection_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Project" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "summary" TEXT,
+    "description" TEXT,
+    "status" "ProjectStatus" NOT NULL DEFAULT 'IDEA',
+    "priority" INTEGER NOT NULL DEFAULT 2,
+    "progress" INTEGER NOT NULL DEFAULT 0,
+    "accent" TEXT NOT NULL DEFAULT 'violet',
+    "tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "favorite" BOOLEAN NOT NULL DEFAULT false,
+    "repoUrl" TEXT,
+    "repoOwner" TEXT,
+    "repoName" TEXT,
+    "defaultBranch" TEXT,
+    "connectionId" TEXT,
+    "lastSyncedAt" TIMESTAMP(3),
+    "syncError" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Project_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Note" (
+    "id" TEXT NOT NULL,
+    "projectId" TEXT NOT NULL,
+    "title" TEXT,
+    "content" TEXT NOT NULL,
+    "pinned" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Note_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "RepoSnapshot" (
+    "id" TEXT NOT NULL,
+    "projectId" TEXT NOT NULL,
+    "fullName" TEXT,
+    "description" TEXT,
+    "defaultBranch" TEXT,
+    "htmlUrl" TEXT,
+    "visibility" TEXT,
+    "stars" INTEGER NOT NULL DEFAULT 0,
+    "forks" INTEGER NOT NULL DEFAULT 0,
+    "openIssues" INTEGER NOT NULL DEFAULT 0,
+    "openPullRequests" INTEGER NOT NULL DEFAULT 0,
+    "sizeKb" INTEGER NOT NULL DEFAULT 0,
+    "lastCommitSha" TEXT,
+    "lastCommitMessage" TEXT,
+    "lastCommitAuthor" TEXT,
+    "lastCommitAt" TIMESTAMP(3),
+    "latestTag" TEXT,
+    "latestRelease" TEXT,
+    "latestReleaseAt" TIMESTAMP(3),
+    "branchCount" INTEGER NOT NULL DEFAULT 0,
+    "tagCount" INTEGER NOT NULL DEFAULT 0,
+    "branches" JSONB NOT NULL DEFAULT '[]',
+    "tags" JSONB NOT NULL DEFAULT '[]',
+    "commits" JSONB NOT NULL DEFAULT '[]',
+    "releases" JSONB NOT NULL DEFAULT '[]',
+    "languages" JSONB NOT NULL DEFAULT '{}',
+    "pushedAt" TIMESTAMP(3),
+    "fetchedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "RepoSnapshot_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "GitConnection_name_key" ON "GitConnection"("name");
+
+-- CreateIndex
+CREATE INDEX "GitConnection_provider_idx" ON "GitConnection"("provider");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Project_slug_key" ON "Project"("slug");
+
+-- CreateIndex
+CREATE INDEX "Project_status_idx" ON "Project"("status");
+
+-- CreateIndex
+CREATE INDEX "Project_connectionId_idx" ON "Project"("connectionId");
+
+-- CreateIndex
+CREATE INDEX "Project_updatedAt_idx" ON "Project"("updatedAt");
+
+-- CreateIndex
+CREATE INDEX "Note_projectId_idx" ON "Note"("projectId");
+
+-- CreateIndex
+CREATE INDEX "Note_pinned_idx" ON "Note"("pinned");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "RepoSnapshot_projectId_key" ON "RepoSnapshot"("projectId");
+
+-- AddForeignKey
+ALTER TABLE "Project" ADD CONSTRAINT "Project_connectionId_fkey" FOREIGN KEY ("connectionId") REFERENCES "GitConnection"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Note" ADD CONSTRAINT "Note_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "RepoSnapshot" ADD CONSTRAINT "RepoSnapshot_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -0,0 +1,163 @@
+// ─────────────────────────────────────────────────────────────
+//  Nebula – Datenmodell
+//  Datenbank: PostgreSQL (lokal oder via docker compose)
+// ─────────────────────────────────────────────────────────────
+
+generator client {
+  provider = "prisma-client-js"
+  // linux-musl-openssl-3.0.x wird fuer das Alpine-Docker-Image benoetigt.
+  binaryTargets = ["native", "linux-musl-openssl-3.0.x"]
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+/// Lebenszyklus eines Projekts. IDEA ist der Startzustand fuer
+/// frisch notierte Einfaelle, ARCHIVED blendet Projekte aus dem
+/// Standard-Board aus, ohne sie zu loeschen.
+enum ProjectStatus {
+  IDEA
+  OPEN
+  PLANNING
+  IN_DEVELOPMENT
+  DONE
+  ARCHIVED
+}
+
+/// Unterstuetzte Git-Systeme.
+enum GitProvider {
+  GITHUB
+  GITLAB
+  GITEA
+}
+
+/// Eine Verbindung zu einem Git-System inkl. verschluesseltem Token.
+model GitConnection {
+  id        String      @id @default(cuid())
+  name      String
+  provider  GitProvider
+  /// Basis-URL der Instanz, z. B. https://github.com, https://gitlab.com,
+  /// https://git.meine-domain.de
+  baseUrl   String
+  /// Optionaler Benutzername – rein informativ fuer die Anzeige.
+  username  String?
+
+  /// Personal Access Token, AES-256-GCM-verschluesselt (siehe src/lib/crypto.ts).
+  tokenCipher String?
+  /// Gekuerzte Darstellung des Tokens fuer die UI, z. B. "ghp_…4f2a".
+  tokenHint   String?
+
+  lastCheckedAt     DateTime?
+  lastCheckOk       Boolean?
+  lastCheckMessage  String?
+
+  projects  Project[]
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@unique([name])
+  @@index([provider])
+}
+
+/// Ein Vibe-Coding-Projekt – von der reinen Idee bis zum fertigen Repo.
+model Project {
+  id          String        @id @default(cuid())
+  name        String
+  slug        String        @unique
+  /// Einzeiler fuer die Karte im Dashboard.
+  summary     String?
+  /// Ausfuehrliche Beschreibung / Ideenskizze (Markdown-freundlich).
+  description String?
+  status      ProjectStatus @default(IDEA)
+  /// 1 = niedrig, 2 = normal, 3 = hoch, 4 = kritisch
+  priority    Int           @default(2)
+  /// Fortschritt in Prozent (0–100)
+  progress    Int           @default(0)
+  /// Akzentfarbe der Karte: violet | cyan | emerald | amber | rose | blue
+  accent      String        @default("violet")
+  tags        String[]      @default([])
+  favorite    Boolean       @default(false)
+
+  // ── Git-Anbindung ──────────────────────────────────────────
+  repoUrl       String?
+  /// Owner bzw. Namespace/Gruppe (bei GitLab auch verschachtelt: "gruppe/subgruppe")
+  repoOwner     String?
+  repoName      String?
+  defaultBranch String?
+  connectionId  String?
+  connection    GitConnection? @relation(fields: [connectionId], references: [id], onDelete: SetNull)
+
+  lastSyncedAt DateTime?
+  syncError    String?
+
+  notes    Note[]
+  snapshot RepoSnapshot?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([status])
+  @@index([connectionId])
+  @@index([updatedAt])
+}
+
+/// Freie Notizen zu einem Projekt.
+model Note {
+  id        String   @id @default(cuid())
+  projectId String
+  project   Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  title     String?
+  content   String
+  pinned    Boolean  @default(false)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([projectId])
+  @@index([pinned])
+}
+
+/// Zwischengespeicherter Stand des verknuepften Repositories. Wird beim
+/// Sync ueberschrieben, damit das Dashboard auch ohne Netz Daten zeigt.
+model RepoSnapshot {
+  id        String  @id @default(cuid())
+  projectId String  @unique
+  project   Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
+
+  fullName      String?
+  description   String?
+  defaultBranch String?
+  htmlUrl       String?
+  visibility    String?
+
+  stars            Int @default(0)
+  forks            Int @default(0)
+  openIssues       Int @default(0)
+  openPullRequests Int @default(0)
+  sizeKb           Int @default(0)
+
+  lastCommitSha     String?
+  lastCommitMessage String?
+  lastCommitAuthor  String?
+  lastCommitAt      DateTime?
+
+  latestTag         String?
+  latestRelease     String?
+  latestReleaseAt   DateTime?
+
+  branchCount Int @default(0)
+  tagCount    Int @default(0)
+
+  /// Rohdaten der Listen – bewusst als JSON, damit providerspezifische
+  /// Zusatzfelder nicht verloren gehen.
+  branches  Json @default("[]")
+  tags      Json @default("[]")
+  commits   Json @default("[]")
+  releases  Json @default("[]")
+  languages Json @default("{}")
+
+  pushedAt  DateTime?
+  fetchedAt DateTime @default(now())
+}

prisma/seed.ts

@@ -0,0 +1,118 @@
+import { PrismaClient, ProjectStatus } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+interface SampleNote {
+  title?: string | null;
+  content: string;
+  pinned?: boolean;
+}
+
+interface SampleProject {
+  name: string;
+  slug: string;
+  summary: string;
+  description: string;
+  status: ProjectStatus;
+  priority: number;
+  progress: number;
+  accent: string;
+  tags: string[];
+  favorite: boolean;
+  notes: SampleNote[];
+}
+
+/**
+ * Legt ein paar Beispielprojekte an, damit das Dashboard nach dem ersten
+ * Start nicht leer ist. Idempotent: bereits vorhandene Slugs werden
+ * uebersprungen.
+ */
+async function main() {
+  const samples: SampleProject[] = [
+    {
+      name: "Nebula",
+      slug: "nebula",
+      summary: "Dieses Dashboard – Uebersicht ueber alle Vibe-Coding Projekte.",
+      description:
+        "Meta: Nebula verwaltet sich selbst. Notizen, Status und Git-Infos an einem Ort.",
+      status: ProjectStatus.IN_DEVELOPMENT,
+      priority: 3,
+      progress: 65,
+      accent: "violet",
+      tags: ["next.js", "prisma", "dashboard"],
+      favorite: true,
+      notes: [
+        {
+          title: "Naechste Schritte",
+          content:
+            "- Kanban-Ansicht ergaenzen\n- Webhook-Endpoint fuer Push-Events\n- Export als Markdown",
+          pinned: true,
+        },
+      ],
+    },
+    {
+      name: "Synthwave CLI",
+      slug: "synthwave-cli",
+      summary: "Terminal-Tool, das Projektgeruest inkl. CI in Sekunden erzeugt.",
+      description:
+        "Idee: ein `npx synthwave init` das Repo, Lint, Tests, Container und Pipeline vorkonfiguriert.",
+      status: ProjectStatus.PLANNING,
+      priority: 2,
+      progress: 15,
+      accent: "cyan",
+      tags: ["cli", "typescript", "dx"],
+      favorite: false,
+      notes: [
+        {
+          title: null,
+          content: "Konkurrenz pruefen: create-t3-app, degit, plop.",
+          pinned: false,
+        },
+      ],
+    },
+    {
+      name: "Pixelgarten",
+      slug: "pixelgarten",
+      summary: "Browser-Spiel: ein Garten, der aus Commit-Aktivitaet waechst.",
+      description:
+        "Rohe Idee. Jeder Commit pflanzt eine Pflanze, Streaks lassen sie bluehen.",
+      status: ProjectStatus.IDEA,
+      priority: 1,
+      progress: 0,
+      accent: "emerald",
+      tags: ["spiel", "canvas", "fun"],
+      favorite: false,
+      notes: [],
+    },
+  ];
+
+  for (const sample of samples) {
+    const existing = await prisma.project.findUnique({
+      where: { slug: sample.slug },
+    });
+    if (existing) {
+      console.log(`  · uebersprungen (existiert): ${sample.slug}`);
+      continue;
+    }
+
+    const { notes, ...project } = sample;
+    await prisma.project.create({
+      data: {
+        ...project,
+        notes: notes.length ? { create: notes } : undefined,
+      },
+    });
+    console.log(`  ✓ angelegt: ${sample.slug}`);
+  }
+}
+
+main()
+  .then(async () => {
+    console.log("Seed abgeschlossen.");
+    await prisma.$disconnect();
+  })
+  .catch(async (error) => {
+    console.error("Seed fehlgeschlagen:", error);
+    await prisma.$disconnect();
+    process.exit(1);
+  });

scripts/setup.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+/**
+ * Nebula – Ersteinrichtung.
+ *
+ * Legt eine .env auf Basis von .env.example an und erzeugt dabei einen
+ * zufaelligen APP_SECRET. Vorhandene .env-Dateien werden nicht angefasst.
+ *
+ *   node scripts/setup.mjs        bzw.   npm run setup
+ */
+
+import { randomBytes } from "node:crypto";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const envPath = join(root, ".env");
+const examplePath = join(root, ".env.example");
+
+const c = {
+  reset: "",
+  dim: "",
+  green: "",
+  yellow: "",
+  cyan: "",
+};
+
+function log(message) {
+  console.log(message);
+}
+
+if (!existsSync(examplePath)) {
+  console.error(`${c.yellow}.env.example nicht gefunden – abgebrochen.${c.reset}`);
+  process.exit(1);
+}
+
+if (existsSync(envPath)) {
+  log(`${c.yellow}·${c.reset} .env existiert bereits – sie wird nicht ueberschrieben.`);
+} else {
+  const secret = randomBytes(32).toString("base64");
+  const content = readFileSync(examplePath, "utf8").replace(
+    /^APP_SECRET=.*$/m,
+    `APP_SECRET="${secret}"`,
+  );
+  writeFileSync(envPath, content, "utf8");
+  log(`${c.green}✓${c.reset} .env angelegt (APP_SECRET wurde zufaellig erzeugt).`);
+}
+
+log("");
+log(`${c.cyan}Naechste Schritte${c.reset}`);
+log(`${c.dim}─────────────────────────────────────────────${c.reset}`);
+log("Standalone (App lokal, Datenbank im Container):");
+log(`  ${c.dim}1.${c.reset} docker compose up -d db`);
+log(`  ${c.dim}2.${c.reset} npm install`);
+log(`  ${c.dim}3.${c.reset} npm run db:migrate`);
+log(`  ${c.dim}4.${c.reset} npm run db:seed        ${c.dim}(optional, Beispieldaten)${c.reset}`);
+log(`  ${c.dim}5.${c.reset} npm run dev            ${c.dim}→ http://localhost:3000${c.reset}`);
+log("");
+log("Alles in Docker:");
+log(`  ${c.dim}1.${c.reset} docker compose --profile full up -d --build`);
+log(`  ${c.dim}2.${c.reset} ${c.dim}→ http://localhost:3000${c.reset}`);
+log("");
+log("Eigene, bereits laufende PostgreSQL:");
+log(`  DATABASE_URL in der .env anpassen, dann npm run db:migrate`);
+log("");

src/app/api/connections/[id]/check/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { clientForConnection } from "@/lib/git";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+/** Testet Erreichbarkeit und Token einer Verbindung und merkt sich das Ergebnis. */
+export async function POST(_request: Request, { params }: Params) {
+  const { id } = await params;
+
+  const connection = await prisma.gitConnection.findUnique({ where: { id } });
+  if (!connection) {
+    return NextResponse.json({ error: "Verbindung nicht gefunden" }, { status: 404 });
+  }
+
+  const result = await clientForConnection(connection).check();
+
+  await prisma.gitConnection.update({
+    where: { id },
+    data: {
+      lastCheckedAt: new Date(),
+      lastCheckOk: result.ok,
+      lastCheckMessage: result.message,
+      username: result.user ?? connection.username,
+    },
+  });
+
+  return NextResponse.json(result, { status: result.ok ? 200 : 502 });
+}

src/app/api/connections/[id]/repos/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { clientForConnection } from "@/lib/git";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+/** Listet Repositories, auf die der hinterlegte Token Zugriff hat. */
+export async function GET(request: Request, { params }: Params) {
+  const { id } = await params;
+  const query = new URL(request.url).searchParams.get("q") ?? undefined;
+
+  const connection = await prisma.gitConnection.findUnique({ where: { id } });
+  if (!connection) {
+    return NextResponse.json({ error: "Verbindung nicht gefunden" }, { status: 404 });
+  }
+
+  try {
+    const repos = await clientForConnection(connection).listRepos(query);
+    return NextResponse.json({ repos });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : String(error) },
+      { status: 502 },
+    );
+  }
+}

src/app/api/connections/[id]/route.ts

@@ -0,0 +1,76 @@
+import { NextResponse } from "next/server";
+import { encryptSecret, tokenHint } from "@/lib/crypto";
+import { prisma } from "@/lib/db";
+import { normalizeBaseUrl } from "@/lib/git/http";
+import { connectionSafeSelect } from "@/lib/projects";
+import { connectionUpdateSchema, formatZodError } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+const safeSelect = {
+  ...connectionSafeSelect,
+  _count: { select: { projects: true } },
+};
+
+export async function PATCH(request: Request, { params }: Params) {
+  const { id } = await params;
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
+  }
+
+  const parsed = connectionUpdateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const data = parsed.data;
+  const update: Record<string, unknown> = {};
+  if (data.name !== undefined) update.name = data.name;
+  if (data.provider !== undefined) update.provider = data.provider;
+  if (data.baseUrl !== undefined) update.baseUrl = normalizeBaseUrl(data.baseUrl);
+  if (data.username !== undefined) update.username = data.username;
+
+  // token === null  -> Token entfernen
+  // token === ""    -> vom Schema zu null normalisiert
+  // token undefined -> unveraendert lassen
+  if (data.token !== undefined) {
+    if (data.token) {
+      update.tokenCipher = encryptSecret(data.token);
+      update.tokenHint = tokenHint(data.token);
+    } else {
+      update.tokenCipher = null;
+      update.tokenHint = null;
+    }
+  }
+
+  try {
+    const connection = await prisma.gitConnection.update({
+      where: { id },
+      data: update,
+      select: safeSelect,
+    });
+    return NextResponse.json({ connection });
+  } catch {
+    return NextResponse.json({ error: "Verbindung nicht gefunden oder Name vergeben" }, { status: 404 });
+  }
+}
+
+export async function DELETE(_request: Request, { params }: Params) {
+  const { id } = await params;
+  try {
+    // Projekte bleiben erhalten, connectionId wird per onDelete: SetNull geleert.
+    await prisma.gitConnection.delete({ where: { id } });
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Verbindung nicht gefunden" }, { status: 404 });
+  }
+}

src/app/api/connections/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from "next/server";
+import { encryptSecret, tokenHint } from "@/lib/crypto";
+import { prisma } from "@/lib/db";
+import { normalizeBaseUrl } from "@/lib/git/http";
+import { connectionSafeSelect } from "@/lib/projects";
+import { connectionCreateSchema, formatZodError } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+/** Verbindungen ohne Token-Chiffrat – das verlaesst den Server nie. */
+const safeSelect = {
+  ...connectionSafeSelect,
+  _count: { select: { projects: true } },
+};
+
+export async function GET() {
+  const connections = await prisma.gitConnection.findMany({
+    select: safeSelect,
+    orderBy: { name: "asc" },
+  });
+  return NextResponse.json({ connections });
+}
+
+export async function POST(request: Request) {
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
+  }
+
+  const parsed = connectionCreateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const { name, provider, baseUrl, username, token } = parsed.data;
+
+  const duplicate = await prisma.gitConnection.findUnique({ where: { name } });
+  if (duplicate) {
+    return NextResponse.json(
+      { error: "Es gibt bereits eine Verbindung mit diesem Namen.", fields: { name: "Name bereits vergeben" } },
+      { status: 409 },
+    );
+  }
+
+  const connection = await prisma.gitConnection.create({
+    data: {
+      name,
+      provider,
+      baseUrl: normalizeBaseUrl(baseUrl),
+      username: username ?? null,
+      tokenCipher: token ? encryptSecret(token) : null,
+      tokenHint: token ? tokenHint(token) : null,
+    },
+    select: safeSelect,
+  });
+
+  return NextResponse.json({ connection }, { status: 201 });
+}

src/app/api/health/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+
+export const dynamic = "force-dynamic";
+
+/** Liveness/Readiness-Endpoint – wird auch vom Docker-Healthcheck benutzt. */
+export async function GET() {
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+    return NextResponse.json({
+      status: "ok",
+      database: "up",
+      time: new Date().toISOString(),
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        status: "degraded",
+        database: "down",
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 503 },
+    );
+  }
+}

src/app/api/notes/[id]/route.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { formatZodError, noteUpdateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, { params }: Params) {
+  const { id } = await params;
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
+  }
+
+  const parsed = noteUpdateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  try {
+    const note = await prisma.note.update({
+      where: { id },
+      data: {
+        ...(parsed.data.title !== undefined ? { title: parsed.data.title } : {}),
+        ...(parsed.data.content !== undefined ? { content: parsed.data.content } : {}),
+        ...(parsed.data.pinned !== undefined ? { pinned: parsed.data.pinned } : {}),
+      },
+    });
+    return NextResponse.json({ note });
+  } catch {
+    return NextResponse.json({ error: "Notiz nicht gefunden" }, { status: 404 });
+  }
+}
+
+export async function DELETE(_request: Request, { params }: Params) {
+  const { id } = await params;
+  try {
+    await prisma.note.delete({ where: { id } });
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Notiz nicht gefunden" }, { status: 404 });
+  }
+}

src/app/api/projects/[id]/notes/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { formatZodError, noteCreateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function GET(_request: Request, { params }: Params) {
+  const { id } = await params;
+  const notes = await prisma.note.findMany({
+    where: { projectId: id },
+    orderBy: [{ pinned: "desc" }, { updatedAt: "desc" }],
+  });
+  return NextResponse.json({ notes });
+}
+
+export async function POST(request: Request, { params }: Params) {
+  const { id } = await params;
+
+  const project = await prisma.project.findUnique({ where: { id }, select: { id: true } });
+  if (!project) {
+    return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
+  }
+
+  const parsed = noteCreateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const note = await prisma.note.create({
+    data: {
+      projectId: id,
+      title: parsed.data.title ?? null,
+      content: parsed.data.content,
+      pinned: parsed.data.pinned,
+    },
+  });
+
+  // Projekt "anfassen", damit die Sortierung nach Aktivitaet stimmt.
+  await prisma.project.update({ where: { id }, data: { updatedAt: new Date() } });
+
+  return NextResponse.json({ note }, { status: 201 });
+}

src/app/api/projects/[id]/route.ts

@@ -0,0 +1,89 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { parseRepoUrl } from "@/lib/git";
+import { projectDetailInclude, projectListInclude, uniqueSlug } from "@/lib/projects";
+import { formatZodError, projectUpdateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function GET(_request: Request, { params }: Params) {
+  const { id } = await params;
+  const project = await prisma.project.findUnique({
+    where: { id },
+    include: projectDetailInclude,
+  });
+
+  if (!project) {
+    return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
+  }
+  return NextResponse.json({ project });
+}
+
+export async function PATCH(request: Request, { params }: Params) {
+  const { id } = await params;
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
+  }
+
+  const parsed = projectUpdateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const existing = await prisma.project.findUnique({ where: { id } });
+  if (!existing) {
+    return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
+  }
+
+  const data = parsed.data;
+  const update: Record<string, unknown> = {};
+
+  if (data.name !== undefined && data.name !== existing.name) {
+    update.name = data.name;
+    update.slug = await uniqueSlug(data.name, id);
+  }
+  for (const key of ["summary", "description", "status", "priority", "progress", "accent", "tags", "favorite", "connectionId"] as const) {
+    if (data[key] !== undefined) update[key] = data[key];
+  }
+
+  if (data.repoUrl !== undefined) {
+    update.repoUrl = data.repoUrl;
+    const parsedUrl = data.repoUrl ? parseRepoUrl(data.repoUrl) : null;
+    if (parsedUrl) {
+      update.repoOwner = data.repoOwner ?? parsedUrl.owner;
+      update.repoName = data.repoName ?? parsedUrl.name;
+    } else if (!data.repoUrl) {
+      update.repoOwner = null;
+      update.repoName = null;
+    }
+  }
+  if (data.repoOwner !== undefined) update.repoOwner = data.repoOwner;
+  if (data.repoName !== undefined) update.repoName = data.repoName;
+
+  const project = await prisma.project.update({
+    where: { id },
+    data: update,
+    include: projectListInclude,
+  });
+
+  return NextResponse.json({ project });
+}
+
+export async function DELETE(_request: Request, { params }: Params) {
+  const { id } = await params;
+  try {
+    await prisma.project.delete({ where: { id } });
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: "Projekt nicht gefunden" }, { status: 404 });
+  }
+}

src/app/api/projects/[id]/sync/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { projectDetailInclude } from "@/lib/projects";
+import { syncProject } from "@/lib/sync";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+/** Holt Branches, Tags, Commits und Releases beim Git-System ab. */
+export async function POST(_request: Request, { params }: Params) {
+  const { id } = await params;
+  const result = await syncProject(id);
+
+  const project = await prisma.project.findUnique({
+    where: { id },
+    include: projectDetailInclude,
+  });
+
+  return NextResponse.json({ ...result, project }, { status: result.ok ? 200 : 502 });
+}

src/app/api/projects/route.ts

@@ -0,0 +1,84 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { parseRepoUrl } from "@/lib/git";
+import { projectListInclude, uniqueSlug } from "@/lib/projects";
+import { formatZodError, projectCreateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const status = searchParams.get("status");
+  const query = searchParams.get("q");
+
+  const projects = await prisma.project.findMany({
+    where: {
+      ...(status ? { status: status as never } : {}),
+      ...(query
+        ? {
+            OR: [
+              { name: { contains: query, mode: "insensitive" as const } },
+              { summary: { contains: query, mode: "insensitive" as const } },
+              { tags: { has: query.toLowerCase() } },
+            ],
+          }
+        : {}),
+    },
+    include: projectListInclude,
+    orderBy: [{ favorite: "desc" }, { updatedAt: "desc" }],
+  });
+
+  return NextResponse.json({ projects });
+}
+
+export async function POST(request: Request) {
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Ungueltiger JSON-Body" }, { status: 400 });
+  }
+
+  const parsed = projectCreateSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const data = parsed.data;
+
+  // Owner/Name aus der URL ableiten, falls nicht explizit angegeben.
+  let repoOwner = data.repoOwner ?? null;
+  let repoName = data.repoName ?? null;
+  if (data.repoUrl && (!repoOwner || !repoName)) {
+    const parsedUrl = parseRepoUrl(data.repoUrl);
+    if (parsedUrl) {
+      repoOwner = repoOwner ?? parsedUrl.owner;
+      repoName = repoName ?? parsedUrl.name;
+    }
+  }
+
+  const project = await prisma.project.create({
+    data: {
+      name: data.name,
+      slug: await uniqueSlug(data.name),
+      summary: data.summary ?? null,
+      description: data.description ?? null,
+      status: data.status,
+      priority: data.priority,
+      progress: data.progress,
+      accent: data.accent,
+      tags: data.tags,
+      favorite: data.favorite,
+      repoUrl: data.repoUrl ?? null,
+      repoOwner,
+      repoName,
+      connectionId: data.connectionId ?? null,
+    },
+    include: projectListInclude,
+  });
+
+  return NextResponse.json({ project }, { status: 201 });
+}

src/app/connections/page.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { ConnectionsManager } from "@/components/ConnectionsManager";
+import { prisma } from "@/lib/db";
+import { connectionSafeSelect } from "@/lib/projects";
+import type { ConnectionWithCount } from "@/types";
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = {
+  title: "Git-Verbindungen",
+  description: "GitHub, GitLab und Gitea mit Nebula verbinden.",
+};
+
+export default async function ConnectionsPage() {
+  const connections = await prisma.gitConnection.findMany({
+    select: { ...connectionSafeSelect, _count: { select: { projects: true } } },
+    orderBy: { name: "asc" },
+  });
+
+  return (
+    <div className="pt-4">
+      <ConnectionsManager connections={connections as unknown as ConnectionWithCount[]} />
+    </div>
+  );
+}

src/app/error.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle, RotateCcw } from "lucide-react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const isDbError =
+    /database|prisma|ECONNREFUSED|P1001|does not exist/i.test(error.message ?? "");
+
+  return (
+    <div className="glass fade-up mx-auto mt-16 max-w-2xl px-6 py-14">
+      <span className="grid h-12 w-12 place-items-center rounded-2xl bg-rose-500/15 text-rose-300">
+        <AlertTriangle className="h-6 w-6" />
+      </span>
+      <h1 className="mt-4 text-xl font-semibold text-white">Da ist etwas schiefgelaufen</h1>
+      <p className="mt-2 text-sm text-slate-400">{error.message}</p>
+
+      {isDbError ? (
+        <div className="mt-5 rounded-xl border border-white/8 bg-black/30 p-4 text-sm text-slate-400">
+          <p className="font-medium text-slate-200">Sieht nach einem Datenbankproblem aus.</p>
+          <ol className="mt-2 list-decimal space-y-1 pl-5 text-xs">
+            <li>
+              Laeuft PostgreSQL? <code className="text-violet-300">docker compose up -d db</code>
+            </li>
+            <li>
+              Stimmt <code className="text-violet-300">DATABASE_URL</code> in der{" "}
+              <code className="text-violet-300">.env</code>?
+            </li>
+            <li>
+              Migrationen eingespielt? <code className="text-violet-300">npm run db:migrate</code>
+            </li>
+          </ol>
+        </div>
+      ) : null}
+
+      <button type="button" className="btn btn-primary mt-6" onClick={reset}>
+        <RotateCcw className="h-4 w-4" />
+        Erneut versuchen
+      </button>
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,365 @@
+@import "tailwindcss";
+
+/* ─────────────────────────────────────────────────────────────
+   Nebula – Designsystem
+   Dark Glassmorphism mit Neon-Akzenten.
+   ───────────────────────────────────────────────────────────── */
+
+@theme {
+  --color-void: #05060f;
+  --color-void-soft: #0a0c1a;
+  --color-haze: #12142b;
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+
+  --radius-card: 1.25rem;
+}
+
+:root {
+  color-scheme: dark;
+  --glass-bg: rgba(255, 255, 255, 0.035);
+  --glass-border: rgba(255, 255, 255, 0.09);
+  --glass-highlight: rgba(255, 255, 255, 0.16);
+}
+
+* {
+  border-color: var(--glass-border);
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  background-color: var(--color-void);
+  color: #e6e8f5;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+}
+
+/* ── Hintergrund: langsam driftende Nebel ───────────────────── */
+
+.aurora {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.aurora::after {
+  /* feines Rauschen, damit die Verlaeufe nicht bandieren */
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.35;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  background-size: 3px 3px;
+  mix-blend-mode: overlay;
+}
+
+.aurora-blob {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(90px);
+  opacity: 0.5;
+  will-change: transform;
+}
+
+.aurora-blob--one {
+  width: 46rem;
+  height: 46rem;
+  top: -18rem;
+  left: -12rem;
+  background: radial-gradient(circle at 30% 30%, #7c3aed, transparent 65%);
+  animation: drift-a 26s ease-in-out infinite alternate;
+}
+
+.aurora-blob--two {
+  width: 40rem;
+  height: 40rem;
+  top: -10rem;
+  right: -14rem;
+  background: radial-gradient(circle at 60% 40%, #0ea5e9, transparent 65%);
+  animation: drift-b 32s ease-in-out infinite alternate;
+}
+
+.aurora-blob--three {
+  width: 38rem;
+  height: 38rem;
+  bottom: -20rem;
+  left: 28%;
+  background: radial-gradient(circle at 50% 50%, #db2777, transparent 68%);
+  animation: drift-c 38s ease-in-out infinite alternate;
+  opacity: 0.35;
+}
+
+.aurora-grid {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
+}
+
+@keyframes drift-a {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
+}
+@keyframes drift-b {
+  from { transform: translate3d(0, 0, 0) scale(1.05); }
+  to { transform: translate3d(-7rem, 5rem, 0) scale(0.95); }
+}
+@keyframes drift-c {
+  from { transform: translate3d(0, 0, 0) scale(0.95); }
+  to { transform: translate3d(4rem, -6rem, 0) scale(1.1); }
+}
+
+/* ── Glasflaechen ───────────────────────────────────────────── */
+
+.glass {
+  position: relative;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(18px) saturate(140%);
+  -webkit-backdrop-filter: blur(18px) saturate(140%);
+  border-radius: var(--radius-card);
+  box-shadow:
+    0 1px 0 0 var(--glass-highlight) inset,
+    0 24px 60px -30px rgba(0, 0, 0, 0.9);
+}
+
+.glass-soft {
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 0.9rem;
+}
+
+/* Karte mit Akzent-Glow. --accent-from/--accent-to setzt die Komponente. */
+.card-glow {
+  transition:
+    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.35s ease,
+    border-color 0.35s ease;
+}
+
+.card-glow::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--accent-from, #8b5cf6), var(--accent-to, #d946ef));
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  pointer-events: none;
+}
+
+.card-glow:hover {
+  transform: translateY(-4px);
+  box-shadow:
+    0 1px 0 0 var(--glass-highlight) inset,
+    0 30px 70px -30px rgba(0, 0, 0, 0.95),
+    0 0 46px -12px var(--accent-from, #8b5cf6);
+}
+
+.card-glow:hover::before {
+  opacity: 0.85;
+}
+
+/* ── Text & Akzente ─────────────────────────────────────────── */
+
+.text-gradient {
+  background: linear-gradient(120deg, #c4b5fd 0%, #67e8f9 45%, #f0abfc 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.accent-bar {
+  background: linear-gradient(90deg, var(--accent-from, #8b5cf6), var(--accent-to, #d946ef));
+}
+
+.accent-dot {
+  box-shadow: 0 0 12px 1px currentColor;
+}
+
+/* ── Buttons ────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.55rem 1rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(120deg, #7c3aed, #c026d3);
+  color: #fff;
+  box-shadow: 0 10px 30px -12px rgba(168, 85, 247, 0.9);
+}
+
+.btn-primary:hover:not(:disabled) {
+  filter: brightness(1.12);
+  box-shadow: 0 14px 36px -12px rgba(168, 85, 247, 1);
+}
+
+.btn-ghost {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #cbd5f5;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.09);
+  color: #fff;
+}
+
+.btn-danger {
+  background: rgba(244, 63, 94, 0.12);
+  border-color: rgba(244, 63, 94, 0.35);
+  color: #fda4af;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(244, 63, 94, 0.22);
+  color: #fff;
+}
+
+/* ── Formularfelder ─────────────────────────────────────────── */
+
+.field {
+  width: 100%;
+  border-radius: 0.75rem;
+  background: rgba(8, 10, 24, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  padding: 0.6rem 0.85rem;
+  font-size: 0.875rem;
+  color: #e6e8f5;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.field::placeholder {
+  color: rgba(148, 163, 184, 0.6);
+}
+
+.field:focus {
+  outline: none;
+  border-color: rgba(167, 139, 250, 0.6);
+  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
+}
+
+.field-label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(148, 163, 184, 0.85);
+  margin-bottom: 0.4rem;
+}
+
+select.field option {
+  background: #0a0c1a;
+  color: #e6e8f5;
+}
+
+/* ── Sonstiges ──────────────────────────────────────────────── */
+
+.shimmer {
+  background: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2.2s linear infinite;
+}
+
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+.fade-up {
+  animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.pulse-ring {
+  animation: pulse-ring 2.4s ease-out infinite;
+}
+
+@keyframes pulse-ring {
+  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.7; }
+  70% { box-shadow: 0 0 0 8px transparent; opacity: 0; }
+  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.22);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(167, 139, 250, 0.5);
+  background-clip: content-box;
+}
+
+::selection {
+  background: rgba(139, 92, 246, 0.35);
+  color: #fff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

src/app/icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#8b5cf6" />
+      <stop offset="55%" stop-color="#d946ef" />
+      <stop offset="100%" stop-color="#22d3ee" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="#05060f" />
+  <circle cx="32" cy="32" r="17" fill="url(#g)" opacity="0.9" />
+  <circle cx="32" cy="32" r="17" fill="none" stroke="#ffffff" stroke-opacity="0.25" stroke-width="1.5" />
+  <circle cx="46" cy="18" r="3" fill="#ffffff" opacity="0.9" />
+  <circle cx="16" cy="44" r="2" fill="#ffffff" opacity="0.7" />
+  <circle cx="20" cy="18" r="1.5" fill="#ffffff" opacity="0.55" />
+</svg>

src/app/layout.tsx

@@ -0,0 +1,51 @@
+import type { Metadata, Viewport } from "next";
+import { TopNav } from "@/components/TopNav";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: {
+    default: "Nebula – Vibe Coding Dashboard",
+    template: "%s · Nebula",
+  },
+  description:
+    "Uebersicht ueber alle Vibe-Coding Projekte: Status, Notizen und Live-Daten aus GitHub, GitLab und Gitea.",
+  applicationName: "Nebula",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#05060f",
+  width: "device-width",
+  initialScale: 1,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="de" suppressHydrationWarning>
+      <body className="min-h-screen antialiased">
+        <div className="aurora" aria-hidden="true">
+          <div className="aurora-blob aurora-blob--one" />
+          <div className="aurora-blob aurora-blob--two" />
+          <div className="aurora-blob aurora-blob--three" />
+        </div>
+        <div className="aurora-grid" aria-hidden="true" />
+
+        <TopNav />
+
+        <main className="mx-auto w-full max-w-[1400px] px-4 pb-24 pt-6 sm:px-6 lg:px-8">
+          {children}
+        </main>
+
+        <footer className="mx-auto w-full max-w-[1400px] px-4 pb-10 text-xs text-slate-500 sm:px-6 lg:px-8">
+          <div className="flex flex-wrap items-center justify-between gap-2 border-t border-white/5 pt-6">
+            <span>
+              Nebula · lokal betrieben, Daten bleiben in deiner PostgreSQL.
+            </span>
+            <span className="font-mono text-slate-600">v0.1.0</span>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import { Compass } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="glass fade-up mx-auto mt-16 max-w-lg px-6 py-16 text-center">
+      <span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
+        <Compass className="h-6 w-6" />
+      </span>
+      <h1 className="mt-4 text-2xl font-semibold text-white">Nichts gefunden</h1>
+      <p className="mt-2 text-sm text-slate-400">
+        Diese Seite existiert nicht (mehr). Vielleicht wurde das Projekt geloescht.
+      </p>
+      <Link href="/" className="btn btn-primary mt-6">
+        Zurueck zum Dashboard
+      </Link>
+    </div>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,94 @@
+import { CircleDot, GitBranch, Lightbulb, Rocket, Trophy } from "lucide-react";
+import { ProjectBoard } from "@/components/ProjectBoard";
+import { StatCard } from "@/components/StatCard";
+import { prisma } from "@/lib/db";
+import { connectionSafeSelect, projectListInclude } from "@/lib/projects";
+import { STATUS_META } from "@/lib/status";
+import type { ConnectionSafe, ProjectListItem } from "@/types";
+
+export const dynamic = "force-dynamic";
+
+export default async function DashboardPage() {
+  const [projects, connections] = await Promise.all([
+    prisma.project.findMany({
+      include: projectListInclude,
+      orderBy: [{ favorite: "desc" }, { updatedAt: "desc" }],
+    }),
+    prisma.gitConnection.findMany({
+      select: connectionSafeSelect,
+      orderBy: { name: "asc" },
+    }),
+  ]);
+
+  const active = projects.filter((project) => project.status !== "ARCHIVED");
+  const ideas = active.filter((project) => project.status === "IDEA").length;
+  const inDev = active.filter((project) => project.status === "IN_DEVELOPMENT").length;
+  const done = active.filter((project) => project.status === "DONE").length;
+  const linked = active.filter((project) => Boolean(project.repoOwner && project.repoName)).length;
+
+  const averageProgress =
+    active.length > 0
+      ? Math.round(active.reduce((sum, project) => sum + project.progress, 0) / active.length)
+      : 0;
+
+  return (
+    <div className="space-y-6">
+      <header className="fade-up pt-4">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-violet-300/70">
+          Vibe Coding Kontrollzentrum
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight text-white sm:text-4xl">
+          Deine Projekte auf{" "}
+          <span className="text-gradient">einen Blick</span>
+        </h1>
+        <p className="mt-2 max-w-2xl text-sm text-slate-400">
+          Ideen festhalten, Status pflegen, Notizen sammeln – und live sehen, was in den
+          verknuepften Repositories bei GitHub, GitLab und Gitea passiert.
+        </p>
+      </header>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+        <StatCard
+          label="Projekte"
+          value={active.length}
+          hint={`Ø Fortschritt ${averageProgress}%`}
+          icon={CircleDot}
+          color="#a78bfa"
+        />
+        <StatCard
+          label="Ideen"
+          value={ideas}
+          hint={STATUS_META.IDEA.description}
+          icon={Lightbulb}
+          color={STATUS_META.IDEA.color}
+        />
+        <StatCard
+          label="In Entwicklung"
+          value={inDev}
+          hint="Aktiv in Arbeit"
+          icon={Rocket}
+          color={STATUS_META.IN_DEVELOPMENT.color}
+        />
+        <StatCard
+          label="Fertig"
+          value={done}
+          hint="Ausgeliefert"
+          icon={Trophy}
+          color={STATUS_META.DONE.color}
+        />
+        <StatCard
+          label="Repos verknuepft"
+          value={linked}
+          hint={`${connections.length} Git-Verbindung${connections.length === 1 ? "" : "en"}`}
+          icon={GitBranch}
+          color="#38bdf8"
+        />
+      </div>
+
+      <ProjectBoard
+        projects={projects as unknown as ProjectListItem[]}
+        connections={connections as unknown as ConnectionSafe[]}
+      />
+    </div>
+  );
+}

src/app/projects/[id]/page.tsx

@@ -0,0 +1,73 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { FileText } from "lucide-react";
+import { GitPanel } from "@/components/GitPanel";
+import { NotesPanel } from "@/components/NotesPanel";
+import { ProjectHeader } from "@/components/ProjectHeader";
+import { prisma } from "@/lib/db";
+import { connectionSafeSelect, projectDetailInclude } from "@/lib/projects";
+import type { ConnectionSafe, ProjectDetail } from "@/types";
+
+export const dynamic = "force-dynamic";
+
+type PageProps = { params: Promise<{ id: string }> };
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  const project = await prisma.project.findUnique({
+    where: { id },
+    select: { name: true, summary: true },
+  });
+  return {
+    title: project?.name ?? "Projekt",
+    description: project?.summary ?? undefined,
+  };
+}
+
+export default async function ProjectPage({ params }: PageProps) {
+  const { id } = await params;
+
+  const [project, connections] = await Promise.all([
+    prisma.project.findUnique({ where: { id }, include: projectDetailInclude }),
+    prisma.gitConnection.findMany({ select: connectionSafeSelect, orderBy: { name: "asc" } }),
+  ]);
+
+  if (!project) notFound();
+
+  const detail = project as unknown as ProjectDetail;
+
+  return (
+    <div className="space-y-6 pt-4">
+      <ProjectHeader
+        project={detail}
+        connections={connections as unknown as ConnectionSafe[]}
+      />
+
+      <div className="grid gap-6 lg:grid-cols-12">
+        <div className="space-y-6 lg:col-span-5">
+          <section className="glass p-5">
+            <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-300">
+              <FileText className="h-4 w-4 text-cyan-300" />
+              Beschreibung
+            </h2>
+            {detail.description ? (
+              <p className="mt-3 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
+                {detail.description}
+              </p>
+            ) : (
+              <p className="mt-3 text-sm text-slate-500">
+                Keine Beschreibung hinterlegt. Ueber „Bearbeiten“ kannst du die Idee ausformulieren.
+              </p>
+            )}
+          </section>
+
+          <NotesPanel projectId={detail.id} notes={detail.notes} />
+        </div>
+
+        <div className="lg:col-span-7">
+          <GitPanel project={detail} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ConnectionsManager.tsx

@@ -0,0 +1,447 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  CheckCircle2,
+  ExternalLink,
+  KeyRound,
+  Loader2,
+  Pencil,
+  Plug,
+  Plus,
+  Trash2,
+  XCircle,
+  Zap,
+} from "lucide-react";
+import type { GitProvider } from "@prisma/client";
+import { Modal } from "@/components/ui/Modal";
+import { PROVIDER_META } from "@/lib/git/meta";
+import { cn, formatRelative } from "@/lib/utils";
+import type { ConnectionWithCount } from "@/types";
+
+const PROVIDERS: GitProvider[] = ["GITHUB", "GITLAB", "GITEA"];
+
+interface FormState {
+  name: string;
+  provider: GitProvider;
+  baseUrl: string;
+  username: string;
+  token: string;
+}
+
+const EMPTY: FormState = {
+  name: "",
+  provider: "GITHUB",
+  baseUrl: PROVIDER_META.GITHUB.defaultBaseUrl,
+  username: "",
+  token: "",
+};
+
+export function ConnectionsManager({ connections }: { connections: ConnectionWithCount[] }) {
+  const router = useRouter();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<ConnectionWithCount | null>(null);
+  const [form, setForm] = useState<FormState>(EMPTY);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [checkResult, setCheckResult] = useState<Record<string, { ok: boolean; message: string }>>({});
+
+  function openCreate() {
+    setEditing(null);
+    setForm(EMPTY);
+    setError(null);
+    setDialogOpen(true);
+  }
+
+  function openEdit(connection: ConnectionWithCount) {
+    setEditing(connection);
+    setForm({
+      name: connection.name,
+      provider: connection.provider,
+      baseUrl: connection.baseUrl,
+      username: connection.username ?? "",
+      token: "",
+    });
+    setError(null);
+    setDialogOpen(true);
+  }
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((previous) => {
+      if (key === "provider") {
+        const provider = value as GitProvider;
+        const wasDefault = Object.values(PROVIDER_META).some(
+          (meta) => meta.defaultBaseUrl === previous.baseUrl,
+        );
+        return {
+          ...previous,
+          provider,
+          baseUrl: wasDefault || !previous.baseUrl
+            ? PROVIDER_META[provider].defaultBaseUrl
+            : previous.baseUrl,
+        };
+      }
+      return { ...previous, [key]: value };
+    });
+  }
+
+  async function save(event: React.FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setError(null);
+
+    // Beim Bearbeiten bedeutet ein leeres Token-Feld "unveraendert lassen".
+    const body: Record<string, unknown> = {
+      name: form.name,
+      provider: form.provider,
+      baseUrl: form.baseUrl,
+      username: form.username,
+    };
+    if (!editing || form.token.trim()) body.token = form.token;
+
+    try {
+      const response = await fetch(
+        editing ? `/api/connections/${editing.id}` : "/api/connections",
+        {
+          method: editing ? "PATCH" : "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        },
+      );
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
+      setDialogOpen(false);
+      router.refresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function check(connection: ConnectionWithCount) {
+    setBusyId(connection.id);
+    try {
+      const response = await fetch(`/api/connections/${connection.id}/check`, { method: "POST" });
+      const payload = await response.json().catch(() => ({}));
+      setCheckResult((previous) => ({
+        ...previous,
+        [connection.id]: {
+          ok: Boolean(payload.ok),
+          message: payload.message ?? payload.error ?? "Unbekannte Antwort.",
+        },
+      }));
+      router.refresh();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function remove(connection: ConnectionWithCount) {
+    const linked = connection._count?.projects ?? 0;
+    const hint = linked > 0 ? `\n\n${linked} Projekt(e) verlieren die Verknuepfung.` : "";
+    if (!window.confirm(`Verbindung „${connection.name}“ loeschen?${hint}`)) return;
+    setBusyId(connection.id);
+    await fetch(`/api/connections/${connection.id}`, { method: "DELETE" }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight text-white">Git-Verbindungen</h1>
+          <p className="mt-1 max-w-2xl text-sm text-slate-400">
+            Pro Git-System eine Verbindung mit Basis-URL und Access Token. Tokens werden
+            AES-256-GCM-verschluesselt in der Datenbank abgelegt und verlassen den Server nie.
+          </p>
+        </div>
+        <button type="button" className="btn btn-primary" onClick={openCreate}>
+          <Plus className="h-4 w-4" />
+          Verbindung hinzufuegen
+        </button>
+      </div>
+
+      {connections.length === 0 ? (
+        <div className="glass fade-up flex flex-col items-center gap-4 px-6 py-16 text-center">
+          <span className="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-cyan-500/25 to-violet-500/20 text-cyan-200">
+            <Plug className="h-6 w-6" />
+          </span>
+          <div>
+            <h2 className="text-lg font-semibold text-white">Noch keine Verbindung</h2>
+            <p className="mx-auto mt-1 max-w-md text-sm text-slate-400">
+              Verbinde GitHub, GitLab oder deine eigene Gitea-Instanz, um Branches, Tags,
+              Commits und Releases direkt im Dashboard zu sehen.
+            </p>
+          </div>
+          <button type="button" className="btn btn-primary" onClick={openCreate}>
+            <Plus className="h-4 w-4" />
+            Erste Verbindung anlegen
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {connections.map((connection, index) => {
+            const meta = PROVIDER_META[connection.provider];
+            const result = checkResult[connection.id];
+            const ok = result ? result.ok : connection.lastCheckOk;
+            const message = result?.message ?? connection.lastCheckMessage;
+
+            return (
+              <article
+                key={connection.id}
+                className="glass card-glow fade-up relative p-5"
+                style={
+                  {
+                    "--accent-from": "#22d3ee",
+                    "--accent-to": "#8b5cf6",
+                    animationDelay: `${index * 50}ms`,
+                  } as React.CSSProperties
+                }
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <h2 className="truncate text-base font-semibold text-white">
+                      {connection.name}
+                    </h2>
+                    <p className="mt-0.5 text-xs text-slate-500">{meta.label}</p>
+                  </div>
+                  <span
+                    className={cn(
+                      "inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[11px] ring-1 ring-inset",
+                      ok === true
+                        ? "bg-emerald-500/12 text-emerald-200 ring-emerald-400/30"
+                        : ok === false
+                          ? "bg-rose-500/12 text-rose-200 ring-rose-400/30"
+                          : "bg-slate-500/12 text-slate-300 ring-slate-400/25",
+                    )}
+                  >
+                    {ok === true ? (
+                      <CheckCircle2 className="h-3 w-3" />
+                    ) : ok === false ? (
+                      <XCircle className="h-3 w-3" />
+                    ) : (
+                      <Zap className="h-3 w-3" />
+                    )}
+                    {ok === true ? "verbunden" : ok === false ? "Fehler" : "ungeprueft"}
+                  </span>
+                </div>
+
+                <dl className="mt-4 space-y-2 text-xs">
+                  <div className="flex items-start justify-between gap-3">
+                    <dt className="text-slate-500">Basis-URL</dt>
+                    <dd className="min-w-0 truncate text-right font-mono text-slate-300">
+                      {connection.baseUrl}
+                    </dd>
+                  </div>
+                  <div className="flex items-start justify-between gap-3">
+                    <dt className="text-slate-500">Token</dt>
+                    <dd className="font-mono text-slate-300">
+                      {connection.tokenHint ? (
+                        <span className="inline-flex items-center gap-1.5">
+                          <KeyRound className="h-3 w-3 text-amber-300/70" />
+                          {connection.tokenHint}
+                        </span>
+                      ) : (
+                        <span className="text-slate-600">keines</span>
+                      )}
+                    </dd>
+                  </div>
+                  {connection.username ? (
+                    <div className="flex items-start justify-between gap-3">
+                      <dt className="text-slate-500">Benutzer</dt>
+                      <dd className="truncate text-slate-300">{connection.username}</dd>
+                    </div>
+                  ) : null}
+                  <div className="flex items-start justify-between gap-3">
+                    <dt className="text-slate-500">Projekte</dt>
+                    <dd className="tabular-nums text-slate-300">
+                      {connection._count?.projects ?? 0}
+                    </dd>
+                  </div>
+                  {connection.lastCheckedAt ? (
+                    <div className="flex items-start justify-between gap-3">
+                      <dt className="text-slate-500">Geprueft</dt>
+                      <dd className="text-slate-300" suppressHydrationWarning>
+                        {formatRelative(connection.lastCheckedAt)}
+                      </dd>
+                    </div>
+                  ) : null}
+                </dl>
+
+                {message ? (
+                  <p
+                    className={cn(
+                      "mt-3 rounded-lg px-2.5 py-1.5 text-[11px] leading-snug",
+                      ok ? "bg-emerald-500/8 text-emerald-200/90" : "bg-rose-500/8 text-rose-200/90",
+                    )}
+                  >
+                    {message}
+                  </p>
+                ) : null}
+
+                <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-white/6 pt-3">
+                  <button
+                    type="button"
+                    className="btn btn-ghost px-2.5 py-1.5 text-xs"
+                    onClick={() => check(connection)}
+                    disabled={busyId === connection.id}
+                  >
+                    {busyId === connection.id ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Zap className="h-3.5 w-3.5" />
+                    )}
+                    Testen
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-ghost px-2.5 py-1.5 text-xs"
+                    onClick={() => openEdit(connection)}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                    Bearbeiten
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-danger ml-auto px-2.5 py-1.5 text-xs"
+                    onClick={() => remove(connection)}
+                    disabled={busyId === connection.id}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      )}
+
+      <Modal
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        title={editing ? "Verbindung bearbeiten" : "Neue Git-Verbindung"}
+        description="Der Token wird verschluesselt gespeichert und nur serverseitig entschluesselt."
+      >
+        <form onSubmit={save} className="space-y-4">
+          <div>
+            <span className="field-label">Git-System</span>
+            <div className="grid grid-cols-3 gap-2">
+              {PROVIDERS.map((provider) => (
+                <button
+                  key={provider}
+                  type="button"
+                  onClick={() => update("provider", provider)}
+                  className={cn(
+                    "rounded-xl border px-3 py-2.5 text-sm transition-all",
+                    form.provider === provider
+                      ? "border-violet-400/60 bg-violet-500/12 text-white shadow-[0_0_24px_-10px_rgba(139,92,246,0.9)]"
+                      : "border-white/9 text-slate-400 hover:border-white/20 hover:text-slate-200",
+                  )}
+                >
+                  {PROVIDER_META[provider].label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="field-label" htmlFor="connection-name">
+              Anzeigename *
+            </label>
+            <input
+              id="connection-name"
+              className="field"
+              value={form.name}
+              onChange={(event) => update("name", event.target.value)}
+              placeholder="z. B. Firmen-Gitea"
+              required
+              maxLength={80}
+            />
+          </div>
+
+          <div>
+            <label className="field-label" htmlFor="connection-url">
+              Basis-URL *
+            </label>
+            <input
+              id="connection-url"
+              className="field font-mono text-xs"
+              value={form.baseUrl}
+              onChange={(event) => update("baseUrl", event.target.value)}
+              placeholder="https://git.example.com"
+              required
+            />
+            <p className="mt-1 text-[11px] text-slate-500">
+              Ohne /api – Nebula haengt den API-Pfad selbst an.
+            </p>
+          </div>
+
+          <div>
+            <label className="field-label" htmlFor="connection-token">
+              Access Token {editing ? "(leer lassen = unveraendert)" : ""}
+            </label>
+            <input
+              id="connection-token"
+              className="field font-mono text-xs"
+              type="password"
+              value={form.token}
+              onChange={(event) => update("token", event.target.value)}
+              placeholder={editing ? "••••••••" : "ghp_… / glpat-… / gitea token"}
+              autoComplete="off"
+            />
+            <p className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500">
+              {PROVIDER_META[form.provider].tokenHelp}
+              <a
+                href={PROVIDER_META[form.provider].docsUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1 text-violet-300 hover:text-violet-200"
+              >
+                Doku
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </p>
+          </div>
+
+          <div>
+            <label className="field-label" htmlFor="connection-username">
+              Benutzername (optional)
+            </label>
+            <input
+              id="connection-username"
+              className="field"
+              value={form.username}
+              onChange={(event) => update("username", event.target.value)}
+              placeholder="wird beim Test automatisch gefuellt"
+            />
+          </div>
+
+          {error ? (
+            <p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+              {error}
+            </p>
+          ) : null}
+
+          <div className="flex justify-end gap-2 pt-1">
+            <button
+              type="button"
+              className="btn btn-ghost"
+              onClick={() => setDialogOpen(false)}
+              disabled={saving}
+            >
+              Abbrechen
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              Speichern
+            </button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  );
+}

src/components/GitPanel.tsx

@@ -0,0 +1,476 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  AlertTriangle,
+  ExternalLink,
+  GitBranch,
+  GitCommitHorizontal,
+  GitMerge,
+  GitPullRequest,
+  HardDrive,
+  Loader2,
+  Lock,
+  Package,
+  RefreshCw,
+  ShieldCheck,
+  Star,
+  Tag,
+} from "lucide-react";
+import { asArray, asRecord } from "@/types";
+import type {
+  BranchInfo,
+  CommitInfo,
+  ProjectDetail,
+  ReleaseInfo,
+  TagInfo,
+} from "@/types";
+import { cn, formatDateTime, formatNumber, formatRelative } from "@/lib/utils";
+
+const TABS = [
+  { key: "branches", label: "Branches", icon: GitBranch },
+  { key: "tags", label: "Tags", icon: Tag },
+  { key: "commits", label: "Commits", icon: GitCommitHorizontal },
+  { key: "releases", label: "Releases", icon: Package },
+] as const;
+
+type TabKey = (typeof TABS)[number]["key"];
+
+export function GitPanel({ project }: { project: ProjectDetail }) {
+  const router = useRouter();
+  const [tab, setTab] = useState<TabKey>("branches");
+  const [syncing, setSyncing] = useState(false);
+  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null);
+
+  const snapshot = project.snapshot;
+  const branches = asArray<BranchInfo>(snapshot?.branches);
+  const tags = asArray<TagInfo>(snapshot?.tags);
+  const commits = asArray<CommitInfo>(snapshot?.commits);
+  const releases = asArray<ReleaseInfo>(snapshot?.releases);
+  const languages = asRecord(snapshot?.languages);
+
+  const hasRepo = Boolean(project.repoOwner && project.repoName) || Boolean(project.repoUrl);
+
+  async function sync() {
+    setSyncing(true);
+    setMessage(null);
+    try {
+      const response = await fetch(`/api/projects/${project.id}/sync`, { method: "POST" });
+      const payload = await response.json().catch(() => ({}));
+      setMessage({ ok: response.ok, text: payload.message ?? "Unbekannte Antwort." });
+      router.refresh();
+    } catch (caught) {
+      setMessage({
+        ok: false,
+        text: caught instanceof Error ? caught.message : String(caught),
+      });
+    } finally {
+      setSyncing(false);
+    }
+  }
+
+  if (!hasRepo) {
+    return (
+      <div className="glass px-5 py-10 text-center">
+        <GitBranch className="mx-auto h-8 w-8 text-slate-600" />
+        <h3 className="mt-3 text-sm font-semibold text-slate-200">Kein Repository verknuepft</h3>
+        <p className="mx-auto mt-1 max-w-sm text-sm text-slate-500">
+          Hinterlege im Projekt eine Repository-URL und waehle eine Git-Verbindung, um
+          Branches, Tags, Commits und Releases hier zu sehen.
+        </p>
+      </div>
+    );
+  }
+
+  const languageTotal = Object.values(languages).reduce((sum, value) => sum + value, 0);
+  const topLanguages = Object.entries(languages)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 5);
+
+  return (
+    <div className="space-y-4">
+      {/* Kopf mit Sync */}
+      <div className="glass flex flex-wrap items-center justify-between gap-3 p-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h2 className="truncate font-mono text-sm text-slate-100">
+              {snapshot?.fullName ?? `${project.repoOwner}/${project.repoName}`}
+            </h2>
+            {snapshot?.visibility ? (
+              <span className="inline-flex items-center gap-1 rounded-md bg-white/6 px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-slate-400">
+                {snapshot.visibility === "private" ? (
+                  <Lock className="h-2.5 w-2.5" />
+                ) : (
+                  <ShieldCheck className="h-2.5 w-2.5" />
+                )}
+                {snapshot.visibility}
+              </span>
+            ) : null}
+            {snapshot?.htmlUrl ? (
+              <a
+                href={snapshot.htmlUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="text-slate-500 transition-colors hover:text-violet-300"
+                aria-label="Repository oeffnen"
+              >
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
+            ) : null}
+          </div>
+          <p className="mt-1 text-xs text-slate-500" suppressHydrationWarning>
+            {project.lastSyncedAt
+              ? `Zuletzt synchronisiert ${formatRelative(project.lastSyncedAt)} · ${formatDateTime(project.lastSyncedAt)}`
+              : "Noch nie synchronisiert."}
+          </p>
+        </div>
+
+        <button type="button" className="btn btn-primary" onClick={sync} disabled={syncing}>
+          {syncing ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="h-4 w-4" />
+          )}
+          Jetzt synchronisieren
+        </button>
+      </div>
+
+      {message ? (
+        <p
+          className={cn(
+            "rounded-xl border px-3 py-2 text-sm",
+            message.ok
+              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+              : "border-rose-500/30 bg-rose-500/10 text-rose-200",
+          )}
+        >
+          {message.text}
+        </p>
+      ) : null}
+
+      {project.syncError && !message ? (
+        <p className="flex items-start gap-2 rounded-xl border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>{project.syncError}</span>
+        </p>
+      ) : null}
+
+      {snapshot ? (
+        <>
+          {/* Kennzahlen */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+            <Metric icon={Star} label="Stars" value={formatNumber(snapshot.stars)} />
+            <Metric icon={GitMerge} label="Forks" value={formatNumber(snapshot.forks)} />
+            <Metric
+              icon={GitPullRequest}
+              label="Offene PRs/MRs"
+              value={formatNumber(snapshot.openPullRequests)}
+            />
+            <Metric
+              icon={AlertTriangle}
+              label="Offene Issues"
+              value={formatNumber(snapshot.openIssues)}
+            />
+            <Metric icon={GitBranch} label="Branches" value={formatNumber(snapshot.branchCount)} />
+            <Metric
+              icon={HardDrive}
+              label="Groesse"
+              value={snapshot.sizeKb > 1024 ? `${Math.round(snapshot.sizeKb / 1024)} MB` : `${snapshot.sizeKb} KB`}
+            />
+          </div>
+
+          {/* Letzter Commit + Version */}
+          <div className="grid gap-3 lg:grid-cols-2">
+            <div className="glass p-4">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
+                Letzter Commit
+              </p>
+              {snapshot.lastCommitSha ? (
+                <>
+                  <p className="mt-2 line-clamp-2 text-sm text-slate-200">
+                    {snapshot.lastCommitMessage}
+                  </p>
+                  <p className="mt-2 flex flex-wrap items-center gap-2 text-xs text-slate-500">
+                    <span className="rounded bg-white/6 px-1.5 py-0.5 font-mono text-[11px] text-violet-200">
+                      {snapshot.lastCommitSha.slice(0, 7)}
+                    </span>
+                    <span>{snapshot.lastCommitAuthor ?? "unbekannt"}</span>
+                    <span suppressHydrationWarning>{formatRelative(snapshot.lastCommitAt)}</span>
+                  </p>
+                </>
+              ) : (
+                <p className="mt-2 text-sm text-slate-500">Keine Commit-Daten.</p>
+              )}
+            </div>
+
+            <div className="glass p-4">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
+                Aktuelle Version
+              </p>
+              <div className="mt-2 flex flex-wrap items-baseline gap-3">
+                <span className="font-mono text-2xl text-white">
+                  {snapshot.latestTag ?? snapshot.latestRelease ?? "–"}
+                </span>
+                {snapshot.latestRelease && snapshot.latestRelease !== snapshot.latestTag ? (
+                  <span className="text-sm text-slate-400">{snapshot.latestRelease}</span>
+                ) : null}
+              </div>
+              <p className="mt-1 text-xs text-slate-500">
+                {snapshot.latestReleaseAt
+                  ? `Release vom ${formatDateTime(snapshot.latestReleaseAt)}`
+                  : `${snapshot.tagCount} Tag${snapshot.tagCount === 1 ? "" : "s"} im Repository`}
+              </p>
+            </div>
+          </div>
+
+          {/* Sprachen */}
+          {languageTotal > 0 ? (
+            <div className="glass p-4">
+              <p className="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
+                Sprachen
+              </p>
+              <div className="flex h-2 overflow-hidden rounded-full bg-white/6">
+                {topLanguages.map(([name, bytes], index) => (
+                  <span
+                    key={name}
+                    title={`${name} – ${Math.round((bytes / languageTotal) * 100)}%`}
+                    style={{
+                      width: `${(bytes / languageTotal) * 100}%`,
+                      backgroundColor: LANGUAGE_COLORS[index % LANGUAGE_COLORS.length],
+                    }}
+                  />
+                ))}
+              </div>
+              <div className="mt-2.5 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-slate-400">
+                {topLanguages.map(([name, bytes], index) => (
+                  <span key={name} className="inline-flex items-center gap-1.5">
+                    <span
+                      className="h-2 w-2 rounded-full"
+                      style={{ backgroundColor: LANGUAGE_COLORS[index % LANGUAGE_COLORS.length] }}
+                    />
+                    {name}
+                    <span className="text-slate-600">
+                      {Math.round((bytes / languageTotal) * 100)}%
+                    </span>
+                  </span>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {/* Listen */}
+          <div className="glass overflow-hidden">
+            <div className="flex flex-wrap gap-1 border-b border-white/6 p-2">
+              {TABS.map(({ key, label, icon: Icon }) => {
+                const count =
+                  key === "branches"
+                    ? branches.length
+                    : key === "tags"
+                      ? tags.length
+                      : key === "commits"
+                        ? commits.length
+                        : releases.length;
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={() => setTab(key)}
+                    className={cn(
+                      "flex items-center gap-2 rounded-lg px-3 py-2 text-xs transition-colors",
+                      tab === key
+                        ? "bg-white/9 text-white"
+                        : "text-slate-400 hover:bg-white/5 hover:text-slate-200",
+                    )}
+                  >
+                    <Icon className="h-3.5 w-3.5" />
+                    {label}
+                    <span className="tabular-nums text-slate-600">{count}</span>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="max-h-[26rem] overflow-y-auto">
+              {tab === "branches" ? <BranchList branches={branches} /> : null}
+              {tab === "tags" ? <TagList tags={tags} /> : null}
+              {tab === "commits" ? <CommitList commits={commits} /> : null}
+              {tab === "releases" ? <ReleaseList releases={releases} /> : null}
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="glass px-5 py-10 text-center text-sm text-slate-500">
+          Noch keine Daten geladen. Mit „Jetzt synchronisieren“ den ersten Snapshot holen.
+        </div>
+      )}
+    </div>
+  );
+}
+
+const LANGUAGE_COLORS = ["#a78bfa", "#22d3ee", "#34d399", "#fbbf24", "#f472b6"];
+
+function Metric({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: typeof Star;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="glass-soft px-3 py-2.5">
+      <p className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-slate-500">
+        <Icon className="h-3 w-3" />
+        {label}
+      </p>
+      <p className="mt-1 text-lg font-semibold tabular-nums text-slate-100">{value}</p>
+    </div>
+  );
+}
+
+function Row({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3 border-b border-white/4 px-4 py-2.5 last:border-b-0 hover:bg-white/3">
+      {children}
+    </div>
+  );
+}
+
+function Empty({ text }: { text: string }) {
+  return <p className="px-4 py-8 text-center text-xs text-slate-500">{text}</p>;
+}
+
+function BranchList({ branches }: { branches: BranchInfo[] }) {
+  if (branches.length === 0) return <Empty text="Keine Branches gefunden." />;
+  return (
+    <div>
+      {branches.map((branch) => (
+        <Row key={branch.name}>
+          <div className="flex min-w-0 items-center gap-2">
+            <GitBranch className="h-3.5 w-3.5 shrink-0 text-slate-600" />
+            <span className="truncate font-mono text-xs text-slate-200">{branch.name}</span>
+            {branch.isDefault ? (
+              <span className="shrink-0 rounded bg-violet-500/15 px-1.5 py-0.5 text-[10px] text-violet-200">
+                default
+              </span>
+            ) : null}
+            {branch.protected ? (
+              <Lock className="h-3 w-3 shrink-0 text-amber-300/70" />
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-3 text-[11px] text-slate-500">
+            {branch.lastCommitAt ? (
+              <span suppressHydrationWarning>{formatRelative(branch.lastCommitAt)}</span>
+            ) : null}
+            {branch.sha ? (
+              <span className="font-mono text-slate-600">{branch.sha.slice(0, 7)}</span>
+            ) : null}
+          </div>
+        </Row>
+      ))}
+    </div>
+  );
+}
+
+function TagList({ tags }: { tags: TagInfo[] }) {
+  if (tags.length === 0) return <Empty text="Keine Tags vorhanden." />;
+  return (
+    <div>
+      {tags.map((tag) => (
+        <Row key={tag.name}>
+          <div className="flex min-w-0 items-center gap-2">
+            <Tag className="h-3.5 w-3.5 shrink-0 text-slate-600" />
+            <span className="truncate font-mono text-xs text-slate-200">{tag.name}</span>
+            {tag.message ? (
+              <span className="truncate text-[11px] text-slate-500">{tag.message}</span>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-3 text-[11px] text-slate-500">
+            {tag.date ? <span suppressHydrationWarning>{formatRelative(tag.date)}</span> : null}
+            {tag.sha ? (
+              <span className="font-mono text-slate-600">{tag.sha.slice(0, 7)}</span>
+            ) : null}
+          </div>
+        </Row>
+      ))}
+    </div>
+  );
+}
+
+function CommitList({ commits }: { commits: CommitInfo[] }) {
+  if (commits.length === 0) return <Empty text="Keine Commits geladen." />;
+  return (
+    <div>
+      {commits.map((commit) => (
+        <Row key={commit.sha}>
+          <div className="min-w-0">
+            <p className="truncate text-xs text-slate-200">{commit.message}</p>
+            <p className="mt-0.5 flex items-center gap-2 text-[11px] text-slate-500">
+              <span className="font-mono text-violet-300/80">{commit.shortSha}</span>
+              <span>{commit.author ?? "unbekannt"}</span>
+            </p>
+          </div>
+          <div className="flex shrink-0 items-center gap-2 text-[11px] text-slate-500">
+            <span suppressHydrationWarning>{formatRelative(commit.date)}</span>
+            {commit.url ? (
+              <a
+                href={commit.url}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="text-slate-600 transition-colors hover:text-violet-300"
+                aria-label="Commit oeffnen"
+              >
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            ) : null}
+          </div>
+        </Row>
+      ))}
+    </div>
+  );
+}
+
+function ReleaseList({ releases }: { releases: ReleaseInfo[] }) {
+  if (releases.length === 0) return <Empty text="Keine Releases veroeffentlicht." />;
+  return (
+    <div>
+      {releases.map((release) => (
+        <Row key={`${release.tag}-${release.name}`}>
+          <div className="flex min-w-0 items-center gap-2">
+            <Package className="h-3.5 w-3.5 shrink-0 text-slate-600" />
+            <span className="truncate text-xs text-slate-200">{release.name}</span>
+            <span className="shrink-0 rounded bg-white/6 px-1.5 py-0.5 font-mono text-[10px] text-slate-400">
+              {release.tag}
+            </span>
+            {release.prerelease ? (
+              <span className="shrink-0 rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] text-amber-200">
+                pre
+              </span>
+            ) : null}
+            {release.draft ? (
+              <span className="shrink-0 rounded bg-slate-500/15 px-1.5 py-0.5 text-[10px] text-slate-300">
+                draft
+              </span>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-2 text-[11px] text-slate-500">
+            <span suppressHydrationWarning>{formatRelative(release.publishedAt)}</span>
+            {release.url ? (
+              <a
+                href={release.url}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="text-slate-600 transition-colors hover:text-violet-300"
+                aria-label="Release oeffnen"
+              >
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            ) : null}
+          </div>
+        </Row>
+      ))}
+    </div>
+  );
+}

src/components/NotesPanel.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2, NotebookPen, Pencil, Pin, PinOff, Plus, Trash2, X } from "lucide-react";
+import type { Note } from "@prisma/client";
+import { cn, formatDateTime, formatRelative } from "@/lib/utils";
+
+/** Nur als "bearbeitet" zaehlen, wenn wirklich spaeter geaendert wurde. */
+function wasEdited(note: Note): boolean {
+  const created = new Date(note.createdAt).getTime();
+  const updated = new Date(note.updatedAt).getTime();
+  return updated - created > 1500;
+}
+
+export function NotesPanel({ projectId, notes }: { projectId: string; notes: Note[] }) {
+  const router = useRouter();
+  const [composerOpen, setComposerOpen] = useState(false);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  function resetComposer() {
+    setTitle("");
+    setContent("");
+    setEditingId(null);
+    setComposerOpen(false);
+    setError(null);
+  }
+
+  async function save(event: React.FormEvent) {
+    event.preventDefault();
+    if (!content.trim()) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        editingId ? `/api/notes/${editingId}` : `/api/projects/${projectId}/notes`,
+        {
+          method: editingId ? "PATCH" : "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ title, content }),
+        },
+      );
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
+      }
+      resetComposer();
+      router.refresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function togglePin(note: Note) {
+    setBusyId(note.id);
+    await fetch(`/api/notes/${note.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ pinned: !note.pinned }),
+    }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  async function remove(note: Note) {
+    if (!window.confirm("Notiz wirklich loeschen?")) return;
+    setBusyId(note.id);
+    await fetch(`/api/notes/${note.id}`, { method: "DELETE" }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  function startEdit(note: Note) {
+    setEditingId(note.id);
+    setTitle(note.title ?? "");
+    setContent(note.content);
+    setComposerOpen(true);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-slate-300">
+          <NotebookPen className="h-4 w-4 text-violet-300" />
+          Notizen
+          <span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
+            {notes.length}
+          </span>
+        </h2>
+        {!composerOpen ? (
+          <button
+            type="button"
+            className="btn btn-ghost px-3 py-1.5 text-xs"
+            onClick={() => setComposerOpen(true)}
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Notiz
+          </button>
+        ) : null}
+      </div>
+
+      {composerOpen ? (
+        <form onSubmit={save} className="glass fade-up space-y-3 p-4">
+          <input
+            className="field"
+            placeholder="Titel (optional)"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            maxLength={160}
+          />
+          <textarea
+            className="field min-h-32 resize-y font-mono text-[13px] leading-relaxed"
+            placeholder="Gedanken, Todos, Snippets… Zeilenumbrueche bleiben erhalten."
+            value={content}
+            onChange={(event) => setContent(event.target.value)}
+            autoFocus
+            required
+          />
+          {error ? <p className="text-xs text-rose-300">{error}</p> : null}
+          <div className="flex justify-end gap-2">
+            <button type="button" className="btn btn-ghost" onClick={resetComposer}>
+              <X className="h-4 w-4" />
+              Abbrechen
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={saving || !content.trim()}>
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              {editingId ? "Aktualisieren" : "Speichern"}
+            </button>
+          </div>
+        </form>
+      ) : null}
+
+      {notes.length === 0 && !composerOpen ? (
+        <div className="glass-soft px-4 py-10 text-center text-sm text-slate-500">
+          Noch keine Notizen. Halte fest, was dir zu diesem Projekt durch den Kopf geht.
+        </div>
+      ) : null}
+
+      <div className="space-y-3">
+        {notes.map((note) => (
+          <article
+            key={note.id}
+            className={cn(
+              "glass group relative p-4 transition-colors",
+              note.pinned && "ring-1 ring-inset ring-amber-400/25",
+            )}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 flex-1">
+                {note.title ? (
+                  <h3 className="flex items-center gap-2 text-sm font-semibold text-slate-100">
+                    {note.pinned ? <Pin className="h-3.5 w-3.5 text-amber-300" /> : null}
+                    {note.title}
+                  </h3>
+                ) : null}
+                <p className="mt-1 whitespace-pre-wrap break-words text-sm leading-relaxed text-slate-300">
+                  {note.content}
+                </p>
+                <p className="mt-2.5 text-[11px] text-slate-600" suppressHydrationWarning>
+                  {formatDateTime(note.createdAt)}
+                  {wasEdited(note) ? ` · bearbeitet ${formatRelative(note.updatedAt)}` : null}
+                </p>
+              </div>
+
+              <div className="flex shrink-0 items-center gap-1 sm:opacity-0 sm:transition-opacity sm:group-hover:opacity-100">
+                {busyId === note.id ? (
+                  <Loader2 className="h-4 w-4 animate-spin text-slate-500" />
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => togglePin(note)}
+                      className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white/8 hover:text-amber-300"
+                      aria-label={note.pinned ? "Loesen" : "Anpinnen"}
+                      title={note.pinned ? "Loesen" : "Anpinnen"}
+                    >
+                      {note.pinned ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => startEdit(note)}
+                      className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white/8 hover:text-violet-300"
+                      aria-label="Bearbeiten"
+                      title="Bearbeiten"
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => remove(note)}
+                      className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-rose-500/12 hover:text-rose-300"
+                      aria-label="Loeschen"
+                      title="Loeschen"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/ProjectBoard.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { LayoutGrid, ListFilter, Plus, Rows3, Search, X } from "lucide-react";
+import type { ProjectStatus } from "@prisma/client";
+import { ProjectCard } from "@/components/ProjectCard";
+import { ProjectDialog } from "@/components/ProjectDialog";
+import { STATUS_META, STATUS_ORDER } from "@/lib/status";
+import { cn } from "@/lib/utils";
+import type { ConnectionSafe, ProjectListItem } from "@/types";
+
+type SortKey = "updated" | "created" | "name" | "progress" | "priority";
+type ViewMode = "grid" | "grouped";
+
+const SORT_LABEL: Record<SortKey, string> = {
+  updated: "Zuletzt geaendert",
+  created: "Neueste zuerst",
+  name: "Name (A–Z)",
+  progress: "Fortschritt",
+  priority: "Prioritaet",
+};
+
+export function ProjectBoard({
+  projects,
+  connections,
+}: {
+  projects: ProjectListItem[];
+  connections: ConnectionSafe[];
+}) {
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<ProjectStatus[]>([]);
+  const [sort, setSort] = useState<SortKey>("updated");
+  const [view, setView] = useState<ViewMode>("grid");
+  const [showArchived, setShowArchived] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const counts = useMemo(() => {
+    const map = new Map<ProjectStatus, number>();
+    for (const project of projects) {
+      map.set(project.status, (map.get(project.status) ?? 0) + 1);
+    }
+    return map;
+  }, [projects]);
+
+  const visible = useMemo(() => {
+    const needle = query.toLowerCase().trim();
+
+    const filtered = projects.filter((project) => {
+      if (!showArchived && project.status === "ARCHIVED" && !statusFilter.includes("ARCHIVED")) {
+        return false;
+      }
+      if (statusFilter.length > 0 && !statusFilter.includes(project.status)) return false;
+      if (!needle) return true;
+      return (
+        project.name.toLowerCase().includes(needle) ||
+        (project.summary ?? "").toLowerCase().includes(needle) ||
+        (project.description ?? "").toLowerCase().includes(needle) ||
+        project.tags.some((tag) => tag.includes(needle)) ||
+        (project.snapshot?.fullName ?? "").toLowerCase().includes(needle)
+      );
+    });
+
+    const sorted = [...filtered].sort((a, b) => {
+      if (a.favorite !== b.favorite) return a.favorite ? -1 : 1;
+      switch (sort) {
+        case "name":
+          return a.name.localeCompare(b.name, "de");
+        case "progress":
+          return b.progress - a.progress;
+        case "priority":
+          return b.priority - a.priority;
+        case "created":
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        default:
+          return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+      }
+    });
+
+    return sorted;
+  }, [projects, query, statusFilter, sort, showArchived]);
+
+  const grouped = useMemo(() => {
+    return STATUS_ORDER.map((status) => ({
+      status,
+      items: visible.filter((project) => project.status === status),
+    })).filter((group) => group.items.length > 0);
+  }, [visible]);
+
+  function toggleStatus(status: ProjectStatus) {
+    setStatusFilter((current) =>
+      current.includes(status)
+        ? current.filter((entry) => entry !== status)
+        : [...current, status],
+    );
+  }
+
+  const hasFilters = query.length > 0 || statusFilter.length > 0;
+
+  return (
+    <section className="space-y-5">
+      {/* Steuerleiste */}
+      <div className="glass flex flex-col gap-4 p-4">
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="relative min-w-[220px] flex-1">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
+            <input
+              className="field pl-9"
+              placeholder="Projekte, Tags oder Repos durchsuchen…"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+            {query ? (
+              <button
+                type="button"
+                onClick={() => setQuery("")}
+                className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-500 hover:text-white"
+                aria-label="Suche zuruecksetzen"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            ) : null}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="sr-only" htmlFor="sort">
+              Sortierung
+            </label>
+            <select
+              id="sort"
+              className="field w-auto min-w-[11rem]"
+              value={sort}
+              onChange={(event) => setSort(event.target.value as SortKey)}
+            >
+              {(Object.keys(SORT_LABEL) as SortKey[]).map((key) => (
+                <option key={key} value={key}>
+                  {SORT_LABEL[key]}
+                </option>
+              ))}
+            </select>
+
+            <div className="flex overflow-hidden rounded-xl border border-white/9">
+              <button
+                type="button"
+                onClick={() => setView("grid")}
+                className={cn(
+                  "p-2 transition-colors",
+                  view === "grid" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
+                )}
+                aria-label="Rasteransicht"
+                title="Rasteransicht"
+              >
+                <LayoutGrid className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                onClick={() => setView("grouped")}
+                className={cn(
+                  "p-2 transition-colors",
+                  view === "grouped" ? "bg-white/10 text-white" : "text-slate-500 hover:text-white",
+                )}
+                aria-label="Nach Status gruppiert"
+                title="Nach Status gruppiert"
+              >
+                <Rows3 className="h-4 w-4" />
+              </button>
+            </div>
+
+            <button type="button" className="btn btn-primary" onClick={() => setDialogOpen(true)}>
+              <Plus className="h-4 w-4" />
+              <span className="hidden sm:inline">Neues Projekt</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="mr-1 inline-flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-slate-500">
+            <ListFilter className="h-3.5 w-3.5" />
+            Status
+          </span>
+          {STATUS_ORDER.map((status) => {
+            const meta = STATUS_META[status];
+            const active = statusFilter.includes(status);
+            const count = counts.get(status) ?? 0;
+            return (
+              <button
+                key={status}
+                type="button"
+                onClick={() => toggleStatus(status)}
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs ring-1 ring-inset transition-all",
+                  active
+                    ? meta.className
+                    : "text-slate-400 ring-white/10 hover:bg-white/5 hover:text-slate-200",
+                )}
+              >
+                <span
+                  className="h-1.5 w-1.5 rounded-full"
+                  style={{ backgroundColor: meta.color, opacity: active ? 1 : 0.55 }}
+                />
+                {meta.label}
+                <span className="tabular-nums text-slate-500">{count}</span>
+              </button>
+            );
+          })}
+
+          <label className="ml-auto flex cursor-pointer items-center gap-2 text-xs text-slate-500">
+            <input
+              type="checkbox"
+              checked={showArchived}
+              onChange={(event) => setShowArchived(event.target.checked)}
+              className="h-3.5 w-3.5 accent-violet-500"
+            />
+            Archiv einblenden
+          </label>
+
+          {hasFilters ? (
+            <button
+              type="button"
+              onClick={() => {
+                setQuery("");
+                setStatusFilter([]);
+              }}
+              className="text-xs text-violet-300 underline-offset-2 hover:underline"
+            >
+              Filter zuruecksetzen
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Inhalt */}
+      {visible.length === 0 ? (
+        <EmptyState hasFilters={hasFilters} onCreate={() => setDialogOpen(true)} />
+      ) : view === "grid" ? (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          {visible.map((project, index) => (
+            <ProjectCard key={project.id} project={project} index={index} />
+          ))}
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {grouped.map((group) => {
+            const meta = STATUS_META[group.status];
+            return (
+              <div key={group.status}>
+                <div className="mb-3 flex items-center gap-2.5">
+                  <span
+                    className="accent-dot h-2 w-2 rounded-full"
+                    style={{ backgroundColor: meta.color, color: meta.color }}
+                  />
+                  <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
+                    {meta.label}
+                  </h2>
+                  <span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
+                    {group.items.length}
+                  </span>
+                  <span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+                  {group.items.map((project, index) => (
+                    <ProjectCard key={project.id} project={project} index={index} />
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <ProjectDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        connections={connections}
+      />
+    </section>
+  );
+}
+
+function EmptyState({
+  hasFilters,
+  onCreate,
+}: {
+  hasFilters: boolean;
+  onCreate: () => void;
+}) {
+  return (
+    <div className="glass fade-up flex flex-col items-center justify-center gap-4 px-6 py-20 text-center">
+      <span className="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
+        <Plus className="h-6 w-6" />
+      </span>
+      <div>
+        <h3 className="text-lg font-semibold text-white">
+          {hasFilters ? "Keine Treffer" : "Noch keine Projekte"}
+        </h3>
+        <p className="mt-1 max-w-md text-sm text-slate-400">
+          {hasFilters
+            ? "Kein Projekt passt zu Suche und Filtern. Filter anpassen oder zuruecksetzen."
+            : "Leg deine erste Idee an – Beschreibung, Repo und Status kannst du jederzeit nachziehen."}
+        </p>
+      </div>
+      {!hasFilters ? (
+        <button type="button" className="btn btn-primary" onClick={onCreate}>
+          <Plus className="h-4 w-4" />
+          Erstes Projekt anlegen
+        </button>
+      ) : null}
+    </div>
+  );
+}

src/components/ProjectCard.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import {
+  AlertTriangle,
+  GitBranch,
+  GitCommitHorizontal,
+  NotebookPen,
+  Star,
+  Tag,
+} from "lucide-react";
+import { StatusSelect } from "@/components/StatusSelect";
+import { PRIORITY_META, accentOf } from "@/lib/status";
+import { cn, formatRelative, truncate } from "@/lib/utils";
+import type { ProjectListItem } from "@/types";
+
+const PROVIDER_LABEL: Record<string, string> = {
+  GITHUB: "GitHub",
+  GITLAB: "GitLab",
+  GITEA: "Gitea",
+};
+
+/**
+ * Karte im Board. Die gesamte Flaeche ist ein Link (per "stretched link"),
+ * interaktive Elemente liegen darueber und bekommen pointer-events zurueck.
+ */
+export function ProjectCard({ project, index = 0 }: { project: ProjectListItem; index?: number }) {
+  const accent = accentOf(project.accent);
+  const priority = PRIORITY_META[project.priority] ?? PRIORITY_META[2];
+  const snapshot = project.snapshot;
+  const [favorite, setFavorite] = useState(project.favorite);
+
+  async function toggleFavorite() {
+    const next = !favorite;
+    setFavorite(next);
+    try {
+      const response = await fetch(`/api/projects/${project.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ favorite: next }),
+      });
+      if (!response.ok) throw new Error("failed");
+    } catch {
+      setFavorite(!next);
+    }
+  }
+
+  return (
+    <article
+      className="glass card-glow fade-up group relative overflow-hidden p-5"
+      style={
+        {
+          "--accent-from": accent.from,
+          "--accent-to": accent.to,
+          animationDelay: `${Math.min(index, 12) * 40}ms`,
+        } as React.CSSProperties
+      }
+    >
+      <span className="accent-bar absolute inset-x-0 top-0 h-[2px] opacity-70" aria-hidden="true" />
+
+      <Link
+        href={`/projects/${project.id}`}
+        className="absolute inset-0 z-0 rounded-[var(--radius-card)] focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60"
+        aria-label={`Projekt ${project.name} oeffnen`}
+      />
+
+      <div className="pointer-events-none relative z-10">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <h3 className="truncate text-base font-semibold text-white transition-colors group-hover:text-violet-200">
+                {project.name}
+              </h3>
+              {favorite ? (
+                <Star className="h-3.5 w-3.5 shrink-0 fill-amber-300 text-amber-300" />
+              ) : null}
+            </div>
+            <p className="mt-1 line-clamp-2 min-h-[2.4rem] text-sm leading-snug text-slate-400">
+              {project.summary ? truncate(project.summary, 140) : "Noch keine Kurzbeschreibung."}
+            </p>
+          </div>
+
+          <button
+            type="button"
+            onClick={toggleFavorite}
+            aria-label={favorite ? "Favorit entfernen" : "Als Favorit markieren"}
+            className={cn(
+              "pointer-events-auto shrink-0 rounded-lg p-1.5 transition-colors",
+              favorite
+                ? "text-amber-300 hover:bg-amber-400/10"
+                : "text-slate-600 hover:bg-white/8 hover:text-amber-300 sm:opacity-0 sm:group-hover:opacity-100",
+            )}
+          >
+            <Star className={cn("h-4 w-4", favorite && "fill-current")} />
+          </button>
+        </div>
+
+        {/* Fortschritt */}
+        <div className="mt-4">
+          <div className="mb-1.5 flex items-center justify-between text-[11px] text-slate-500">
+            <span>Fortschritt</span>
+            <span className="tabular-nums text-slate-400">{project.progress}%</span>
+          </div>
+          <div className="h-1.5 w-full overflow-hidden rounded-full bg-white/6">
+            <div
+              className="accent-bar h-full rounded-full transition-[width] duration-700"
+              style={{ width: `${Math.max(2, project.progress)}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Git-Kurzinfo */}
+        <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 text-[11px] text-slate-400">
+          {project.connection ? (
+            <span className="glass-soft inline-flex items-center gap-1.5 px-2 py-1">
+              <span className="h-1.5 w-1.5 rounded-full bg-violet-400" aria-hidden="true" />
+              {PROVIDER_LABEL[project.connection.provider] ?? project.connection.provider}
+            </span>
+          ) : null}
+
+          {snapshot?.defaultBranch ? (
+            <span className="inline-flex items-center gap-1.5 font-mono">
+              <GitBranch className="h-3.5 w-3.5 text-slate-500" />
+              {snapshot.defaultBranch}
+              {snapshot.branchCount > 1 ? (
+                <span className="text-slate-600">+{snapshot.branchCount - 1}</span>
+              ) : null}
+            </span>
+          ) : null}
+
+          {snapshot?.latestTag ? (
+            <span className="inline-flex items-center gap-1.5 font-mono">
+              <Tag className="h-3.5 w-3.5 text-slate-500" />
+              {snapshot.latestTag}
+            </span>
+          ) : null}
+
+          {snapshot?.lastCommitAt ? (
+            <span className="inline-flex items-center gap-1.5" suppressHydrationWarning>
+              <GitCommitHorizontal className="h-3.5 w-3.5 text-slate-500" />
+              {formatRelative(snapshot.lastCommitAt)}
+            </span>
+          ) : null}
+
+          {project._count.notes > 0 ? (
+            <span className="inline-flex items-center gap-1.5">
+              <NotebookPen className="h-3.5 w-3.5 text-slate-500" />
+              {project._count.notes}
+            </span>
+          ) : null}
+
+          {project.syncError ? (
+            <span
+              className="inline-flex items-center gap-1.5 text-rose-300/80"
+              title={project.syncError}
+            >
+              <AlertTriangle className="h-3.5 w-3.5" />
+              Sync-Fehler
+            </span>
+          ) : null}
+        </div>
+
+        {/* Tags */}
+        {project.tags.length > 0 ? (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {project.tags.slice(0, 4).map((tag) => (
+              <span
+                key={tag}
+                className="rounded-md bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-slate-400"
+              >
+                #{tag}
+              </span>
+            ))}
+            {project.tags.length > 4 ? (
+              <span className="px-1 text-[10px] text-slate-600">+{project.tags.length - 4}</span>
+            ) : null}
+          </div>
+        ) : null}
+
+        <div className="mt-4 flex items-center justify-between gap-2 border-t border-white/6 pt-3">
+          <div className="pointer-events-auto">
+            <StatusSelect projectId={project.id} status={project.status} variant="compact" />
+          </div>
+          <span
+            className="text-[10px] uppercase tracking-wider"
+            style={{ color: priority.color }}
+            title={`Prioritaet: ${priority.label}`}
+          >
+            {priority.label}
+          </span>
+        </div>
+      </div>
+    </article>
+  );
+}

src/components/ProjectDialog.tsx

@@ -0,0 +1,493 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2, RefreshCw, Search } from "lucide-react";
+import type { ProjectStatus } from "@prisma/client";
+import { Modal } from "@/components/ui/Modal";
+import { ACCENTS, PRIORITY_META, STATUS_META, STATUS_ORDER } from "@/lib/status";
+import { cn, parseTags } from "@/lib/utils";
+import type { ConnectionSafe, ProjectListItem, RepoListEntry } from "@/types";
+
+interface ProjectDialogProps {
+  open: boolean;
+  onClose: () => void;
+  connections: ConnectionSafe[];
+  /** Vorhandenes Projekt = Bearbeiten, sonst Anlegen. */
+  project?: ProjectListItem | null;
+}
+
+interface FormState {
+  name: string;
+  summary: string;
+  description: string;
+  status: ProjectStatus;
+  priority: number;
+  progress: number;
+  accent: string;
+  tags: string;
+  favorite: boolean;
+  connectionId: string;
+  repoUrl: string;
+  repoOwner: string;
+  repoName: string;
+}
+
+const EMPTY: FormState = {
+  name: "",
+  summary: "",
+  description: "",
+  status: "IDEA",
+  priority: 2,
+  progress: 0,
+  accent: "violet",
+  tags: "",
+  favorite: false,
+  connectionId: "",
+  repoUrl: "",
+  repoOwner: "",
+  repoName: "",
+};
+
+export function ProjectDialog({ open, onClose, connections, project }: ProjectDialogProps) {
+  const router = useRouter();
+  const [form, setForm] = useState<FormState>(EMPTY);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+
+  const [repoPickerOpen, setRepoPickerOpen] = useState(false);
+  const [repos, setRepos] = useState<RepoListEntry[]>([]);
+  const [reposLoading, setReposLoading] = useState(false);
+  const [repoFilter, setRepoFilter] = useState("");
+  const [repoError, setRepoError] = useState<string | null>(null);
+
+  const isEdit = Boolean(project);
+
+  useEffect(() => {
+    if (!open) return;
+    setError(null);
+    setFieldErrors({});
+    setRepoPickerOpen(false);
+    setRepos([]);
+    setRepoError(null);
+    setForm(
+      project
+        ? {
+            name: project.name,
+            summary: project.summary ?? "",
+            description: project.description ?? "",
+            status: project.status,
+            priority: project.priority,
+            progress: project.progress,
+            accent: project.accent,
+            tags: project.tags.join(", "),
+            favorite: project.favorite,
+            connectionId: project.connectionId ?? "",
+            repoUrl: project.repoUrl ?? "",
+            repoOwner: project.repoOwner ?? "",
+            repoName: project.repoName ?? "",
+          }
+        : EMPTY,
+    );
+  }, [open, project]);
+
+  const filteredRepos = useMemo(() => {
+    const needle = repoFilter.toLowerCase().trim();
+    if (!needle) return repos.slice(0, 60);
+    return repos.filter((repo) => repo.fullPath.toLowerCase().includes(needle)).slice(0, 60);
+  }, [repos, repoFilter]);
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((previous) => ({ ...previous, [key]: value }));
+  }
+
+  async function loadRepos() {
+    if (!form.connectionId) {
+      setRepoError("Bitte zuerst eine Git-Verbindung auswaehlen.");
+      return;
+    }
+    setReposLoading(true);
+    setRepoError(null);
+    try {
+      const response = await fetch(`/api/connections/${form.connectionId}/repos`);
+      const payload = await response.json();
+      if (!response.ok) throw new Error(payload.error ?? "Repos konnten nicht geladen werden.");
+      setRepos(payload.repos ?? []);
+      setRepoPickerOpen(true);
+    } catch (caught) {
+      setRepoError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setReposLoading(false);
+    }
+  }
+
+  function pickRepo(repo: RepoListEntry) {
+    setForm((previous) => ({
+      ...previous,
+      repoUrl: repo.htmlUrl,
+      repoOwner: repo.owner,
+      repoName: repo.name,
+      name: previous.name || repo.name,
+      summary: previous.summary || (repo.description ?? ""),
+    }));
+    setRepoPickerOpen(false);
+  }
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setSaving(true);
+    setError(null);
+    setFieldErrors({});
+
+    const body = {
+      name: form.name,
+      summary: form.summary,
+      description: form.description,
+      status: form.status,
+      priority: Number(form.priority),
+      progress: Number(form.progress),
+      accent: form.accent,
+      tags: parseTags(form.tags),
+      favorite: form.favorite,
+      connectionId: form.connectionId || null,
+      repoUrl: form.repoUrl,
+      repoOwner: form.repoOwner,
+      repoName: form.repoName,
+    };
+
+    try {
+      const response = await fetch(
+        isEdit ? `/api/projects/${project?.id}` : "/api/projects",
+        {
+          method: isEdit ? "PATCH" : "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        },
+      );
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        setFieldErrors(payload.fields ?? {});
+        throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
+      }
+      onClose();
+      router.refresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      width="xl"
+      title={isEdit ? "Projekt bearbeiten" : "Neues Projekt"}
+      description={
+        isEdit
+          ? "Aenderungen wirken sofort im Board."
+          : "Eine reine Idee reicht – Repo und Details lassen sich jederzeit nachtragen."
+      }
+    >
+      <form onSubmit={submit} className="space-y-5">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="sm:col-span-2">
+            <label className="field-label" htmlFor="project-name">
+              Name *
+            </label>
+            <input
+              id="project-name"
+              className="field"
+              value={form.name}
+              onChange={(event) => update("name", event.target.value)}
+              placeholder="z. B. Pixelgarten"
+              required
+              maxLength={120}
+              autoFocus
+            />
+            {fieldErrors.name ? (
+              <p className="mt-1 text-xs text-rose-300">{fieldErrors.name}</p>
+            ) : null}
+          </div>
+
+          <div className="sm:col-span-2">
+            <label className="field-label" htmlFor="project-summary">
+              Kurzbeschreibung
+            </label>
+            <input
+              id="project-summary"
+              className="field"
+              value={form.summary}
+              onChange={(event) => update("summary", event.target.value)}
+              placeholder="Ein Satz, der auf die Karte passt"
+              maxLength={280}
+            />
+          </div>
+
+          <div className="sm:col-span-2">
+            <label className="field-label" htmlFor="project-description">
+              Beschreibung / Ideenskizze
+            </label>
+            <textarea
+              id="project-description"
+              className="field min-h-28 resize-y"
+              value={form.description}
+              onChange={(event) => update("description", event.target.value)}
+              placeholder="Worum geht es? Was ist der Reiz? Welcher Stack?"
+            />
+          </div>
+
+          <div>
+            <label className="field-label" htmlFor="project-status">
+              Status
+            </label>
+            <select
+              id="project-status"
+              className="field"
+              value={form.status}
+              onChange={(event) => update("status", event.target.value as ProjectStatus)}
+            >
+              {STATUS_ORDER.map((status) => (
+                <option key={status} value={status}>
+                  {STATUS_META[status].label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="field-label" htmlFor="project-priority">
+              Prioritaet
+            </label>
+            <select
+              id="project-priority"
+              className="field"
+              value={form.priority}
+              onChange={(event) => update("priority", Number(event.target.value))}
+            >
+              {Object.entries(PRIORITY_META).map(([value, meta]) => (
+                <option key={value} value={value}>
+                  {meta.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="sm:col-span-2">
+            <label className="field-label" htmlFor="project-progress">
+              Fortschritt: {form.progress}%
+            </label>
+            <input
+              id="project-progress"
+              type="range"
+              min={0}
+              max={100}
+              step={5}
+              value={form.progress}
+              onChange={(event) => update("progress", Number(event.target.value))}
+              className="w-full accent-violet-500"
+            />
+          </div>
+
+          <div className="sm:col-span-2">
+            <span className="field-label">Akzentfarbe</span>
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(ACCENTS).map(([key, accent]) => (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => update("accent", key)}
+                  aria-label={accent.label}
+                  title={accent.label}
+                  className={cn(
+                    "h-8 w-8 rounded-lg transition-transform",
+                    form.accent === key
+                      ? "scale-110 ring-2 ring-white/70"
+                      : "opacity-70 hover:scale-105 hover:opacity-100",
+                  )}
+                  style={{
+                    backgroundImage: `linear-gradient(135deg, ${accent.from}, ${accent.to})`,
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className="sm:col-span-2">
+            <label className="field-label" htmlFor="project-tags">
+              Tags (kommagetrennt)
+            </label>
+            <input
+              id="project-tags"
+              className="field"
+              value={form.tags}
+              onChange={(event) => update("tags", event.target.value)}
+              placeholder="next.js, spiel, experiment"
+            />
+          </div>
+        </div>
+
+        {/* ── Git ────────────────────────────────────────────── */}
+        <div className="glass-soft space-y-4 p-4">
+          <div className="flex items-center justify-between gap-3">
+            <h3 className="text-sm font-semibold text-slate-200">Git-Anbindung (optional)</h3>
+            <button
+              type="button"
+              className="btn btn-ghost px-2.5 py-1.5 text-xs"
+              onClick={loadRepos}
+              disabled={reposLoading || !form.connectionId}
+            >
+              {reposLoading ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <RefreshCw className="h-3.5 w-3.5" />
+              )}
+              Repos laden
+            </button>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="field-label" htmlFor="project-connection">
+                Verbindung
+              </label>
+              <select
+                id="project-connection"
+                className="field"
+                value={form.connectionId}
+                onChange={(event) => update("connectionId", event.target.value)}
+              >
+                <option value="">– keine –</option>
+                {connections.map((connection) => (
+                  <option key={connection.id} value={connection.id}>
+                    {connection.name} ({connection.provider})
+                  </option>
+                ))}
+              </select>
+              {connections.length === 0 ? (
+                <p className="mt-1 text-xs text-slate-500">
+                  Noch keine Verbindung angelegt – unter „Git-Verbindungen“ hinzufuegen.
+                </p>
+              ) : null}
+            </div>
+
+            <div>
+              <label className="field-label" htmlFor="project-repo-url">
+                Repository-URL
+              </label>
+              <input
+                id="project-repo-url"
+                className="field"
+                value={form.repoUrl}
+                onChange={(event) => update("repoUrl", event.target.value)}
+                placeholder="https://github.com/user/repo"
+              />
+            </div>
+
+            <div>
+              <label className="field-label" htmlFor="project-repo-owner">
+                Owner / Gruppe
+              </label>
+              <input
+                id="project-repo-owner"
+                className="field font-mono text-xs"
+                value={form.repoOwner}
+                onChange={(event) => update("repoOwner", event.target.value)}
+                placeholder="wird aus der URL abgeleitet"
+              />
+            </div>
+
+            <div>
+              <label className="field-label" htmlFor="project-repo-name">
+                Repository
+              </label>
+              <input
+                id="project-repo-name"
+                className="field font-mono text-xs"
+                value={form.repoName}
+                onChange={(event) => update("repoName", event.target.value)}
+                placeholder="wird aus der URL abgeleitet"
+              />
+            </div>
+          </div>
+
+          {repoError ? <p className="text-xs text-rose-300">{repoError}</p> : null}
+
+          {repoPickerOpen ? (
+            <div className="rounded-xl border border-white/8 bg-[#080a18]/70">
+              <div className="flex items-center gap-2 border-b border-white/6 px-3 py-2">
+                <Search className="h-3.5 w-3.5 text-slate-500" />
+                <input
+                  className="w-full bg-transparent text-sm text-slate-200 outline-none placeholder:text-slate-600"
+                  placeholder={`${repos.length} Repositories durchsuchen…`}
+                  value={repoFilter}
+                  onChange={(event) => setRepoFilter(event.target.value)}
+                />
+              </div>
+              <ul className="max-h-56 overflow-y-auto p-1">
+                {filteredRepos.map((repo) => (
+                  <li key={repo.fullPath}>
+                    <button
+                      type="button"
+                      onClick={() => pickRepo(repo)}
+                      className="flex w-full items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-left hover:bg-white/6"
+                    >
+                      <span className="min-w-0">
+                        <span className="block truncate font-mono text-xs text-slate-200">
+                          {repo.fullPath}
+                        </span>
+                        {repo.description ? (
+                          <span className="block truncate text-[11px] text-slate-500">
+                            {repo.description}
+                          </span>
+                        ) : null}
+                      </span>
+                      <span className="shrink-0 text-[10px] uppercase text-slate-600">
+                        {repo.visibility}
+                      </span>
+                    </button>
+                  </li>
+                ))}
+                {filteredRepos.length === 0 ? (
+                  <li className="px-3 py-4 text-center text-xs text-slate-500">
+                    Keine Treffer.
+                  </li>
+                ) : null}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+
+        {error ? (
+          <p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+            {error}
+          </p>
+        ) : null}
+
+        <div className="flex items-center justify-between gap-3 pt-1">
+          <label className="flex cursor-pointer items-center gap-2 text-sm text-slate-400">
+            <input
+              type="checkbox"
+              checked={form.favorite}
+              onChange={(event) => update("favorite", event.target.checked)}
+              className="h-4 w-4 accent-violet-500"
+            />
+            Als Favorit anpinnen
+          </label>
+
+          <div className="flex gap-2">
+            <button type="button" className="btn btn-ghost" onClick={onClose} disabled={saving}>
+              Abbrechen
+            </button>
+            <button type="submit" className="btn btn-primary" disabled={saving}>
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              {isEdit ? "Speichern" : "Projekt anlegen"}
+            </button>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+}

src/components/ProjectHeader.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  CalendarDays,
+  ExternalLink,
+  Loader2,
+  Pencil,
+  Star,
+  Trash2,
+} from "lucide-react";
+import { ProjectDialog } from "@/components/ProjectDialog";
+import { StatusSelect } from "@/components/StatusSelect";
+import { PRIORITY_META, accentOf } from "@/lib/status";
+import { cn, formatDate } from "@/lib/utils";
+import type { ConnectionSafe, ProjectDetail } from "@/types";
+
+export function ProjectHeader({
+  project,
+  connections,
+}: {
+  project: ProjectDetail;
+  connections: ConnectionSafe[];
+}) {
+  const router = useRouter();
+  const accent = accentOf(project.accent);
+  const priority = PRIORITY_META[project.priority] ?? PRIORITY_META[2];
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [favorite, setFavorite] = useState(project.favorite);
+  const [progress, setProgress] = useState(project.progress);
+  const [deleting, setDeleting] = useState(false);
+
+  async function patch(payload: Record<string, unknown>) {
+    await fetch(`/api/projects/${project.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    }).catch(() => undefined);
+    router.refresh();
+  }
+
+  async function remove() {
+    if (
+      !window.confirm(
+        `„${project.name}“ mit allen Notizen unwiderruflich loeschen?`,
+      )
+    ) {
+      return;
+    }
+    setDeleting(true);
+    const response = await fetch(`/api/projects/${project.id}`, { method: "DELETE" });
+    if (response.ok) {
+      router.push("/");
+      router.refresh();
+    } else {
+      setDeleting(false);
+    }
+  }
+
+  return (
+    <header
+      className="glass relative overflow-hidden p-6"
+      style={
+        {
+          "--accent-from": accent.from,
+          "--accent-to": accent.to,
+        } as React.CSSProperties
+      }
+    >
+      <span className="accent-bar absolute inset-x-0 top-0 h-[3px]" aria-hidden="true" />
+      <div
+        className="pointer-events-none absolute -right-20 -top-24 h-64 w-64 rounded-full opacity-20 blur-3xl"
+        style={{ background: `radial-gradient(circle, ${accent.from}, transparent 70%)` }}
+        aria-hidden="true"
+      />
+
+      <Link
+        href="/"
+        className="inline-flex items-center gap-1.5 text-xs text-slate-500 transition-colors hover:text-violet-300"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        Zurueck zum Dashboard
+      </Link>
+
+      <div className="mt-3 flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-3">
+            <h1 className="text-2xl font-semibold tracking-tight text-white sm:text-3xl">
+              {project.name}
+            </h1>
+            <button
+              type="button"
+              onClick={() => {
+                const next = !favorite;
+                setFavorite(next);
+                void patch({ favorite: next });
+              }}
+              aria-label={favorite ? "Favorit entfernen" : "Als Favorit markieren"}
+              className={cn(
+                "rounded-lg p-1.5 transition-colors",
+                favorite
+                  ? "text-amber-300 hover:bg-amber-400/10"
+                  : "text-slate-600 hover:bg-white/8 hover:text-amber-300",
+              )}
+            >
+              <Star className={cn("h-4 w-4", favorite && "fill-current")} />
+            </button>
+          </div>
+
+          <p className="mt-1 font-mono text-xs text-slate-600">/{project.slug}</p>
+
+          {project.summary ? (
+            <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
+              {project.summary}
+            </p>
+          ) : null}
+
+          <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-slate-500">
+            <span className="inline-flex items-center gap-1.5">
+              <CalendarDays className="h-3.5 w-3.5" />
+              angelegt {formatDate(project.createdAt)}
+            </span>
+            <span style={{ color: priority.color }}>Prioritaet: {priority.label}</span>
+            {project.connection ? (
+              <span className="inline-flex items-center gap-1.5">
+                {project.connection.name}
+                <span className="text-slate-700">·</span>
+                {project.connection.provider}
+              </span>
+            ) : null}
+            {project.repoUrl ? (
+              <a
+                href={project.repoUrl}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-1.5 text-violet-300 transition-colors hover:text-violet-200"
+              >
+                Repository
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            ) : null}
+          </div>
+
+          {project.tags.length > 0 ? (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              {project.tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-md bg-white/5 px-2 py-0.5 text-[11px] text-slate-400"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col items-end gap-3">
+          <StatusSelect projectId={project.id} status={project.status} />
+          <div className="flex gap-2">
+            <button
+              type="button"
+              className="btn btn-ghost px-3 py-1.5 text-xs"
+              onClick={() => setEditOpen(true)}
+            >
+              <Pencil className="h-3.5 w-3.5" />
+              Bearbeiten
+            </button>
+            <button
+              type="button"
+              className="btn btn-danger px-3 py-1.5 text-xs"
+              onClick={remove}
+              disabled={deleting}
+            >
+              {deleting ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <Trash2 className="h-3.5 w-3.5" />
+              )}
+              Loeschen
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Fortschritt direkt regelbar */}
+      <div className="mt-6">
+        <div className="mb-2 flex items-center justify-between text-xs text-slate-500">
+          <span>Fortschritt</span>
+          <span className="tabular-nums text-slate-300">{progress}%</span>
+        </div>
+        <div className="relative">
+          <div className="h-2 w-full overflow-hidden rounded-full bg-white/6">
+            <div
+              className="accent-bar h-full rounded-full transition-[width] duration-300"
+              style={{ width: `${Math.max(1, progress)}%` }}
+            />
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            step={5}
+            value={progress}
+            onChange={(event) => setProgress(Number(event.target.value))}
+            onMouseUp={() => patch({ progress })}
+            onTouchEnd={() => patch({ progress })}
+            onKeyUp={() => patch({ progress })}
+            aria-label="Fortschritt anpassen"
+            className="absolute inset-0 h-2 w-full cursor-pointer opacity-0"
+          />
+        </div>
+      </div>
+
+      <ProjectDialog
+        open={editOpen}
+        onClose={() => setEditOpen(false)}
+        connections={connections}
+        project={project}
+      />
+    </header>
+  );
+}

src/components/StatCard.tsx

@@ -0,0 +1,36 @@
+import type { LucideIcon } from "lucide-react";
+
+interface StatCardProps {
+  label: string;
+  value: number | string;
+  hint?: string;
+  icon: LucideIcon;
+  color: string;
+}
+
+export function StatCard({ label, value, hint, icon: Icon, color }: StatCardProps) {
+  return (
+    <div className="glass relative overflow-hidden p-4">
+      <div
+        className="pointer-events-none absolute -right-6 -top-8 h-24 w-24 rounded-full opacity-25 blur-2xl"
+        style={{ backgroundColor: color }}
+        aria-hidden="true"
+      />
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">
+            {label}
+          </p>
+          <p className="mt-2 text-3xl font-semibold tabular-nums text-white">{value}</p>
+          {hint ? <p className="mt-1 truncate text-xs text-slate-500">{hint}</p> : null}
+        </div>
+        <span
+          className="grid h-9 w-9 shrink-0 place-items-center rounded-xl"
+          style={{ backgroundColor: `${color}1f`, color }}
+        >
+          <Icon className="h-4 w-4" />
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/StatusSelect.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Check, ChevronDown, Loader2 } from "lucide-react";
+import type { ProjectStatus } from "@prisma/client";
+import { STATUS_META, STATUS_ORDER, statusOf } from "@/lib/status";
+import { cn } from "@/lib/utils";
+
+interface StatusSelectProps {
+  projectId: string;
+  status: ProjectStatus;
+  /** compact: nur Punkt + Kurzlabel, fuer die Karten im Board. */
+  variant?: "compact" | "full";
+  onChanged?: (status: ProjectStatus) => void;
+}
+
+export function StatusSelect({
+  projectId,
+  status,
+  variant = "full",
+  onChanged,
+}: StatusSelectProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useState<ProjectStatus>(status);
+  const [pending, startTransition] = useTransition();
+  const [saving, setSaving] = useState(false);
+
+  const meta = statusOf(current);
+
+  async function select(next: ProjectStatus) {
+    setOpen(false);
+    if (next === current) return;
+
+    const previous = current;
+    setCurrent(next); // optimistisch
+    setSaving(true);
+
+    try {
+      const response = await fetch(`/api/projects/${projectId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: next }),
+      });
+      if (!response.ok) throw new Error(await response.text());
+      onChanged?.(next);
+      startTransition(() => router.refresh());
+    } catch {
+      setCurrent(previous); // zurueckrollen
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          setOpen((value) => !value);
+        }}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-full font-medium ring-1 ring-inset transition-all hover:brightness-125",
+          meta.className,
+          variant === "compact" ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-xs",
+        )}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        {saving || pending ? (
+          <Loader2 className="h-3 w-3 animate-spin" />
+        ) : (
+          <span
+            className="accent-dot h-1.5 w-1.5 rounded-full"
+            style={{ backgroundColor: meta.color, color: meta.color }}
+          />
+        )}
+        {variant === "compact" ? meta.short : meta.label}
+        <ChevronDown className="h-3 w-3 opacity-60" />
+      </button>
+
+      {open ? (
+        <>
+          <button
+            type="button"
+            aria-label="Auswahl schliessen"
+            className="fixed inset-0 z-30 cursor-default"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setOpen(false);
+            }}
+          />
+          <div
+            role="listbox"
+            className="glass fade-up absolute right-0 z-40 mt-2 w-60 overflow-hidden p-1.5"
+          >
+            {STATUS_ORDER.map((value) => {
+              const option = STATUS_META[value];
+              const active = value === current;
+              return (
+                <button
+                  key={value}
+                  type="button"
+                  role="option"
+                  aria-selected={active}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    void select(value);
+                  }}
+                  className={cn(
+                    "flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors",
+                    active ? "bg-white/8" : "hover:bg-white/5",
+                  )}
+                >
+                  <span
+                    className="mt-1.5 h-2 w-2 shrink-0 rounded-full"
+                    style={{ backgroundColor: option.color }}
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="flex items-center gap-2 text-sm text-slate-100">
+                      {option.label}
+                      {active ? <Check className="h-3 w-3 text-violet-300" /> : null}
+                    </span>
+                    <span className="mt-0.5 block text-[11px] leading-snug text-slate-500">
+                      {option.description}
+                    </span>
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

src/components/TopNav.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { GitBranch, LayoutDashboard, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const LINKS = [
+  { href: "/", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/connections", label: "Git-Verbindungen", icon: GitBranch },
+];
+
+export function TopNav() {
+  const pathname = usePathname();
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-white/5 bg-[#05060f]/70 backdrop-blur-xl">
+      <div className="mx-auto flex w-full max-w-[1400px] items-center gap-6 px-4 py-3 sm:px-6 lg:px-8">
+        <Link href="/" className="group flex items-center gap-3">
+          <span className="relative grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-cyan-400 shadow-[0_8px_28px_-10px_rgba(168,85,247,0.9)] transition-transform group-hover:scale-105">
+            <Sparkles className="h-4 w-4 text-white" strokeWidth={2.4} />
+          </span>
+          <span className="flex flex-col leading-none">
+            <span className="text-gradient text-lg font-semibold tracking-tight">
+              Nebula
+            </span>
+            <span className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-slate-500">
+              Vibe Coding
+            </span>
+          </span>
+        </Link>
+
+        <nav className="flex items-center gap-1">
+          {LINKS.map(({ href, label, icon: Icon }) => {
+            const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={cn(
+                  "flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
+                  active
+                    ? "bg-white/8 text-white"
+                    : "text-slate-400 hover:bg-white/5 hover:text-slate-100",
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                <span className="hidden sm:inline">{label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </header>
+  );
+}

src/components/ui/Modal.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ModalProps {
+  open: boolean;
+  title: string;
+  description?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  width?: "md" | "lg" | "xl";
+}
+
+export function Modal({
+  open,
+  title,
+  description,
+  onClose,
+  children,
+  footer,
+  width = "lg",
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previous;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-8">
+      <button
+        type="button"
+        aria-label="Dialog schliessen"
+        onClick={onClose}
+        className="fixed inset-0 cursor-default bg-[#03040c]/80 backdrop-blur-sm"
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className={cn(
+          "glass fade-up relative z-10 my-auto w-full p-6",
+          width === "md" && "max-w-lg",
+          width === "lg" && "max-w-2xl",
+          width === "xl" && "max-w-4xl",
+        )}
+      >
+        <div className="mb-5 flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-lg font-semibold text-white">{title}</h2>
+            {description ? (
+              <p className="mt-1 text-sm text-slate-400">{description}</p>
+            ) : null}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-white/8 hover:text-white"
+            aria-label="Schliessen"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {children}
+
+        {footer ? <div className="mt-6 flex justify-end gap-2">{footer}</div> : null}
+      </div>
+    </div>
+  );
+}

src/lib/crypto.ts

@@ -0,0 +1,79 @@
+import { createCipheriv, createDecipheriv, randomBytes, scryptSync } from "node:crypto";
+
+/**
+ * Verschluesselung der Git-Access-Tokens.
+ *
+ * Format des Chiffrats:  v1.<iv>.<authTag>.<ciphertext>   (jeweils base64url)
+ *
+ * Der Schluessel wird per scrypt aus APP_SECRET abgeleitet. Ohne gesetztes
+ * APP_SECRET wird ein Entwicklungs-Fallback benutzt – dann warnt die App
+ * beim Start, weil Tokens sonst faktisch im Klartext liegen.
+ */
+
+const DEV_FALLBACK_SECRET = "nebula-dev-secret-please-set-APP_SECRET";
+const SALT = "nebula.token.v1";
+const VERSION = "v1";
+
+let warned = false;
+
+function secret(): string {
+  const value = process.env.APP_SECRET;
+  if (value && value.length >= 16) return value;
+
+  if (!warned) {
+    warned = true;
+    console.warn(
+      "[nebula] APP_SECRET ist nicht (ausreichend) gesetzt – es wird ein unsicherer " +
+        "Entwicklungsschluessel verwendet. Bitte APP_SECRET in der .env setzen.",
+    );
+  }
+  return DEV_FALLBACK_SECRET;
+}
+
+function key(): Buffer {
+  return scryptSync(secret(), SALT, 32);
+}
+
+export function encryptSecret(plaintext: string): string {
+  const iv = randomBytes(12);
+  const cipher = createCipheriv("aes-256-gcm", key(), iv);
+  const encrypted = Buffer.concat([cipher.update(plaintext, "utf8"), cipher.final()]);
+  return [
+    VERSION,
+    iv.toString("base64url"),
+    cipher.getAuthTag().toString("base64url"),
+    encrypted.toString("base64url"),
+  ].join(".");
+}
+
+export function decryptSecret(payload: string): string {
+  const parts = payload.split(".");
+  if (parts.length !== 4 || parts[0] !== VERSION) {
+    throw new Error("Ungueltiges Token-Format");
+  }
+  const [, ivPart, tagPart, dataPart] = parts;
+  const decipher = createDecipheriv("aes-256-gcm", key(), Buffer.from(ivPart, "base64url"));
+  decipher.setAuthTag(Buffer.from(tagPart, "base64url"));
+  const decrypted = Buffer.concat([
+    decipher.update(Buffer.from(dataPart, "base64url")),
+    decipher.final(),
+  ]);
+  return decrypted.toString("utf8");
+}
+
+/** Entschluesselt und schluckt Fehler – z. B. wenn APP_SECRET gewechselt wurde. */
+export function tryDecryptSecret(payload: string | null | undefined): string | null {
+  if (!payload) return null;
+  try {
+    return decryptSecret(payload);
+  } catch {
+    return null;
+  }
+}
+
+/** Verkuerzte Darstellung fuer die UI: "ghp_…9f3a". */
+export function tokenHint(token: string): string {
+  const trimmed = token.trim();
+  if (trimmed.length <= 8) return "••••";
+  return `${trimmed.slice(0, 4)}…${trimmed.slice(-4)}`;
+}

src/lib/db.ts

@@ -0,0 +1,22 @@
+import { PrismaClient } from "@prisma/client";
+
+/**
+ * Im Dev-Modus laedt Next die Module bei jedem Hot-Reload neu. Ohne diesen
+ * Cache wuerde pro Reload eine neue Verbindung zur Datenbank aufgebaut.
+ */
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log:
+      process.env.NODE_ENV === "development"
+        ? ["warn", "error"]
+        : ["error"],
+  });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = prisma;
+}

src/lib/git/gitea.ts

@@ -0,0 +1,225 @@
+import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
+import type {
+  BranchInfo,
+  CommitInfo,
+  ConnectionCheck,
+  GitClient,
+  ProviderConfig,
+  ReleaseInfo,
+  RepoListItem,
+  RepoRef,
+  RepoSnapshotData,
+  TagInfo,
+} from "./types";
+
+/**
+ * Gitea (und kompatible Forks wie Forgejo) – API v1.
+ * Authentifizierung per "Authorization: token <PAT>".
+ */
+export class GiteaClient implements GitClient {
+  readonly provider = "GITEA" as const;
+  private readonly apiBase: string;
+  private readonly token: string | null;
+
+  constructor(config: ProviderConfig) {
+    const base = normalizeBaseUrl(config.baseUrl);
+    this.apiBase = `${base}/api/v1`;
+    this.token = config.token;
+  }
+
+  private headers(): Record<string, string> {
+    const headers: Record<string, string> = {};
+    if (this.token) headers.Authorization = `token ${this.token}`;
+    return headers;
+  }
+
+  async check(): Promise<ConnectionCheck> {
+    try {
+      const version = await getJsonSafe<{ version?: string }>(
+        `${this.apiBase}/version`,
+        {},
+        { headers: this.headers() },
+      );
+
+      if (!this.token) {
+        return {
+          ok: true,
+          message: `Instanz erreichbar${version.version ? ` (Gitea ${version.version})` : ""} – ohne Token nur oeffentliche Repos.`,
+          user: null,
+          version: version.version ?? null,
+        };
+      }
+
+      const user = await getJson<{ login: string; full_name?: string }>(`${this.apiBase}/user`, {
+        headers: this.headers(),
+      });
+      return {
+        ok: true,
+        message: `Verbunden als ${user.login}${version.version ? ` (Gitea ${version.version})` : ""}`,
+        user: user.login,
+        version: version.version ?? null,
+      };
+    } catch (error) {
+      return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    }
+  }
+
+  async listRepos(query?: string): Promise<RepoListItem[]> {
+    const url = this.token
+      ? `${this.apiBase}/user/repos?limit=100`
+      : `${this.apiBase}/repos/search?limit=50${query ? `&q=${encodeURIComponent(query)}` : ""}`;
+
+    const raw = await getJson<GiteaRepo[] | { data: GiteaRepo[] }>(url, {
+      headers: this.headers(),
+    });
+    const repos = Array.isArray(raw) ? raw : (raw?.data ?? []);
+    const needle = query?.toLowerCase().trim();
+
+    return repos
+      .filter((repo) => !needle || repo.full_name.toLowerCase().includes(needle))
+      .map((repo) => ({
+        fullPath: repo.full_name,
+        owner: repo.owner?.login ?? repo.full_name.split("/")[0] ?? "",
+        name: repo.name,
+        description: repo.description ?? null,
+        htmlUrl: repo.html_url,
+        defaultBranch: repo.default_branch ?? null,
+        visibility: repo.private ? "private" : "public",
+        updatedAt: toIso(repo.updated_at),
+      }));
+  }
+
+  async fetchRepo(ref: RepoRef): Promise<RepoSnapshotData> {
+    const base = `${this.apiBase}/repos/${encodeURIComponent(ref.owner)}/${encodeURIComponent(ref.name)}`;
+    const headers = this.headers();
+
+    const repo = await getJson<GiteaRepo>(base, { headers });
+
+    const [branches, tags, commits, releases, languages, pulls] = await Promise.all([
+      getJsonSafe<GiteaBranch[]>(`${base}/branches?limit=50`, [], { headers }),
+      getJsonSafe<GiteaTag[]>(`${base}/tags?limit=25`, [], { headers }),
+      getJsonSafe<GiteaCommit[]>(`${base}/commits?limit=15&stat=false`, [], { headers }),
+      getJsonSafe<GiteaRelease[]>(`${base}/releases?limit=10`, [], { headers }),
+      getJsonSafe<Record<string, number>>(`${base}/languages`, {}, { headers }),
+      getJsonSafe<GiteaPull[]>(`${base}/pulls?state=open&limit=100`, [], { headers }),
+    ]);
+
+    const mappedBranches: BranchInfo[] = branches.map((branch) => ({
+      name: branch.name,
+      sha: branch.commit?.id ?? null,
+      isDefault: branch.name === repo.default_branch,
+      protected: Boolean(branch.protected),
+      lastCommitAt: toIso(branch.commit?.timestamp),
+      lastCommitMessage: branch.commit?.message?.split("\n")[0] ?? null,
+      lastCommitAuthor: branch.commit?.author?.name ?? null,
+      url: `${repo.html_url}/src/branch/${encodeURIComponent(branch.name)}`,
+    }));
+
+    const mappedTags: TagInfo[] = tags.map((tag) => ({
+      name: tag.name,
+      sha: tag.commit?.sha ?? tag.id ?? null,
+      message: tag.message ?? null,
+      date: toIso(tag.commit?.created),
+      url: tag.zipball_url ? `${repo.html_url}/releases/tag/${encodeURIComponent(tag.name)}` : null,
+    }));
+
+    const mappedCommits: CommitInfo[] = commits.map((commit) => ({
+      sha: commit.sha,
+      shortSha: shortSha(commit.sha),
+      message: commit.commit?.message?.split("\n")[0] ?? "",
+      author: commit.commit?.author?.name ?? commit.author?.login ?? null,
+      date: toIso(commit.commit?.author?.date ?? commit.created),
+      url: commit.html_url ?? null,
+    }));
+
+    const mappedReleases: ReleaseInfo[] = releases.map((release) => ({
+      name: release.name || release.tag_name,
+      tag: release.tag_name,
+      publishedAt: toIso(release.published_at ?? release.created_at),
+      url: release.html_url ?? null,
+      prerelease: Boolean(release.prerelease),
+      draft: Boolean(release.draft),
+    }));
+
+    return {
+      fullName: repo.full_name,
+      description: repo.description ?? null,
+      defaultBranch: repo.default_branch ?? null,
+      htmlUrl: repo.html_url,
+      visibility: repo.private ? "private" : "public",
+      stars: repo.stars_count ?? 0,
+      forks: repo.forks_count ?? 0,
+      openIssues: repo.open_issues_count ?? 0,
+      openPullRequests: repo.open_pr_counter ?? pulls.length,
+      sizeKb: repo.size ?? 0,
+      pushedAt: toIso(repo.updated_at),
+      branches: mappedBranches,
+      tags: mappedTags,
+      commits: mappedCommits,
+      releases: mappedReleases,
+      languages: languages ?? {},
+    };
+  }
+}
+
+// ── API-Typen ──────────────────────────────────────────────────
+
+interface GiteaRepo {
+  full_name: string;
+  name: string;
+  description: string | null;
+  html_url: string;
+  default_branch: string | null;
+  private: boolean;
+  stars_count: number;
+  forks_count: number;
+  open_issues_count: number;
+  open_pr_counter?: number;
+  size: number;
+  updated_at: string | null;
+  owner?: { login: string };
+}
+
+interface GiteaBranch {
+  name: string;
+  protected?: boolean;
+  commit?: {
+    id: string;
+    message?: string;
+    timestamp?: string;
+    author?: { name?: string };
+  };
+}
+
+interface GiteaTag {
+  name: string;
+  id?: string;
+  message?: string | null;
+  zipball_url?: string;
+  commit?: { sha?: string; created?: string };
+}
+
+interface GiteaCommit {
+  sha: string;
+  html_url?: string;
+  created?: string;
+  author?: { login?: string } | null;
+  commit?: {
+    message?: string;
+    author?: { name?: string; date?: string };
+  };
+}
+
+interface GiteaRelease {
+  name: string | null;
+  tag_name: string;
+  published_at: string | null;
+  created_at: string | null;
+  html_url: string | null;
+  prerelease: boolean;
+  draft: boolean;
+}
+
+interface GiteaPull {
+  id: number;
+}

src/lib/git/github.ts

@@ -0,0 +1,211 @@
+import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
+import type {
+  BranchInfo,
+  CommitInfo,
+  ConnectionCheck,
+  GitClient,
+  ProviderConfig,
+  ReleaseInfo,
+  RepoListItem,
+  RepoRef,
+  RepoSnapshotData,
+  TagInfo,
+} from "./types";
+import { GitApiError } from "./types";
+
+/**
+ * GitHub – funktioniert mit github.com und GitHub Enterprise.
+ * Bei Enterprise liegt die API unter <host>/api/v3.
+ */
+export class GitHubClient implements GitClient {
+  readonly provider = "GITHUB" as const;
+  private readonly apiBase: string;
+  private readonly token: string | null;
+
+  constructor(config: ProviderConfig) {
+    const base = normalizeBaseUrl(config.baseUrl || "https://github.com");
+    this.apiBase = /github\.com$/i.test(base) ? "https://api.github.com" : `${base}/api/v3`;
+    this.token = config.token;
+  }
+
+  private headers(): Record<string, string> {
+    const headers: Record<string, string> = {
+      Accept: "application/vnd.github+json",
+      "X-GitHub-Api-Version": "2022-11-28",
+    };
+    if (this.token) headers.Authorization = `Bearer ${this.token}`;
+    return headers;
+  }
+
+  async check(): Promise<ConnectionCheck> {
+    try {
+      if (!this.token) {
+        await getJson(`${this.apiBase}/rate_limit`, { headers: this.headers() });
+        return {
+          ok: true,
+          message: "Erreichbar (ohne Token – nur oeffentliche Repos, striktes Rate-Limit).",
+          user: null,
+        };
+      }
+      const user = await getJson<{ login: string; name?: string }>(`${this.apiBase}/user`, {
+        headers: this.headers(),
+      });
+      return { ok: true, message: `Verbunden als ${user.login}`, user: user.login };
+    } catch (error) {
+      return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    }
+  }
+
+  async listRepos(query?: string): Promise<RepoListItem[]> {
+    if (!this.token) {
+      throw new GitApiError("Fuer das Auflisten von Repos wird ein Token benoetigt.", 401, this.apiBase);
+    }
+    const repos = await getJson<GitHubRepo[]>(
+      `${this.apiBase}/user/repos?per_page=100&sort=pushed&affiliation=owner,collaborator,organization_member`,
+      { headers: this.headers() },
+    );
+    const needle = query?.toLowerCase().trim();
+    return (repos ?? [])
+      .filter((repo) => !needle || repo.full_name.toLowerCase().includes(needle))
+      .map((repo) => ({
+        fullPath: repo.full_name,
+        owner: repo.owner?.login ?? repo.full_name.split("/")[0] ?? "",
+        name: repo.name,
+        description: repo.description ?? null,
+        htmlUrl: repo.html_url,
+        defaultBranch: repo.default_branch ?? null,
+        visibility: repo.private ? "private" : "public",
+        updatedAt: toIso(repo.pushed_at ?? repo.updated_at),
+      }));
+  }
+
+  async fetchRepo(ref: RepoRef): Promise<RepoSnapshotData> {
+    const base = `${this.apiBase}/repos/${encodeURIComponent(ref.owner)}/${encodeURIComponent(ref.name)}`;
+    const headers = this.headers();
+
+    const repo = await getJson<GitHubRepo>(base, { headers });
+
+    const [branches, tags, commits, releases, languages, pulls] = await Promise.all([
+      getJsonSafe<GitHubBranch[]>(`${base}/branches?per_page=50`, [], { headers }),
+      getJsonSafe<GitHubTag[]>(`${base}/tags?per_page=25`, [], { headers }),
+      getJsonSafe<GitHubCommit[]>(`${base}/commits?per_page=15`, [], { headers }),
+      getJsonSafe<GitHubRelease[]>(`${base}/releases?per_page=10`, [], { headers }),
+      getJsonSafe<Record<string, number>>(`${base}/languages`, {}, { headers }),
+      getJsonSafe<GitHubPull[]>(`${base}/pulls?state=open&per_page=100`, [], { headers }),
+    ]);
+
+    const mappedBranches: BranchInfo[] = branches.map((branch) => ({
+      name: branch.name,
+      sha: branch.commit?.sha ?? null,
+      isDefault: branch.name === repo.default_branch,
+      protected: Boolean(branch.protected),
+      lastCommitAt: null,
+      lastCommitMessage: null,
+      lastCommitAuthor: null,
+      url: `${repo.html_url}/tree/${encodeURIComponent(branch.name)}`,
+    }));
+
+    const mappedTags: TagInfo[] = tags.map((tag) => ({
+      name: tag.name,
+      sha: tag.commit?.sha ?? null,
+      message: null,
+      date: null,
+      url: `${repo.html_url}/releases/tag/${encodeURIComponent(tag.name)}`,
+    }));
+
+    const mappedCommits: CommitInfo[] = commits.map((entry) => ({
+      sha: entry.sha,
+      shortSha: shortSha(entry.sha),
+      message: entry.commit?.message?.split("\n")[0] ?? "",
+      author: entry.commit?.author?.name ?? entry.author?.login ?? null,
+      date: toIso(entry.commit?.author?.date ?? entry.commit?.committer?.date),
+      url: entry.html_url ?? null,
+    }));
+
+    const mappedReleases: ReleaseInfo[] = releases.map((release) => ({
+      name: release.name || release.tag_name,
+      tag: release.tag_name,
+      publishedAt: toIso(release.published_at ?? release.created_at),
+      url: release.html_url ?? null,
+      prerelease: Boolean(release.prerelease),
+      draft: Boolean(release.draft),
+    }));
+
+    // open_issues_count zaehlt bei GitHub PRs mit – hier wieder herausrechnen.
+    const openPullRequests = pulls.length;
+    const openIssues = Math.max(0, (repo.open_issues_count ?? 0) - openPullRequests);
+
+    return {
+      fullName: repo.full_name,
+      description: repo.description ?? null,
+      defaultBranch: repo.default_branch ?? null,
+      htmlUrl: repo.html_url,
+      visibility: repo.private ? "private" : "public",
+      stars: repo.stargazers_count ?? 0,
+      forks: repo.forks_count ?? 0,
+      openIssues,
+      openPullRequests,
+      sizeKb: repo.size ?? 0,
+      pushedAt: toIso(repo.pushed_at),
+      branches: mappedBranches,
+      tags: mappedTags,
+      commits: mappedCommits,
+      releases: mappedReleases,
+      languages: languages ?? {},
+    };
+  }
+}
+
+// ── API-Typen (nur die tatsaechlich genutzten Felder) ──────────
+
+interface GitHubRepo {
+  full_name: string;
+  name: string;
+  description: string | null;
+  html_url: string;
+  default_branch: string;
+  private: boolean;
+  stargazers_count: number;
+  forks_count: number;
+  open_issues_count: number;
+  size: number;
+  pushed_at: string | null;
+  updated_at: string | null;
+  owner?: { login: string };
+}
+
+interface GitHubBranch {
+  name: string;
+  protected?: boolean;
+  commit?: { sha: string };
+}
+
+interface GitHubTag {
+  name: string;
+  commit?: { sha: string };
+}
+
+interface GitHubCommit {
+  sha: string;
+  html_url?: string;
+  author?: { login: string } | null;
+  commit?: {
+    message?: string;
+    author?: { name?: string; date?: string };
+    committer?: { date?: string };
+  };
+}
+
+interface GitHubRelease {
+  name: string | null;
+  tag_name: string;
+  published_at: string | null;
+  created_at: string | null;
+  html_url: string | null;
+  prerelease: boolean;
+  draft: boolean;
+}
+
+interface GitHubPull {
+  id: number;
+}

src/lib/git/gitlab.ts

@@ -0,0 +1,209 @@
+import { getJson, getJsonSafe, normalizeBaseUrl, shortSha, toIso } from "./http";
+import type {
+  BranchInfo,
+  CommitInfo,
+  ConnectionCheck,
+  GitClient,
+  ProviderConfig,
+  ReleaseInfo,
+  RepoListItem,
+  RepoRef,
+  RepoSnapshotData,
+  TagInfo,
+} from "./types";
+
+/**
+ * GitLab – gitlab.com und selbst gehostete Instanzen (API v4).
+ * Projekte werden ueber den URL-kodierten Pfad "gruppe%2Fprojekt" adressiert,
+ * daher funktionieren auch verschachtelte Gruppen.
+ */
+export class GitLabClient implements GitClient {
+  readonly provider = "GITLAB" as const;
+  private readonly apiBase: string;
+  private readonly token: string | null;
+
+  constructor(config: ProviderConfig) {
+    const base = normalizeBaseUrl(config.baseUrl || "https://gitlab.com");
+    this.apiBase = `${base}/api/v4`;
+    this.token = config.token;
+  }
+
+  private headers(): Record<string, string> {
+    const headers: Record<string, string> = {};
+    if (this.token) headers["PRIVATE-TOKEN"] = this.token;
+    return headers;
+  }
+
+  async check(): Promise<ConnectionCheck> {
+    try {
+      if (!this.token) {
+        await getJson(`${this.apiBase}/projects?per_page=1`, { headers: this.headers() });
+        return { ok: true, message: "Erreichbar (ohne Token – nur oeffentliche Projekte).", user: null };
+      }
+      const user = await getJson<{ username: string; name?: string }>(`${this.apiBase}/user`, {
+        headers: this.headers(),
+      });
+      return { ok: true, message: `Verbunden als ${user.username}`, user: user.username };
+    } catch (error) {
+      return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    }
+  }
+
+  async listRepos(query?: string): Promise<RepoListItem[]> {
+    const search = query ? `&search=${encodeURIComponent(query)}` : "";
+    const url = this.token
+      ? `${this.apiBase}/projects?membership=true&per_page=100&order_by=last_activity_at${search}`
+      : `${this.apiBase}/projects?per_page=50&order_by=last_activity_at${search}`;
+
+    const projects = await getJson<GitLabProject[]>(url, { headers: this.headers() });
+    return (projects ?? []).map((project) => {
+      const path = project.path_with_namespace;
+      const segments = path.split("/");
+      return {
+        fullPath: path,
+        owner: segments.slice(0, -1).join("/"),
+        name: segments[segments.length - 1] ?? project.name,
+        description: project.description ?? null,
+        htmlUrl: project.web_url,
+        defaultBranch: project.default_branch ?? null,
+        visibility: project.visibility ?? null,
+        updatedAt: toIso(project.last_activity_at),
+      };
+    });
+  }
+
+  async fetchRepo(ref: RepoRef): Promise<RepoSnapshotData> {
+    const path = [ref.owner, ref.name].filter(Boolean).join("/");
+    const encoded = encodeURIComponent(path);
+    const base = `${this.apiBase}/projects/${encoded}`;
+    const headers = this.headers();
+
+    const project = await getJson<GitLabProject>(`${base}?statistics=true`, { headers });
+
+    const [branches, tags, commits, releases, languages, mergeRequests] = await Promise.all([
+      getJsonSafe<GitLabBranch[]>(`${base}/repository/branches?per_page=50`, [], { headers }),
+      getJsonSafe<GitLabTag[]>(`${base}/repository/tags?per_page=25`, [], { headers }),
+      getJsonSafe<GitLabCommit[]>(`${base}/repository/commits?per_page=15`, [], { headers }),
+      getJsonSafe<GitLabRelease[]>(`${base}/releases?per_page=10`, [], { headers }),
+      getJsonSafe<Record<string, number>>(`${base}/languages`, {}, { headers }),
+      getJsonSafe<GitLabMergeRequest[]>(`${base}/merge_requests?state=opened&per_page=100`, [], {
+        headers,
+      }),
+    ]);
+
+    const mappedBranches: BranchInfo[] = branches.map((branch) => ({
+      name: branch.name,
+      sha: branch.commit?.id ?? null,
+      isDefault: Boolean(branch.default),
+      protected: Boolean(branch.protected),
+      lastCommitAt: toIso(branch.commit?.committed_date ?? branch.commit?.created_at),
+      lastCommitMessage: branch.commit?.title ?? null,
+      lastCommitAuthor: branch.commit?.author_name ?? null,
+      url: branch.web_url ?? null,
+    }));
+
+    const mappedTags: TagInfo[] = tags.map((tag) => ({
+      name: tag.name,
+      sha: tag.commit?.id ?? null,
+      message: tag.message ?? null,
+      date: toIso(tag.commit?.committed_date ?? tag.commit?.created_at),
+      url: `${project.web_url}/-/tags/${encodeURIComponent(tag.name)}`,
+    }));
+
+    const mappedCommits: CommitInfo[] = commits.map((commit) => ({
+      sha: commit.id,
+      shortSha: commit.short_id ?? shortSha(commit.id),
+      message: commit.title ?? commit.message?.split("\n")[0] ?? "",
+      author: commit.author_name ?? null,
+      date: toIso(commit.committed_date ?? commit.created_at),
+      url: commit.web_url ?? null,
+    }));
+
+    const mappedReleases: ReleaseInfo[] = releases.map((release) => ({
+      name: release.name || release.tag_name,
+      tag: release.tag_name,
+      publishedAt: toIso(release.released_at ?? release.created_at),
+      url: release._links?.self ?? null,
+      prerelease: Boolean(release.upcoming_release),
+      draft: false,
+    }));
+
+    return {
+      fullName: project.path_with_namespace,
+      description: project.description ?? null,
+      defaultBranch: project.default_branch ?? null,
+      htmlUrl: project.web_url,
+      visibility: project.visibility ?? null,
+      stars: project.star_count ?? 0,
+      forks: project.forks_count ?? 0,
+      openIssues: project.open_issues_count ?? 0,
+      openPullRequests: mergeRequests.length,
+      sizeKb: project.statistics?.repository_size
+        ? Math.round(project.statistics.repository_size / 1024)
+        : 0,
+      pushedAt: toIso(project.last_activity_at),
+      branches: mappedBranches,
+      tags: mappedTags,
+      commits: mappedCommits,
+      releases: mappedReleases,
+      languages: languages ?? {},
+    };
+  }
+}
+
+// ── API-Typen ──────────────────────────────────────────────────
+
+interface GitLabProject {
+  id: number;
+  name: string;
+  path_with_namespace: string;
+  description: string | null;
+  web_url: string;
+  default_branch: string | null;
+  visibility: string | null;
+  star_count: number;
+  forks_count: number;
+  open_issues_count: number;
+  last_activity_at: string | null;
+  statistics?: { repository_size?: number };
+}
+
+interface GitLabCommitStub {
+  id: string;
+  short_id?: string;
+  title?: string;
+  message?: string;
+  author_name?: string;
+  committed_date?: string;
+  created_at?: string;
+  web_url?: string;
+}
+
+interface GitLabBranch {
+  name: string;
+  default?: boolean;
+  protected?: boolean;
+  web_url?: string;
+  commit?: GitLabCommitStub;
+}
+
+interface GitLabTag {
+  name: string;
+  message: string | null;
+  commit?: GitLabCommitStub;
+}
+
+type GitLabCommit = GitLabCommitStub;
+
+interface GitLabRelease {
+  name: string | null;
+  tag_name: string;
+  released_at: string | null;
+  created_at: string | null;
+  upcoming_release?: boolean;
+  _links?: { self?: string };
+}
+
+interface GitLabMergeRequest {
+  id: number;
+}

src/lib/git/http.ts

@@ -0,0 +1,107 @@
+import { GitApiError } from "./types";
+
+const DEFAULT_TIMEOUT = Number(process.env.GIT_API_TIMEOUT_MS ?? 15000);
+
+export interface FetchOptions {
+  headers?: Record<string, string>;
+  timeoutMs?: number;
+  /** Wenn true, liefert die Funktion bei 404 null statt zu werfen. */
+  allow404?: boolean;
+}
+
+/** Entfernt einen abschliessenden Slash, damit URLs sauber zusammengesetzt werden. */
+export function normalizeBaseUrl(baseUrl: string): string {
+  return baseUrl.trim().replace(/\/+$/, "");
+}
+
+function friendlyMessage(status: number, url: string, body: string): string {
+  switch (status) {
+    case 401:
+      return "Nicht autorisiert (401) – Token fehlt, ist abgelaufen oder ungueltig.";
+    case 403:
+      return body.toLowerCase().includes("rate limit")
+        ? "Rate-Limit erreicht (403) – bitte spaeter erneut versuchen oder Token hinterlegen."
+        : "Zugriff verweigert (403) – Token hat nicht die noetigen Scopes.";
+    case 404:
+      return "Nicht gefunden (404) – Repo-Pfad pruefen oder Token hat keinen Lesezugriff.";
+    case 429:
+      return "Zu viele Anfragen (429) – Rate-Limit des Git-Systems.";
+    default:
+      if (status >= 500) return `Serverfehler ${status} beim Git-System.`;
+      return `Anfrage fehlgeschlagen (${status}) auf ${url}`;
+  }
+}
+
+/** GET mit Timeout, JSON-Parsing und sprechenden Fehlern. */
+export async function getJson<T>(
+  url: string,
+  options: FetchOptions = {},
+): Promise<T> {
+  const controller = new AbortController();
+  const timeout = setTimeout(
+    () => controller.abort(),
+    options.timeoutMs ?? DEFAULT_TIMEOUT,
+  );
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: "application/json",
+        "User-Agent": "Nebula-Dashboard",
+        ...options.headers,
+      },
+      signal: controller.signal,
+      cache: "no-store",
+    });
+
+    if (response.status === 404 && options.allow404) {
+      return null as T;
+    }
+
+    if (!response.ok) {
+      const body = await response.text().catch(() => "");
+      throw new GitApiError(friendlyMessage(response.status, url, body), response.status, url);
+    }
+
+    const text = await response.text();
+    if (!text) return null as T;
+    return JSON.parse(text) as T;
+  } catch (error) {
+    if (error instanceof GitApiError) throw error;
+    if (error instanceof Error && error.name === "AbortError") {
+      throw new GitApiError(
+        `Zeitueberschreitung nach ${options.timeoutMs ?? DEFAULT_TIMEOUT} ms`,
+        408,
+        url,
+      );
+    }
+    const reason = error instanceof Error ? error.message : String(error);
+    throw new GitApiError(`Verbindung fehlgeschlagen: ${reason}`, 0, url);
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+/** Wie getJson, gibt aber bei jedem Fehler den Fallback zurueck. */
+export async function getJsonSafe<T>(
+  url: string,
+  fallback: T,
+  options: FetchOptions = {},
+): Promise<T> {
+  try {
+    const result = await getJson<T>(url, options);
+    return (result ?? fallback) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+export function toIso(value: unknown): string | null {
+  if (!value) return null;
+  const date = new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+
+export function shortSha(sha: string | null | undefined): string {
+  return (sha ?? "").slice(0, 7);
+}

src/lib/git/index.ts

@@ -0,0 +1,105 @@
+import type { GitConnection } from "@prisma/client";
+import { tryDecryptSecret } from "@/lib/crypto";
+import { GiteaClient } from "./gitea";
+import { GitHubClient } from "./github";
+import { GitLabClient } from "./gitlab";
+import { guessProvider } from "./meta";
+import type { GitClient, ProviderConfig, ProviderKind, RepoRef } from "./types";
+
+export * from "./types";
+export { GiteaClient, GitHubClient, GitLabClient };
+// PROVIDER_META liegt in ./meta, damit Client-Komponenten es ohne
+// node:crypto-Abhaengigkeit importieren koennen.
+export { PROVIDER_META, guessProvider } from "./meta";
+
+export function createClient(config: ProviderConfig): GitClient {
+  switch (config.provider) {
+    case "GITHUB":
+      return new GitHubClient(config);
+    case "GITLAB":
+      return new GitLabClient(config);
+    case "GITEA":
+      return new GiteaClient(config);
+    default: {
+      const exhaustive: never = config.provider;
+      throw new Error(`Unbekannter Provider: ${String(exhaustive)}`);
+    }
+  }
+}
+
+/** Baut einen Client aus einer gespeicherten Verbindung (Token wird entschluesselt). */
+export function clientForConnection(connection: GitConnection): GitClient {
+  return createClient({
+    provider: connection.provider,
+    baseUrl: connection.baseUrl,
+    token: tryDecryptSecret(connection.tokenCipher),
+  });
+}
+
+export interface ParsedRepoUrl {
+  host: string;
+  baseUrl: string;
+  owner: string;
+  name: string;
+  /** Aus dem Host geratener Provider – vom Nutzer ueberschreibbar. */
+  guessedProvider: ProviderKind;
+}
+
+/**
+ * Zerlegt eine Repository-URL. Unterstuetzt:
+ *   https://github.com/user/repo(.git)
+ *   git@gitlab.com:gruppe/subgruppe/repo.git
+ *   https://git.firma.de/team/repo
+ */
+export function parseRepoUrl(input: string): ParsedRepoUrl | null {
+  const raw = input.trim();
+  if (!raw) return null;
+
+  let host = "";
+  let path = "";
+  let protocol = "https";
+
+  const sshMatch = raw.match(/^(?:ssh:\/\/)?(?:[\w.-]+@)([^/:]+)[:/](.+)$/);
+  if (sshMatch && !raw.startsWith("http")) {
+    host = sshMatch[1];
+    path = sshMatch[2];
+  } else {
+    try {
+      const url = new URL(raw.includes("://") ? raw : `https://${raw}`);
+      host = url.host;
+      path = url.pathname;
+      protocol = url.protocol.replace(":", "") || "https";
+    } catch {
+      return null;
+    }
+  }
+
+  const segments = path
+    .replace(/\.git$/i, "")
+    .split("/")
+    .filter(Boolean)
+    // GitLab-Weboberflaeche haengt bei Unterseiten "/-/tree/main" an.
+    .reduce<string[]>((acc, segment) => {
+      if (segment === "-") return acc.length ? [...acc, "__STOP__"] : acc;
+      if (acc.includes("__STOP__")) return acc;
+      return [...acc, segment];
+    }, [])
+    .filter((segment) => segment !== "__STOP__");
+
+  if (segments.length < 2) return null;
+
+  const name = segments[segments.length - 1];
+  const owner = segments.slice(0, -1).join("/");
+
+  return {
+    host,
+    baseUrl: `${protocol}://${host}`,
+    owner,
+    name,
+    guessedProvider: guessProvider(host),
+  };
+}
+
+export function repoRefFrom(owner: string, name: string): RepoRef {
+  return { owner, name };
+}

src/lib/git/meta.ts

@@ -0,0 +1,37 @@
+import type { ProviderKind } from "./types";
+
+/**
+ * Reine Metadaten zu den Git-Systemen – bewusst frei von Node-Imports,
+ * damit dieses Modul auch in Client-Komponenten benutzt werden kann.
+ */
+export const PROVIDER_META: Record<
+  ProviderKind,
+  { label: string; defaultBaseUrl: string; tokenHelp: string; docsUrl: string }
+> = {
+  GITHUB: {
+    label: "GitHub",
+    defaultBaseUrl: "https://github.com",
+    tokenHelp:
+      "Fine-grained Token mit Lesezugriff auf Contents, Metadata, Issues und Pull Requests.",
+    docsUrl: "https://github.com/settings/tokens",
+  },
+  GITLAB: {
+    label: "GitLab",
+    defaultBaseUrl: "https://gitlab.com",
+    tokenHelp: "Personal Access Token mit Scope 'read_api' (bzw. 'read_repository').",
+    docsUrl: "https://gitlab.com/-/user_settings/personal_access_tokens",
+  },
+  GITEA: {
+    label: "Gitea / Forgejo",
+    defaultBaseUrl: "https://git.example.com",
+    tokenHelp: "Access Token mit Leserechten auf repository, issue und user.",
+    docsUrl: "https://docs.gitea.com/development/api-usage",
+  },
+};
+
+export function guessProvider(host: string): ProviderKind {
+  const lower = host.toLowerCase();
+  if (lower.includes("github")) return "GITHUB";
+  if (lower.includes("gitlab")) return "GITLAB";
+  return "GITEA";
+}

src/lib/git/types.ts

@@ -0,0 +1,117 @@
+import type { GitProvider } from "@prisma/client";
+
+export type ProviderKind = GitProvider;
+
+/** Zeiger auf ein konkretes Repository. */
+export interface RepoRef {
+  /** Owner / Namespace / Gruppe – bei GitLab auch verschachtelt ("gruppe/sub"). */
+  owner: string;
+  /** Repository-Name ohne Namespace. */
+  name: string;
+}
+
+export interface BranchInfo {
+  name: string;
+  sha: string | null;
+  isDefault: boolean;
+  protected: boolean;
+  lastCommitAt: string | null;
+  lastCommitMessage: string | null;
+  lastCommitAuthor: string | null;
+  url: string | null;
+}
+
+export interface TagInfo {
+  name: string;
+  sha: string | null;
+  message: string | null;
+  date: string | null;
+  url: string | null;
+}
+
+export interface CommitInfo {
+  sha: string;
+  shortSha: string;
+  message: string;
+  author: string | null;
+  date: string | null;
+  url: string | null;
+}
+
+export interface ReleaseInfo {
+  name: string;
+  tag: string;
+  publishedAt: string | null;
+  url: string | null;
+  prerelease: boolean;
+  draft: boolean;
+}
+
+export interface RepoOverview {
+  fullName: string;
+  description: string | null;
+  defaultBranch: string | null;
+  htmlUrl: string | null;
+  visibility: string | null;
+  stars: number;
+  forks: number;
+  openIssues: number;
+  openPullRequests: number;
+  sizeKb: number;
+  pushedAt: string | null;
+}
+
+export interface RepoSnapshotData extends RepoOverview {
+  branches: BranchInfo[];
+  tags: TagInfo[];
+  commits: CommitInfo[];
+  releases: ReleaseInfo[];
+  languages: Record<string, number>;
+}
+
+export interface RepoListItem {
+  fullPath: string;
+  owner: string;
+  name: string;
+  description: string | null;
+  htmlUrl: string;
+  defaultBranch: string | null;
+  visibility: string | null;
+  updatedAt: string | null;
+}
+
+export interface ConnectionCheck {
+  ok: boolean;
+  message: string;
+  user?: string | null;
+  version?: string | null;
+}
+
+export interface ProviderConfig {
+  provider: ProviderKind;
+  baseUrl: string;
+  token: string | null;
+}
+
+export interface GitClient {
+  readonly provider: ProviderKind;
+  /** Prueft Erreichbarkeit und Token-Gueltigkeit. */
+  check(): Promise<ConnectionCheck>;
+  /** Repos, auf die der Token Zugriff hat (fuer die Auswahl beim Verknuepfen). */
+  listRepos(query?: string): Promise<RepoListItem[]>;
+  /** Vollstaendiger Stand eines Repositories. */
+  fetchRepo(ref: RepoRef): Promise<RepoSnapshotData>;
+}
+
+/** Fehler mit HTTP-Kontext, damit die UI verstaendliche Meldungen zeigen kann. */
+export class GitApiError extends Error {
+  readonly status: number;
+  readonly url: string;
+
+  constructor(message: string, status: number, url: string) {
+    super(message);
+    this.name = "GitApiError";
+    this.status = status;
+    this.url = url;
+  }
+}

src/lib/projects.ts

@@ -0,0 +1,55 @@
+import { Prisma } from "@prisma/client";
+import { prisma } from "@/lib/db";
+import { slugify } from "@/lib/utils";
+
+/** Erzeugt einen eindeutigen Slug, notfalls mit angehaengtem Zaehler. */
+export async function uniqueSlug(name: string, ignoreId?: string): Promise<string> {
+  const base = slugify(name) || "projekt";
+  let candidate = base;
+  let counter = 2;
+
+  // In der Praxis endet die Schleife nach wenigen Runden.
+  for (let attempt = 0; attempt < 50; attempt += 1) {
+    const existing = await prisma.project.findUnique({
+      where: { slug: candidate },
+      select: { id: true },
+    });
+    if (!existing || existing.id === ignoreId) return candidate;
+    candidate = `${base}-${counter}`;
+    counter += 1;
+  }
+  return `${base}-${Date.now()}`;
+}
+
+/**
+ * Verbindungsfelder, die an den Browser gehen duerfen.
+ * tokenCipher ist bewusst nicht dabei.
+ */
+export const connectionSafeSelect = Prisma.validator<Prisma.GitConnectionSelect>()({
+  id: true,
+  name: true,
+  provider: true,
+  baseUrl: true,
+  username: true,
+  tokenHint: true,
+  lastCheckedAt: true,
+  lastCheckOk: true,
+  lastCheckMessage: true,
+  createdAt: true,
+  updatedAt: true,
+});
+
+export const projectListInclude = Prisma.validator<Prisma.ProjectInclude>()({
+  connection: { select: connectionSafeSelect },
+  snapshot: true,
+  _count: { select: { notes: true } },
+});
+
+export const projectDetailInclude = Prisma.validator<Prisma.ProjectInclude>()({
+  connection: { select: connectionSafeSelect },
+  snapshot: true,
+  notes: {
+    orderBy: [{ pinned: "desc" }, { updatedAt: "desc" }],
+  },
+  _count: { select: { notes: true } },
+});

src/lib/status.ts

@@ -0,0 +1,98 @@
+import type { ProjectStatus } from "@prisma/client";
+
+export type StatusMeta = {
+  value: ProjectStatus;
+  label: string;
+  short: string;
+  /** Tailwind-Klassen fuer Pills/Badges */
+  className: string;
+  /** Reine Farbe fuer Punkte, Balken und Glows */
+  color: string;
+  description: string;
+};
+
+export const STATUS_ORDER: ProjectStatus[] = [
+  "IDEA",
+  "PLANNING",
+  "OPEN",
+  "IN_DEVELOPMENT",
+  "DONE",
+  "ARCHIVED",
+];
+
+export const STATUS_META: Record<ProjectStatus, StatusMeta> = {
+  IDEA: {
+    value: "IDEA",
+    label: "Idee",
+    short: "Idee",
+    className: "bg-cyan-500/12 text-cyan-200 ring-cyan-400/30",
+    color: "#22d3ee",
+    description: "Noch ein Gedanke – nichts gebaut, nichts entschieden.",
+  },
+  PLANNING: {
+    value: "PLANNING",
+    label: "In Planung",
+    short: "Planung",
+    className: "bg-blue-500/12 text-blue-200 ring-blue-400/30",
+    color: "#60a5fa",
+    description: "Scope, Stack und Schnitt werden gerade festgelegt.",
+  },
+  OPEN: {
+    value: "OPEN",
+    label: "Offen",
+    short: "Offen",
+    className: "bg-amber-500/12 text-amber-200 ring-amber-400/30",
+    color: "#fbbf24",
+    description: "Startklar, aber aktuell liegt es still.",
+  },
+  IN_DEVELOPMENT: {
+    value: "IN_DEVELOPMENT",
+    label: "In Entwicklung",
+    short: "Aktiv",
+    className: "bg-violet-500/12 text-violet-200 ring-violet-400/30",
+    color: "#a78bfa",
+    description: "Wird gerade aktiv gebaut.",
+  },
+  DONE: {
+    value: "DONE",
+    label: "Fertig",
+    short: "Fertig",
+    className: "bg-emerald-500/12 text-emerald-200 ring-emerald-400/30",
+    color: "#34d399",
+    description: "Ausgeliefert und abgeschlossen.",
+  },
+  ARCHIVED: {
+    value: "ARCHIVED",
+    label: "Archiviert",
+    short: "Archiv",
+    className: "bg-slate-500/12 text-slate-300 ring-slate-400/25",
+    color: "#94a3b8",
+    description: "Ruht im Archiv – bleibt erhalten, stoert aber nicht mehr.",
+  },
+};
+
+export const PRIORITY_META: Record<number, { label: string; color: string }> = {
+  1: { label: "Niedrig", color: "#64748b" },
+  2: { label: "Normal", color: "#38bdf8" },
+  3: { label: "Hoch", color: "#fb923c" },
+  4: { label: "Kritisch", color: "#f43f5e" },
+};
+
+export type AccentKey = "violet" | "cyan" | "emerald" | "amber" | "rose" | "blue";
+
+export const ACCENTS: Record<AccentKey, { label: string; from: string; to: string }> = {
+  violet: { label: "Violett", from: "#8b5cf6", to: "#d946ef" },
+  cyan: { label: "Cyan", from: "#06b6d4", to: "#3b82f6" },
+  emerald: { label: "Smaragd", from: "#10b981", to: "#84cc16" },
+  amber: { label: "Bernstein", from: "#f59e0b", to: "#f43f5e" },
+  rose: { label: "Rose", from: "#f43f5e", to: "#8b5cf6" },
+  blue: { label: "Blau", from: "#3b82f6", to: "#6366f1" },
+};
+
+export function accentOf(key: string | null | undefined) {
+  return ACCENTS[(key ?? "violet") as AccentKey] ?? ACCENTS.violet;
+}
+
+export function statusOf(status: ProjectStatus | string): StatusMeta {
+  return STATUS_META[status as ProjectStatus] ?? STATUS_META.IDEA;
+}

src/lib/sync.ts

@@ -0,0 +1,135 @@
+import type { Project } from "@prisma/client";
+import { prisma } from "@/lib/db";
+import { clientForConnection, createClient, parseRepoUrl } from "@/lib/git";
+import type { RepoSnapshotData } from "@/lib/git/types";
+
+export interface SyncResult {
+  ok: boolean;
+  message: string;
+  fetchedAt?: string;
+}
+
+/**
+ * Holt den aktuellen Stand des verknuepften Repositories und schreibt ihn
+ * als Snapshot in die Datenbank. Fehler werden am Projekt vermerkt statt
+ * geworfen, damit ein kaputtes Repo nicht das ganze Dashboard blockiert.
+ */
+export async function syncProject(projectId: string): Promise<SyncResult> {
+  const project = await prisma.project.findUnique({
+    where: { id: projectId },
+    include: { connection: true },
+  });
+
+  if (!project) {
+    return { ok: false, message: "Projekt nicht gefunden." };
+  }
+
+  const ref = resolveRepoRef(project);
+  if (!ref) {
+    return {
+      ok: false,
+      message: "Kein Repository hinterlegt – bitte Repo-URL oder Owner/Name setzen.",
+    };
+  }
+
+  let client;
+  if (project.connection) {
+    client = clientForConnection(project.connection);
+  } else {
+    // Ohne gespeicherte Verbindung: anonymer Zugriff anhand der URL.
+    const parsed = project.repoUrl ? parseRepoUrl(project.repoUrl) : null;
+    if (!parsed) {
+      return {
+        ok: false,
+        message: "Keine Git-Verbindung ausgewaehlt und die Repo-URL ist nicht auswertbar.",
+      };
+    }
+    client = createClient({
+      provider: parsed.guessedProvider,
+      baseUrl: parsed.baseUrl,
+      token: null,
+    });
+  }
+
+  try {
+    const data = await client.fetchRepo(ref);
+    await persistSnapshot(project.id, data);
+    return {
+      ok: true,
+      message: `Snapshot aktualisiert: ${data.branches.length} Branches, ${data.tags.length} Tags.`,
+      fetchedAt: new Date().toISOString(),
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    await prisma.project.update({
+      where: { id: project.id },
+      data: { syncError: message, lastSyncedAt: new Date() },
+    });
+    return { ok: false, message };
+  }
+}
+
+/** Owner/Name aus den Feldern oder ersatzweise aus der URL bestimmen. */
+export function resolveRepoRef(project: Project) {
+  if (project.repoOwner && project.repoName) {
+    return { owner: project.repoOwner, name: project.repoName };
+  }
+  if (project.repoUrl) {
+    const parsed = parseRepoUrl(project.repoUrl);
+    if (parsed) return { owner: parsed.owner, name: parsed.name };
+  }
+  return null;
+}
+
+async function persistSnapshot(projectId: string, data: RepoSnapshotData) {
+  const latestCommit = data.commits[0] ?? null;
+  const latestRelease =
+    data.releases.find((release) => !release.draft && !release.prerelease) ?? data.releases[0] ?? null;
+  const latestTag = data.tags[0]?.name ?? latestRelease?.tag ?? null;
+
+  const payload = {
+    fullName: data.fullName,
+    description: data.description,
+    defaultBranch: data.defaultBranch,
+    htmlUrl: data.htmlUrl,
+    visibility: data.visibility,
+    stars: data.stars,
+    forks: data.forks,
+    openIssues: data.openIssues,
+    openPullRequests: data.openPullRequests,
+    sizeKb: data.sizeKb,
+    lastCommitSha: latestCommit?.sha ?? null,
+    lastCommitMessage: latestCommit?.message ?? null,
+    lastCommitAuthor: latestCommit?.author ?? null,
+    lastCommitAt: latestCommit?.date ? new Date(latestCommit.date) : null,
+    latestTag,
+    latestRelease: latestRelease?.name ?? null,
+    latestReleaseAt: latestRelease?.publishedAt ? new Date(latestRelease.publishedAt) : null,
+    branchCount: data.branches.length,
+    tagCount: data.tags.length,
+    branches: data.branches as unknown as object,
+    tags: data.tags as unknown as object,
+    commits: data.commits as unknown as object,
+    releases: data.releases as unknown as object,
+    languages: data.languages as unknown as object,
+    pushedAt: data.pushedAt ? new Date(data.pushedAt) : null,
+    fetchedAt: new Date(),
+  };
+
+  await prisma.$transaction([
+    prisma.repoSnapshot.upsert({
+      where: { projectId },
+      create: { projectId, ...payload },
+      update: payload,
+    }),
+    prisma.project.update({
+      where: { id: projectId },
+      data: {
+        lastSyncedAt: new Date(),
+        syncError: null,
+        defaultBranch: data.defaultBranch,
+        repoUrl: data.htmlUrl ?? undefined,
+      },
+    }),
+  ]);
+}

src/lib/utils.ts

@@ -0,0 +1,96 @@
+/** Kleine Helfer ohne Abhaengigkeiten. */
+
+export function cn(...classes: Array<string | false | null | undefined>): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function slugify(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/ä/g, "ae")
+    .replace(/ö/g, "oe")
+    .replace(/ü/g, "ue")
+    .replace(/ß/g, "ss")
+    .normalize("NFD")
+    .replace(/[̀-ͯ]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+}
+
+const DATE_FORMAT = new Intl.DateTimeFormat("de-DE", {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric",
+  timeZone: "Europe/Berlin",
+});
+
+const DATETIME_FORMAT = new Intl.DateTimeFormat("de-DE", {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  timeZone: "Europe/Berlin",
+});
+
+export function formatDate(value: Date | string | null | undefined): string {
+  if (!value) return "–";
+  const date = typeof value === "string" ? new Date(value) : value;
+  if (Number.isNaN(date.getTime())) return "–";
+  return DATE_FORMAT.format(date);
+}
+
+export function formatDateTime(value: Date | string | null | undefined): string {
+  if (!value) return "–";
+  const date = typeof value === "string" ? new Date(value) : value;
+  if (Number.isNaN(date.getTime())) return "–";
+  return DATETIME_FORMAT.format(date);
+}
+
+/**
+ * "vor 3 Tagen". Bewusst grob gerundet – kleine Abweichungen zwischen
+ * Server-Render und Hydration fallen damit nicht auf.
+ */
+export function formatRelative(value: Date | string | null | undefined): string {
+  if (!value) return "nie";
+  const date = typeof value === "string" ? new Date(value) : value;
+  if (Number.isNaN(date.getTime())) return "nie";
+
+  const seconds = Math.round((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "gerade eben";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `vor ${minutes} Min.`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `vor ${hours} Std.`;
+  const days = Math.round(hours / 24);
+  if (days < 31) return `vor ${days} ${days === 1 ? "Tag" : "Tagen"}`;
+  const months = Math.round(days / 30);
+  if (months < 12) return `vor ${months} Mon.`;
+  return `vor ${Math.round(months / 12)} J.`;
+}
+
+export function truncate(value: string, max = 120): string {
+  if (value.length <= max) return value;
+  return `${value.slice(0, max - 1).trimEnd()}…`;
+}
+
+export function firstLine(value: string | null | undefined): string {
+  if (!value) return "";
+  return value.split("\n")[0] ?? "";
+}
+
+export function parseTags(input: string): string[] {
+  return Array.from(
+    new Set(
+      input
+        .split(",")
+        .map((tag) => tag.trim().toLowerCase())
+        .filter(Boolean),
+    ),
+  ).slice(0, 12);
+}
+
+export function formatNumber(value: number): string {
+  return new Intl.NumberFormat("de-DE").format(value);
+}

src/lib/validation.ts

@@ -0,0 +1,64 @@
+import { z } from "zod";
+
+const STATUS = ["IDEA", "OPEN", "PLANNING", "IN_DEVELOPMENT", "DONE", "ARCHIVED"] as const;
+const PROVIDERS = ["GITHUB", "GITLAB", "GITEA"] as const;
+const ACCENTS = ["violet", "cyan", "emerald", "amber", "rose", "blue"] as const;
+
+const emptyToNull = (value: unknown) =>
+  typeof value === "string" && value.trim() === "" ? null : value;
+
+export const projectCreateSchema = z.object({
+  name: z.string().trim().min(1, "Name darf nicht leer sein").max(120),
+  summary: z.preprocess(emptyToNull, z.string().trim().max(280).nullable().optional()),
+  description: z.preprocess(emptyToNull, z.string().trim().max(20000).nullable().optional()),
+  status: z.enum(STATUS).default("IDEA"),
+  priority: z.coerce.number().int().min(1).max(4).default(2),
+  progress: z.coerce.number().int().min(0).max(100).default(0),
+  accent: z.enum(ACCENTS).default("violet"),
+  tags: z.array(z.string().trim().min(1).max(30)).max(12).default([]),
+  favorite: z.boolean().default(false),
+  repoUrl: z.preprocess(emptyToNull, z.string().trim().max(500).nullable().optional()),
+  repoOwner: z.preprocess(emptyToNull, z.string().trim().max(200).nullable().optional()),
+  repoName: z.preprocess(emptyToNull, z.string().trim().max(200).nullable().optional()),
+  connectionId: z.preprocess(emptyToNull, z.string().trim().nullable().optional()),
+});
+
+export const projectUpdateSchema = projectCreateSchema.partial();
+
+export const noteCreateSchema = z.object({
+  title: z.preprocess(emptyToNull, z.string().trim().max(160).nullable().optional()),
+  content: z.string().trim().min(1, "Notiz darf nicht leer sein").max(20000),
+  pinned: z.boolean().default(false),
+});
+
+export const noteUpdateSchema = noteCreateSchema.partial();
+
+export const connectionCreateSchema = z.object({
+  name: z.string().trim().min(1, "Name darf nicht leer sein").max(80),
+  provider: z.enum(PROVIDERS),
+  baseUrl: z
+    .string()
+    .trim()
+    .min(1, "Basis-URL fehlt")
+    .max(300)
+    .refine((value) => /^https?:\/\//i.test(value), "URL muss mit http:// oder https:// beginnen"),
+  username: z.preprocess(emptyToNull, z.string().trim().max(120).nullable().optional()),
+  token: z.preprocess(emptyToNull, z.string().trim().max(500).nullable().optional()),
+});
+
+export const connectionUpdateSchema = connectionCreateSchema.partial();
+
+export type ProjectCreateInput = z.infer<typeof projectCreateSchema>;
+export type ProjectUpdateInput = z.infer<typeof projectUpdateSchema>;
+export type NoteCreateInput = z.infer<typeof noteCreateSchema>;
+export type ConnectionCreateInput = z.infer<typeof connectionCreateSchema>;
+
+/** Formt Zod-Fehler in ein flaches Objekt fuer die API-Antwort. */
+export function formatZodError(error: z.ZodError): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const issue of error.issues) {
+    const key = issue.path.join(".") || "_";
+    if (!result[key]) result[key] = issue.message;
+  }
+  return result;
+}

src/types/index.ts

@@ -0,0 +1,59 @@
+import type { GitProvider, Note, Project, ProjectStatus, RepoSnapshot } from "@prisma/client";
+import type { BranchInfo, CommitInfo, ReleaseInfo, TagInfo } from "@/lib/git/types";
+
+/** Verbindung ohne Geheimnisse – so wird sie an den Browser gegeben. */
+export interface ConnectionSafe {
+  id: string;
+  name: string;
+  provider: GitProvider;
+  baseUrl: string;
+  username: string | null;
+  tokenHint: string | null;
+  lastCheckedAt: Date | string | null;
+  lastCheckOk: boolean | null;
+  lastCheckMessage: string | null;
+  createdAt: Date | string;
+  updatedAt: Date | string;
+}
+
+export interface ConnectionWithCount extends ConnectionSafe {
+  _count?: { projects: number };
+}
+
+export interface ProjectListItem extends Project {
+  connection: ConnectionSafe | null;
+  snapshot: RepoSnapshot | null;
+  _count: { notes: number };
+}
+
+export interface ProjectDetail extends Project {
+  connection: ConnectionSafe | null;
+  snapshot: RepoSnapshot | null;
+  notes: Note[];
+  _count: { notes: number };
+}
+
+export interface RepoListEntry {
+  fullPath: string;
+  owner: string;
+  name: string;
+  description: string | null;
+  htmlUrl: string;
+  defaultBranch: string | null;
+  visibility: string | null;
+  updatedAt: string | null;
+}
+
+export type { BranchInfo, CommitInfo, Note, ProjectStatus, ReleaseInfo, RepoSnapshot, TagInfo };
+
+/** Prisma liefert Json als unknown – hier bequem in Arrays zurueckholen. */
+export function asArray<T>(value: unknown): T[] {
+  return Array.isArray(value) ? (value as T[]) : [];
+}
+
+export function asRecord(value: unknown): Record<string, number> {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, number>;
+  }
+  return {};
+}