Merge pull request #47 from valueonag/int

Int

src/api/trusteeApi.ts

@@ -115,6 +115,7 @@ export interface AccountingConnectorInfo {
     secret: boolean;
     required: boolean;
     placeholder?: string;
+    suggestions?: string[];
   }>;
 }
 

src/api/workflowApi.ts

@@ -392,6 +392,108 @@ export async function deleteWorkflow(
   });
 }
 
+// -------------------------------------------------------------------------
+// Workflow file IO (envelopeVersioned, .workflow.json)
+// -------------------------------------------------------------------------
+
+/** envelopeVersioned schema 1.0 — keys mirror the gateway constants. */
+export const WORKFLOW_FILE_SCHEMA_VERSION = '1.0';
+export const WORKFLOW_FILE_KIND = 'poweron.workflow';
+export const WORKFLOW_FILE_EXTENSION = '.workflow.json';
+
+export interface WorkflowFileEnvelope {
+  $schemaVersion: string;
+  $kind: string;
+  $exportedAt?: string;
+  $gatewayVersion?: string;
+  label: string;
+  description?: string;
+  tags?: string[];
+  templateScope?: AutoTemplateScope;
+  sharedReadOnly?: boolean;
+  notifyOnFailure?: boolean;
+  graph: Automation2Graph;
+  invocations?: WorkflowEntryPoint[];
+}
+
+export interface ImportWorkflowResponse {
+  workflow: AutoWorkflow;
+  warnings: string[];
+  created: boolean;
+}
+
+export interface ImportWorkflowOptions {
+  /** Inline envelope payload (preferred for round-trip in the editor). */
+  envelope?: WorkflowFileEnvelope;
+  /** UDB FileItem.id of a previously uploaded ``.workflow.json``. */
+  fileId?: string;
+  /** When set, the existing workflow is replaced instead of a new one being created. */
+  existingWorkflowId?: string;
+}
+
+/** POST /api/workflows/{instanceId}/workflows/import */
+export async function importWorkflowFromFile(
+  request: ApiRequestFunction,
+  instanceId: string,
+  options: ImportWorkflowOptions,
+): Promise<ImportWorkflowResponse> {
+  if (!options.envelope && !options.fileId) {
+    throw new Error('importWorkflowFromFile: either envelope or fileId is required');
+  }
+  return await request({
+    url: `/api/workflows/${instanceId}/workflows/import`,
+    method: 'post',
+    data: options,
+  });
+}
+
+export interface ExportWorkflowResult {
+  fileName: string;
+  envelope: WorkflowFileEnvelope;
+}
+
+/**
+ * GET /api/workflows/{instanceId}/workflows/{workflowId}/export
+ *
+ * The backend returns ``{ fileName, envelope }`` when ``download=false`` and a
+ * raw JSON download (``Content-Disposition: attachment``) when ``download=true``.
+ * For programmatic use (e.g. re-uploading to UDB) keep download=false.
+ */
+export async function exportWorkflowToFile(
+  request: ApiRequestFunction,
+  instanceId: string,
+  workflowId: string,
+  download = false,
+): Promise<ExportWorkflowResult> {
+  return await request({
+    url: `/api/workflows/${instanceId}/workflows/${workflowId}/export`,
+    method: 'get',
+    params: { download },
+  });
+}
+
+/** Quick content-sniffing — used by the UDB FilesTab to flag workflow files. */
+export function isWorkflowFileContent(payload: unknown): boolean {
+  if (!payload || typeof payload !== 'object') return false;
+  const p = payload as Record<string, unknown>;
+  return (
+    typeof p.$schemaVersion === 'string' &&
+    p.$kind === WORKFLOW_FILE_KIND &&
+    !!p.graph &&
+    typeof p.graph === 'object'
+  );
+}
+
+/** Suggest a safe filename from the workflow label (mirrors gateway buildFileName). */
+export function workflowFileNameFor(label: string): string {
+  const slug = (label || 'workflow')
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80) || 'workflow';
+  return `${slug}${WORKFLOW_FILE_EXTENSION}`;
+}
+
 /** Delete by workflow ID only (Automations dashboard / orphan rows without featureInstanceId). */
 export async function deleteSystemWorkflow(
   request: ApiRequestFunction,

src/components/FlowEditor/editor/Automation2FlowEditor.tsx

@@ -275,14 +275,35 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
         } else {
           applyGraphWithSync({ nodes: [], connections: [] }, wf.invocations);
         }
+        setWorkflows((prev) => {
+          const idx = prev.findIndex((w) => w.id === workflowId);
+          if (idx === -1) return [...prev, wf];
+          const next = prev.slice();
+          next[idx] = { ...prev[idx], ...wf };
+          return next;
+        });
       } catch (err: unknown) {
+        const status = (err as { response?: { status?: number } })?.response?.status;
+        if (status === 404) {
+          setWorkflows((prev) => prev.filter((w) => w.id !== workflowId));
+          setCurrentWorkflowId((prev) => (prev === workflowId ? null : prev));
+          setExecuteResult(null);
+          applyGraphWithSync({ nodes: [], connections: [] }, _buildDefaultInvocations(t('Jetzt ausführen')));
+          try {
+            const result = await fetchWorkflows(request, instanceId);
+            setWorkflows(Array.isArray(result) ? result : result.items);
+          } catch (refreshErr) {
+            console.error(`${LOG} workflows refresh failed`, refreshErr);
+          }
+          return;
+        }
         setExecuteResult({
           success: false,
           error: err instanceof Error ? err.message : String(err),
         });
       }
     },
