ecc1423a4f
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m12s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 34s
CI / test-python-voice (push) Successful in 33s
CI / test-bqas (push) Successful in 33s
- New architecture: CERTifAI (GenAI portal), COMPLAI (compliance), Scanner (code security) — MCP bidirectional connection between COMPLAI and Scanner - LiteLLM hub: token budget, PII guardrails, anon web search, no US providers - Inference layer: Qwen3/DeepSeek (local LLM), bge-m3 embeddings, AI Tools - Fix hover snapping: position wrapper (div) separate from scale (motion.button) - Always-on data traffic packets on all connections - Bidirectional MCP packets + MCP badge between COMPLAI and Scanner - Live token ticker counter on active inference nodes - BSI/EU sovereign badges on tier labels - Spinning dashed ring on active LiteLLM hub - Secondary infra chips in GenAI tier (PostgreSQL, Gitea, Orca, etc.) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
662 lines
29 KiB
TypeScript
662 lines
29 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
import GradientText from '../ui/GradientText'
|
|
import FadeInView from '../ui/FadeInView'
|
|
import {
|
|
Brain, Shield, ScanLine, Zap, Cpu,
|
|
Layers, Wrench, X, Users, Lock,
|
|
Server, Network, ChevronRight, BadgeCheck,
|
|
} from 'lucide-react'
|
|
|
|
interface ArchitectureSlideProps {
|
|
lang: Language
|
|
}
|
|
|
|
type NodeId = 'certifai' | 'complai' | 'scanner' | 'litellm' | 'llm' | 'embeddings' | 'tools'
|
|
type ConnType = 'api' | 'mcp' | 'embed' | 'tool'
|
|
|
|
interface NodeDef {
|
|
id: NodeId
|
|
icon: React.ElementType
|
|
title: string
|
|
subtitle: string
|
|
color: string
|
|
twColor: string
|
|
twBorder: string
|
|
twBg: string
|
|
twDot: string
|
|
cx: number
|
|
cy: number
|
|
tier: 'product' | 'proxy' | 'inference'
|
|
tech: string[]
|
|
services: { name: string; desc: string }[]
|
|
badge?: string
|
|
}
|
|
|
|
interface ConnDef {
|
|
from: NodeId
|
|
to: NodeId
|
|
type: ConnType
|
|
d: string
|
|
revD?: string // reverse path for bidirectional MCP
|
|
}
|
|
|
|
const CONNS: ConnDef[] = [
|
|
{ from: 'certifai', to: 'litellm', type: 'api', d: 'M 18 22 Q 28 43 50 52' },
|
|
{ from: 'complai', to: 'litellm', type: 'api', d: 'M 50 22 L 50 52' },
|
|
{ from: 'scanner', to: 'litellm', type: 'api', d: 'M 82 22 Q 72 43 50 52' },
|
|
{ from: 'complai', to: 'scanner', type: 'mcp', d: 'M 50 22 Q 66 9 82 22', revD: 'M 82 22 Q 66 9 50 22' },
|
|
{ from: 'litellm', to: 'llm', type: 'api', d: 'M 50 52 Q 37 67 18 82' },
|
|
{ from: 'litellm', to: 'embeddings', type: 'embed', d: 'M 50 52 L 50 82' },
|
|
{ from: 'litellm', to: 'tools', type: 'tool', d: 'M 50 52 Q 63 67 82 82' },
|
|
]
|
|
|
|
function getNodes(de: boolean): NodeDef[] {
|
|
return [
|
|
{
|
|
id: 'certifai',
|
|
icon: Brain,
|
|
title: 'CERTifAI',
|
|
subtitle: de ? 'GenAI Mandantenportal' : 'GenAI Tenant Portal',
|
|
color: '#c084fc', twColor: 'text-purple-400',
|
|
twBorder: 'border-purple-500/50', twBg: 'bg-purple-500/10', twDot: 'bg-purple-400',
|
|
cx: 18, cy: 22, tier: 'product',
|
|
badge: 'Rust · Dioxus',
|
|
tech: ['Rust', 'Dioxus', 'MongoDB', 'Keycloak', 'SearXNG', 'LangGraph'],
|
|
services: [
|
|
{ name: 'LiteLLM Dashboard', desc: de ? 'Modellverwaltung & Kostentracking' : 'Model mgmt & cost tracking' },
|
|
{ name: 'LibreChat + SSO', desc: de ? 'Mandanten-Chat mit Keycloak' : 'Tenant chat with Keycloak' },
|
|
{ name: 'LangGraph Agents', desc: de ? 'Agent-Orchestrierung' : 'Agent orchestration' },
|
|
{ name: 'MCP Hub', desc: de ? 'Tool-Integration für KI-Clients' : 'Tool integration for AI clients' },
|
|
],
|
|
},
|
|
{
|
|
id: 'complai',
|
|
icon: Shield,
|
|
title: 'COMPLAI',
|
|
subtitle: de ? 'Compliance & Audit' : 'Compliance & Audit',
|
|
color: '#818cf8', twColor: 'text-indigo-400',
|
|
twBorder: 'border-indigo-500/50', twBg: 'bg-indigo-500/10', twDot: 'bg-indigo-400',
|
|
cx: 50, cy: 22, tier: 'product',
|
|
badge: 'Next.js · FastAPI',
|
|
tech: ['Next.js 15', 'FastAPI', 'Go/Gin', 'PostgreSQL', 'Qdrant', 'Valkey'],
|
|
services: [
|
|
{ name: de ? 'DSGVO / AI Act / NIS2' : 'GDPR / AI Act / NIS2', desc: de ? '70k+ auditierbare Controls' : '70k+ auditable controls' },
|
|
{ name: 'RAG Pipeline', desc: de ? '75+ Rechtsquellen, semantische Suche' : '75+ legal sources, semantic search' },
|
|
{ name: 'Control Pipeline', desc: de ? 'Gesetzestextanalyse via LLM' : 'Legal text analysis via LLM' },
|
|
{ name: 'MCP Client', desc: de ? 'Echtzeit-Findings vom Scanner' : 'Real-time findings from Scanner' },
|
|
],
|
|
},
|
|
{
|
|
id: 'scanner',
|
|
icon: ScanLine,
|
|
title: 'Compliance Scanner',
|
|
subtitle: de ? 'Code-Sicherheit' : 'Code Security',
|
|
color: '#34d399', twColor: 'text-emerald-400',
|
|
twBorder: 'border-emerald-500/50', twBg: 'bg-emerald-500/10', twDot: 'bg-emerald-400',
|
|
cx: 82, cy: 22, tier: 'product',
|
|
badge: 'Rust · Axum',
|
|
tech: ['Rust', 'Axum', 'MongoDB', 'Semgrep', 'Gitleaks', 'Syft'],
|
|
services: [
|
|
{ name: 'SAST / SBOM / CVE', desc: de ? 'Vollautomatische Pipeline' : 'Fully automated pipeline' },
|
|
{ name: de ? 'KI-Triage' : 'AI Triage', desc: de ? 'LLM filtert False Positives' : 'LLM filters false positives' },
|
|
{ name: de ? 'KI-Pentest' : 'AI Pentest', desc: de ? 'Autonome Angriffsketten' : 'Autonomous attack chains' },
|
|
{ name: 'MCP Server', desc: de ? 'Live-Findings für COMPLAI' : 'Live findings for COMPLAI' },
|
|
],
|
|
},
|
|
{
|
|
id: 'litellm',
|
|
icon: Zap,
|
|
title: 'LiteLLM Proxy',
|
|
subtitle: de ? 'KI-Gateway & Guardrails' : 'AI Gateway & Guardrails',
|
|
color: '#fbbf24', twColor: 'text-amber-400',
|
|
twBorder: 'border-amber-500/60', twBg: 'bg-amber-500/10', twDot: 'bg-amber-400',
|
|
cx: 50, cy: 52, tier: 'proxy',
|
|
badge: 'Hub',
|
|
tech: ['OpenAI-kompatible API', 'Bearer Auth', 'Rate Limiting', 'PII-Filter', 'Spend Tracking'],
|
|
services: [
|
|
{ name: de ? 'Token-Budget' : 'Token Budget', desc: de ? 'Pro-Mandant Kontingente & Abrechnung' : 'Per-tenant quotas & billing' },
|
|
{ name: 'PII Guardrails', desc: de ? 'Datenschutz-Filter für alle Anfragen' : 'Privacy filter on all requests' },
|
|
{ name: de ? 'Web-Suche (anonym)' : 'Web Search (anon)', desc: de ? 'SearXNG-Proxy, kein US-Anbieter' : 'SearXNG proxy, no US providers' },
|
|
{ name: de ? 'Namespace-Isolierung' : 'Namespace Isolation', desc: de ? 'Mandantentrennung per API-Key' : 'Tenant isolation per API key' },
|
|
{ name: de ? 'Failover-Routing' : 'Failover Routing', desc: de ? 'Automatisches Fallback' : 'Automatic fallback between models' },
|
|
],
|
|
},
|
|
{
|
|
id: 'llm',
|
|
icon: Cpu,
|
|
title: de ? 'LLM Inferenz' : 'LLM Inference',
|
|
subtitle: de ? 'Lokale Sprachmodelle' : 'Local Language Models',
|
|
color: '#60a5fa', twColor: 'text-blue-400',
|
|
twBorder: 'border-blue-500/50', twBg: 'bg-blue-500/10', twDot: 'bg-blue-400',
|
|
cx: 18, cy: 82, tier: 'inference',
|
|
badge: de ? 'On-Premise · BSI' : 'On-Premise · BSI',
|
|
tech: ['Qwen3-32B', 'Qwen3-Coder-30B', 'DeepSeek-R1-8B', 'Ollama'],
|
|
services: [
|
|
{ name: de ? 'Vollständig lokal' : 'Fully local', desc: de ? 'Daten verlassen nie den Server' : 'Data never leaves the server' },
|
|
{ name: de ? 'Air-Gap fähig' : 'Air-Gap Capable', desc: de ? 'Kein Internet erforderlich' : 'No internet required' },
|
|
{ name: de ? 'GPU-optimiert' : 'GPU-optimized', desc: de ? 'Dedizierte Inferenz-Hardware' : 'Dedicated inference hardware' },
|
|
],
|
|
},
|
|
{
|
|
id: 'embeddings',
|
|
icon: Layers,
|
|
title: 'Embeddings',
|
|
subtitle: de ? 'Semantische Suche' : 'Semantic Search',
|
|
color: '#a78bfa', twColor: 'text-violet-400',
|
|
twBorder: 'border-violet-500/50', twBg: 'bg-violet-500/10', twDot: 'bg-violet-400',
|
|
cx: 50, cy: 82, tier: 'inference',
|
|
badge: de ? 'EU-Souverän' : 'EU Sovereign',
|
|
tech: ['bge-m3', 'Qdrant Vector DB', 'Sentence-Transformers'],
|
|
services: [
|
|
{ name: 'RAG Pipeline', desc: de ? '75+ Rechtsquellen indexiert' : '75+ legal sources indexed' },
|
|
{ name: de ? 'Semantische Suche' : 'Semantic Search', desc: de ? 'Multi-linguale Einbettungen' : 'Multi-lingual embeddings' },
|
|
{ name: de ? 'Lokal' : 'Fully local', desc: de ? 'Keine externen APIs' : 'No external APIs' },
|
|
],
|
|
},
|
|
{
|
|
id: 'tools',
|
|
icon: Wrench,
|
|
title: de ? 'KI-Tools' : 'AI Tools',
|
|
subtitle: de ? 'Web-Suche & MCP' : 'Web Search & MCP',
|
|
color: '#2dd4bf', twColor: 'text-teal-400',
|
|
twBorder: 'border-teal-500/50', twBg: 'bg-teal-500/10', twDot: 'bg-teal-400',
|
|
cx: 82, cy: 82, tier: 'inference',
|
|
badge: de ? 'EU-Souverän' : 'EU Sovereign',
|
|
tech: ['SearXNG', 'MCP Protocol', 'Semgrep API', 'Gitleaks API'],
|
|
services: [
|
|
{ name: 'SearXNG', desc: de ? 'Anonymisierte EU-Websuche' : 'Anonymized EU web search' },
|
|
{ name: 'MCP Tools', desc: de ? 'Auditdokumente & Code-Findings' : 'Audit docs & code findings' },
|
|
{ name: de ? 'Kein US-Anbieter' : 'No US providers', desc: de ? '100% DSGVO-konform' : '100% GDPR-compliant' },
|
|
],
|
|
},
|
|
]
|
|
}
|
|
|
|
// ── Token counter (inference tier ambient animation) ─────────────────────────
|
|
function TokenTicker({ color }: { color: string }) {
|
|
const [n, setN] = useState(() => 12480 + Math.floor(Math.random() * 8000))
|
|
useEffect(() => {
|
|
const id = setInterval(() => setN(v => v + Math.floor(Math.random() * 180 + 40)), 220)
|
|
return () => clearInterval(id)
|
|
}, [])
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
<motion.div
|
|
className="w-1 h-1 rounded-full"
|
|
style={{ background: color }}
|
|
animate={{ opacity: [1, 0.3, 1] }}
|
|
transition={{ duration: 0.6, repeat: Infinity }}
|
|
/>
|
|
<span className="text-[7px] font-mono tabular-nums" style={{ color, opacity: 0.65 }}>
|
|
{n.toLocaleString('de-DE')} tok/s
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Data-flow path (always-on packets, fast when active) ─────────────────────
|
|
function DataFlow({
|
|
d, revD, color, active, type,
|
|
}: {
|
|
d: string; revD?: string; color: string; active: boolean; type: ConnType
|
|
}) {
|
|
const isMcp = type === 'mcp'
|
|
const speed = active ? 1.2 : 5
|
|
const op = active ? 0.85 : 0.2
|
|
const w = active ? 2.5 : 1.2
|
|
const dash = active ? 3 : 2
|
|
|
|
return (
|
|
<g>
|
|
{/* Base line */}
|
|
<path
|
|
d={d} fill="none"
|
|
stroke={color}
|
|
strokeWidth={active ? 1 : 0.5}
|
|
strokeOpacity={active ? 0.4 : 0.07}
|
|
strokeDasharray={isMcp ? '3 6' : undefined}
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
|
|
{/* Forward packets */}
|
|
{[0, -28, -56].map((off, i) => (
|
|
<motion.path key={`f${i}`}
|
|
d={d} fill="none"
|
|
stroke={color} strokeWidth={w} strokeLinecap="round"
|
|
strokeDasharray={`${dash} 80`}
|
|
strokeOpacity={op - i * 0.07}
|
|
vectorEffect="non-scaling-stroke"
|
|
initial={{ strokeDashoffset: off }}
|
|
animate={{ strokeDashoffset: off - 83 }}
|
|
transition={{ duration: speed, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
))}
|
|
|
|
{/* Reverse packets for MCP (bidirectional) */}
|
|
{isMcp && revD && [0, -42].map((off, i) => (
|
|
<motion.path key={`r${i}`}
|
|
d={revD} fill="none"
|
|
stroke={color} strokeWidth={w * 0.75} strokeLinecap="round"
|
|
strokeDasharray={`${dash} 80`}
|
|
strokeOpacity={(op - i * 0.1) * 0.75}
|
|
vectorEffect="non-scaling-stroke"
|
|
initial={{ strokeDashoffset: off }}
|
|
animate={{ strokeDashoffset: off - 83 }}
|
|
transition={{ duration: speed * 1.4, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
))}
|
|
</g>
|
|
)
|
|
}
|
|
|
|
// ── Node card ──────────────────────────────────────────────────────────────────
|
|
// Position wrapper (div) is never scaled — only the inner motion.button scales.
|
|
// This prevents the "snap" that happened when translate(-50%,-50%) and scale
|
|
// were on the same element.
|
|
function NodeCard({
|
|
node, active, onClick, de,
|
|
}: {
|
|
node: NodeDef; active: boolean; onClick: () => void; de: boolean
|
|
}) {
|
|
const Icon = node.icon
|
|
const isHub = node.id === 'litellm'
|
|
|
|
return (
|
|
<div
|
|
className="absolute"
|
|
style={{ left: `${node.cx}%`, top: `${node.cy}%`, transform: 'translate(-50%, -50%)' }}
|
|
>
|
|
<motion.button
|
|
onClick={onClick}
|
|
whileHover={{ scale: 1.06 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
|
|
className="focus:outline-none block"
|
|
>
|
|
<div
|
|
className={`relative rounded-xl border text-left transition-colors duration-200 overflow-hidden ${
|
|
isHub ? 'w-[148px] px-3 py-3' : 'w-[128px] px-2.5 py-2.5'
|
|
} ${
|
|
active
|
|
? `${node.twBorder} ${node.twBg}`
|
|
: 'border-white/[0.09] bg-white/[0.04] hover:border-white/20'
|
|
}`}
|
|
style={{ boxShadow: active ? `0 0 22px -6px ${node.color}55` : 'none' }}
|
|
>
|
|
{/* Left accent bar */}
|
|
<div
|
|
className="absolute left-0 top-0 bottom-0 w-[2px] rounded-l-xl transition-all duration-300"
|
|
style={{ background: active ? node.color : `${node.color}28` }}
|
|
/>
|
|
|
|
{/* Icon + title */}
|
|
<div className="flex items-center gap-2 pl-1 mb-1">
|
|
<div
|
|
className={`w-[22px] h-[22px] rounded-md flex items-center justify-center flex-shrink-0 border transition-colors duration-200 ${
|
|
active ? `${node.twBorder} ${node.twBg}` : 'border-white/10 bg-white/[0.05]'
|
|
}`}
|
|
>
|
|
<Icon className={`w-3 h-3 ${active ? node.twColor : 'text-white/35'}`} />
|
|
</div>
|
|
<span className={`text-[10px] font-semibold leading-tight truncate ${active ? 'text-white' : 'text-white/55'}`}>
|
|
{node.title}
|
|
</span>
|
|
{active && (
|
|
<div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 animate-pulse ${node.twDot}`} />
|
|
)}
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<p className={`text-[8px] leading-snug pl-1 mb-1 ${active ? node.twColor : 'text-white/28'}`}
|
|
style={{ opacity: active ? 0.8 : 1 }}>
|
|
{node.subtitle}
|
|
</p>
|
|
|
|
{/* Badge */}
|
|
{node.badge && (
|
|
<div className="pl-1">
|
|
<span className={`text-[7px] px-1.5 py-[1px] rounded border transition-colors duration-200 ${
|
|
active ? `${node.twBorder} ${node.twColor}` : 'border-white/[0.08] text-white/22'
|
|
}`}>
|
|
{node.badge}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Token ticker on inference nodes */}
|
|
{active && node.tier === 'inference' && (
|
|
<div className="pl-1 mt-1.5">
|
|
<TokenTicker color={node.color} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Hub: spinning indicator ring */}
|
|
{isHub && active && (
|
|
<motion.div
|
|
className="absolute rounded-full pointer-events-none"
|
|
style={{ inset: -5, border: `1px dashed ${node.color}45`, borderRadius: '12px' }}
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 12, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</motion.button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Main slide ─────────────────────────────────────────────────────────────────
|
|
export default function ArchitectureSlide({ lang }: ArchitectureSlideProps) {
|
|
const i = t(lang)
|
|
const de = lang === 'de'
|
|
const nodes = getNodes(de)
|
|
|
|
const [activeId, setActiveId] = useState<NodeId | null>(null)
|
|
const active = nodes.find(n => n.id === activeId) ?? null
|
|
|
|
function toggle(id: NodeId) {
|
|
setActiveId(prev => (prev === id ? null : id))
|
|
}
|
|
|
|
const tenants = de
|
|
? ['Mandant A', 'Mandant B', 'Mandant C', 'Mandant N…']
|
|
: ['Namespace A', 'Namespace B', 'Namespace C', 'Namespace N…']
|
|
|
|
const tiers = [
|
|
{ y: '22%', label: de ? 'Anwendungsschicht' : 'Application Layer', clr: '#818cf8', badge: null },
|
|
{ y: '52%', label: de ? 'GenAI-Infrastruktur' : 'GenAI Infrastructure', clr: '#fbbf24', badge: de ? 'BSI-Rechenzentrum' : 'BSI Data Center' },
|
|
{ y: '82%', label: de ? 'Inferenzschicht' : 'Inference Layer', clr: '#60a5fa', badge: de ? 'BSI · EU-Souverän' : 'BSI · EU Sovereign' },
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{/* Header */}
|
|
<FadeInView className="text-center mb-3">
|
|
<p className="text-[10px] font-mono text-indigo-400/50 uppercase tracking-widest mb-1.5">
|
|
{de ? 'Anhang' : 'Appendix'}
|
|
</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-1.5">
|
|
<GradientText>{i.annex.architecture.title}</GradientText>
|
|
</h2>
|
|
<p className="text-xs text-white/35">
|
|
{de ? 'Klicke auf eine Komponente für Details' : 'Click any component to explore'}
|
|
</p>
|
|
</FadeInView>
|
|
|
|
<FadeInView delay={0.15} className="space-y-3">
|
|
{/* Customer namespace strip */}
|
|
<div className="flex items-center gap-2 flex-wrap px-[4%]">
|
|
<Users className="w-3 h-3 text-white/25 flex-shrink-0" />
|
|
<span className="text-[9px] font-mono text-white/25 uppercase tracking-widest mr-1">
|
|
{de ? 'Kundenmandanten' : 'Customer Namespaces'}
|
|
</span>
|
|
{tenants.map(tn => (
|
|
<span key={tn}
|
|
className="text-[9px] px-2 py-0.5 rounded-full border border-white/[0.08] bg-white/[0.03] text-white/35 font-mono">
|
|
{tn}
|
|
</span>
|
|
))}
|
|
<div className="flex-1 h-px bg-gradient-to-r from-white/10 to-transparent ml-1" />
|
|
</div>
|
|
|
|
{/* ── MAP ──────────────────────────────────────────────────────────── */}
|
|
<div className="relative w-full" style={{ height: '410px' }}>
|
|
|
|
{/* Background */}
|
|
<div className="absolute inset-0 rounded-xl overflow-hidden"
|
|
style={{
|
|
background: `
|
|
radial-gradient(ellipse 50% 30% at 50% 52%, rgba(251,191,36,0.06) 0%, transparent 65%),
|
|
radial-gradient(ellipse 60% 22% at 50% 22%, rgba(129,140,248,0.07) 0%, transparent 55%),
|
|
radial-gradient(ellipse 60% 20% at 50% 82%, rgba(96,165,250,0.045) 0%, transparent 55%),
|
|
linear-gradient(170deg, #030d1e 0%, #040f21 50%, #030c1b 100%)
|
|
`,
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 opacity-[0.04]"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle, #6b7280 1px, transparent 1px)',
|
|
backgroundSize: '22px 22px',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Tier separator lines */}
|
|
{['37%', '66%'].map(y => (
|
|
<div key={y} className="absolute left-0 right-0 h-px pointer-events-none"
|
|
style={{ top: y, background: 'linear-gradient(to right, transparent 0%, rgba(255,255,255,0.055) 15%, rgba(255,255,255,0.055) 85%, transparent 100%)' }}
|
|
/>
|
|
))}
|
|
|
|
{/* Tier labels (left) + BSI badges (right) */}
|
|
{tiers.map(({ y, label, clr, badge }) => (
|
|
<div key={label} className="absolute inset-x-0 flex items-center justify-between px-3 pointer-events-none select-none"
|
|
style={{ top: y, transform: 'translateY(-50%)' }}>
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="w-2.5 h-px" style={{ background: clr, opacity: 0.3 }} />
|
|
<span className="text-[7.5px] font-mono tracking-[0.14em] uppercase" style={{ color: clr, opacity: 0.42 }}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
{badge && (
|
|
<div className="flex items-center gap-1" style={{ opacity: 0.45 }}>
|
|
<BadgeCheck className="w-2.5 h-2.5" style={{ color: clr }} />
|
|
<span className="text-[7px] font-mono tracking-wider" style={{ color: clr }}>
|
|
{badge}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* MCP badge between COMPLAI and Scanner */}
|
|
<div
|
|
className="absolute text-[7px] px-2 py-[2px] rounded-full border border-emerald-500/35 text-emerald-400/65 font-mono tracking-wider select-none pointer-events-none"
|
|
style={{ left: '66%', top: '9%', transform: 'translate(-50%, -50%)' }}
|
|
>
|
|
MCP ↔
|
|
</div>
|
|
|
|
{/* Infra tech chips (secondary, very subtle, in the infra tier band) */}
|
|
<div className="absolute left-[5%] right-[5%] flex flex-wrap gap-1.5 pointer-events-none select-none"
|
|
style={{ top: '51.5%', transform: 'translateY(-50%)', paddingRight: '160px' }}>
|
|
{['PostgreSQL', 'MongoDB', 'Qdrant', 'Valkey', 'Nginx', 'Vault', 'Gitea', 'Orca', 'Woodpecker'].map(chip => (
|
|
<span key={chip}
|
|
className="text-[6.5px] px-1.5 py-[1px] rounded border border-white/[0.055] text-white/14 font-mono">
|
|
{chip}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* SVG: island territories + data-flow paths */}
|
|
<svg className="absolute inset-0 w-full h-full pointer-events-none"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none">
|
|
|
|
{/* Tier zone fills */}
|
|
<rect x="0" y="0" width="100" height="37" fill="#818cf8" fillOpacity="0.018" />
|
|
<rect x="0" y="37" width="100" height="29" fill="#fbbf24" fillOpacity="0.022" />
|
|
<rect x="0" y="66" width="100" height="34" fill="#60a5fa" fillOpacity="0.015" />
|
|
|
|
{/* Island blobs per node */}
|
|
{nodes.map(n => {
|
|
const isHub = n.id === 'litellm'
|
|
const isActive = activeId === n.id
|
|
return (
|
|
<g key={`blob-${n.id}`}>
|
|
<ellipse cx={n.cx} cy={n.cy}
|
|
rx={isHub ? 14 : 8} ry={isHub ? 8.5 : 5}
|
|
fill={n.color} fillOpacity={isActive ? 0.13 : 0.038}
|
|
stroke={n.color} strokeWidth={0.5}
|
|
strokeOpacity={isActive ? 0.35 : 0.09}
|
|
strokeDasharray={isHub ? undefined : '1.5 3.5'}
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
</g>
|
|
)
|
|
})}
|
|
|
|
{/* Connection flows */}
|
|
{CONNS.map(c => {
|
|
const fromNode = nodes.find(n => n.id === c.from)!
|
|
const toNode = nodes.find(n => n.id === c.to)!
|
|
const isActive = activeId === c.from || activeId === c.to
|
|
const color = isActive
|
|
? (activeId === c.from ? fromNode.color : toNode.color)
|
|
: '#ffffff'
|
|
return (
|
|
<DataFlow
|
|
key={`${c.from}-${c.to}`}
|
|
d={c.d} revD={c.revD}
|
|
color={color} active={isActive} type={c.type}
|
|
/>
|
|
)
|
|
})}
|
|
</svg>
|
|
|
|
{/* Node cards */}
|
|
{nodes.map(node => (
|
|
<NodeCard
|
|
key={node.id}
|
|
node={node}
|
|
active={activeId === node.id}
|
|
onClick={() => toggle(node.id)}
|
|
de={de}
|
|
/>
|
|
))}
|
|
|
|
{!activeId && (
|
|
<div className="absolute bottom-3 right-3 flex items-center gap-1 text-[8px] text-white/18 pointer-events-none">
|
|
<ChevronRight className="w-3 h-3" />
|
|
{de ? 'Komponente anklicken' : 'Click any node'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── DETAIL PANEL ──────────────────────────────────────────────────── */}
|
|
<AnimatePresence>
|
|
{active && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 8 }}
|
|
transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
|
|
className={`relative rounded-2xl border ${active.twBorder} ${active.twBg} p-4`}
|
|
style={{ boxShadow: `0 0 32px -10px ${active.color}45` }}
|
|
>
|
|
<button
|
|
onClick={() => setActiveId(null)}
|
|
className="absolute top-3 right-3 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
|
|
>
|
|
<X className="w-3 h-3 text-white/50" />
|
|
</button>
|
|
|
|
{/* Header */}
|
|
<div className="flex items-start gap-3 mb-4">
|
|
<div className={`w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0 border ${active.twBorder} ${active.twBg}`}>
|
|
<active.icon className={`w-5 h-5 ${active.twColor}`} />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<h3 className="text-sm font-bold text-white">{active.title}</h3>
|
|
{active.badge && (
|
|
<span className={`text-[9px] px-1.5 py-0.5 rounded uppercase font-semibold tracking-wider border ${active.twBorder} ${active.twColor}`}>
|
|
{active.badge}
|
|
</span>
|
|
)}
|
|
<span className={`text-[8px] px-1.5 py-0.5 rounded border border-white/10 text-white/35`}>
|
|
{active.tier === 'product' ? (de ? 'Anwendungsschicht' : 'Application Layer') :
|
|
active.tier === 'proxy' ? (de ? 'GenAI-Infrastruktur' : 'GenAI Infra') :
|
|
(de ? 'Inferenzschicht' : 'Inference Layer')}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-white/45 mt-0.5">{active.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="grid grid-cols-2 gap-5">
|
|
<div>
|
|
<p className="text-[9px] uppercase tracking-widest text-white/30 mb-2 font-semibold">
|
|
{de ? 'Stack' : 'Tech Stack'}
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{active.tech.map(tk => (
|
|
<span key={tk} className="text-[10px] px-2 py-0.5 rounded bg-white/[0.05] border border-white/[0.08] text-white/55 font-mono">
|
|
{tk}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] uppercase tracking-widest text-white/30 mb-2 font-semibold">
|
|
{de ? 'Funktionen' : 'Capabilities'}
|
|
</p>
|
|
<div className="space-y-1.5">
|
|
{active.services.map(s => (
|
|
<div key={s.name} className="flex items-start gap-2">
|
|
<div className={`w-1 h-1 rounded-full mt-1.5 flex-shrink-0 ${active.twDot} opacity-70`} />
|
|
<div className="min-w-0">
|
|
<span className="text-xs font-semibold text-white/80">{s.name}</span>
|
|
<span className="text-[10px] text-white/40 ml-1.5">{s.desc}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connects-to */}
|
|
<div className="mt-3 pt-3 border-t border-white/[0.06] flex items-center gap-2 flex-wrap">
|
|
<Network className="w-3 h-3 text-white/20 flex-shrink-0" />
|
|
<span className="text-[9px] text-white/30">
|
|
{de ? 'Verbunden mit:' : 'Connects to:'}
|
|
</span>
|
|
{CONNS
|
|
.filter(c => c.from === active.id || c.to === active.id)
|
|
.map(c => {
|
|
const peerId = c.from === active.id ? c.to : c.from
|
|
const peer = nodes.find(n => n.id === peerId)!
|
|
const label = c.type === 'mcp' ? 'MCP' : c.type === 'embed' ? 'Embed' : c.type === 'tool' ? 'Tool' : 'API'
|
|
return (
|
|
<button
|
|
key={peerId}
|
|
onClick={() => setActiveId(peerId)}
|
|
className={`text-[9px] px-2 py-0.5 rounded-full border ${peer.twBorder} ${peer.twColor} transition-opacity hover:opacity-80 flex items-center gap-1`}
|
|
>
|
|
{peer.title}
|
|
<span className="opacity-50 text-[7px]">{label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Bottom legend */}
|
|
{!active && (
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}
|
|
className="flex items-center justify-center gap-6 flex-wrap">
|
|
{[
|
|
{ icon: Lock, text: de ? 'Kein US-Anbieter · 100% DSGVO' : 'No US providers · 100% GDPR' },
|
|
{ icon: Server, text: de ? 'BSI-zertifiziertes Rechenzentrum' : 'BSI-certified data center' },
|
|
{ icon: BadgeCheck, text: de ? 'EU-souveräne Inferenz' : 'EU-sovereign inference' },
|
|
].map(({ icon: Icon, text }) => (
|
|
<span key={text} className="flex items-center gap-1.5 text-[10px] text-white/22">
|
|
<Icon className="w-3 h-3" />
|
|
{text}
|
|
</span>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</FadeInView>
|
|
</div>
|
|
)
|
|
}
|