fix: Agents-Seite in SDK-Layout verschoben — Sidebar + Icons sichtbar

Agents lag in app/(sdk)/sdk/agents/ (separater Route-Group) und erbte daher nicht das SDK-Layout aus app/sdk/layout.tsx. Verschoben nach app/sdk/agents/ damit SDKSidebar, ComplianceAdvisorWidget und SDKPipelineSidebar korrekt angezeigt werden. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 08:42:40 +01:00
parent 451616b10e
commit 6e0e9cd3cf
5 changed files with 0 additions and 0 deletions
--- a/admin-compliance/app/sdk/agents/page.tsx
+++ b/admin-compliance/app/sdk/agents/page.tsx
@@ -0,0 +1,224 @@
+'use client'
+
+import React, { useEffect, useState, useCallback } from 'react'
+import Link from 'next/link'
+
+interface AgentData {
+  id: string
+  name: string
+  description: string
+  color: string
+  icon: string
+  status: 'active' | 'inactive' | 'error'
+  version: string
+  stats: {
+    sessionsToday: number
+    avgResponseTime: string
+    successRate: string
+  }
+}
+
+interface AgentsResponse {
+  agents: AgentData[]
+  stats: {
+    total: number
+    active: number
+    inactive: number
+    error: number
+    totalSessions: number
+    avgResponseTime: string
+  }
+  timestamp: string
+}
+
+const ShieldIcon = () => (
+  <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+  </svg>
+)
+
+const PencilIcon = () => (
+  <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+  </svg>
+)
+
+function getAgentIcon(icon: string) {
+  switch (icon) {
+    case 'shield': return <ShieldIcon />
+    case 'pencil': return <PencilIcon />
+    default: return <ShieldIcon />
+  }
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const colors = {
+    active: 'bg-green-100 text-green-700',
+    inactive: 'bg-gray-100 text-gray-600',
+    error: 'bg-red-100 text-red-700',
+  }
+  const labels = { active: 'Aktiv', inactive: 'Inaktiv', error: 'Fehler' }
+  return (
+    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colors[status as keyof typeof colors] || colors.inactive}`}>
+      {labels[status as keyof typeof labels] || status}
+    </span>
+  )
+}
+
+export default function AgentsDashboardPage() {
+  const [data, setData] = useState<AgentsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const loadAgents = useCallback(async () => {
+    try {
+      const res = await fetch('/api/sdk/agents')
+      if (res.ok) {
+        setData(await res.json())
+      }
+    } catch (err) {
+      console.error('Failed to load agents:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    loadAgents()
+    const interval = setInterval(loadAgents, 30_000)
+    return () => clearInterval(interval)
+  }, [loadAgents])
+
+  if (loading) {
+    return (
+      <div className="p-8">
+        <div className="animate-pulse space-y-4">
+          <div className="h-8 bg-gray-200 rounded w-64" />
+          <div className="grid grid-cols-3 gap-4">
+            {[1, 2, 3].map(i => <div key={i} className="h-24 bg-gray-200 rounded-xl" />)}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const stats = data?.stats
+  const agents = data?.agents || []
+
+  return (
+    <div className="p-8 max-w-6xl">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Compliance-Agenten</h1>
+        <p className="text-gray-500 mt-1">
+          Verwaltung und Konfiguration der KI-Agenten im Compliance SDK
+        </p>
+      </div>
+
+      {/* Quick Links */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
+        <Link href="/sdk/agents/architecture" className="flex items-center gap-2 px-4 py-3 bg-white border border-gray-200 rounded-xl hover:border-purple-300 hover:bg-purple-50 transition-colors text-sm">
+          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+          </svg>
+          Architektur
+        </Link>
+        <Link href="/sdk/agents/sessions" className="flex items-center gap-2 px-4 py-3 bg-white border border-gray-200 rounded-xl hover:border-purple-300 hover:bg-purple-50 transition-colors text-sm">
+          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+          </svg>
+          Sessions
+        </Link>
+        <Link href="/sdk/agents/statistics" className="flex items-center gap-2 px-4 py-3 bg-white border border-gray-200 rounded-xl hover:border-purple-300 hover:bg-purple-50 transition-colors text-sm">
+          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+          </svg>
+          Statistiken
+        </Link>
+        <Link href="/sdk/document-generator" className="flex items-center gap-2 px-4 py-3 bg-white border border-gray-200 rounded-xl hover:border-purple-300 hover:bg-purple-50 transition-colors text-sm">
+          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          Dokument-Generator
+        </Link>
+      </div>
+
+      {/* Stats Bar */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div className="bg-white border border-gray-200 rounded-xl px-4 py-3">
+          <div className="text-2xl font-bold text-gray-900">{stats?.total || 0}</div>
+          <div className="text-xs text-gray-500">Agenten gesamt</div>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl px-4 py-3">
+          <div className="text-2xl font-bold text-green-600">{stats?.active || 0}</div>
+          <div className="text-xs text-gray-500">Aktiv</div>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl px-4 py-3">
+          <div className="text-2xl font-bold text-red-600">{stats?.error || 0}</div>
+          <div className="text-xs text-gray-500">Fehler</div>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl px-4 py-3">
+          <div className="text-2xl font-bold text-gray-900">{stats?.totalSessions || 0}</div>
+          <div className="text-xs text-gray-500">Sessions heute</div>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl px-4 py-3">
+          <div className="text-2xl font-bold text-gray-900">{stats?.avgResponseTime || '—'}</div>
+          <div className="text-xs text-gray-500">Avg. Antwortzeit</div>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl px-4 py-3">
+          <div className="text-2xl font-bold text-gray-900">6</div>
+          <div className="text-xs text-gray-500">RAG-Sammlungen</div>
+        </div>
+      </div>
+
+      {/* Agent Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {agents.map((agent) => (
+          <Link
+            key={agent.id}
+            href={`/sdk/agents/${agent.id}`}
+            className="bg-white border border-gray-200 rounded-2xl p-6 hover:border-purple-300 hover:shadow-lg transition-all group"
+          >
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div
+                  className="w-12 h-12 rounded-xl flex items-center justify-center text-white"
+                  style={{ backgroundColor: agent.color }}
+                >
+                  {getAgentIcon(agent.icon)}
+                </div>
+                <div>
+                  <h2 className="font-semibold text-gray-900 group-hover:text-purple-700 transition-colors">
+                    {agent.name}
+                  </h2>
+                  <div className="text-xs text-gray-400">v{agent.version}</div>
+                </div>
+              </div>
+              <StatusBadge status={agent.status} />
+            </div>
+
+            <p className="text-sm text-gray-600 mb-4 line-clamp-2">
+              {agent.description}
+            </p>
+
+            <div className="grid grid-cols-3 gap-3 pt-3 border-t border-gray-100">
+              <div>
+                <div className="text-lg font-semibold text-gray-900">{agent.stats.sessionsToday}</div>
+                <div className="text-xs text-gray-500">Sessions</div>
+              </div>
+              <div>
+                <div className="text-lg font-semibold text-gray-900">{agent.stats.avgResponseTime}</div>
+                <div className="text-xs text-gray-500">Avg. Zeit</div>
+              </div>
+              <div>
+                <div className="text-lg font-semibold text-gray-900">{agent.stats.successRate}</div>
+                <div className="text-xs text-gray-500">Erfolgsrate</div>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}