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/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>
   )
 }