Merge branch 'int' into feat/service-subscription

src/App.tsx

@@ -154,10 +154,14 @@ function App() {
                                 <Route path="templates" element={<FeatureViewPage view="templates" />} />
                                 <Route path="logs" element={<FeatureViewPage view="logs" />} />
                                 
-                                {/* Workspace Editor */}
+                                {/* Workspace + Automation2 Editor */}
                                 <Route path="editor" element={<FeatureViewPage view="editor" />} />
                                 <Route path="rag-insights" element={<FeatureViewPage view="rag-insights" />} />
                                 
+                                {/* Automation2 Workflows & Tasks */}
+                                <Route path="workflows" element={<FeatureViewPage view="workflows" />} />
+                                <Route path="workflows-tasks" element={<FeatureViewPage view="workflows-tasks" />} />
+                                
                                 {/* Teams Bot Feature Views */}
                                 <Route path="sessions" element={<FeatureViewPage view="sessions" />} />
                                 <Route path="settings" element={<FeatureViewPage view="settings" />} />

src/api/automation2Api.ts

@@ -0,0 +1,356 @@
+/**
+ * Automation2 API
+ * Node types and graph execution for n8n-style flows.
+ */
+
+import type { ApiRequestOptions } from '../hooks/useApi';
+
+const LOG = '[Automation2]';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface NodeTypeParameter {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  default?: unknown;
+}
+
+export interface NodeType {
+  id: string;
+  category: string;
+  label: string;
+  description: string;
+  parameters: NodeTypeParameter[];
+  inputs: number;
+  outputs: number;
+  executor: string;
+  meta?: {
+    icon?: string;
+    color?: string;
+    method?: string;
+    action?: string;
+  };
+}
+
+export interface NodeTypeCategory {
+  id: string;
+  label: Record<string, string> | string;
+}
+
+export interface NodeTypesResponse {
+  nodeTypes: NodeType[];
+  categories: NodeTypeCategory[];
+}
+
+export interface Automation2GraphNode {
+  id: string;
+  type: string;
+  parameters?: Record<string, unknown>;
+}
+
+export interface Automation2Connection {
+  source: string;
+  target: string;
+  sourceOutput?: number;
+  targetInput?: number;
+}
+
+export interface Automation2Graph {
+  nodes: Automation2GraphNode[];
+  connections: Automation2Connection[];
+}
+
+export interface ExecuteGraphResponse {
+  success: boolean;
+  nodeOutputs?: Record<string, unknown>;
+  error?: string;
+  stopped?: boolean;
+  failedNode?: string;
+  paused?: boolean;
+  taskId?: string;
+  runId?: string;
+  nodeId?: string;
+}
+
+export interface Automation2Workflow {
+  id: string;
+  label: string;
+  graph: Automation2Graph;
+  active?: boolean;
+  /** Enriched: run count */
+  runCount?: number;
+  /** Enriched: has active (running/paused) run */
+  isRunning?: boolean;
+  /** Enriched: status of active run */
+  runStatus?: string;
+  /** Enriched: nodeId where workflow is stuck (paused) */
+  stuckAtNodeId?: string;
+  /** Enriched: human-readable label for stuck node */
+  stuckAtNodeLabel?: string;
+  /** Enriched: created timestamp (seconds) */
+  createdAt?: number;
+  /** Enriched: last run started timestamp (seconds) */
+  lastStartedAt?: number;
+}
+
+// ============================================================================
+// API FUNCTIONS
+// ============================================================================
+
+export type ApiRequestFunction = (options: ApiRequestOptions<any>) => Promise<any>;
+
+/**
+ * Fetch node types for the flow builder (backend-driven).
+ * GET /api/automation2/{instanceId}/node-types?language=de
+ */
+export async function fetchNodeTypes(
+  request: ApiRequestFunction,
+  instanceId: string,
+  language = 'de'
+): Promise<NodeTypesResponse> {
+  console.log(`${LOG} fetchNodeTypes: instanceId=${instanceId} language=${language}`);
+  const data = await request({
+    url: `/api/automation2/${instanceId}/node-types`,
+    method: 'get',
+    params: { language },
+  });
+  const nodeTypes = data?.nodeTypes ?? [];
+  const categories = data?.categories ?? [];
+  console.log(`${LOG} fetchNodeTypes response: ${nodeTypes.length} nodeTypes, ${categories.length} categories`);
+  return { nodeTypes, categories };
+}
+
+/**
+ * Execute an automation2 graph.
+ * POST /api/automation2/{instanceId}/execute
+ */
+export async function executeGraph(
+  request: ApiRequestFunction,
+  instanceId: string,
+  graph: Automation2Graph,
+  workflowId?: string
+): Promise<ExecuteGraphResponse> {
+  console.log(
+    `${LOG} executeGraph request: instanceId=${instanceId} workflowId=${workflowId} nodes=${graph.nodes.length} connections=${graph.connections.length}`,
+    { nodes: graph.nodes, connections: graph.connections }
+  );
+  const start = performance.now();
+  try {
+    const result = await request({
+      url: `/api/automation2/${instanceId}/execute`,
+      method: 'post',
+      data: { graph, workflowId },
+    });
+    const ms = Math.round(performance.now() - start);
+    console.log(
+      `${LOG} executeGraph response (${ms}ms): success=${result?.success} error=${result?.error ?? 'none'} nodeOutputs_keys=${Object.keys(result?.nodeOutputs ?? {}).join(',')} failedNode=${result?.failedNode ?? '-'}`,
+      result
+    );
+    return result;
+  } catch (err) {
+    const ms = Math.round(performance.now() - start);
+    console.error(
+      `${LOG} executeGraph FAILED (${ms}ms): instanceId=${instanceId}`,
+      err
+    );
+    throw err;
+  }
+}
+
+// -------------------------------------------------------------------------
+// Workflows CRUD
+// -------------------------------------------------------------------------
+
+export async function fetchWorkflows(
+  request: ApiRequestFunction,
+  instanceId: string
+): Promise<Automation2Workflow[]> {
+  const data = await request({
+    url: `/api/automation2/${instanceId}/workflows`,
+    method: 'get',
+  });
+  return data?.workflows ?? [];
+}
+
+export async function fetchWorkflow(
+  request: ApiRequestFunction,
+  instanceId: string,
+  workflowId: string
+): Promise<Automation2Workflow> {
+  return await request({
+    url: `/api/automation2/${instanceId}/workflows/${workflowId}`,
+    method: 'get',
+  });
+}
+
+export async function createWorkflow(
+  request: ApiRequestFunction,
+  instanceId: string,
+  body: { label: string; graph: Automation2Graph }
+): Promise<Automation2Workflow> {
+  return await request({
+    url: `/api/automation2/${instanceId}/workflows`,
+    method: 'post',
+    data: body,
+  });
+}
+
+export async function updateWorkflow(
+  request: ApiRequestFunction,
+  instanceId: string,
+  workflowId: string,
+  body: { label?: string; graph?: Automation2Graph }
+): Promise<Automation2Workflow> {
+  return await request({
+    url: `/api/automation2/${instanceId}/workflows/${workflowId}`,
+    method: 'put',
+    data: body,
+  });
+}
+
+export async function deleteWorkflow(
+  request: ApiRequestFunction,
+  instanceId: string,
+  workflowId: string
+): Promise<void> {
+  await request({
+    url: `/api/automation2/${instanceId}/workflows/${workflowId}`,
+    method: 'delete',
+  });
+}
+
+export interface Automation2Run {
+  id: string;
+  workflowId: string;
+  status: string;
+  nodeOutputs?: Record<string, unknown>;
+  currentNodeId?: string;
+}
+
+export async function fetchWorkflowRuns(
+  request: ApiRequestFunction,
+  instanceId: string,
+  workflowId: string
+): Promise<Automation2Run[]> {
+  const data = await request({
+    url: `/api/automation2/${instanceId}/workflows/${workflowId}/runs`,
+    method: 'get',
+  });
+  return data?.runs ?? [];
+}
+
+// -------------------------------------------------------------------------
+// Tasks
+// -------------------------------------------------------------------------
+
+export interface Automation2Task {
+  id: string;
+  runId: string;
+  workflowId: string;
+  nodeId: string;
+  nodeType: string;
+  config: Record<string, unknown>;
+  status: string;
+  result?: Record<string, unknown>;
+  /** Workflow label (enriched by API) */
+  workflowLabel?: string;
+  /** Unix timestamp ms (from _createdAt) */
+  createdAt?: number;
+  /** Optional due date - configurable in future */
+  dueAt?: number;
+}
+
+export async function fetchTasks(
+  request: ApiRequestFunction,
+  instanceId: string,
+  params?: { workflowId?: string; status?: string }
+): Promise<Automation2Task[]> {
+  const data = await request({
+    url: `/api/automation2/${instanceId}/tasks`,
+    method: 'get',
+    params,
+  });
+  return data?.tasks ?? [];
+}
+
+export async function completeTask(
+  request: ApiRequestFunction,
+  instanceId: string,
+  taskId: string,
+  result: Record<string, unknown>
+): Promise<ExecuteGraphResponse> {
+  return await request({
+    url: `/api/automation2/${instanceId}/tasks/${taskId}/complete`,
+    method: 'post',
+    data: { result },
+  });
+}
+
+// -------------------------------------------------------------------------
+// Connections and Browse (for Email/SharePoint node config)
+// -------------------------------------------------------------------------
+
+export interface UserConnection {
+  id: string;
+  authority: string;
+  externalUsername?: string;
+  externalEmail?: string;
+  status: string;
+}
+
+export async function fetchConnections(
+  request: ApiRequestFunction,
+  instanceId: string
+): Promise<UserConnection[]> {
+  const data = await request({
+    url: `/api/automation2/${instanceId}/connections`,
+    method: 'get',
+  });
+  return data?.connections ?? [];
+}
+
+export interface ConnectionService {
+  service: string;
+  label: string;
+  icon: string;
+}
+
+export async function fetchConnectionServices(
+  request: ApiRequestFunction,
+  instanceId: string,
+  connectionId: string
+): Promise<ConnectionService[]> {
+  const data = await request({
+    url: `/api/automation2/${instanceId}/connections/${connectionId}/services`,
+    method: 'get',
+  });
+  return data?.services ?? [];
+}
+
+export interface BrowseEntry {
+  name: string;
+  path: string;
+  isFolder: boolean;
+  size?: number;
+  mimeType?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export async function fetchBrowse(
+  request: ApiRequestFunction,
+  instanceId: string,
+  connectionId: string,
+  service: string,
+  path = '/'
+): Promise<{ items: BrowseEntry[]; path: string; service: string }> {
+  const data = await request({
+    url: `/api/automation2/${instanceId}/connections/${connectionId}/browse`,
+    method: 'get',
+    params: { service, path },
+  });
+  return { items: data?.items ?? [], path: data?.path ?? path, service: data?.service ?? service };
+}

src/components/Automation2FlowEditor/Automation2FlowEditor.module.css

@@ -0,0 +1,499 @@
+/**
+ * Automation2 Flow Editor Styles
+ * Sidebar with node list + canvas area.
+ */
+
+.container {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* =============================================================================
+   SIDEBAR - Node List
+   ============================================================================= */
+
+.sidebar {
+  flex-shrink: 0;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary, #f8f9fa);
+  border-right: 1px solid var(--border-color, #e0e0e0);
+  overflow: hidden;
+}
+
+.sidebarHeader {
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  background: var(--bg-primary, #fff);
+}
+
+.sidebarTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+
+.sidebarSearch {
+  margin-top: 0.75rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #333);
+}
+
+.sidebarSearch::placeholder {
+  color: var(--text-tertiary, #999);
+}
+
+.sidebarSearch:focus {
+  outline: none;
+  border-color: var(--primary-color, #007bff);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
+}
+
+.nodeList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+/* Category Groups */
+.categoryGroup {
+  margin-bottom: 1rem;
+}
+
+
+.categoryHeader {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary, #666);
+}
+
+.categoryIcon {
+  margin-right: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.categoryLabel {
+  flex: 1;
+}
+
+.categoryCount {
+  background: var(--bg-tertiary, #e9ecef);
+  color: var(--text-secondary, #666);
+  padding: 0.125rem 0.5rem;
+  border-radius: 10px;
+  font-size: 0.7rem;
+}
+
+/* Node Items */
+.nodeItem {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.25rem;
+  border-radius: 6px;
+  cursor: grab;
+  transition: background 0.15s;
+  border: 1px solid transparent;
+}
+
+.nodeItem:hover {
+  background: var(--bg-hover, #e9ecef);
+}
+
+.nodeItem:active {
+  cursor: grabbing;
+}
+
+.nodeItemIcon {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  margin-right: 0.75rem;
+  font-size: 0.875rem;
+}
+
+.nodeItemInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.nodeItemLabel {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #333);
+}
+
+.nodeItemDesc {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Loading / Error */
+.loading,
+.error {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary, #666);
+}
+
+.error {
+  color: var(--danger-color, #dc3545);
+}
+
+.retryButton {
+  margin-top: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--primary-color, #007bff);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.retryButton:hover {
+  background: var(--primary-hover, #0056b3);
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* =============================================================================
+   CANVAS
+   ============================================================================= */
+
+.canvas {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--canvas-bg, #fafafa);
+}
+
+.canvasHeader {
+  flex-shrink: 0;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+  background: var(--bg-primary, #fff);
+}
+
+.canvasTitle {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary, #666);
+}
+
+.canvasArea {
+  flex: 1;
+  padding: 2rem;
+  min-height: 400px;
+  overflow: hidden;
+}
+
+.canvasDropZone {
+  position: relative;
+  min-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  /* Infinite grid: on viewport, moves with pan/zoom via inline style */
+  background-image: radial-gradient(circle, var(--border-color, #e0e0e0) 1px, transparent 1px);
+  background-repeat: repeat;
+}
+
+.canvasContent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+  background: transparent;
+}
+
+.canvasGrab {
+  cursor: grab;
+}
+
+.canvasPanning {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.canvasPlaceholder {
+  position: absolute;
+  left: 2rem;
+  top: 2rem;
+  text-align: center;
+  color: var(--text-tertiary, #999);
+  border: 2px dashed var(--border-color, #dee2e6);
+  border-radius: 8px;
+  padding: 2rem 3rem;
+}
+
+.canvasPlaceholder p {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+}
+
+/* Canvas Nodes */
+.canvasNode {
+  position: absolute;
+  border-radius: 8px;
+  border: 2px solid;
+  cursor: grab;
+  overflow: visible;
+}
+
+.canvasNode:active {
+  cursor: grabbing;
+}
+
+.canvasNodeSelected {
+  box-shadow: 0 0 0 2px var(--primary-color, #007bff);
+}
+
+.canvasNodeContent {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.canvasNodeIcon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.canvasNodeText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.canvasNodeTitle {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #333);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+}
+
+.canvasNodeTitle:hover {
+  text-decoration: underline;
+}
+
+.canvasNodeComment {
+  font-size: 0.7rem;
+  color: var(--text-tertiary, #999);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+  min-height: 1em;
+}
+
+.canvasNodeComment:hover {
+  text-decoration: underline;
+}
+
+.canvasNodeInput {
+  width: 100%;
+  padding: 0.15rem 0.25rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--primary-color, #007bff);
+  border-radius: 4px;
+  outline: none;
+}
+
+/* Connection Handles */
+.handle {
+  position: absolute;
+  border-radius: 50%;
+  background: var(--bg-primary, #fff);
+  border: 2px solid var(--border-color, #666);
+  cursor: crosshair;
+  z-index: 2;
+}
+
+.handle:hover,
+.handleConnectable {
+  border-color: var(--primary-color, #007bff);
+  background: var(--primary-color, #007bff);
+}
+
+.handleInput {
+  cursor: copy;
+}
+
+/* Node Config Panel */
+.nodeConfigPanel {
+  padding: 1rem;
+  background: var(--bg-primary, #fff);
+  border-left: 1px solid var(--border-color, #e0e0e0);
+  width: 280px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  min-width: 0;
+}
+
+.nodeConfigPanel h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.9rem;
+}
+
+.nodeConfigPanel label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.nodeConfigPanel input[type='text'],
+.nodeConfigPanel input[type='number'],
+.nodeConfigPanel select,
+.nodeConfigPanel textarea {
+  width: 100%;
+  padding: 0.4rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+}
+
+.nodeConfigPanel textarea {
+  min-height: 60px;
+}
+
+.nodeConfigPanel button {
+  margin-top: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.8rem;
+  background: var(--primary-color, #007bff);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Form fields editor (input.form) */
+.formFieldsList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.formFieldRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.5rem;
+  background: var(--bg-secondary, #f8f9fa);
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #e0e0e0);
+}
+
+.formFieldRowHeader {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35rem;
+}
+
+.formFieldDragHandle {
+  flex-shrink: 0;
+  padding: 0.25rem;
+  cursor: grab;
+  color: var(--text-tertiary, #999);
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+}
+
+.formFieldDragHandle:active {
+  cursor: grabbing;
+}
+
+.formFieldDragHandle:hover {
+  color: var(--text-secondary, #666);
+}
+
+.formFieldInputs {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.formFieldRowFooter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.formFieldRequiredLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+  cursor: pointer;
+}
+
+.formFieldRemoveButton {
+  margin-left: auto;
+  padding: 0.25rem 0.4rem;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary, #999);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.formFieldRemoveButton:hover {
+  color: var(--danger-color, #dc3545);
+  background: rgba(220, 53, 69, 0.1);
+}

src/components/Automation2FlowEditor/Automation2FlowEditor.tsx

@@ -0,0 +1,328 @@
+/**
+ * Automation2FlowEditor
+ *
+ * n8n-style flow builder with backend-driven node list.
+ * Composes: NodeSidebar, FlowCanvas, NodeConfigPanel, CanvasHeader.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { FaSpinner } from 'react-icons/fa';
+import { useApiRequest } from '../../hooks/useApi';
+import {
+  fetchNodeTypes,
+  executeGraph,
+  fetchWorkflows,
+  fetchWorkflow,
+  createWorkflow,
+  updateWorkflow,
+  type NodeType,
+  type NodeTypeCategory,
+  type Automation2Graph,
+  type Automation2Workflow,
+  type ExecuteGraphResponse,
+} from '../../api/automation2Api';
+import { FlowCanvas, type CanvasNode, type CanvasConnection } from './FlowCanvas';
+import { NodeConfigPanel } from './NodeConfigPanel';
+import { NodeSidebar } from './NodeSidebar';
+import { CanvasHeader } from './CanvasHeader';
+import { getCategoryIcon } from './utils';
+import { fromApiGraph, toApiGraph } from './graphUtils';
+import styles from './Automation2FlowEditor.module.css';
+
+const LOG = '[Automation2]';
+
+interface Automation2FlowEditorProps {
+  instanceId: string;
+  language?: string;
+  /** When set, load this workflow on mount (e.g. from workflows list edit) */
+  initialWorkflowId?: string | null;
+}
+
+export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({
+  instanceId,
+  language = 'de',
+  initialWorkflowId,
+}) => {
+  const { request } = useApiRequest();
+  const [nodeTypes, setNodeTypes] = useState<NodeType[]>([]);
+  const [categories, setCategories] = useState<NodeTypeCategory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState('');
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+    new Set(['trigger', 'input', 'flow', 'data', 'ai', 'email', 'sharepoint'])
+  );
+  const [canvasNodes, setCanvasNodes] = useState<CanvasNode[]>([]);
+  const [canvasConnections, setCanvasConnections] = useState<CanvasConnection[]>([]);
+  const [executing, setExecuting] = useState(false);
+  const [executeResult, setExecuteResult] = useState<ExecuteGraphResponse | null>(null);
+  const [workflows, setWorkflows] = useState<Automation2Workflow[]>([]);
+  const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(null);
+  const [selectedNode, setSelectedNode] = useState<CanvasNode | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const handleFromApiGraph = useCallback(
+    (graph: Automation2Graph) => {
+      const { nodes, connections } = fromApiGraph(graph, nodeTypes);
+      setCanvasNodes(nodes);
+      setCanvasConnections(connections);
+    },
+    [nodeTypes]
+  );
+
+  const handleExecute = useCallback(async () => {
+    const graph = toApiGraph(canvasNodes, canvasConnections);
+    if (graph.nodes.length === 0) {
+      setExecuteResult({ success: false, error: 'Keine Nodes im Workflow.' });
+      return;
+    }
+    setExecuting(true);
+    setExecuteResult(null);
+    try {
+      const result = await executeGraph(
+        request,
+        instanceId,
+        graph,
+        currentWorkflowId ?? undefined
+      );
+      setExecuteResult(result);
+    } catch (err: unknown) {
+      setExecuteResult({ success: false, error: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setExecuting(false);
+    }
+  }, [request, instanceId, canvasNodes, canvasConnections, currentWorkflowId]);
+
+  const loadWorkflows = useCallback(async () => {
+    if (!instanceId) return;
+    try {
+      const items = await fetchWorkflows(request, instanceId);
+      setWorkflows(items);
+    } catch (e) {
+      console.error(`${LOG} loadWorkflows failed`, e);
+    }
+  }, [instanceId, request]);
+
+  const handleSave = useCallback(async () => {
+    const graph = toApiGraph(canvasNodes, canvasConnections);
+    if (graph.nodes.length === 0) {
+      setExecuteResult({ success: false, error: 'Keine Nodes zum Speichern.' });
+      return;
+    }
+    setSaving(true);
+    try {
+      if (currentWorkflowId) {
+        await updateWorkflow(request, instanceId, currentWorkflowId, { graph });
+        setExecuteResult({ success: true } as ExecuteGraphResponse);
+      } else {
+        const label = prompt('Workflow-Name:', 'Neuer Workflow') || 'Neuer Workflow';
+        const created = await createWorkflow(request, instanceId, { label, graph });
+        setCurrentWorkflowId(created.id);
+        setWorkflows((prev) => [...prev, created]);
+        setExecuteResult({ success: true } as ExecuteGraphResponse);
+      }
+    } catch (err: unknown) {
+      setExecuteResult({ success: false, error: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setSaving(false);
+    }
+  }, [request, instanceId, canvasNodes, canvasConnections, currentWorkflowId]);
+
+  const handleLoad = useCallback(
+    async (workflowId: string) => {
+      try {
+        const wf = await fetchWorkflow(request, instanceId, workflowId);
+        if (wf.graph) handleFromApiGraph(wf.graph);
+      } catch (err: unknown) {
+        setExecuteResult({
+          success: false,
+          error: err instanceof Error ? err.message : String(err),
+        });
+      }
+    },
+    [request, instanceId, handleFromApiGraph]
+  );
+
+  const handleWorkflowSelect = useCallback(
+    (workflowId: string | null) => {
+      setCurrentWorkflowId(workflowId);
+      if (workflowId) handleLoad(workflowId);
+      else {
+        setCanvasNodes([]);
+        setCanvasConnections([]);
+        setExecuteResult(null);
+      }
+    },
+    [handleLoad]
+  );
+
+  const handleNew = useCallback(() => {
+    setCanvasNodes([]);
+    setCanvasConnections([]);
+    setCurrentWorkflowId(null);
+    setExecuteResult(null);
+  }, []);
+
+  const handleNodeParametersChange = useCallback((nodeId: string, parameters: Record<string, unknown>) => {
+    setCanvasNodes((prev) => prev.map((n) => (n.id === nodeId ? { ...n, parameters } : n)));
+  }, []);
+
+  const loadNodeTypes = useCallback(async () => {
+    if (!instanceId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchNodeTypes(request, instanceId, language);
+      setNodeTypes(data.nodeTypes);
+      setCategories(data.categories);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
+      setNodeTypes([]);
+      setCategories([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId, language, request]);
+
+  useEffect(() => {
+    loadNodeTypes();
+  }, [loadNodeTypes]);
+
+  useEffect(() => {
+    loadWorkflows();
+  }, [loadWorkflows]);
+
+  useEffect(() => {
+    if (initialWorkflowId && workflows.length > 0 && !currentWorkflowId) {
+      handleWorkflowSelect(initialWorkflowId);
+    }
+  }, [initialWorkflowId, workflows, currentWorkflowId, handleWorkflowSelect]);
+
+  const toggleCategory = useCallback((id: string) => {
+    setExpandedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const handleDropNodeType = useCallback(
+    (nodeTypeId: string, x: number, y: number) => {
+      const nt = nodeTypes.find((n) => n.id === nodeTypeId);
+      if (!nt) return;
+      const id = `n_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+      const label =
+        typeof nt.label === 'string' ? nt.label : (nt.label as Record<string, string>)?.[language] ?? nt.id;
+      setCanvasNodes((prev) => [
+        ...prev,
+        {
+          id,
+          type: nodeTypeId,
+          x,
+          y,
+          label,
+          title: label,
+          color: nt.meta?.color,
+          inputs: nt.inputs ?? 1,
+          outputs: nt.outputs ?? 1,
+          parameters: {},
+        },
+      ]);
+    },
+    [nodeTypes, language]
+  );
+
+  const renderSidebar = () => {
+    if (loading) {
+      return (
+        <div className={styles.sidebar}>
+          <div className={styles.sidebarHeader}>
+            <h3 className={styles.sidebarTitle}>Nodes</h3>
+          </div>
+          <div className={styles.loading}>
+            <FaSpinner className={styles.spinner} style={{ marginBottom: '0.5rem' }} />
+            <p>Lade Node-Typen...</p>
+          </div>
+        </div>
+      );
+    }
+    if (error) {
+      return (
+        <div className={styles.sidebar}>
+          <div className={styles.sidebarHeader}>
+            <h3 className={styles.sidebarTitle}>Nodes</h3>
+          </div>
+          <div className={styles.error}>
+            <p>{error}</p>
+            <button className={styles.retryButton} onClick={loadNodeTypes}>
+              Erneut versuchen
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <NodeSidebar
+        nodeTypes={nodeTypes}
+        categories={categories}
+        filter={filter}
+        onFilterChange={setFilter}
+        language={language}
+        expandedCategories={expandedCategories}
+        onToggleCategory={toggleCategory}
+      />
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      {renderSidebar()}
+
+      <div className={styles.canvas}>
+        <CanvasHeader
+          workflows={workflows}
+          currentWorkflowId={currentWorkflowId}
+          onWorkflowSelect={handleWorkflowSelect}
+          onNew={handleNew}
+          onSave={handleSave}
+          onExecute={handleExecute}
+          saving={saving}
+          executing={executing}
+          hasNodes={canvasNodes.length > 0}
+          executeResult={executeResult}
+        />
+        <div className={styles.canvasArea} style={{ display: 'flex', flex: 1, minWidth: 0 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <FlowCanvas
+              nodes={canvasNodes}
+              connections={canvasConnections}
+              nodeTypes={nodeTypes}
+              onNodesChange={setCanvasNodes}
+              onConnectionsChange={setCanvasConnections}
+              onDropNodeType={handleDropNodeType}
+              getLabel={(node) => node.title ?? node.label ?? node.type}
+              getCategoryIcon={getCategoryIcon}
+              onSelectionChange={setSelectedNode}
+            />
+          </div>
+          {selectedNode &&
+            ['input.', 'ai.', 'email.', 'sharepoint.'].some((p) =>
+              selectedNode.type.startsWith(p)
+            ) && (
+            <NodeConfigPanel
+              node={selectedNode}
+              nodeType={nodeTypes.find((nt) => nt.id === selectedNode.type)}
+              language={language}
+              onParametersChange={handleNodeParametersChange}
+              instanceId={instanceId}
+              request={request}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Automation2FlowEditor;

src/components/Automation2FlowEditor/CanvasHeader.tsx

@@ -0,0 +1,117 @@
+/**
+ * CanvasHeader - Workflow controls (Neu, Speichern, laden, Ausführen) and execute result.
+ */
+
+import React from 'react';
+import { FaPlay, FaSpinner } from 'react-icons/fa';
+import type { Automation2Workflow, ExecuteGraphResponse } from '../../api/automation2Api';
+import styles from './Automation2FlowEditor.module.css';
+
+interface CanvasHeaderProps {
+  workflows: Automation2Workflow[];
+  currentWorkflowId: string | null;
+  onWorkflowSelect: (workflowId: string | null) => void;
+  onNew: () => void;
+  onSave: () => void;
+  onExecute: () => void;
+  saving: boolean;
+  executing: boolean;
+  hasNodes: boolean;
+  executeResult: ExecuteGraphResponse | null;
+}
+
+export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
+  workflows,
+  currentWorkflowId,
+  onWorkflowSelect,
+  onNew,
+  onSave,
+  onExecute,
+  saving,
+  executing,
+  hasNodes,
+  executeResult,
+}) => (
+  <div className={styles.canvasHeader}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+      <h4 className={styles.canvasTitle} style={{ margin: 0 }}>
+        Workflow-Editor
+      </h4>
+      <button type="button" className={styles.retryButton} onClick={onNew}>
+        Neu
+      </button>
+      <button
+        type="button"
+        className={styles.retryButton}
+        onClick={onSave}
+        disabled={saving || !hasNodes}
+      >
+        {saving ? <FaSpinner className={styles.spinner} /> : 'Speichern'}
+      </button>
+      <select
+        value={currentWorkflowId ?? ''}
+        onChange={(e) => {
+          const id = e.target.value ? e.target.value : null;
+          onWorkflowSelect(id);
+        }}
+        style={{ padding: '0.4rem', minWidth: 180 }}
+      >
+        <option value="">— Workflow laden —</option>
+        {workflows.map((w) => (
+          <option key={w.id} value={w.id}>
+            {w.label}
+          </option>
+        ))}
+      </select>
+      <button
+        type="button"
+        className={styles.retryButton}
+        onClick={onExecute}
+        disabled={executing || !hasNodes}
+      >
+        {executing ? (
+          <>
+            <FaSpinner className={styles.spinner} style={{ marginRight: '0.5rem', display: 'inline-block' }} />
+            Ausführen…
+          </>
+        ) : (
+          <>
+            <FaPlay style={{ marginRight: '0.5rem' }} />
+            Ausführen
+          </>
+        )}
+      </button>
+    </div>
+    {executeResult && (
+      <div
+        style={{
+          marginTop: '0.5rem',
+          padding: '0.5rem',
+          borderRadius: 6,
+          fontSize: '0.875rem',
+          background: executeResult.success
+            ? 'rgba(40,167,69,0.15)'
+            : (executeResult as { paused?: boolean }).paused
+              ? 'rgba(0,123,255,0.15)'
+              : 'rgba(220,53,69,0.15)',
+          color: executeResult.success
+            ? 'var(--success-color,#28a745)'
+            : (executeResult as { paused?: boolean }).paused
+              ? 'var(--primary-color,#007bff)'
+              : 'var(--danger-color,#dc3545)',
+        }}
+      >
+        {executeResult.success ? (
+          <>✓ Ausführung abgeschlossen.</>
+        ) : (executeResult as { paused?: boolean }).paused ? (
+          <>
+            ⏸ Workflow pausiert. Öffne <strong>Workflows & Tasks</strong> in der Sidebar, um den
+            Task zu bearbeiten.
+          </>
+        ) : (
+          <>✗ {executeResult.error ?? 'Unbekannter Fehler'}</>
+        )}
+      </div>
+    )}
+  </div>
+);

src/components/Automation2FlowEditor/FlowCanvas.tsx

@@ -0,0 +1,579 @@
+/**
+ * FlowCanvas - Workflow graph canvas with nodes and connection lines.
+ * Nodes have 4 connection handles (one per side), drag nodes to add, connect with arrows.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { NodeType } from '../../api/automation2Api';
+import styles from './Automation2FlowEditor.module.css';
+
+export interface CanvasNode {
+  id: string;
+  type: string;
+  x: number;
+  y: number;
+  label?: string;
+  title?: string;
+  comment?: string;
+  color?: string;
+  inputs: number;
+  outputs: number;
+  parameters?: Record<string, unknown>;
+}
+
+export interface CanvasConnection {
+  id: string;
+  sourceId: string;
+  sourceHandle: number;
+  targetId: string;
+  targetHandle: number;
+}
+
+const NODE_WIDTH = 200;
+const NODE_HEIGHT = 72;
+const HANDLE_SIZE = 12;
+const HANDLE_OFFSET = HANDLE_SIZE / 2;
+
+interface FlowCanvasProps {
+  nodes: CanvasNode[];
+  connections: CanvasConnection[];
+  nodeTypes: NodeType[];
+  onNodesChange: (nodes: CanvasNode[]) => void;
+  onConnectionsChange: (connections: CanvasConnection[]) => void;
+  onDropNodeType: (nodeTypeId: string, x: number, y: number) => void;
+  getLabel: (node: CanvasNode) => string;
+  getCategoryIcon: (category: string) => React.ReactNode;
+  onSelectionChange?: (node: CanvasNode | null) => void;
+}
+
+export const FlowCanvas: React.FC<FlowCanvasProps> = ({
+  nodes,
+  connections,
+  nodeTypes,
+  onNodesChange,
+  onConnectionsChange,
+  onDropNodeType,
+  getLabel,
+  getCategoryIcon,
+  onSelectionChange,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
+  const [editingField, setEditingField] = useState<'title' | 'comment' | null>(null);
+  const [connectingFrom, setConnectingFrom] = useState<{
+    nodeId: string;
+    handleIndex: number;
+    x: number;
+    y: number;
+  } | null>(null);
+  const [dragPos, setDragPos] = useState<{ x: number; y: number } | null>(null);
+  const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState({
+    startClientX: 0,
+    startClientY: 0,
+    startNodeX: 0,
+    startNodeY: 0,
+  });
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [panning, setPanning] = useState<{
+    startX: number;
+    startY: number;
+    startPanX: number;
+    startPanY: number;
+  } | null>(null);
+
+  const nodeTypeMap = useMemo(() => {
+    const m: Record<string, NodeType> = {};
+    nodeTypes.forEach((nt) => {
+      m[nt.id] = nt;
+    });
+    return m;
+  }, [nodeTypes]);
+
+  useEffect(() => {
+    if (onSelectionChange) {
+      const node = selectedNodeId ? nodes.find((n) => n.id === selectedNodeId) ?? null : null;
+      onSelectionChange(node);
+    }
+  }, [selectedNodeId, nodes, onSelectionChange]);
+
+  const getHandlePosition = useCallback(
+    (node: CanvasNode, handleIndex: number): { x: number; y: number; side: string } => {
+      const isOutput = handleIndex >= node.inputs;
+      const ioIndex = isOutput ? handleIndex - node.inputs : handleIndex;
+      const ioCount = isOutput ? node.outputs : node.inputs;
+
+      const w = NODE_WIDTH;
+      const h = NODE_HEIGHT;
+      const centerY = node.y + h / 2;
+
+      if (isOutput) {
+        if (ioCount === 1) return { x: node.x + w, y: centerY, side: 'right' };
+        if (ioCount === 2) {
+          return ioIndex === 0
+            ? { x: node.x + w, y: node.y + h / 3, side: 'right' }
+            : { x: node.x + w, y: node.y + (2 * h) / 3, side: 'right' };
+        }
+        const step = h / (ioCount + 1);
+        return { x: node.x + w, y: node.y + step * (ioIndex + 1), side: 'right' };
+      } else {
+        if (ioCount === 1) return { x: node.x, y: centerY, side: 'left' };
+        if (ioCount === 2) {
+          return ioIndex === 0
+            ? { x: node.x, y: node.y + h / 3, side: 'left' }
+            : { x: node.x, y: node.y + (2 * h) / 3, side: 'left' };
+        }
+        const step = h / (ioCount + 1);
+        return { x: node.x, y: node.y + step * (ioIndex + 1), side: 'left' };
+      }
+    },
+    []
+  );
+
+  const getUsedTargetHandles = useMemo(() => {
+    const used = new Set<string>();
+    connections.forEach((c) => used.add(`${c.targetId}-${c.targetHandle}`));
+    return used;
+  }, [connections]);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      const raw = e.dataTransfer.getData('application/json');
+      if (!raw || !containerRef.current) return;
+      try {
+        const { type } = JSON.parse(raw);
+        const el = containerRef.current;
+        const rect = el.getBoundingClientRect();
+        const x = (e.clientX - rect.left - panOffset.x) / zoom - NODE_WIDTH / 2;
+        const y = (e.clientY - rect.top - panOffset.y) / zoom - NODE_HEIGHT / 2;
+        onDropNodeType(type, Math.max(0, x), Math.max(0, y));
+      } catch (_) {}
+    },
+    [onDropNodeType, panOffset, zoom]
+  );
+
+  const handleHandleMouseDown = useCallback(
+    (e: React.MouseEvent, nodeId: string, handleIndex: number, isOutput: boolean) => {
+      e.stopPropagation();
+      if (!isOutput) return;
+      const node = nodes.find((n) => n.id === nodeId);
+      if (!node) return;
+      const pos = getHandlePosition(node, handleIndex);
+      setConnectingFrom({ nodeId, handleIndex, x: pos.x, y: pos.y });
+      setDragPos({ x: e.clientX, y: e.clientY });
+    },
+    [nodes, getHandlePosition]
+  );
+
+  const handleHandleMouseUp = useCallback(
+    (e: React.MouseEvent, targetNodeId: string, targetHandleIndex: number) => {
+      e.stopPropagation();
+      if (!connectingFrom || connectingFrom.nodeId === targetNodeId) {
+        setConnectingFrom(null);
+        setDragPos(null);
+        return;
+      }
+      const key = `${targetNodeId}-${targetHandleIndex}`;
+      if (getUsedTargetHandles.has(key)) {
+        setConnectingFrom(null);
+        setDragPos(null);
+        return;
+      }
+      const targetNode = nodes.find((n) => n.id === targetNodeId);
+      if (!targetNode) return;
+      if (targetHandleIndex >= targetNode.inputs) return;
+      const newConn: CanvasConnection = {
+        id: `c_${Date.now()}`,
+        sourceId: connectingFrom.nodeId,
+        sourceHandle: connectingFrom.handleIndex,
+        targetId: targetNodeId,
+        targetHandle: targetHandleIndex,
+      };
+      onConnectionsChange([...connections, newConn]);
+      setConnectingFrom(null);
+      setDragPos(null);
+    },
+    [connectingFrom, connections, nodes, getUsedTargetHandles, onConnectionsChange]
+  );
+
+  React.useEffect(() => {
+    if (!connectingFrom || !dragPos) return;
+    const onMove = (e: MouseEvent) => setDragPos({ x: e.clientX, y: e.clientY });
+    const onUp = () => {
+      setConnectingFrom(null);
+      setDragPos(null);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [connectingFrom, dragPos]);
+
+  const handleNodeMouseDown = useCallback((e: React.MouseEvent, nodeId: string) => {
+    const node = nodes.find((n) => n.id === nodeId);
+    if (!node) return;
+    setDraggingNodeId(nodeId);
+    setDragOffset({
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startNodeX: node.x,
+      startNodeY: node.y,
+    });
+  }, [nodes]);
+
+  React.useEffect(() => {
+    if (!draggingNodeId) return;
+    const onMove = (e: MouseEvent) => {
+      const dx = (e.clientX - dragOffset.startClientX) / zoom;
+      const dy = (e.clientY - dragOffset.startClientY) / zoom;
+      onNodesChange(
+        nodes.map((n) =>
+          n.id === draggingNodeId
+            ? { ...n, x: dragOffset.startNodeX + dx, y: dragOffset.startNodeY + dy }
+            : n
+        )
+      );
+    };
+    const onUp = () => setDraggingNodeId(null);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [draggingNodeId, dragOffset, nodes, onNodesChange, zoom]);
+
+  const handleCanvasMouseDown = useCallback((e: React.MouseEvent) => {
+    const hitNode = (e.target as HTMLElement).closest(`.${styles.canvasNode}`);
+    if (hitNode || connectingFrom) return;
+    setPanning({
+      startX: e.clientX,
+      startY: e.clientY,
+      startPanX: panOffset.x,
+      startPanY: panOffset.y,
+    });
+  }, [connectingFrom, panOffset]);
+
+  const handleWheel = useCallback((e: WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setZoom((z) => Math.min(2, Math.max(0.25, z + delta)));
+  }, []);
+
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [handleWheel]);
+
+  React.useEffect(() => {
+    if (!panning) return;
+    const onMove = (e: MouseEvent) => {
+      setPanOffset({
+        x: panning.startPanX + (e.clientX - panning.startX),
+        y: panning.startPanY + (e.clientY - panning.startY),
+      });
+    };
+    const onUp = () => setPanning(null);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [panning]);
+
+  const [containerBounds, setContainerBounds] = useState({ left: 0, top: 0 });
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      const r = el.getBoundingClientRect();
+      setContainerBounds({ left: r.left, top: r.top });
+    };
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  const CANVAS_SIZE = 8000;
+  const svgBounds = useMemo(() => {
+    if (nodes.length === 0) return { width: CANVAS_SIZE, height: CANVAS_SIZE };
+    let maxX = 0, maxY = 0;
+    nodes.forEach((n) => {
+      maxX = Math.max(maxX, n.x + NODE_WIDTH + 200);
+      maxY = Math.max(maxY, n.y + NODE_HEIGHT + 200);
+    });
+    return { width: Math.max(maxX, CANVAS_SIZE), height: Math.max(maxY, CANVAS_SIZE) };
+  }, [nodes]);
+
+  const screenToSvg = useCallback(
+    (clientX: number, clientY: number) => ({
+      x: (clientX - containerBounds.left - panOffset.x) / zoom,
+      y: (clientY - containerBounds.top - panOffset.y) / zoom,
+    }),
+    [containerBounds, panOffset, zoom]
+  );
+
+  const handleDeleteNode = useCallback(() => {
+    if (!selectedNodeId) return;
+    onNodesChange(nodes.filter((n) => n.id !== selectedNodeId));
+    onConnectionsChange(
+      connections.filter((c) => c.sourceId !== selectedNodeId && c.targetId !== selectedNodeId)
+    );
+    setSelectedNodeId(null);
+    setEditingNodeId(null);
+    setEditingField(null);
+  }, [selectedNodeId, nodes, connections, onNodesChange, onConnectionsChange]);
+
+  React.useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNodeId) {
+        const target = e.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
+        e.preventDefault();
+        handleDeleteNode();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [handleDeleteNode, selectedNodeId]);
+
+  const handleNodeUpdate = useCallback(
+    (nodeId: string, updates: Partial<Pick<CanvasNode, 'title' | 'comment'>>) => {
+      onNodesChange(
+        nodes.map((n) => (n.id === nodeId ? { ...n, ...updates } : n))
+      );
+    },
+    [nodes, onNodesChange]
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${styles.canvasDropZone} ${panning ? styles.canvasPanning : styles.canvasGrab}`}
+      style={{
+        backgroundSize: `${20 * zoom}px ${20 * zoom}px`,
+        backgroundPosition: `${-panOffset.x}px ${-panOffset.y}px`,
+      }}
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={handleDrop}
+      onMouseDown={handleCanvasMouseDown}
+      tabIndex={0}
+      onClick={() => setSelectedNodeId(null)}
+    >
+      <div
+        className={styles.canvasContent}
+        style={{
+          width: svgBounds.width,
+          height: svgBounds.height,
+          transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom})`,
+          transformOrigin: '0 0',
+        }}
+      >
+      <svg
+        className={styles.connectionsLayer}
+        width={svgBounds.width}
+        height={svgBounds.height}
+        style={{ position: 'absolute', left: 0, top: 0, pointerEvents: 'none' }}
+      >
+        <defs>
+          <marker
+            id="arrowhead"
+            markerWidth="10"
+            markerHeight="7"
+            refX="9"
+            refY="3.5"
+            orient="auto"
+          >
+            <polygon points="0 0, 10 3.5, 0 7" fill="var(--text-secondary, #666)" />
+          </marker>
+        </defs>
+        {connections.map((c) => {
+          const srcNode = nodes.find((n) => n.id === c.sourceId);
+          const tgtNode = nodes.find((n) => n.id === c.targetId);
+          if (!srcNode || !tgtNode) return null;
+          const src = getHandlePosition(srcNode, c.sourceHandle);
+          const tgt = getHandlePosition(tgtNode, c.targetHandle);
+          const dx = tgt.x - src.x;
+          const path = `M ${src.x} ${src.y} C ${src.x + Math.abs(dx) / 2} ${src.y}, ${tgt.x - Math.abs(dx) / 2} ${tgt.y}, ${tgt.x} ${tgt.y}`;
+          return (
+            <path
+              key={c.id}
+              d={path}
+              fill="none"
+              stroke="var(--text-secondary, #666)"
+              strokeWidth="2"
+              markerEnd="url(#arrowhead)"
+            />
+          );
+        })}
+        {connectingFrom && dragPos && (() => {
+          const end = screenToSvg(dragPos.x, dragPos.y);
+          return (
+            <path
+              d={`M ${connectingFrom.x} ${connectingFrom.y} L ${end.x} ${end.y}`}
+              fill="none"
+              stroke="var(--primary-color, #007bff)"
+              strokeWidth="2"
+              strokeDasharray="4 4"
+            />
+          );
+        })()}
+      </svg>
+      {nodes.map((node) => {
+        const nt = nodeTypeMap[node.type];
+        const category = nt?.category ?? 'io';
+        const color = node.color ?? nt?.meta?.color ?? '#00BCD4';
+        const handles: Array<{ index: number; isOutput: boolean }> = [];
+        for (let i = 0; i < node.inputs; i++) handles.push({ index: i, isOutput: false });
+        for (let i = 0; i < node.outputs; i++) handles.push({ index: node.inputs + i, isOutput: true });
+
+        const isSelected = selectedNodeId === node.id;
+        const isEditingTitle = editingNodeId === node.id && editingField === 'title';
+        const isEditingComment = editingNodeId === node.id && editingField === 'comment';
+        const displayTitle = node.title ?? node.label ?? getLabel(node);
+        const displayComment = node.comment ?? '';
+
+        return (
+          <div
+            key={node.id}
+            className={`${styles.canvasNode} ${isSelected ? styles.canvasNodeSelected : ''}`}
+            style={{
+              left: node.x,
+              top: node.y,
+              width: NODE_WIDTH,
+              height: NODE_HEIGHT,
+              borderColor: color,
+              backgroundColor: `${color}15`,
+            }}
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              setSelectedNodeId(node.id);
+              handleNodeMouseDown(e, node.id);
+            }}
+          >
+            {handles.map(({ index, isOutput }) => {
+              const pos = getHandlePosition(node, index);
+              const used = !isOutput && getUsedTargetHandles.has(`${node.id}-${index}`);
+              const canConnect = isOutput || (!used && connectingFrom);
+              return (
+                <div
+                  key={index}
+                  className={`${styles.handle} ${isOutput ? styles.handleOutput : styles.handleInput} ${canConnect ? styles.handleConnectable : ''}`}
+                  style={{
+                    left: pos.side === 'left' ? -HANDLE_OFFSET : undefined,
+                    right: pos.side === 'right' ? -HANDLE_OFFSET : undefined,
+                    top: pos.y - node.y - HANDLE_OFFSET,
+                    width: HANDLE_SIZE,
+                    height: HANDLE_SIZE,
+                  }}
+                  onMouseDown={(e) => handleHandleMouseDown(e, node.id, index, isOutput)}
+                  onMouseUp={(e) => !isOutput && handleHandleMouseUp(e, node.id, index)}
+                />
+              );
+            })}
+            <div className={styles.canvasNodeContent}>
+              <div
+                className={styles.canvasNodeIcon}
+                style={{ backgroundColor: `${color}40`, color }}
+              >
+                {getCategoryIcon(category)}
+              </div>
+              <div className={styles.canvasNodeText}>
+                {isEditingTitle ? (
+                  <input
+                    type="text"
+                    className={styles.canvasNodeInput}
+                    value={node.title ?? displayTitle}
+                    autoFocus
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleNodeUpdate(node.id, { title: (e.target as HTMLInputElement).value });
+                        setEditingNodeId(null);
+                        setEditingField(null);
+                      }
+                      if (e.key === 'Escape') {
+                        setEditingNodeId(null);
+                        setEditingField(null);
+                      }
+                    }}
+                    onBlur={(e) => {
+                      handleNodeUpdate(node.id, { title: e.target.value });
+                      setEditingNodeId(null);
+                      setEditingField(null);
+                    }}
+                    onChange={(e) => handleNodeUpdate(node.id, { title: e.target.value })}
+                  />
+                ) : (
+                  <span
+                    className={styles.canvasNodeTitle}
+                    onDoubleClick={(e) => {
+                      e.stopPropagation();
+                      setEditingNodeId(node.id);
+                      setEditingField('title');
+                    }}
+                  >
+                    {displayTitle}
+                  </span>
+                )}
+                {isEditingComment ? (
+                  <input
+                    type="text"
+                    className={styles.canvasNodeInput}
+                    placeholder="Kommentar..."
+                    value={node.comment ?? ''}
+                    autoFocus
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleNodeUpdate(node.id, { comment: (e.target as HTMLInputElement).value });
+                        setEditingNodeId(null);
+                        setEditingField(null);
+                      }
+                      if (e.key === 'Escape') {
+                        setEditingNodeId(null);
+                        setEditingField(null);
+                      }
+                    }}
+                    onBlur={(e) => {
+                      handleNodeUpdate(node.id, { comment: e.target.value });
+                      setEditingNodeId(null);
+                      setEditingField(null);
+                    }}
+                    onChange={(e) => handleNodeUpdate(node.id, { comment: e.target.value })}
+                  />
+                ) : (
+                  <span
+                    className={styles.canvasNodeComment}
+                    onDoubleClick={(e) => {
+                      e.stopPropagation();
+                      setEditingNodeId(node.id);
+                      setEditingField('comment');
+                    }}
+                  >
+                    {displayComment || 'Doppelklick für Kommentar'}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+      {nodes.length === 0 && (
+        <div className={styles.canvasPlaceholder}>
+          <p>Nodes aus der Liste links hierher ziehen.</p>
+        </div>
+      )}
+      </div>
+    </div>
+  );
+};

src/components/Automation2FlowEditor/NodeConfigPanel.tsx

@@ -0,0 +1,70 @@
+/**
+ * NodeConfigPanel - Configures parameters for input, ai, email, sharepoint nodes.
+ * Delegates to config components from configs/.
+ */
+
+import React, { useState, useEffect } from 'react';
+import type { CanvasNode } from './FlowCanvas';
+import type { NodeType } from '../../api/automation2Api';
+import type { ApiRequestFunction } from '../../api/automation2Api';
+import { getLabel } from './utils';
+import { NODE_CONFIG_REGISTRY } from './configs';
+import styles from './Automation2FlowEditor.module.css';
+
+interface NodeConfigPanelProps {
+  node: CanvasNode | null;
+  nodeType: NodeType | undefined;
+  language: string;
+  onParametersChange: (nodeId: string, parameters: Record<string, unknown>) => void;
+  instanceId?: string;
+  request?: ApiRequestFunction;
+}
+
+const CONFIGURABLE_PREFIXES = ['input.', 'ai.', 'email.', 'sharepoint.'];
+
+export const NodeConfigPanel: React.FC<NodeConfigPanelProps> = ({
+  node,
+  nodeType,
+  language,
+  onParametersChange,
+  instanceId,
+  request,
+}) => {
+  const [params, setParams] = useState<Record<string, unknown>>({});
+
+  useEffect(() => {
+    setParams(node?.parameters ?? {});
+  }, [node?.id, node?.parameters]);
+
+  const updateParam = (key: string, value: unknown) => {
+    const next = { ...params, [key]: value };
+    setParams(next);
+    if (node) onParametersChange(node.id, next);
+  };
+
+  const isConfigurable = node && CONFIGURABLE_PREFIXES.some((p) => node.type.startsWith(p));
+  if (!node || !isConfigurable) return null;
+
+  const ConfigRenderer = NODE_CONFIG_REGISTRY[node.type];
+  if (!ConfigRenderer) {
+    return (
+      <div className={styles.nodeConfigPanel}>
+        <h4>{getLabel(nodeType?.label, language) || node.type}</h4>
+        <p>No configuration for {node.type}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.nodeConfigPanel}>
+      <h4>{getLabel(nodeType?.label, language) || node.type}</h4>
+      <ConfigRenderer
+        params={params}
+        updateParam={updateParam}
+        instanceId={instanceId}
+        request={request}
+        nodeType={node.type}
+      />
+    </div>
+  );
+};

src/components/Automation2FlowEditor/NodeListItem.tsx

@@ -0,0 +1,49 @@
+/**
+ * NodeListItem - Draggable node type item for the sidebar.
+ * Used in both regular categories and I/O sub-groups.
+ */
+
+import React from 'react';
+import type { NodeType } from '../../api/automation2Api';
+import { getCategoryIcon } from './utils';
+import type { GetLabelFn } from './utils';
+import styles from './Automation2FlowEditor.module.css';
+
+interface NodeListItemProps {
+  node: NodeType;
+  language: string;
+  getLabel: GetLabelFn;
+  getCategoryIcon?: (categoryId: string) => React.ReactNode;
+}
+
+export const NodeListItem: React.FC<NodeListItemProps> = ({
+  node,
+  language,
+  getLabel,
+  getCategoryIcon: getIcon = getCategoryIcon,
+}) => (
+  <div
+    className={styles.nodeItem}
+    draggable
+    onDragStart={(e) => {
+      e.dataTransfer.setData('application/json', JSON.stringify({ type: node.id }));
+      e.dataTransfer.effectAllowed = 'copy';
+    }}
+  >
+    <div
+      className={styles.nodeItemIcon}
+      style={{
+        backgroundColor: node.meta?.color
+          ? `${node.meta.color}20`
+          : 'var(--bg-tertiary, #e9ecef)',
+        color: node.meta?.color ?? 'var(--text-secondary, #666)',
+      }}
+    >
+      {getIcon(node.category)}
+    </div>
+    <div className={styles.nodeItemInfo}>
+      <span className={styles.nodeItemLabel}>{getLabel(node.label, language)}</span>
+      <span className={styles.nodeItemDesc}>{getLabel(node.description, language)}</span>
+    </div>
+  </div>
+);

src/components/Automation2FlowEditor/NodeSidebar.tsx

@@ -0,0 +1,121 @@
+/**
+ * NodeSidebar - Sidebar with searchable, collapsible node list.
+ * Groups node types by category (trigger, input, flow, data, ai, email, sharepoint).
+ */
+
+import React, { useMemo } from 'react';
+import { FaChevronDown, FaChevronRight } from 'react-icons/fa';
+import type { NodeType, NodeTypeCategory } from '../../api/automation2Api';
+import { CATEGORY_ORDER, HIDDEN_NODE_IDS } from './constants';
+import { getLabel } from './utils';
+import { NodeListItem } from './NodeListItem';
+import styles from './Automation2FlowEditor.module.css';
+
+interface NodeSidebarProps {
+  nodeTypes: NodeType[];
+  categories: NodeTypeCategory[];
+  filter: string;
+  onFilterChange: (value: string) => void;
+  language: string;
+  expandedCategories: Set<string>;
+  onToggleCategory: (id: string) => void;
+}
+
+export const NodeSidebar: React.FC<NodeSidebarProps> = ({
+  nodeTypes,
+  categories,
+  filter,
+  onFilterChange,
+  language,
+  expandedCategories,
+  onToggleCategory,
+}) => {
+  const filteredNodeTypes = useMemo(() => {
+    const visible = nodeTypes.filter((n) => !HIDDEN_NODE_IDS.has(n.id));
+    if (!filter.trim()) return visible;
+    const q = filter.toLowerCase();
+    return visible.filter(
+      (n) =>
+        n.id.toLowerCase().includes(q) ||
+        getLabel(n.label, language).toLowerCase().includes(q) ||
+        getLabel(n.description, language).toLowerCase().includes(q)
+    );
+  }, [nodeTypes, filter, language]);
+
+  const groupedByCategory = useMemo(() => {
+    const map: Record<string, NodeType[]> = {};
+    filteredNodeTypes.forEach((n) => {
+      const cat = n.category || 'other';
+      if (!map[cat]) map[cat] = [];
+      map[cat].push(n);
+    });
+    return map;
+  }, [filteredNodeTypes]);
+
+  const orderedCategories = useMemo(() => {
+    const seen = new Set<string>();
+    const result: string[] = [];
+    CATEGORY_ORDER.forEach((id) => {
+      if (groupedByCategory[id]) {
+        result.push(id);
+        seen.add(id);
+      }
+    });
+    Object.keys(groupedByCategory).forEach((id) => {
+      if (!seen.has(id)) result.push(id);
+    });
+    return result;
+  }, [groupedByCategory]);
+
+  const getLabelFn = (t: string | Record<string, string> | undefined, lang?: string) =>
+    getLabel(t, lang ?? language);
+
+  return (
+    <div className={styles.sidebar}>
+      <div className={styles.sidebarHeader}>
+        <h3 className={styles.sidebarTitle}>Nodes</h3>
+        <input
+          type="text"
+          className={styles.sidebarSearch}
+          placeholder="Nodes durchsuchen..."
+          value={filter}
+          onChange={(e) => onFilterChange(e.target.value)}
+        />
+      </div>
+      <div className={styles.nodeList}>
+        {orderedCategories.map((catId) => {
+          const isExpanded = expandedCategories.has(catId);
+          const catLabel = categories.find((c) => c.id === catId);
+          const label = getLabel(catLabel?.label, language) || catId;
+          const items = groupedByCategory[catId] || [];
+          return (
+            <div key={catId} className={styles.categoryGroup}>
+              <button
+                type="button"
+                className={styles.categoryHeader}
+                onClick={() => onToggleCategory(catId)}
+              >
+                {isExpanded ? (
+                  <FaChevronDown className={styles.categoryIcon} />
+                ) : (
+                  <FaChevronRight className={styles.categoryIcon} />
+                )}
+                <span className={styles.categoryLabel}>{label}</span>
+                <span className={styles.categoryCount}>{items.length}</span>
+              </button>
+              {isExpanded &&
+                items.map((node) => (
+                  <NodeListItem
+                    key={node.id}
+                    node={node}
+                    language={language}
+                    getLabel={getLabelFn}
+                  />
+                ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

src/components/Automation2FlowEditor/categoryIcons.tsx

@@ -0,0 +1,19 @@
+/**
+ * Category icons for node types
+ */
+
+import React from 'react';
+import { FaPlay, FaCodeBranch, FaDatabase, FaPlug, FaUser, FaRobot, FaEnvelope, FaCloud } from 'react-icons/fa';
+
+export const CATEGORY_ICONS: Record<string, React.ReactNode> = {
+  trigger: <FaPlay />,
+  input: <FaUser />,
+  flow: <FaCodeBranch />,
+  data: <FaDatabase />,
+  ai: <FaRobot />,
+  email: <FaEnvelope />,
+  sharepoint: <FaCloud />,
+  human: <FaUser />,
+};
+
+export const DEFAULT_CATEGORY_ICON = <FaPlug />;

src/components/Automation2FlowEditor/configs/AiNodeConfig.tsx

@@ -0,0 +1,68 @@
+/**
+ * AI node config - prompt, query, document options per node type.
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+const AI_FIELD_CONFIG: Record<string, { label: string; key: string; type: 'textarea' | 'input' | 'select'; options?: string[] }[]> = {
+  'ai.prompt': [
+    { label: 'Prompt', key: 'prompt', type: 'textarea' },
+    { label: 'Output format', key: 'resultType', type: 'select', options: ['txt', 'json', 'md', 'html', 'csv'] },
+  ],
+  'ai.webResearch': [{ label: 'Query', key: 'query', type: 'textarea' }],
+  'ai.summarizeDocument': [
+    { label: 'Summary length', key: 'summaryLength', type: 'select', options: ['short', 'medium', 'long'] },
+  ],
+  'ai.translateDocument': [{ label: 'Target language', key: 'targetLanguage', type: 'input' }],
+  'ai.convertDocument': [
+    { label: 'Target format', key: 'targetFormat', type: 'select', options: ['pdf', 'docx', 'txt', 'md'] },
+  ],
+  'ai.generateDocument': [
+    { label: 'Prompt', key: 'prompt', type: 'textarea' },
+    { label: 'Format', key: 'format', type: 'select', options: ['docx', 'txt', 'md'] },
+  ],
+  'ai.generateCode': [
+    { label: 'Prompt', key: 'prompt', type: 'textarea' },
+    { label: 'Language', key: 'language', type: 'select', options: ['python', 'javascript', 'typescript', 'sql'] },
+  ],
+};
+
+export const AiNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam, nodeType = 'ai.prompt' }) => {
+  const fields = AI_FIELD_CONFIG[nodeType] ?? AI_FIELD_CONFIG['ai.prompt'];
+
+  return (
+    <>
+      {fields.map((f) => (
+        <div key={f.key}>
+          <label>{f.label}</label>
+          {f.type === 'textarea' ? (
+            <textarea
+              value={(params[f.key] as string) ?? ''}
+              onChange={(e) => updateParam(f.key, e.target.value)}
+              placeholder={f.label}
+              rows={4}
+            />
+          ) : f.type === 'select' ? (
+            <select
+              value={(params[f.key] as string) ?? (f.options?.[0] ?? '')}
+              onChange={(e) => updateParam(f.key, e.target.value)}
+            >
+              {(f.options ?? []).map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              value={(params[f.key] as string) ?? ''}
+              onChange={(e) => updateParam(f.key, e.target.value)}
+              placeholder={f.label}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+};

src/components/Automation2FlowEditor/configs/ApprovalNodeConfig.tsx

@@ -0,0 +1,27 @@
+/**
+ * Approval node config
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+export const ApprovalNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => (
+  <>
+    <div>
+      <label>Titel</label>
+      <input
+        value={(params.title as string) ?? ''}
+        onChange={(e) => updateParam('title', e.target.value)}
+        placeholder="Genehmigungstitel"
+      />
+    </div>
+    <div>
+      <label>Beschreibung</label>
+      <textarea
+        value={(params.description as string) ?? ''}
+        onChange={(e) => updateParam('description', e.target.value)}
+        placeholder="Was genehmigt werden soll"
+      />
+    </div>
+  </>
+);

src/components/Automation2FlowEditor/configs/CommentNodeConfig.tsx

@@ -0,0 +1,29 @@
+/**
+ * Comment node config
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+export const CommentNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => (
+  <>
+    <div>
+      <label>Platzhalter</label>
+      <input
+        value={(params.placeholder as string) ?? ''}
+        onChange={(e) => updateParam('placeholder', e.target.value)}
+        placeholder="Kommentar eingeben..."
+      />
+    </div>
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          checked={(params.required as boolean) ?? true}
+          onChange={(e) => updateParam('required', e.target.checked)}
+        />
+        Pflichtfeld
+      </label>
+    </div>
+  </>
+);

src/components/Automation2FlowEditor/configs/ConfirmationNodeConfig.tsx

@@ -0,0 +1,33 @@
+/**
+ * Confirmation node config
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+export const ConfirmationNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => (
+  <>
+    <div>
+      <label>Frage</label>
+      <input
+        value={(params.question as string) ?? ''}
+        onChange={(e) => updateParam('question', e.target.value)}
+        placeholder="Möchten Sie bestätigen?"
+      />
+    </div>
+    <div>
+      <label>Bestätigen-Button</label>
+      <input
+        value={(params.confirmLabel as string) ?? 'Confirm'}
+        onChange={(e) => updateParam('confirmLabel', e.target.value)}
+      />
+    </div>
+    <div>
+      <label>Ablehnen-Button</label>
+      <input
+        value={(params.rejectLabel as string) ?? 'Reject'}
+        onChange={(e) => updateParam('rejectLabel', e.target.value)}
+      />
+    </div>
+  </>
+);

src/components/Automation2FlowEditor/configs/EmailNodeConfig.tsx

@@ -0,0 +1,240 @@
+/**
+ * Email node config - connection selector, folder dropdown, query, subject, body.
+ */
+
+import React, { useEffect, useState } from 'react';
+import type { NodeConfigRendererProps } from './types';
+import { fetchConnections, fetchBrowse, type UserConnection, type BrowseEntry } from '../../../api/automation2Api';
+
+export const EmailNodeConfig: React.FC<NodeConfigRendererProps> = ({
+  params,
+  updateParam,
+  instanceId,
+  request,
+  nodeType = 'email.checkEmail',
+}) => {
+  const [connections, setConnections] = useState<UserConnection[]>([]);
+  const [folders, setFolders] = useState<BrowseEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [foldersLoading, setFoldersLoading] = useState(false);
+
+  useEffect(() => {
+    if (instanceId && request) {
+      setLoading(true);
+      fetchConnections(request, instanceId)
+        .then(setConnections)
+        .catch(() => setConnections([]))
+        .finally(() => setLoading(false));
+    }
+  }, [instanceId, request]);
+
+  const connectionId = (params.connectionId as string) ?? '';
+  const selectedConn = connections.find((c) => c.id === connectionId);
+  const mailService = selectedConn?.authority === 'google' ? 'gmail' : 'outlook';
+
+  useEffect(() => {
+    if (instanceId && request && connectionId) {
+      setFoldersLoading(true);
+      fetchBrowse(request, instanceId, connectionId, mailService, '/')
+        .then((r) => setFolders(r.items.filter((e) => e.isFolder)))
+        .catch(() => setFolders([]))
+        .finally(() => setFoldersLoading(false));
+    } else {
+      setFolders([]);
+    }
+  }, [instanceId, request, connectionId, mailService]);
+
+  const isDraft = nodeType === 'email.draftEmail';
+  const isSearch = nodeType === 'email.searchEmail';
+  const folderValue = (params.folder as string) ?? (isSearch ? 'All' : 'Inbox');
+
+  return (
+    <>
+      <div>
+        <label>Account</label>
+        <select
+          value={connectionId}
+          onChange={(e) => updateParam('connectionId', e.target.value)}
+          disabled={loading}
+        >
+          <option value="">{loading ? 'Loading...' : 'Select connection'}</option>
+          {connections.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.externalEmail ?? c.externalUsername ?? c.id}
+            </option>
+          ))}
+        </select>
+      </div>
+      {!isDraft && (
+        <div>
+          <label>Folder</label>
+          <select
+            value={folderValue}
+            onChange={(e) => updateParam('folder', e.target.value)}
+            disabled={foldersLoading || !connectionId}
+          >
+            <option value="">
+              {foldersLoading ? 'Loading folders...' : !connectionId ? 'Select account first' : 'Select folder'}
+            </option>
+            {isSearch && <option value="All">All</option>}
+            {folders.length > 0
+              ? folders.map((f) => {
+                  const folderId = (f.path ?? '').replace(/^\//, '') || (f.metadata as { id?: string })?.id || '';
+                  const value = folderId || f.name;
+                  if (!value) return null;
+                  return (
+                    <option key={value} value={value}>
+                      {f.name}
+                    </option>
+                  );
+                })
+              : !isSearch && (
+                  <>
+                    <option value="Inbox">Inbox</option>
+                    <option value="Drafts">Drafts</option>
+                    <option value="SentItems">Sent Items</option>
+                    <option value="DeletedItems">Deleted Items</option>
+                    <option value="JunkEmail">Junk Email</option>
+                  </>
+                )}
+            {folderValue &&
+              !folders.some(
+                (f) =>
+                  ((f.path ?? '').replace(/^\//, '') || (f.metadata as { id?: string })?.id) === folderValue
+              ) &&
+              folderValue !== 'All' && (
+                <option value={folderValue}>{folderValue}</option>
+              )}
+          </select>
+        </div>
+      )}
+      {isSearch && (
+        <>
+          <div>
+            <label>Search query (optional)</label>
+            <input
+              value={(params.query as string) ?? ''}
+              onChange={(e) => updateParam('query', e.target.value)}
+              placeholder="General search term (subject, body, from)"
+            />
+          </div>
+          <div>
+            <label>From address (optional)</label>
+            <input
+              value={(params.fromAddress as string) ?? ''}
+              onChange={(e) => updateParam('fromAddress', e.target.value)}
+              placeholder="e.g. sender@example.com"
+            />
+          </div>
+          <div>
+            <label>To address (optional)</label>
+            <input
+              value={(params.toAddress as string) ?? ''}
+              onChange={(e) => updateParam('toAddress', e.target.value)}
+              placeholder="e.g. recipient@example.com"
+            />
+          </div>
+          <div>
+            <label>Subject contains (optional)</label>
+            <input
+              value={(params.subjectContains as string) ?? ''}
+              onChange={(e) => updateParam('subjectContains', e.target.value)}
+              placeholder="Word or phrase in subject"
+            />
+          </div>
+          <div>
+            <label>Body/content contains (optional)</label>
+            <input
+              value={(params.bodyContains as string) ?? ''}
+              onChange={(e) => updateParam('bodyContains', e.target.value)}
+              placeholder="Word or phrase in email body"
+            />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <input
+              type="checkbox"
+              id="searchHasAttachment"
+              checked={!!(params.hasAttachment as boolean)}
+              onChange={(e) => updateParam('hasAttachment', e.target.checked)}
+            />
+            <label htmlFor="searchHasAttachment">Only emails with attachment</label>
+          </div>
+          <div>
+            <label>Limit</label>
+            <input
+              type="number"
+              value={(params.limit as number) ?? 100}
+              onChange={(e) => updateParam('limit', parseInt(e.target.value, 10) || 100)}
+            />
+          </div>
+        </>
+      )}
+      {nodeType === 'email.checkEmail' && (
+        <>
+          <div>
+            <label>From address (optional)</label>
+            <input
+              value={(params.fromAddress as string) ?? ''}
+              onChange={(e) => updateParam('fromAddress', e.target.value)}
+              placeholder="e.g. sender@example.com"
+            />
+          </div>
+          <div>
+            <label>Subject contains (optional)</label>
+            <input
+              value={(params.subjectContains as string) ?? ''}
+              onChange={(e) => updateParam('subjectContains', e.target.value)}
+              placeholder="Word or phrase in subject"
+            />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <input
+              type="checkbox"
+              id="hasAttachment"
+              checked={!!(params.hasAttachment as boolean)}
+              onChange={(e) => updateParam('hasAttachment', e.target.checked)}
+            />
+            <label htmlFor="hasAttachment">Only emails with attachment</label>
+          </div>
+          <div>
+            <label>Limit</label>
+            <input
+              type="number"
+              value={(params.limit as number) ?? 100}
+              onChange={(e) => updateParam('limit', parseInt(e.target.value, 10) || 100)}
+            />
+          </div>
+        </>
+      )}
+      {isDraft && (
+        <>
+          <div>
+            <label>Subject</label>
+            <input
+              value={(params.subject as string) ?? ''}
+              onChange={(e) => updateParam('subject', e.target.value)}
+              placeholder="Email subject (or leave empty if connected to AI node above)"
+            />
+          </div>
+          <div>
+            <label>Body</label>
+            <textarea
+              value={(params.body as string) ?? ''}
+              onChange={(e) => updateParam('body', e.target.value)}
+              placeholder="Email body (or leave empty if connected to AI node above)"
+              rows={4}
+            />
+          </div>
+          <div>
+            <label>To (optional)</label>
+            <input
+              value={(params.to as string) ?? ''}
+              onChange={(e) => updateParam('to', e.target.value)}
+              placeholder="Recipient(s) (or from AI when connected)"
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+};

src/components/Automation2FlowEditor/configs/FormNodeConfig.tsx

@@ -0,0 +1,126 @@
+/**
+ * Form node config - draggable fields, types, required toggle
+ */
+
+import React from 'react';
+import { FaGripVertical, FaTimes } from 'react-icons/fa';
+import type { FormField, NodeConfigRendererProps } from './types';
+import styles from '../Automation2FlowEditor.module.css';
+
+export const FormNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
+  const fields = (params.fields as FormField[]) ?? [];
+
+  const moveField = (fromIndex: number, toIndex: number) => {
+    if (fromIndex < 0 || toIndex < 0 || fromIndex >= fields.length || toIndex >= fields.length) return;
+    const next = [...fields];
+    const [removed] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, removed);
+    updateParam('fields', next);
+  };
+
+  const removeField = (index: number) => {
+    const next = fields.filter((_, i) => i !== index);
+    updateParam('fields', next);
+  };
+
+  return (
+    <div>
+      <label>Felder</label>
+      <div className={styles.formFieldsList}>
+        {fields.map((f, i) => (
+          <div
+            key={i}
+            className={styles.formFieldRow}
+            onDragOver={(e) => {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = 'move';
+            }}
+            onDrop={(e) => {
+              e.preventDefault();
+              const from = parseInt(e.dataTransfer.getData('text/plain'), 10);
+              if (!Number.isNaN(from) && from !== i) moveField(from, i);
+            }}
+          >
+            <div className={styles.formFieldRowHeader}>
+              <span
+                className={styles.formFieldDragHandle}
+                title="Zum Verschieben ziehen"
+                draggable
+                onDragStart={(e) => {
+                  e.dataTransfer.setData('text/plain', String(i));
+                  e.dataTransfer.effectAllowed = 'move';
+                }}
+              >
+                <FaGripVertical />
+              </span>
+              <div className={styles.formFieldInputs}>
+                <input
+                  placeholder="name"
+                  value={f.name ?? ''}
+                  onChange={(e) => {
+                    const next = [...fields];
+                    next[i] = { ...next[i], name: e.target.value };
+                    updateParam('fields', next);
+                  }}
+                />
+                <input
+                  placeholder="label"
+                  value={f.label ?? ''}
+                  onChange={(e) => {
+                    const next = [...fields];
+                    next[i] = { ...next[i], label: e.target.value };
+                    updateParam('fields', next);
+                  }}
+                />
+              </div>
+            </div>
+            <div className={styles.formFieldRowFooter}>
+              <select
+                value={f.type ?? 'string'}
+                onChange={(e) => {
+                  const next = [...fields];
+                  next[i] = { ...next[i], type: e.target.value };
+                  updateParam('fields', next);
+                }}
+                style={{ width: 'auto', minWidth: 90 }}
+              >
+                <option value="string">Text</option>
+                <option value="number">Number</option>
+                <option value="date">Date</option>
+                <option value="boolean">Checkbox</option>
+              </select>
+              <label className={styles.formFieldRequiredLabel}>
+                <input
+                  type="checkbox"
+                  checked={f.required ?? false}
+                  onChange={(e) => {
+                    const next = [...fields];
+                    next[i] = { ...next[i], required: e.target.checked };
+                    updateParam('fields', next);
+                  }}
+                />
+                Pflichtfeld
+              </label>
+              <button
+                type="button"
+                onClick={() => removeField(i)}
+                title="Feld entfernen"
+                className={styles.formFieldRemoveButton}
+              >
+                <FaTimes />
+              </button>
+            </div>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() =>
+            updateParam('fields', [...fields, { name: '', type: 'string', label: '', required: false }])
+          }
+        >
+          + Feld
+        </button>
+      </div>
+    </div>
+  );
+};

src/components/Automation2FlowEditor/configs/ReviewNodeConfig.tsx

@@ -0,0 +1,17 @@
+/**
+ * Review node config
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+export const ReviewNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => (
+  <div>
+    <label>Content-Referenz</label>
+    <input
+      value={(params.contentRef as string) ?? ''}
+      onChange={(e) => updateParam('contentRef', e.target.value)}
+      placeholder="{{nodeId.field}}"
+    />
+  </div>
+);

src/components/Automation2FlowEditor/configs/SelectionNodeConfig.tsx

@@ -0,0 +1,50 @@
+/**
+ * Selection node config
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+export const SelectionNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
+  const options = (params.options as Array<{ value?: string; label?: string }>) ?? [];
+  return (
+    <div>
+      <label>Optionen</label>
+      {options.map((o, i) => (
+        <div key={i} style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+          <input
+            placeholder="value"
+            value={o.value ?? ''}
+            onChange={(e) => {
+              const next = [...options];
+              next[i] = { ...next[i], value: e.target.value };
+              updateParam('options', next);
+            }}
+          />
+          <input
+            placeholder="label"
+            value={o.label ?? ''}
+            onChange={(e) => {
+              const next = [...options];
+              next[i] = { ...next[i], label: e.target.value };
+              updateParam('options', next);
+            }}
+          />
+        </div>
+      ))}
+      <button type="button" onClick={() => updateParam('options', [...options, { value: '', label: '' }])}>
+        + Option
+      </button>
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={(params.multiple as boolean) ?? false}
+            onChange={(e) => updateParam('multiple', e.target.checked)}
+          />
+          Mehrfachauswahl
+        </label>
+      </div>
+    </div>
+  );
+};

src/components/Automation2FlowEditor/configs/SharePointNodeConfig.tsx

@@ -0,0 +1,245 @@
+/**
+ * SharePoint node config - connection selector, path, search query.
+ * Uses SharepointBrowseTree (FolderTree-style) for file selection.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import type { NodeConfigRendererProps } from './types';
+import { fetchConnections, fetchBrowse, type UserConnection, type BrowseEntry } from '../../../api/automation2Api';
+import { SharepointBrowseTree } from '../../FolderTree/SharepointBrowseTree';
+
+export const SharePointNodeConfig: React.FC<NodeConfigRendererProps> = ({
+  params,
+  updateParam,
+  instanceId,
+  request,
+  nodeType = 'sharepoint.findFile',
+}) => {
+  const [connections, setConnections] = useState<UserConnection[]>([]);
+  const [browseExpanded, setBrowseExpanded] = useState(false);
+  const [copySourceExpanded, setCopySourceExpanded] = useState(false);
+  const [copyDestExpanded, setCopyDestExpanded] = useState(false);
+  const [connectionsLoading, setConnectionsLoading] = useState(false);
+
+  const connectionId = (params.connectionId as string) ?? '';
+  const pathParam = 'path';
+  const path = (params.path as string) ?? (params.filePath as string) ?? '';
+
+  useEffect(() => {
+    if (instanceId && request) {
+      setConnectionsLoading(true);
+      fetchConnections(request, instanceId)
+        .then(setConnections)
+        .catch(() => setConnections([]))
+        .finally(() => setConnectionsLoading(false));
+    }
+  }, [instanceId, request]);
+
+  const loadChildren = useCallback(
+    async (pathToLoad: string): Promise<BrowseEntry[]> => {
+      if (!instanceId || !request || !connectionId) return [];
+      const r = await fetchBrowse(request, instanceId, connectionId, 'sharepoint', pathToLoad);
+      return r?.items ?? [];
+    },
+    [instanceId, request, connectionId]
+  );
+
+  const selectPath = useCallback(
+    (p: string) => {
+      updateParam(pathParam, p);
+      setBrowseExpanded(false);
+    },
+    [updateParam, pathParam]
+  );
+
+  const selectSourcePath = useCallback(
+    (p: string) => {
+      updateParam('sourcePath', p);
+      setCopySourceExpanded(false);
+    },
+    [updateParam]
+  );
+
+  const selectDestPath = useCallback(
+    (p: string) => {
+      updateParam('destPath', p);
+      setCopyDestExpanded(false);
+    },
+    [updateParam]
+  );
+
+  const needsPath = !['sharepoint.findFile'].includes(nodeType);
+  const needsSearch = nodeType === 'sharepoint.findFile';
+  const needsSiteId = false;
+  const hasPathInput = ['sharepoint.readFile', 'sharepoint.uploadFile', 'sharepoint.downloadFile', 'sharepoint.copyFile'].includes(nodeType);
+
+  return (
+    <>
+      <div>
+        <label>Connection</label>
+        <select
+          value={connectionId}
+          onChange={(e) => updateParam('connectionId', e.target.value)}
+          disabled={connectionsLoading}
+        >
+          <option value="">{connectionsLoading ? 'Loading...' : 'Select connection'}</option>
+          {connections.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.externalUsername ?? c.id}
+            </option>
+          ))}
+        </select>
+      </div>
+      {needsSearch && (
+        <div>
+          <label>Search query / path</label>
+          <input
+            value={(params.searchQuery as string) ?? ''}
+            onChange={(e) => updateParam('searchQuery', e.target.value)}
+            placeholder="/sites/SiteName/Shared Documents or search term"
+          />
+        </div>
+      )}
+      {needsPath && nodeType === 'sharepoint.listFiles' && (
+        <div>
+          <label>Folder path</label>
+          <input
+            value={path}
+            onChange={(e) => updateParam('path', e.target.value)}
+            placeholder="/ or /sites/SiteName/Shared Documents/Folder"
+          />
+        </div>
+      )}
+      {needsPath && ['sharepoint.readFile', 'sharepoint.uploadFile', 'sharepoint.downloadFile'].includes(nodeType) && (
+        <div>
+          <label>{nodeType === 'sharepoint.uploadFile' ? 'Target folder path' : 'Path'}</label>
+          <input
+            value={(params.path as string) ?? (params.filePath as string) ?? ''}
+            onChange={(e) => updateParam('path', e.target.value)}
+            placeholder={
+              nodeType === 'sharepoint.downloadFile'
+                ? '/sites/SiteName/Shared Documents/file.pdf'
+                : nodeType === 'sharepoint.uploadFile'
+                  ? '/sites/.../Shared Documents/TargetFolder/'
+                  : 'File or folder path'
+            }
+          />
+        </div>
+      )}
+      {needsSiteId && (
+        <div>
+          <label>Site ID</label>
+          <input
+            value={(params.siteId as string) ?? ''}
+            onChange={(e) => updateParam('siteId', e.target.value)}
+            placeholder="SharePoint site ID"
+          />
+        </div>
+      )}
+      {nodeType === 'sharepoint.copyFile' && (
+        <>
+          <div>
+            <label>Source file</label>
+            <input
+              value={(params.sourcePath as string) ?? ''}
+              onChange={(e) => updateParam('sourcePath', e.target.value)}
+              placeholder="/sites/.../folder/file.pdf"
+            />
+          </div>
+          <div>
+            <label>Destination folder</label>
+            <input
+              value={(params.destPath as string) ?? ''}
+              onChange={(e) => updateParam('destPath', e.target.value)}
+              placeholder="/sites/.../target-folder/"
+            />
+          </div>
+          {connectionId && (
+            <>
+              <details
+                open={copySourceExpanded}
+                onToggle={(e) => setCopySourceExpanded((e.target as HTMLDetailsElement).open)}
+                style={{
+                  marginTop: 12,
+                  border: '1px solid var(--border-color, #e0e0e0)',
+                  borderRadius: 6,
+                  background: 'var(--bg-secondary, #f8f9fa)',
+                  overflow: 'hidden',
+                }}
+              >
+                <summary style={{ padding: '0.5rem 0.75rem', cursor: 'pointer', fontWeight: 500, fontSize: '0.875rem' }}>
+                  📂 Source file durchsuchen
+                </summary>
+                <div style={{ padding: '0.5rem 0.75rem', borderTop: '1px solid var(--border-color, #e0e0e0)', maxHeight: 280, overflowY: 'auto' }}>
+                  <SharepointBrowseTree rootPath="/" onLoadChildren={loadChildren} onSelectFile={selectSourcePath} selectedPath={(params.sourcePath as string) || null} />
+                </div>
+              </details>
+              <details
+                open={copyDestExpanded}
+                onToggle={(e) => setCopyDestExpanded((e.target as HTMLDetailsElement).open)}
+                style={{
+                  marginTop: 8,
+                  border: '1px solid var(--border-color, #e0e0e0)',
+                  borderRadius: 6,
+                  background: 'var(--bg-secondary, #f8f9fa)',
+                  overflow: 'hidden',
+                }}
+              >
+                <summary style={{ padding: '0.5rem 0.75rem', cursor: 'pointer', fontWeight: 500, fontSize: '0.875rem' }}>
+                  📂 Zielordner durchsuchen
+                </summary>
+                <div style={{ padding: '0.5rem 0.75rem', borderTop: '1px solid var(--border-color, #e0e0e0)', maxHeight: 280, overflowY: 'auto' }}>
+                  <SharepointBrowseTree rootPath="/" onLoadChildren={loadChildren} onSelectFile={() => {}} onSelectFolder={selectDestPath} selectedPath={(params.destPath as string) || null} />
+                </div>
+              </details>
+            </>
+          )}
+        </>
+      )}
+      {connectionId && needsPath && hasPathInput && !['sharepoint.copyFile'].includes(nodeType) && (
+        <details
+          open={browseExpanded}
+          onToggle={(e) => setBrowseExpanded((e.target as HTMLDetailsElement).open)}
+          style={{
+            marginTop: 12,
+            border: '1px solid var(--border-color, #e0e0e0)',
+            borderRadius: 6,
+            background: 'var(--bg-secondary, #f8f9fa)',
+            overflow: 'hidden',
+          }}
+        >
+          <summary
+            style={{
+              padding: '0.5rem 0.75rem',
+              cursor: 'pointer',
+              fontWeight: 500,
+              fontSize: '0.875rem',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+              userSelect: 'none',
+            }}
+          >
+            <span style={{ opacity: browseExpanded ? 0.7 : 1 }}>📂</span>
+            SharePoint durchsuchen
+          </summary>
+          <div
+            style={{
+              padding: '0.5rem 0.75rem',
+              borderTop: '1px solid var(--border-color, #e0e0e0)',
+              maxHeight: 280,
+              overflowY: 'auto',
+            }}
+          >
+            <SharepointBrowseTree
+              rootPath="/"
+              onLoadChildren={loadChildren}
+              onSelectFile={selectPath}
+              selectedPath={path || null}
+            />
+          </div>
+        </details>
+      )}
+    </>
+  );
+};

src/components/Automation2FlowEditor/configs/UploadNodeConfig.tsx

@@ -0,0 +1,37 @@
+/**
+ * Upload node config
+ */
+
+import React from 'react';
+import type { NodeConfigRendererProps } from './types';
+
+export const UploadNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => (
+  <>
+    <div>
+      <label>Accept (MIME)</label>
+      <input
+        value={(params.accept as string) ?? ''}
+        onChange={(e) => updateParam('accept', e.target.value)}
+        placeholder=".pdf,image/*"
+      />
+    </div>
+    <div>
+      <label>Max Größe (MB)</label>
+      <input
+        type="number"
+        value={(params.maxSize as number) ?? 10}
+        onChange={(e) => updateParam('maxSize', parseFloat(e.target.value) || 0)}
+      />
+    </div>
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          checked={(params.multiple as boolean) ?? false}
+          onChange={(e) => updateParam('multiple', e.target.checked)}
+        />
+        Mehrere Dateien
+      </label>
+    </div>
+  </>
+);

src/components/Automation2FlowEditor/configs/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Node config renderers - one per node type (input, ai, email, sharepoint).
+ */
+
+import type { ComponentType } from 'react';
+import type { NodeConfigRendererProps } from './types';
+import { FormNodeConfig } from './FormNodeConfig';
+import { ApprovalNodeConfig } from './ApprovalNodeConfig';
+import { UploadNodeConfig } from './UploadNodeConfig';
+import { CommentNodeConfig } from './CommentNodeConfig';
+import { ReviewNodeConfig } from './ReviewNodeConfig';
+import { SelectionNodeConfig } from './SelectionNodeConfig';
+import { ConfirmationNodeConfig } from './ConfirmationNodeConfig';
+import { AiNodeConfig } from './AiNodeConfig';
+import { EmailNodeConfig } from './EmailNodeConfig';
+import { SharePointNodeConfig } from './SharePointNodeConfig';
+
+export type NodeConfigComponent = ComponentType<NodeConfigRendererProps>;
+
+export const NODE_CONFIG_REGISTRY: Record<string, NodeConfigComponent> = {
+  'input.form': FormNodeConfig,
+  'input.approval': ApprovalNodeConfig,
+  'input.upload': UploadNodeConfig,
+  'input.comment': CommentNodeConfig,
+  'input.review': ReviewNodeConfig,
+  'input.selection': SelectionNodeConfig,
+  'input.confirmation': ConfirmationNodeConfig,
+  'ai.prompt': AiNodeConfig,
+  'ai.webResearch': AiNodeConfig,
+  'ai.summarizeDocument': AiNodeConfig,
+  'ai.translateDocument': AiNodeConfig,
+  'ai.convertDocument': AiNodeConfig,
+  'ai.generateDocument': AiNodeConfig,
+  'ai.generateCode': AiNodeConfig,
+  'email.checkEmail': EmailNodeConfig,
+  'email.searchEmail': EmailNodeConfig,
+  'email.draftEmail': EmailNodeConfig,
+  'sharepoint.findFile': SharePointNodeConfig,
+  'sharepoint.readFile': SharePointNodeConfig,
+  'sharepoint.uploadFile': SharePointNodeConfig,
+  'sharepoint.listFiles': SharePointNodeConfig,
+  'sharepoint.downloadFile': SharePointNodeConfig,
+  'sharepoint.copyFile': SharePointNodeConfig,
+};

src/components/Automation2FlowEditor/configs/types.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared types for node config renderers
+ */
+
+import type { ApiRequestFunction } from '../../../api/automation2Api';
+
+export type FormField = { name?: string; type?: string; label?: string; required?: boolean };
+
+export interface NodeConfigRendererProps {
+  params: Record<string, unknown>;
+  updateParam: (key: string, value: unknown) => void;
+  /** For Email/SharePoint: fetch connections and browse */
+  instanceId?: string;
+  request?: ApiRequestFunction;
+  nodeType?: string;
+}

src/components/Automation2FlowEditor/constants.ts

@@ -0,0 +1,38 @@
+/**
+ * Automation2 Flow Editor - Constants
+ * Category ordering for node sidebar.
+ */
+
+/** Node type IDs hidden from the sidebar (hidden, not removed – still work when present in saved graphs) */
+export const HIDDEN_NODE_IDS = new Set([
+  'trigger.schedule',      // zeitplan
+  'trigger.formSubmit',    // formular-absendung
+  'flow.ifElse',
+  'flow.switch',
+  'flow.merge',
+  'flow.loop',
+  'flow.wait',
+  'flow.stop',             // alle abschnitt ablauf
+  'data.setFields',
+  'data.filter',
+  'data.parseJson',
+  'data.template',         // alle abschnitt daten
+  'ai.webResearch',
+  'ai.summarizeDocument',
+  'ai.translateDocument',
+  'ai.convertDocument',
+  'ai.generateDocument',
+  'ai.generateCode',       // alle KI ausser ai.prompt
+  'sharepoint.listFiles',   // dateien auflisten
+]);
+
+/** Default category display order */
+export const CATEGORY_ORDER = [
+  'trigger',
+  'input',
+  'flow',
+  'data',
+  'ai',
+  'email',
+  'sharepoint',
+] as const;

src/components/Automation2FlowEditor/graphUtils.ts

@@ -0,0 +1,78 @@
+/**
+ * Automation2 Flow Editor - Graph conversion utilities
+ * Converts between API graph format and canvas internal format.
+ */
+
+import type { NodeType } from '../../api/automation2Api';
+import type { CanvasNode, CanvasConnection } from './FlowCanvas';
+import type { Automation2Graph } from '../../api/automation2Api';
+
+export function fromApiGraph(
+  graph: Automation2Graph,
+  nodeTypes: NodeType[]
+): { nodes: CanvasNode[]; connections: CanvasConnection[] } {
+  const nodeMap = new Map<string, { inputs: number; outputs: number }>();
+  nodeTypes.forEach((nt) => {
+    nodeMap.set(nt.id, { inputs: nt.inputs ?? 1, outputs: nt.outputs ?? 1 });
+  });
+
+  const nodes: CanvasNode[] = (graph.nodes || []).map((n) => {
+    const io = nodeMap.get(n.type) ?? { inputs: 1, outputs: 1 };
+    return {
+      id: n.id,
+      type: n.type,
+      x: (n as { x?: number }).x ?? 0,
+      y: (n as { y?: number }).y ?? 0,
+      title: (n as { title?: string }).title ?? (typeof n.type === 'string' ? n.type : ''),
+      comment: (n as { comment?: string }).comment,
+      inputs: io.inputs,
+      outputs: io.outputs,
+      parameters: n.parameters ?? {},
+    };
+  });
+
+  const connId = (s: string, t: string, so: number, ti: number) => `c_${s}_${so}_${t}_${ti}`;
+  const connections: CanvasConnection[] = (graph.connections || []).map((c) => {
+    const srcNode = nodes.find((n) => n.id === c.source);
+    const sourceOutput = c.sourceOutput ?? 0;
+    const sourceHandle = srcNode ? srcNode.inputs + sourceOutput : 0;
+    return {
+      id: connId(c.source, c.target, sourceOutput, c.targetInput ?? 0),
+      sourceId: c.source,
+      sourceHandle,
+      targetId: c.target,
+      targetHandle: c.targetInput ?? 0,
+    };
+  });
+
+  return { nodes, connections };
+}
+
+export function toApiGraph(
+  nodes: CanvasNode[],
+  connections: CanvasConnection[]
+): Automation2Graph {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  return {
+    nodes: nodes.map((n) => ({
+      id: n.id,
+      type: n.type,
+      x: n.x,
+      y: n.y,
+      title: n.title,
+      comment: n.comment,
+      parameters: n.parameters ?? {},
+    })),
+    connections: connections.map((c) => {
+      const srcNode = nodeMap.get(c.sourceId);
+      const sourceOutput =
+        srcNode && c.sourceHandle >= srcNode.inputs ? c.sourceHandle - srcNode.inputs : 0;
+      return {
+        source: c.sourceId,
+        target: c.targetId,
+        sourceOutput,
+        targetInput: c.targetHandle,
+      };
+    }),
+  };
+}

src/components/Automation2FlowEditor/index.ts

@@ -0,0 +1,9 @@
+export { Automation2FlowEditor } from './Automation2FlowEditor';
+export { FlowCanvas } from './FlowCanvas';
+export { NodeConfigPanel } from './NodeConfigPanel';
+export { NodeSidebar } from './NodeSidebar';
+export { NodeListItem } from './NodeListItem';
+export { CanvasHeader } from './CanvasHeader';
+export * from './utils';
+export * from './constants';
+export * from './graphUtils';

src/components/Automation2FlowEditor/utils.ts

@@ -0,0 +1,25 @@
+/**
+ * Automation2 Flow Editor - Utility functions
+ */
+
+import type React from 'react';
+import { CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from './categoryIcons';
+
+/** Resolve localized label from string or { de, en, fr } object */
+export function getLabel(
+  text: string | Record<string, string> | undefined,
+  lang = 'de'
+): string {
+  if (!text) return '';
+  if (typeof text === 'string') return text;
+  const rec = text as Record<string, string>;
+  return rec[lang] ?? rec.en ?? '';
+}
+
+/** Get icon for a category */
+export function getCategoryIcon(categoryId: string): React.ReactNode {
+  return CATEGORY_ICONS[categoryId] ?? DEFAULT_CATEGORY_ICON;
+}
+
+/** Function type for resolving localized labels */
+export type GetLabelFn = (text: string | Record<string, string> | undefined, lang?: string) => string;

src/components/FolderTree/SharepointBrowseTree.tsx

@@ -0,0 +1,306 @@
+/**
+ * SharepointBrowseTree – Lazy-loading tree for SharePoint browse.
+ * Same look & feel as FolderTree (chevron, FaFolder/FaFolderOpen, styling).
+ * Loads children on expand via onLoadChildren(path).
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { FaFolder, FaFolderOpen, FaChevronRight, FaGlobe } from 'react-icons/fa';
+import styles from './FolderTree.module.css';
+
+export interface BrowseEntry {
+  name: string;
+  path: string;
+  isFolder: boolean;
+  size?: number;
+  mimeType?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface SharepointBrowseTreeProps {
+  /** Root path (usually "/") - children loaded via onLoadChildren */
+  rootPath?: string;
+  /** Load children for a given path. Returns folders and files. */
+  onLoadChildren: (path: string) => Promise<BrowseEntry[]>;
+  /** Called when user selects a file path */
+  onSelectFile: (path: string) => void;
+  /** Called when user selects a folder path (e.g. for destination). If provided, folder rows are selectable. */
+  onSelectFolder?: (path: string) => void;
+  /** Currently selected path (for highlight) */
+  selectedPath?: string | null;
+  /** Optional: pre-seed root children (e.g. from initial load) */
+  initialChildren?: BrowseEntry[];
+}
+
+function _fileIcon(mime?: string): string {
+  if (!mime) return '\uD83D\uDCC4';
+  if (mime.startsWith('image/')) return '\uD83D\uDDBC\uFE0F';
+  if (mime.includes('pdf')) return '\uD83D\uDCD5';
+  if (mime.includes('word') || mime.includes('docx')) return '\uD83D\uDCD8';
+  if (mime.includes('sheet') || mime.includes('xlsx') || mime.includes('csv')) return '\uD83D\uDCCA';
+  if (mime.includes('presentation') || mime.includes('pptx')) return '\uD83D\uDCD9';
+  if (mime.includes('zip') || mime.includes('tar') || mime.includes('gz')) return '\uD83D\uDCE6';
+  if (mime.startsWith('text/') || mime.includes('json') || mime.includes('xml')) return '\uD83D\uDCDD';
+  return '\uD83D\uDCC4';
+}
+
+/* ── File row ──────────────────────────────────────────────────────────── */
+
+function _FileRow({
+  entry,
+  selectedPath,
+  onSelect,
+}: {
+  entry: BrowseEntry;
+  selectedPath: string | null | undefined;
+  onSelect: (path: string) => void;
+}) {
+  const isSelected = selectedPath === entry.path;
+
+  return (
+    <div
+      className={`${styles.treeNode} ${styles.fileNode} ${isSelected ? styles.selected : ''}`}
+      onClick={() => onSelect(entry.path)}
+      title={entry.path}
+    >
+      <span className={styles.chevron + ' ' + styles.empty} />
+      <span className={styles.fileIcon}>{_fileIcon(entry.mimeType)}</span>
+      <span className={styles.folderName}>{entry.name}</span>
+      {entry.size != null && (
+        <span className={styles.fileSize}>
+          {(entry.size / 1024).toFixed(0)}K
+        </span>
+      )}
+    </div>
+  );
+}
+
+/* ── Folder row (expandable, lazy-loads children) ───────────────────────── */
+
+function _FolderRow({
+  entry,
+  selectedPath,
+  expandedPaths,
+  loadedChildren,
+  loadingPaths,
+  onToggle,
+  onSelectFile,
+  onSelectFolder,
+}: {
+  entry: BrowseEntry;
+  selectedPath: string | null | undefined;
+  expandedPaths: Set<string>;
+  loadedChildren: Record<string, BrowseEntry[]>;
+  loadingPaths: Set<string>;
+  onToggle: (path: string) => void;
+  onSelectFile: (path: string) => void;
+  onSelectFolder?: (path: string) => void;
+}) {
+  const isExpanded = expandedPaths.has(entry.path);
+  const isSelected = selectedPath === entry.path;
+  const children = loadedChildren[entry.path] ?? [];
+  const folders = children.filter((c) => c.isFolder).sort((a, b) => a.name.localeCompare(b.name));
+  const files = children.filter((c) => !c.isFolder).sort((a, b) => a.name.localeCompare(b.name));
+  const isLoading = isExpanded && loadingPaths.has(entry.path);
+
+  const handleRowClick = (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.closest(`.${styles.chevron}`)) return;
+    if (onSelectFolder) {
+      onSelectFolder(entry.path);
+      return;
+    }
+    onToggle(entry.path);
+  };
+
+  const handleChevronClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onToggle(entry.path);
+  };
+
+  return (
+    <div>
+      <div
+        className={`${styles.treeNode} ${onSelectFolder && isSelected ? styles.selected : ''}`}
+        onClick={handleRowClick}
+        title={entry.path}
+      >
+        <span
+          className={`${styles.chevron} ${isExpanded ? styles.expanded : ''}`}
+          onClick={handleChevronClick}
+          title={isExpanded ? 'Einklappen' : 'Erweitern'}
+        >
+          <FaChevronRight />
+        </span>
+        <span className={styles.folderIcon}>
+          {isExpanded ? <FaFolderOpen /> : <FaFolder />}
+        </span>
+        <span className={styles.folderName}>{entry.name}</span>
+        {isLoading && (
+          <span style={{ fontSize: 10, color: 'var(--color-text-secondary,#999)', marginLeft: 4 }}>…</span>
+        )}
+      </div>
+      {isExpanded && (
+        <div className={styles.children}>
+          {isLoading ? (
+            <div style={{ padding: '0.5rem 1rem', fontSize: '0.8rem', color: 'var(--color-text-secondary,#666)' }}>
+              Wird geladen…
+            </div>
+          ) : (
+            <>
+              {folders.map((child) => (
+                <_FolderRow
+                  key={child.path}
+                  entry={child}
+                  selectedPath={selectedPath}
+                  expandedPaths={expandedPaths}
+                  loadedChildren={loadedChildren}
+                  loadingPaths={loadingPaths}
+                  onToggle={onToggle}
+                  onSelectFile={onSelectFile}
+                  onSelectFolder={onSelectFolder}
+                />
+              ))}
+              {files.map((child) => (
+                <_FileRow
+                  key={child.path}
+                  entry={child}
+                  selectedPath={selectedPath}
+                  onSelect={onSelectFile}
+                />
+              ))}
+              {children.length === 0 && (
+                <div style={{ padding: '0.4rem 1rem', fontSize: '0.8rem', color: 'var(--color-text-secondary,#999)' }}>
+                  Leer
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Root component ─────────────────────────────────────────────────────── */
+
+export function SharepointBrowseTree({
+  rootPath = '/',
+  onLoadChildren,
+  onSelectFile,
+  onSelectFolder,
+  selectedPath,
+  initialChildren = [],
+}: SharepointBrowseTreeProps) {
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set([rootPath]));
+  const [loadedChildren, setLoadedChildren] = useState<Record<string, BrowseEntry[]>>(() =>
+    initialChildren.length > 0 ? { [rootPath]: initialChildren } : {}
+  );
+  const [loadingPaths, setLoadingPaths] = useState<Set<string>>(new Set());
+
+  const loadPath = useCallback(
+    async (path: string) => {
+      setLoadingPaths((p) => new Set(p).add(path));
+      try {
+        const items = await onLoadChildren(path);
+        setLoadedChildren((prev) => ({ ...prev, [path]: items }));
+      } catch {
+        setLoadedChildren((prev) => ({ ...prev, [path]: [] }));
+      } finally {
+        setLoadingPaths((p) => {
+          const next = new Set(p);
+          next.delete(path);
+          return next;
+        });
+      }
+    },
+    [onLoadChildren]
+  );
+
+  const handleToggle = useCallback(
+    (path: string) => {
+      setExpandedPaths((prev) => {
+        const next = new Set(prev);
+        if (next.has(path)) {
+          next.delete(path);
+        } else {
+          next.add(path);
+          loadPath(path);
+        }
+        return next;
+      });
+    },
+    [loadPath]
+  );
+
+  useEffect(() => {
+    if (rootPath in loadedChildren) return;
+    if (initialChildren.length > 0) return;
+    loadPath(rootPath);
+  }, [rootPath, initialChildren.length, loadPath]);
+
+  const rootItems = loadedChildren[rootPath] ?? [];
+  const rootLoading = loadingPaths.has(rootPath);
+  const rootFolders = rootItems.filter((e) => e.isFolder).sort((a, b) => a.name.localeCompare(b.name));
+  const rootFiles = rootItems.filter((e) => !e.isFolder).sort((a, b) => a.name.localeCompare(b.name));
+  const isRootExpanded = expandedPaths.has(rootPath);
+
+  return (
+    <div className={styles.folderTree}>
+      <div
+        className={`${styles.treeNode} ${selectedPath === null || selectedPath === undefined ? styles.selected : ''}`}
+        style={{ fontWeight: 600 }}
+      >
+        <span
+          className={`${styles.chevron} ${isRootExpanded ? styles.expanded : ''}`}
+          onClick={() => handleToggle(rootPath)}
+        >
+          <FaChevronRight />
+        </span>
+        <span className={styles.folderIcon}><FaGlobe /></span>
+        <span className={`${styles.folderName} ${styles.rootLabel}`}>SharePoint</span>
+        {rootLoading && (
+          <span style={{ fontSize: 10, color: 'var(--color-text-secondary,#999)', marginLeft: 4 }}>…</span>
+        )}
+      </div>
+      {isRootExpanded && (
+        <div className={styles.children}>
+          {rootLoading ? (
+            <div style={{ padding: '0.5rem 1rem', fontSize: '0.8rem', color: 'var(--color-text-secondary,#666)' }}>
+              Sites werden geladen…
+            </div>
+          ) : (
+            <>
+              {rootFolders.map((entry) => (
+                <_FolderRow
+                  key={entry.path}
+                  entry={entry}
+                  selectedPath={selectedPath}
+                  expandedPaths={expandedPaths}
+                  loadedChildren={loadedChildren}
+                  loadingPaths={loadingPaths}
+                  onToggle={handleToggle}
+                  onSelectFile={onSelectFile}
+                  onSelectFolder={onSelectFolder}
+                />
+              ))}
+              {rootFiles.map((entry) => (
+                <_FileRow
+                  key={entry.path}
+                  entry={entry}
+                  selectedPath={selectedPath}
+                  onSelect={onSelectFile}
+                />
+              ))}
+              {rootItems.length === 0 && !rootLoading && (
+                <div style={{ padding: '0.5rem 1rem', fontSize: '0.8rem', color: 'var(--color-text-secondary,#999)' }}>
+                  Keine Einträge
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/config/pageRegistry.tsx

@@ -115,6 +115,10 @@ export const PAGE_ICONS: Record<string, React.ReactNode> = {
   'feature.realestate': <FaBuilding />,
   'feature.chatworkflow': <FaPlay />,
   'feature.automation': <FaCogs />,
+  'feature.automation2': <FaProjectDiagram />,
+  'page.feature.automation2.editor': <FaProjectDiagram />,
+  'page.feature.automation2.workflows': <FaProjectDiagram />,
+  'page.feature.automation2.workflows-tasks': <FaClipboardList />,
   'page.feature.chatbot.conversations': <FaComments />,
   'feature.chatbot': <FaComments />,
   'feature.teamsbot': <FaHeadset />,

src/pages/FeatureView.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import { Navigate, useParams } from 'react-router-dom';
 import { useCurrentInstance } from '../hooks/useCurrentInstance';
 import { useCanViewFeatureView } from '../hooks/useInstancePermissions';
 import { useLanguage } from '../providers/language/LanguageContext';
@@ -30,6 +31,11 @@ import { RealEstatePekView, RealEstateInstanceRolesPlaceholder } from './views/r
 // Automation Views
 import { AutomationDefinitionsView, AutomationTemplatesView } from './views/automation';
 
+// Automation2 Views
+import { Automation2Page } from './views/automation2/Automation2Page';
+import { Automation2WorkflowsPage } from './views/automation2/Automation2WorkflowsPage';
+import { Automation2WorkflowsTasksPage } from './views/automation2/Automation2WorkflowsTasksPage';
+
 // Workspace Views
 import { WorkspacePage } from './views/workspace/WorkspacePage';
 import { WorkspaceEditorPage } from './views/workspace/WorkspaceEditorPage';
@@ -128,6 +134,11 @@ const VIEW_COMPONENTS: Record<string, Record<string, ViewComponent>> = {
     definitions: AutomationDefinitionsView,
     templates: AutomationTemplatesView,
   },
+  automation2: {
+    editor: Automation2Page,
+    workflows: Automation2WorkflowsPage,
+    'workflows-tasks': Automation2WorkflowsTasksPage,
+  },
   workspace: {
     dashboard: WorkspacePage,
     editor: WorkspaceEditorPage,
@@ -162,6 +173,12 @@ interface FeatureViewPageProps {
 export const FeatureViewPage: React.FC<FeatureViewPageProps> = ({ view }) => {
   const { instance, featureCode, isValid } = useCurrentInstance();
   const { currentLanguage } = useLanguage();
+  const { mandateId, instanceId } = useParams<{ mandateId?: string; instanceId?: string }>();
+
+  // automation2: Dashboard entfernt → Index/Base-URL auf Editor umleiten
+  if (featureCode === 'automation2' && view === 'dashboard' && mandateId && instanceId) {
+    return <Navigate to={`/mandates/${mandateId}/automation2/${instanceId}/editor`} replace />;
+  }
 
   // Berechtigungs-Check
   const viewCode = `${featureCode}-${view}`;

src/pages/Store.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { FaCogs, FaComments, FaHeadset } from 'react-icons/fa';
+import { FaCogs, FaComments, FaHeadset, FaProjectDiagram } from 'react-icons/fa';
 import { useLanguage } from '../providers/language/LanguageContext';
 import { useStore } from '../hooks/useStore';
 import type { StoreFeature } from '../api/storeApi';
@@ -15,6 +15,7 @@ import styles from './Store.module.css';
 
 const FEATURE_ICONS: Record<string, React.ReactNode> = {
   automation: <FaCogs />,
+  automation2: <FaProjectDiagram />,
   teamsbot: <FaHeadset />,
   workspace: <FaComments />,
   commcoach: <FaComments />,
@@ -26,6 +27,11 @@ const FEATURE_DESCRIPTIONS: Record<string, Record<string, string>> = {
     en: 'Create and manage automations to handle recurring tasks efficiently.',
     fr: 'Creer et gerer des automatisations pour traiter efficacement les taches recurrentes.',
   },
+  automation2: {
+    de: 'n8n-style Flow-Automatisierung mit grafischem Editor, RAG und Tools.',
+    en: 'n8n-style flow automation with visual editor, RAG and tools.',
+    fr: 'Automatisation de flux style n8n avec editeur visuel, RAG et outils.',
+  },
   teamsbot: {
     de: 'Integriere einen AI-Bot in deine Microsoft Teams Meetings und Channels.',
     en: 'Integrate an AI bot into your Microsoft Teams meetings and channels.',

src/pages/views/automation2/Automation2Page.tsx

@@ -0,0 +1,38 @@
+/**
+ * Automation2Page
+ *
+ * n8n-style flow builder with backend-driven node list.
+ */
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useInstanceId } from '../../../hooks/useCurrentInstance';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+import { Automation2FlowEditor } from '../../../components/Automation2FlowEditor';
+import styles from '../../FeatureView.module.css';
+
+export const Automation2Page: React.FC = () => {
+  const instanceId = useInstanceId();
+  const [searchParams] = useSearchParams();
+  const workflowId = searchParams.get('workflowId');
+  const { currentLanguage } = useLanguage();
+  const language = (currentLanguage?.slice(0, 2) || 'de') as string;
+
+  if (!instanceId) {
+    return (
+      <div className={styles.placeholder}>
+        <h2>Automation 2</h2>
+        <p>Keine Feature-Instanz gefunden.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+      <Automation2FlowEditor
+        instanceId={instanceId}
+        language={language}
+        initialWorkflowId={workflowId}
+      />
+    </div>
+  );
+};

src/pages/views/automation2/Automation2WorkflowsPage.tsx

@@ -0,0 +1,233 @@
+/**
+ * Automation2WorkflowsPage
+ * List of saved workflows with FormGeneratorTable.
+ * Shows: label, isRunning, stuckAt, createdAt, lastStartedAt, runCount.
+ * Actions: Edit (navigate to editor), Delete, Execute.
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { FaPlay, FaSync } from 'react-icons/fa';
+import { FormGeneratorTable, type ColumnConfig } from '../../../components/FormGenerator';
+import { useInstanceId } from '../../../hooks/useCurrentInstance';
+import { useApiRequest } from '../../../hooks/useApi';
+import {
+  fetchWorkflows,
+  deleteWorkflow,
+  executeGraph,
+  type Automation2Workflow,
+} from '../../../api/automation2Api';
+import { useToast } from '../../../contexts/ToastContext';
+import { formatUnixTimestamp } from '../../../utils/time';
+import styles from '../../../pages/admin/Admin.module.css';
+
+function formatTs(ts?: number): string {
+  if (ts == null || ts <= 0) return '—';
+  const sec = ts < 1e12 ? ts : ts / 1000;
+  const { time } = formatUnixTimestamp(sec, undefined, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+  return time;
+}
+
+export const Automation2WorkflowsPage: React.FC = () => {
+  const instanceId = useInstanceId();
+  const { mandateId } = useParams<{ mandateId: string }>();
+  const { request } = useApiRequest();
+  const navigate = useNavigate();
+  const { showSuccess, showError } = useToast();
+
+  const [workflows, setWorkflows] = useState<Automation2Workflow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [executingId, setExecutingId] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    if (!instanceId) return;
+    setLoading(true);
+    try {
+      const list = await fetchWorkflows(request, instanceId);
+      setWorkflows(list);
+    } catch (e) {
+      console.error('[Automation2] load workflows failed', e);
+      showError('Fehler beim Laden der Workflows');
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId, request, showError]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleDelete = useCallback(
+    async (workflowId: string): Promise<boolean> => {
+      if (!instanceId) return false;
+      try {
+        await deleteWorkflow(request, instanceId, workflowId);
+        showSuccess('Workflow gelöscht');
+        await load();
+        return true;
+      } catch (e: any) {
+        showError(`Fehler: ${e?.message || 'Löschen fehlgeschlagen'}`);
+        return false;
+      }
+    },
+    [instanceId, request, showSuccess, showError, load]
+  );
+
+  const handleEdit = useCallback(
+    (row: Automation2Workflow) => {
+      if (!mandateId || !instanceId) return;
+      navigate(`/mandates/${mandateId}/automation2/${instanceId}/editor?workflowId=${row.id}`);
+    },
+    [mandateId, instanceId, navigate]
+  );
+
+  const handleExecute = useCallback(
+    async (row: Automation2Workflow) => {
+      if (!instanceId) return;
+      setExecutingId(row.id);
+      try {
+        const result = await executeGraph(request, instanceId, row.graph!, row.id);
+        if (result?.success) {
+          if (result?.paused) {
+            showSuccess('Workflow gestartet und bei Human Task pausiert. Öffne Workflows & Tasks.');
+          } else {
+            showSuccess('Workflow ausgeführt');
+          }
+          await load();
+        } else {
+          showError(result?.error || 'Ausführung fehlgeschlagen');
+        }
+      } catch (e: any) {
+        showError(`Fehler: ${e?.message || 'Ausführung fehlgeschlagen'}`);
+      } finally {
+        setExecutingId(null);
+      }
+    },
+    [instanceId, request, showSuccess, showError, load]
+  );
+
+  const columns: ColumnConfig[] = [
+    { key: 'label', label: 'Workflow', type: 'string', width: 200, sortable: true },
+    {
+      key: 'isRunning',
+      label: 'Läuft',
+      type: 'boolean',
+      width: 80,
+      formatter: (value: boolean) =>
+        value ? (
+          <span style={{ color: 'var(--success-color, #28a745)', fontWeight: 600 }}>✓ Ja</span>
+        ) : (
+          <span style={{ color: 'var(--text-secondary, #666)' }}>Nein</span>
+        ),
+    },
+    {
+      key: 'stuckAtNodeLabel',
+      label: 'Steht bei',
+      type: 'string',
+      width: 160,
+      formatter: (value: string, row: Automation2Workflow) =>
+        row.isRunning && (value || row.stuckAtNodeId)
+          ? value || row.stuckAtNodeId || '—'
+          : '—',
+    },
+    {
+      key: 'createdAt',
+      label: 'Erstellt',
+      type: 'number',
+      width: 140,
+      formatter: (v: number) => formatTs(v),
+    },
+    {
+      key: 'lastStartedAt',
+      label: 'Zuletzt gestartet',
+      type: 'number',
+      width: 160,
+      formatter: (v: number) => formatTs(v),
+    },
+    {
+      key: 'runCount',
+      label: 'Läufe',
+      type: 'number',
+      width: 80,
+      formatter: (v: number) => (v != null ? String(v) : '0'),
+    },
+  ];
+
+  const hookData = {
+    refetch: load,
+    handleDelete: (id: string) => handleDelete(id),
+  };
+
+  if (!instanceId) {
+    return (
+      <div className={styles.adminPage}>
+        <p>Keine Feature-Instanz gefunden.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${styles.adminPage} ${styles.adminPageFill}`}>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Gespeicherte Workflows</h1>
+          <p className={styles.pageSubtitle}>
+            Workflows verwalten, ausführen und bearbeiten
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <button
+            className={styles.secondaryButton}
+            onClick={() => load()}
+            disabled={loading}
+          >
+            <FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.tableContainer}>
+        <FormGeneratorTable<Automation2Workflow>
+          data={workflows}
+          columns={columns}
+          loading={loading}
+          pagination={true}
+          pageSize={25}
+          searchable={true}
+          filterable={true}
+          sortable={true}
+          selectable={false}
+          actionButtons={[
+            {
+              type: 'edit',
+              title: 'Bearbeiten',
+              onAction: handleEdit,
+            },
+            {
+              type: 'delete',
+              title: 'Löschen',
+            },
+          ]}
+          customActions={[
+            {
+              id: 'execute',
+              icon: <FaPlay />,
+              title: 'Ausführen',
+              onClick: (row) => handleExecute(row),
+              loading: (row) => executingId === row.id,
+            },
+          ]}
+          onDelete={(row) => handleDelete(row.id)}
+          hookData={hookData}
+          emptyMessage="Keine Workflows gefunden. Erstelle einen im Editor."
+        />
+      </div>
+    </div>
+  );
+};

src/pages/views/automation2/Automation2WorkflowsTasks.module.css

@@ -0,0 +1,281 @@
+.container {
+  padding: 1.5rem;
+  max-width: 900px;
+}
+
+.container h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+}
+
+.section {
+  margin-bottom: 1.5rem;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.completedHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.6rem 0;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #333);
+}
+
+.completedHeader:hover {
+  color: var(--primary-color, #007bff);
+}
+
+.completedList {
+  max-height: 360px;
+  overflow-y: auto;
+  padding-top: 0.5rem;
+}
+
+.taskMeta {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.5rem 1.25rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.taskMetaRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.metaLabel {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-secondary, #666);
+}
+
+.metaValue {
+  font-size: 0.9rem;
+  color: var(--text-primary, #333);
+}
+
+.metaValueMono {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: var(--text-secondary, #666);
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 3rem;
+  color: var(--text-secondary, #666);
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.placeholder {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-secondary, #666);
+}
+
+.workflowList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.workflowItem {
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-primary, #fff);
+}
+
+.workflowHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  text-align: left;
+  background: var(--bg-secondary, #f8f9fa);
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.workflowHeader:hover {
+  background: var(--bg-hover, #e9ecef);
+}
+
+.badge {
+  margin-left: auto;
+  background: var(--primary-color, #007bff);
+  color: white;
+  padding: 0.2rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+}
+
+.taskList {
+  padding: 1rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.empty {
+  color: var(--text-tertiary, #999);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.taskCard {
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  background: var(--bg-primary, #fff);
+}
+
+.taskCard:last-child {
+  margin-bottom: 0;
+}
+
+.taskType {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-secondary, #666);
+  margin-bottom: 0.5rem;
+}
+
+.formFields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.formFields button {
+  margin-top: 0.75rem;
+  align-self: flex-start;
+}
+
+.formFields label,
+.taskCard label {
+  display: block;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.formFields input[type='text'],
+.formFields input[type='number'],
+.formFields input[type='date'],
+.taskCard input[type='text'],
+.taskCard input[type='number'],
+.taskCard textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 4px;
+}
+
+.taskCard textarea {
+  min-height: 80px;
+  margin-bottom: 0.5rem;
+}
+
+.openFormButton {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--primary-color, #007bff);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.openFormButton:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.openFormButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.popupSubmitButton {
+  padding: 0.5rem 1.25rem;
+  background: var(--success-color, #28a745);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.popupSubmitButton:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.popupSubmitButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.approvalButtons {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.approvalButtons button,
+.taskCard button {
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.approvalButtons button:first-child,
+.taskCard button[type='button'] {
+  background: var(--primary-color, #007bff);
+  color: white;
+}
+
+.approvalButtons button:last-of-type:not(:first-child) {
+  background: var(--danger-color, #dc3545);
+  color: white;
+}
+
+.approvalButtons button:disabled,
+.taskCard button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

src/pages/views/automation2/Automation2WorkflowsTasksPage.tsx

@@ -0,0 +1,461 @@
+/**
+ * Automation2WorkflowsTasksPage
+ * Tasks only (no workflow grouping).
+ * Open tasks at top, completed tasks at bottom (expandable, scrollable).
+ * Each task shows workflow, created, due, step, type, and action.
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { FaChevronDown, FaChevronRight, FaSpinner } from 'react-icons/fa';
+import { useInstanceId } from '../../../hooks/useCurrentInstance';
+import { useApiRequest } from '../../../hooks/useApi';
+import {
+  fetchTasks,
+  completeTask,
+  type Automation2Task,
+} from '../../../api/automation2Api';
+import { Popup } from '../../../components/UiComponents/Popup';
+import styles from './Automation2WorkflowsTasks.module.css';
+
+const NODE_TYPE_LABELS: Record<string, string> = {
+  'input.form': 'Formular',
+  'input.approval': 'Genehmigung',
+  'input.upload': 'Upload',
+  'input.comment': 'Kommentar',
+  'input.review': 'Prüfung',
+  'input.selection': 'Auswahl',
+  'input.confirmation': 'Bestätigung',
+};
+
+function formatTimestamp(ts?: number): string {
+  if (ts == null || ts <= 0) return '—';
+  const d = new Date(typeof ts === 'number' && ts < 1e12 ? ts * 1000 : ts);
+  return d.toLocaleString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function getNodeStepLabel(config: Record<string, unknown>): string {
+  const title = config?.title;
+  if (typeof title === 'string' && title.trim()) return title;
+  const label = config?.label;
+  if (typeof label === 'string' && label.trim()) return label;
+  if (typeof label === 'object' && label != null && 'de' in (label as Record<string, string>)) {
+    return (label as Record<string, string>).de ?? (label as Record<string, string>).en ?? '';
+  }
+  return '';
+}
+
+export const Automation2WorkflowsTasksPage: React.FC = () => {
+  const instanceId = useInstanceId();
+  const { request } = useApiRequest();
+  const [tasks, setTasks] = useState<Automation2Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [completedExpanded, setCompletedExpanded] = useState(false);
+  const [submitting, setSubmitting] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    if (!instanceId) return;
+    setLoading(true);
+    try {
+      const taskList = await fetchTasks(request, instanceId);
+      setTasks(taskList);
+    } catch (e) {
+      console.error('[Automation2] load failed', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [instanceId, request]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleComplete = async (taskId: string, result: Record<string, unknown>) => {
+    if (!instanceId) return;
+    setSubmitting(taskId);
+    try {
+      await completeTask(request, instanceId, taskId, result);
+      await load();
+    } catch (e) {
+      console.error('[Automation2] complete failed', e);
+    } finally {
+      setSubmitting(null);
+    }
+  };
+
+  const openTasks = tasks.filter((t) => t.status === 'pending');
+  const completedTasks = tasks.filter((t) => t.status !== 'pending');
+
+  if (!instanceId) {
+    return (
+      <div className={styles.placeholder}>
+        <h2>Tasks</h2>
+        <p>Keine Feature-Instanz gefunden.</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className={styles.loading}>
+        <FaSpinner className={styles.spinner} />
+        <p>Lade Tasks…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <h2>Tasks</h2>
+
+      {/* Open tasks */}
+      <section className={styles.section}>
+        <h3 className={styles.sectionTitle}>
+          Offene Tasks
+          {openTasks.length > 0 && <span className={styles.badge}>{openTasks.length}</span>}
+        </h3>
+        {openTasks.length === 0 ? (
+          <p className={styles.empty}>Keine offenen Tasks</p>
+        ) : (
+          <div className={styles.taskList}>
+            {openTasks.map((task) => (
+              <TaskCard
+                key={task.id}
+                task={task}
+                onSubmit={(result) => handleComplete(task.id, result)}
+                submitting={submitting === task.id}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Completed tasks */}
+      <section className={styles.section}>
+        <button
+          type="button"
+          className={styles.completedHeader}
+          onClick={() => setCompletedExpanded((p) => !p)}
+        >
+          {completedExpanded ? <FaChevronDown /> : <FaChevronRight />}
+          <span>Erledigte Tasks</span>
+          {completedTasks.length > 0 && (
+            <span className={styles.badge}>{completedTasks.length}</span>
+          )}
+        </button>
+        {completedExpanded && (
+          <div className={styles.completedList}>
+            {completedTasks.length === 0 ? (
+              <p className={styles.empty}>Keine erledigten Tasks</p>
+            ) : (
+              completedTasks.map((task) => (
+                <TaskCard
+                  key={task.id}
+                  task={task}
+                  onSubmit={(result) => handleComplete(task.id, result)}
+                  submitting={submitting === task.id}
+                  readOnly
+                />
+              ))
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+};
+
+interface TaskCardProps {
+  task: Automation2Task;
+  onSubmit: (result: Record<string, unknown>) => void;
+  submitting: boolean;
+  readOnly?: boolean;
+}
+
+const TaskCard: React.FC<TaskCardProps> = ({
+  task,
+  onSubmit,
+  submitting,
+  readOnly = false,
+}) => {
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [formPopupOpen, setFormPopupOpen] = useState(false);
+  const config = task.config ?? {};
+  const nodeType = task.nodeType;
+  const stepLabel = getNodeStepLabel(config);
+
+  const renderInput = () => {
+    if (readOnly) return null;
+    switch (nodeType) {
+      case 'input.form': {
+        const fields =
+          (config.fields as Array<{ name: string; type: string; label: string; required?: boolean }>) ??
+          [];
+        const requiredFields = fields.filter((f) => f.required);
+        const allRequiredFilled = requiredFields.every((f) => {
+          const v = formData[f.name];
+          if (f.type === 'boolean') return true;
+          return v !== undefined && v !== null && String(v).trim() !== '';
+        });
+        const formContent = (
+          <div className={styles.formFields}>
+            {fields.map((f) => (
+              <div key={f.name}>
+                <label>
+                  {f.label || f.name}
+                  {f.required && ' *'}
+                </label>
+                {f.type === 'boolean' ? (
+                  <input
+                    type="checkbox"
+                    checked={(formData[f.name] as boolean) ?? false}
+                    onChange={(e) =>
+                      setFormData((p) => ({ ...p, [f.name]: e.target.checked }))
+                    }
+                  />
+                ) : (
+                  <input
+                    type={
+                      f.type === 'number' ? 'number' : f.type === 'date' ? 'date' : 'text'
+                    }
+                    value={(formData[f.name] as string) ?? ''}
+                    onChange={(e) =>
+                      setFormData((p) => ({ ...p, [f.name]: e.target.value }))
+                    }
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        );
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => setFormPopupOpen(true)}
+              disabled={submitting}
+              className={styles.openFormButton}
+            >
+              Formular bearbeiten
+            </button>
+            <Popup
+              isOpen={formPopupOpen}
+              title="Formular ausfüllen"
+              onClose={() => setFormPopupOpen(false)}
+              size="medium"
+              footerContent={
+                <button
+                  type="button"
+                  onClick={() => {
+                    onSubmit(formData);
+                    setFormPopupOpen(false);
+                  }}
+                  disabled={submitting || !allRequiredFilled}
+                  className={styles.popupSubmitButton}
+                >
+                  {submitting ? 'Wird gesendet…' : 'Absenden'}
+                </button>
+              }
+            >
+              {formContent}
+            </Popup>
+          </>
+        );
+      }
+      case 'input.approval':
+        return (
+          <div>
+            {config.title != null && String(config.title) !== '' && <h4>{String(config.title)}</h4>}
+            {config.description != null && String(config.description) !== '' && <p>{String(config.description)}</p>}
+            <div className={styles.approvalButtons}>
+              <button
+                type="button"
+                onClick={() => onSubmit({ approved: true })}
+                disabled={submitting}
+              >
+                Genehmigen
+              </button>
+              <button
+                type="button"
+                onClick={() => onSubmit({ approved: false })}
+                disabled={submitting}
+              >
+                Ablehnen
+              </button>
+            </div>
+          </div>
+        );
+      case 'input.comment':
+        return (
+          <div>
+            <textarea
+              placeholder={(config.placeholder as string) ?? 'Kommentar...'}
+              value={(formData.comment as string) ?? ''}
+              onChange={(e) => setFormData({ comment: e.target.value })}
+            />
+            <button
+              type="button"
+              onClick={() => onSubmit(formData)}
+              disabled={
+                submitting ||
+                ((config.required !== false) && !formData.comment)
+              }
+            >
+              Absenden
+            </button>
+          </div>
+        );
+      case 'input.selection': {
+        const options =
+          (config.options as Array<{ value: string; label: string }>) ?? [];
+        const multiple = config.multiple as boolean;
+        return (
+          <div>
+            {options.map((o) => (
+              <label key={o.value}>
+                <input
+                  type={multiple ? 'checkbox' : 'radio'}
+                  name={task.id}
+                  value={o.value}
+                  onChange={(e) => {
+                    if (multiple) {
+                      const prev = (formData.selected as string[]) ?? [];
+                      const next = e.target.checked
+                        ? [...prev, o.value]
+                        : prev.filter((v) => v !== o.value);
+                      setFormData((p) => ({ ...p, selected: next }));
+                    } else {
+                      setFormData((p) => ({ ...p, selected: o.value }));
+                    }
+                  }}
+                />
+                {o.label || o.value}
+              </label>
+            ))}
+            <button
+              type="button"
+              onClick={() => onSubmit(formData)}
+              disabled={submitting}
+            >
+              Absenden
+            </button>
+          </div>
+        );
+      }
+      case 'input.confirmation':
+        return (
+          <div>
+            <p>{(config.question as string) ?? 'Bestätigen?'}</p>
+            <div className={styles.approvalButtons}>
+              <button
+                type="button"
+                onClick={() => onSubmit({ confirmed: true })}
+                disabled={submitting}
+              >
+                {typeof config.confirmLabel === 'string' ? config.confirmLabel : 'Bestätigen'}
+              </button>
+              <button
+                type="button"
+                onClick={() => onSubmit({ confirmed: false })}
+                disabled={submitting}
+              >
+                {typeof config.rejectLabel === 'string' ? config.rejectLabel : 'Ablehnen'}
+              </button>
+            </div>
+          </div>
+        );
+      case 'input.upload':
+        return (
+          <div>
+            <p>Upload-Komponente – noch nicht implementiert</p>
+            <button
+              type="button"
+              onClick={() => onSubmit({ uploaded: [] })}
+              disabled={submitting}
+            >
+              Platzhalter absenden
+            </button>
+          </div>
+        );
+      case 'input.review':
+        return (
+          <div>
+            <p>Review – Content anzeigen + Feedback</p>
+            <textarea
+              placeholder="Feedback..."
+              value={(formData.feedback as string) ?? ''}
+              onChange={(e) => setFormData({ feedback: e.target.value })}
+            />
+            <button
+              type="button"
+              onClick={() => onSubmit(formData)}
+              disabled={submitting}
+            >
+              Absenden
+            </button>
+          </div>
+        );
+      default:
+        return (
+          <div>
+            <p>Unbekannter Task-Typ: {nodeType}</p>
+            <button
+              type="button"
+              onClick={() => onSubmit({})}
+              disabled={submitting}
+            >
+              Absenden
+            </button>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className={styles.taskCard}>
+      <div className={styles.taskMeta}>
+        <div className={styles.taskMetaRow}>
+          <span className={styles.metaLabel}>Workflow</span>
+          <span className={styles.metaValue}>
+            {task.workflowLabel || task.workflowId || '—'}
+          </span>
+        </div>
+        <div className={styles.taskMetaRow}>
+          <span className={styles.metaLabel}>Erstellt</span>
+          <span className={styles.metaValue}>
+            {formatTimestamp(task.createdAt)}
+          </span>
+        </div>
+        <div className={styles.taskMetaRow}>
+          <span className={styles.metaLabel}>Fällig</span>
+          <span className={styles.metaValue}>
+            {formatTimestamp(task.dueAt)}
+          </span>
+        </div>
+        {stepLabel && (
+          <div className={styles.taskMetaRow}>
+            <span className={styles.metaLabel}>Schritt</span>
+            <span className={styles.metaValue}>{stepLabel}</span>
+          </div>
+        )}
+        <div className={styles.taskMetaRow}>
+          <span className={styles.metaLabel}>Typ</span>
+          <span className={styles.metaValue}>
+            {NODE_TYPE_LABELS[nodeType] ?? nodeType}
+          </span>
+        </div>
+        {task.nodeId && (
+          <div className={styles.taskMetaRow}>
+            <span className={styles.metaLabel}>Node</span>
+            <span className={styles.metaValueMono}>{task.nodeId}</span>
+          </div>
+        )}
+      </div>
+      {renderInput()}
+    </div>
+  );
+};

src/types/mandate.ts

@@ -261,6 +261,16 @@ export const FEATURE_REGISTRY: Record<string, FeatureConfig> = {
       { code: 'logs', label: { de: 'Protokolle', en: 'Logs' }, path: 'logs' },
     ]
   },
+  automation2: {
+    code: 'automation2',
+    label: { de: 'Automation 2', en: 'Automation 2' },
+    icon: 'sitemap',
+    views: [
+      { code: 'editor', label: { de: 'Editor', en: 'Editor' }, path: 'editor' },
+      { code: 'workflows', label: { de: 'Workflows', en: 'Workflows' }, path: 'workflows' },
+      { code: 'workflows-tasks', label: { de: 'Tasks', en: 'Tasks' }, path: 'workflows-tasks' },
+    ]
+  },
   neutralization: {
     code: 'neutralization',
     label: { de: 'Neutralisierung', en: 'Neutralization', fr: 'Neutralisation' },