-    [request, instanceId, handleFromApiGraph, applyGraphWithSync]
+    [request, instanceId, handleFromApiGraph, applyGraphWithSync, t]
   );
 
   const handleWorkflowSelect = useCallback(

src/components/FlowEditor/nodes/frontendTypeRenderers/index.tsx

@@ -153,15 +153,23 @@ const HiddenInput: React.FC<FieldRendererProps> = () => null;
 const ConnectionPicker: React.FC<FieldRendererProps> = ({ param, value, onChange, instanceId, request }) => {
   const { t } = useLanguage();
   const [connections, setConnections] = React.useState<Array<{ id: string; label: string }>>([]);
+  const [loadError, setLoadError] = React.useState<string | null>(null);
+  const authority = (param.frontendOptions?.authority as string | undefined) || undefined;
   React.useEffect(() => {
     if (!instanceId || !request) return;
-    request({ url: `/api/graphicalEditor/${instanceId}/options/user.connection`, method: 'get' })
+    const qs = authority ? `?authority=${encodeURIComponent(authority)}` : '';
+    setLoadError(null);
+    request({ url: `/api/workflows/${instanceId}/options/user.connection${qs}`, method: 'get' })
       .then((res: unknown) => {
         const data = res as { options?: Array<{ value: string; label: string }> };
         setConnections((data?.options || []).map((o) => ({ id: o.value, label: o.label })));
       })
-      .catch(() => {});
+      .catch((err: unknown) => {
-  }, [instanceId, request]);
+        console.error('ConnectionPicker: failed to load connections', err);
+        setConnections([]);
+        setLoadError(err instanceof Error ? err.message : String(err));
+      });
+  }, [instanceId, request, authority]);
   return (
     <div style={{ marginBottom: 8 }}>
       <label style={{ display: 'block', fontSize: 12, marginBottom: 2 }}>{param.description || param.name}</label>
@@ -175,6 +183,16 @@ const ConnectionPicker: React.FC<FieldRendererProps> = ({ param, value, onChange
           <option key={c.id} value={c.id}>{c.label}</option>
         ))}
       </select>
+      {!loadError && connections.length === 0 && (
+        <div style={{ fontSize: 11, color: '#888', marginTop: 2 }}>
+          {authority
+            ? t('Keine {authority}-Verbindung gefunden — Verbindung in den Account-Einstellungen anlegen.', { authority })
+            : t('Keine Verbindung gefunden — Verbindung in den Account-Einstellungen anlegen.')}
+        </div>
+      )}
+      {loadError && (
+        <div style={{ fontSize: 11, color: '#c00', marginTop: 2 }}>{t('Verbindungen konnten nicht geladen werden')}</div>
+      )}
     </div>
   );
 };
@@ -199,6 +217,205 @@ const FolderPicker: React.FC<FieldRendererProps> = ({ param, value, onChange, al
   );
 };
 
