feat: manual full-pass sync Langflow -> files -> DB+LFX with admin guide

frontend/src/components/FlowHelp.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import {
+  Anchor,
+  Button,
+  Card,
+  List,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconChevronDown, IconChevronUp, IconExternalLink } from "@tabler/icons-react";
+import { LANGFLOW_URL } from "../api";
+
+export default function FlowHelp() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Card withBorder padding="md" mb="md">
+      <Button
+        variant="subtle"
+        leftSection={open ? <IconChevronUp size={16} /> : <IconChevronDown size={16} />}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {open ? "Anleitung verbergen" : "Anleitung: Neuer Flow in Langflow"}
+      </Button>
+      {open && (
+      <div>
+        <Title order={4} mt="sm" mb="xs">
+          So kommt ein neuer Flow in die Webapp
+        </Title>
+        <List size="sm" spacing="xs">
+          <List.Item>
+            <Text component="span" fw={600}>
+              1. In Langflow entwerfen und speichern:{" "}
+            </Text>
+            <Anchor href={LANGFLOW_URL} target="_blank" rel="noreferrer">
+              Langflow öffnen <IconExternalLink size={14} />
+            </Anchor>
+            . Die bestehenden Flows sind dort bereits geladen. Name vergeben, speichern.
+          </List.Item>
+          <List.Item>
+            <Text component="span" fw={600}>
+              2. Sync-Button unten klicken:{" "}
+            </Text>
+            holt alle Flows aus Langflow nach{" "}
+            <Text component="span" ff="monospace">
+              backend/flows/*.json
+            </Text>{" "}
+            und deployed sie danach automatisch (neue Version nur bei geändertem Inhalt,
+            sonst übersprungen).
+          </List.Item>
+          <List.Item>
+            <Text component="span" fw={600}>
+              3. Prüfen:{" "}
+            </Text>
+            Tabelle unten zeigt Version, Autor und Status. Danach erscheint der Flow
+            automatisch auf der Seite Workflows mit seinem Formular. Flows ohne
+            Formular-Knoten zeigen ein Freitext-Feld.
+          </List.Item>
+        </List>
+        <Title order={5} mt="md" mb="xs">
+          Regeln
+        </Title>
+        <List size="sm" spacing="xs">
+          <List.Item>
+            Der Dateiname wird aus dem Flow-Namen erzeugt (Kleinbuchstaben,
+            Bindestriche). Umbenennen erzeugt eine neue Datei.
+          </List.Item>
+          <List.Item>
+            Eine gelöschte Datei löscht den Flow inklusive seiner Läufe
+            (Datei bleibt in Git erhalten).
+          </List.Item>
+          <List.Item>
+            Fehler stehen in der Sync-Meldung (z. B. ungültiges Flow-JSON).
+            Der automatische Beobachter im Hintergrund syncet nur Dateien,
+            Langflow holt nur dieser Button.
+          </List.Item>
+        </List>
+        <Title order={5} mt="md" mb="xs">
+          Formular-Felder
+        </Title>
+        <Text size="sm">
+          Für ein Web-Formular braucht der Flow einen CustomInputForm-Knoten: jeder
+          Eintrag dort ist ein Formularfeld (Name = Feld-Key, Anzeigename = Label).
+          Die Verbindung ChatInput nach form_values bitte behalten — darüber kommen
+          die ausgefüllten Werte an. Unbekannte Feldtypen fallen automatisch auf ein
+          Textfeld zurück.
+        </Text>
+      </div>
+      )}
+    </Card>
+  );
+}