"use client"; import { useState } from "react"; import Link from "next/link"; import { Cpu, Database, Layers, Sparkles, Search, Globe, Server, ArrowRight, CheckCircle2, } from "lucide-react"; interface NodeDetail { id: string; title: string; badge: string; type: "client" | "protocol" | "core" | "storage"; icon: any; desc: string; metrics: { label: string; value: string }[]; features: string[]; docLink?: string; } const NODES: NodeDetail[] = [ { id: "ai-agents", title: "AI Coding Agents", badge: "MCP::CLIENT", type: "client", icon: Sparkles, desc: "Claude Desktop, Cursor, Antigravity, and Zed connect via Model Context Protocol to read and write technical knowledge directly.", metrics: [ { label: "Transport", value: "Stdio / HTTP SSE" }, { label: "Tools Exposed", value: "13 Native Tools" }, { label: "Authentication", value: "x-webhook-secret" }, ], features: [ "Semantic similarity search over chunks", "Direct document CRUD into Postgres", "Context retrieval for debugging & CTF writeups", ], docLink: "/docs", }, { id: "web-ui", title: "Human Web Interface", badge: "UI::NEXTJS", type: "client", icon: Globe, desc: "Fast, accessible developer web interface with dark/light themes, keyboard shortcuts, and instant search.", metrics: [ { label: "Framework", value: "Next.js 16.3" }, { label: "Styling", value: "Tailwind CSS v4" }, { label: "Command Menu", value: "⌘K Omnisearch" }, ], features: [ "Hierarchical folder directory tree", "Publication-grade PDF export generator", "Live markdown editor with revision rollback", ], docLink: "/docs", }, { id: "mcp-server", title: "MCP Server Gateway", badge: "PORT::4021", type: "protocol", icon: Server, desc: "Streamable Model Context Protocol server exposing tool endpoints and resource URIs.", metrics: [ { label: "Port", value: ":4021" }, { label: "Protocol", value: "MCP 2024-11-05" }, { label: "Runtime", value: "Bun Engine" }, ], features: [ "get_document / create_document tools", "search_hybrid / search_semantic tools", "list_sections & list_revisions resources", ], docLink: "/api", }, { id: "core-engine", title: "@mcpedia/core", badge: "CORE::PACKAGE", type: "core", icon: Layers, desc: "Unified business logic layer shared across Web, MCP Server, REST API, and Background Workers.", metrics: [ { label: "Architecture", value: "Monorepo Package" }, { label: "Validation", value: "Strict Type Safety" }, { label: "Ranking", value: "RRF Hybrid Fusion" }, ], features: [ "Path classification & folder hierarchy", "Markdown document chunking & tokenization", "Drizzle ORM transactional schema mapping", ], docLink: "/research", }, { id: "search-engine", title: "Multi-Modal Search Engine", badge: "SEARCH::RRF", type: "core", icon: Search, desc: "Reciprocal Rank Fusion uniting Postgres Full-Text Search tsvectors with vector embeddings.", metrics: [ { label: "FTS Algorithm", value: "tsvector + GIN" }, { label: "Vector Search", value: "Cosine Similarity" }, { label: "Fusion Constant", value: "k = 60" }, ], features: [ "Sub-millisecond keyword retrieval", "Conceptual similarity matching", "Instant snippet generation with highlight markers", ], docLink: "/search", }, { id: "postgres-db", title: "PostgreSQL 16 + pgvector", badge: "DB::POSTGRES", type: "storage", icon: Database, desc: "ACID-compliant relational database storing document bodies, revision trees, vector embeddings, and full-text indexes.", metrics: [ { label: "Extension", value: "vector (1536 dim)" }, { label: "Backups", value: "Auto .md to disk" }, { label: "Isolation", value: "Transactional" }, ], features: [ "HNSW vector index for embeddings", "Complete revision history preservation", "Instant document schema migrations", ], docLink: "/docs", }, ]; export default function InteractiveTopology() { const [activeNodeId, setActiveNodeId] = useState("core-engine"); const activeNode = NODES.find((n) => n.id === activeNodeId) || NODES[0]; const ActiveIcon = activeNode.icon; return (
{/* Header Bar */}
Architecture Schematic

System Topology: Single Core Architecture

Click nodes to inspect
{/* Grid Layout */}
{/* Visual Map Column (Left) */}
{/* Layer 1: Clients */}
1. Ingestion & Access Layer
{NODES.filter((n) => n.type === "client").map((node) => { const Icon = node.icon; const isSelected = activeNodeId === node.id; return ( ); })}
{/* Flow Connector Arrow */}
↓ Protocol Gateway
{/* Layer 2: Protocol & Core Services */}
2. Core Engine & Protocol Layer
{NODES.filter((n) => n.type === "protocol" || n.type === "core").map((node) => { const Icon = node.icon; const isSelected = activeNodeId === node.id; return ( ); })}
{/* Flow Connector Arrow */}
↓ Persistent Storage Layer
{/* Layer 3: Storage */}
3. Database (Source of Truth) {NODES.filter((n) => n.type === "storage").map((node) => { const Icon = node.icon; const isSelected = activeNodeId === node.id; return ( ); })}
{/* Node Inspector Details Column (Right) */}
{/* Inspector Header */}

{activeNode.title}

{activeNode.badge}

{activeNode.desc}

{/* Telemetry Metrics */}
Specifications
{activeNode.metrics.map((m) => (
{m.label} {m.value}
))}
{/* Key Capabilities */}
Capabilities
    {activeNode.features.map((feat, idx) => (
  • ✓ {feat}
    • ))}
{/* Link to Documentation */} {activeNode.docLink && (
Read documentation
)}
); }