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>

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,30 +162,17 @@ 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 (
+                      {grouped.map((g) => (
                         <div key={g.check.id}>
                           {/* L1 check */}
-                            <div
-                              className={`flex items-start gap-2 ${hasChildren ? 'cursor-pointer' : ''}`}
-                              onClick={hasChildren ? () => toggleL1(g.check.id) : undefined}
-                            >
+                          <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}
-                                  {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>
-                                  )}
+                                {g.children.length > 0 && <L2Summary>{g.children}</L2Summary>}
                               </div>
-                                {g.check.passed && g.check.matched_text && !hasChildren && (
+                              {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>
@@ -203,9 +180,9 @@ export function ChecklistView({ results }: { results: DocResult[] }) {
                             </div>
                           </div>
 
-                            {/* L2 children */}
-                            {hasChildren && isL1Exp && (
-                              <div className="ml-6 mt-1 space-y-1 border-l-2 border-gray-200 pl-3">
+                          {/* 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} />
@@ -228,8 +205,7 @@ export function ChecklistView({ results }: { results: DocResult[] }) {
                             </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