feat(agent-ui): add Architektur tab explaining the doc-check pipeline

Mirror the CE module's /sdk/iace/.../architektur tab for /sdk/agent: a
hand-authored schema (data-flow lanes, step-by-step pipeline accordion,
module-engine cards, Pruefer-Matrix) explaining orchestrator phases A-F,
the parallel specialist agents (Impressum/AGB/DSE), the 4-layer DSE engine,
and the verification/decision-method meta-model. Adds a page-level
Check | Architektur tab toggle (the page was flat).

Static content (the Python doc-check has no architecture endpoint, unlike
the Go IACE module); can be data-fed later.

NOTE: not yet lint/type/browser-verified -- the worktree has no node_modules.
Needs a visual check + next lint / tsc in an env with the toolchain.

dev-only, no deploy.

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

admin-compliance/app/sdk/agent/page.tsx

@@ -4,10 +4,12 @@ import React, { useState } from 'react'
 import { ComplianceCheckTab } from './_components/ComplianceCheckTab'
 import { ComplianceFAQ } from './_components/ComplianceFAQ'
 import { SnapshotHistoryList } from './_components/SnapshotHistoryList'
+import { ArchitekturView } from './_components/ArchitekturView'
 
 export default function AgentPage() {
   // Nach einem abgeschlossenen Check die Historie unten neu laden.
   const [historyKey, setHistoryKey] = useState(0)
+  const [tab, setTab] = useState<'check' | 'architektur'>('check')
 
   return (
     <div className="space-y-6 max-w-4xl">
@@ -16,11 +18,31 @@ export default function AgentPage() {
         <p className="text-gray-500 mt-1">Webseiten + Dokumente auf DSGVO-Konformität prüfen.</p>
       </div>
 
-      <ComplianceCheckTab onComplete={() => setHistoryKey(k => k + 1)} />
+      <div className="flex gap-1 border-b border-gray-200 dark:border-gray-700">
+        {([['check', 'Check'], ['architektur', 'Architektur']] as const).map(([id, label]) => (
+          <button
+            key={id}
+            onClick={() => setTab(id)}
+            className={`px-3 py-2 text-sm font-medium -mb-px border-b-2 transition-colors ${
+              tab === id
+                ? 'border-purple-500 text-purple-600 dark:text-purple-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
 
-      <SnapshotHistoryList refreshKey={historyKey} />
-
-      <ComplianceFAQ />
+      {tab === 'check' ? (
+        <>
+          <ComplianceCheckTab onComplete={() => setHistoryKey(k => k + 1)} />
+          <SnapshotHistoryList refreshKey={historyKey} />
+          <ComplianceFAQ />
+        </>
+      ) : (
+        <ArchitekturView />
+      )}
     </div>
   )
 }