feat: dashboard, Convex auth, UI components, and LemonSpace branding
- Add dashboard shell with auth integration - Wire Better Auth / Convex (client, server, HTTP routes) - Add shadcn-style UI primitives and logo assets - Update global styles and landing page - Add internal docs (.docs) Made-with: Cursor
This commit is contained in:
237
.docs/LemonSpace_Manifest_v1_2.md
Normal file
237
.docs/LemonSpace_Manifest_v1_2.md
Normal file
@@ -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*
|
||||
560
.docs/LemonSpace_PRD_v1_1.md
Normal file
560
.docs/LemonSpace_PRD_v1_1.md
Normal file
@@ -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*
|
||||
111
.docs/LemonSpace_Phase1_TODO.md
Normal file
111
.docs/LemonSpace_Phase1_TODO.md
Normal file
@@ -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*
|
||||
Reference in New Issue
Block a user