From 8849c396b5bf08cdb1c24994d199845d42a49353 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Thu, 7 May 2026 13:16:04 +0200
Subject: [PATCH] fix: Show L2 detail checks always visible (no extra click
 needed)

L2 checks were hidden behind a second click on L1 items.
Now they render inline below their L1 parent, always visible
when the document card is expanded.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../sdk/agent/_components/ChecklistView.tsx   | 106 +++++++-----------
 1 file changed, 41 insertions(+), 65 deletions(-)

diff --git a/admin-compliance/app/sdk/agent/_components/ChecklistView.tsx b/admin-compliance/app/sdk/agent/_components/ChecklistView.tsx
index 538c5f0..be0d765 100644
--- a/admin-compliance/app/sdk/agent/_components/ChecklistView.tsx
+++ b/admin-compliance/app/sdk/agent/_components/ChecklistView.tsx
@@ -79,21 +79,11 @@ function L2Summary({ children }: { children: CheckItem[] }) {
 
 export function ChecklistView({ results }: { results: DocResult[] }) {
   const [expanded, setExpanded] = useState<number | null>(null)
-  const [expandedL1, setExpandedL1] = useState<Set<string>>(new Set())
 
   if (!results || results.length === 0) return null
 
   const totalOk = results.filter(r => r.completeness_pct === 100).length
 
-  const toggleL1 = (id: string) => {
-    setExpandedL1(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -172,64 +162,50 @@ export function ChecklistView({ results }: { results: DocResult[] }) {
                     <p className="text-sm text-red-600">{r.error}</p>
                   ) : (
                     <div className="space-y-1">
-                      {grouped.map((g) => {
-                        const hasChildren = g.children.length > 0
-                        const isL1Exp = expandedL1.has(g.check.id)
-
-                        return (
-                          <div key={g.check.id}>
-                            {/* L1 check */}
-                            <div
-                              className={`flex items-start gap-2 ${hasChildren ? 'cursor-pointer' : ''}`}
-                              onClick={hasChildren ? () => toggleL1(g.check.id) : undefined}
-                            >
-                              <CheckIcon passed={g.check.passed} />
-                              <div className="flex-1">
-                                <div className={`text-sm ${g.check.passed ? 'text-gray-700' : 'text-red-700 font-medium'}`}>
-                                  {g.check.label}
-                                  {hasChildren && <L2Summary>{g.children}</L2Summary>}
-                                  {hasChildren && (
-                                    <svg className={`w-3 h-3 inline ml-1 text-gray-400 transition-transform ${isL1Exp ? '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>
-                                  )}
+                      {grouped.map((g) => (
+                        <div key={g.check.id}>
+                          {/* L1 check */}
+                          <div className="flex items-start gap-2">
+                            <CheckIcon passed={g.check.passed} />
+                            <div className="flex-1">
+                              <div className={`text-sm ${g.check.passed ? 'text-gray-700' : 'text-red-700 font-medium'}`}>
+                                {g.check.label}
+                                {g.children.length > 0 && <L2Summary>{g.children}</L2Summary>}
+                              </div>
+                              {g.check.passed && g.check.matched_text && g.children.length === 0 && (
+                                <div className="text-xs text-gray-400 mt-0.5 font-mono truncate">
+                                  &quot;...{g.check.matched_text}...&quot;
                                 </div>
-                                {g.check.passed && g.check.matched_text && !hasChildren && (
-                                  <div className="text-xs text-gray-400 mt-0.5 font-mono truncate">
-                                    &quot;...{g.check.matched_text}...&quot;
-                                  </div>
-                                )}
-                              </div>
+                              )}
                             </div>
-
-                            {/* L2 children */}
-                            {hasChildren && isL1Exp && (
-                              <div className="ml-6 mt-1 space-y-1 border-l-2 border-gray-200 pl-3">
-                                {g.children.map((ch) => (
-                                  <div key={ch.id} className="flex items-start gap-2">
-                                    <CheckIcon passed={ch.passed} skipped={ch.skipped} />
-                                    <div className="flex-1">
-                                      <div className={`text-xs ${
-                                        ch.skipped ? 'text-gray-400 italic'
-                                          : ch.passed ? 'text-gray-600' : 'text-red-600 font-medium'
-                                      }`}>
-                                        {ch.label}
-                                        {ch.skipped && ' (uebersprungen)'}
-                                      </div>
-                                      {ch.passed && ch.matched_text && (
-                                        <div className="text-xs text-gray-400 mt-0.5 font-mono truncate">
-                                          &quot;...{ch.matched_text}...&quot;
-                                        </div>
-                                      )}
-                                    </div>
-                                  </div>
-                                ))}
-                              </div>
-                            )}
                           </div>
-                        )
-                      })}
+
+                          {/* L2 children — always visible */}
+                          {g.children.length > 0 && (
+                            <div className="ml-6 mt-0.5 mb-1 space-y-0.5 border-l-2 border-gray-200 pl-3">
+                              {g.children.map((ch) => (
+                                <div key={ch.id} className="flex items-start gap-2">
+                                  <CheckIcon passed={ch.passed} skipped={ch.skipped} />
+                                  <div className="flex-1">
+                                    <div className={`text-xs ${
+                                      ch.skipped ? 'text-gray-400 italic'
+                                        : ch.passed ? 'text-gray-600' : 'text-red-600 font-medium'
+                                    }`}>
+                                      {ch.label}
+                                      {ch.skipped && ' (uebersprungen)'}
+                                    </div>
+                                    {ch.passed && ch.matched_text && (
+                                      <div className="text-xs text-gray-400 mt-0.5 font-mono truncate">
+                                        &quot;...{ch.matched_text}...&quot;
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
                       {r.word_count > 0 && (
                         <div className="text-xs text-gray-400 mt-2 pt-2 border-t border-gray-200">
                           {r.word_count} Woerter analysiert