{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "vector-embeddings-inspector",
  "title": "Vector Embeddings Inspector",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/vector-embeddings-inspector/VectorEmbeddingsInspector.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\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\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\ndefineProps<Props>()\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\n// State variables\nconst searchQuery = ref('How do I configure OKLCH color palettes in Tailwind v4?')\nconst topK = ref('3')\nconst selectedNamespace = ref('all')\nconst isSearching = ref(false)\nconst searchExecutionLatency = ref('3.4ms')\nconst embeddingLatency = ref('18.2ms')\nconst copiedVectorId = ref<string | null>(null)\nconst copiedFloats = ref(false)\nconst rawJsonExpanded = ref(false)\n\n// Active vector for the visualizer: 'query' or result id ('res-1', 'res-2', etc.)\nconst activeVisualizerTarget = ref<'query' | string>('query')\nconst selectedDimensionIndex = ref<number>(10)\n\n// Filtered results based on topK and namespace\nconst visibleResults = computed(() => {\n  let list = allSearchResults\n  if (selectedNamespace.value !== 'all') {\n    list = list.filter((r) => r.namespace === selectedNamespace.value)\n  }\n  const k = parseInt(topK.value, 10) || 3\n  return list.slice(0, k)\n})\n\n// Determine which vector is currently being inspected in the 32-sample heatmap\nconst activeVectorData = computed<{\n  label: string\n  vectorId: string\n  sample: number[]\n  source: string\n}>(() => {\n  if (activeVisualizerTarget.value === '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.value)\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})\n\n// 32 dimension samples mapped\nconst dimensionSamples = computed<DimensionSample[]>(() => {\n  const values = activeVectorData.value.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})\n\n// Currently selected dimension info\nconst currentDimension = computed(() => {\n  const samples = dimensionSamples.value\n  const target = samples[selectedDimensionIndex.value] || samples[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    alignment: (0.85 + Math.sin(target.index * 1.5) * 0.14).toFixed(3),\n  }\n})\n\n// Trigger search simulation\nfunction runSearch() {\n  isSearching.value = true\n  setTimeout(() => {\n    isSearching.value = false\n    searchExecutionLatency.value = (2.8 + Math.random() * 1.8).toFixed(1) + 'ms'\n    embeddingLatency.value = (16.5 + Math.random() * 3.5).toFixed(1) + 'ms'\n  }, 320)\n}\n\nfunction selectPreset(preset: string) {\n  searchQuery.value = preset\n  runSearch()\n}\n\nfunction clearQuery() {\n  searchQuery.value = ''\n}\n\nfunction inspectVector(resultId: string) {\n  activeVisualizerTarget.value = resultId\n}\n\nfunction copyVectorId(id: string) {\n  navigator.clipboard?.writeText(id)\n  copiedVectorId.value = id\n  setTimeout(() => {\n    copiedVectorId.value = null\n  }, 2000)\n}\n\nfunction copyFloatsArray() {\n  const jsonStr = JSON.stringify(activeVectorData.value.sample, null, 2)\n  navigator.clipboard?.writeText(jsonStr)\n  copiedFloats.value = true\n  setTimeout(() => {\n    copiedFloats.value = false\n  }, 2000)\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</script>\n\n<template>\n  <div :class=\"cn('w-full space-y-6', $props.class)\">\n    <!-- Header Section -->\n    <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n          <div class=\"space-y-1.5\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Database class=\"text-primary size-5\" />\n                <h1 class=\"text-foreground text-lg font-semibold tracking-tight sm:text-xl\">\n                  {{ indexMetadata.name }}\n                </h1>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1.5 font-medium\">\n                <span class=\"bg-success inline-block size-1.5 animate-pulse rounded-full\" />\n                {{ indexMetadata.status }}\n              </Badge>\n            </div>\n            <p class=\"text-muted-foreground text-xs sm:text-sm\">\n              Vector index telemetry, approximate nearest neighbor (ANN) similarity tester, and 1536-dimensional tensor\n              inspector.\n            </p>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button variant=\"default\" size=\"sm\" class=\"gap-1.5 shadow-xs\" :disabled=\"isSearching\" @click=\"runSearch\">\n              <RefreshCw :class=\"cn('size-3.5', isSearching && 'animate-spin')\" />\n              <span>Test Similarity Search</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Metric Badges Row -->\n        <div class=\"border-border/60 mt-3 flex flex-wrap items-center gap-2 border-t pt-3\">\n          <Badge wrap variant=\"outline\" class=\"gap-1 text-xs\">\n            <Compass class=\"text-muted-foreground size-3\" />\n            <span class=\"text-muted-foreground\">Metric:</span>\n            <span class=\"text-foreground font-medium\">{{ indexMetadata.metric }}</span>\n          </Badge>\n\n          <Badge wrap variant=\"outline\" class=\"gap-1 text-xs\">\n            <Cpu class=\"text-muted-foreground size-3\" />\n            <span class=\"text-muted-foreground\">Embedding:</span>\n            <span class=\"text-foreground font-medium\">{{ indexMetadata.dimensionModel }}</span>\n          </Badge>\n\n          <Badge wrap variant=\"secondary\" class=\"gap-1 text-xs\">\n            <Binary class=\"text-muted-foreground size-3\" />\n            <span class=\"text-foreground font-semibold tabular-nums\">{{ indexMetadata.totalVectors }}</span>\n          </Badge>\n\n          <Badge wrap variant=\"outline\" class=\"gap-1 text-xs\">\n            <HardDrive class=\"text-muted-foreground size-3\" />\n            <span class=\"text-muted-foreground\">Engine:</span>\n            <span class=\"text-foreground font-mono text-xs\">{{ indexMetadata.engine }}</span>\n          </Badge>\n        </div>\n      </CardHeader>\n    </Card>\n\n    <!-- 4 Vector Telemetry Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card\n        v-for=\"card in telemetryCards\"\n        :key=\"card.title\"\n        class=\"border-border bg-card text-card-foreground shadow-xs transition-colors\"\n      >\n        <CardHeader class=\"flex flex-row items-center justify-between pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            {{ card.title }}\n          </CardTitle>\n          <component :is=\"card.icon\" class=\"text-muted-foreground size-4\" />\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n              {{ card.value }}\n            </span>\n            <Badge wrap :variant=\"card.badgeVariant\" class=\"text-xs\">\n              {{ card.badge }}\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            {{ card.subtitle }}\n          </p>\n          <div class=\"border-border/60 text-muted-foreground border-t pt-2 text-xs\">\n            {{ card.metricDetails }}\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Interactive Vector Similarity Search Playground -->\n    <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-col gap-2 md:flex-row md:items-center md:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Search class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-semibold\">Interactive Similarity Search Playground</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Execute live vector similarity lookups against the HNSW index and inspect cosine distance scores.\n            </CardDescription>\n          </div>\n          <div class=\"flex flex-wrap items-center gap-2 text-xs\">\n            <span class=\"text-muted-foreground\">Index Latency:</span>\n            <span class=\"text-foreground font-mono font-medium tabular-nums\">{{ searchExecutionLatency }}</span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-5\">\n        <!-- Search Input & Quick Controls -->\n        <div class=\"space-y-3\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n            <div class=\"relative flex-1\">\n              <Search class=\"text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2\" />\n              <Input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                placeholder=\"Enter query to vectorize and search...\"\n                class=\"pr-8 pl-9 text-xs sm:text-sm\"\n                @keyup.enter=\"runSearch\"\n              />\n              <button\n                v-if=\"searchQuery\"\n                class=\"text-muted-foreground hover:text-foreground absolute top-1/2 right-0.5 flex size-6 -translate-y-1/2 items-center justify-center text-xs\"\n                title=\"Clear query\"\n                @click=\"clearQuery\"\n              >\n                ✕\n              </button>\n            </div>\n\n            <!-- Top-K Selector -->\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Select v-model=\"topK\" @update:model-value=\"runSearch\">\n                <SelectTrigger class=\"h-9 w-36 text-xs\">\n                  <SelectValue placeholder=\"Top K Results\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"3\">Top 3 Results</SelectItem>\n                  <SelectItem value=\"5\">Top 5 Results</SelectItem>\n                  <SelectItem value=\"10\">Top 10 Results</SelectItem>\n                </SelectContent>\n              </Select>\n\n              <!-- Namespace Filter -->\n              <Select v-model=\"selectedNamespace\" @update:model-value=\"runSearch\">\n                <SelectTrigger class=\"h-9 w-40 text-xs\">\n                  <SelectValue placeholder=\"Namespace\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All Namespaces (4)</SelectItem>\n                  <SelectItem value=\"docs\">docs (240k)</SelectItem>\n                  <SelectItem value=\"blog\">blog (84k)</SelectItem>\n                  <SelectItem value=\"api\">api (40k)</SelectItem>\n                  <SelectItem value=\"helpdesk\">helpdesk (118k)</SelectItem>\n                </SelectContent>\n              </Select>\n\n              <Button\n                variant=\"default\"\n                size=\"sm\"\n                class=\"h-9 gap-1.5 shadow-xs\"\n                :disabled=\"isSearching || !searchQuery\"\n                @click=\"runSearch\"\n              >\n                <Sparkles v-if=\"!isSearching\" class=\"size-3.5\" />\n                <RefreshCw v-else class=\"size-3.5 animate-spin\" />\n                <span class=\"hidden sm:inline\">Search</span>\n              </Button>\n            </div>\n          </div>\n\n          <!-- Query Preset Pills -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Try Query:</span>\n            <Button\n              v-for=\"preset in queryPresets\"\n              :key=\"preset\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-auto min-h-6 max-w-full rounded-full px-2.5 py-1 text-left text-xs whitespace-normal\"\n              @click=\"selectPreset(preset)\"\n            >\n              {{ preset }}\n            </Button>\n          </div>\n        </div>\n\n        <!-- Query Vectorization Banner -->\n        <div\n          class=\"border-border/60 bg-muted/40 flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3 text-xs\"\n        >\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Binary class=\"text-primary size-4 shrink-0\" />\n            <div>\n              <span class=\"text-foreground font-medium\">Query Vector Generated:</span>\n              <span class=\"text-muted-foreground ml-1\">\n                Vectorized in\n                <span class=\"text-foreground font-mono font-medium tabular-nums\">{{ embeddingLatency }}</span> via\n                <code class=\"text-foreground font-mono\">text-embedding-3-small</code> (1536 float32 values)\n              </span>\n            </div>\n          </div>\n          <Button variant=\"ghost\" size=\"sm\" class=\"h-7 gap-1 text-xs\" @click=\"activeVisualizerTarget = 'query'\">\n            <Eye class=\"size-3\" />\n            <span>Inspect Query Vector</span>\n          </Button>\n        </div>\n\n        <Separator />\n\n        <!-- Search Results List -->\n        <div class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <h3 class=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n              Similarity Search Results ({{ visibleResults.length }} matches)\n            </h3>\n            <span class=\"text-muted-foreground text-xs\">\n              Metric: <span class=\"text-foreground font-medium\">Cosine Similarity</span> · Threshold &ge; 0.70\n            </span>\n          </div>\n\n          <div class=\"space-y-3\">\n            <div\n              v-for=\"(result, index) in visibleResults\"\n              :key=\"result.id\"\n              class=\"border-border bg-card/60 hover:bg-accent/10 relative rounded-lg border p-4 shadow-xs transition-colors\"\n            >\n              <div class=\"flex flex-col gap-3\">\n                <!-- Top metadata row -->\n                <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <Badge wrap variant=\"secondary\" class=\"font-mono text-xs font-semibold\"> #{{ index + 1 }} </Badge>\n                    <h4 class=\"text-foreground text-sm font-semibold tracking-tight\">\n                      {{ result.title }}\n                    </h4>\n                    <Badge\n                      wrap\n                      variant=\"outline\"\n                      :class=\"cn('text-xs font-medium capitalize', getNamespaceBadgeClass(result.namespace))\"\n                    >\n                      {{ result.namespace }}\n                    </Badge>\n                    <div class=\"flex items-center gap-1\">\n                      <Badge wrap variant=\"outline\" class=\"text-muted-foreground font-mono text-xs\">\n                        {{ result.vectorId }}\n                      </Badge>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        class=\"text-muted-foreground hover:text-foreground size-6 p-0\"\n                        title=\"Copy Vector ID\"\n                        @click=\"copyVectorId(result.vectorId)\"\n                      >\n                        <Check v-if=\"copiedVectorId === result.vectorId\" class=\"text-success size-3\" />\n                        <Copy v-else class=\"size-3\" />\n                      </Button>\n                    </div>\n                  </div>\n\n                  <!-- Scores -->\n                  <div class=\"flex items-center gap-3 text-xs\">\n                    <div class=\"flex items-center gap-1.5\">\n                      <span class=\"text-muted-foreground\">Cosine Similarity:</span>\n                      <span :class=\"cn('font-mono text-sm font-bold tabular-nums', getScoreColorClass(result.score))\">\n                        {{ result.score.toFixed(3) }}\n                      </span>\n                    </div>\n                    <div class=\"text-muted-foreground flex items-center gap-1 border-l pl-3\">\n                      <span>Distance:</span>\n                      <span class=\"text-foreground font-mono font-medium tabular-nums\">{{\n                        result.cosineDistance.toFixed(3)\n                      }}</span>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Match score bar -->\n                <div class=\"space-y-1\">\n                  <div class=\"text-muted-foreground flex justify-between text-xs\">\n                    <span>Similarity Match</span>\n                    <span class=\"font-mono font-medium tabular-nums\">{{ (result.score * 100).toFixed(1) }}%</span>\n                  </div>\n                  <Progress :model-value=\"result.score * 100\" class=\"h-1.5\" />\n                </div>\n\n                <!-- Chunk text snippet -->\n                <div\n                  class=\"bg-muted/30 border-border/60 text-foreground rounded-md border p-2.5 text-xs leading-relaxed\"\n                >\n                  <p class=\"text-muted-foreground mb-1 font-mono text-xs italic\">\n                    Chunk #{{ result.chunkIndex }} of {{ result.totalChunks }} · {{ result.filePath }}\n                  </p>\n                  <p>{{ result.snippet }}</p>\n                </div>\n\n                <!-- Bottom action row -->\n                <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-2 pt-1 text-xs\">\n                  <div class=\"flex flex-wrap items-center gap-3\">\n                    <span class=\"flex items-center gap-1\">\n                      <FileText class=\"size-3\" />\n                      {{ result.tokenCount }} tokens\n                    </span>\n                    <span>•</span>\n                    <span>Updated {{ result.updatedAt }}</span>\n                  </div>\n\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 text-xs\" @click=\"inspectVector(result.id)\">\n                    <Eye class=\"size-3\" />\n                    <span>Inspect 1536-Dim Heatmap</span>\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Vector Dimension Array Visualizer -->\n    <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Binary class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-semibold\">Vector Dimension Array Visualizer</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Visual color-coded 32-sample heatmap of the 1536 float values. Select dimensions to inspect activation\n              magnitude.\n            </CardDescription>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs\" @click=\"copyFloatsArray\">\n              <Check v-if=\"copiedFloats\" class=\"text-success size-3.5\" />\n              <Copy v-else class=\"size-3.5\" />\n              <span>{{ copiedFloats ? 'Copied Array' : 'Copy Sample Floats' }}</span>\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs\" @click=\"rawJsonExpanded = !rawJsonExpanded\">\n              <FileCode class=\"size-3.5\" />\n              <span>{{ rawJsonExpanded ? 'Hide Raw JSON' : 'View Raw Floats' }}</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Target Vector Selector Tabs -->\n        <div class=\"border-border/60 mt-3 flex flex-wrap items-center gap-1.5 border-t pt-3\">\n          <span class=\"text-muted-foreground mr-1 text-xs font-medium\">Inspecting:</span>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :class=\"\n              cn(\n                'h-7 rounded-md text-xs',\n                activeVisualizerTarget === 'query' &&\n                  'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',\n              )\n            \"\n            @click=\"activeVisualizerTarget = 'query'\"\n          >\n            Query Vector\n          </Button>\n          <Button\n            v-for=\"(res, idx) in visibleResults\"\n            :key=\"res.id\"\n            variant=\"outline\"\n            size=\"sm\"\n            :class=\"\n              cn(\n                'h-7 rounded-md font-mono text-xs',\n                activeVisualizerTarget === res.id &&\n                  'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',\n              )\n            \"\n            @click=\"activeVisualizerTarget = res.id\"\n          >\n            #{{ idx + 1 }} {{ res.vectorId }}\n          </Button>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <!-- Target Vector Metadata Banner -->\n        <div\n          class=\"border-border/60 bg-muted/30 flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3 text-xs\"\n        >\n          <div>\n            <div class=\"text-foreground font-semibold\">{{ activeVectorData.label }}</div>\n            <div class=\"text-muted-foreground font-mono text-xs\">{{ activeVectorData.source }}</div>\n          </div>\n          <div class=\"flex flex-wrap items-center gap-3 font-mono text-xs\">\n            <div>\n              <span class=\"text-muted-foreground\">L2 Norm:</span>\n              <span class=\"text-foreground font-semibold\">1.0000 (Unit)</span>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Dimensions:</span>\n              <span class=\"text-foreground font-semibold\">1,536 floats</span>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Format:</span>\n              <span class=\"text-foreground font-semibold\">FP32 Dense</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- 32-Sample Heatmap Grid -->\n        <div class=\"space-y-2\">\n          <div class=\"flex items-center justify-between text-xs\">\n            <span class=\"text-muted-foreground font-medium\">\n              Sampled 32 Float Dimensions (1 of every 48 tensor indices):\n            </span>\n            <div class=\"flex flex-wrap items-center gap-2 text-xs\">\n              <span class=\"flex items-center gap-1\">\n                <span class=\"bg-destructive/80 inline-block size-2 rounded-xs\" />\n                <span class=\"text-muted-foreground\">&lt; -0.10</span>\n              </span>\n              <span class=\"flex items-center gap-1\">\n                <span class=\"bg-warning/80 inline-block size-2 rounded-xs\" />\n                <span class=\"text-muted-foreground\">-0.05</span>\n              </span>\n              <span class=\"flex items-center gap-1\">\n                <span class=\"bg-primary/40 inline-block size-2 rounded-xs\" />\n                <span class=\"text-muted-foreground\">~0.00</span>\n              </span>\n              <span class=\"flex items-center gap-1\">\n                <span class=\"bg-success/80 inline-block size-2 rounded-xs\" />\n                <span class=\"text-muted-foreground\">&gt; +0.10</span>\n              </span>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-4 gap-1.5 sm:grid-cols-8 md:grid-cols-16\">\n            <button\n              v-for=\"sample in dimensionSamples\"\n              :key=\"sample.index\"\n              type=\"button\"\n              :class=\"\n                cn(\n                  'group flex cursor-pointer flex-col items-center justify-center rounded-md border p-1.5 text-center transition-colors select-none',\n                  getHeatmapCellClass(sample.value, selectedDimensionIndex === sample.index),\n                )\n              \"\n              @click=\"selectedDimensionIndex = sample.index\"\n            >\n              <span class=\"text-muted-foreground font-mono text-xs leading-tight\">\n                d{{ String(sample.dimIndex).padStart(4, '0') }}\n              </span>\n              <span class=\"font-mono text-xs leading-tight font-semibold tabular-nums\">\n                {{ sample.value >= 0 ? '+' : '' }}{{ sample.value.toFixed(3) }}\n              </span>\n            </button>\n          </div>\n        </div>\n\n        <!-- Selected Dimension Deep Dive Inspector -->\n        <div class=\"border-border/80 bg-card rounded-lg border p-4 shadow-xs\">\n          <div class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Badge wrap variant=\"outline\" class=\"font-mono text-xs font-semibold\">\n                  {{ currentDimension.rawDimName }}\n                </Badge>\n                <span class=\"text-foreground text-sm font-semibold\">\n                  Dimension #{{ currentDimension.dimIndex }} / 1536\n                </span>\n                <Badge wrap variant=\"secondary\" class=\"text-xs\">\n                  {{ currentDimension.activation }}\n                </Badge>\n              </div>\n              <p class=\"text-muted-foreground text-xs\">\n                Tensor index <code class=\"font-mono\">{{ currentDimension.rawDimName }}</code> mapped from\n                1536-dimensional OpenAI text-embedding-3-small vector space.\n              </p>\n            </div>\n\n            <!-- Metric stats of the selected dimension -->\n            <div class=\"flex flex-wrap items-center gap-4 font-mono text-xs\">\n              <div class=\"bg-muted/40 rounded-md border px-3 py-1.5\">\n                <div class=\"text-muted-foreground text-xs\">Float Value</div>\n                <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                  {{ currentDimension.value >= 0 ? '+' : '' }}{{ currentDimension.value.toFixed(6) }}\n                </div>\n              </div>\n              <div class=\"bg-muted/40 rounded-md border px-3 py-1.5\">\n                <div class=\"text-muted-foreground text-xs\">Relative Magnitude</div>\n                <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                  {{ currentDimension.magnitudePercent }}%\n                </div>\n              </div>\n              <div class=\"bg-muted/40 rounded-md border px-3 py-1.5\">\n                <div class=\"text-muted-foreground text-xs\">Sign / Polarity</div>\n                <div class=\"text-foreground text-sm font-bold\">\n                  {{ currentDimension.sign }}\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Magnitude bar -->\n          <div class=\"mt-3 space-y-1\">\n            <div class=\"text-muted-foreground flex justify-between text-xs\">\n              <span>Dimension Activation Magnitude vs Max Dimension (+0.325)</span>\n              <span class=\"font-mono font-medium\">{{ currentDimension.magnitudePercent }}%</span>\n            </div>\n            <Progress :model-value=\"currentDimension.magnitudePercent\" class=\"h-2\" />\n          </div>\n        </div>\n\n        <!-- Raw JSON Array Drawer (Collapsible) -->\n        <div v-if=\"rawJsonExpanded\" class=\"space-y-1\">\n          <div class=\"text-muted-foreground text-xs font-medium\">Raw FP32 Float Array (32 Sample Tensor):</div>\n          <pre\n            class=\"bg-muted/60 border-border/80 text-foreground overflow-x-auto rounded-lg border p-3 font-mono text-xs leading-relaxed\"\n          ><code>{{ JSON.stringify(activeVectorData.sample, null, 2) }}</code></pre>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/VectorEmbeddingsInspector.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/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"
  ]
}