feat(sdk): Auto-Save bei Schrittwechsel + Session-Header

Company Profile Wizard speichert jetzt bei jedem Schrittwechsel (Weiter/Zurueck)
als Draft (is_complete: false). Shared buildProfilePayload() vermeidet Duplikation.
SDKHeader zeigt Version, letzten Schritt, Sync-Status und Bearbeiter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-compliance/app/sdk/company-profile/page.tsx

@@ -1544,38 +1544,8 @@ export default function CompanyProfilePage() {
     setFormData(prev => ({ ...prev, ...updates }))
   }
 
-  const handleNext = () => {
-    if (currentStep < lastStep) {
-      // Skip step 8 if not a machine builder
-      const nextStep = currentStep + 1
-      if (nextStep === 8 && !showMachineBuilderStep) {
-        // Complete profile (was step 7, last step for non-machine-builders)
-        completeAndSaveProfile()
-        return
-      }
-      setCurrentStep(nextStep)
-    } else {
-      // Complete profile
-      completeAndSaveProfile()
-    }
-  }
-
-  const completeAndSaveProfile = async () => {
-    const completeProfile: CompanyProfile = {
-      ...formData,
-      isComplete: true,
-      completedAt: new Date(),
-    } as CompanyProfile
-
-    setCompanyProfile(completeProfile)
-    dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })
-
-    // Also persist to dedicated backend endpoint
-    try {
-      await fetch('/api/sdk/v1/company-profile', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
+  // Shared payload builder for draft saves and final save (DRY)
+  const buildProfilePayload = (isComplete: boolean) => ({
     company_name: formData.companyName || '',
     legal_form: formData.legalForm || 'GmbH',
     industry: formData.industry || '',
@@ -1597,7 +1567,7 @@ export default function CompanyProfilePage() {
     ai_use_cases: formData.aiUseCases || [],
     dpo_name: formData.dpoName || '',
     dpo_email: formData.dpoEmail || '',
-          is_complete: true,
+    is_complete: isComplete,
     // Phase 2 extended fields
     processing_systems: (formData as any).processingSystems || [],
     ai_systems: (formData as any).aiSystems || [],
@@ -1636,7 +1606,65 @@ export default function CompanyProfilePage() {
         has_risk_assessment: formData.machineBuilder.hasRiskAssessment || false,
       },
     } : {}),
-        }),
+  })
+
+  // Auto-save draft to backend (fire-and-forget, non-blocking)
+  const [draftSaveStatus, setDraftSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
+  const draftSaveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const saveProfileDraft = async () => {
+    setDraftSaveStatus('saving')
+    try {
+      await fetch('/api/sdk/v1/company-profile', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(buildProfilePayload(false)),
+      })
+      setDraftSaveStatus('saved')
+      // Reset status after 3 seconds
+      if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
+      draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 3000)
+    } catch (err) {
+      console.error('Draft save failed:', err)
+      setDraftSaveStatus('error')
+      if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
+      draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 5000)
+    }
+  }
+
+  const handleNext = () => {
+    if (currentStep < lastStep) {
+      // Skip step 8 if not a machine builder
+      const nextStep = currentStep + 1
+      if (nextStep === 8 && !showMachineBuilderStep) {
+        // Complete profile (was step 7, last step for non-machine-builders)
+        completeAndSaveProfile()
+        return
+      }
+      saveProfileDraft()
+      setCurrentStep(nextStep)
+    } else {
+      // Complete profile
+      completeAndSaveProfile()
+    }
+  }
+
+  const completeAndSaveProfile = async () => {
+    const completeProfile: CompanyProfile = {
+      ...formData,
+      isComplete: true,
+      completedAt: new Date(),
+    } as CompanyProfile
+
+    setCompanyProfile(completeProfile)
+    dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })
+
+    // Also persist to dedicated backend endpoint
+    try {
+      await fetch('/api/sdk/v1/company-profile', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(buildProfilePayload(true)),
       })
     } catch (err) {
       console.error('Failed to save company profile to backend:', err)
@@ -1647,6 +1675,7 @@ export default function CompanyProfilePage() {
 
   const handleBack = () => {
     if (currentStep > 1) {
+      saveProfileDraft()
       setCurrentStep(prev => prev - 1)
     }
   }
@@ -1806,7 +1835,7 @@ export default function CompanyProfilePage() {
               {currentStep === 8 && showMachineBuilderStep && <StepMachineBuilder data={formData} onChange={updateFormData} />}
 
               {/* Navigation */}
-              <div className="flex justify-between mt-8 pt-6 border-t border-gray-200">
+              <div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200">
                 <button
                   onClick={handleBack}
                   disabled={currentStep === 1}
@@ -1814,6 +1843,18 @@ export default function CompanyProfilePage() {
                 >
                   Zurück
                 </button>
+                {/* Draft save status */}
+                {draftSaveStatus !== 'idle' && (
+                  <span className={`text-xs px-3 py-1 rounded-full ${
+                    draftSaveStatus === 'saving' ? 'text-gray-500 bg-gray-100' :
+                    draftSaveStatus === 'saved' ? 'text-green-600 bg-green-50' :
+                    'text-red-600 bg-red-50'
+                  }`}>
+                    {draftSaveStatus === 'saving' && 'Speichern...'}
+                    {draftSaveStatus === 'saved' && '✓ Gespeichert'}
+                    {draftSaveStatus === 'error' && 'Speichern fehlgeschlagen'}
+                  </span>
+                )}
                 <button
                   onClick={handleNext}
                   disabled={!canProceed()}

admin-compliance/app/sdk/layout.tsx

@@ -13,8 +13,32 @@ import { useSDK } from '@/lib/sdk'
 // SDK HEADER
 // =============================================================================
 
+function formatTimeAgo(date: Date | null): string {
+  if (!date) return 'Nie'
+  const now = Date.now()
+  const diff = now - date.getTime()
+  const seconds = Math.floor(diff / 1000)
+  if (seconds < 60) return 'Gerade eben'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `vor ${minutes} Min`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `vor ${hours} Std`
+  const days = Math.floor(hours / 24)
+  return `vor ${days} Tag${days > 1 ? 'en' : ''}`
+}
+
+const SYNC_STATUS_CONFIG = {
+  idle: { color: 'bg-green-400', label: 'Sync OK' },
+  syncing: { color: 'bg-yellow-400 animate-pulse', label: 'Synchronisiere...' },
+  error: { color: 'bg-red-400', label: 'Sync-Fehler' },
+  conflict: { color: 'bg-orange-400', label: 'Konflikt' },
+  offline: { color: 'bg-gray-400', label: 'Offline' },
+} as const
+
 function SDKHeader({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
-  const { currentStep, setCommandBarOpen, completionPercentage } = useSDK()
+  const { state, currentStep, setCommandBarOpen, completionPercentage, syncState } = useSDK()
+
+  const syncConfig = SYNC_STATUS_CONFIG[syncState.status] || SYNC_STATUS_CONFIG.idle
 
   return (
     <header className="sticky top-0 z-30 bg-white border-b border-gray-200">
@@ -75,6 +99,42 @@ function SDKHeader({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
           </button>
         </div>
       </div>
+
+      {/* Session Info Bar */}
+      <div className="flex items-center gap-4 px-6 py-1.5 bg-gray-50 border-t border-gray-100 text-xs text-gray-500">
+        {/* Version */}
+        <span className="font-mono text-gray-400">v{state.version}</span>
+
+        <span className="text-gray-300">|</span>
+
+        {/* Current step / last activity */}
+        <span>
+          Zuletzt: <span className="text-gray-700">{currentStep?.name || 'Dashboard'}</span>
+        </span>
+
+        <span className="text-gray-300">|</span>
+
+        {/* Last saved time */}
+        <span>
+          {formatTimeAgo(syncState.lastSyncedAt ? new Date(syncState.lastSyncedAt) : state.lastModified ? new Date(state.lastModified) : null)}
+        </span>
+
+        <span className="text-gray-300">|</span>
+
+        {/* Sync status dot */}
+        <span className="flex items-center gap-1.5">
+          <span className={`inline-block w-2 h-2 rounded-full ${syncConfig.color}`} />
+          {syncConfig.label}
+        </span>
+
+        {/* User (only if not default) */}
+        {state.userId && state.userId !== 'default' && (
+          <>
+            <span className="text-gray-300">|</span>
+            <span>Bearbeiter: <span className="text-gray-700">{state.userId}</span></span>
+          </>
+        )}
+      </div>
     </header>
   )
 }