{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "vector-embeddings-inspector", "title": "Vector Embeddings Inspector", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/vector-embeddings-inspector/VectorEmbeddingsInspector.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Binary,\n Check,\n Compass,\n Copy,\n Cpu,\n Database,\n Eye,\n FileCode,\n FileText,\n HardDrive,\n Layers,\n RefreshCw,\n Search,\n Sparkles,\n Zap,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport interface VectorEmbeddingsInspectorProps {\n className?: string\n}\n\ninterface SearchResultItem {\n id: string\n vectorId: string\n score: number\n cosineDistance: number\n title: string\n namespace: 'docs' | 'blog' | 'api' | 'helpdesk'\n filePath: string\n chunkIndex: number\n totalChunks: number\n tokenCount: number\n updatedAt: string\n snippet: string\n vectorSample: number[]\n}\n\ninterface DimensionSample {\n index: number\n dimIndex: number\n value: number\n rawDimName: string\n}\n\n// Index specifications\nconst indexMetadata = {\n name: 'kb-docs-embeddings-v3',\n status: 'Index Ready · Sub-10ms p99',\n metric: 'Cosine Similarity',\n dimensionModel: '1536-dim · OpenAI text-embedding-3-small',\n totalVectors: '482,910 Vectors',\n shards: 4,\n replicas: 2,\n engine: 'HNSW Graph (M=16, efConstruction=200)',\n memoryTotal: '3.8 GB RAM',\n hnswMemory: '2.9 GB',\n vectorMemory: '0.9 GB',\n cacheHitRate: 99.4,\n p99Latency: '8.4ms',\n p50Latency: '2.1ms',\n p95Latency: '5.6ms',\n qpsPeak: '1,420 QPS',\n namespacesCount: 4,\n}\n\n// Telemetry overview\nconst telemetryCards = [\n {\n title: 'Total Indexed Vectors',\n value: '482,910',\n subtitle: '+14,280 indexed today',\n badge: '4 Shards Active',\n badgeVariant: 'secondary' as const,\n metricDetails: '100% synchronized · 0 unindexed docs',\n icon: Database,\n },\n {\n title: 'Index Memory Footprint',\n value: '3.8 GB RAM',\n subtitle: 'HNSW: 2.9 GB · Raw Vectors: 0.9 GB',\n badge: '99.4% Cache Hit',\n badgeVariant: 'outline' as const,\n metricDetails: 'Compressed FP16 · Inverted index',\n icon: Cpu,\n },\n {\n title: 'Query Latency (p99)',\n value: '8.4ms',\n subtitle: 'p50: 2.1ms · p95: 5.6ms',\n badge: '1,420 QPS Peak',\n badgeVariant: 'secondary' as const,\n metricDetails: 'Sub-10ms SLA guaranteed',\n icon: Zap,\n },\n {\n title: 'Index Namespaces',\n value: '4 Namespaces',\n subtitle: 'docs, helpdesk, blog, api',\n badge: 'Multi-Tenant',\n badgeVariant: 'outline' as const,\n metricDetails: 'docs: 240k · helpdesk: 118k',\n icon: Layers,\n },\n]\n\n// Query presets\nconst queryPresets = [\n 'How do I configure OKLCH color palettes in Tailwind v4?',\n 'Vector quantization & memory footprint reduction',\n 'Dual-framework Vue and React component sync',\n 'Handling cosine distance thresholds for hybrid search',\n]\n\n// Query vector 32 float samples (simulated 1536-dim projection)\nconst queryVectorSample = [\n -0.048, 0.135, 0.092, -0.018, 0.245, -0.11, 0.049, 0.174, -0.082, 0.001, 0.325, -0.059, 0.097, 0.191, -0.149, 0.068,\n -0.024, 0.212, 0.082, -0.094, 0.121, -0.037, 0.156, 0.031, -0.172, 0.099, 0.056, -0.078, 0.195, -0.013, 0.072, 0.141,\n]\n\n// Hardcoded search results with full vector dimensions\nconst allSearchResults: SearchResultItem[] = [\n {\n id: 'res-1',\n vectorId: '#vec_849201',\n score: 0.942,\n cosineDistance: 0.058,\n title: 'Tailwind v4 OKLCH Architecture',\n namespace: 'docs',\n filePath: 'docs/styling/tailwind-v4-oklch.md',\n chunkIndex: 3,\n totalChunks: 8,\n tokenCount: 384,\n updatedAt: '2 hours ago',\n snippet:\n 'Tailwind CSS v4 introduces native CSS-first token configuration with `@theme inline` and OKLCH color spaces. In contrast to RGB/HSL, OKLCH ensures perceptually uniform lightness across hues, preventing contrast degradation in dark mode variants while preserving single-source token truth.',\n vectorSample: [\n -0.042, 0.128, 0.089, -0.015, 0.231, -0.104, 0.045, 0.167, -0.078, 0.002, 0.312, -0.054, 0.091, 0.183, -0.142,\n 0.063, -0.021, 0.204, 0.077, -0.089, 0.115, -0.034, 0.149, 0.028, -0.165, 0.094, 0.052, -0.073, 0.188, -0.011,\n 0.067, 0.134,\n ],\n },\n {\n id: 'res-2',\n vectorId: '#vec_739104',\n score: 0.887,\n cosineDistance: 0.113,\n title: 'Color Tokens Derivation Guide',\n namespace: 'docs',\n filePath: 'docs/tokens/color-derivation.md',\n chunkIndex: 1,\n totalChunks: 5,\n tokenCount: 412,\n updatedAt: '1 day ago',\n snippet:\n 'Deriving consistent dark-mode contrasts requires anchoring chroma and shifting lightness along the OKLCH L-axis. Use `--color-primary: oklch(0.65 0.22 260)` for vibrant interactive states and calibrate border contrast with `--color-border: oklch(0.28 0.01 260)` for WCAG AA compliance.',\n vectorSample: [\n -0.038, 0.119, 0.074, -0.029, 0.198, -0.088, 0.032, 0.145, -0.065, 0.018, 0.284, -0.041, 0.082, 0.161, -0.125,\n 0.051, -0.015, 0.189, 0.062, -0.075, 0.098, -0.026, 0.131, 0.019, -0.148, 0.081, 0.044, -0.061, 0.162, -0.008,\n 0.055, 0.118,\n ],\n },\n {\n id: 'res-3',\n vectorId: '#vec_610482',\n score: 0.824,\n cosineDistance: 0.176,\n title: 'Design Systems Monorepo Guide',\n namespace: 'blog',\n filePath: 'blog/2026/design-systems-monorepo.md',\n chunkIndex: 5,\n totalChunks: 12,\n tokenCount: 526,\n updatedAt: '3 days ago',\n snippet:\n 'When architecting a dual-framework registry (Vue + React), shared design tokens must compile cleanly without runtime overhead. We leverage modern CSS custom properties and PostCSS pipelines to mirror CVA component variants across both frameworks with zero extra runtime.',\n vectorSample: [\n -0.015, 0.082, 0.061, -0.045, 0.154, -0.062, 0.021, 0.112, -0.049, 0.034, 0.215, -0.028, 0.064, 0.128, -0.098,\n 0.039, -0.008, 0.142, 0.048, -0.058, 0.074, -0.018, 0.099, 0.012, -0.112, 0.062, 0.031, -0.045, 0.124, -0.004,\n 0.041, 0.089,\n ],\n },\n {\n id: 'res-4',\n vectorId: '#vec_552109',\n score: 0.768,\n cosineDistance: 0.232,\n title: 'API Embedding Ingestion Pipeline',\n namespace: 'api',\n filePath: 'api/v1/embeddings/ingest-worker.ts',\n chunkIndex: 2,\n totalChunks: 6,\n tokenCount: 340,\n updatedAt: '5 days ago',\n snippet:\n 'Batch ingestion pipelines chunk markdown documents at 512-token boundaries with 64-token sliding window overlap before sending to the embedding model endpoint. Vector metadata records store namespace tags, checksum hashes, and parent chunk UUIDs for deterministic cache validation.',\n vectorSample: [\n 0.024, 0.051, 0.038, -0.062, 0.112, -0.041, 0.008, 0.078, -0.032, 0.051, 0.162, -0.015, 0.042, 0.094, -0.071,\n 0.022, 0.004, 0.105, 0.031, -0.041, 0.052, -0.009, 0.071, 0.005, -0.084, 0.045, 0.019, -0.031, 0.088, 0.002,\n 0.028, 0.062,\n ],\n },\n {\n id: 'res-5',\n vectorId: '#vec_419820',\n score: 0.715,\n cosineDistance: 0.285,\n title: 'Troubleshooting Semantic Search Discrepancies',\n namespace: 'helpdesk',\n filePath: 'helpdesk/kb/search-accuracy-faq.md',\n chunkIndex: 4,\n totalChunks: 7,\n tokenCount: 295,\n updatedAt: '1 week ago',\n snippet:\n 'When semantic ranking diverges from keyword relevance, verify tokenizer parity between query embedding model and index model. Cosine thresholds below 0.75 should trigger hybrid search fallback using sparse BM25 reranking to recover exact keyword lexical matches.',\n vectorSample: [\n 0.042, 0.031, 0.019, -0.078, 0.084, -0.025, -0.005, 0.052, -0.019, 0.068, 0.118, -0.008, 0.028, 0.067, -0.052,\n 0.011, 0.015, 0.074, 0.018, -0.029, 0.036, -0.002, 0.048, -0.004, -0.061, 0.029, 0.008, -0.019, 0.061, 0.008,\n 0.015, 0.041,\n ],\n },\n]\n\nfunction getNamespaceBadgeClass(namespace: string) {\n switch (namespace) {\n case 'docs':\n return 'bg-info/10 text-info border-info/20'\n case 'blog':\n return 'bg-chart-1/10 text-chart-1 border-chart-1/20'\n case 'api':\n return 'bg-success/10 text-success border-success/20'\n case 'helpdesk':\n return 'bg-warning/10 text-warning border-warning/20'\n default:\n return 'bg-secondary text-secondary-foreground'\n }\n}\n\nfunction getScoreColorClass(score: number) {\n if (score >= 0.9) return 'text-success'\n if (score >= 0.8) return 'text-info'\n return 'text-warning'\n}\n\nfunction getHeatmapCellClass(val: number, isSelected: boolean) {\n let baseColor = ''\n if (val >= 0.2) {\n baseColor = 'bg-success/25 border-success/40 text-success hover:bg-success/35'\n } else if (val >= 0.08) {\n baseColor = 'bg-success/15 border-success/25 text-success hover:bg-success/25'\n } else if (val >= 0.0) {\n baseColor = 'bg-primary/10 border-primary/20 text-foreground hover:bg-primary/20'\n } else if (val >= -0.08) {\n baseColor = 'bg-warning/10 border-warning/25 text-warning hover:bg-warning/20'\n } else {\n baseColor = 'bg-destructive/20 border-destructive/35 text-destructive hover:bg-destructive/30'\n }\n\n const selectedRing = isSelected ? 'ring-2 ring-primary ring-offset-1 ring-offset-background z-10 font-bold' : ''\n return cn(baseColor, selectedRing)\n}\n\nexport function VectorEmbeddingsInspector({ className }: VectorEmbeddingsInspectorProps) {\n const [searchQuery, setSearchQuery] = React.useState('How do I configure OKLCH color palettes in Tailwind v4?')\n const [topK, setTopK] = React.useState('3')\n const [selectedNamespace, setSelectedNamespace] = React.useState('all')\n const [isSearching, setIsSearching] = React.useState(false)\n const [searchExecutionLatency, setSearchExecutionLatency] = React.useState('3.4ms')\n const [embeddingLatency, setEmbeddingLatency] = React.useState('18.2ms')\n const [copiedVectorId, setCopiedVectorId] = React.useState(null)\n const [copiedFloats, setCopiedFloats] = React.useState(false)\n const [rawJsonExpanded, setRawJsonExpanded] = React.useState(false)\n\n const [activeVisualizerTarget, setActiveVisualizerTarget] = React.useState<'query' | string>('query')\n const [selectedDimensionIndex, setSelectedDimensionIndex] = React.useState(10)\n\n const visibleResults = React.useMemo(() => {\n let list = allSearchResults\n if (selectedNamespace !== 'all') {\n list = list.filter((r) => r.namespace === selectedNamespace)\n }\n const k = parseInt(topK, 10) || 3\n return list.slice(0, k)\n }, [topK, selectedNamespace])\n\n const activeVectorData = React.useMemo(() => {\n if (activeVisualizerTarget === 'query') {\n return {\n label: 'Query Embedding Vector (Prompt Projection)',\n vectorId: '#vec_query_input',\n sample: queryVectorSample,\n source: 'OpenAI text-embedding-3-small · Live query tensor',\n }\n }\n const found = allSearchResults.find((r) => r.id === activeVisualizerTarget)\n if (found) {\n return {\n label: `Doc Vector: ${found.title}`,\n vectorId: found.vectorId,\n sample: found.vectorSample,\n source: `${found.namespace} namespace · ${found.filePath}`,\n }\n }\n return {\n label: 'Query Embedding Vector',\n vectorId: '#vec_query_input',\n sample: queryVectorSample,\n source: 'Live query tensor',\n }\n }, [activeVisualizerTarget])\n\n const dimensionSamples = React.useMemo(() => {\n const values = activeVectorData.sample\n return values.map((val, idx) => ({\n index: idx,\n dimIndex: idx * 48,\n value: val,\n rawDimName: `dim_${String(idx * 48).padStart(4, '0')}`,\n }))\n }, [activeVectorData])\n\n const currentDimension = React.useMemo(() => {\n const target = dimensionSamples[selectedDimensionIndex] || dimensionSamples[0]\n const val = target.value\n const absVal = Math.abs(val)\n const maxVal = 0.325\n const magnitudePercent = Math.min(100, Math.round((absVal / maxVal) * 100))\n return {\n ...target,\n magnitudePercent,\n sign: val >= 0 ? 'Positive (+)' : 'Negative (-)',\n activation: absVal > 0.2 ? 'Strong Activation' : absVal > 0.08 ? 'Moderate Activation' : 'Near Zero / Baseline',\n }\n }, [dimensionSamples, selectedDimensionIndex])\n\n const runSearch = React.useCallback(() => {\n setIsSearching(true)\n setTimeout(() => {\n setIsSearching(false)\n setSearchExecutionLatency((2.8 + Math.random() * 1.8).toFixed(1) + 'ms')\n setEmbeddingLatency((16.5 + Math.random() * 3.5).toFixed(1) + 'ms')\n }, 320)\n }, [])\n\n const selectPreset = (preset: string) => {\n setSearchQuery(preset)\n runSearch()\n }\n\n const copyVectorId = (id: string) => {\n navigator.clipboard?.writeText(id)\n setCopiedVectorId(id)\n setTimeout(() => setCopiedVectorId(null), 2000)\n }\n\n const copyFloatsArray = () => {\n const jsonStr = JSON.stringify(activeVectorData.sample, null, 2)\n navigator.clipboard?.writeText(jsonStr)\n setCopiedFloats(true)\n setTimeout(() => setCopiedFloats(false), 2000)\n }\n\n return (\n
\n {/* Header Section */}\n \n \n
\n
\n
\n
\n \n

\n {indexMetadata.name}\n

\n
\n \n \n {indexMetadata.status}\n \n
\n

\n Vector index telemetry, approximate nearest neighbor (ANN) similarity tester, and 1536-dimensional\n tensor inspector.\n

\n
\n\n
\n \n \n Test Similarity Search\n \n
\n
\n\n {/* Metric Badges Row */}\n
\n \n \n Metric:\n {indexMetadata.metric}\n \n\n \n \n Embedding:\n {indexMetadata.dimensionModel}\n \n\n \n \n {indexMetadata.totalVectors}\n \n\n \n \n Engine:\n {indexMetadata.engine}\n \n
\n \n \n\n {/* 4 Vector Telemetry Cards */}\n
\n {telemetryCards.map((card) => {\n const IconComp = card.icon\n return (\n \n \n \n {card.title}\n \n \n \n \n
\n {card.value}\n \n {card.badge}\n \n
\n

{card.subtitle}

\n
{card.metricDetails}
\n \n \n )\n })}\n
\n\n {/* Interactive Vector Similarity Search Playground */}\n \n \n
\n
\n
\n \n Interactive Similarity Search Playground\n
\n \n Execute live vector similarity lookups against the HNSW index and inspect cosine distance scores.\n \n
\n
\n Index Latency:\n {searchExecutionLatency}\n
\n
\n \n\n \n {/* Search Input & Quick Controls */}\n
\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Enter query to vectorize and search...\"\n className=\"pr-8 pl-9 text-xs sm:text-sm\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') runSearch()\n }}\n />\n {searchQuery && (\n setSearchQuery('')}\n >\n ✕\n \n )}\n
\n\n {/* Top-K Selector */}\n
\n {\n setTopK(val)\n runSearch()\n }}\n >\n \n \n \n \n Top 3 Results\n Top 5 Results\n Top 10 Results\n \n \n\n {/* Namespace Filter */}\n {\n setSelectedNamespace(val)\n runSearch()\n }}\n >\n \n \n \n \n All Namespaces (4)\n docs (240k)\n blog (84k)\n api (40k)\n helpdesk (118k)\n \n \n\n \n {!isSearching ? : }\n Search\n \n
\n
\n\n {/* Query Preset Pills */}\n
\n Try Query:\n {queryPresets.map((preset) => (\n selectPreset(preset)}\n >\n {preset}\n \n ))}\n
\n
\n\n {/* Query Vectorization Banner */}\n
\n
\n \n
\n Query Vector Generated:\n \n Vectorized in{' '}\n {embeddingLatency} via{' '}\n text-embedding-3-small (1536 float32 values)\n \n
\n
\n setActiveVisualizerTarget('query')}\n >\n \n Inspect Query Vector\n \n
\n\n \n\n {/* Search Results List */}\n
\n
\n

