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,6 +1544,94 @@ export default function CompanyProfilePage() {
     setFormData(prev => ({ ...prev, ...updates }))
   }
 
+  // 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 || '',
+    founded_year: formData.foundedYear || null,
+    business_model: formData.businessModel || 'B2B',
+    offerings: formData.offerings || [],
+    company_size: formData.companySize || 'small',
+    employee_count: formData.employeeCount || '',
+    annual_revenue: formData.annualRevenue || '',
+    headquarters_country: formData.headquartersCountry || 'DE',
+    headquarters_city: formData.headquartersCity || '',
+    has_international_locations: formData.hasInternationalLocations || false,
+    international_countries: formData.internationalCountries || [],
+    target_markets: formData.targetMarkets || [],
+    primary_jurisdiction: formData.primaryJurisdiction || 'DE',
+    is_data_controller: formData.isDataController ?? true,
+    is_data_processor: formData.isDataProcessor ?? false,
+    uses_ai: formData.usesAI ?? false,
+    ai_use_cases: formData.aiUseCases || [],
+    dpo_name: formData.dpoName || '',
+    dpo_email: formData.dpoEmail || '',
+    is_complete: isComplete,
+    // Phase 2 extended fields
+    processing_systems: (formData as any).processingSystems || [],
+    ai_systems: (formData as any).aiSystems || [],
+    technical_contacts: (formData as any).technicalContacts || [],
+    subject_to_nis2: (formData as any).subjectToNis2 || false,
+    subject_to_ai_act: (formData as any).subjectToAiAct || false,
+    subject_to_iso27001: (formData as any).subjectToIso27001 || false,
+    supervisory_authority: (formData as any).supervisoryAuthority || '',
+    review_cycle_months: (formData as any).reviewCycleMonths || 12,
+    repos: (formData as any).repos || [],
+    document_sources: (formData as any).documentSources || [],
+    // Machine builder fields (if applicable)
+    ...(formData.machineBuilder ? {
+      machine_builder: {
+        product_types: formData.machineBuilder.productTypes || [],
+        product_description: formData.machineBuilder.productDescription || '',
+        product_pride: formData.machineBuilder.productPride || '',
+        contains_software: formData.machineBuilder.containsSoftware || false,
+        contains_firmware: formData.machineBuilder.containsFirmware || false,
+        contains_ai: formData.machineBuilder.containsAI || false,
+        ai_integration_type: formData.machineBuilder.aiIntegrationType || [],
+        has_safety_function: formData.machineBuilder.hasSafetyFunction || false,
+        safety_function_description: formData.machineBuilder.safetyFunctionDescription || '',
+        autonomous_behavior: formData.machineBuilder.autonomousBehavior || false,
+        human_oversight_level: formData.machineBuilder.humanOversightLevel || 'full',
+        is_networked: formData.machineBuilder.isNetworked || false,
+        has_remote_access: formData.machineBuilder.hasRemoteAccess || false,
+        has_ota_updates: formData.machineBuilder.hasOTAUpdates || false,
+        update_mechanism: formData.machineBuilder.updateMechanism || '',
+        export_markets: formData.machineBuilder.exportMarkets || [],
+        critical_sector_clients: formData.machineBuilder.criticalSectorClients || false,
+        critical_sectors: formData.machineBuilder.criticalSectors || [],
+        oem_clients: formData.machineBuilder.oemClients || false,
+        ce_marking_required: formData.machineBuilder.ceMarkingRequired || false,
+        existing_ce_process: formData.machineBuilder.existingCEProcess || false,
+        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
@@ -1553,6 +1641,7 @@ export default function CompanyProfilePage() {
         completeAndSaveProfile()
         return
       }
+      saveProfileDraft()
       setCurrentStep(nextStep)
     } else {
       // Complete profile
@@ -1575,68 +1664,7 @@ export default function CompanyProfilePage() {
       await fetch('/api/sdk/v1/company-profile', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
+        body: JSON.stringify(buildProfilePayload(true)),
-          company_name: formData.companyName || '',
-          legal_form: formData.legalForm || 'GmbH',
-          industry: formData.industry || '',
-          founded_year: formData.foundedYear || null,
-          business_model: formData.businessModel || 'B2B',
-          offerings: formData.offerings || [],
-          company_size: formData.companySize || 'small',
-          employee_count: formData.employeeCount || '',
-          annual_revenue: formData.annualRevenue || '',
-          headquarters_country: formData.headquartersCountry || 'DE',
-          headquarters_city: formData.headquartersCity || '',
-          has_international_locations: formData.hasInternationalLocations || false,
-          international_countries: formData.internationalCountries || [],
-          target_markets: formData.targetMarkets || [],
-          primary_jurisdiction: formData.primaryJurisdiction || 'DE',
-          is_data_controller: formData.isDataController ?? true,
-          is_data_processor: formData.isDataProcessor ?? false,
-          uses_ai: formData.usesAI ?? false,
-          ai_use_cases: formData.aiUseCases || [],
-          dpo_name: formData.dpoName || '',
-          dpo_email: formData.dpoEmail || '',
-          is_complete: true,
-          // Phase 2 extended fields
-          processing_systems: (formData as any).processingSystems || [],
-          ai_systems: (formData as any).aiSystems || [],
-          technical_contacts: (formData as any).technicalContacts || [],
-          subject_to_nis2: (formData as any).subjectToNis2 || false,
-          subject_to_ai_act: (formData as any).subjectToAiAct || false,
-          subject_to_iso27001: (formData as any).subjectToIso27001 || false,
-          supervisory_authority: (formData as any).supervisoryAuthority || '',
-          review_cycle_months: (formData as any).reviewCycleMonths || 12,
-          repos: (formData as any).repos || [],
-          document_sources: (formData as any).documentSources || [],
-          // Machine builder fields (if applicable)
-          ...(formData.machineBuilder ? {
-            machine_builder: {
-              product_types: formData.machineBuilder.productTypes || [],
-              product_description: formData.machineBuilder.productDescription || '',
-              product_pride: formData.machineBuilder.productPride || '',
-              contains_software: formData.machineBuilder.containsSoftware || false,
-              contains_firmware: formData.machineBuilder.containsFirmware || false,
-              contains_ai: formData.machineBuilder.containsAI || false,
-              ai_integration_type: formData.machineBuilder.aiIntegrationType || [],
-              has_safety_function: formData.machineBuilder.hasSafetyFunction || false,
-              safety_function_description: formData.machineBuilder.safetyFunctionDescription || '',
-              autonomous_behavior: formData.machineBuilder.autonomousBehavior || false,
-              human_oversight_level: formData.machineBuilder.humanOversightLevel || 'full',
-              is_networked: formData.machineBuilder.isNetworked || false,
-              has_remote_access: formData.machineBuilder.hasRemoteAccess || false,
-              has_ota_updates: formData.machineBuilder.hasOTAUpdates || false,
-              update_mechanism: formData.machineBuilder.updateMechanism || '',
-              export_markets: formData.machineBuilder.exportMarkets || [],
-              critical_sector_clients: formData.machineBuilder.criticalSectorClients || false,
-              critical_sectors: formData.machineBuilder.criticalSectors || [],
-              oem_clients: formData.machineBuilder.oemClients || false,
-              ce_marking_required: formData.machineBuilder.ceMarkingRequired || false,
-              existing_ce_process: formData.machineBuilder.existingCEProcess || false,
-              has_risk_assessment: formData.machineBuilder.hasRiskAssessment || false,
-            },
-          } : {}),
-        }),
       })
     } 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>
   )
 }