Designer — Überblick

Der Workflow-Designer stellt Trigger und Activities als Nodes auf einer Arbeitsfläche dar. Edges verbinden die Nodes und bestimmen den Ausführungspfad. Die Implementierung befindet sich in src/nodepilot-ui und verwendet React Flow.

Zwei Modi

ModusFokus
StandardGrundfunktionen, automatisches Links-nach-rechts-Layout und reduzierte Toolbar
ExpertVollständige Toolbar, Overlays und zusätzliche Tastenkürzel

Features, die nur im Expert-Modus sichtbar sind, sind in den folgenden Seiten mit (Expert) markiert.

Hauptbestandteile

  • Canvas mit Pan/Zoom, MiniMap, Background-Varianten, Viewport-Virtualisierung.
  • Node-Library / Palette links (Kategorien: Triggers, Actions, Control Flow, Logic, Annotations + Snippets).
  • Workflow-Browser links (Folder-View oder Trigger-View, Search/Filter, Info-Card).
  • Properties-Panel rechts (kontextsensitiv pro selektiertem Node/Edge). Der KI-Assistent teilt sich diesen Bereich: er überlagert die Properties und weicht wieder, sobald im Canvas etwas selektiert wird.
  • Header/Toolbar in zwei Layouts: kompakt (Standard; History, Inspect, Run, Lifecycle, View/Overlays/Tools liegen in Menüs) oder die klassische Inline-Zeile (sieben Abschnitte). Beide tragen einen KI-Assistent-Button und einen Farb-Skin-Umschalter (Palette-Icon — Popover mit 10 Skins + system, synchron mit Einstellungen).
  • Live Execution Panel unten (Tabs Live / History / Output / Watch).

Minimal Hell und Minimal Dunkel verwenden neutrale Flächen, einen blauen Akzent und klare Konturen in der gesamten Web-UI einschließlich Designer. Dekorative Verläufe, Glanz und Schatten entfallen; Statusfarben, Funktionen, Schriftgrößen, Abstände, Layout und persönliche Designer-Einstellungen bleiben erhalten.

ION Dunkel verwendet tiefblaue Flächen, Cyan-Akzente und dezente Leuchtkonturen in der gesamten Web-UI einschließlich Designer. Statusfarben bleiben unterscheidbar; Layout, Schriftgrößen und persönliche Designer-Einstellungen bleiben erhalten. Die Systemeinstellung für reduzierte Bewegung wird berücksichtigt.

Edit-Lifecycle im Designer

  • canWrite = roleCanWrite && isLockedByMe — beide Bedingungen nötig.
  • Lock Ctrl+E → atomar IsEnabled=false + Lock-Fields. 409 wenn schon gelockt.
  • Unlock Ctrl+U → Lock freigeben (IsEnabled bleibt). Ungespeicherte Änderungen werden nach Rückfrage verworfen, der Canvas zeigt danach den gespeicherten Stand. Dasselbe gilt für das Wiederherstellen einer Version im Diff-Dialog.
  • Publish Ctrl+Shift+S → atomar Save + Enable + Unlock (durch Pre-Publish-Checklist).
  • Disable/Enable — Kill-Switch (Disable nicht lock-gegated).
  • Force-Unlock (Admin) Ctrl+Shift+U (Expert) — bricht fremden Lock.

Ohne canWrite sind Drag, Connect, Delete, Kontextmenüs und Inline-Edits deaktiviert (Read-Only).

Wo es weitergeht

Alle Kapitel