feat(G): G-RUN/G-CTX/G-WAIT/G-HTTP/G-MAIL/G-CAL/G-DMS/G-SEARCH/G-AGENT/G-CRM/G-EVT/G-WEB — Durable WorkflowRun, 10 step handlers, resume/wait/lock/retry, SSRF protection, frontend step editor

frontend/src/api/workflows.ts

@@ -11,9 +11,23 @@ import type { PaginatedResponse } from './types';
 
 // ── Types ──
 
+export type WorkflowStepType =
+  | 'action'
+  | 'approval'
+  | 'notification'
+  | 'condition'
+  | 'wait'
+  | 'http'
+  | 'mail'
+  | 'calendar'
+  | 'dms'
+  | 'search'
+  | 'agent'
+  | 'crm';
+
 export interface WorkflowStep {
   name: string;
-  type: 'action' | 'approval' | 'notification' | 'condition';
+  type: WorkflowStepType;
   config: Record<string, unknown>;
   description?: string | null;
 }

frontend/src/components/workflows/StepConfigPanel.tsx

@@ -1,21 +1,51 @@
 import React, { useState, useEffect } from 'react';
 import { Select } from '@/components/ui/Select';
 import { Input } from '@/components/ui/Input';
-import type { WorkflowStep } from '@/api/workflows';
+import { Code2, FormInput } from 'lucide-react';
+import type { WorkflowStep, WorkflowStepType } from '@/api/workflows';
 
