feat: minimal frontend (run view, approvals, admin) with E2E smoke

- Tabs: Vorgaenge (run flows + history), Freigaben (decide tasks),
  Administration (Langflow link, import, deploy)
- Typed API client over vite /api proxy; tsc + vite build clean
- scripts/smoke_e2e.py: real LFX + API end-to-end, all green
- 34 backend tests green

.gitignore

@@ -8,6 +8,7 @@ __pycache__/
 # Node
 node_modules/
 dist/
+*.tsbuildinfo
 
 # Environment
 .env

backend/scripts/smoke_e2e.py

@@ -0,0 +1,127 @@
+"""Manual end-to-end smoke: real LFX + real API, frontend-shaped calls.
+
+Usage (from backend/):
+    TEST_DATABASE_URL=postgresql+psycopg://... uv run python scripts/smoke_e2e.py
+Exits non-zero on any unexpected status/body.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import subprocess
+import sys
+import time
+import urllib.request
+from pathlib import Path
+
+BACKEND = Path(__file__).resolve().parent.parent
+VENV_BIN = BACKEND / ".venv" / "bin"
+FIXTURES = BACKEND / "tests" / "fixtures" / "flows"
+
+LFX_PORT = 6004
+API_PORT = 8000
+LFX_KEY = "lfx-759GsfJKjAeOBZ_44-cll9WdHp_yfYn_tIg7eHG38Rs"
+
+
+def wait_healthy(url: str, timeout: int = 180) -> None:
+    deadline = time.time() + timeout
+    while time.time() < deadline:
+        try:
+            with urllib.request.urlopen(url, timeout=3) as r:
+                if r.status == 200:
+                    return
+        except OSError:
+            time.sleep(1)
+    raise RuntimeError(f"never healthy: {url}")
+
+
+def api(method: str, path: str, body: dict | None = None) -> tuple[int, dict | str]:
+    import httpx
+
+    with httpx.Client(base_url=f"http://127.0.0.1:{API_PORT}", timeout=120) as c:
+        r = c.request(method, path, json=body)
+        try:
+            return r.status_code, r.json()
+        except ValueError:
+            return r.status_code, r.text
+
+
+def check(name: str, cond: bool, detail: str = "") -> None:
+    print(f"[{'OK' if cond else 'FAIL'}] {name} {detail}")
+    if not cond:
+        raise SystemExit(f"smoke failed: {name} {detail}")
+
+
+def main() -> None:
+    flow_dir = Path("/tmp/smoke-e2e-flows")
+    flow_dir.mkdir(exist_ok=True)
+    (flow_dir / "seed.json").write_text(
+        (FIXTURES / "simple_rule.json").read_text()
+    )
+    env = {
+        **os.environ,
+        "LFX_API_KEY": LFX_KEY,
+        "DATABASE_URL": os.environ["TEST_DATABASE_URL"],
+        "LFX_URL": f"http://127.0.0.1:{LFX_PORT}",
+        "LFX_API_KEY": LFX_KEY,
+        "CALLBACK_BASE_URL": f"http://127.0.0.1:{API_PORT}",
+    }
+    lfx = subprocess.Popen(
+        [str(VENV_BIN / "lfx"), "serve", "--host", "127.0.0.1",
+         "--port", str(LFX_PORT), "--flow-dir", str(flow_dir), str(flow_dir)],
+        stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL, env=env,
+    )
+    uvicorn = subprocess.Popen(
+        [str(VENV_BIN / "uvicorn"), "app.main:app", "--host", "127.0.0.1",
+         "--port", str(API_PORT)],
+        cwd=str(BACKEND), stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL,
+        env=env,
+    )
+    try:
+        wait_healthy(f"http://127.0.0.1:{LFX_PORT}/health")
+        wait_healthy(f"http://127.0.0.1:{API_PORT}/health")
+
+        s, flows = api("GET", "/api/flows")
+        check("list flows", s == 200 and isinstance(flows, list))
+
+        s, flow = api("POST", "/api/flows", {"name": "smoke-dach"})
+        check("create flow", s == 201, json.dumps(flow)[:120])
+        fid = flow["id"]
+
+        fx = json.loads((FIXTURES / "simple_rule.json").read_text())
+        s, ver = api(
+            "POST", f"/api/flows/{fid}/versions",
+            {"langflow_json": fx, "author": "smoke"},
+        )
+        check("create version", s == 201, f"v{ver.get('version_no')}")
+
+        s, dep = api("POST", f"/api/flows/{fid}/versions/1/deploy")
+        check("deploy", s == 200 and dep.get("lfx_flow_id"), json.dumps(dep)[:160])
+
+        s, run = api(
+            "POST", f"/api/flows/{fid}/run",
+            {"input": {"betrag": 120000, "schwelle": 200000}},
+        )
+        check("run standard", s == 200 and run.get("status") == "completed",
+              json.dumps(run.get("output"))[:120])
+
+        s, run2 = api(
+            "POST", f"/api/flows/{fid}/run",
+            {"input": {"betrag": 999000, "schwelle": 200000}},
+        )
+        check("run sonderfall", s == 200 and "Sonderfall" in (run2.get("output") or {}).get("result", ""))
+
+        s, tasks = api("GET", "/api/approvals")
+        check("approvals empty (no callback flow)", s == 200 and tasks == [])
+
+        print("smoke E2E: all green")
+    finally:
+        uvicorn.terminate()
+        lfx.terminate()
+
+
+if __name__ == "__main__":
+    if "TEST_DATABASE_URL" not in os.environ:
+        sys.exit("TEST_DATABASE_URL must be set")
+    main()

frontend/src/App.tsx

@@ -1,10 +1,39 @@
-function App() {
+import { useState } from "react";
+import AdminTab from "./components/AdminTab";
+import ApprovalsTab from "./components/ApprovalsTab";
+import FlowsTab from "./components/FlowsTab";
+
+type Tab = "flows" | "approvals" | "admin";
+
+const tabStyle = (active: boolean): React.CSSProperties => ({
+  fontWeight: active ? "bold" : "normal",
+  textDecoration: active ? "underline" : "none",
+});
+
+export default function App() {
+  const [tab, setTab] = useState<Tab>("flows");
+
   return (
-    <div>
+    <div style={{ maxWidth: 900, margin: "0 auto", padding: 16 }}>
       <h1>Kirche Einfach</h1>
       <p>KI-gestützte Verwaltungsplattform für Kirche</p>
+      <nav style={{ display: "flex", gap: 12, marginBottom: 16 }}>
+        <button style={tabStyle(tab === "flows")} onClick={() => setTab("flows")}>
+          Vorgänge
+        </button>
+        <button
+          style={tabStyle(tab === "approvals")}
+          onClick={() => setTab("approvals")}
+        >
+          Freigaben
+        </button>
+        <button style={tabStyle(tab === "admin")} onClick={() => setTab("admin")}>
+          Administration
+        </button>
+      </nav>
+      {tab === "flows" && <FlowsTab />}
+      {tab === "approvals" && <ApprovalsTab />}
+      {tab === "admin" && <AdminTab />}
     </div>
   );
 }
-
-export default App;

frontend/src/api.ts

@@ -0,0 +1,138 @@
+/* Typed client for the kirche-einfach API (served via vite /api proxy). */
+
+export interface FlowDefinition {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
+  continuation_flow_id: string | null;
+  created_at: string;
+}
+
+export interface FlowVersion {
+  id: string;
+  flow_id: string;
+  version_no: number;
+  langflow_json: unknown;
+  lfx_flow_id: string | null;
+  deployed_at: string | null;
+  author: string;
+  created_at: string;
+}
+
+export interface RunOutput {
+  result?: string;
+  component?: string;
+  type?: string;
+  error?: string;
+  [key: string]: unknown;
+}
+
+export interface Run {
+  id: string;
+  version_id: string;
+  tenant_id: string;
+  status: string;
+  input: unknown;
+  output: RunOutput | null;
+  session_id: string | null;
+  created_at: string;
+  finished_at: string | null;
+}
+
+export interface ApprovalTask {
+  id: string;
+  run_id: string;
+  version_id: string;
+  tenant_id: string;
+  title: string;
+  payload: unknown;
+  continuation_flow_id: string | null;
+  approver: string | null;
+  status: string;
+  decision_note: string;
+  created_at: string;
+  decided_at: string | null;
+}
+
+export interface Decision {
+  task: ApprovalTask;
+  continuation_run: Run | null;
+}
+
+export class ApiError extends Error {
+  status: number;
+  constructor(status: number, message: string) {
+    super(message);
+    this.status = status;
+  }
+}
+
+async function req<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(path, {
+    headers: { "Content-Type": "application/json" },
+    ...init,
+  });
+  if (!res.ok) {
+    let detail = res.statusText;
+    try {
+      const body: unknown = await res.json();
+      if (
+        typeof body === "object" &&
+        body !== null &&
+        "detail" in body &&
+        typeof (body as { detail: unknown }).detail === "string"
+      ) {
+        detail = (body as { detail: string }).detail;
+      }
+    } catch {
+      /* keep statusText */
+    }
+    throw new ApiError(res.status, detail);
+  }
+  return (await res.json()) as T;
+}
+
+export const LANGFLOW_URL =
+  (import.meta.env.VITE_LANGFLOW_URL as string | undefined) ??
+  "http://localhost:7860";
+
+export const api = {
+  listFlows: () => req<FlowDefinition[]>("/api/flows"),
+  listVersions: (flowId: string) =>
+    req<FlowVersion[]>(`/api/flows/${flowId}/versions`),
+  deployVersion: (flowId: string, versionNo: number) =>
+    req<FlowVersion>(`/api/flows/${flowId}/versions/${versionNo}/deploy`, {
+      method: "POST",
+    }),
+  runFlow: (flowId: string, input: unknown, tenantId: string) =>
+    req<Run>(`/api/flows/${flowId}/run`, {
+      method: "POST",
+      body: JSON.stringify({ input, tenant_id: tenantId }),
+    }),
+  listRuns: (flowId: string) => req<Run[]>(`/api/flows/${flowId}/runs`),
+  listApprovals: () => req<ApprovalTask[]>("/api/approvals"),
+  decide: (
+    taskId: string,
+    decision: "approve" | "reject",
+    approver: string,
+    note: string,
+  ) =>
+    req<Decision>(`/api/approvals/${taskId}/decision`, {
+      method: "POST",
+      body: JSON.stringify({ decision, approver, note }),
+    }),
+  importFlow: (langflowFlowId: string, name?: string) =>
+    req<{ definition: FlowDefinition; version: FlowVersion }>(
+      "/api/flows/import",
+      {
+        method: "POST",
+        body: JSON.stringify({
+          langflow_flow_id: langflowFlowId,
+          ...(name ? { name } : {}),
+        }),
+      },
+    ),
+  listLangflow: () =>
+    req<{ id: string; name: string }[]>("/api/flows/langflow/available"),
+};

frontend/src/components/AdminTab.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  ApiError,
+  LANGFLOW_URL,
+  api,
+  type FlowDefinition,
+  type FlowVersion,
+} from "../api";
+
+export default function AdminTab() {
+  const [flows, setFlows] = useState<FlowDefinition[]>([]);
+  const [versions, setVersions] = useState<Record<string, FlowVersion[]>>({});
+  const [langflowId, setLangflowId] = useState("");
+  const [importName, setImportName] = useState("");
+  const [error, setError] = useState("");
+  const [info, setInfo] = useState("");
+
+  const load = useCallback(async () => {
+    try {
+      const list = await api.listFlows();
+      setFlows(list);
+      const all: Record<string, FlowVersion[]> = {};
+      for (const f of list) {
+        all[f.id] = await api.listVersions(f.id);
+      }
+      setVersions(all);
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function onImport() {
+    setError("");
+    setInfo("");
+    try {
+      const result = await api.importFlow(
+        langflowId,
+        importName.trim() ? importName.trim() : undefined,
+      );
+      setInfo(
+        `Importiert: ${result.definition.name} (Version ${result.version.version_no})`,
+      );
+      setLangflowId("");
+      setImportName("");
+      await load();
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    }
+  }
+
+  async function onDeploy(flowId: string, versionNo: number) {
+    setError("");
+    setInfo("");
+    try {
+      const version = await api.deployVersion(flowId, versionNo);
+      setInfo(`Deployed: Version ${version.version_no} (${version.lfx_flow_id})`);
+      await load();
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    }
+  }
+
+  return (
+    <div>
+      <h2>Administration</h2>
+      {error && <p style={{ color: "crimson" }}>{error}</p>}
+      {info && <p style={{ color: "green" }}>{info}</p>}
+      <p>
+        Flows werden visuell in Langflow entworfen:{" "}
+        <a href={LANGFLOW_URL} target="_blank" rel="noreferrer">
+          Langflow öffnen
+        </a>
+      </p>
+      <h3>Import aus Langflow</h3>
+      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
+        <input
+          value={langflowId}
+          onChange={(e) => setLangflowId(e.target.value)}
+          placeholder="Langflow Flow-ID (UUID)"
+          style={{ flex: 1, fontFamily: "monospace" }}
+        />
+        <input
+          value={importName}
+          onChange={(e) => setImportName(e.target.value)}
+          placeholder="Name (optional)"
+        />
+        <button onClick={() => void onImport()} disabled={!langflowId.trim()}>
+          Importieren + Deployen
+        </button>
+      </div>
+      <h3>Flows + Versionen</h3>
+      {flows.length === 0 && <p>Keine Flows vorhanden.</p>}
+      <ul>
+        {flows.map((f) => (
+          <li key={f.id} style={{ marginBottom: 8 }}>
+            <strong>{f.name}</strong>
+            <ul>
+              {(versions[f.id] ?? []).map((v) => (
+                <li key={v.id}>
+                  v{v.version_no} ·{" "}
+                  {v.deployed_at ? `deployed (${v.lfx_flow_id})` : "nicht deployed"} ·{" "}
+                  {v.author || "–"}{" "}
+                  <button onClick={() => void onDeploy(f.id, v.version_no)}>
+                    Deployen
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/components/ApprovalsTab.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useState } from "react";
+import { ApiError, api, type ApprovalTask } from "../api";
+
+export default function ApprovalsTab() {
+  const [tasks, setTasks] = useState<ApprovalTask[]>([]);
+  const [approver, setApprover] = useState("");
+  const [note, setNote] = useState("");
+  const [error, setError] = useState("");
+  const [busyId, setBusyId] = useState("");
+
+  const load = useCallback(async () => {
+    try {
+      setTasks(await api.listApprovals());
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function decide(taskId: string, decision: "approve" | "reject") {
+    setBusyId(taskId);
+    setError("");
+    try {
+      const result = await api.decide(taskId, decision, approver, note);
+      setTasks((prev) =>
+        prev.map((t) => (t.id === taskId ? result.task : t)),
+      );
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    } finally {
+      setBusyId("");
+    }
+  }
+
+  const open = tasks.filter((t) => t.status === "open");
+  const done = tasks.filter((t) => t.status !== "open");
+
+  return (
+    <div>
+      <h2>Freigaben</h2>
+      {error && <p style={{ color: "crimson" }}>{error}</p>}
+      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
+        <input
+          value={approver}
+          onChange={(e) => setApprover(e.target.value)}
+          placeholder="Name (Bearbeiter)"
+        />
+        <input
+          value={note}
+          onChange={(e) => setNote(e.target.value)}
+          placeholder="Notiz"
+          style={{ flex: 1 }}
+        />
+        <button onClick={() => void load()}>Aktualisieren</button>
+      </div>
+      <h3>Offen ({open.length})</h3>
+      {open.length === 0 && <p>Keine offenen Freigaben.</p>}
+      <ul>
+        {open.map((t) => (
+          <li key={t.id} style={{ marginBottom: 8 }}>
+            <strong>{t.title || t.id}</strong> · {t.tenant_id}
+            <br />
+            <code>{JSON.stringify(t.payload)}</code>
+            <br />
+            <button
+              onClick={() => void decide(t.id, "approve")}
+              disabled={busyId === t.id}
+            >
+              Freigeben
+            </button>{" "}
+            <button
+              onClick={() => void decide(t.id, "reject")}
+              disabled={busyId === t.id}
+            >
+              Ablehnen
+            </button>
+          </li>
+        ))}
+      </ul>
+      <h3>Entschieden ({done.length})</h3>
+      <ul>
+        {done.map((t) => (
+          <li key={t.id}>
+            <strong>{t.status}</strong> · {t.title || t.id} ·{" "}
+            {t.approver ?? "–"}
+            {t.decision_note ? ` · „${t.decision_note}“` : ""}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/components/FlowsTab.tsx

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from "react";
+import { ApiError, api, type FlowDefinition, type Run } from "../api";
+
+const inputStyle: React.CSSProperties = {
+  width: "100%",
+  fontFamily: "monospace",
+  fontSize: 13,
+};
+
+export default function FlowsTab() {
+  const [flows, setFlows] = useState<FlowDefinition[]>([]);
+  const [flowId, setFlowId] = useState("");
+  const [inputJson, setInputJson] = useState(
+    '{\n  "betrag": 120000,\n  "schwelle": 200000\n}',
+  );
+  const [tenant, setTenant] = useState("default");
+  const [runs, setRuns] = useState<Run[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const loadFlows = useCallback(async () => {
+    try {
+      const list = await api.listFlows();
+      setFlows(list);
+      const first = list[0];
+      if (first && !flowId) setFlowId(first.id);
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    }
+  }, [flowId]);
+
+  const loadRuns = useCallback(async (id: string) => {
+    if (!id) return;
+    try {
+      setRuns(await api.listRuns(id));
+    } catch (e) {
+      setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadFlows();
+  }, [loadFlows]);
+
+  useEffect(() => {
+    void loadRuns(flowId);
+  }, [flowId, loadRuns]);
+
+  async function onRun() {
+    setBusy(true);
+    setError("");
+    try {
+      const payload: unknown = JSON.parse(inputJson);
+      const run = await api.runFlow(flowId, payload, tenant);
+      setRuns((prev) => [run, ...prev]);
+    } catch (e) {
+      if (e instanceof SyntaxError) setError("Ungültiges JSON in der Eingabe.");
+      else setError(e instanceof ApiError ? `${e.status}: ${e.message}` : String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div>
+      <h2>Vorgang starten</h2>
+      {error && <p style={{ color: "crimson" }}>{error}</p>}
+      <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
+        <select value={flowId} onChange={(e) => setFlowId(e.target.value)}>
+          <option value="">— Flow wählen —</option>
+          {flows.map((f) => (
+            <option key={f.id} value={f.id}>
+              {f.name}
+            </option>
+          ))}
+        </select>
+        <input
+          value={tenant}
+          onChange={(e) => setTenant(e.target.value)}
+          placeholder="Mandant"
+          style={{ width: 160 }}
+        />
+        <button onClick={() => void onRun()} disabled={!flowId || busy}>
+          {busy ? "Läuft …" : "Starten"}
+        </button>
+      </div>
+      <textarea
+        rows={6}
+        style={inputStyle}
+        value={inputJson}
+        onChange={(e) => setInputJson(e.target.value)}
+      />
+      <h3>Letzte Läufe</h3>
+      {runs.length === 0 && <p>Noch keine Läufe.</p>}
+      <ul>
+        {runs.map((r) => (
+          <li key={r.id}>
+            <strong>{r.status}</strong> · {r.tenant_id} ·{" "}
+            <code>{r.output?.result ?? r.output?.error ?? "–"}</code>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />