diff --git a/.docs/LemonSpace_Manifest_v1_2.md b/.docs/LemonSpace_Manifest_v1_2.md
new file mode 100644
index 0000000..73fb7eb
--- /dev/null
+++ b/.docs/LemonSpace_Manifest_v1_2.md
@@ -0,0 +1,237 @@
+# đ LemonSpace â Produkt-Manifest
+
+**v1.2 â MĂ€rz 2026**
+
+*Self-Hosted, Source-Available Creative Workspace*
+
+---
+
+## 1. Vision
+
+LemonSpace ist eine self-hosted, source-available Alternative zu Freepik Spaces. Eine visuelle ArbeitsflĂ€che, auf der kreative Teams aus wenigen Input-Assets schnell kampagnenfĂ€hige Bildvarianten erzeugen â mit KI-gestĂŒtzter Generierung, durchdachter Latenz-UX und voller Kontrolle ĂŒber ihre Daten.
+
+Das Produkt positioniert sich nicht als generisches âAI Creative Workspace", sondern löst ein spezifisches Problem: **Vom Rohbild zur fertigen Kampagnenvariante in Minuten statt Stunden** â auf eigener Infrastruktur oder als gehosteter Service.
+
+---
+
+## 2. Problemstellung
+
+Freepik Spaces zeigt, dass KI-gestĂŒtzte Canvas-Workflows funktionieren. Aber:
+
+- ProprietÀres SaaS ohne Self-Hosting-Option
+- AbhĂ€ngig von Freepiks Pricing, Modellauswahl und VerfĂŒgbarkeit
+- Keine Anpassbarkeit oder Erweiterbarkeit
+- Datenschutzbedenken bei kreativen Assets auf fremden Servern
+
+---
+
+## 3. PrimÀrer ICP
+
+**Kleine Design- und Marketing-Teams (2â10 Personen)**, die aus wenigen Input-Assets schnell kampagnenfĂ€hige Bildvarianten erzeugen wollen, ohne ihre Daten in generischen SaaS-Tools zu verstreuen.
+
+### Typisches Profil
+
+- In-House-Designteam oder kleine Agentur
+- RegelmĂ€Ăig Social-Media-, Kampagnen- oder Produktbilder
+- Entscheider oder Budget-Owner fĂŒr Creative-Tools
+- Datenschutz und Kontrolle ĂŒber Assets sind kaufentscheidend
+
+> **SekundĂ€re Segmente (nicht Phase 1):** Entwickler/Tech-Teams (Self-Hosted-Anpassung), Compliance-sensible Unternehmen (Regulatorik), Open-Source-Community (Contributions). Diese Segmente werden adressiert, sobald der Kern-Job fĂŒr den primĂ€ren ICP validiert ist.
+
+---
+
+## 4. Der eine MVP-Job
+
+Phase 1 löst genau einen End-to-End-Job so gut, dass Nutzer wiederkommen oder zahlen:
+
+> **Upload Bilder â Prompt / Brief â Bildvarianten generieren â Vergleichen â Export**
+>
+> *Alles, was diesen Flow nicht direkt besser macht, ist erstmal verdÀchtig.*
+
+### Konkret bedeutet das fĂŒr Phase 1
+
+1. Nutzer lĂ€dt 1â5 Produktbilder auf den Canvas (Bild-Node)
+2. Schreibt einen Prompt oder Brief direkt am Canvas (Prompt-Node â jetzt Phase 1)
+3. Generiert 4â8 Bildvarianten per KI (KI-Bild-Nodes)
+4. Vergleicht Ergebnisse nebeneinander (Compare-Node â jetzt Phase 1)
+5. Exportiert fertige Varianten als PNG oder ZIP (Export â jetzt Phase 1)
+
+> **Inkonsistenzen aus v1.0 behoben:** Prompt-Node und Compare-Node sind in Phase 1 vorgezogen, weil sie fĂŒr den Kern-Job essenziell sind. Export (PNG/ZIP) ist ebenfalls Phase 1 â ohne Export gibt es kein âJob done".
+
+---
+
+## 5. Node-System â Phase 1
+
+Nur die Nodes, die den MVP-Job ermöglichen. Die vollstÀndige Node-Taxonomie (5 Kategorien, 25+ Node-Typen) wird in einem separaten **Node Spec Doc** dokumentiert.
+
+| Node | Kategorie | Rolle im MVP-Job |
+|------|-----------|------------------|
+| Bild | Quelle | Upload eigener Bilder (PNG, JPG, WebP) oder Einbindung per URL |
+| Text | Quelle | Freitextfeld fĂŒr Copy, Brief, Beschreibungen â semantisch kein Prompt |
+| Prompt | Quelle | Dedizierter Node fĂŒr Modellinstruktionen. Verbindet sich mit KI-Nodes |
+| KI-Bild | KI-Ausgabe | Output eines Bildgenerierungs-Calls. Speichert Prompt, Modell, Parameter |
+| Gruppe | Layout | Container fĂŒr Nodes. Collapse/Expand, benannte Scopes |
+| Frame | Layout | Artboard mit definierter Auflösung. Export-Boundary fĂŒr PNG/ZIP |
+| Notiz | Layout | Annotation auf dem Canvas. Markdown, kein Datenanschluss |
+| Compare | Layout | Zwei Bilder nebeneinander mit interaktivem Slider |
+
+### Ausblick: SpÀtere Phasen
+
+Transformation (BG entfernen, Upscale, Crop), Steuerung & Flow (Splitter, Loop, Agent, Mixer, Weiche), erweiterte Layout-Nodes (Text-Overlay, Kommentar, PrÀsentation) und weitere Quell-Nodes (Video, Asset, Farbe/Palette). Details im Node Spec Doc.
+
+---
+
+## 6. UX-Prinzipien
+
+Die UX-Strategie fĂŒr Latenzen ist **Kern-DNA des Produkts**, nicht Nice-to-have. Sie unterscheidet LemonSpace von Tools, die KI-Wartezeiten als globale Spinner behandeln.
+
+### Node-Status-Modell
+
+Jeder ausfĂŒhrende Node zeigt seinen Zustand visuell direkt auf dem Canvas:
+
+```
+idle â analyzing â clarifying â executing (Step X/N) â done | error
+```
+
+Bei Fehler: Error-State direkt am Node mit kurzem Hinweis (âTimeout â Credits wurden nicht abgebucht"). Kein globales Loading-Banner, kein blockierendes Modal.
+
+### Skeleton Nodes
+
+Sobald ein Agent seinen Execution-Plan erstellt hat, erscheinen Skeleton-Nodes auf dem Canvas â noch bevor API-Calls laufen. Skeletons sind verschiebbar, zeigen Node-Typ-Icons und fĂŒllen sich sequenziell mit echten Outputs. Visuell: gedimmter Rahmen mit Shimmer-Effekt.
+
+### Browser Notifications
+
+Opt-in via Browser Notifications API: Bei Tab-Wechsel und fertigem Job erhÀlt der Nutzer eine native Benachrichtigung. Nicht erzwungen.
+
+---
+
+## 7. Bewusste Entscheidungen
+
+Kompakt statt erschöpfend. Details wandern in eigene Architecture Decision Records (ADRs).
+
+| Thema | Entscheidung | Status |
+|-------|-------------|--------|
+| Backend | Convex (self-hosted). Bewusster Lock-in fĂŒr Realtime, Storage, Jobs. Migrations-Pfad: Convex Cloud EU. | â
|
+| Auth | Better Auth (self-hosted, open-source) | â
|
+| AI Layer | OpenRouter als primĂ€re AI-Schicht. 9 Image-Modelle, Text/Reasoning via Claude / GPT. | â
|
+| Self-hosted KI | rembg, Real-ESRGAN, GFPGAN â kostenlos, separate Repos | â
|
+| Payment | Lemon Squeezy (Merchant of Record, VAT-Handling) | â
|
+| Credits | Reservation + Commit. Gecachte Preise (Redis, TTL ~10min). Kein nachtrĂ€glicher Ausgleich. | â
|
+| Pricing | 4 Tiers: Free / Starter âŹ9 / Pro âŹ49 / Business âŹ99. 30% Marge, 70% â Credits. | â
|
+| Lizenz | BSL 1.1, 3J Change Date â Apache 2.0. Private Nutzung frei. | â
|
+| Repo-Strategie | Zwei unabhĂ€ngige Repos (lemonspace-web + lemonspace-landing). Auth-Cookie-Sharing via `.lemonspace.io`. | â
|
+| Frontend | Next.js 16 + Tailwind v4 + ShadCN | â
|
+| Canvas | @xyflow/react + dnd-kit | â
|
+| E-Mail | useSend + Stalwart (Self-Hosted). FĂŒr lemonspace.app pragmatisch externer SMTP möglich. | â
|
+| Kollaboration | Phase 3. Phase 1 fokussiert auf Solo-/Kleinteam-Workflows. | âł |
+| Abuse Prevention | Daily Caps, Concurrency Limits, Freemium-Guardrails â Design TBD. | âł |
+
+---
+
+## 8. Was wir bewusst nicht bauen (Phase 1)
+
+Fokus heiĂt Nein sagen. Diese Features sind bewusst ausgeklammert, nicht vergessen:
+
+| Feature | Warum nicht jetzt |
+|---------|-------------------|
+| Echtzeit-Kollaboration | Kein KernbedĂŒrfnis des primĂ€ren ICP in Phase 1. Solo-/Kleinteam reicht. |
+| Agent Nodes | Zu komplex fĂŒr MVP. Erst bauen, wenn der Basis-Job validiert ist. |
+| Video-Generierung | Anderer Job, andere Kosten, anderer ICP. |
+| Freepik Asset Browser | Nice-to-have, nicht Kern-Job. |
+| Style Transfer / GFPGAN | Transformation-Nodes kommen in Phase 2â3. |
+| Team-Features | Workspaces, Rollen, Rechte, Seat-Management â erst wenn Business-Tier validiert. |
+| docker-compose.yml | Self-Hosting dokumentieren, aber nicht den Hosted-MVP verzögern. |
+| E2E-Testing | Neubewertung bei Skalierung. |
+
+---
+
+## 9. Erfolgskriterien
+
+Ohne messbare Ziele ist jedes PRD WĂŒnsch-dir-was. Diese Metriken entscheiden, ob Phase 1 funktioniert:
+
+### Produkt-Metriken
+
+| Metrik | Ziel (Phase 1) | Messung |
+|--------|----------------|---------|
+| Time to first output | < 3 Minuten | Onboarding-Flow-Tracking |
+| Erfolgsquote pro Generierung | > 90% | API-Success-Rate |
+| Median-Latenz Bildgenerierung | < 10 Sekunden | Node-Status-Events |
+| Export-Rate | > 40% der Sessions | Export-Events |
+| D7-Retention | > 25% | Rybbit Analytics |
+| W4-Retention | > 15% | Rybbit Analytics |
+
+### Business-Metriken
+
+| Metrik | Ziel (6 Monate) | Messung |
+|--------|-----------------|---------|
+| Conversion Free â Paid | > 5% | Lemon Squeezy Events |
+| COGS pro aktivem Workspace | < 70% des Abo-Preises | OpenRouter-Kosten / aktive User |
+| MRR | âŹ2.000+ | Lemon Squeezy Dashboard |
+| Churn (monatlich) | < 8% | Subscription-Events |
+
+---
+
+## 10. Abuse Prevention & Guardrails
+
+Ein AI-Kreativtool mit Free-Tier und Premium-Modellen braucht von Tag 1 SchutzmaĂnahmen. Kein Randthema.
+
+### Geplante MaĂnahmen
+
+- Daily Generation Caps pro Tier (Free: 10/Tag, Starter: 50, Pro: 200, Business: 500)
+- Concurrency Limits: max. 2 parallele Generierungen (Free: 1)
+- Rate Limiting auf allen API-Endpunkten (Redis-backed)
+- Premium-Modelle erst ab Starter-Tier (Free nur Budget-Modelle)
+- Top-Up-Limit pro Monat (verhindert Missbrauch des Selbstkostenpreises)
+- Account-Verifizierung per E-Mail, optional Telefon bei Abuse-Verdacht
+
+> **Offene Entscheidung:** Konkretes Design der Caps und Limits wird nach ersten Nutzungsdaten kalibriert. Initiale Werte sind konservativ.
+
+---
+
+## 11. Lizenz-Klarstellung
+
+LemonSpace ist **Source Available**, nicht Open Source.
+
+| | Community Use | Commercial Self-Host | Hosted SaaS |
+|---|---|---|---|
+| Zugang | Quellcode öffentlich | Separate Lizenz | lemonspace.app |
+| Kosten | Kostenlos | LizenzgebĂŒhr (TBD) | Abo-Tiers |
+| Nutzung | Privat / persönlich | Unternehmen, produktiv | Jeder |
+| Self-hosted KI | Kostenlos | Kostenlos | Kostenlos |
+| Support | Community | E-Mail | In-App |
+
+BSL 1.1 mit 3-Jahres-Change-Date zu Apache 2.0. Nach Change Date ist jedes Release vollstÀndig Apache-2.0-lizenziert.
+
+---
+
+## 12. NĂ€chste Schritte
+
+Priorisiert nach AbhÀngigkeiten. Jeder Schritt hat ein klares Artefakt.
+
+| # | Schritt | Artefakt |
+|---|---------|----------|
+| 1 | Repos scaffolden | `lemonspace-web` (Next.js + Convex + BetterAuth) + `lemonspace-landing` (Next.js) |
+| 2 | Convex Schema entwerfen | Schema-Datei mit Node-Typen + Credit-System |
+| 3 | Basis-Canvas mit @xyflow/react | Funktionierender Canvas mit Bild- und Prompt-Nodes |
+| 4 | OpenRouter-Prototyp | Image Gen (Gemini 2.5 Flash) funktioniert im Canvas |
+| 5 | Compare + Export | PNG/ZIP-Export aus Frame-Nodes |
+| 6 | Better Auth + Credit-System | Login, Balance-Tracking, Reservation+Commit |
+| 7 | Lemon Squeezy Integration | Checkout, Webhooks, Credit-Zuweisung |
+
+---
+
+## 13. Ausgelagerte Dokumente
+
+Folgende Themen werden in eigenen Dokumenten vertieft. Das Manifest bleibt schlank.
+
+| Dokument | Inhalt |
+|----------|--------|
+| System Design Doc | Tech Stack mit Versionen, Zwei-Repo-Strategie, Infra-Details, Convex-Architektur, Redis, Cloudflare |
+| Node Spec Doc | VollstÀndige Node-Taxonomie (5 Kategorien, 25+ Typen), Datenmodell pro Node-Typ |
+| Credit & Pricing Doc | Detaillierte Pricing-Tabellen, Credit-Mechanik, Reservation+Commit-Flow, Agent Partial Failure |
+| Self-Hosting Guide | docker-compose.yml, .env.example, Setup-README, Coolify-Anleitung |
+| ADR-Sammlung | Architecture Decision Records fĂŒr Convex, OpenRouter, BSL 1.1, useSend, etc. |
+
+---
+
+*LemonSpace Manifest v1.2 â MĂ€rz 2026*
diff --git a/.docs/LemonSpace_PRD_v1_1.md b/.docs/LemonSpace_PRD_v1_1.md
new file mode 100644
index 0000000..8535e65
--- /dev/null
+++ b/.docs/LemonSpace_PRD_v1_1.md
@@ -0,0 +1,560 @@
+# đ LemonSpace
+## Product Requirements Document
+*Self-Hosted, Source-Available Alternative to Freepik Spaces*
+
+| Version | Status | Datum | Projekt |
+|---------|--------|-------|---------|
+| v1.1 | Draft | MĂ€rz 2026 | lemonspace.app |
+
+---
+
+## Changelog
+
+| Version | Ănderung |
+|---------|----------|
+| v0.2 | KI-Integrationsstrategie: OpenRouter als primÀre AI-Layer, Freepik API auf Stock-Assets reduziert |
+| v0.3 | Agent Layer eingefĂŒhrt: Agent Nodes als Canvas-native Smart Batch Processor |
+| v0.4 | VollstĂ€ndige Node-Taxonomie: fĂŒnf Kategorien, Semantik je Node-Typ |
+| v0.5 | Auth: Better Auth. Pricing: 4-Tier-Abo, Credit-System 30% Marge. Tailwind v4 bestÀtigt |
+| v0.6 | Lizenz: BSL 1.1 mit 3-Jahres-Change-Date zu Apache 2.0 |
+| v0.7 | Tech Stack: Redis, Zod, Unsend + Stalwart, Rybbit, Sentry, Cloudflare |
+| v0.8 | Text-Overlay Node eingefĂŒhrt (Kategorie 5: Canvas & Layout) |
+| v0.9 | Zwei-Repo-Strategie (Web-App + Landing Page), Auth-Cookie-Sharing |
+| v1.0 | Self-Hosting-Strategie, Credit Reservation+Commit, UX-Latenzen/Skeleton-Nodes, Convex Lock-in dokumentiert |
+| v1.1 | Monorepo verworfen â Zwei unabhĂ€ngige Repos (lemonspace-web + lemonspace-landing), Auth-Cookie-Sharing via .lemonspace.io |
+
+---
+
+## 1. Vision & Zielsetzung
+
+LemonSpace ist eine self-hosted, source-available Alternative zu Freepik Spaces â ein kollaboratives, KI-gestĂŒtztes Creative-Workflow-Tool mit einer Infinite-Canvas-OberflĂ€che. Ziel ist ein freier und erweiterbarer Workspace fĂŒr kreative Teams, der auf eigener Infrastruktur betrieben werden kann.
+
+---
+
+## 2. Problemstellung
+
+Freepik Spaces ist ein leistungsstarkes Tool fĂŒr KI-gestĂŒtzte kreative Workflows, aber:
+
+- ProprietÀres SaaS-Produkt ohne Self-Hosting-Option
+- Nutzer abhĂ€ngig von Freepiks Pricing und VerfĂŒgbarkeit
+- Keine Anpassbarkeit oder Erweiterbarkeit
+- Datenschutzbedenken bei der Speicherung kreativer Assets auf externen Servern
+
+---
+
+## 3. Zielgruppe
+
+| Segment | PrimÀrer Zugang | Beschreibung |
+|---------|-----------------|--------------|
+| Designer & kreative Teams | Gehostete Version (lemonspace.app) | DatensouverĂ€nitĂ€t ohne technischen Aufwand â zahlende Kernkunden |
+| Entwickler & Tech-Teams | Self-Hosted | Anpassbare KI-Canvas-Plattform auf eigener Infra |
+| Compliance-sensible Unternehmen | Self-Hosted | Regulatorische Anforderungen, die Cloud-SaaS einschrÀnken |
+| Open-Source-Community | Self-Hosted / Contributing | Creative-Tools-Ăkosystem, BSL-Lizenz bis Change Date |
+
+---
+
+## 4. Core Features
+
+### 4.1 Infinite Canvas
+
+- Zoom, Pan und Navigation auf einem unbegrenzten Canvas
+- Nodes als wiederverwendbare kreative Bausteine
+- Drag & Drop von Assets, KI-Outputs und Mediendateien
+- Gruppierung und Layering von Canvas-Elementen
+
+### 4.2 Node-System
+
+Das Canvas-System basiert auf einem erweiterbaren Node-Modell. Nodes sind typisierte Bausteine, die untereinander verbunden werden und Daten weitergeben. Es gibt fĂŒnf Kategorien.
+
+#### Kategorie 1: Quelle
+
+Quelle-Nodes bringen Inhalte in den Canvas. Sie haben keine eingehenden Verbindungen, nur ausgehende.
+
+| Node | Beschreibung | Phase |
+|------|--------------|-------|
+| Bild | Upload eigener Bilder (PNG, JPG, WebP) oder Einbindung per URL. Basis-Asset fĂŒr alle weiteren Operationen. | 1 |
+| Text | Freitextfeld mit Markdown-Support. EnthĂ€lt Inhalte (Copy, Brief, Beschreibung) â semantisch verschieden vom Prompt-Node. | 1 |
+| Prompt | Dedizierter Node fĂŒr Modellinstruktionen. Verbindet sich ausschlieĂlich mit KI-Nodes. | 2 |
+| Farbe / Palette | Definiert Farben oder Farbpaletten als Style-Referenz. Kann an KI-Nodes oder Style-Transfer ĂŒbergeben werden. | 2 |
+| Video | Upload von Videodateien oder Einbindung per Link. Darstellung als Thumbnail-Node, Playback im Panel. | 2 |
+| Asset | Freepik Stock-Assets (Fotos, Vektoren, Icons), direkt aus dem Asset Browser auf den Canvas gezogen. | 2 |
+
+#### Kategorie 2: KI-Ausgabe
+
+KI-Ausgabe-Nodes sind das Ergebnis einer Modell-Operation. Sie werden vom System erzeugt, nicht vom Nutzer angelegt.
+
+| Node | Beschreibung | Phase |
+|------|--------------|-------|
+| KI-Bild | Output eines Bildgenerierungs-Calls. Speichert Prompt, verwendetes Modell und Generierungsparameter. | 1 |
+| KI-Text | Output eines Text/Reasoning-Calls. EnthÀlt generierten Copy, Captions, strukturierte Texte. | 2 |
+| KI-Video | Output eines Videogenerierungs-Calls. Keyframe-basierte Generierung aus Bild-Input möglich. | 2 |
+| Agent-Ausgabe | Bundle-Output eines Agent Nodes. Kann mehrere typisierte Sub-Outputs enthalten. | 3 |
+
+#### Kategorie 3: Transformation
+
+| Node | Beschreibung | Phase |
+|------|--------------|-------|
+| Crop / Resize | Freie Bildausschnitt-Auswahl direkt auf dem Canvas, mit Aspect-Ratio-Lock. | 2 |
+| BG entfernen | Hintergrundentfernung via rembg. Output ist ein freigestelltes Bild. Batch-Modus möglich. | 2 |
+| Upscale | Hochskalierung via Real-ESRGAN. UnterstĂŒtzt Faktoren 2Ă, 4Ă, 8Ă. | 2 |
+| Style Transfer | ĂbertrĂ€gt visuellen Stil eines Referenzbildes auf einen anderen Input. | 3 |
+| Gesicht | Face Restoration via GFPGAN. Verbessert Gesichtsdetails in generierten oder degradierten Bildern. | 3 |
+
+#### Kategorie 4: Steuerung & Flow
+
+| Node | Semantik | Beschreibung | Phase |
+|------|----------|--------------|-------|
+| Splitter | 1 â N | Verteilt 1 Input auf N identische oder abgeleitete Outputs. Ohne Bedingung. | 2 |
+| Loop | Liste â N | Iteriert ĂŒber eine Liste von Inputs und fĂŒhrt dieselbe verknĂŒpfte Operation fĂŒr jeden Eintrag aus. | 2 |
+| Agent | N â Plan â N | LLM-Orchestrator. Analysiert Inputs, plant strukturierten AusfĂŒhrungsplan, delegiert Operationen. | 2 |
+| Mixer / Merge | N â 1 | Kombiniert N Inputs zu 1 Output durch Ăberblendung, Komposition oder Selektion. | 3 |
+| Weiche | 1 â Pfad A/B/... | Bedingter Router. Leitet den Input anhand einer definierbaren Bedingung auf einen von mehreren Ausgangspfaden. | 3 |
+
+#### Kategorie 5: Canvas & Layout
+
+| Node | Beschreibung | Phase |
+|------|--------------|-------|
+| Gruppe | Container fĂŒr andere Nodes. UnterstĂŒtzt Collapse/Expand und benannte Scopes. | 1 |
+| Frame | Artboard mit definierter Auflösung. Dient als Export-Boundary. | 1 |
+| Notiz | Annotation auf dem Canvas. Markdown-Support, kein Datenanschluss. | 1 |
+| Text-Overlay | Editierbarer Text-Layer ĂŒber Bild- oder Video-Nodes innerhalb eines Frames. Verbraucht keine Credits. | 2 |
+| Compare | Stellt zwei Bilder nebeneinander mit interaktivem Slider dar. | 2 |
+| Kommentar | Kollaborations-Node fĂŒr Reviews. UnterstĂŒtzt Threads, @mentions und Resolve-Status. | 3 |
+| PrÀsentation | Definiert Canvas-Bereiche als geordnete Slideshow. Export als PDF möglich. | 3 |
+
+### 4.3 Agent Nodes
+
+Agent Nodes sind ein spezieller Node-Typ auf dem Canvas. Sie fungieren als Smart Batch Processor: Sie nehmen mehrere Input-Nodes entgegen, orchestrieren komplexe Multi-Step-Workflows ĂŒber ein Text/Reasoning LLM und produzieren mehrere Output-Nodes direkt auf dem Canvas.
+
+**AusfĂŒhrungsphasen:**
+
+1. **Analyse:** Agent erhĂ€lt alle verbundenen Inputs, LLM prĂŒft ob alle nötigen Informationen vorhanden sind
+2. **Clarification (optional):** Fehlen Angaben, stellt der Agent gezielt RĂŒckfragen direkt am Node
+3. **Execution:** LLM plant einen strukturierten Output-Plan (JSON), der dann als Batch abgearbeitet wird
+4. **Output:** Ergebnisse landen als neue Nodes auf dem Canvas, verbunden mit dem Agent Node
+
+**Vordefinierte Agent Templates:**
+
+| Template | Typische Inputs | Typische Outputs |
+|----------|-----------------|------------------|
+| Instagram Curator | Produktfotos, Brand Brief, Zielgruppe | Feed Posts, Text-Overlays, Captions, Hashtag-Sets |
+| (weitere folgen) | â | â |
+
+---
+
+## 5. Tech Stack
+
+| Bereich | Technologie | Version / Hinweis |
+|---------|-------------|-------------------|
+| Frontend Framework | Next.js | 16.1.1 â App Router, Server Components |
+| Styling | Tailwind CSS | v4 |
+| UI Komponenten | ShadCN/UI | Aktuelle stabile Version |
+| Backend / Realtime | Convex | Self-hosted via convex-backend |
+| Authentifizierung | Better Auth | Self-hosted, open-source |
+| Canvas / Flow | @xyflow/react | ehem. react-flow-renderer |
+| Drag & Drop | dnd-kit | Empfohlen ĂŒber react-dnd (bessere Performance) |
+| Deployment | Coolify | VPS-Deployment fĂŒr alle Self-hosted Services |
+| Payment | Lemon Squeezy | Merchant of Record, VAT-Handling |
+| Input Validation | Zod | Frontend + Backend, Convex Mutations |
+| In-Memory Store | Redis | Self-hosted via Coolify |
+| Rate Limiting | Redis-backed | Next.js Middleware / Route Handler |
+| E-Mail | Unsend + Stalwart | Self-hosted via Coolify |
+| Analytics | Rybbit | Self-hosted via Coolify |
+| Error Tracking | Sentry Cloud | Free Tier (5.000 Errors/Monat) |
+| DNS / DDoS / CDN | Cloudflare | Domain-Routing, DDoS-Schutz, Asset-Caching |
+| Package Manager | pnpm | Je Repo |
+
+### Zwei-Repo-Strategie
+
+Statt eines Monorepos werden zwei unabhĂ€ngige Repositories gepflegt. Zwischen den Repos gibt es keinen geteilten Code â die Landing Page hat keine AbhĂ€ngigkeit auf Convex-Schemas, Node-Types oder andere App-Logik.
+
+| Repo | Domain | Inhalt |
+|------|--------|--------|
+| `lemonspace-web` | app.lemonspace.io | Next.js App (Canvas, Dashboard, Auth, AI, Convex) |
+| `lemonspace-landing` | lemonspace.io | Next.js Marketing Site |
+
+**Auth-Cookie-Sharing:** BetterAuth setzt einen Session-Cookie auf `.lemonspace.io` (Dot-Prefix = gilt fĂŒr alle Subdomains). Die Landing Page liest diesen Cookie, um den Login-State zu erkennen und zwischen "Get Started" und "Dashboard" Button zu wechseln. Die Landing Page fĂŒhrt keine Auth-Operationen durch â sie liest nur den Cookie.
+
+### Self-Hosting-Strategie
+
+Self-Hosting richtet sich primĂ€r an technisch versierte Nutzer und Entwickler. Die gehostete Version (lemonspace.app) ist der empfohlene Weg fĂŒr alle anderen â insbesondere fĂŒr Designer und kreative Teams ohne DevOps-Erfahrung.
+
+Das Self-Hosting-Paket umfasst:
+
+- **`docker-compose.yml`** â fasst alle Services zusammen: Next.js, Convex, Redis, Stalwart, Rybbit, rembg, Real-ESRGAN, GFPGAN
+- **`.env.example`** â alle Umgebungsvariablen mit Kommentaren und Standardwerten
+- **Setup-README** â Schritt-fĂŒr-Schritt-Anleitung (Voraussetzungen: Docker + Coolify oder plain Docker)
+
+> **Hinweis:** Self-hosted KI-Services (rembg, Real-ESRGAN, GFPGAN) bleiben in separaten Repositories mit eigenem Docker/Infra-Lifecycle und werden ĂŒber Coolify unabhĂ€ngig deployt.
+
+### Convex: Architektonische Entscheidung & Lock-in
+
+Convex liefert Realtime-Sync, File Storage und Background Jobs out-of-the-box, ohne dass eine eigene WebSocket-Infrastruktur, S3-Integration und Queue-Lösung zusammengestĂŒckelt werden muss. Dieser Geschwindigkeitsvorteil rechtfertigt den bewussten Vendor Lock-in.
+
+> **Risiko (bewusst akzeptiert):** Der gesamte Realtime-, Storage- und Job-Stack ist an Convex gebunden. Eine spĂ€tere Migration ist aufwĂ€ndig. Es wird keine kĂŒnstliche Abstraktionsschicht eingebaut, da sie den Kernvorteil von Convex aufheben wĂŒrde.
+
+Dokumentierter Migrations-Pfad bei Skalierung: Convex Cloud mit EU-Standort. Convex bietet das eigene Migrations-Tooling und kennt das Ăkosystem. Self-hosted Convex bleibt die Default-Strategie fĂŒr Phase 1.
+
+---
+
+## 6. KI-Integrationsstrategie
+
+### Zwei LLM-Rollen im System
+
+| Rolle | Zweck | Beispielmodelle | Aufgerufen von |
+|-------|-------|-----------------|----------------|
+| Text / Reasoning | Agent-Logik, Planung, Clarification, Copywriting | Claude 3.5 Sonnet, GPT-4o | Agent Node |
+| Image Generation | Bildgenerierung auf dem Canvas | Gemini 2.5 Flash Image, Flux.1 Pro, GPT-5 Image | Canvas-Aktionen + Agent Node |
+
+### OpenRouter â Image Generation
+
+| Modell | OpenRouter ID | StÀrke | ~Kosten/Bild |
+|--------|---------------|--------|--------------|
+| Gemini 2.5 Flash Image | google/gemini-2.5-flash-image | Multi-Turn Editing, gĂŒnstig | ~âŹ0,02â0,04 |
+| FLUX.2 Klein 4B | black-forest-labs/flux.2-klein-4b | Photorealismus, schnellstes Flux | ~âŹ0,01â0,03 |
+| Seedream 4.5 | bytedance-seed/seedream-4.5 | Editing-Konsistenz, Portraits | ~âŹ0,04 |
+| Gemini 3.1 Flash Image | google/gemini-3.1-flash-image-preview | Pro-QualitĂ€t bei Flash-Speed | ~âŹ0,04â0,08 |
+| GPT-5 Image Mini | openai/gpt-5-image-mini | Gutes Preis-Leistungs-VerhĂ€ltnis | ~âŹ0,04â0,08 |
+| Riverflow V2 Fast | sourceful/riverflow-v2-fast | Custom Font Rendering, schnell | ~âŹ0,02 |
+| Riverflow V2 Pro | sourceful/riverflow-v2-pro | Text-Rendering, 4K Output | ~âŹ0,15â0,33 |
+| Gemini 3 Pro Image | google/gemini-3-pro-image-preview | Multi-Image, 4K, bestes Text-Rendering | ~âŹ0,08â0,15 |
+| GPT-5 Image | openai/gpt-5-image | Instruction Following, Text in Bild | ~âŹ0,10â0,20 |
+
+### Self-hosted Services
+
+| Service | Funktion | Credits |
+|---------|----------|---------|
+| rembg | Hintergrundentfernung | Kostenlos |
+| Real-ESRGAN | Upscaling (2Ă, 4Ă, 8Ă) | Kostenlos |
+| GFPGAN | Face Restoration | Kostenlos |
+
+---
+
+## 7. High-Level Architektur
+
+```
+ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
+â Next.js Frontend â
+â Infinite Canvas (@xyflow/react + dnd-kit) â
+â â
+â Node-Kategorien: â
+â [Quelle] [KI-Ausgabe] [Transformation] â
+â [Steuerung] [Canvas & Layout] â
+âââââââââââââââââââââââââŹâââââââââââââââââââââââââââââââââââ
+ â
+ âââââââââââŒââââââââââ
+ â Convex Backend â
+ â (Self-hosted) â
+ â - Realtime Sync â
+ â - File Storage â
+ â - Auth â
+ â - Modell-Router â
+ â - Agent Executor â
+ ââââŹâââââââââŹââââŹââââ
+ â â â
+ ââââââââââââââŒâââ âââââŒâââââââââââââââ ââââŒâââââââââââ
+ â OpenRouter â â Self-hosted KI â â Freepik API â
+ â Image Gen + â â rembg / ESRGAN â â (Assets) â
+ â Text/Reason â â GFPGAN â âââââââââââââââ
+ âââââââââââââââââ ââââââââââââââââââââ
+```
+
+---
+
+## 8. Datenmodell (High-Level)
+
+### Canvas & Node
+
+```
+Canvas
+âââ id, name, ownerId, createdAt / updatedAt
+âââ nodes[]
+
+Node (Basis)
+âââ id, canvasId
+âââ type (image | text | prompt | color | video | asset |
+â ai-image | ai-text | ai-video | agent-output |
+â crop | bg-remove | upscale | style-transfer | face-restore |
+â splitter | loop | agent | mixer | switch |
+â group | frame | note | text-overlay | compare | comment | presentation)
+âââ position { x, y }
+âââ size { width, height }
+âââ data (je nach Typ)
+âââ createdAt
+```
+
+### Credit-System
+
+```
+CreditBalance
+âââ id, userId
+âââ balance // tatsĂ€chlich verfĂŒgbare Credits (Euro-Cent)
+âââ reserved // aktuell gesperrte Credits (laufende Jobs)
+âââ available // computed: balance - reserved
+âââ monthlyAllocation // Credits aus dem Abo
+âââ updatedAt
+
+CreditTransaction
+âââ id, userId
+âââ amount // positiv = Gutschrift, negativ = Verbrauch
+âââ type // subscription | topup | usage | reservation | refund
+âââ status // committed | reserved | released | failed
+âââ description // z.B. "Bildgenerierung â Gemini 2.5 Flash Image"
+âââ nodeId? // Referenz auf den auslösenden Node
+âââ openRouterCost? // tatsĂ€chliche OpenRouter-Kosten (gecacht)
+âââ createdAt
+
+Subscription
+âââ id, userId
+âââ tier // free | starter | pro | business
+âââ status // active | cancelled | past_due
+âââ currentPeriodStart / currentPeriodEnd
+âââ lemonSqueezySubscriptionId?
+```
+
+---
+
+## 9. Pricing & Credit-System
+
+### Abo-Stufen
+
+| Tier | Preis/Monat | Marge (30%) | Credits (70%) | Credits gesamt | Zielgruppe |
+|------|-------------|-------------|---------------|----------------|------------|
+| Free | âŹ0 | â | â | âŹ0,50 (Geschenk) | Testen & Evaluieren |
+| Starter | âŹ9 | âŹ2,70 | âŹ6,30 | âŹ6,30 | Einzelnutzer |
+| Pro | âŹ49 | âŹ12,98 | âŹ34,30 | âŹ36,02 (+5%) | Aktive Creator |
+| Business | âŹ99 | âŹ22,77 | âŹ69,30 | âŹ76,23 (+10%) | Teams, hoher Durchsatz |
+
+### Credit Reservation + Commit (Option C)
+
+Credits werden vor jedem KI-Call reserviert und erst nach erfolgreichem Abschluss committed. Bei Fehler werden reservierte Credits automatisch freigegeben â kein manueller Refund-Prozess nötig.
+
+**Flow:**
+
+```
+1. RESERVE â CreditTransaction (type: reservation, status: reserved)
+ CreditBalance.reserved += estimated_cost
+ CreditBalance.available = balance - reserved
+
+2a. SUCCESS â Transaction status: committed
+ CreditBalance.balance -= actual_cost
+ CreditBalance.reserved -= estimated_cost
+
+2b. FAILURE â Transaction status: released
+ CreditBalance.reserved -= estimated_cost
+ (balance bleibt unverĂ€ndert â voller Refund)
+```
+
+> **Preisbasis:** Credits werden auf Basis der gecachten OpenRouter-Preise (Redis, TTL ~10 Minuten) reserviert und abgebucht. Minimale Abweichungen zum tatsÀchlichen API-Preis werden bewusst akzeptiert. Keine nachtrÀgliche Korrektur.
+
+### Agent Partial Failure
+
+Bei Agent-Workflows lÀuft Reservation + Commit pro Suboperation. SchlÀgt Step 3 von 5 fehl: Steps 1+2 sind committed, Step 3 wird released, Steps 4+5 werden nicht mehr reserviert. Nur tatsÀchlich verbrauchte Credits werden berechnet.
+
+### Credit-Verbrauch
+
+| Operation | Modell / Service | UngefÀhre Kosten |
+|-----------|------------------|------------------|
+| Bildgenerierung (Budget) | FLUX.2 Klein 4B | ~âŹ0,01â0,03 |
+| Bildgenerierung (Standard) | Gemini 2.5 Flash Image | ~âŹ0,02â0,04 |
+| Bildgenerierung (Premium) | GPT-5 Image / Nano Banana Pro | ~âŹ0,10â0,20 |
+| Agent Reasoning Call | Claude 3.5 Sonnet | ~âŹ0,01â0,05 |
+| BG-Entfernung | rembg (self-hosted) | Kostenlos |
+| Upscaling | Real-ESRGAN (self-hosted) | Kostenlos |
+| Face Restoration | GFPGAN (self-hosted) | Kostenlos |
+| Canvas-Operationen | â | Kostenlos |
+| Text-Overlay | â | Kostenlos |
+| Export-Funktionen | â | Kostenlos |
+
+---
+
+## 10. UX-Strategie fĂŒr Latenzen
+
+KI-Operationen haben inhĂ€rente Wartezeiten. Einzelne Bildgenerierungen dauern 3â15 Sekunden, Agent-Workflows 20â60+ Sekunden. Die UI ĂŒberbrĂŒckt diese Wartezeiten durch optimistische Darstellung direkt am Node â kein globales Loading-Banner, kein blockierendes Modal.
+
+### Node-Status-Modell
+
+Jeder ausfĂŒhrende Node zeigt seinen Zustand visuell direkt auf dem Canvas:
+
+```
+idle â analyzing â clarifying â executing (Step X/N) â done | error
+```
+
+Agent Nodes zeigen zusĂ€tzlich den Step-Progress wĂ€hrend der Execution ("Generating Feed Post 2/3"). Bei Fehler wechselt der Node in einen Error-State mit kurzem Hinweis direkt am Node ("Timeout â Credits wurden nicht abgebucht").
+
+### Skeleton Nodes
+
+Sobald der Agent seinen Execution-Plan (JSON) erstellt hat, kennt das System Anzahl und Typ aller Output-Nodes. Ab diesem Moment werden Skeleton-Nodes auf dem Canvas platziert â noch bevor ein einziger API-Call fĂŒr die Generierung lĂ€uft.
+
+```
+Agent Status: analyzing
+â Plan fertig: 3x KI-Bild, 2x KI-Text, 1x Text-Overlay
+â 6 Skeleton-Nodes erscheinen auf dem Canvas, korrekt positioniert
+â Agent Status: executing (1/6)
+â Skeletons fĂŒllen sich der Reihe nach mit echten Outputs
+```
+
+- Skeleton-Nodes sind bereits verschiebbar und arrangierbar bevor der Output fertig ist
+- Sobald der Output fertig ist, ersetzt er den Skeleton in-place â Position bleibt erhalten
+- Visuell: gedimmter Node-Rahmen mit Shimmer-Effekt, Node-Typ-Icon sichtbar (Bild vs. Text)
+
+### Browser Notifications (Tab-Wechsel)
+
+- Opt-in Browser Notifications API: wenn der Nutzer den Tab verlÀsst und der Job fertig wird, native Browser-Benachrichtigung
+- Nicht erzwungen â Nutzer die im Tab bleiben sehen den Node-Status direkt
+
+---
+
+## 11. Entwicklungsphasen
+
+### Phase 1 â Foundation (MVP)
+
+**Nodes:**
+- Quelle: Bild, Text
+- KI-Ausgabe: KI-Bild
+- Canvas & Layout: Gruppe, Frame, Notiz
+
+**Infrastruktur & Features:**
+
+| Task | Status |
+|------|--------|
+| Projektsetup: Next.js 16 + Tailwind v4 + ShadCN | â Offen |
+| Zwei Repos aufsetzen (`lemonspace-web` fĂŒr app.lemonspace.io, `lemonspace-landing` fĂŒr lemonspace.io) | â Offen |
+| Convex Self-hosted Backend aufsetzen | â Offen |
+| Basis-Canvas mit @xyflow/react | â Offen |
+| Drag & Drop von Bildern via dnd-kit | â Offen |
+| Authentifizierung via Better Auth | â Offen |
+| OpenRouter Integration (Image Gen, Gemini 2.5 Flash Image) | â Offen |
+| Credit-System: Balance-Tracking, Reservation+Commit, Kosten-Voranzeige | â Offen |
+| Abo-Verwaltung: Free/Starter/Pro/Business Tiers, monatliche Credit-Zuweisung | â Offen |
+| Lemon Squeezy Integration: Checkout, Webhooks, Credit-Zuweisung | â Offen |
+| Credit-Nachkauf (Top-Up) zum Selbstkostenpreis | â Offen |
+| Node-Status-Modell (idle/executing/done/error) direkt am Node | â Offen |
+| docker-compose.yml + .env.example + Setup-README | â Offen |
+
+### Phase 2 â KI-Features
+
+**Nodes:**
+- Quelle: Prompt, Farbe / Palette, Video, Asset
+- KI-Ausgabe: KI-Text, KI-Video
+- Transformation: Crop / Resize, BG entfernen, Upscale
+- Steuerung: Splitter, Loop, Agent
+- Canvas & Layout: Text-Overlay, Compare
+
+**Infrastruktur & Features:**
+
+| Task | Status |
+|------|--------|
+| VollstĂ€ndige OpenRouter Image Gen Integration (alle 9 Modelle) | â Offen |
+| Experten-Modus: Modellauswahl-UI im Canvas AI Panel | â Offen |
+| OpenRouter Text/Reasoning Integration (Claude 3.5 Sonnet) | â Offen |
+| Agent Node: Analyse, Clarification, Execution, Output | â Offen |
+| Skeleton-Nodes: Platzierung nach Plan-Erstellung, sequenzielle BefĂŒllung | â Offen |
+| Browser Notifications API (opt-in, Tab-Wechsel) | â Offen |
+| Erster Agent Template: Instagram Curator | â Offen |
+| Self-hosted KI-Services (rembg, Real-ESRGAN) | â Offen |
+| Freepik Asset Browser (Stock-Fotos, Vektoren) | â Offen |
+| Prompt-History und Re-Generation | â Offen |
+
+### Phase 3 â Kollaboration & Polish
+
+**Nodes:**
+- Transformation: Style Transfer, Gesicht (GFPGAN)
+- Steuerung: Mixer, Weiche
+- Canvas & Layout: Kommentar, PrÀsentation
+
+**Infrastruktur & Features:**
+
+| Task | Status |
+|------|--------|
+| Echtzeit-Kollaboration via Convex Subscriptions | â Offen |
+| Kommentar- und Annotations-System | â Offen |
+| Versions-History | â Offen |
+| Weitere Agent Templates | â Offen |
+| Export-Funktionen (PNG, PDF, ZIP) | â Offen |
+| Performance-Optimierung fĂŒr groĂe Canvases | â Offen |
+
+---
+
+## 12. Offene Entscheidungen
+
+| Thema | Entscheidung / Status |
+|-------|----------------------|
+| Authentifizierung | â
Better Auth (self-hosted, open-source) |
+| Tailwind v4 | â
v4 ist Standard, keine Migration nötig |
+| Pricing / Credit-System | â
4-Tier Abo + Credit-System, 30% Marge, Reservation+Commit |
+| Payment Provider | â
Lemon Squeezy (Merchant of Record, VAT-Handling) |
+| Self-Hosting-Strategie | â
docker-compose.yml + .env.example + README, fĂŒr technisch versierte Nutzer |
+| Convex Lock-in | â
Bewusst akzeptiert; Migrations-Pfad: Convex Cloud EU |
+| OpenRouter Image-Modelle | â
9 Modelle definiert, alle Tiers haben Zugriff |
+| Lizenz | â
BSL 1.1, 3 Jahre Change Date, Apache 2.0, nur private Nutzung frei |
+| Repo-Strategie | â
Zwei unabhÀngige Repos (lemonspace-web + lemonspace-landing), Auth-Cookie-Sharing via .lemonspace.io |
+| Job Queue | â
Convex native (Phase 1), externe Lösung bei Bedarf |
+| E-Mail | â
Unsend + Stalwart, self-hosted |
+| Analytics | â
Rybbit, self-hosted |
+| Error Tracking | â
Sentry Cloud (Free Tier) |
+| Cache-Strategie | â
Cloudflare (Edge) + Redis (Application, TTL ~10min fĂŒr OpenRouter-Preise) |
+| E2E-Testing | â
Kein E2E in Phase 1, Neubewertung bei Skalierung |
+| UX-Latenzen | â
Node-Status-Modell, Skeleton-Nodes, Browser Notifications (opt-in) |
+| Credit Fehlerbehandlung | â
Reservation + Commit, gecachte Preise, kein nachtrÀglicher Ausgleich |
+| Kollaborationstiefe | âł Cursor-Sync, gleichzeitige Edits, Kommentare |
+| Agent Clarification UX | âł Inline am Node vs. Modal vs. Chat-Sidebar |
+| Agent Template Format | âł Markdown-Datei vs. strukturiertes JSON-Schema |
+| Weiche: Bedingungslogik | âł Visueller Rule-Builder vs. Ausdruckssprache |
+| Mixer: Blend Modes | âł min. Normal, Multiply, Screen, Overlay |
+| Canvas-Export | âł PNG, PDF, ZIP (Phase 3, Library TBD) |
+
+---
+
+## 13. Nicht-funktionale Anforderungen
+
+| Anforderung | Beschreibung |
+|-------------|--------------|
+| Self-hostable | VollstÀndiger Betrieb auf eigenem VPS möglich; docker-compose.yml als primÀres Deployment-Artefakt |
+| Source Available | BSL 1.1 â Quellcode öffentlich, kommerzielle Nutzung lizenzpflichtig (siehe Abschnitt 15) |
+| Performance | Canvas mit 100+ Nodes ohne spĂŒrbare Verzögerung |
+| Datenschutz | Keine externen Tracking-Dienste; Ausnahme: Sentry Cloud fĂŒr Error Tracking |
+| Skalierbarkeit | Convex-Backend skaliert mit wachsender Nutzerzahl; Migrations-Pfad: Convex Cloud EU |
+| Sicherheit | Rate Limiting auf allen API-Endpunkten via Redis, DDoS-Schutz via Cloudflare |
+| UX-Resilienz | Alle KI-Operationen zeigen Status direkt am Node; Skeleton-Nodes bei Agent-Workflows |
+| Credit-IntegritÀt | Reservation+Commit-Mechanismus verhindert Credit-Verlust bei fehlgeschlagenen API-Calls |
+
+---
+
+## 14. NĂ€chste Schritte
+
+1. Zwei Repos aufsetzen (`lemonspace-web` mit Next.js 16 + Tailwind v4 + ShadCN + Better Auth + Convex, `lemonspace-landing` mit Next.js 16 + Tailwind v4 + ShadCN)
+2. Convex Schema: Detailliertes Datenbankschema entwerfen (Node-Taxonomie + Credit-System inkl. CreditBalance.reserved/available)
+3. UI/UX Wireframes: Canvas-Interface, Node-Status-Modell, Skeleton-Nodes, Agent Clarification-UX skizzieren
+4. API-Prototyp: OpenRouter Anbindung testen â Image Gen (Gemini 2.5 Flash Image) und Text/Reasoning (Claude 3.5 Sonnet)
+5. Lemon Squeezy Integration: Abo-Tiers anlegen, Webhook-Handling fĂŒr Subscription-Events und Credit-Zuweisung
+6. docker-compose.yml + .env.example + Setup-README ausarbeiten
+
+---
+
+## 15. Lizenzmodell
+
+Die Software wird unter der Business Source License 1.1 (BSL 1.1) veröffentlicht. Der vollstĂ€ndige Quellcode ist öffentlich einsehbar, auditierbar und fĂŒr private/persönliche Nutzung kostenlos. Kommerzielle Nutzung erfordert eine separate Lizenzvereinbarung.
+
+### Parameter
+
+| Parameter | Wert |
+|-----------|------|
+| Lizenz | Business Source License 1.1 |
+| Change Date | 3 Jahre nach Veröffentlichung jedes Releases |
+| Change License | Apache License 2.0 |
+| Additional Use Grant | Nutzung ausschlieĂlich fĂŒr private und persönliche, nicht-kommerzielle Zwecke |
+
+### Kommerzielle Lizenzen (geplant)
+
+| Lizenz | Zielgruppe | Details |
+|--------|------------|---------|
+| Small Business | Unternehmen †10 Mitarbeiter | Preis und Konditionen TBD |
+| Enterprise | Unternehmen > 10 Mitarbeiter | Preis und Konditionen TBD |
+| OEM / Reseller | Einbettung in Drittprodukte | Individuelle Vereinbarung |
+
+> **Positionierung:** LemonSpace wird als âSource Available" bzw. âFair Source" positioniert â nicht als âOpen Source" im Sinne der OSI-Definition. Der Quellcode ist vollstĂ€ndig öffentlich und transparent; Nutzungsrechte sind eingeschrĂ€nkt bis zum Erreichen des Change Date.
+
+---
+
+*LemonSpace PRD v1.1 â MĂ€rz 2026*
diff --git a/.docs/LemonSpace_Phase1_TODO.md b/.docs/LemonSpace_Phase1_TODO.md
new file mode 100644
index 0000000..efc4eb5
--- /dev/null
+++ b/.docs/LemonSpace_Phase1_TODO.md
@@ -0,0 +1,111 @@
+# đ LemonSpace â Phase 1 MVP TODO
+
+## 1. Projekt-Setup & Infrastruktur
+
+- [ ] `lemonspace-web` Repo scaffolden (Next.js 16 + Tailwind v4 + ShadCN + Convex + BetterAuth)
+- [ ] `lemonspace-landing` Repo scaffolden (Next.js 16 + Tailwind v4 + ShadCN)
+- [ ] Auth-Cookie-Sharing: BetterAuth Cookie auf `.lemonspace.io` setzen, Landing Page liest Login-State
+- [ ] Convex Self-hosted Backend aufsetzen (via Coolify)
+- [ ] Redis aufsetzen (via Coolify)
+- [ ] Sentry Cloud anbinden (Free Tier)
+- [ ] Cloudflare DNS + DDoS-Schutz konfigurieren
+- [ ] Rybbit Analytics deployen (via Coolify)
+- [ ] useSend + Stalwart E-Mail-Stack deployen (via Coolify)
+
+## 2. Authentifizierung
+
+- [ ] Better Auth integrieren (Self-hosted)
+- [ ] Login / Signup Flow
+- [ ] E-Mail-Verifizierung (via useSend)
+- [ ] Session-Management
+
+## 3. Canvas â Kernfunktion
+
+- [ ] Basis-Canvas mit @xyflow/react
+- [ ] Zoom, Pan, Navigation
+- [ ] Drag & Drop von Bildern via dnd-kit
+- [ ] Node-Rendering-System (typisierte Bausteine)
+- [ ] Node-Verbindungen (Edges) zwischen kompatiblen Nodes
+- [ ] Gruppierung und Layering von Canvas-Elementen
+
+## 4. Phase-1-Nodes
+
+### Quelle
+- [ ] **Bild-Node** â Upload (PNG, JPG, WebP) + URL-Einbindung
+- [ ] **Text-Node** â Freitextfeld mit Markdown-Support
+- [ ] **Prompt-Node** â Dedizierter Node fĂŒr Modellinstruktionen, verbindet sich mit KI-Nodes
+
+### KI-Ausgabe
+- [ ] **KI-Bild-Node** â Output eines Bildgenerierungs-Calls, speichert Prompt, Modell, Parameter
+
+### Canvas & Layout
+- [ ] **Gruppe-Node** â Container, Collapse/Expand, benannte Scopes
+- [ ] **Frame-Node** â Artboard mit definierter Auflösung, Export-Boundary
+- [ ] **Notiz-Node** â Annotation, Markdown-Support, kein Datenanschluss
+- [ ] **Compare-Node** â Zwei Bilder nebeneinander mit interaktivem Slider
+
+## 5. KI-Integration
+
+- [ ] OpenRouter-Anbindung (Image Generation)
+- [ ] Initiales Modell: Gemini 2.5 Flash Image
+- [ ] Modellauswahl-UI (mindestens Budget/Standard/Premium)
+- [ ] Prompt â KI-Bild-Generierung End-to-End im Canvas
+- [ ] Node-Status-Modell implementieren (`idle â executing â done | error`)
+- [ ] Error-State direkt am Node mit Hinweistext
+
+## 6. Credit-System
+
+- [ ] Convex Schema: `CreditBalance` (balance, reserved, available, monthlyAllocation)
+- [ ] Convex Schema: `CreditTransaction` (amount, type, status, nodeId, openRouterCost)
+- [ ] Convex Schema: `Subscription` (tier, status, periodStart/End, lemonSqueezyId)
+- [ ] Reservation + Commit Flow implementieren
+- [ ] Kosten-Voranzeige vor Generierung
+- [ ] OpenRouter-Preise cachen (Redis, TTL ~10min)
+- [ ] Credit-Balance-Anzeige in der UI
+
+## 7. Pricing & Payment
+
+- [ ] Lemon Squeezy Integration: Checkout-Flow
+- [ ] Webhook-Handling fĂŒr Subscription-Events
+- [ ] Automatische Credit-Zuweisung bei Abo-Start / Abo-VerlÀngerung
+- [ ] 4 Tiers anlegen: Free (âŹ0,50) / Starter âŹ9 / Pro âŹ49 / Business âŹ99
+- [ ] Credit-Nachkauf (Top-Up) zum Selbstkostenpreis
+
+## 8. Abuse Prevention
+
+- [ ] Daily Generation Caps (Free: 10, Starter: 50, Pro: 200, Business: 500)
+- [ ] Concurrency Limits (Free: 1, Paid: 2 parallele Generierungen)
+- [ ] Rate Limiting auf API-Endpunkten (Redis-backed)
+- [ ] Premium-Modelle erst ab Starter-Tier
+- [ ] Top-Up-Limit pro Monat
+
+## 9. Export
+
+- [ ] PNG-Export aus Frame-Nodes
+- [ ] ZIP-Export (mehrere Frames / Varianten)
+
+## 10. Convex Schema (GesamtĂŒbersicht)
+
+- [ ] `Canvas` â id, name, ownerId, createdAt, updatedAt
+- [ ] `Node` â id, canvasId, type, position, size, data, createdAt
+- [ ] `Edge` â id, canvasId, sourceNodeId, targetNodeId
+- [ ] `CreditBalance` â siehe Credit-System
+- [ ] `CreditTransaction` â siehe Credit-System
+- [ ] `Subscription` â siehe Credit-System
+- [ ] `User` â id, email, name, avatarUrl, createdAt
+
+## 11. Nicht Phase 1 (bewusst ausgeklammert)
+
+- Echtzeit-Kollaboration
+- Agent Nodes
+- Video-Generierung
+- Freepik Asset Browser
+- Style Transfer / GFPGAN / rembg / Real-ESRGAN
+- Team-Features (Workspaces, Rollen, Rechte)
+- docker-compose.yml fĂŒr Self-Hosting
+- E2E-Testing
+
+---
+
+*Reihenfolge orientiert sich an den AbhÀngigkeiten aus dem Manifest v1.2:*
+*Repos scaffolden â Convex Schema â Canvas â OpenRouter â Compare + Export â Auth + Credits â Lemon Squeezy*
diff --git a/CLAUDE.md b/CLAUDE.md
index 43c994c..ddce6ed 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1 +1,23 @@
@AGENTS.md
+
+## Design Context
+
+### Users
+Kleine Design- und Marketing-Teams (2â10 Personen), die aus wenigen Input-Assets schnell kampagnenfĂ€hige Bildvarianten erzeugen. Sie arbeiten unter Zeitdruck, brauchen Ăberblick ĂŒber Credits und laufende Generierungen, und wollen sich auf die kreative Arbeit konzentrieren â nicht auf das Tool.
+
+### Brand Personality
+Frisch, klar, einladend. Wie eine Zitrone: hell, sauber, natĂŒrlich. Vertrauen durch Klarheit, nicht durch KomplexitĂ€t. Drei Worte: **frisch · klar · menschlich**.
+
+### Aesthetic Direction
+- **Tone**: Warm & Organic â weiche Formen, warme Töne, einladend und menschlich
+- **Light/Dark**: Beides (system auto), aber Light als primÀre Designrichtung
+- **Colors**: Teal-Primary mit warmen Neutraltönen (beige/sand statt kaltem Grau). Zitronengelb als Akzent.
+- **Anti-references**: Kalte Dashboard-Ăsthetik, Glassmorphism, Neon-auf-Dunkel, generische SaaS-Templates
+- **References**: Notion (Klarheit), Linear (PrÀzision), Craft (WÀrme), Things (Menschlichkeit)
+
+### Design Principles
+1. **Klarheit vor Dekoration** â Jedes Element muss einen Zweck erfĂŒllen. Keine schmĂŒckenden Karten oder Sparklines.
+2. **Warme NeutralitĂ€t** â Neutraltöne immer Richtung Warm (Sand/Beige) tönen, niemals kaltes Grau.
+3. **Asymmetrische Balance** â Nicht alles zentrieren. LinksbĂŒndiger Text, variierte AbstĂ€nde, bewusste visuelle Hierarchie.
+4. **Progressive Disclosure** â Wichtigstes zuerst, Details bei Bedarf. Nicht alles gleichzeitig zeigen.
+5. **NatĂŒrliches Tempo** â Sanfte ĂbergĂ€nge mit exponentiellem Easing. Bewegung soll sich organisch anfĂŒhlen.
diff --git a/app/api/auth/[...all]/route.ts b/app/api/auth/[...all]/route.ts
new file mode 100644
index 0000000..8d7e031
--- /dev/null
+++ b/app/api/auth/[...all]/route.ts
@@ -0,0 +1,3 @@
+import { handler } from "@/lib/auth-server";
+
+export const { GET, POST } = handler;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
new file mode 100644
index 0000000..272f7a6
--- /dev/null
+++ b/app/dashboard/page.tsx
@@ -0,0 +1,349 @@
+"use client"
+
+import Image from "next/image"
+import {
+ Activity,
+ ArrowUpRight,
+ ChevronDown,
+ Coins,
+ LayoutTemplate,
+ Search,
+ Sparkles,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Progress } from "@/components/ui/progress"
+import { cn } from "@/lib/utils"
+
+const formatEurFromCents = (cents: number) =>
+ new Intl.NumberFormat("de-DE", {
+ style: "currency",
+ currency: "EUR",
+ }).format(cents / 100)
+
+const mockRuns = [
+ {
+ id: "run-8841",
+ workspace: "Sommer-Kampagne",
+ node: "KI-Bild",
+ model: "flux-pro",
+ status: "done" as const,
+ credits: 42,
+ updated: "vor 12 Min.",
+ },
+ {
+ id: "run-8839",
+ workspace: "Produktfotos",
+ node: "KI-Bild",
+ model: "flux-schnell",
+ status: "executing" as const,
+ credits: 18,
+ updated: "gerade eben",
+ },
+ {
+ id: "run-8832",
+ workspace: "Social Variants",
+ node: "Compare",
+ model: "â",
+ status: "idle" as const,
+ credits: 0,
+ updated: "vor 1 Std.",
+ },
+ {
+ id: "run-8828",
+ workspace: "Sommer-Kampagne",
+ node: "KI-Bild",
+ model: "flux-pro",
+ status: "error" as const,
+ credits: 0,
+ updated: "vor 2 Std.",
+ },
+]
+
+const mockWorkspaces = [
+ { name: "Sommer-Kampagne", nodes: 24, frames: 3, initial: "S" },
+ { name: "Produktfotos", nodes: 11, frames: 2, initial: "P" },
+ { name: "Social Variants", nodes: 8, frames: 1, initial: "V" },
+]
+
+function StatusDot({ status }: { status: (typeof mockRuns)[0]["status"] }) {
+ const base = "inline-block size-2 rounded-full"
+ switch (status) {
+ case "done":
+ return
+ case "executing":
+ return (
+
+
+
+
+ )
+ case "idle":
+ return
+ case "error":
+ return
+ }
+}
+
+function statusLabel(status: (typeof mockRuns)[0]["status"]) {
+ switch (status) {
+ case "done":
+ return "Fertig"
+ case "executing":
+ return "LĂ€uft"
+ case "idle":
+ return "Bereit"
+ case "error":
+ return "Fehler"
+ }
+}
+
+export default function DashboardPage() {
+ const balanceCents = 4320
+ const reservedCents = 180
+ const monthlyPoolCents = 5000
+ const usagePercent = Math.round(
+ ((monthlyPoolCents - balanceCents) / monthlyPoolCents) * 100,
+ )
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Account (Demo)
+
+ Einstellungen
+ Abrechnung
+
+ Abmelden
+
+
+
+
+
+
+
+ {/* Greeting & Context */}
+
+
+ Guten Tag, Mock Nutzer
+
+
+ Ăberblick ĂŒber deine Credits und laufende Generierungen.
+
+
+
+ {/* Credits & Active Generation â asymmetric two-column */}
+
+ {/* Credits Section */}
+
+
+
+ Credit-Guthaben
+
+
+ {formatEurFromCents(balanceCents)}
+
+
+
+
+ Reserviert
+
+ {formatEurFromCents(reservedCents)}
+
+
+
+
+ Monatskontingent
+
+ {usagePercent}%
+
+
+
+
+
+
+
+ Bei fehlgeschlagenen Jobs werden reservierte Credits automatisch freigegeben.
+
+
+
+ {/* Active Generation */}
+
+
+
+
+ Aktive Generierung
+
+
+
+
+
+
+ LĂ€uft
+
+
+
+
+ Produktfotos â Variante 3/4
+
+
+
+
+ Fortschritt
+ 62%
+
+
+
+
+
+ Step 2 von 4 â{" "}
+
+ flux-schnell
+
+
+
+
+
+ {/* Workspaces */}
+
+
+
+
+ Workspaces
+
+
+
+
+
+ {mockWorkspaces.map((ws) => (
+
+ ))}
+
+
+
+ {/* Recent Activity */}
+
+
+
+
+
+ {mockRuns.map((run) => (
+
+
+
+
+
+
+ {run.workspace}
+
+
+ {run.node}
+
+
+
+ {run.model !== "â" && (
+ {run.model}
+ )}
+ {run.credits > 0 && (
+ <>
+ ·
+ {run.credits} ct
+ >
+ )}
+
+
+
+
+
+ {statusLabel(run.status)}
+
+
+ {run.updated}
+
+
+
+ ))}
+
+
+
+
+
+ )
+}
diff --git a/app/globals.css b/app/globals.css
index df231c9..9d24ede 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -49,72 +49,72 @@
}
:root {
- --background: oklch(1 0 0);
- --foreground: oklch(0.147 0.004 49.25);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.147 0.004 49.25);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.147 0.004 49.25);
- --primary: oklch(0.511 0.096 186.391);
- --primary-foreground: oklch(0.984 0.014 180.72);
- --secondary: oklch(0.967 0.001 286.375);
- --secondary-foreground: oklch(0.21 0.006 285.885);
- --muted: oklch(0.97 0.001 106.424);
- --muted-foreground: oklch(0.553 0.013 58.071);
- --accent: oklch(0.97 0.001 106.424);
- --accent-foreground: oklch(0.216 0.006 56.043);
+ --background: oklch(0.985 0.005 80);
+ --foreground: oklch(0.18 0.012 60);
+ --card: oklch(0.993 0.003 80);
+ --card-foreground: oklch(0.18 0.012 60);
+ --popover: oklch(0.993 0.003 80);
+ --popover-foreground: oklch(0.18 0.012 60);
+ --primary: oklch(0.52 0.09 178);
+ --primary-foreground: oklch(0.985 0.01 178);
+ --secondary: oklch(0.955 0.01 82);
+ --secondary-foreground: oklch(0.25 0.012 60);
+ --muted: oklch(0.96 0.008 80);
+ --muted-foreground: oklch(0.52 0.015 60);
+ --accent: oklch(0.92 0.1 95);
+ --accent-foreground: oklch(0.3 0.04 80);
--destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.923 0.003 48.717);
- --input: oklch(0.923 0.003 48.717);
- --ring: oklch(0.709 0.01 56.259);
+ --border: oklch(0.91 0.01 75);
+ --input: oklch(0.91 0.01 75);
+ --ring: oklch(0.52 0.09 178);
--chart-1: oklch(0.845 0.143 164.978);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.596 0.145 163.225);
--chart-4: oklch(0.508 0.118 165.612);
--chart-5: oklch(0.432 0.095 166.913);
- --radius: 0.625rem;
- --sidebar: oklch(0.985 0.001 106.423);
- --sidebar-foreground: oklch(0.147 0.004 49.25);
- --sidebar-primary: oklch(0.6 0.118 184.704);
- --sidebar-primary-foreground: oklch(0.984 0.014 180.72);
- --sidebar-accent: oklch(0.97 0.001 106.424);
- --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
- --sidebar-border: oklch(0.923 0.003 48.717);
- --sidebar-ring: oklch(0.709 0.01 56.259);
+ --radius: 0.75rem;
+ --sidebar: oklch(0.975 0.006 80);
+ --sidebar-foreground: oklch(0.18 0.012 60);
+ --sidebar-primary: oklch(0.52 0.09 178);
+ --sidebar-primary-foreground: oklch(0.985 0.01 178);
+ --sidebar-accent: oklch(0.96 0.008 80);
+ --sidebar-accent-foreground: oklch(0.25 0.012 60);
+ --sidebar-border: oklch(0.91 0.01 75);
+ --sidebar-ring: oklch(0.52 0.09 178);
}
.dark {
- --background: oklch(0.147 0.004 49.25);
- --foreground: oklch(0.985 0.001 106.423);
- --card: oklch(0.216 0.006 56.043);
- --card-foreground: oklch(0.985 0.001 106.423);
- --popover: oklch(0.216 0.006 56.043);
- --popover-foreground: oklch(0.985 0.001 106.423);
- --primary: oklch(0.437 0.078 188.216);
- --primary-foreground: oklch(0.984 0.014 180.72);
- --secondary: oklch(0.274 0.006 286.033);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.268 0.007 34.298);
- --muted-foreground: oklch(0.709 0.01 56.259);
- --accent: oklch(0.268 0.007 34.298);
- --accent-foreground: oklch(0.985 0.001 106.423);
+ --background: oklch(0.16 0.01 65);
+ --foreground: oklch(0.93 0.008 80);
+ --card: oklch(0.21 0.012 65);
+ --card-foreground: oklch(0.93 0.008 80);
+ --popover: oklch(0.21 0.012 65);
+ --popover-foreground: oklch(0.93 0.008 80);
+ --primary: oklch(0.62 0.1 178);
+ --primary-foreground: oklch(0.15 0.03 178);
+ --secondary: oklch(0.26 0.01 65);
+ --secondary-foreground: oklch(0.92 0.006 80);
+ --muted: oklch(0.24 0.01 65);
+ --muted-foreground: oklch(0.65 0.012 70);
+ --accent: oklch(0.35 0.06 90);
+ --accent-foreground: oklch(0.93 0.008 80);
--destructive: oklch(0.704 0.191 22.216);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.553 0.013 58.071);
+ --border: oklch(1 0 0 / 8%);
+ --input: oklch(1 0 0 / 12%);
+ --ring: oklch(0.62 0.1 178);
--chart-1: oklch(0.845 0.143 164.978);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.596 0.145 163.225);
--chart-4: oklch(0.508 0.118 165.612);
--chart-5: oklch(0.432 0.095 166.913);
- --sidebar: oklch(0.216 0.006 56.043);
- --sidebar-foreground: oklch(0.985 0.001 106.423);
- --sidebar-primary: oklch(0.704 0.14 182.503);
- --sidebar-primary-foreground: oklch(0.277 0.046 192.524);
- --sidebar-accent: oklch(0.268 0.007 34.298);
- --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
- --sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.553 0.013 58.071);
+ --sidebar: oklch(0.19 0.01 65);
+ --sidebar-foreground: oklch(0.93 0.008 80);
+ --sidebar-primary: oklch(0.62 0.1 178);
+ --sidebar-primary-foreground: oklch(0.15 0.03 178);
+ --sidebar-accent: oklch(0.24 0.01 65);
+ --sidebar-accent-foreground: oklch(0.93 0.008 80);
+ --sidebar-border: oklch(1 0 0 / 8%);
+ --sidebar-ring: oklch(0.62 0.1 178);
}
@layer base {
diff --git a/app/layout.tsx b/app/layout.tsx
index f7924fc..a00165f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono, Manrope } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";
+import { ConvexClientProvider } from "@/components/ui/convex-prover";
const manrope = Manrope({subsets:['latin'],variable:'--font-sans'});
@@ -30,7 +31,9 @@ export default function RootLayout({
lang="en"
className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", manrope.variable)}
>
- {children}
+
+ {children}
+