feat: Projekt-Verwaltung verbessern — Archivieren, Loeschen, Wiederherstellen

- Backend: Restore-Endpoint (POST /projects/{id}/restore) und
  Hard-Delete-Endpoint (DELETE /projects/{id}/permanent) hinzugefuegt
- Frontend: Dreistufiger Dialog (Archivieren / Endgueltig loeschen mit
  Bestaetigungsdialog) statt einfachem Loeschen
- Archivierte Projekte aufklappbar in der Projektliste mit
  Wiederherstellen-Button
- CustomerTypeSelector entfernt (redundant seit Multi-Projekt)
- Default tenantId von 'default' auf UUID geaendert (Backend-400-Fix)
- SQL-Cast :state::jsonb durch CAST(:state AS jsonb) ersetzt (SQLAlchemy-Fix)
- snake_case/camelCase-Mapping fuer Backend-Response (NaN-Datum-Fix)
- projectInfo wird beim Laden vom Backend geholt (Header zeigt Projektname)
- API-Client erzeugt sich on-demand (Race-Condition-Fix fuer Projektliste)

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

admin-compliance/app/api/sdk/v1/projects/[projectId]/permanent/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_URL || 'http://backend-compliance:8002'
+
+/**
+ * Proxy: DELETE /api/sdk/v1/projects/{projectId}/permanent → Backend (hard delete)
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ projectId: string }> }
+) {
+  try {
+    const { projectId } = await params
+    const tenantId = request.headers.get('X-Tenant-ID') ||
+      new URL(request.url).searchParams.get('tenant_id') || ''
+
+    const response = await fetch(
+      `${BACKEND_URL}/api/compliance/v1/projects/${projectId}/permanent?tenant_id=${encodeURIComponent(tenantId)}`,
+      {
+        method: 'DELETE',
+        headers: { 'X-Tenant-ID': tenantId },
+      }
+    )
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: 'Backend error', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    return NextResponse.json(await response.json())
+  } catch (error) {
+    console.error('Failed to permanently delete project:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to backend' },
+      { status: 503 }
+    )
+  }
+}

admin-compliance/app/api/sdk/v1/projects/[projectId]/restore/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_URL || 'http://backend-compliance:8002'
+
+/**
+ * Proxy: POST /api/sdk/v1/projects/{projectId}/restore → Backend
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ projectId: string }> }
+) {
+  try {
+    const { projectId } = await params
+    const tenantId = request.headers.get('X-Tenant-ID') ||
+      new URL(request.url).searchParams.get('tenant_id') || ''
+
+    const response = await fetch(
+      `${BACKEND_URL}/api/compliance/v1/projects/${projectId}/restore?tenant_id=${encodeURIComponent(tenantId)}`,
+      {
+        method: 'POST',
+        headers: { 'X-Tenant-ID': tenantId },
+      }
+    )
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: 'Backend error', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    return NextResponse.json(await response.json())
+  } catch (error) {
+    console.error('Failed to restore project:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to backend' },
+      { status: 503 }
+    )
+  }
+}

admin-compliance/app/sdk/page.tsx

@@ -3,9 +3,8 @@
 import React from 'react'
 import Link from 'next/link'
 import { useSDK, SDK_PACKAGES, getStepsForPackage } from '@/lib/sdk'
-import { CustomerTypeSelector } from '@/components/sdk/CustomerTypeSelector'
 import { ProjectSelector } from '@/components/sdk/ProjectSelector/ProjectSelector'
-import type { CustomerType, SDKPackageId } from '@/lib/sdk/types'
+import type { SDKPackageId } from '@/lib/sdk/types'
 
 // =============================================================================
 // DASHBOARD CARDS
@@ -171,6 +170,9 @@ function QuickActionCard({
 export default function SDKDashboard() {
   const { state, packageCompletion, completionPercentage, setCustomerType, projectId } = useSDK()
 
+  // customerType is set during project creation — default to 'new' for legacy projects
+  const effectiveCustomerType = state.customerType || 'new'
+
   // No project selected → show project list
   if (!projectId) {
     return <ProjectSelector />
@@ -180,7 +182,7 @@ export default function SDKDashboard() {
   const totalSteps = SDK_PACKAGES.reduce((sum, pkg) => {
     const steps = getStepsForPackage(pkg.id)
     // Filter import step for new customers
-    return sum + steps.filter(s => !(s.id === 'import' && state.customerType === 'new')).length
+    return sum + steps.filter(s => !(s.id === 'import' && effectiveCustomerType === 'new')).length
   }, 0)
 
   // Calculate stats
@@ -200,19 +202,6 @@ export default function SDKDashboard() {
     return packageCompletion[prevPkg.id] < 100
   }
 
-  // Show customer type selector if not set
-  if (!state.customerType) {
-    return (
-      <div className="min-h-[calc(100vh-200px)] flex items-center justify-center py-12">
-        <CustomerTypeSelector
-          onSelect={(type: CustomerType) => {
-            setCustomerType(type)
-          }}
-        />
-      </div>
-    )
-  }
-
   return (
     <div className="space-y-8">
       {/* Header */}
