fix(sdk): Align scope types with engine output + project isolation + optional block progress

Type alignment (root cause of client-side crash):
- RiskFlag: id/title/description → severity/category/message/recommendation
- ScopeGap: id/title/recommendation/relatedDocuments → gapType/currentState/targetState/effort
- NextAction: id/priority:number/effortDays → actionType/priority:string/estimatedEffort
- ScopeReasoning: details → factors + impact
- TriggeredHardTrigger: {rule: HardTriggerRule} → flat fields (ruleId, description, etc.)
- All UI components updated to match engine output shape

Project isolation:
- Scope localStorage key now includes projectId (prevents data leak between projects)

Optional block progress:
- Blocks with only optional questions now show green checkmark when any question answered

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

admin-compliance/components/sdk/compliance-scope/ScopeDecisionTab.tsx

@@ -58,22 +58,23 @@ export function ScopeDecisionTab({
     return 'from-green-500 to-green-600'
   }
 
-  const getSeverityBadge = (severity: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL') => {
-    const colors = {
-      LOW: 'bg-gray-100 text-gray-800',
-      MEDIUM: 'bg-yellow-100 text-yellow-800',
-      HIGH: 'bg-orange-100 text-orange-800',
-      CRITICAL: 'bg-red-100 text-red-800',
+  const getSeverityBadge = (severity: string) => {
+    const s = severity.toLowerCase()
+    const colors: Record<string, string> = {
+      low: 'bg-gray-100 text-gray-800',
+      medium: 'bg-yellow-100 text-yellow-800',
+      high: 'bg-orange-100 text-orange-800',
+      critical: 'bg-red-100 text-red-800',
     }
-    const labels = {
-      LOW: 'Niedrig',
-      MEDIUM: 'Mittel',
-      HIGH: 'Hoch',
-      CRITICAL: 'Kritisch',
+    const labels: Record<string, string> = {
+      low: 'Niedrig',
+      medium: 'Mittel',
+      high: 'Hoch',
+      critical: 'Kritisch',
     }
     return (
-      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[severity]}`}>
-        {labels[severity]}
+      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[s] || colors.medium}`}>
+        {labels[s] || severity}
       </span>
     )
   }
@@ -254,9 +255,9 @@ export function ScopeDecisionTab({
                         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>
-                    <span className="font-medium text-gray-900">{trigger.rule.description}</span>
+                    <span className="font-medium text-gray-900">{trigger.description}</span>
                     <span className="text-xs px-2 py-0.5 rounded-full bg-red-200 text-red-800 font-medium">
-                      Min. {trigger.rule.minimumLevel}
+                      Min. {trigger.minimumLevel}
                     </span>
                   </div>
                   <svg
@@ -272,18 +273,18 @@ export function ScopeDecisionTab({
                 </button>
                 {expandedTrigger === idx && (
                   <div className="px-4 pb-4 pt-2 border-t border-gray-200">
-                    <p className="text-sm text-gray-700 mb-2">{trigger.explanation}</p>
-                    {trigger.rule.legalReference && (
+                    <p className="text-sm text-gray-700 mb-2">{trigger.description}</p>
+                    {trigger.legalReference && (
                       <p className="text-xs text-gray-600 mb-2">
-                        <span className="font-medium">Rechtsgrundlage:</span> {trigger.rule.legalReference}
+                        <span className="font-medium">Rechtsgrundlage:</span> {trigger.legalReference}
                       </p>
                     )}
-                    {trigger.rule.mandatoryDocuments && trigger.rule.mandatoryDocuments.length > 0 && (
+                    {trigger.mandatoryDocuments && trigger.mandatoryDocuments.length > 0 && (
                       <p className="text-xs text-gray-700">
-                        <span className="font-medium">Pflichtdokumente:</span> {trigger.rule.mandatoryDocuments.join(', ')}
+                        <span className="font-medium">Pflichtdokumente:</span> {trigger.mandatoryDocuments.join(', ')}
                       </p>
                     )}
-                    {trigger.rule.dsfaRequired && (
+                    {trigger.requiresDSFA && (
                       <p className="text-xs text-orange-700 font-medium mt-1">DSFA erforderlich</p>
                     )}
                   </div>
@@ -302,10 +303,10 @@ export function ScopeDecisionTab({
             <table className="w-full">
               <thead>
                 <tr className="border-b border-gray-200">
-                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Typ</th>
-                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Tiefe</th>
+                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Dokument</th>
+                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Priorität</th>
                   <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Aufwand</th>
-                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
+                  <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Trigger</th>
                   <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Aktion</th>
                 </tr>
               </thead>
@@ -317,16 +318,16 @@ export function ScopeDecisionTab({
                         <span className="font-medium text-gray-900">
                           {DOCUMENT_TYPE_LABELS[doc.documentType] || doc.documentType}
                         </span>
-                        {doc.required && (
+                        {doc.requirement === 'mandatory' && (
                           <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
                             Pflicht
                           </span>
                         )}
                       </div>
                     </td>
-                    <td className="py-3 px-4 text-sm text-gray-700">{doc.depth}</td>
+                    <td className="py-3 px-4 text-sm text-gray-700 capitalize">{doc.priority}</td>
                     <td className="py-3 px-4 text-sm text-gray-700">
-                      {doc.estimatedEffort || '-'}
+                      {doc.estimatedEffort ? `${doc.estimatedEffort}h` : '-'}
                     </td>
                     <td className="py-3 px-4">
                       {doc.triggeredBy && doc.triggeredBy.length > 0 && (
@@ -361,10 +362,12 @@ export function ScopeDecisionTab({
             {decision.riskFlags.map((flag, idx) => (
               <div key={idx} className="border border-gray-200 rounded-lg p-4">
                 <div className="flex items-start justify-between mb-2">
-                  <h4 className="font-semibold text-gray-900">{flag.title}</h4>
+                  <h4 className="font-semibold text-gray-900">{flag.message}</h4>
                   {getSeverityBadge(flag.severity)}
                 </div>
-                <p className="text-sm text-gray-700 mb-2">{flag.description}</p>
+                {flag.legalReference && (
+                  <p className="text-xs text-gray-500 mb-2">{flag.legalReference}</p>
+                )}
                 <p className="text-sm text-gray-600">
                   <span className="font-medium">Empfehlung:</span> {flag.recommendation}
                 </p>
@@ -382,26 +385,19 @@ export function ScopeDecisionTab({
             {decision.gaps.map((gap, idx) => (
               <div key={idx} className="border border-gray-200 rounded-lg p-4">
                 <div className="flex items-start justify-between mb-2">
-                  <h4 className="font-semibold text-gray-900">{gap.title}</h4>
+                  <h4 className="font-semibold text-gray-900">{gap.description}</h4>
                   {getSeverityBadge(gap.severity)}
                 </div>
-                <p className="text-sm text-gray-700 mb-2">{gap.description}</p>
-                <p className="text-sm text-gray-600 mb-2">
-                  <span className="font-medium">Empfehlung:</span> {gap.recommendation}
+                <p className="text-sm text-gray-700 mb-2">
+                  <span className="font-medium">Ist:</span> {gap.currentState}
                 </p>
-                {gap.relatedDocuments && gap.relatedDocuments.length > 0 && (
-                  <div className="mt-2">
-                    <span className="text-xs text-gray-500">Betroffene Dokumente: </span>
-                    {gap.relatedDocuments.map((doc, docIdx) => (
-                      <span
-                        key={docIdx}
-                        className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 mr-1"
-                      >
-                        {DOCUMENT_TYPE_LABELS[doc] || doc}
-                      </span>
-                    ))}
-                  </div>
-                )}
+                <p className="text-sm text-gray-600 mb-2">
+                  <span className="font-medium">Soll:</span> {gap.targetState}
+                </p>
+                <div className="flex items-center gap-4 text-xs text-gray-500">
+                  <span>Aufwand: ~{gap.effort}h</span>
+                  <span>Level: {gap.requiredFor}</span>
+                </div>
               </div>
             ))}
           </div>
@@ -416,21 +412,21 @@ export function ScopeDecisionTab({
             {decision.nextActions.map((action, idx) => (
               <div key={idx} className="flex gap-4">
                 <div className="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
-                  <span className="text-sm font-bold text-purple-700">{action.priority}</span>
+                  <span className="text-sm font-bold text-purple-700">{idx + 1}</span>
                 </div>
                 <div className="flex-1">
                   <h4 className="font-semibold text-gray-900 mb-1">{action.title}</h4>
                   <p className="text-sm text-gray-700 mb-2">{action.description}</p>
                   <div className="flex items-center gap-3">
-                    {action.effortDays && (
+                    {action.estimatedEffort > 0 && (
                       <span className="text-xs text-gray-600">
-                        <span className="font-medium">Aufwand:</span> {action.effortDays} Tage
+                        <span className="font-medium">Aufwand:</span> ~{action.estimatedEffort}h
                       </span>
                     )}
-                    {action.relatedDocuments && action.relatedDocuments.length > 0 && (
-                      <span className="text-xs text-gray-600">
-                        <span className="font-medium">Dokumente:</span> {action.relatedDocuments.length}
-                      </span>
+                    {action.sdkStepUrl && (
+                      <a href={action.sdkStepUrl} className="text-xs text-purple-600 hover:text-purple-700">
+                        Zum SDK-Schritt →
+                      </a>
                     )}
                   </div>
                 </div>
@@ -469,8 +465,8 @@ export function ScopeDecisionTab({
         )}
       </div>
 
-      {/* Audit Trail */}
-      {decision.auditTrail && decision.auditTrail.length > 0 && (
+      {/* Audit Trail (from reasoning) */}
+      {decision.reasoning && decision.reasoning.length > 0 && (
         <div className="bg-white rounded-xl border border-gray-200 p-6">
           <button
             type="button"
@@ -489,17 +485,20 @@ export function ScopeDecisionTab({
           </button>
           {showAuditTrail && (
             <div className="space-y-3">
-              {decision.auditTrail.map((entry, idx) => (
+              {decision.reasoning.map((entry, idx) => (
                 <div key={idx} className="border-l-2 border-purple-300 pl-4 py-2">
                   <h4 className="font-medium text-gray-900 mb-1">{entry.step}</h4>
                   <p className="text-sm text-gray-700 mb-2">{entry.description}</p>
-                  {entry.details && entry.details.length > 0 && (
+                  {entry.factors && entry.factors.length > 0 && (
                     <ul className="text-xs text-gray-600 space-y-1">
-                      {entry.details.map((detail, detailIdx) => (
-                        <li key={detailIdx}>• {detail}</li>
+                      {entry.factors.map((factor, factorIdx) => (
+                        <li key={factorIdx}>• {factor}</li>
                       ))}
                     </ul>
                   )}
+                  {entry.impact && (
+                    <p className="text-xs text-purple-700 font-medium mt-1">{entry.impact}</p>
+                  )}
                 </div>
               ))}
             </div>