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

frontend/src/api.ts

@@ -66,6 +66,7 @@ export interface SyncReport {
   updated: string[];
   deleted: string[];
   skipped: string[];
+  pulled: string[];
   errors: Record<string, string>;
 }
 

frontend/src/components/AdminTab.tsx

@@ -24,6 +24,7 @@ import {
   type FlowDefinition,
   type FlowVersion,
 } from "../api";
+import FlowHelp from "./FlowHelp";
 import StatusBadge from "./StatusBadge";
 
 export default function AdminTab() {
@@ -89,6 +90,7 @@ export default function AdminTab() {
     try {
       const r = await api.syncFlows();
       const parts = [
+        `Langflow: ${r.pulled.length}`,
         `+${r.added.length}`,
         `~${r.updated.length}`,
         `-${r.deleted.length}`,
@@ -147,6 +149,7 @@ export default function AdminTab() {
           </Button>
         </Group>
       </Card>
+      <FlowHelp />
       <Card withBorder padding="md" mb="md">
         <Group>
           <Button
@@ -154,9 +157,13 @@ export default function AdminTab() {
             leftSection={<IconRefresh size={16} />}
             onClick={() => void onSync()}
           >
-            Aus backend/flows synchronisieren
+            Aus Langflow synchronisieren
           </Button>
         </Group>
+        <Text size="sm" c="dimmed" mt="xs">
+          Holt alle Flows aus Langflow nach backend/flows und deployed sie
+          danach automatisch.
+        </Text>
       </Card>
       {flows.length === 0 ? (
         <Text c="dimmed">Keine Flows vorhanden.</Text>

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>
+  );
+}