\n Similarity Search Results ({visibleResults.length} matches)\n

\n \n Metric: Cosine Similarity · Threshold ≥ 0.70\n \n
\n\n
\n {visibleResults.map((result, index) => (\n \n
\n {/* Top metadata row */}\n
\n
\n \n #{index + 1}\n \n

{result.title}

\n \n {result.namespace}\n \n
\n \n {result.vectorId}\n \n copyVectorId(result.vectorId)}\n >\n {copiedVectorId === result.vectorId ? (\n \n ) : (\n \n )}\n \n
\n
\n\n {/* Scores */}\n
\n
\n Cosine Similarity:\n \n {result.score.toFixed(3)}\n \n
\n
\n Distance:\n \n {result.cosineDistance.toFixed(3)}\n \n
\n
\n
\n\n {/* Match score bar */}\n
\n
\n Similarity Match\n {(result.score * 100).toFixed(1)}%\n
\n \n
\n\n {/* Chunk text snippet */}\n
\n

\n Chunk #{result.chunkIndex} of {result.totalChunks} · {result.filePath}\n

\n

{result.snippet}

\n
\n\n {/* Bottom action row */}\n
\n
\n \n \n {result.tokenCount} tokens\n \n •\n Updated {result.updatedAt}\n
\n\n setActiveVisualizerTarget(result.id)}\n >\n \n Inspect 1536-Dim Heatmap\n \n
\n
\n
\n ))}\n
\n
\n \n \n\n {/* Vector Dimension Array Visualizer */}\n \n \n
\n
\n
\n \n Vector Dimension Array Visualizer\n
\n \n Visual color-coded 32-sample heatmap of the 1536 float values. Select dimensions to inspect activation\n magnitude.\n \n
\n\n
\n \n setRawJsonExpanded((prev) => !prev)}\n >\n \n {rawJsonExpanded ? 'Hide Raw JSON' : 'View Raw Floats'}\n \n
\n
\n\n {/* Target Vector Selector Tabs */}\n
\n Inspecting:\n setActiveVisualizerTarget('query')}\n >\n Query Vector\n \n {visibleResults.map((res, idx) => (\n setActiveVisualizerTarget(res.id)}\n >\n #{idx + 1} {res.vectorId}\n \n ))}\n
\n \n\n \n {/* Target Vector Metadata Banner */}\n
\n
\n
{activeVectorData.label}
\n
{activeVectorData.source}
\n
\n
\n
\n L2 Norm:{' '}\n 1.0000 (Unit)\n
\n
\n Dimensions:{' '}\n 1,536 floats\n
\n
\n Format:{' '}\n FP32 Dense\n
\n
\n
\n\n {/* 32-Sample Heatmap Grid */}\n
\n
\n \n Sampled 32 Float Dimensions (1 of every 48 tensor indices):\n \n
\n \n \n < -0.10\n \n \n \n -0.05\n \n \n \n ~0.00\n \n \n \n > +0.10\n \n
\n
\n\n
\n {dimensionSamples.map((sample) => (\n setSelectedDimensionIndex(sample.index)}\n >\n \n d{String(sample.dimIndex).padStart(4, '0')}\n \n \n {sample.value >= 0 ? '+' : ''}\n {sample.value.toFixed(3)}\n \n \n ))}\n
\n
\n\n {/* Selected Dimension Deep Dive Inspector */}\n
\n
\n
\n
\n \n {currentDimension.rawDimName}\n \n \n Dimension #{currentDimension.dimIndex} / 1536\n \n \n {currentDimension.activation}\n \n
\n

\n Tensor index {currentDimension.rawDimName} mapped from\n 1536-dimensional OpenAI text-embedding-3-small vector space.\n

\n
\n\n {/* Metric stats of the selected dimension */}\n
\n
\n
Float Value
\n
\n {currentDimension.value >= 0 ? '+' : ''}\n {currentDimension.value.toFixed(6)}\n
\n
\n
\n
Relative Magnitude
\n
\n {currentDimension.magnitudePercent}%\n
\n
\n
\n
Sign / Polarity
\n
{currentDimension.sign}
\n
\n
\n
\n\n {/* Magnitude bar */}\n
\n
\n Dimension Activation Magnitude vs Max Dimension (+0.325)\n {currentDimension.magnitudePercent}%\n
\n \n
\n
\n\n {/* Raw JSON Array Drawer (Collapsible) */}\n {rawJsonExpanded && (\n
\n
Raw FP32 Float Array (32 Sample Tensor):
\n 
\n                {JSON.stringify(activeVectorData.sample, null, 2)}\n
\n
\n )}\n \n \n \n )\n}\n\nexport default VectorEmbeddingsInspector\n", "type": "registry:block", "target": "~/components/blocks/VectorEmbeddingsInspector.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Pinecone & Qdrant style vector database index inspector, similarity search tester, and dimensionality explorer with cosine distance scoring, vector heatmap visualization, and namespace filtering.", "categories": [ "ai", "dashboard", "database", "app" ] }