+type SharepointSiteOption = { type: 'site'; value: string; label: string; siteId: string; path: string; webUrl?: string };
+type SharepointItemOption = { type: 'folder' | 'file'; value: string; label: string; path: string; siteId: string };
+
+const SharepointPathPicker: React.FC<FieldRendererProps> = ({ param, value, onChange, allParams, request }) => {
+  const { t } = useLanguage();
+  const isFilePicker = param.frontendType === 'sharepointFile';
+  const dependsOn = (param.frontendOptions?.dependsOn as string | undefined) || 'connectionReference';
+  const connectionReference = (allParams?.[dependsOn] as string | undefined) || '';
+  const hasConnection = !!connectionReference;
+
+  const [open, setOpen] = React.useState(false);
+  const [sites, setSites] = React.useState<SharepointSiteOption[]>([]);
+  const [selectedSite, setSelectedSite] = React.useState<SharepointSiteOption | null>(null);
+  const [currentPath, setCurrentPath] = React.useState('');
+  const [items, setItems] = React.useState<SharepointItemOption[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const loadSites = React.useCallback(async () => {
+    if (!request || !connectionReference) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = (await request({
+        url: `/api/sharepoint/folder-options?connectionReference=${encodeURIComponent(connectionReference)}`,
+        method: 'get',
+      })) as SharepointSiteOption[] | null;
+      setSites(Array.isArray(res) ? res : []);
+    } catch (err: unknown) {
+      console.error('SharepointPathPicker: failed to load sites', err);
+      setSites([]);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [request, connectionReference]);
+
+  const loadItems = React.useCallback(async (site: SharepointSiteOption, path: string) => {
+    if (!request) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams({ connectionReference, siteId: site.siteId });
+      if (path) params.append('path', path);
+      if (isFilePicker) params.append('includeFiles', 'true');
+      const res = (await request({
+        url: `/api/sharepoint/folder-options?${params.toString()}`,
+        method: 'get',
+      })) as SharepointItemOption[] | null;
+      setItems(Array.isArray(res) ? res : []);
+    } catch (err: unknown) {
+      console.error('SharepointPathPicker: failed to load items', err);
+      setItems([]);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [request, connectionReference, isFilePicker]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    if (sites.length === 0 && !loading) loadSites();
+  }, [open, sites.length, loading, loadSites]);
+
+  React.useEffect(() => {
+    if (selectedSite) {
+      setCurrentPath('');
+      loadItems(selectedSite, '');
+    } else {
+      setItems([]);
+    }
+  }, [selectedSite, loadItems]);
+
+  const navigateInto = (item: SharepointItemOption) => {
+    if (item.type !== 'folder' || !selectedSite) return;
+    setCurrentPath(item.path);
+    loadItems(selectedSite, item.path);
+  };
+
+  const goUp = () => {
+    if (!selectedSite || !currentPath) return;
+    const parts = currentPath.split('/');
+    parts.pop();
+    const parent = parts.join('/');
+    setCurrentPath(parent);
+    loadItems(selectedSite, parent);
+  };
+
+  const buildFullPath = (sub: string) => {
+    const sitePath = (selectedSite?.path || '').replace(/\/+$/, '');
+    const cleanSub = sub.replace(/^\/+/, '');
+    if (!sitePath) return `/${cleanSub}`;
+    if (!cleanSub) return sitePath;
+    return `${sitePath}/${cleanSub}`;
+  };
+
+  const pickCurrentFolder = () => {
+    if (!selectedSite) return;
+    const fullPath = buildFullPath(currentPath);
+    onChange(fullPath);
+    setOpen(false);
+  };
+
+  const pickItem = (item: SharepointItemOption) => {
+    if (!selectedSite) return;
+    const fullPath = buildFullPath(item.path);
+    onChange(fullPath);
+    if (item.type === 'file') setOpen(false);
+  };
+
+  return (
+    <div style={{ marginBottom: 8 }}>
+      <label style={{ display: 'block', fontSize: 12, marginBottom: 2 }}>{param.description || param.name}</label>
+      <div style={{ display: 'flex', gap: 4 }}>
+        <input
+          type="text"
+          value={typeof value === 'string' ? value : ''}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={!hasConnection}
+          placeholder={hasConnection ? (isFilePicker ? t('SharePoint-Dateipfad') : t('SharePoint-Ordnerpfad')) : t('Zuerst {field} wählen', { field: dependsOn })}
+          style={{ flex: 1, padding: '4px 8px', borderRadius: 4, border: '1px solid #ccc', opacity: hasConnection ? 1 : 0.5 }}
+        />
+        <button
+          type="button"
+          disabled={!hasConnection}
+          onClick={() => setOpen((o) => !o)}
+          title={t('In SharePoint browsen')}
+          style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #0078D4', background: open ? '#0078D4' : '#fff', color: open ? '#fff' : '#0078D4', cursor: hasConnection ? 'pointer' : 'not-allowed', opacity: hasConnection ? 1 : 0.5 }}
+        >
+          {open ? t('Schliessen') : t('Browsen')}
+        </button>
+      </div>
+
+      {open && hasConnection && (
+        <div style={{ marginTop: 6, border: '1px solid #ddd', borderRadius: 4, padding: 6, background: '#fafafa' }}>
+          {error && <div style={{ fontSize: 11, color: '#c00', marginBottom: 4 }}>{error}</div>}
+          <div style={{ display: 'flex', gap: 4, alignItems: 'center', marginBottom: 4 }}>
+            <span style={{ fontSize: 11, color: '#555' }}>{t('Seite:')}</span>
+            <select
+              value={selectedSite?.siteId || ''}
+              onChange={(e) => {
+                const s = sites.find((x) => x.siteId === e.target.value) || null;
+                setSelectedSite(s);
+              }}
+              style={{ flex: 1, padding: '2px 4px', borderRadius: 4, border: '1px solid #ccc', fontSize: 12 }}
+            >
+              <option value="">{loading && sites.length === 0 ? t('Lade Seiten') : t('Seite wählen')}</option>
+              {sites.map((s) => (
+                <option key={s.siteId} value={s.siteId}>{s.label}</option>
+              ))}
+            </select>
+            <button type="button" onClick={loadSites} title={t('Seiten neu laden')} style={{ padding: '2px 6px', borderRadius: 4, border: '1px solid #ccc', background: '#fff', cursor: 'pointer', fontSize: 11 }}>↻</button>
+          </div>
+
+          {selectedSite && (
+            <>
+              <div style={{ fontSize: 11, color: '#555', marginBottom: 4 }}>
+                <strong>{t('Pfad:')}</strong> {selectedSite.path}/{currentPath || <em>{t('(Stammverzeichnis)')}</em>}
+              </div>
+              <div style={{ display: 'flex', gap: 4, marginBottom: 4, flexWrap: 'wrap' }}>
+                {currentPath && (
+                  <button type="button" onClick={goUp} style={{ padding: '2px 6px', borderRadius: 4, border: '1px solid #ccc', background: '#fff', cursor: 'pointer', fontSize: 11 }}>↑ {t('Hoch')}</button>
+                )}
+                <button type="button" onClick={pickCurrentFolder} style={{ padding: '2px 6px', borderRadius: 4, border: '1px solid #0078D4', background: '#0078D4', color: '#fff', cursor: 'pointer', fontSize: 11 }}>
+                  ✓ {isFilePicker ? t('Diesen Ordner als Pfad nehmen') : t('Diesen Ordner wählen')}
+                </button>
+              </div>
+              <div style={{ maxHeight: 180, overflow: 'auto', border: '1px solid #eee', borderRadius: 4, background: '#fff' }}>
+                {loading && <div style={{ padding: 6, fontSize: 11, color: '#888' }}>{t('Lade')}</div>}
+                {!loading && items.length === 0 && (
+                  <div style={{ padding: 6, fontSize: 11, color: '#888' }}>{isFilePicker ? t('Keine Dateien oder Ordner') : t('Keine Unterordner')}</div>
+                )}
+                {!loading && items.map((item) => (
+                  <div key={`${item.type}:${item.value}`} style={{ display: 'flex', alignItems: 'center', padding: '3px 6px', borderBottom: '1px solid #f0f0f0', fontSize: 12 }}>
+                    <span
+                      onClick={() => (item.type === 'folder' ? navigateInto(item) : pickItem(item))}
+                      style={{ flex: 1, cursor: 'pointer', userSelect: 'none' }}
+                      title={item.type === 'folder' ? t('Öffnen') : t('Wählen')}
+                    >
+                      {item.type === 'folder' ? '📁' : '📄'} {item.label}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => pickItem(item)}
+                      style={{ padding: '1px 6px', borderRadius: 3, border: '1px solid #0078D4', background: '#fff', color: '#0078D4', cursor: 'pointer', fontSize: 11 }}
+                    >
+                      {t('Wählen')}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
 const CaseListEditor: React.FC<FieldRendererProps> = ({ param, value, onChange }) => {
   const { t } = useLanguage();
   const cases = Array.isArray(value) ? value : [];
@@ -402,8 +619,8 @@ export const FRONTEND_TYPE_RENDERERS: Record<string, FieldRendererComponent> = {
   file: TextInput,
   hidden: HiddenInput,
   userConnection: ConnectionPicker,
-  sharepointFolder: FolderPicker,
+  sharepointFolder: SharepointPathPicker,
-  sharepointFile: FolderPicker,
+  sharepointFile: SharepointPathPicker,
   clickupList: FolderPicker,
   clickupTask: FolderPicker,
   caseList: CaseListEditor,

src/components/OnboardingAssistant.tsx

@@ -40,7 +40,7 @@ function _hideOnboarding(): void {
 }
 
 const OnboardingAssistant: React.FC<OnboardingAssistantProps> = ({ onDismiss }) => {
-  const { t } = useLanguage();
+  const { t, currentLanguage } = useLanguage();
   const callouts = useMemo(() => ({
     mandate: t('Tipp: Ein Mandant ist Ihr Arbeitsbereich. Sie koennen spaeter weitere Mandanten fuer Teams oder Projekte erstellen.'),
     feature: t('Tipp: Im Store finden Sie AI-Workspace, CommCoach und weitere Features. Aktivieren Sie mindestens eines, um loszulegen.'),
@@ -73,7 +73,7 @@ const OnboardingAssistant: React.FC<OnboardingAssistantProps> = ({ onDismiss })
       let workspaceInstancePath: string | undefined;
       let workspaceInstanceIds: string[] = [];
       try {
-        const navRes = await api.get('/api/navigation?language=de');
+        const navRes = await api.get(`/api/navigation?language=${currentLanguage}`);
         const blocks = navRes.data?.blocks || [];
         const dynamicBlock = blocks.find((b: { type: string }) => b.type === 'dynamic');
         const mandates = dynamicBlock?.mandates || [];
@@ -165,7 +165,7 @@ const OnboardingAssistant: React.FC<OnboardingAssistantProps> = ({ onDismiss })
     } finally {
       setLoading(false);
     }
-  }, [navigate, t]);
+  }, [navigate, t, currentLanguage]);
 
   useEffect(() => {
     const state = location.state as { showOnboarding?: number } | null;

src/hooks/useBackgroundJob.ts

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import api from '../api';
+
+export type BackgroundJobStatus = 'PENDING' | 'RUNNING' | 'SUCCESS' | 'ERROR' | 'CANCELLED';
+
+export interface BackgroundJob {
+  id: string;
+  jobType: string;
+  mandateId?: string | null;
+  featureInstanceId?: string | null;
+  triggeredBy?: string | null;
+  status: BackgroundJobStatus;
+  progress: number;
+  progressMessage?: string | null;
+  payload?: Record<string, any>;
+  result?: Record<string, any> | null;
+  errorMessage?: string | null;
+  createdAt?: string;
+  startedAt?: string | null;
+  finishedAt?: string | null;
+}
+
+const TERMINAL_STATUSES: BackgroundJobStatus[] = ['SUCCESS', 'ERROR', 'CANCELLED'];
+
+export interface UseBackgroundJobOptions {
+  pollMs?: number;
+  enabled?: boolean;
+  onSuccess?: (job: BackgroundJob) => void;
+  onError?: (job: BackgroundJob) => void;
+}
+
+export interface UseBackgroundJobResult {
+  job: BackgroundJob | null;
+  isFinal: boolean;
+  isError: boolean;
+  isLoading: boolean;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Polls /api/jobs/{jobId} until the job reaches a terminal status.
+ *
+ * Use after submitting a long-running task to the generic background job
+ * service. Handles polling, cleanup on unmount, and exposes the job record
+ * directly so callers can read `job.progress`, `job.result`, etc.
+ */
+export function useBackgroundJob(
+  jobId: string | null | undefined,
+  opts: UseBackgroundJobOptions = {},
+): UseBackgroundJobResult {
+  const { pollMs = 2000, enabled = true, onSuccess, onError } = opts;
+  const [job, setJob] = useState<BackgroundJob | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const mountedRef = useRef(true);
+  const onSuccessRef = useRef(onSuccess);
+  const onErrorRef = useRef(onError);
+
+  useEffect(() => { onSuccessRef.current = onSuccess; }, [onSuccess]);
+  useEffect(() => { onErrorRef.current = onError; }, [onError]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => { mountedRef.current = false; };
+  }, []);
+
+  const fetchOnce = useCallback(async (): Promise<BackgroundJob | null> => {
+    if (!jobId) return null;
+    setIsLoading(true);
+    try {
+      const res = await api.get(`/api/jobs/${jobId}`);
+      const next = res.data as BackgroundJob;
+      if (mountedRef.current) setJob(next);
+      return next;
+    } catch (err: any) {
+      if (mountedRef.current) {
+        setJob(prev => prev ?? {
+          id: jobId,
+          jobType: '',
+          status: 'ERROR',
+          progress: 0,
+          errorMessage: err?.response?.data?.detail || err?.message || 'Job nicht abrufbar',
+        });
+      }
+      return null;
+    } finally {
+      if (mountedRef.current) setIsLoading(false);
+    }
+  }, [jobId]);
+
+  useEffect(() => {
+    if (!enabled || !jobId) return;
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let firedTerminal = false;
+
+    const tick = async () => {
+      if (cancelled) return;
+      const next = await fetchOnce();
+      if (cancelled) return;
+      const status = next?.status;
+      if (status && TERMINAL_STATUSES.includes(status)) {
+        if (!firedTerminal) {
+          firedTerminal = true;
+          if (status === 'SUCCESS') onSuccessRef.current?.(next!);
+          else onErrorRef.current?.(next!);
+        }
+        return;
+      }
+      timer = setTimeout(tick, pollMs);
+    };
+
+    tick();
+
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [jobId, enabled, pollMs, fetchOnce]);
+
+  const isFinal = !!job && TERMINAL_STATUSES.includes(job.status);
+  const isError = job?.status === 'ERROR' || job?.status === 'CANCELLED';
+
+  return { job, isFinal, isError, isLoading, refetch: async () => { await fetchOnce(); } };
+}

src/pages/views/graphicalEditor/GraphicalEditorWorkflowsPage.tsx

@@ -6,9 +6,9 @@
  * Actions: Edit, Delete, Aktivieren/Deaktivieren, Ausführen (nur bei manuellem Trigger).
  */
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { FaPlay, FaSync, FaCheck, FaBan, FaPen } from 'react-icons/fa';
+import { FaPlay, FaSync, FaCheck, FaBan, FaPen, FaFileImport, FaFileExport } from 'react-icons/fa';
 import { usePrompt } from '../../../hooks/usePrompt';
 import { FormGeneratorTable, type ColumnConfig } from '../../../components/FormGenerator';
 import { useInstanceId } from '../../../hooks/useCurrentInstance';
@@ -18,7 +18,13 @@ import {
   deleteWorkflow,
   executeGraph,
   updateWorkflow,
+  importWorkflowFromFile,
+  exportWorkflowToFile,
+  isWorkflowFileContent,
+  workflowFileNameFor,
+  WORKFLOW_FILE_EXTENSION,
   type Automation2Workflow,
+  type WorkflowFileEnvelope,
 } from '../../../api/workflowApi';
 import { useToast } from '../../../contexts/ToastContext';
 import { formatUnixTimestamp } from '../../../utils/time';
@@ -56,6 +62,8 @@ export const GraphicalEditorWorkflowsPage: React.FC = () => {
   const [activeFilter, setActiveFilter] = useState<'all' | 'active' | 'inactive'>('all');
 
   const [paginationMeta, setPaginationMeta] = useState<any>(null);
+  const [importing, setImporting] = useState(false);
+  const importFileInputRef = useRef<HTMLInputElement>(null);
 
   const load = useCallback(async (paginationParams?: any) => {
     if (!instanceId) return;
@@ -180,6 +188,69 @@ export const GraphicalEditorWorkflowsPage: React.FC = () => {
     [instanceId, request, showSuccess, showError, load, t]
   );
 
+  const handleExport = useCallback(
+    async (row: Automation2Workflow) => {
+      if (!instanceId) return;
+      try {
+        const result = await exportWorkflowToFile(request, instanceId, row.id, false);
+        const fileName = result.fileName || workflowFileNameFor(row.label);
+        const blob = new Blob([JSON.stringify(result.envelope, null, 2)], {
+          type: 'application/json;charset=utf-8',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        showSuccess(t('Workflow als Datei exportiert'));
+      } catch (e: any) {
+        showError(t('Fehler: {msg}', { msg: e?.message || t('Export fehlgeschlagen') }));
+      }
+    },
+    [instanceId, request, showSuccess, showError, t],
+  );
+
+  const handleImportFileSelected = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      e.target.value = '';
+      if (!file || !instanceId) return;
+      setImporting(true);
+      try {
+        const text = await file.text();
+        let envelope: WorkflowFileEnvelope;
+        try {
+          envelope = JSON.parse(text) as WorkflowFileEnvelope;
+        } catch {
+          showError(t('Datei ist kein gültiges JSON'));
+          return;
+        }
+        if (!isWorkflowFileContent(envelope)) {
+          showError(t('Datei ist kein PowerOn-Workflow ({ext})', { ext: WORKFLOW_FILE_EXTENSION }));
+          return;
+        }
+        const result = await importWorkflowFromFile(request, instanceId, { envelope });
+        const warnings = result?.warnings ?? [];
+        if (warnings.length > 0) {
+          showSuccess(
+            t('Workflow importiert ({n} Warnungen). Aktivierung manuell.', { n: warnings.length }),
+          );
+        } else {
+          showSuccess(t('Workflow importiert (deaktiviert). Bitte vor Aktivierung prüfen.'));
+        }
+        await load();
+      } catch (e: any) {
+        showError(t('Fehler: {msg}', { msg: e?.message || t('Import fehlgeschlagen') }));
+      } finally {
+        setImporting(false);
+      }
+    },
+    [instanceId, request, showSuccess, showError, load, t],
+  );
+
   const columns: ColumnConfig[] = [
     { key: 'label', label: t('Workflow'), type: 'string', width: 200, sortable: true },
     {
@@ -274,6 +345,21 @@ export const GraphicalEditorWorkflowsPage: React.FC = () => {
               </button>
             ))}
           </div>
+          <button
+            className={styles.secondaryButton}
+            onClick={() => importFileInputRef.current?.click()}
+            disabled={importing || loading}
+            title={t('Workflow aus Datei importieren ({ext})', { ext: WORKFLOW_FILE_EXTENSION })}
+          >
+            <FaFileImport /> {importing ? t('Importiere...') : t('Importieren')}
+          </button>
+          <input
+            ref={importFileInputRef}
+            type="file"
+            accept=".json,application/json"
+            style={{ display: 'none' }}
+            onChange={handleImportFileSelected}
+          />
           <button
             className={styles.secondaryButton}
             onClick={() => load()}
@@ -337,6 +423,12 @@ export const GraphicalEditorWorkflowsPage: React.FC = () => {
               loading: (row) => executingId === row.id,
               visible: (row) => hasManualTrigger(row),
             },
+            {
+              id: 'export',
+              icon: <FaFileExport />,
+              title: t('Als Datei exportieren'),
+              onClick: (row) => handleExport(row),
+            },
           ]}
           onDelete={(row) => handleDelete(row.id)}
           hookData={hookData}

src/pages/views/trustee/TrusteeAccountingSettingsView.tsx

@@ -6,12 +6,13 @@
  * testing the connection, and removing the integration.
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import { useApiRequest } from '../../../hooks/useApi';
 import { useToast } from '../../../contexts/ToastContext';
 import { useConfirm } from '../../../hooks/useConfirm';
 import { useLanguage } from '../../../providers/language/LanguageContext';
+import { useBackgroundJob } from '../../../hooks/useBackgroundJob';
 import {
   fetchAccountingConnectors,
   fetchAccountingConfig,
@@ -43,16 +44,20 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
   const [importDone, setImportDone] = useState(false);
   const [importResult, setImportResult] = useState<Record<string, any> | null>(null);
   const [importStatus, setImportStatus] = useState<Record<string, any> | null>(null);
+  const [importJobId, setImportJobId] = useState<string | null>(null);
   const [clearingCache, setClearingCache] = useState(false);
   const [exporting, setExporting] = useState(false);
   const [dateFrom, setDateFrom] = useState('');
   const [dateTo, setDateTo] = useState('');
-  const mountedRef = useRef(true);
   const { confirm, ConfirmDialog } = useConfirm();
 
   useEffect(() => {
     if (!importDone) return;
-    const importResetTimer = setTimeout(() => { setImporting(false); setImportDone(false); }, 5000);
+    const importResetTimer = setTimeout(() => {
+      setImporting(false);
+      setImportDone(false);
+      setImportJobId(null);
+    }, 5000);
     return () => clearTimeout(importResetTimer);
   }, [importDone]);
 
@@ -82,21 +87,50 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
 
   useEffect(() => {
     loadData();
-    return () => { mountedRef.current = false; };
   }, [loadData]);
 
   const _loadImportStatus = useCallback(async () => {
     if (!instanceId) return;
     try {
-      const res = await request({ url: `/api/trustee/${instanceId}/accounting/import-status`, method: 'get' });
+      const data = await request({ url: `/api/trustee/${instanceId}/accounting/import-status`, method: 'get' });
-      if (mountedRef.current) setImportStatus(res.data);
+      setImportStatus(data);
-    } catch { /* ignore */ }
+    } catch (err) {
+      console.error('[Trustee] import-status fetch failed:', err);
+    }
   }, [instanceId, request]);
 
   useEffect(() => {
     if (existingConfig?.configured) _loadImportStatus();
   }, [existingConfig, _loadImportStatus]);
 
+  const { job: importJob } = useBackgroundJob(importJobId, {
+    enabled: !!importJobId,
+    pollMs: 2000,
+    onSuccess: (j) => {
+      const summary = (j.result || {}) as Record<string, any>;
+      setImportResult(summary);
+      const errs: string[] = Array.isArray(summary.errors) ? summary.errors : [];
+      if (errs.length) {
+        showError(t('Import teilweise fehlgeschlagen'), errs.join('; '));
+      } else {
+        showSuccess(t('Import abgeschlossen'),
+          t('{konten} Konten, {buchungen} Buchungen, {kontakte} Kontakte, {salden} Salden importiert.', {
+            konten: String(summary.accounts || 0),
+            buchungen: String(summary.journalEntries || 0),
+            kontakte: String(summary.contacts || 0),
+            salden: String(summary.accountBalances || 0),
+          }));
+      }
+      _loadImportStatus();
+      void loadData();
+      setImportDone(true);
+    },
+    onError: (j) => {
+      showError(t('Import fehlgeschlagen'), j.errorMessage || t('Unbekannter Fehler'));
+      setImportDone(true);
+    },
+  });
+
   const _getSelectedConnector = (): AccountingConnectorInfo | undefined => {
     return connectors.find(c => c.connectorType === selectedType);
   };
@@ -191,37 +225,26 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
         {existingConfig?.configured && (
           <div className={styles.successMessage} style={{ marginBottom: '0.5rem' }}>
             <strong>{t('Verbunden:')}</strong> {existingConfig.displayLabel || existingConfig.connectorType}
-            {existingConfig.lastSyncStatus != null && existingConfig.lastSyncStatus !== '' && (
-              <> &middot; {t('Letzter Sync:')} {existingConfig.lastSyncStatus}</>
-            )}
           </div>
         )}
 
-        {existingConfig?.configured && (existingConfig.lastSyncAt != null || existingConfig.lastSyncStatus != null) && (
+        {existingConfig?.configured && existingConfig.lastSyncStatus === 'error' && (
           <div className={styles.setupStep} style={{ marginTop: 0, marginBottom: '1rem' }}>
             <div className={styles.stepNumber} style={{ visibility: 'hidden' }}>0</div>
             <div className={styles.stepContent}>
-              <h4 style={{ marginTop: 0 }}>{t('Syncstatus Fehlerprotokoll')}</h4>
+              <h4 style={{ marginTop: 0 }}>{t('Letzter Sync fehlgeschlagen')}</h4>
               <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                 {existingConfig.lastSyncAt != null && (
                   <div style={{ fontSize: '0.9rem' }}>
-                    <strong>{t('Letzter Sync:')}</strong>{' '}
+                    <strong>{t('Zeitpunkt:')}</strong>{' '}
                     {new Date(existingConfig.lastSyncAt * 1000).toLocaleString()}
-                    {existingConfig.lastSyncStatus != null && existingConfig.lastSyncStatus !== '' && (
-                      <> &middot; {t('Status:')} {existingConfig.lastSyncStatus}</>
-                    )}
                   </div>
                 )}
-                {existingConfig.lastSyncStatus === 'error' && (existingConfig.lastSyncErrorMessage ?? '').trim() !== '' && (
                 <div className={styles.errorMessage} style={{ marginTop: '0.25rem', padding: '0.75rem' }}>
-                    {existingConfig.lastSyncErrorMessage}
+                  {(existingConfig.lastSyncErrorMessage ?? '').trim() !== ''
+                    ? existingConfig.lastSyncErrorMessage
+                    : t('Der letzte Sync ist fehlgeschlagen. Details pro Position finden Sie unter Positionen (Spalte Sync-Status).')}
                 </div>
-                )}
-                {existingConfig.lastSyncStatus === 'error' && (!existingConfig.lastSyncErrorMessage || existingConfig.lastSyncErrorMessage.trim() === '') && (
-                  <div className={styles.errorMessage} style={{ marginTop: '0.25rem', padding: '0.75rem' }}>
-                    Der letzte Sync ist fehlgeschlagen. Details pro Position finden Sie unter Positionen (Spalte Sync-Status).
-                  </div>
-                )}
               </div>
             </div>
           </div>
@@ -266,7 +289,11 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
                     placeholder={t('z. B. Run My Accounts – Muster AG')}
                   />
                 </div>
-                {selectedConnector.configFields.map(field => (
+                {selectedConnector.configFields.map(field => {
+                  const datalistId = field.suggestions && field.suggestions.length > 0
+                    ? `dl-${selectedConnector.connectorType}-${field.key}`
+                    : undefined;
+                  return (
                     <div key={field.key}>
                       <label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem' }}>
                         {field.label || field.key}
@@ -279,9 +306,18 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
                         onChange={e => handleConfigChange(field.key, e.target.value)}
                         placeholder={field.placeholder || ''}
                         autoComplete={field.secret ? 'new-password' : 'off'}
+                        list={datalistId}
                       />
-                  </div>
+                      {datalistId && (
+                        <datalist id={datalistId}>
+                          {field.suggestions!.map(s => (
+                            <option key={s} value={s} />
                           ))}
+                        </datalist>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             </div>
           </div>
@@ -340,6 +376,55 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
                 {t('Kontenplan, Buchungen, Kontakte und Salden aus dem Buchhaltungssystem einlesen. Diese Daten stehen anschließend im KI-Workspace für Analysen zur Verfügung.')}
               </p>
 
+              {(() => {
+                const lastSyncAt = importStatus?.lastSyncAt as number | null | undefined;
+                const winFrom = importStatus?.lastSyncDateFrom as string | undefined;
+                const winTo = importStatus?.lastSyncDateTo as string | undefined;
+                const counts = (importStatus?.lastSyncCounts || {}) as Record<string, number>;
+                const timeWindow = winFrom && winTo
+                  ? t('{from} bis {to}', { from: winFrom, to: winTo })
+                  : winFrom
+                    ? t('ab {from}', { from: winFrom })
+                    : winTo
+                      ? t('bis {to}', { to: winTo })
+                      : null;
+                return (
+                  <div style={{
+                    fontSize: '0.8rem',
+                    color: 'var(--text-secondary)',
+                    background: 'var(--surface-color, #f5f5f5)',
+                    border: '1px solid var(--border-color, #e0e0e0)',
+                    borderRadius: '6px',
+                    padding: '0.5rem 0.75rem',
+                    marginBottom: '0.75rem',
+                  }}>
+                    {lastSyncAt ? (
+                      <>
+                        <div>
+                          <strong>{t('Letzter Import:')}</strong> {new Date(lastSyncAt * 1000).toLocaleString()}
+                          {timeWindow && (
+                            <> {' '}&middot; <strong>{t('Zeitfenster:')}</strong> {timeWindow}</>
+                          )}
+                        </div>
+                        <div style={{ marginTop: '0.2rem' }}>
+                          {t('{konten} Konten, {buchungen} Buchungen ({zeilen} Zeilen), {kontakte} Kontakte, {salden} Salden', {
+                            konten: String(counts.accounts ?? 0),
+                            buchungen: String(counts.journalEntries ?? 0),
+                            zeilen: String(counts.journalLines ?? 0),
+                            kontakte: String(counts.contacts ?? 0),
+                            salden: String(counts.accountBalances ?? 0),
+                          })}
+                        </div>
+                      </>
+                    ) : (
+                      <div>
+                        <em>{t('Noch kein Import durchgeführt. Wähle unten ein Zeitfenster und klicke auf «Daten jetzt einlesen».')}</em>
+                      </div>
+                    )}
+                  </div>
+                );
+              })()}
+
               <div style={{ display: 'flex', gap: '0.75rem', marginBottom: '0.5rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
                 <div>
                   <label style={{ display: 'block', fontSize: '0.8rem', marginBottom: '0.2rem' }}>{t('Von (optional)')}</label>
@@ -384,35 +469,47 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
                     if (!instanceId) return;
                     setImporting(true);
                     setImportResult(null);
+                    setImportJobId(null);
                     try {
                       const body: Record<string, string> = {};
                       if (dateFrom) body.dateFrom = dateFrom;
                       if (dateTo) body.dateTo = dateTo;
-                      const res = await request({ url: `/api/trustee/${instanceId}/accounting/import-data`, method: 'post', data: body });
+                      const result = await request({ url: `/api/trustee/${instanceId}/accounting/import-data`, method: 'post', data: body });
-                      if (mountedRef.current) {
+                      const newJobId: string | undefined = result?.jobId;
-                        setImportResult(res.data);
+                      if (newJobId) {
-                        if (res.data.errors?.length) {
+                        setImportJobId(newJobId);
-                          showError(t('Import teilweise fehlgeschlagen'), res.data.errors.join('; '));
                       } else {
-                          showSuccess(t('Import abgeschlossen'),
+                        showError(t('Import fehlgeschlagen'), t('Kein jobId vom Server erhalten'));
-                            t('{konten} Konten, {buchungen} Buchungen, {kontakte} Kontakte, {salden} Salden importiert.', {
+                        setImportDone(true);
-                              konten: String(res.data.accounts || 0),
-                              buchungen: String(res.data.journalEntries || 0),
-                              kontakte: String(res.data.contacts || 0),
-                              salden: String(res.data.accountBalances || 0),
-                            }));
-                        }
-                        _loadImportStatus();
                       }
                     } catch (err: any) {
                       showError(t('Import fehlgeschlagen'), err.response?.data?.detail || err.message || t('Unbekannter Fehler'));
-                    } finally {
                       setImportDone(true);
                     }
                   }}
                 >
-                  {importing ? t('Importiere…') : t('Daten jetzt einlesen')}
+                  {importing
+                    ? (importJob?.progressMessage || t('Importiere…'))
+                    : t('Daten jetzt einlesen')}
                 </button>
+                {importing && importJob && (
+                  <div style={{ flex: '1 1 100%', marginTop: '0.5rem' }}>
+                    <div style={{
+                      width: '100%', height: '6px', background: 'var(--surface-color, #eee)',
+                      borderRadius: '3px', overflow: 'hidden',
+                    }}>
+                      <div style={{
+                        width: `${Math.max(2, importJob.progress || 0)}%`,
+                        height: '100%',
+                        background: 'var(--primary-color, #4CAF50)',
+                        transition: 'width 0.4s ease',
+                      }} />
+                    </div>
+                    <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '0.25rem' }}>
+                      {importJob.progress}% {importJob.progressMessage ? `· ${importJob.progressMessage}` : ''}
+                    </div>
+                  </div>
+                )}
                 <button
                   className={styles.secondaryButton}
                   disabled={clearingCache}
@@ -420,8 +517,8 @@ export const TrusteeAccountingSettingsView: React.FC = () => {
                     if (!instanceId) return;
                     setClearingCache(true);
                     try {
-                      const res = await request({ url: `/api/trustee/${instanceId}/accounting/clear-cache`, method: 'post' });
+                      const result = await request({ url: `/api/trustee/${instanceId}/accounting/clear-cache`, method: 'post' });
-                      showSuccess(t('Cache geleert'), t('{n} gecachte Abfragen entfernt. Die nächste KI-Abfrage liest frische Daten.', { n: String(res.data?.cleared ?? 0) }));
+                      showSuccess(t('Cache geleert'), t('{n} gecachte Abfragen entfernt. Die nächste KI-Abfrage liest frische Daten.', { n: String(result?.cleared ?? 0) }));
                     } catch (err: any) {
                       showError(t('Fehler'), err.response?.data?.detail || err.message || t('Cache konnte nicht geleert werden.'));
                     } finally {

src/pages/views/workspace/WorkspaceInput.tsx

@@ -45,6 +45,8 @@ interface WorkspaceInputProps {
   onDataSourceDrop?: (params: { connectionId: string; sourceType: string; path: string; label: string; displayPath?: string }) => void;
   pendingAttachDsId?: string;
   onPendingAttachDsConsumed?: () => void;
+  pendingAttachFdsId?: string;
+  onPendingAttachFdsConsumed?: () => void;
   onPasteAsFile?: (file: File) => void;
   draftAppend?: string;
   onDraftAppendConsumed?: () => void;
@@ -69,6 +71,8 @@ export const WorkspaceInput: React.FC<WorkspaceInputProps> = ({ instanceId: _ins
   onDataSourceDrop,
   pendingAttachDsId,
   onPendingAttachDsConsumed,
+  pendingAttachFdsId,
+  onPendingAttachFdsConsumed,
   onPasteAsFile,
   draftAppend,
   onDraftAppendConsumed,
@@ -105,6 +109,15 @@ export const WorkspaceInput: React.FC<WorkspaceInputProps> = ({ instanceId: _ins
     }
   }, [pendingAttachDsId, onPendingAttachDsConsumed]);
 
+  useEffect(() => {
+    if (pendingAttachFdsId) {
+      setAttachedFeatureDataSourceIds(prev =>
+        prev.includes(pendingAttachFdsId) ? prev : [...prev, pendingAttachFdsId],
+      );
+      onPendingAttachFdsConsumed?.();
+    }
+  }, [pendingAttachFdsId, onPendingAttachFdsConsumed]);
+
   const promptBeforeVoiceRef = useRef('');
   const finalizedTextRef = useRef('');
   const currentInterimRef = useRef('');

src/pages/views/workspace/WorkspacePage.tsx

@@ -293,16 +293,29 @@ export const WorkspacePage: React.FC<WorkspacePageProps> = ({ persistentInstance
     });
   }, []);
 
+  const [pendingAttachFdsId, setPendingAttachFdsId] = useState<string>('');
+
   const _handleSendToChat_FeatureSource = useCallback(async (params: AddToChat_FeatureSource) => {
     try {
-      await api.post(`/api/workspace/${instanceId}/feature-datasources`, {
+      const res = await api.post(`/api/workspace/${instanceId}/feature-datasources`, {
         featureInstanceId: params.featureInstanceId,
         featureCode: params.featureCode,
         tableName: params.tableName || '',
         objectKey: params.objectKey,
         label: params.label,
       });
+      // Backend response shape parity with /datasources — accept either a flat
+      // ``id`` or a wrapped ``featureDataSource.id`` so a future API tweak
+      // doesn't silently break the chip again.
+      const newId =
+        res.data?.id ||
+        res.data?.featureDataSource?.id ||
+        res.data?.dataSource?.id ||
+        '';
       workspace.refreshFeatureDataSources();
+      if (newId) {
+        setPendingAttachFdsId(newId);
+      }
     } catch (err) {
       console.error('Failed to add feature source to chat:', err);
     }
@@ -521,6 +534,8 @@ export const WorkspacePage: React.FC<WorkspacePageProps> = ({ persistentInstance
           onDataSourceDrop={_handleDataSourceDrop}
           pendingAttachDsId={pendingAttachDsId}
           onPendingAttachDsConsumed={() => setPendingAttachDsId('')}
+          pendingAttachFdsId={pendingAttachFdsId}
+          onPendingAttachFdsConsumed={() => setPendingAttachFdsId('')}
           onPasteAsFile={_uploadAndAttach}
           draftAppend={draftAppend}
           onDraftAppendConsumed={() => setDraftAppend('')}