@@ -220,16 +209,16 @@ export default function SDKDashboard() {
         <div>
           <h1 className="text-2xl font-bold text-gray-900">AI Compliance SDK</h1>
           <p className="mt-1 text-gray-500">
-            {state.customerType === 'new'
+            {effectiveCustomerType === 'new'
               ? 'Neukunden-Modus: Erstellen Sie alle Compliance-Dokumente von Grund auf.'
               : 'Bestandskunden-Modus: Erweitern Sie bestehende Dokumente.'}
           </p>
         </div>
         <button
-          onClick={() => setCustomerType(state.customerType === 'new' ? 'existing' : 'new')}
+          onClick={() => setCustomerType(effectiveCustomerType === 'new' ? 'existing' : 'new')}
           className="text-sm text-purple-600 hover:text-purple-700 underline"
         >
-          {state.customerType === 'new' ? 'Zu Bestandskunden wechseln' : 'Zu Neukunden wechseln'}
+          {effectiveCustomerType === 'new' ? 'Zu Bestandskunden wechseln' : 'Zu Neukunden wechseln'}
         </button>
       </div>
 
@@ -282,7 +271,7 @@ export default function SDKDashboard() {
       </div>
 
       {/* Bestandskunden: Gap Analysis Banner */}
-      {state.customerType === 'existing' && state.importedDocuments.length === 0 && (
+      {effectiveCustomerType === 'existing' && state.importedDocuments.length === 0 && (
         <div className="bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 rounded-xl p-6">
           <div className="flex items-start gap-4">
             <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
@@ -348,7 +337,7 @@ export default function SDKDashboard() {
         <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
           {SDK_PACKAGES.map(pkg => {
             const steps = getStepsForPackage(pkg.id)
-            const visibleSteps = steps.filter(s => !(s.id === 'import' && state.customerType === 'new'))
+            const visibleSteps = steps.filter(s => !(s.id === 'import' && effectiveCustomerType === 'new'))
 
             return (
               <PackageCard

admin-compliance/components/sdk/ProjectSelector/ProjectSelector.tsx

@@ -5,6 +5,41 @@ import { useRouter } from 'next/navigation'
 import { useSDK } from '@/lib/sdk'
 import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'
 
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+/** Map snake_case backend response to camelCase ProjectInfo */
+function normalizeProject(p: any): ProjectInfo {
+  return {
+    id: p.id,
+    name: p.name,
+    description: p.description || '',
+    customerType: p.customerType || p.customer_type || 'new',
+    status: p.status || 'active',
+    projectVersion: p.projectVersion ?? p.project_version ?? 1,
+    completionPercentage: p.completionPercentage ?? p.completion_percentage ?? 0,
+    createdAt: p.createdAt || p.created_at || '',
+    updatedAt: p.updatedAt || p.updated_at || '',
+  }
+}
+
+function formatTimeAgo(dateStr: string): string {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  if (isNaN(date.getTime())) return ''
+  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' : ''}`
+}
+
 // =============================================================================
 // CREATE PROJECT DIALOG
 // =============================================================================
@@ -41,7 +76,7 @@ function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: Cre
         customerType,
         copyFromId || undefined
       )
-      onCreated(project)
+      onCreated(normalizeProject(project))
       setName('')
       setCopyFromId('')
       onClose()
@@ -163,26 +198,219 @@ function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: Cre
   )
 }
 
+// =============================================================================
+// PROJECT ACTION DIALOG (Archive / Permanent Delete)
+// =============================================================================
+
+type ActionStep = 'choose' | 'confirm-delete'
+
+function ProjectActionDialog({
+  project,
+  onArchive,
+  onPermanentDelete,
+  onCancel,
+  isProcessing,
+}: {
+  project: ProjectInfo
+  onArchive: () => void
+  onPermanentDelete: () => void
+  onCancel: () => void
+  isProcessing: boolean
+}) {
+  const [step, setStep] = useState<ActionStep>('choose')
+
+  if (step === 'confirm-delete') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
+        <div
+          className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
+              <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+            <h2 className="text-lg font-bold text-red-700">Endgueltig loeschen</h2>
+          </div>
+
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+            <p className="text-sm text-red-800 font-medium mb-2">
+              Sind Sie sicher, dass Sie <strong>{project.name}</strong> unwiderruflich loeschen moechten?
+            </p>
+            <p className="text-sm text-red-700">
+              Alle Projektdaten, SDK-States und Dokumente werden permanent geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
+            </p>
+          </div>
+
+          <div className="flex gap-3">
+            <button
+              onClick={() => setStep('choose')}
+              className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+            >
+              Zurueck
+            </button>
+            <button
+              onClick={onPermanentDelete}
+              disabled={isProcessing}
+              className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-700 hover:bg-red-800 disabled:bg-red-300 rounded-lg transition-colors"
+            >
+              {isProcessing ? 'Loesche...' : 'Endgueltig loeschen'}
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
+      <div
+        className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
+            <svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </div>
+          <h2 className="text-lg font-bold text-gray-900">Projekt entfernen</h2>
+        </div>
+
+        <p className="text-gray-600 mb-6">
+          Was moechten Sie mit dem Projekt <strong>{project.name}</strong> tun?
+        </p>
+
+        <div className="space-y-3 mb-6">
+          {/* Archive option */}
+          <button
+            onClick={onArchive}
+            disabled={isProcessing}
+            className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-orange-300 hover:bg-orange-50 transition-all text-left disabled:opacity-50"
+          >
+            <div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+              <svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+              </svg>
+            </div>
+            <div>
+              <div className="font-medium text-gray-900">Archivieren</div>
+              <div className="text-sm text-gray-500">
+                Projekt wird ausgeblendet, Daten bleiben erhalten. Kann jederzeit wiederhergestellt werden.
+              </div>
+            </div>
+          </button>
+
+          {/* Permanent delete option */}
+          <button
+            onClick={() => setStep('confirm-delete')}
+            disabled={isProcessing}
+            className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-red-300 hover:bg-red-50 transition-all text-left disabled:opacity-50"
+          >
+            <div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+              <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </div>
+            <div>
+              <div className="font-medium text-red-700">Endgueltig loeschen</div>
+              <div className="text-sm text-gray-500">
+                Alle Daten werden unwiderruflich geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <button
+          onClick={onCancel}
+          className="w-full px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+        >
+          Abbrechen
+        </button>
+      </div>
+    </div>
+  )
+}
+
 // =============================================================================
 // PROJECT CARD
 // =============================================================================
 
-function ProjectCard({ project, onClick }: { project: ProjectInfo; onClick: () => void }) {
+function ProjectCard({
+  project,
+  onClick,
+  onDelete,
+  onRestore,
+}: {
+  project: ProjectInfo
+  onClick: () => void
+  onDelete?: () => void
+  onRestore?: () => void
+}) {
   const timeAgo = formatTimeAgo(project.updatedAt)
+  const isArchived = project.status === 'archived'
 
   return (
+    <div className={`relative bg-white rounded-xl border-2 transition-all ${
+      isArchived
+        ? 'border-gray-200 opacity-75'
+        : 'border-gray-200 hover:border-purple-300 hover:shadow-lg'
+    }`}>
+      {/* Action buttons */}
+      <div className="absolute top-3 right-3 flex items-center gap-1 z-10">
+        {isArchived && onRestore && (
+          <button
+            onClick={e => {
+              e.stopPropagation()
+              onRestore()
+            }}
+            className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+            title="Wiederherstellen"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        )}
+        {onDelete && (
+          <button
+            onClick={e => {
+              e.stopPropagation()
+              onDelete()
+            }}
+            className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+            title="Entfernen"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Card content */}
       <button
         onClick={onClick}
-      className="block w-full text-left bg-white rounded-xl border-2 border-gray-200 hover:border-purple-300 hover:shadow-lg p-6 transition-all"
+        className="block w-full text-left p-6"
       >
-      <div className="flex items-start justify-between mb-3">
-        <h3 className="font-semibold text-gray-900 text-lg truncate pr-2">{project.name}</h3>
+        <div className="flex items-start justify-between mb-3 pr-16">
+          <h3 className={`font-semibold text-lg truncate pr-2 ${isArchived ? 'text-gray-500' : 'text-gray-900'}`}>
+            {project.name}
+          </h3>
           <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
-          project.status === 'active'
-            ? 'bg-green-100 text-green-700'
-            : 'bg-gray-100 text-gray-500'
+            isArchived
+              ? 'bg-gray-100 text-gray-500'
+              : 'bg-green-100 text-green-700'
           }`}>
-          {project.status === 'active' ? 'Aktiv' : 'Archiviert'}
+            {isArchived ? 'Archiviert' : 'Aktiv'}
           </span>
         </div>
 
@@ -197,52 +425,43 @@ function ProjectCard({ project, onClick }: { project: ProjectInfo; onClick: () =
             <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
               <div
                 className={`h-full rounded-full transition-all ${
-                project.completionPercentage === 100 ? 'bg-green-500' : 'bg-purple-600'
+                  project.completionPercentage === 100 ? 'bg-green-500' : isArchived ? 'bg-gray-400' : 'bg-purple-600'
                 }`}
                 style={{ width: `${project.completionPercentage}%` }}
               />
             </div>
             <span className="font-medium text-gray-600">{project.completionPercentage}%</span>
           </div>
+          {timeAgo && (
+            <>
               <span className="text-gray-300">|</span>
               <span>{timeAgo}</span>
+            </>
+          )}
         </div>
 
         <div className="mt-2 text-xs text-gray-400">
           {project.customerType === 'new' ? 'Neukunde' : 'Bestandskunde'}
         </div>
       </button>
+    </div>
   )
 }
 
-// =============================================================================
-// HELPER
-// =============================================================================
-
-function formatTimeAgo(dateStr: string): string {
-  const date = new Date(dateStr)
-  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' : ''}`
-}
-
 // =============================================================================
 // MAIN COMPONENT
 // =============================================================================
 
 export function ProjectSelector() {
   const router = useRouter()
-  const { listProjects } = useSDK()
+  const { listProjects, archiveProject, restoreProject, permanentlyDeleteProject } = useSDK()
   const [projects, setProjects] = useState<ProjectInfo[]>([])
+  const [archivedProjects, setArchivedProjects] = useState<ProjectInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [actionTarget, setActionTarget] = useState<ProjectInfo | null>(null)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [showArchived, setShowArchived] = useState(false)
 
   useEffect(() => {
     loadProjects()
@@ -252,7 +471,9 @@ export function ProjectSelector() {
     setLoading(true)
     try {
       const result = await listProjects()
-      setProjects(result)
+      const all = result.map(normalizeProject)
+      setProjects(all.filter(p => p.status === 'active'))
+      setArchivedProjects(all.filter(p => p.status === 'archived'))
     } catch (error) {
       console.error('Failed to load projects:', error)
     } finally {
@@ -261,6 +482,7 @@ export function ProjectSelector() {
   }
 
   const handleProjectClick = (project: ProjectInfo) => {
+    if (project.status === 'archived') return // archived projects are read-only in list
     router.push(`/sdk?project=${project.id}`)
   }
 
@@ -268,6 +490,47 @@ export function ProjectSelector() {
     router.push(`/sdk?project=${project.id}`)
   }
 
+  const handleArchive = async () => {
+    if (!actionTarget) return
+    setIsProcessing(true)
+    try {
+      await archiveProject(actionTarget.id)
+      // Move from active to archived
+      setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
+      setArchivedProjects(prev => [...prev, { ...actionTarget, status: 'archived' as const }])
+      setActionTarget(null)
+    } catch (error) {
+      console.error('Failed to archive project:', error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const handlePermanentDelete = async () => {
+    if (!actionTarget) return
+    setIsProcessing(true)
+    try {
+      await permanentlyDeleteProject(actionTarget.id)
+      setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
+      setArchivedProjects(prev => prev.filter(p => p.id !== actionTarget.id))
+      setActionTarget(null)
+    } catch (error) {
+      console.error('Failed to delete project:', error)
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const handleRestore = async (project: ProjectInfo) => {
+    try {
+      await restoreProject(project.id)
+      setArchivedProjects(prev => prev.filter(p => p.id !== project.id))
+      setProjects(prev => [...prev, { ...project, status: 'active' as const }])
+    } catch (error) {
+      console.error('Failed to restore project:', error)
+    }
+  }
+
   return (
     <div className="max-w-4xl mx-auto py-12 px-4">
       {/* Header */}
@@ -297,7 +560,7 @@ export function ProjectSelector() {
       )}
 
       {/* Empty State */}
-      {!loading && projects.length === 0 && (
+      {!loading && projects.length === 0 && archivedProjects.length === 0 && (
         <div className="text-center py-16">
           <div className="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-2xl flex items-center justify-center">
             <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -321,7 +584,7 @@ export function ProjectSelector() {
         </div>
       )}
 
-      {/* Project Grid */}
+      {/* Active Projects */}
       {!loading && projects.length > 0 && (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {projects.map(project => (
@@ -329,11 +592,68 @@ export function ProjectSelector() {
               key={project.id}
               project={project}
               onClick={() => handleProjectClick(project)}
+              onDelete={() => setActionTarget(project)}
             />
           ))}
         </div>
       )}
 
+      {/* No active but has archived */}
+      {!loading && projects.length === 0 && archivedProjects.length > 0 && (
+        <div className="text-center py-12 mb-6">
+          <h2 className="text-lg font-semibold text-gray-900">Keine aktiven Projekte</h2>
+          <p className="mt-2 text-gray-500">
+            Sie haben {archivedProjects.length} archivierte{archivedProjects.length === 1 ? 's' : ''} Projekt{archivedProjects.length === 1 ? '' : 'e'}.
+            Stellen Sie ein Projekt wieder her oder erstellen Sie ein neues.
+          </p>
+          <button
+            onClick={() => setShowCreateDialog(true)}
+            className="mt-4 inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            Neues Projekt erstellen
+          </button>
+        </div>
+      )}
+
+      {/* Archived Projects Section */}
+      {!loading && archivedProjects.length > 0 && (
+        <div className="mt-8">
+          <button
+            onClick={() => setShowArchived(!showArchived)}
+            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-4"
+          >
+            <svg
+              className={`w-4 h-4 transition-transform ${showArchived ? 'rotate-90' : ''}`}
+              fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+            </svg>
+            Archivierte Projekte ({archivedProjects.length})
+          </button>
+
+          {showArchived && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {archivedProjects.map(project => (
+                <ProjectCard
+                  key={project.id}
+                  project={project}
+                  onClick={() => handleProjectClick(project)}
+                  onRestore={() => handleRestore(project)}
+                  onDelete={() => setActionTarget(project)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Create Dialog */}
       <CreateProjectDialog
         open={showCreateDialog}
@@ -341,6 +661,17 @@ export function ProjectSelector() {
         onCreated={handleProjectCreated}
         existingProjects={projects}
       />
+
+      {/* Action Dialog (Archive / Delete) */}
+      {actionTarget && (
+        <ProjectActionDialog
+          project={actionTarget}
+          onArchive={handleArchive}
+          onPermanentDelete={handlePermanentDelete}
+          onCancel={() => setActionTarget(null)}
+          isProcessing={isProcessing}
+        />
+      )}
     </div>
   )
 }

admin-compliance/lib/sdk/api-client.ts

@@ -600,9 +600,9 @@ export class SDKApiClient {
   /**
    * List all projects for the current tenant
    */
-  async listProjects(): Promise<{ projects: ProjectInfo[]; total: number }> {
+  async listProjects(includeArchived = true): Promise<{ projects: ProjectInfo[]; total: number }> {
     const response = await this.fetchWithRetry<{ projects: ProjectInfo[]; total: number }>(
-      `${this.baseUrl}/projects?tenant_id=${encodeURIComponent(this.tenantId)}`,
+      `${this.baseUrl}/projects?tenant_id=${encodeURIComponent(this.tenantId)}&include_archived=${includeArchived}`,
       {
         method: 'GET',
         headers: {
@@ -664,6 +664,23 @@ export class SDKApiClient {
     return response
   }
 
+  /**
+   * Get a single project by ID
+   */
+  async getProject(projectId: string): Promise<ProjectInfo> {
+    const response = await this.fetchWithRetry<ProjectInfo>(
+      `${this.baseUrl}/projects/${projectId}?tenant_id=${encodeURIComponent(this.tenantId)}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': this.tenantId,
+        },
+      }
+    )
+    return response
+  }
+
   /**
    * Archive (soft-delete) a project
    */
@@ -680,6 +697,39 @@ export class SDKApiClient {
     )
   }
 
+  /**
+   * Restore an archived project
+   */
+  async restoreProject(projectId: string): Promise<ProjectInfo> {
+    const response = await this.fetchWithRetry<ProjectInfo>(
+      `${this.baseUrl}/projects/${projectId}/restore?tenant_id=${encodeURIComponent(this.tenantId)}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': this.tenantId,
+        },
+      }
+    )
+    return response
+  }
+
+  /**
+   * Permanently delete a project and all data
+   */
+  async permanentlyDeleteProject(projectId: string): Promise<void> {
+    await this.fetchWithRetry<{ success: boolean }>(
+      `${this.baseUrl}/projects/${projectId}/permanent?tenant_id=${encodeURIComponent(this.tenantId)}`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': this.tenantId,
+        },
+      }
+    )
+  }
+
   /**
    * Health check
    */

admin-compliance/lib/sdk/context.tsx

@@ -560,6 +560,8 @@ interface SDKContextValue {
   listProjects: () => Promise<ProjectInfo[]>
   switchProject: (projectId: string) => void
   archiveProject: (projectId: string) => Promise<void>
+  restoreProject: (projectId: string) => Promise<ProjectInfo>
+  permanentlyDeleteProject: (projectId: string) => Promise<void>
 }
 
 const SDKContext = createContext<SDKContextValue | null>(null)
@@ -580,7 +582,7 @@ interface SDKProviderProps {
 
 export function SDKProvider({
   children,
-  tenantId = 'default',
+  tenantId = '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e',
   userId = 'default',
   projectId,
   enableBackendSync = false,
@@ -713,6 +715,16 @@ export function SDKProvider({
             }
           }
         }
+
+        // Load project metadata (name, status, etc.) from backend
+        if (enableBackendSync && projectId && apiClientRef.current) {
+          try {
+            const info = await apiClientRef.current.getProject(projectId)
+            dispatch({ type: 'SET_STATE', payload: { projectInfo: info } })
+          } catch (err) {
+            console.warn('Failed to load project info:', err)
+          }
+        }
       } catch (error) {
         console.error('Failed to load SDK state:', error)
       }
@@ -1101,6 +1113,9 @@ export function SDKProvider({
   // Project Management
   const createProject = useCallback(
     async (name: string, customerType: CustomerType, copyFromProjectId?: string): Promise<ProjectInfo> => {
+      if (!apiClientRef.current && enableBackendSync) {
+        apiClientRef.current = getSDKApiClient(tenantId, projectId)
+      }
       if (!apiClientRef.current) {
         throw new Error('Backend sync not enabled')
       }
@@ -1110,16 +1125,20 @@ export function SDKProvider({
         copy_from_project_id: copyFromProjectId,
       })
     },
-    []
+    [enableBackendSync, tenantId, projectId]
   )
 
   const listProjectsFn = useCallback(async (): Promise<ProjectInfo[]> => {
+    // Ensure API client exists (may not be set yet if useEffect hasn't fired)
+    if (!apiClientRef.current && enableBackendSync) {
+      apiClientRef.current = getSDKApiClient(tenantId, projectId)
+    }
     if (!apiClientRef.current) {
       return []
     }
     const result = await apiClientRef.current.listProjects()
     return result.projects
-  }, [])
+  }, [enableBackendSync, tenantId, projectId])
 
   const switchProject = useCallback(
     (newProjectId: string) => {
@@ -1133,12 +1152,41 @@ export function SDKProvider({
 
   const archiveProjectFn = useCallback(
     async (archiveId: string): Promise<void> => {
+      if (!apiClientRef.current && enableBackendSync) {
+        apiClientRef.current = getSDKApiClient(tenantId, projectId)
+      }
       if (!apiClientRef.current) {
         throw new Error('Backend sync not enabled')
       }
       await apiClientRef.current.archiveProject(archiveId)
     },
-    []
+    [enableBackendSync, tenantId, projectId]
+  )
+
+  const restoreProjectFn = useCallback(
+    async (restoreId: string): Promise<ProjectInfo> => {
+      if (!apiClientRef.current && enableBackendSync) {
+        apiClientRef.current = getSDKApiClient(tenantId, projectId)
+      }
+      if (!apiClientRef.current) {
+        throw new Error('Backend sync not enabled')
+      }
+      return apiClientRef.current.restoreProject(restoreId)
+    },
+    [enableBackendSync, tenantId, projectId]
+  )
+
+  const permanentlyDeleteProjectFn = useCallback(
+    async (deleteId: string): Promise<void> => {
+      if (!apiClientRef.current && enableBackendSync) {
+        apiClientRef.current = getSDKApiClient(tenantId, projectId)
+      }
+      if (!apiClientRef.current) {
+        throw new Error('Backend sync not enabled')
+      }
+      await apiClientRef.current.permanentlyDeleteProject(deleteId)
+    },
+    [enableBackendSync, tenantId, projectId]
   )
 
   // Export
@@ -1206,6 +1254,8 @@ export function SDKProvider({
     listProjects: listProjectsFn,
     switchProject,
     archiveProject: archiveProjectFn,
+    restoreProject: restoreProjectFn,
+    permanentlyDeleteProject: permanentlyDeleteProjectFn,
   }
 
   return <SDKContext.Provider value={value}>{children}</SDKContext.Provider>

backend-compliance/compliance/api/project_routes.py

@@ -179,7 +179,7 @@ async def create_project(
         db.execute(
             text("""
                 INSERT INTO sdk_states (tenant_id, project_id, state, version, created_at, updated_at)
-                VALUES (:tenant_id, :project_id, :state::jsonb, 1, NOW(), NOW())
+                VALUES (:tenant_id, :project_id, CAST(:state AS jsonb), 1, NOW(), NOW())
             """),
             {
                 "tenant_id": tenant_id,
@@ -298,3 +298,79 @@ async def archive_project(
         raise
     finally:
         db.close()
+
+
+@router.post("/{project_id}/restore")
+async def restore_project(
+    project_id: str,
+    tenant_id: str = Depends(get_tenant_id),
+):
+    """Restore an archived project back to active."""
+    db = SessionLocal()
+    try:
+        result = db.execute(
+            text("""
+                UPDATE compliance_projects
+                SET status = 'active', archived_at = NULL, updated_at = NOW()
+                WHERE id = :project_id AND tenant_id = :tenant_id AND status = 'archived'
+                RETURNING id, tenant_id, name, description, customer_type, status,
+                          project_version, completion_percentage, created_at, updated_at
+            """),
+            {"project_id": project_id, "tenant_id": tenant_id},
+        )
+        row = result.fetchone()
+        if not row:
+            raise HTTPException(status_code=404, detail="Project not found or not archived")
+        db.commit()
+        logger.info("Restored project %s for tenant %s", project_id, tenant_id)
+        return _row_to_response(row)
+    except HTTPException:
+        raise
+    except Exception:
+        db.rollback()
+        raise
+    finally:
+        db.close()
+
+
+@router.delete("/{project_id}/permanent")
+async def permanently_delete_project(
+    project_id: str,
+    tenant_id: str = Depends(get_tenant_id),
+):
+    """Permanently delete a project and all associated data."""
+    db = SessionLocal()
+    try:
+        # Verify project exists and belongs to tenant
+        check = db.execute(
+            text("""
+                SELECT id FROM compliance_projects
+                WHERE id = :project_id AND tenant_id = :tenant_id
+            """),
+            {"project_id": project_id, "tenant_id": tenant_id},
+        ).fetchone()
+        if not check:
+            raise HTTPException(status_code=404, detail="Project not found")
+
+        # Delete sdk_states (CASCADE should handle this, but be explicit)
+        db.execute(
+            text("DELETE FROM sdk_states WHERE project_id = :project_id AND tenant_id = :tenant_id"),
+            {"project_id": project_id, "tenant_id": tenant_id},
+        )
+
+        # Delete the project itself
+        db.execute(
+            text("DELETE FROM compliance_projects WHERE id = :project_id AND tenant_id = :tenant_id"),
+            {"project_id": project_id, "tenant_id": tenant_id},
+        )
+
+        db.commit()
+        logger.info("Permanently deleted project %s for tenant %s", project_id, tenant_id)
+        return {"success": True, "id": project_id, "status": "deleted"}
+    except HTTPException:
+        raise
+    except Exception:
+        db.rollback()
+        raise
+    finally:
+        db.close()