-const stepTypeOptions = [
+const stepTypeOptions: { value: WorkflowStepType; label: string }[] = [
   { value: 'action', label: 'Action' },
   { value: 'approval', label: 'Approval' },
   { value: 'notification', label: 'Notification' },
   { value: 'condition', label: 'Condition' },
+  { value: 'wait', label: 'Wait / Delay' },
+  { value: 'http', label: 'HTTP Request' },
+  { value: 'mail', label: 'Mail Send' },
+  { value: 'calendar', label: 'Calendar' },
+  { value: 'dms', label: 'DMS' },
+  { value: 'search', label: 'Search' },
+  { value: 'agent', label: 'Agent' },
+  { value: 'crm', label: 'CRM Action' },
 ];
 
-const configHints: Record<string, string> = {
-  action: 'Config keys: action_type, target, params',
-  approval: 'Config keys: approver_role, timeout_hours',
-  notification: 'Config keys: channel, template, recipients',
-  condition: 'Config keys: field, operator, value',
-};
+const httpMethods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map((m) => ({
+  value: m,
+  label: m,
+}));
+
+const calendarActions = [
+  { value: 'create', label: 'Create' },
+  { value: 'update', label: 'Update' },
+  { value: 'delete', label: 'Delete' },
+];
+
+const dmsActions = [
+  { value: 'search', label: 'Search' },
+  { value: 'download', label: 'Download' },
+  { value: 'upload', label: 'Upload' },
+];
+
+const crmActions = [
+  { value: 'create_contact', label: 'Create Contact' },
+  { value: 'update_contact', label: 'Update Contact' },
+  { value: 'create_company', label: 'Create Company' },
+  { value: 'update_company', label: 'Update Company' },
+  { value: 'delete_contact', label: 'Delete Contact' },
+  { value: 'delete_company', label: 'Delete Company' },
+];
+
+type ConfigMode = 'form' | 'json';
 
 export interface StepConfigPanelProps {
   step: WorkflowStep;
@@ -23,6 +53,7 @@ export interface StepConfigPanelProps {
 }
 
 export function StepConfigPanel({ step, onChange }: StepConfigPanelProps) {
+  const [mode, setMode] = useState<ConfigMode>('form');
   const [configText, setConfigText] = useState('');
   const [configError, setConfigError] = useState<string | undefined>(undefined);
 
@@ -31,6 +62,10 @@ export function StepConfigPanel({ step, onChange }: StepConfigPanelProps) {
     setConfigError(undefined);
   }, [step.config]);
 
+  const setConfig = (key: string, value: unknown) => {
+    onChange({ ...step, config: { ...step.config, [key]: value } });
+  };
+
   const handleConfigChange = (value: string) => {
     setConfigText(value);
     try {
@@ -42,6 +77,345 @@ export function StepConfigPanel({ step, onChange }: StepConfigPanelProps) {
     }
   };
 
+  const strVal = (key: string): string => {
+    const v = step.config[key];
+    return typeof v === 'string' ? v : '';
+  };
+
+  const numVal = (key: string): string => {
+    const v = step.config[key];
+    return typeof v === 'number' ? String(v) : '';
+  };
+
+  const boolVal = (key: string): boolean => {
+    const v = step.config[key];
+    return typeof v === 'boolean' ? v : false;
+  };
+
+  const jsonVal = (key: string): string => {
+    const v = step.config[key];
+    if (v === undefined || v === null) return '';
+    return JSON.stringify(v, null, 2);
+  };
+
+  const setJsonField = (key: string, value: string) => {
+    if (!value.trim()) {
+      setConfig(key, {});
+      return;
+    }
+    try {
+      setConfig(key, JSON.parse(value));
+    } catch {
+      // invalid JSON — JsonField shows the error, keep previous value
+    }
+  };
+
+  const renderTypeForm = () => {
+    switch (step.type) {
+      case 'wait':
+        return (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              label="Dauer (Sekunden)"
+              type="number"
+              min={0}
+              value={numVal('duration_seconds')}
+              onChange={(e) =>
+                setConfig(
+                  'duration_seconds',
+                  e.target.value === '' ? undefined : Number(e.target.value)
+                )
+              }
+              placeholder="z.B. 3600"
+            />
+            <Input
+              label="Resume-Zeitpunkt (ISO)"
+              value={strVal('resume_at')}
+              onChange={(e) => setConfig('resume_at', e.target.value || undefined)}
+              placeholder="2026-08-18T09:00:00Z"
+            />
+          </div>
+        );
+      case 'http':
+        return (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Select
+                label="Methode"
+                options={httpMethods}
+                value={strVal('method') || 'GET'}
+                onChange={(e) => setConfig('method', e.target.value)}
+              />
+              <Input
+                label="URL"
+                required
+                value={strVal('url')}
+                onChange={(e) => setConfig('url', e.target.value)}
+                placeholder="https://api.example.com/webhook"
+              />
+            </div>
+            <JsonField
+              label="Headers (JSON)"
+              value={jsonVal('headers')}
+              onChange={(v) => setJsonField('headers', v)}
+            />
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-1">
+                Body
+              </label>
+              <textarea
+                value={strVal('body')}
+                onChange={(e) => setConfig('body', e.target.value)}
+                rows={3}
+                className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
+                placeholder='{"key": "value"}'
+              />
+            </div>
+            <Input
+              label="Timeout (Sekunden)"
+              type="number"
+              min={1}
+              value={numVal('timeout_seconds')}
+              onChange={(e) =>
+                setConfig(
+                  'timeout_seconds',
+                  e.target.value === '' ? undefined : Number(e.target.value)
+                )
+              }
+            />
+          </div>
+        );
+      case 'mail':
+        return (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label="An (E-Mail)"
+                required
+                value={strVal('to')}
+                onChange={(e) => setConfig('to', e.target.value)}
+                placeholder="empfaenger@example.com"
+              />
+              <Input
+                label="Betreff"
+                required
+                value={strVal('subject')}
+                onChange={(e) => setConfig('subject', e.target.value)}
+                placeholder="Betreff"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-1">
+                Body
+              </label>
+              <textarea
+                value={strVal('body')}
+                onChange={(e) => setConfig('body', e.target.value)}
+                rows={4}
+                className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                placeholder="Nachrichtentext"
+              />
+            </div>
+            <Input
+              label="Account-ID (optional)"
+              value={strVal('account_id')}
+              onChange={(e) => setConfig('account_id', e.target.value || undefined)}
+              placeholder="Standard-Konto wenn leer"
+            />
+          </div>
+        );
+      case 'calendar': {
+        const action = strVal('action') || 'create';
+        return (
+          <div className="space-y-4">
+            <Select
+              label="Aktion"
+              options={calendarActions}
+              value={action}
+              onChange={(e) => setConfig('action', e.target.value)}
+            />
+            {(action === 'create' || action === 'update') && (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <Input
+                  label="Titel"
+                  value={strVal('title')}
+                  onChange={(e) => setConfig('title', e.target.value)}
+                  placeholder="Event-Titel"
+                />
+                <Input
+                  label="Start (ISO)"
+                  value={strVal('start')}
+                  onChange={(e) => setConfig('start', e.target.value)}
+                  placeholder="2026-08-18T09:00:00Z"
+                />
+                <Input
+                  label="Ende (ISO)"
+                  value={strVal('end')}
+                  onChange={(e) => setConfig('end', e.target.value)}
+                  placeholder="2026-08-18T10:00:00Z"
+                />
+              </div>
+            )}
+            {(action === 'update' || action === 'delete') && (
+              <Input
+                label="Event-ID"
+                value={strVal('event_id')}
+                onChange={(e) => setConfig('event_id', e.target.value)}
+                placeholder="Event-UUID"
+              />
+            )}
+          </div>
+        );
+      }
+      case 'dms': {
+        const action = strVal('action') || 'search';
+        return (
+          <div className="space-y-4">
+            <Select
+              label="Aktion"
+              options={dmsActions}
+              value={action}
+              onChange={(e) => setConfig('action', e.target.value)}
+            />
+            {action === 'search' && (
+              <Input
+                label="Suchbegriff"
+                value={strVal('query')}
+                onChange={(e) => setConfig('query', e.target.value)}
+                placeholder="Suchbegriff"
+              />
+            )}
+            {action === 'download' && (
+              <Input
+                label="Datei-ID"
+                value={strVal('file_id')}
+                onChange={(e) => setConfig('file_id', e.target.value)}
+                placeholder="Datei-UUID"
+              />
+            )}
+            {action === 'upload' && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label="Dateiname"
+                  value={strVal('file_name')}
+                  onChange={(e) => setConfig('file_name', e.target.value)}
+                  placeholder="datei.pdf"
+                />
+                <Input
+                  label="Inhalt"
+                  value={strVal('content')}
+                  onChange={(e) => setConfig('content', e.target.value)}
+                  placeholder="Dateiinhalt"
+                />
+              </div>
+            )}
+          </div>
+        );
+      }
+      case 'search':
+        return (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Input
+              label="Suchbegriff"
+              required
+              value={strVal('query')}
+              onChange={(e) => setConfig('query', e.target.value)}
+              placeholder="Suchbegriff"
+            />
+            <Input
+              label="Entity-Typ (optional)"
+              value={strVal('entity_type')}
+              onChange={(e) => setConfig('entity_type', e.target.value || undefined)}
+              placeholder="contact, company, file, ..."
+            />
+            <Input
+              label="Limit"
+              type="number"
+              min={1}
+              value={numVal('limit')}
+              onChange={(e) =>
+                setConfig('limit', e.target.value === '' ? undefined : Number(e.target.value))
+              }
+            />
+          </div>
+        );
+      case 'agent':
+        return (
+          <div className="space-y-4">
+            <Input
+              label="Agent-ID"
+              required
+              value={strVal('agent_id')}
+              onChange={(e) => setConfig('agent_id', e.target.value)}
+              placeholder="Agent-UUID"
+            />
+            <JsonField
+              label="Input (JSON)"
+              value={jsonVal('input')}
+              onChange={(v) => setJsonField('input', v)}
+            />
+            <label className="flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={boolVal('wait_for_completion')}
+                onChange={(e) => setConfig('wait_for_completion', e.target.checked)}
+                className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+              />
+              Auf Abschluss warten
+            </label>
+          </div>
+        );
+      case 'crm': {
+        const action = strVal('action') || 'create_contact';
+        return (
+          <div className="space-y-4">
+            <Select
+              label="Aktion"
+              options={crmActions}
+              value={action}
+              onChange={(e) => setConfig('action', e.target.value)}
+            />
+            {(action.includes('update') || action.includes('delete')) && (
+              <Input
+                label="Entity-ID"
+                value={strVal('entity_id')}
+                onChange={(e) => setConfig('entity_id', e.target.value)}
+                placeholder="Entity-UUID"
+              />
+            )}
+            {(action.includes('create') || action.includes('update')) && (
+              <JsonField
+                label="Daten (JSON)"
+                value={jsonVal('data')}
+                onChange={(v) => setJsonField('data', v)}
+              />
+            )}
+          </div>
+        );
+      }
+      default:
+        return (
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1">
+              Konfiguration (JSON)
+            </label>
+            <textarea
+              value={configText}
+              onChange={(e) => handleConfigChange(e.target.value)}
+              rows={5}
+              className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
+              placeholder='{"key": "value"}'
+            />
+            {configError && (
+              <p className="mt-1 text-sm text-danger-600" role="alert">
+                {configError}
+              </p>
+            )}
+          </div>
+        );
+    }
+  };
+
   return (
     <div className="space-y-4 rounded-lg border border-secondary-200 p-4 bg-secondary-50">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -57,7 +431,7 @@ export function StepConfigPanel({ step, onChange }: StepConfigPanelProps) {
           options={stepTypeOptions}
           value={step.type}
           onChange={(e) =>
-            onChange({ ...step, type: e.target.value as WorkflowStep['type'] })
+            onChange({ ...step, type: e.target.value as WorkflowStepType })
           }
         />
       </div>
@@ -68,37 +442,114 @@ export function StepConfigPanel({ step, onChange }: StepConfigPanelProps) {
         </label>
         <textarea
           value={step.description ?? ''}
-          onChange={(e) =>
-            onChange({ ...step, description: e.target.value || null })
-          }
+          onChange={(e) => onChange({ ...step, description: e.target.value || null })}
           rows={2}
           className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
           placeholder="Optionale Beschreibung"
         />
       </div>
 
-      <div>
-        <label className="block text-sm font-medium text-secondary-700 mb-1">
-          Konfiguration (JSON)
-        </label>
-        {step.type && configHints[step.type] && (
-          <p className="text-xs text-secondary-400 mb-1">
-            {configHints[step.type]}
-          </p>
-        )}
-        <textarea
-          value={configText}
-          onChange={(e) => handleConfigChange(e.target.value)}
-          rows={5}
-          className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
-          placeholder='{"key": "value"}'
-        />
-        {configError && (
-          <p className="mt-1 text-sm text-danger-600" role="alert">
-            {configError}
-          </p>
-        )}
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium text-secondary-700">Konfiguration</label>
+        <div className="flex items-center gap-1 rounded-md border border-secondary-200 bg-white p-0.5">
+          <button
+            type="button"
+            onClick={() => setMode('form')}
+            className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium ${
+              mode === 'form'
+                ? 'bg-primary-600 text-white'
+                : 'text-secondary-600 hover:bg-secondary-100'
+            }`}
+            aria-pressed={mode === 'form'}
+          >
+            <FormInput className="h-3.5 w-3.5" /> Formular
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode('json')}
+            className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium ${
+              mode === 'json'
+                ? 'bg-primary-600 text-white'
+                : 'text-secondary-600 hover:bg-secondary-100'
+            }`}
+            aria-pressed={mode === 'json'}
+          >
+            <Code2 className="h-3.5 w-3.5" /> JSON
+          </button>
+        </div>
       </div>
+
+      {mode === 'form' ? (
+        renderTypeForm()
+      ) : (
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            Konfiguration (JSON)
+          </label>
+          <textarea
+            value={configText}
+            onChange={(e) => handleConfigChange(e.target.value)}
+            rows={5}
+            className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
+            placeholder='{"key": "value"}'
+          />
+          {configError && (
+            <p className="mt-1 text-sm text-danger-600" role="alert">
+              {configError}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface JsonFieldProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+function JsonField({ label, value, onChange }: JsonFieldProps) {
+  const [text, setText] = useState(value);
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    setText(value);
+    setError(undefined);
+  }, [value]);
+
+  const handleChange = (v: string) => {
+    setText(v);
+    if (!v.trim()) {
+      setError(undefined);
+      onChange('{}');
+      return;
+    }
+    try {
+      JSON.parse(v);
+      setError(undefined);
+      onChange(v);
+    } catch {
+      setError('Ungültiges JSON');
+    }
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-secondary-700 mb-1">{label}</label>
+      <textarea
+        value={text}
+        onChange={(e) => handleChange(e.target.value)}
+        rows={3}
+        className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
+        placeholder='{"key": "value"}'
+      />
+      {error && (
+        <p className="mt-1 text-sm text-danger-600" role="alert">
+          {error}
+        </p>
+      )}
     </div>
   );
 }

frontend/src/components/workflows/WorkflowEditor.tsx

@@ -12,8 +12,8 @@ import {
   useCreateWorkflow,
   useUpdateWorkflow,
 } from '@/api/workflows';
-import type { Workflow, WorkflowStep, WorkflowCreateInput, WorkflowUpdateInput } from '@/api/workflows';
-import { ArrowUp, ArrowDown, Plus, Trash2 } from 'lucide-react';
+import type { Workflow, WorkflowStep, WorkflowStepType, WorkflowCreateInput, WorkflowUpdateInput } from '@/api/workflows';
+import { ArrowUp, ArrowDown, Plus, Trash2, Code2, FormInput, LayoutTemplate } from 'lucide-react';
 
 const triggerEventOptions = [
   { value: '', label: '— Kein Trigger —' },
@@ -51,6 +51,101 @@ const emptyForm: EditorFormState = {
   steps: [],
 };
 
+interface WorkflowTemplate {
+  id: string;
+  name: string;
+  description: string;
+  form: EditorFormState;
+}
+
+const templates: WorkflowTemplate[] = [
+  {
+    id: 'welcome-email',
+    name: 'Welcome Email',
+    description: 'Sendet eine Willkommens-Mail an neue Kontakte.',
+    form: {
+      name: 'Welcome Email',
+      description: 'Sendet eine Willkommens-Mail an neue Kontakte.',
+      trigger_event: 'contact.created',
+      is_active: true,
+      steps: [
+        {
+          name: 'Willkommens-Mail senden',
+          type: 'mail',
+          config: {
+            to: '{{contact.email}}',
+            subject: 'Willkommen bei uns!',
+            body: 'Hallo {{contact.first_name}}, willkommen bei unserem Unternehmen!',
+          },
+          description: 'Sendet die Willkommens-Mail an den neuen Kontakt.',
+        },
+      ],
+    },
+  },
+  {
+    id: 'contact-follow-up',
+    name: 'Contact Follow-Up',
+    description: 'Wartet 3 Tage und sendet dann ein Follow-Up.',
+    form: {
+      name: 'Contact Follow-Up',
+      description: 'Wartet 3 Tage und sendet dann ein Follow-Up.',
+      trigger_event: 'contact.created',
+      is_active: true,
+      steps: [
+        {
+          name: '3 Tage warten',
+          type: 'wait',
+          config: { duration_seconds: 259200 },
+          description: 'Wartet 3 Tage nach Kontakterstellung.',
+        },
+        {
+          name: 'Follow-Up senden',
+          type: 'mail',
+          config: {
+            to: '{{contact.email}}',
+            subject: 'Wie können wir helfen?',
+            body: 'Hallo {{contact.first_name}}, wir wollten nachfragen, ob wir helfen können.',
+          },
+          description: 'Sendet das Follow-Up an den Kontakt.',
+        },
+      ],
+    },
+  },
+  {
+    id: 'approval-chain',
+    name: 'Approval Chain',
+    description: 'Deal-Genehmigung mit zweistufiger Freigabe.',
+    form: {
+      name: 'Approval Chain',
+      description: 'Deal-Genehmigung mit zweistufiger Freigabe.',
+      trigger_event: 'deal.stage_changed',
+      is_active: true,
+      steps: [
+        {
+          name: 'Vertriebsleiter-Genehmigung',
+          type: 'approval',
+          config: { approver_role: 'sales_manager', timeout_hours: 24 },
+          description: 'Erste Freigabe durch den Vertriebsleiter.',
+        },
+        {
+          name: 'Geschäftsführer-Genehmigung',
+          type: 'approval',
+          config: { approver_role: 'ceo', timeout_hours: 48 },
+          description: 'Zweite Freigabe durch die Geschäftsführung.',
+        },
+        {
+          name: 'Bestätigungs-Mail',
+          type: 'notification',
+          config: { channel: 'email', template: 'deal_approved', recipients: '{{deal.owner_email}}' },
+          description: 'Benachrichtigt den Deal-Owner über die Freigabe.',
+        },
+      ],
+    },
+  },
+];
+
+type EditorMode = 'form' | 'json';
+
 export interface WorkflowEditorProps {
   open: boolean;
   workflow?: Workflow | null;
@@ -65,6 +160,10 @@ export function WorkflowEditor({ open, workflow, onClose }: WorkflowEditorProps)
 
   const isEdit = !!workflow;
   const [form, setForm] = useState<EditorFormState>(emptyForm);
+  const [mode, setMode] = useState<EditorMode>('form');
+  const [jsonText, setJsonText] = useState('');
+  const [jsonError, setJsonError] = useState<string | undefined>(undefined);
+  const [showTemplates, setShowTemplates] = useState(false);
 
   useEffect(() => {
     if (open) {
@@ -86,9 +185,17 @@ export function WorkflowEditor({ open, workflow, onClose }: WorkflowEditorProps)
       } else {
         setForm({ ...emptyForm });
       }
+      setMode('form');
+      setShowTemplates(false);
+      setJsonError(undefined);
     }
   }, [open, workflow]);
 
+  useEffect(() => {
+    setJsonText(JSON.stringify(form, null, 2));
+    setJsonError(undefined);
+  }, [form]);
+
   const updateField = <K extends keyof EditorFormState>(
     key: K,
     value: EditorFormState[K]
@@ -125,6 +232,65 @@ export function WorkflowEditor({ open, workflow, onClose }: WorkflowEditorProps)
     });
   };
 
+  const applyTemplate = (template: WorkflowTemplate) => {
+    setForm({
+      name: template.form.name,
+      description: template.form.description,
+      trigger_event: template.form.trigger_event,
+      is_active: template.form.is_active,
+      steps: template.form.steps.map((s) => ({ ...s, config: { ...s.config } })),
+    });
+    setShowTemplates(false);
+  };
+
+  const handleJsonChange = (value: string) => {
+    setJsonText(value);
+    try {
+      const parsed = JSON.parse(value) as EditorFormState;
+      if (!Array.isArray(parsed.steps)) {
+        setJsonError('steps muss ein Array sein');
+        return;
+      }
+      setJsonError(undefined);
+      setForm(parsed);
+    } catch {
+      setJsonError('Ungültiges JSON');
+    }
+  };
+
+  const requiredConfigFields: Partial<Record<WorkflowStepType, string[]>> = {
+    wait: ['duration_seconds'],
+    http: ['url'],
+    mail: ['to', 'subject'],
+    calendar: ['action'],
+    dms: ['action'],
+    search: ['query'],
+    agent: ['agent_id'],
+    crm: ['action'],
+  };
+
+  const validateSteps = (steps: WorkflowStep[]): string | null => {
+    if (steps.length === 0) {
+      return 'Mindestens ein Schritt ist erforderlich';
+    }
+    for (let i = 0; i < steps.length; i++) {
+      const s = steps[i];
+      if (!s.name.trim()) {
+        return `Schritt ${i + 1}: Name ist erforderlich`;
+      }
+      const required = requiredConfigFields[s.type];
+      if (required) {
+        for (const field of required) {
+          const v = s.config[field];
+          if (v === undefined || v === null || v === '') {
+            return `Schritt ${i + 1} (${s.type}): Feld "${field}" ist erforderlich`;
+          }
+        }
+      }
+    }
+    return null;
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -133,14 +299,9 @@ export function WorkflowEditor({ open, workflow, onClose }: WorkflowEditorProps)
       return;
     }
 
-    if (form.steps.length === 0) {
-      toast.error('Mindestens ein Schritt ist erforderlich');
-      return;
-    }
-
-    const hasEmptyStepName = form.steps.some((s) => !s.name.trim());
-    if (hasEmptyStepName) {
-      toast.error('Alle Schritte muessen einen Namen haben');
+    const stepError = validateSteps(form.steps);
+    if (stepError) {
+      toast.error(stepError);
       return;
     }
 
@@ -192,108 +353,197 @@ export function WorkflowEditor({ open, workflow, onClose }: WorkflowEditorProps)
       size="xl"
     >
       <form onSubmit={handleSubmit} className="space-y-6">
-        <div className="grid grid-cols-1 gap-4">
-          <Input
-            label="Name"
-            required
-            value={form.name}
-            onChange={(e) => updateField('name', e.target.value)}
-            placeholder="z.B. Deal-Genehmigungsprozess"
-          />
-          <div>
-            <label className="block text-sm font-medium text-secondary-700 mb-1">
-              Beschreibung
-            </label>
-            <textarea
-              value={form.description}
-              onChange={(e) => updateField('description', e.target.value)}
-              rows={2}
-              className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
-              placeholder="Optionale Beschreibung"
-            />
+        {/* Mode toggle + template gallery */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {!isEdit && (
+              <Button
+                size="sm"
+                variant="ghost"
+                type="button"
+                onClick={() => setShowTemplates((v) => !v)}
+                icon={<LayoutTemplate className="h-4 w-4" />}
+              >
+                Vorlagen
+              </Button>
+            )}
+          </div>
+          <div className="flex items-center gap-1 rounded-md border border-secondary-200 bg-white p-0.5">
+            <button
+              type="button"
+              onClick={() => setMode('form')}
+              className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium ${
+                mode === 'form'
+                  ? 'bg-primary-600 text-white'
+                  : 'text-secondary-600 hover:bg-secondary-100'
+              }`}
+              aria-pressed={mode === 'form'}
+            >
+              <FormInput className="h-3.5 w-3.5" /> Formular
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode('json')}
+              className={`inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium ${
+                mode === 'json'
+                  ? 'bg-primary-600 text-white'
+                  : 'text-secondary-600 hover:bg-secondary-100'
+              }`}
+              aria-pressed={mode === 'json'}
+            >
+              <Code2 className="h-3.5 w-3.5" /> JSON Expert
+            </button>
           </div>
-          <Select
-            label="Trigger-Event"
-            options={triggerEventOptions}
-            value={form.trigger_event}
-            onChange={(e) => updateField('trigger_event', e.target.value)}
-          />
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="checkbox"
-              checked={form.is_active}
-              onChange={(e) => updateField('is_active', e.target.checked)}
-              className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
-            />
-            Aktiv
-          </label>
         </div>
 
-        {/* Steps section */}
-        <div>
-          <div className="flex items-center justify-between mb-3">
-            <label className="text-sm font-medium text-secondary-700">
-              Schritte
-            </label>
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={addStep}
-              type="button"
-              icon={<Plus className="h-4 w-4" />}
-            >
-              Schritt hinzufuegen
-            </Button>
-          </div>
-          {form.steps.length === 0 && (
-            <p className="text-sm text-secondary-400 italic">
-              Keine Schritte definiert. Klicke auf Schritt hinzufuegen.
-            </p>
-          )}
-          <div className="space-y-4">
-            {form.steps.map((step, i) => (
-              <div key={i} className="relative">
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-xs font-medium text-secondary-500">
-                    Schritt {i + 1}
-                  </span>
-                  <div className="flex items-center gap-1">
-                    <button
-                      type="button"
-                      onClick={() => moveStep(i, 'up')}
-                      disabled={i === 0}
-                      className="text-secondary-400 hover:text-secondary-700 disabled:opacity-30 p-1"
-                      aria-label="Nach oben"
-                    >
-                      <ArrowUp className="h-4 w-4" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => moveStep(i, 'down')}
-                      disabled={i === form.steps.length - 1}
-                      className="text-secondary-400 hover:text-secondary-700 disabled:opacity-30 p-1"
-                      aria-label="Nach unten"
-                    >
-                      <ArrowDown className="h-4 w-4" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => removeStep(i)}
-                      className="text-danger-500 hover:text-danger-700 p-1"
-                      aria-label="Schritt entfernen"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </button>
-                  </div>
-                </div>
-                <StepConfigPanel
-                  step={step}
-                  onChange={(updated) => updateStep(i, updated)}
-                />
-              </div>
+        {/* Template gallery */}
+        {showTemplates && !isEdit && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            {templates.map((template) => (
+              <button
+                key={template.id}
+                type="button"
+                onClick={() => applyTemplate(template)}
+                className="rounded-lg border border-secondary-200 bg-secondary-50 p-4 text-left hover:border-primary-500 hover:bg-primary-50 transition-colors"
+              >
+                <span className="block text-sm font-medium text-secondary-800">
+                  {template.name}
+                </span>
+                <span className="mt-1 block text-xs text-secondary-500">
+                  {template.description}
+                </span>
+                <span className="mt-2 block text-xs text-primary-600 font-medium">
+                  {template.form.steps.length} Schritte
+                </span>
+              </button>
             ))}
           </div>
-        </div>
+        )}
+
+        {mode === 'form' ? (
+          <>
+            <div className="grid grid-cols-1 gap-4">
+              <Input
+                label="Name"
+                required
+                value={form.name}
+                onChange={(e) => updateField('name', e.target.value)}
+                placeholder="z.B. Deal-Genehmigungsprozess"
+              />
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 mb-1">
+                  Beschreibung
+                </label>
+                <textarea
+                  value={form.description}
+                  onChange={(e) => updateField('description', e.target.value)}
+                  rows={2}
+                  className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  placeholder="Optionale Beschreibung"
+                />
+              </div>
+              <Select
+                label="Trigger-Event"
+                options={triggerEventOptions}
+                value={form.trigger_event}
+                onChange={(e) => updateField('trigger_event', e.target.value)}
+              />
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={form.is_active}
+                  onChange={(e) => updateField('is_active', e.target.checked)}
+                  className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+                />
+                Aktiv
+              </label>
+            </div>
+
+            {/* Steps section */}
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <label className="text-sm font-medium text-secondary-700">
+                  Schritte
+                </label>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={addStep}
+                  type="button"
+                  icon={<Plus className="h-4 w-4" />}
+                >
+                  Schritt hinzufuegen
+                </Button>
+              </div>
+              {form.steps.length === 0 && (
+                <p className="text-sm text-secondary-400 italic">
+                  Keine Schritte definiert. Klicke auf Schritt hinzufuegen.
+                </p>
+              )}
+              <div className="space-y-4">
+                {form.steps.map((step, i) => (
+                  <div key={i} className="relative">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-medium text-secondary-500">
+                        Schritt {i + 1}
+                      </span>
+                      <div className="flex items-center gap-1">
+                        <button
+                          type="button"
+                          onClick={() => moveStep(i, 'up')}
+                          disabled={i === 0}
+                          className="text-secondary-400 hover:text-secondary-700 disabled:opacity-30 p-1"
+                          aria-label="Nach oben"
+                        >
+                          <ArrowUp className="h-4 w-4" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => moveStep(i, 'down')}
+                          disabled={i === form.steps.length - 1}
+                          className="text-secondary-400 hover:text-secondary-700 disabled:opacity-30 p-1"
+                          aria-label="Nach unten"
+                        >
+                          <ArrowDown className="h-4 w-4" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => removeStep(i)}
+                          className="text-danger-500 hover:text-danger-700 p-1"
+                          aria-label="Schritt entfernen"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </div>
+                    <StepConfigPanel
+                      step={step}
+                      onChange={(updated) => updateStep(i, updated)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </>
+        ) : (
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1">
+              Workflow (JSON)
+            </label>
+            <textarea
+              value={jsonText}
+              onChange={(e) => handleJsonChange(e.target.value)}
+              rows={18}
+              className="w-full rounded-lg border border-secondary-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
+              placeholder='{"name": "...", "steps": [...]}'
+            />
+            {jsonError && (
+              <p className="mt-1 text-sm text-danger-600" role="alert">
+                {jsonError}
+              </p>
+            )}
+          </div>
+        )}
 
         <div className="flex justify-end gap-3 pt-4 border-t border-secondary-200">
           <Button variant="secondary" onClick={onClose} type="button">