Sync P12 Subframe screens with Obsidian

This commit is contained in:
david committed 2026-08-03 16:12:22 +02:00
1 parent 7f88026f79
commit f3823d9107
52 files changed
+2691 -710

No files matched your search

@@ -1,46 +0,0 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FLOW
package: WF-P12 Flow-Editor
id: M01
screen: Probelauf
typ: Modal
umsetzung: Bauen
status: Validiert - Subframe-Entwurf geloescht, neu zu bauen
route: "aus S01 (Probelauf-Knopf / vor Aktivierung)"
subframe: ""
---
# M01 — Probelauf (Dry-Run)
## Ziel
Vor dem Scharfschalten sehen, was die Automation WIRKLICH tun würde — keine bösen Überraschungen.
## Was das Tool können muss
- **»Trifft X Datensätze«** + die ersten 5 als Beispiele
- Schritt-für-Schritt-Simulation in Klartext (»E-Mail würde an max@… gehen«)
- **Pflicht-Bestätigung** ab Schwelle (> 100 Datensätze/Schritt, mandant-einstellbar) — ggf. mit Bestätigungs-Phrase
- Ergebnis: aktivieren oder zurück in den Editor
## Pattern / Archetyp
A5 Modal + Simulations-Liste.
## Zustände
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Über Schwelle | Bestätigung Pflicht | Nur dokumentieren |
| Trifft nichts | »Aktuell trifft die Automation 0 Datensätze« | Nur dokumentieren |
## Subframe
**Der Entwurf vom 2026-07-10 wurde in Subframe gelöscht** (Stand 2026-07-13, per MCP geprüft). M01 muss im Zuge der Editor-Neuausrichtung neu gebaut werden.
### Erkenntnisse aus dem gelöschten Entwurf (für den Neubau mitnehmen)
- Spec war abgedeckt: »Trifft 143 Datensätze«, erste 5 Beispiele, Klartext-Simulation, Schwellen-Bestätigung, aktivieren/zurück
- Nachzubessern war: Bestätigung lief über eine **Checkbox statt einer Bestätigungs-Phrase**, und der »Aktivieren«-Button war nicht disabled, solange die Checkbox leer war
@@ -1,41 +0,0 @@
---
kind: screen
project: HiveGrid Screen Project
ticket: D-FLOW
package: WF-P12 Flow-Editor
id: M02
screen: Schleifen-Warnung
typ: Modal
umsetzung: Bauen
status: Validiert - Subframe-Entwurf geloescht, neu zu bauen
route: "aus S01 bei Schleifen-Verdacht"
subframe: ""
---
# M02 — Schleifen-/Raten-Warnung
## Ziel
Endlos-Schleifen verhindern, bevor sie den Betrieb fluten — verständlich erklärt.
## Was das Tool können muss
- **Mini-Abhängigkeits-Graph**: welche Automationen sich gegenseitig auslösen (der Kreis ist markiert)
- Klartext: »Automation A löst B aus, B löst wieder A aus«
- **»Beheben«**-Knopf (springt zum betroffenen Baustein)
- Anomalie-Hinweis-Variante: »2.000-mal in 5 Min gelaufen, typisch 5–10/Tag — pausiert« + wieder aktivieren
## Pattern / Archetyp
A5 Modal + Mini-Graph.
## Subframe
**Der Entwurf vom 2026-07-10 wurde in Subframe gelöscht** (Stand 2026-07-13, per MCP geprüft). M02 muss im Zuge der Editor-Neuausrichtung neu gebaut werden.
### Erkenntnisse aus dem gelöschten Entwurf (für den Neubau mitnehmen)
- Spec war abgedeckt: Mini-Graph mit markiertem Kreis, Klartext-Erklärung, »Beheben«-Knopf, Anomalie-Copy (2.000-mal/5 Min, typisch 5–10/Tag)
- Nachzubessern war: Schleife und Raten-Anomalie waren **in einem Dialog kombiniert** (Spec: Anomalie als eigene Variante)
- Nachzubessern war: der **»Trotzdem aktivieren«-Button** widerspricht der Fehlermatrix (Schleife blockiert) — beim Neubau nicht wieder einbauen, ohne das vorher zu klären
- Der Kreis war als Text-Pill markiert statt als sichtbare Rück-Kante im Graph
@@ -7,32 +7,32 @@ id: M03
screen: Start-Auswahl
typ: Modal
umsetzung: Bauen
status: Validiert - Subframe-Entwurf geloescht, neu zu bauen
route: "»+ Neue Automation« (aus der Automation-Liste)"
status: Zu validieren und neu in Subframe zu bauen
route: "»+ Neue Automation« aus der Automation-Liste"
subframe: ""
source_checked: 2026-08-03
---
# M03 — Start-Auswahl
## Ziel
## Ziel und Rolle im Flow
Der schnellste Weg zum Erfolgserlebnis: mit einer Vorlage starten statt vor leerer Fläche zu sitzen.
Entscheidung direkt nach „+ Neue Automation“ in [[S01 Automation-Liste]]: leer beginnen oder mit einem Beispiel starten.
## Was das Tool können muss
## Erster gemeinsamer Designumfang
- **Leer starten** ODER **Vorlage wählen** (SHK-Vorlagen + eigene, nach Kategorie, mit Use-Case-Beschreibung — eingebetteter Vorlagen-Katalog aus WF-P12 Verwaltung)
- Auswahl → Editor öffnet mit vorbefülltem Flow (Vorlage) oder leer
- Primärer Weg „Leer starten“.
- Bereich „Mit Vorlage starten“.
- Für den ersten Entwurf genau **eine illustrative Standardvorlage**, damit Kartenaufbau und Auswahlverhalten sichtbar sind.
- Die Karte ist ein Designbeispiel und behauptet noch keinen produktiv gefüllten Vorlagenkatalog.
- Auswahl führt in [[S01 Flow-Editor]].
## Pattern / Archetyp
## Zu validieren
A5 Dialog (echtes Modal).
- Ein CTA-Modell: entweder „Verwenden“ direkt auf der Karte oder Auswahl plus Footer-CTA, nicht beides.
- Wie prominent „Leer starten“ gegenüber der Beispielvorlage ist.
- Welche Informationen die Beispielkarte braucht: Name, Kurzbeschreibung und sichtbare Schrittfolge reichen zunächst aus.
## Subframe
**Der Entwurf vom 2026-07-10 wurde in Subframe gelöscht** (Stand 2026-07-13, per MCP geprüft). M03 muss im Zuge der Editor-Neuausrichtung neu gebaut werden.
### Erkenntnisse aus dem gelöschten Entwurf (für den Neubau mitnehmen)
- Spec war vollständig abgedeckt: leer ODER Vorlage, SHK + eigene, Kategorien, Use-Case-Beschreibungen, eingebetteter Vorlagen-Katalog
- Gute Ergänzungen, die erhalten bleiben sollten: Suchfeld, Flow-Vorschau-Chips, Nutzungszahlen (»38-mal verwendet«)
- Nachzubessern war: **doppelter CTA** (»Verwenden« pro Karte UND »Mit Auswahl weiter« im Footer) — beim Neubau auf ein Interaktionsmodell festlegen
Noch nicht im aktuellen P12-Flow vorhanden. Dieser Screen wird nach dem Obsidian-Abgleich gemeinsam validiert und anschließend gebaut.
@@ -5,71 +5,51 @@ ticket: D-FLOW
package: WF-P12 Flow-Editor
id: S01
screen: Flow-Editor
typ: BESPOKE (schwerste UI)
subframe_name: "V1 Vollbild minimal"
subframe_page_id: "ae9f5d91-1153-44de-9af3-63010bc86162"
typ: BESPOKE
umsetzung: Bauen
status: In Subframe (Grundgeruest) - Bausteine auf dem Canvas fehlen
status: In Subframe - in Obsidian gespiegelt
route: "/automations/:id/edit"
subframe: "https://app.subframe.com/f023064a5ca0/design/ae9f5d91-1153-44de-9af3-63010bc86162/edit"
source_checked: 2026-08-03
---
# S01 — Flow-Editor ⭐
## Ziel
## Ziel und Rolle im Flow
Automationen zusammenklicken wie ein Diagramm — verständlich für Büro-Menschen, nicht nur Techniker.
Automationen auf einer Vollbild-Zeichenfläche zusammenstellen. Diese Obsidian-Seite dokumentiert den gebauten leeren Editorzustand; ein eigener Referenzscreen „gefüllter Editor“ wird nicht benötigt.
## Neuausrichtung 2026-07-11/12 — Subframe gilt
## Sichtbare Struktur
Die alten Subframe-Varianten A »Dreispalten kompakt« und B »Geführter Inspector« wurden **gelöscht**. Der Editor wurde neu aufgesetzt. Der gebaute Stand **ersetzt** die Entscheidung vom 2026-07-09 (»Katalog links · Canvas Mitte · Konfig rechts«).
- App-Shell mit Breadcrumb und Sidebar.
- Kopfzeile mit Automationsname, Status „Aktiv“, Aktiv-Schalter, Verlauf und Mehr-Menü.
- Modus-Umschalter „Bauen / Aktivität / Auswertung“.
- Leerer Canvas mit „Baustein hinzufügen“.
- Übersicht unten links sowie Undo/Redo, Zoom und Probelauf in der Bottom-Toolbar.
- Zweiter Einstieg zum Hinzufügen unten rechts.
| Element | Alt (validiert 2026-07-09) | Neu (gebaut, gilt) |
|---|---|---|
| Katalog | festes Panel links, einklappbar | **Drawer** »Baustein hinzufügen« (400 px) mit Suche + Kachel-Filter Auslöser/Aktionen/Logik |
| Konfig | festes Panel rechts | **Echter Dialog je Baustein-Typ** (Entscheidung David 2026-07-12) → [[S05a Baustein-Konfig Vorplanung]] |
| Canvas | Mitte zwischen zwei Panels | **Vollbild** mit Punktraster |
| Werkzeuge | Toolbar oben | Bottom-Toolbar (Rückgängig/Wiederholen/Zoom + Probelauf), Mini-Übersicht unten links, Rechtsklick-Kontextmenü |
## Aktionen und Verknüpfungen
## Was das Tool können muss
- Neue Automation beginnt über [[M03 Start-Auswahl]].
- „Baustein hinzufügen“ öffnet [[S01b Baustein-Picker]].
- Rechtsklick auf die Zeichenfläche öffnet [[S01c Canvas-Kontextmenue]].
- Ein gewählter Baustein öffnet einen der 32 individuellen Konfigurationsscreens aus [[S05 Baustein-Konfig-Panels]].
- „Aktivität“ soll zur eigenständigen [[S02 Lauf-Liste]] führen; die genaue Umschalter-Copy wird gemeinsam validiert.
- **Zeichenfläche**: Bausteine setzen, verbinden, verschieben, duplizieren, löschen; Pan/Zoom; Undo/Redo; automatisch anordnen; Mini-Übersichtskarte
- **Baustein-Picker** (Drawer): Auslöser, Aktionen und Logik gruppiert und filterbar, per Klick hinzufügen
- **Konfig-Dialog**: Klick auf Baustein → typ-abhängiges Klartext-Formular (die 30 Dialoge, s. [[S05a Baustein-Konfig Vorplanung]])
- **Inline-Validierung** direkt am Baustein: nicht verbunden · Schleifen-Verdacht · Pflichtfeld fehlt
- Kopf: Name (inline editierbar), Status-Pill, Aktiv-Schalter, Verlauf, **Probelauf** → [[M01 Probelauf]]
- Aktivieren blockiert bei Fehlern (Klartext-Liste, Sprung zum Baustein)
## Scope-Entscheidung 2026-08-03
## Pattern / Archetyp
- Kein eigener S01d-Screen für gefüllte Knoten/Kanten.
- Kein eigener Probelauf-Screen im Obsidian-Paket.
- Kein eigener Schleifen-/Ratenwarnungs-Screen im Obsidian-Paket.
- Diese Funktionen dürfen technisch im Produkt bestehen, werden aber nicht als separate zu bauende Design-Screens geführt.
**BESPOKE** — Vollbild-Canvas + Drawer-Picker + Konfig-Dialoge.
## Offener Reviewpunkt
## Zustände
Der Subframe-Entwurf zeigt zusätzlich „Auswertung“. Dieser Modus besitzt aktuell keinen eigenen P12-Screen. Beim gemeinsamen Review entscheiden wir, ob er entfernt, später reserviert oder anders benannt wird.
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Leerer Flow | Gestrichelte Kachel »Baustein hinzufügen« mittig | In Subframe (V1) |
| Gefüllter Flow | Bausteine + Kanten auf dem Canvas | **fehlt — noch nicht gebaut** |
| Ungespeichert verlassen | Hinweis | Nur dokumentieren |
| Laden / Fehler / kein Zugriff | A7 | Wiederverwenden |
## Subframe
## Subframe (Stand 2026-07-13, per MCP geprüft)
Flow: [(MCP) HiveGrid Workflow Engine / Automationen P12](https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit)
| Seite | Zweck | Link |
|---|---|---|
| V1 Vollbild minimal | Editor-Grundgerüst, leerer Zustand | [Subframe](https://app.subframe.com/f023064a5ca0/design/ae9f5d91-1153-44de-9af3-63010bc86162/edit) |
| Picker Kachel-Filter | Baustein hinzufügen (Drawer) | [Subframe](https://app.subframe.com/f023064a5ca0/design/6fab8a3e-c016-4381-b7e8-19414e8dcb7b/edit) |
| Kontextmenue Canvas | Rechtsklick auf die Zeichenfläche | [Subframe](https://app.subframe.com/f023064a5ca0/design/2278da93-f0a2-4e46-bd3b-250d5912a62d/edit) |
## Was im Editor noch fehlt (Bau-Backlog)
1. **Baustein-Karte auf dem Canvas** — es existiert keine Knoten-Darstellung. Ohne sie hängen die 30 Konfig-Dialoge an nichts. Höchste Priorität.
2. **Kanten/Verbindungen** — inklusive Verzweigung: Wenn-Dann (Ja/Nein), Switch (n Pfade + Sonst), Schleife (Weiter/Fertig).
3. **Inline-Validierung am Baustein** — Badge für »nicht verbunden«, »Pflichtfeld fehlt«, »Schleifen-Verdacht«.
4. **Gefüllter Editor-Zustand** — ein echtes Beispiel-Board als Referenz.
5. **Aktivieren-Blocker (D01)** und **Anomalie-Banner (D02)** — waren in den gelöschten Varianten ausgebaut, sind mit ihnen verschwunden.
## Offene Entscheidungen
- **Modus-Umschalter »Bauen / Aktivität / Auswertung«** im Kopf: **offen, David muss entscheiden** (aufgefallen beim Abgleich 2026-07-13). »Auswertung« steht in keinem Ticket; »Aktivität« würde die Lauf-Liste ([[S02 Lauf-Liste]]) in den Editor holen statt auf eine eigene Route. Die Planung läuft vorerst **ohne** die beiden Tabs weiter.
- Kanten-Interaktion (Klick-Verbinden vs. Ziehen) und Verhalten von »Automatisch anordnen«.
- [Screen direkt öffnen](https://app.subframe.com/f023064a5ca0/design/ae9f5d91-1153-44de-9af3-63010bc86162/edit)
- [P12-Flow öffnen](https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit)
@@ -5,38 +5,43 @@ ticket: D-FLOW
package: WF-P12 Flow-Editor
id: S01b
screen: Baustein-Picker
subframe_name: "Picker Kachel-Filter"
subframe_page_id: "6fab8a3e-c016-4381-b7e8-19414e8dcb7b"
typ: Drawer
umsetzung: Bauen
status: In Subframe - Farbschema + fehlende Bausteine nachziehen
route: "aus S01 (Baustein hinzufuegen)"
status: In Subframe - in Obsidian gespiegelt, Review offen
route: "aus S01 (Baustein hinzufügen)"
subframe: "https://app.subframe.com/f023064a5ca0/design/6fab8a3e-c016-4381-b7e8-19414e8dcb7b/edit"
source_checked: 2026-08-03
---
# S01b — Baustein-Picker (Drawer)
# S01b — Baustein-Picker
## Ziel
## Ziel und Rolle im Flow
Der schnelle Weg, einen Baustein auf die Zeichenfläche zu holen. Öffnet sich als seitlicher Drawer (400 px) über dem Editor.
Seitlicher 400-px-Drawer zum Suchen und Hinzufügen eines Bausteins in [[S01 Flow-Editor]].
## Was das Tool können muss
## Aktueller Subframe-Inhalt
- Suchfeld »Baustein suchen …«
- Kachel-Filter oben: Auslöser / Aktionen / Logik
- Bausteine nach Kategorie gruppiert, jeweils mit Symbol, Name, Kurzbeschreibung und Hilfe-Tooltip
- Klick auf einen Baustein → er landet auf dem Canvas und sein Konfig-Dialog öffnet
- Suche „Baustein suchen …“.
- Kachelfilter: Auslöser, Aktionen und Logik.
- Auslöser: Neue Anfrage, Kontakt geändert, Termin in Kürze, Zahlungsziel überschritten, Zeitplan.
- Aktionen: Aufgabe anlegen, E-Mail senden, Datensatz ändern, Benachrichtigung senden.
- Logik: Wenn-Dann, Warten, Schleife.
- Name, Kurzbeschreibung und Hilfe-Tooltip pro Baustein.
## Pattern / Archetyp
## Verknüpfungen
Drawer (seitliches Overlay), nicht zentrierter Dialog.
Ein Klick führt zum passenden individuellen Konfigurationsscreen. Der vollständige Bestand liegt in [[S05 Baustein-Konfig-Panels]] und ist im Verwaltungs-Canvas nach Kategorien gruppiert.
## Offene Punkte (aus der Validierung 2026-07-13)
## Offene Abweichungen
- **Farbschema angleichen**: Der Picker nutzt Orange für Auslöser, Blau für alle Aktionen, Neutral für Logik. Gilt: das S05a-Schema (Grün/Rot/Blau/Gelb/Violett/Grau). → nachziehen.
- **Duzen**: Der Picker siezt (»Wählen Sie einen Baustein«). → auf Duzen umstellen.
- **Unvollständig**: Der Picker zeigt nur ~12 Bausteine, der Katalog kennt 30. Integration (HTTP) fehlt ganz. → vollständig füllen.
- **Bausteine ohne Dialog entfernen**: »Termin in Kürze« und »Zahlungsziel überschritten« werden durch **einen** Eintrag »Frist oder Termin« ersetzt (s. [[S05a Baustein-Konfig Vorplanung]]).
- Uneinheitlicher Hilfetext: beim ersten Baustein festes Kästchen, sonst Tooltip-Komponente. → vereinheitlichen.
- Der Drawer siezt noch und muss auf „du“ umgestellt werden.
- Die statische Auswahl ist unvollständig gegenüber den 32 gebauten Konfigurationsscreens.
- „Termin in Kürze“ und „Zahlungsziel überschritten“ sollen durch „Frist oder Termin“ ersetzt werden.
- Kategorien, Benennungen und vorbereitete Bausteine müssen beim gemeinsamen Review gegen den aktuellen Produktkatalog abgeglichen werden.
## Sync
## Subframe
Baustein-Katalog und Feld-Details: [[S05a Baustein-Konfig Vorplanung]].
- [Screen direkt öffnen](https://app.subframe.com/f023064a5ca0/design/6fab8a3e-c016-4381-b7e8-19414e8dcb7b/edit)
- [P12-Flow öffnen](https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit)
@@ -5,39 +5,36 @@ ticket: D-FLOW
package: WF-P12 Flow-Editor
id: S01c
screen: Canvas-Kontextmenue
subframe_name: "Kontextmenue Canvas"
subframe_page_id: "2278da93-f0a2-4e46-bd3b-250d5912a62d"
typ: Kontextmenue
umsetzung: Bauen
status: In Subframe - Review offen
route: "Rechtsklick auf die Zeichenflaeche in S01"
status: In Subframe - in Obsidian gespiegelt
route: "Rechtsklick auf die Zeichenfläche in S01"
subframe: "https://app.subframe.com/f023064a5ca0/design/2278da93-f0a2-4e46-bd3b-250d5912a62d/edit"
source_checked: 2026-08-03
---
# S01c — Canvas-Kontextmenü
## Ziel
## Ziel und Rolle im Flow
Schneller Zugriff auf die häufigsten Editor-Aktionen per Rechtsklick auf die leere Zeichenfläche.
Schneller Zugriff auf die häufigsten Bearbeitungsaktionen per Rechtsklick in [[S01 Flow-Editor]].
## Was das Tool können muss
## Sichtbare Aktionen
- Baustein hinzufügen · Einfügen
- Rückgängig · Wiederholen
- Ausschneiden · Kopieren · Duplizieren
- Alles auswählen · Automatisch anordnen
- Löschen (in Rot)
- Jeweils mit Tastenkürzel-Anzeige
- Baustein hinzufügen und Einfügen.
- Rückgängig und Wiederholen.
- Ausschneiden, Kopieren und Duplizieren.
- Alles auswählen und automatisch anordnen.
- Löschen als destruktive Aktion.
- Tastenkürzel werden direkt neben den Aktionen gezeigt.
## Pattern / Archetyp
## Scope
Kontextmenü-Komponente aus dem Baukasten.
Das vorhandene Canvas-Kontextmenü ist die einzige separate Kontextmenü-Referenz. Ein zusätzlicher eigener Screen für Knoten/Kanten wird nicht geführt.
## Zustände
## Subframe
| Zustand | Beschreibung | Umsetzung |
|---|---|---|
| Rechtsklick auf leere Fläche | dieses Menü | In Subframe |
| Rechtsklick auf einen Baustein | eigenes Menü (Konfigurieren, Duplizieren, Löschen …) | **fehlt — kommt mit der Baustein-Karte** (S01d) |
## Bewertung (Validierung 2026-07-13)
Sauber gebaut: richtige Baukasten-Komponente, alle Editor-Aktionen vorhanden, Kürzel ordentlich. Keine Reparatur nötig.
- [Screen direkt öffnen](https://app.subframe.com/f023064a5ca0/design/2278da93-f0a2-4e46-bd3b-250d5912a62d/edit)
- [P12-Flow öffnen](https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit)
@@ -1,44 +1,166 @@
{
"nodes":[
{"id":"group-editor","type":"group","x":-80,"y":-160,"width":3200,"height":460,"label":"Editor (Bespoke — schwerste UI, Langläufer)"},
{"id":"group-schutz","type":"group","x":-80,"y":460,"width":1820,"height":380,"label":"Schutz-Dialoge"},
{"id":"md-paket","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.md","x":-80,"y":-440,"width":460,"height":280},
{"id":"note-entry","type":"text","text":"# Einstieg\n\n»+ Neue Automation« aus der Automation-Liste (WF-P12 Verwaltung) → Start-Auswahl.\n\nKlartext-First: alles in verständlichem Deutsch.","x":0,"y":0,"width":360,"height":200},
{"id":"m03","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M03 Start-Auswahl.md","x":560,"y":0,"width":420,"height":200},
{"id":"s01","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01 Flow-Editor.md","x":1240,"y":0,"width":420,"height":200},
{"id":"m01","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M01 Probelauf.md","x":560,"y":560,"width":420,"height":200},
{"id":"m02","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M02 Schleifen-Warnung.md","x":1240,"y":560,"width":420,"height":200},
{"id":"note-embed","type":"text","text":"# Anordnung (neu ab 2026-07-12)\n\nVollbild-Canvas · Baustein-Picker als Drawer · Konfig als echter Dialog je Baustein.\n\nDie alte Anordnung (Katalog links · Konfig rechts) ist ERSETZT.\n\nDie 30 Konfig-Dialoge liegen in WF-P12 Verwaltung (S05 / S05a).","x":0,"y":560,"width":460,"height":240},
{"id":"s01b","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01b Baustein-Picker.md","x":2000,"y":-80,"width":420,"height":170},
{"id":"s01c","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01c Canvas-Kontextmenue.md","x":2000,"y":110,"width":420,"height":170},
{"id":"s01d","type":"text","text":"# S01d — Baustein-Karte + Kanten\n\nFEHLT — hoechste Prioritaet.\n\nOhne die Knoten-Darstellung auf dem Canvas haengen die 30 Konfig-Dialoge an nichts. Inkl. Verzweigungs-Kanten (Wenn-Dann Ja/Nein, Switch, Schleife) und Inline-Validierung am Baustein.\n\n(Ein Muster war gebaut und wurde wieder geloescht.)","x":2680,"y":5,"width":420,"height":200}
],
"edges":[
{
"id":"e-entry",
"styleAttributes":{"path":"dotted"},
"fromNode":"note-entry",
"fromSide":"right",
"toNode":"m03",
"toSide":"left"
},
{"id":"e-start","fromNode":"m03","fromSide":"right","toNode":"s01","toSide":"left","label":"leer oder Vorlage"},
{"id":"e-picker","fromNode":"s01","fromSide":"right","toNode":"s01b","toSide":"left","label":"Baustein hinzufügen"},
{"id":"e-ctx","fromNode":"s01","fromSide":"right","toNode":"s01c","toSide":"left","label":"Rechtsklick"},
{"id":"e-card","fromNode":"s01b","fromSide":"right","toNode":"s01d","toSide":"left","label":"landet als Karte"},
{"id":"e-dryrun","fromNode":"s01","fromSide":"bottom","toNode":"m01","toSide":"top","label":"Probelauf / vor Aktivierung"},
{
"id":"e-loop",
"styleAttributes":{"path":"long-dashed"},
"fromNode":"s01",
"fromSide":"bottom",
"toNode":"m02",
"toSide":"top",
"label":"bei Schleifen-Verdacht"
}
],
"metadata":{
"version":"1.0-1.0",
"frontmatter":{}
}
}
"nodes": [
{
"id": "1000000000000001",
"type": "group",
"x": -80,
"y": -120,
"width": 2960,
"height": 520,
"label": "Flow-Editor · aktueller und geplanter Ablauf",
"color": "5"
},
{
"id": "1000000000000002",
"type": "group",
"x": 980,
"y": 460,
"width": 1900,
"height": 380,
"label": "Verknüpfte Verwaltung",
"color": "3"
},
{
"id": "1000000000000003",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.md",
"x": -80,
"y": -440,
"width": 460,
"height": 260
},
{
"id": "1000000000000004",
"type": "text",
"text": "# Einstieg\n\n»+ Neue Automation« aus der Automation-Liste öffnet die Start-Auswahl.",
"x": 0,
"y": 0,
"width": 420,
"height": 180
},
{
"id": "1000000000000005",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M03 Start-Auswahl.md",
"x": 540,
"y": 0,
"width": 400,
"height": 180,
"color": "3"
},
{
"id": "1000000000000006",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01 Flow-Editor.md",
"x": 1060,
"y": 0,
"width": 420,
"height": 180
},
{
"id": "1000000000000007",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01b Baustein-Picker.md",
"x": 1660,
"y": -40,
"width": 420,
"height": 170
},
{
"id": "1000000000000008",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01c Canvas-Kontextmenue.md",
"x": 1660,
"y": 150,
"width": 420,
"height": 170
},
{
"id": "1000000000000009",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Verwaltung/Screens/S05 Baustein-Konfig-Panels.md",
"x": 2300,
"y": 0,
"width": 500,
"height": 180,
"color": "5"
},
{
"id": "100000000000000a",
"type": "file",
"file": "02 Wireframes/P12 Automationen/WF-P12 Verwaltung/Screens/S02 Lauf-Liste.md",
"x": 1060,
"y": 580,
"width": 420,
"height": 180,
"color": "3"
},
{
"id": "100000000000000b",
"type": "text",
"text": "# Scope\n\nKein eigener Screen für gefüllten Editor, Probelauf oder Schleifen-/Ratenwarnung.\n\nM03 und S02 sind noch zu validieren und in Subframe zu bauen.",
"x": 1600,
"y": 540,
"width": 540,
"height": 220
}
],
"edges": [
{
"id": "2000000000000001",
"fromNode": "1000000000000004",
"fromSide": "right",
"toNode": "1000000000000005",
"toSide": "left",
"label": "+ Neue Automation"
},
{
"id": "2000000000000002",
"fromNode": "1000000000000005",
"fromSide": "right",
"toNode": "1000000000000006",
"toSide": "left",
"label": "Leer oder Standardvorlage"
},
{
"id": "2000000000000003",
"fromNode": "1000000000000006",
"fromSide": "right",
"toNode": "1000000000000007",
"toSide": "left",
"label": "Baustein hinzufügen"
},
{
"id": "2000000000000004",
"fromNode": "1000000000000006",
"fromSide": "right",
"toNode": "1000000000000008",
"toSide": "left",
"label": "Rechtsklick"
},
{
"id": "2000000000000005",
"fromNode": "1000000000000007",
"fromSide": "right",
"toNode": "1000000000000009",
"toSide": "left",
"label": "Baustein wählen"
},
{
"id": "2000000000000006",
"fromNode": "1000000000000006",
"fromSide": "right",
"toNode": "1000000000000009",
"toSide": "left",
"label": "Konfiguration öffnen"
},
{
"id": "2000000000000007",
"fromNode": "1000000000000006",
"fromSide": "bottom",
"toNode": "100000000000000a",
"toSide": "top",
"label": "Aktivität"
}
]
}
@@ -4,130 +4,55 @@ project: HiveGrid Screen Project
ticket: D-FLOW
package: WF-P12 Flow-Editor
typ: Flow
status: In Subframe (Grundgeruest) - Neuausrichtung 2026-07-12
status: Subframe-Bestand in Obsidian gespiegelt - M03 offen
subframe: "https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit"
canvas: "WF-P12 Flow-Editor.canvas"
source_checked: 2026-08-03
---
# WF-P12 Flow-Editor
Status: Editor-Grundgerüst in Subframe, Bausteine auf dem Canvas fehlen; M01–M03 neu zu bauen
Subframe-Flow: [(MCP) HiveGrid Workflow Engine / Automationen P12](https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit)
Canvas: [Canvas](<WF-P12 Flow-Editor.canvas>)
Stand: 2026-07-13 (Subframe per MCP abgeglichen)
Subframe-Flow: [(MCP) HiveGrid Workflow Engine / Automationen P12](https://app.subframe.com/f023064a5ca0/flow/22d511a9-1d8f-4554-89ad-86729b8d7738/edit)
Canvas: [Canvas](<WF-P12 Flow-Editor.canvas>)
---
## Kurzfassung
## 1. Kurzfassung
Das Paket dokumentiert Einstieg und zentrale Editor-Oberflächen. Der aktuelle Subframe-Bestand wurde am 2026-08-03 vollständig per MCP gelesen und nach Obsidian gespiegelt.
Der Automations-Baukasten: Zeichenfläche mit Auslöser- und Aktions-Bausteinen, alles in verständlichem Deutsch, mit Probelauf und Schleifen-Schutz. **Schwerste UI der App, erste USP-Säule, Langläufer — viele Iterationen einplanen.**
## Gültiger Scope
---
- [[M03 Start-Auswahl]] — erforderlich, noch gemeinsam zu validieren und zu bauen.
- [[S01 Flow-Editor]] — gebauter leerer Vollbild-Editor.
- [[S01b Baustein-Picker]] — gebauter Drawer.
- [[S01c Canvas-Kontextmenue]] — gebautes Kontextmenü.
- Die 32 Konfigurationsscreens liegen einzeln in WF-P12 Verwaltung und sind über [[S05 Baustein-Konfig-Panels]] erschlossen.
## 2. Intent Check
## Entfernt aus dem Screen-Scope
| Frage | Antwort |
|---|---|
| Ticket/Modul | D-FLOW, Dev-Pendant R-P12a/R-P12b (Editor blockt R-P12b!) |
| Nutzer-Ziel | »Wenn X passiert, tu Y« zusammenklicken — ohne Programmierkenntnisse, ohne Angst vor Fehlern |
| Quellen geprüft | `ticket-docs/D-FLOW.md`, ENTITY-MODEL Domäne 7, HiveGrid Map |
| Sicher im Scope | Graph-Canvas, Baustein-Picker, Konfig-Dialoge, Mini-Map, Toolbar, Validation, Dry-Run, Loop-Warnung, Start-Auswahl |
| Sicher nicht im Scope | Sprach-zu-Automation (gestrichen, AD-26) · KWP-Konfig-UI (v2) · Liste/Verläufe/Vorlagen (WF-P12 Verwaltung) |
| Unsichere Annahmen | — |
Entscheidung 2026-08-03:
---
- Kein eigener „gefüllter Editor“-Screen.
- Kein eigener Probelauf-Screen.
- Kein eigener Schleifen-/Ratenwarnungs-Screen.
## 3. Scope
Die Funktionen dürfen technisch vorhanden sein, sind aber keine separat zu pflegenden oder neu zu bauenden Design-Screens.
| Punkt | Inhalt |
|---|---|
| Startpunkt | »+ Neue Automation« (aus der Automation-Liste) oder bestehende öffnen |
| Ziel | Automation gebaut, per Probelauf geprüft, bewusst aktiviert |
| Haupt-Archetyp | **BESPOKE — schwerste UI** + A5 Dialoge |
| Out of scope | s. o. |
## Flow
---
Automation-Liste → M03 Start-Auswahl → S01 Flow-Editor
S01 → S01b Baustein-Picker → individueller Konfigurationsdialog
S01 → S01c Canvas-Kontextmenü
S01 → Aktivität → Lauf-Liste
## 4. Entscheidungen
## Screen-Stand
| Entscheidung | Status | Notiz |
| ID | Screen | Subframe |
|---|---|---|
| Zwei P12-Pakete (Editor / Verwaltung) | genommen (07-09) | Editor ist Langläufer |
| ~~Grundanordnung: Katalog links · Canvas Mitte · Konfig rechts~~ | **ERSETZT (07-12)** | n8n-Dreispalten verworfen. Beide Subframe-Varianten (A/B) wurden gelöscht. |
| **Grundanordnung: Vollbild-Canvas · Baustein-Picker als Drawer · Konfig als Dialog** | genommen (07-12) | Neuer gebauter Stand, siehe [[S01 Flow-Editor]]. Subframe gilt. |
| **Konfig als echtes Modal je Baustein-Typ** | genommen (07-12, David) | 30 Dialoge gebaut, siehe [[S05a Baustein-Konfig Vorplanung]] |
| Farbschema der Kategorien: S05a-Schema | genommen (07-13, Dejan) | Grün/Rot/Blau/Gelb/Violett/Grau. Die 30 Konfig-Dialoge stimmen bereits; der **Picker muss nachziehen** (nutzt derzeit Orange für Auslöser). |
| Ansprache: durchgehend duzen | genommen (07-13, Dejan) | Der Baustein-Picker siezt noch und muss nachziehen. |
| Start-Auswahl mit Vorlagen | genommen (07-09) | »+ Neue Automation« → Dialog: leer starten ODER SHK-/eigene Vorlage wählen → Editor öffnet |
| Dry-Run + Schleifen-Warnung als eigene Modals | genommen (07-09) | Pflicht-Bestätigung ab Schwelle (mandant-einstellbar) |
| Aktivieren blockiert bei Fehlern | genommen (07-09) | Klartext-Fehlerliste (nicht verbunden / Schleife / Pflichtfeld) |
| Klartext-First | genommen (07-09) | Baustein-Labels, Validierung, Dry-Run-Ausgaben: verständliches Deutsch |
| **Modus-Umschalter »Bauen / Aktivität / Auswertung«** | **OFFEN — David muss entscheiden** | Im Editor-Kopf gebaut, aber »Auswertung« steht in keinem Ticket; »Aktivität« würde die Lauf-Liste in den Editor holen. Aufgefallen beim Abgleich 2026-07-13. Planung läuft vorerst **ohne** die Tabs. |
| M03 | Start-Auswahl | Noch nicht gebaut |
| S01 | Flow-Editor | [Öffnen](https://app.subframe.com/f023064a5ca0/design/ae9f5d91-1153-44de-9af3-63010bc86162/edit) |
| S01b | Baustein-Picker | [Öffnen](https://app.subframe.com/f023064a5ca0/design/6fab8a3e-c016-4381-b7e8-19414e8dcb7b/edit) |
| S01c | Canvas-Kontextmenü | [Öffnen](https://app.subframe.com/f023064a5ca0/design/2278da93-f0a2-4e46-bd3b-250d5912a62d/edit) |
### Happy Path
## Nächster Schritt
1. »+ Neue Automation« → Start-Auswahl: Vorlage wählen (oder leer starten).
2. Editor: Baustein über den Picker-Drawer hinzufügen, verbinden; Klick auf Baustein → Konfig-Dialog in Klartext.
3. Inline-Fehler beheben (»Baustein nicht verbunden«).
4. **Probelauf**: »Trifft 143 Datensätze …« — prüfen, ggf. Pflicht-Bestätigung.
5. Aktivieren. Bei Schleifen-Verdacht: Warnmodal mit Mini-Graph + »Beheben«.
### Meldungs-/Error-States (validiert)
| Ereignis | UI-Form | Blockiert? | Bauen? | Copy/Notiz |
|---|---|---|---|---|
| Probelauf ab Schwelle | Pflicht-Bestätigung im Dry-Run-Modal | ja | Bauen (M01) | »Trifft > 100 Datensätze — bitte bestätigen« |
| Schleife erkannt | Warnmodal mit Mini-Abhängigkeits-Graph | ja | Bauen (M02) | + »Beheben«-Knopf |
| Aktivieren mit Fehlern | blockiert + Klartext-Fehlerliste | ja | Nur dokumentieren | je Fehler Sprung zum Baustein |
| Anomalie-Pause | Banner (auch in Liste/Detail) | nein | Nur dokumentieren | »2.000-mal in 5 Min — pausiert« |
| Ungespeicherte Änderungen | Hinweis beim Verlassen | nein | Nur dokumentieren | — |
---
## 7. Screen-Liste (Stand 2026-07-13)
| ID | Screen/Zustand | Typ | Umsetzung | Ort | Status |
|---|---|---|---|---|---|
| S01 | Flow-Editor (Vollbild-Canvas) ⭐ | BESPOKE | Bauen | `/automations/:id/edit` | **In Subframe** (Grundgerüst, leerer Canvas) |
| S01b | Baustein-Picker (Drawer) | Drawer | Bauen | aus S01 | **In Subframe** (Farbschema nachziehen) |
| S01c | Canvas-Kontextmenü | Kontextmenü | Bauen | Rechtsklick in S01 | **In Subframe** |
| S01d | Baustein-Karte + Kanten auf dem Canvas | BESPOKE | Bauen | in S01 | **FEHLT — höchste Priorität** |
| M01 | Probelauf (Dry-Run) | Modal | Bauen | aus S01 | Validiert, Subframe gelöscht → neu bauen |
| M02 | Schleifen-/Raten-Warnung | Modal | Bauen | aus S01 | Validiert, Subframe gelöscht → neu bauen |
| M03 | Start-Auswahl (leer / Vorlage) | Modal | Bauen | »+ Neue Automation« | Validiert, Subframe gelöscht → neu bauen |
| D01–D03 | Aktivieren-Block / Anomalie-Banner / Verlassen-Hinweis | Inline | Nur dokumentieren | — | Validiert |
---
## 8. Grid
```text
Automation-Liste (WF-P12 Verwaltung) -> M03 (Start-Auswahl) -> S01 (Editor)
S01 -> S01b (Baustein-Picker Drawer) -> Baustein landet auf dem Canvas
S01 -> Klick auf Baustein -> Konfig-Dialog (WF-P12 Verwaltung S05/S05a)
S01 -> M01 (Probelauf) -> Aktivieren
S01 -> M02 (Schleifen-Warnung, bei Verdacht)
```
---
## 9. Screen-Pakete
- [[S01 Flow-Editor]] · [[M01 Probelauf]] · [[M02 Schleifen-Warnung]] · [[M03 Start-Auswahl]]
- Baustein-Konfig: [[S05a Baustein-Konfig Vorplanung]] (Katalog aller 30 Dialoge)
---
## 10. Offene Fragen
- **Modus-Umschalter »Bauen / Aktivität / Auswertung«** — offen (David). Siehe Entscheidungstabelle.
- Kanten-Interaktion (Klick-Verbinden vs. nur Ziehen) + Auto-Anordnen-Verhalten → Subframe-Iterationen
- Dry-Run-Schwelle: Default-Wert → Dev
- M02: »Trotzdem aktivieren« widerspricht der Blockier-Regel — beim Neubau klären
- M03: doppelter CTA (»Verwenden« je Karte + »Mit Auswahl weiter« im Footer) — Interaktionsmodell festlegen
## Handoff-Check
- [x] Jeder Screen ist mit Umsetzung markiert.
- [x] Meldungs-/Error-State-Matrix ist ausgefüllt.
- [ ] Subframe vollständig. *(Editor-Grundgerüst + Picker + Kontextmenü stehen; Baustein-Karte, Kanten und M01–M03 fehlen.)*
M03 gemeinsam validieren. Die übrigen drei Seiten sind Bestands-Screens und werden nur bei konkreten Reviewbefunden verändert.