refactor(admin): split architecture page.tsx into colocated components

Extract DetailPanel, ArchHeader, Toolbar, ArchCanvas and ServiceTable into
_components/, the ReactFlow node/edge builder into _hooks/useArchGraph, and
layout constants/helpers into _layout.ts. page.tsx drops from 950 to 91 LOC,
well below the 300 soft target.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/architecture/_components/Toolbar.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { ARCH_SERVICES, LAYERS } from '../architecture-data'
+import { LAYER_ORDER, type LayerFilter } from '../_layout'
+
+export default function Toolbar({
+  layerFilter,
+  showDb,
+  showRag,
+  showApis,
+  onLayerFilter,
+  onToggleDb,
+  onToggleRag,
+  onToggleApis,
+}: {
+  layerFilter: LayerFilter
+  showDb: boolean
+  showRag: boolean
+  showApis: boolean
+  onLayerFilter: (f: LayerFilter) => void
+  onToggleDb: () => void
+  onToggleRag: () => void
+  onToggleApis: () => void
+}) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Layer Filter */}
+        <button
+          onClick={() => onLayerFilter('alle')}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            layerFilter === 'alle'
+              ? 'bg-slate-800 text-white'
+              : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+          }`}
+        >
+          Alle ({ARCH_SERVICES.length})
+        </button>
+        {LAYER_ORDER.map(layerId => {
+          const layer = LAYERS[layerId]
+          const count = ARCH_SERVICES.filter(s => s.layer === layerId).length
+          return (
+            <button
+              key={layerId}
+              onClick={() => onLayerFilter(layerFilter === layerId ? 'alle' : layerId)}
+              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-1.5"
+              style={{
+                background: layerFilter === layerId ? layer.colorBorder : layer.colorBg,
+                color: layerFilter === layerId ? 'white' : layer.colorText,
+              }}
+            >
+              <span
+                className="w-2.5 h-2.5 rounded-full"
+                style={{ background: layer.colorBorder }}
+              />
+              {layer.name} ({count})
+            </button>
+          )
+        })}
+
+        {/* Separator */}
+        <div className="w-px h-6 bg-slate-200 mx-1" />
+
+        {/* Toggles */}
+        <button
+          onClick={onToggleDb}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            showDb
+              ? 'bg-slate-700 text-white'
+              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+          }`}
+        >
+          DB-Tabellen
+        </button>
+        <button
+          onClick={onToggleRag}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            showRag
+              ? 'bg-green-600 text-white'
+              : 'bg-green-50 text-green-700 hover:bg-green-100'
+          }`}
+        >
+          RAG-Collections
+        </button>
+        <button
+          onClick={onToggleApis}
+          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+            showApis
+              ? 'bg-violet-600 text-white'
+              : 'bg-violet-50 text-violet-700 hover:bg-violet-100'
+          }`}
+        >
+          API-Endpunkte
+        </button>
+      </div>
+    </div>
+  )
+}