'use client' import * as React from 'react' import { BookOpen, Bot, Check, ChevronRight, Code2, Copy, Cpu, Database, FileCode, Filter, Layers, Play, RefreshCw, Search, ShieldCheck, SlidersHorizontal, Sparkles, Terminal, ThumbsDown, ThumbsUp, Workflow, Zap, } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Progress } from '@/components/ui/progress' import { Separator } from '@/components/ui/separator' import { Slider } from '@/components/ui/slider' import { Switch } from '@/components/ui/switch' import { cn } from '@/lib/utils' export interface RagPipelineVisualizerProps { className?: string } interface PipelineStage { id: number name: string subtitle: string latency: string durationMs: number status: 'completed' | 'active' | 'queued' | 'bypassed' icon: React.ElementType tag: string details: { description: string metrics: { label: string; value: string }[] codeOrData?: { title: string; content: string } } } interface RetrievedChunk { id: string citationIndex: number relevanceScore: number rerankBoost: number cosineScore: number bm25Score: number documentPath: string namespace: string chunkOffset: string tokenCount: number updatedAgo: string title: string snippetPrefix: string highlightedText: string snippetSuffix: string fullSnippet: string } const presetQueries = [ 'How do I configure OKLCH color palettes in Tailwind v4 with UIPKGE?', 'Cross-Encoder vs Bi-Encoder reranker score calibration', 'HyDE prompt expansion for zero-shot semantic retrieval', 'Pinecone HNSW index tuning: efSearch & M parameter tradeoffs', ] const allChunks: RetrievedChunk[] = [ { id: 'chunk-1', citationIndex: 1, relevanceScore: 0.942, rerankBoost: 0.142, cosineScore: 0.8, bm25Score: 0.785, documentPath: 'docs/styling/tailwind-v4-oklch.md', namespace: 'docs', chunkOffset: 'Chunk #3 · Lines 42–78', tokenCount: 384, updatedAgo: '2 hours ago', title: 'Tailwind v4 OKLCH Architecture & @theme Configuration', snippetPrefix: 'Tailwind CSS v4 introduces native CSS-first token configuration with ', highlightedText: '@theme inline and OKLCH color spaces. In contrast to RGB/HSL, OKLCH ensures perceptually uniform lightness across hues', snippetSuffix: ', preventing contrast degradation in dark mode variants while preserving single-source token truth.', fullSnippet: '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.', }, { id: 'chunk-2', citationIndex: 2, relevanceScore: 0.887, rerankBoost: 0.095, cosineScore: 0.792, bm25Score: 0.71, documentPath: 'docs/tokens/color-derivation.md', namespace: 'docs', chunkOffset: 'Chunk #1 · Lines 1–36', tokenCount: 412, updatedAgo: '1 day ago', title: 'Color Tokens Derivation & Contrast Calibration', snippetPrefix: 'Deriving consistent dark-mode contrasts requires ', highlightedText: 'anchoring chroma and shifting lightness along the OKLCH L-axis. Use --color-primary: oklch(0.65 0.22 260) for vibrant interactive states', snippetSuffix: ' and calibrate border contrast with `--color-border: oklch(0.28 0.01 260)` for WCAG AA compliance across both frameworks.', fullSnippet: '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 across both frameworks.', }, { id: 'chunk-3', citationIndex: 3, relevanceScore: 0.824, rerankBoost: 0.048, cosineScore: 0.776, bm25Score: 0.65, documentPath: 'blog/2026/design-systems-monorepo.md', namespace: 'blog', chunkOffset: 'Chunk #5 · Lines 112–164', tokenCount: 526, updatedAgo: '3 days ago', title: 'Dual-Framework Component Registry Architecture', snippetPrefix: 'When architecting a dual-framework registry (Vue + React), ', highlightedText: 'shared design tokens must compile cleanly without runtime overhead. We leverage CSS custom properties to mirror CVA component variants', snippetSuffix: ' across both frameworks with zero extra runtime.', fullSnippet: '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.', }, ] export function RagPipelineVisualizer({ className }: RagPipelineVisualizerProps) { const [currentQuery, setCurrentQuery] = React.useState( 'How do I configure OKLCH color palettes in Tailwind v4 with UIPKGE?', ) const [topK, setTopK] = React.useState(3) const [rerankerEnabled, setRerankerEnabled] = React.useState(true) const [selectedStageId, setSelectedStageId] = React.useState(3) const [isExecuting, setIsExecuting] = React.useState(false) const [copiedChunkId, setCopiedChunkId] = React.useState(null) const [copiedResponse, setCopiedResponse] = React.useState(false) const [copiedTrace, setCopiedTrace] = React.useState(false) const [activeCitationHover, setActiveCitationHover] = React.useState(null) const [showTraceJson, setShowTraceJson] = React.useState(false) const [userFeedback, setUserFeedback] = React.useState<'up' | 'down' | null>(null) const stages = React.useMemo( () => [ { id: 1, name: '1. User Query & HyDE Expansion', subtitle: 'Query rewritten with hypothetical document embedding · 42ms', latency: '42ms', durationMs: 42, status: 'completed', icon: Sparkles, tag: 'Prompt Rewriting', details: { description: 'Generates a synthetic hypothetical answer using Claude 3.5 Haiku to bridge vocabulary mismatch between conversational queries and technical documentation.', metrics: [ { label: 'Expansion Model', value: 'Claude 3.5 Haiku' }, { label: 'Latency', value: '42ms' }, { label: 'Prompt Tokens', value: '48 tokens' }, { label: 'Hypothesis Length', value: '112 tokens' }, ], codeOrData: { title: 'Generated Hypothetical Document (HyDE)', content: 'Tailwind CSS v4 defines color tokens using CSS variables inside `@theme inline` with `oklch(L C H)` functions. In dual-framework component registries like UIPKGE, OKLCH ensures uniform perceptual lightness across hue shifts in light and dark variants without breaking WCAG AA contrast.', }, }, }, { id: 2, name: '2. Hybrid Dense + Sparse Search', subtitle: 'Dense Cosine + BM25 Lexical search across 480k chunks · 64ms', latency: '64ms', durationMs: 64, status: 'completed', icon: Database, tag: 'Reciprocal Rank Fusion', details: { description: 'Performs vector similarity search on 1536-dim embeddings combined with sparse BM25 keyword matching across 482,910 document chunks.', metrics: [ { label: 'Vector Index', value: 'Pinecone Serverless (HNSW)' }, { label: 'Dimension', value: '1536-dim (text-embedding-3-small)' }, { label: 'Fusion Weight', value: 'α = 0.70 Dense + 0.30 Sparse' }, { label: 'Candidate Pool', value: '20 Candidate Chunks' }, ], codeOrData: { title: 'Dense Vector Projection (32-float slice)', content: '[-0.048, 0.135, 0.092, -0.018, 0.245, -0.110, 0.049, 0.174, -0.082, 0.001, 0.325, -0.059, 0.097, 0.191, -0.149, 0.068, -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]', }, }, }, { id: 3, name: '3. Cross-Encoder Reranker', subtitle: rerankerEnabled ? 'Cohere Rerank v3: re-scores Top 20 -> Top 3 · 28ms' : 'Bypassed (Using raw hybrid search ranking) · 0ms', latency: rerankerEnabled ? '28ms' : '0ms', durationMs: rerankerEnabled ? 28 : 0, status: rerankerEnabled ? 'completed' : 'bypassed', icon: Filter, tag: rerankerEnabled ? 'Cross-Attention Re-Scoring' : 'Bypassed', details: { description: rerankerEnabled ? 'Applies deep transformer cross-attention to score query-document pairs simultaneously, eliminating false-positive semantic matches.' : 'Reranker is currently bypassed. Chunks are ordered purely by initial hybrid reciprocal rank scores.', metrics: [ { label: 'Model', value: 'cohere-rerank-v3.0-multilingual' }, { label: 'Top-K Retained', value: `Top ${topK} of 20` }, { label: 'Relevance Cutoff', value: '≥ 0.800 score' }, { label: 'Max Rank Shift', value: '+3 positions (Chunk #3)' }, ], codeOrData: { title: 'Reranker Score Calibration Delta', content: 'Chunk #1: 0.800 (Cosine) -> 0.942 (Rerank) [+0.142 boost]\nChunk #2: 0.792 (Cosine) -> 0.887 (Rerank) [+0.095 boost]\nChunk #3: 0.776 (Cosine) -> 0.824 (Rerank) [+0.048 boost]\n17 candidates pruned below 0.800 relevance threshold', }, }, }, { id: 4, name: '4. Context Window Assembly', subtitle: '1,248 tokens packed, 98% prompt density · 8ms', latency: '8ms', durationMs: 8, status: 'completed', icon: Layers, tag: 'Token Packaging', details: { description: 'Deduplicates overlapping chunk boundaries, injects citation boundary anchors `[1]`, `[2]`, `[3]`, and formats system directives for zero-hallucination grounding.', metrics: [ { label: 'Window Budget', value: '1,248 / 8,192 tokens (15.2%)' }, { label: 'Prompt Density', value: '98.4% relevance tokens' }, { label: 'Chunks Packaged', value: `${Math.min(topK, 3)} chunks` }, { label: 'Delimiter Format', value: '' }, ], codeOrData: { title: 'Assembled Prompt Context Envelope', content: '\nYou are a Lead Design Systems Architect. Synthesize answers strictly from provided context chunks.\nAlways ground every technical claim with an inline citation key [1], [2], or [3].\n\n\n\n[1] doc: docs/styling/tailwind-v4-oklch.md (score: 0.942)\n[2] doc: docs/tokens/color-derivation.md (score: 0.887)\n[3] doc: blog/2026/design-systems-monorepo.md (score: 0.824)\n', }, }, }, { id: 5, name: '5. LLM Synthesis & Grounding', subtitle: 'Claude 3.5 Sonnet streaming generation · 820ms', latency: '820ms', durationMs: 820, status: 'completed', icon: Bot, tag: 'Streaming Synthesis', details: { description: 'Generates final structured markdown answer with streaming tokens, verifies every claim against citation sources, and produces grounded output.', metrics: [ { label: 'Model', value: 'claude-3-5-sonnet-20241022' }, { label: 'Time to First Token', value: '180ms' }, { label: 'Generation Speed', value: '68.2 tokens/sec' }, { label: 'Grounding Verification', value: '100% (3/3 facts grounded)' }, ], codeOrData: { title: 'Telemetry & Cost Summary', content: 'Prompt Tokens: 1,248 ($0.00374)\nCompletion Tokens: 214 ($0.00064)\nTotal Cost: $0.00438\nHallucination Detection: 0 violations detected', }, }, }, ], [rerankerEnabled, topK], ) const displayedChunks = React.useMemo(() => { const count = Math.min(Math.max(1, topK), allChunks.length) return allChunks.slice(0, count) }, [topK]) const currentStage = stages.find((s) => s.id === selectedStageId) ?? stages[0] const totalPipelineLatency = React.useMemo(() => { const sum = stages.reduce((acc, s) => acc + s.durationMs, 0) return `${sum}ms` }, [stages]) const traceJson = React.useMemo(() => { return JSON.stringify( { traceId: 'trc_rag_948201a4', pipeline: 'enterprise_knowledge_rag_v3', timestamp: new Date().toISOString(), query: currentQuery, config: { embeddingModel: 'text-embedding-3-small', dimensions: 1536, vectorDb: 'Pinecone Serverless', topK: topK, reranker: rerankerEnabled ? 'cohere-rerank-v3' : 'none', alphaFusion: 0.7, }, stages: stages.map((s) => ({ id: s.id, name: s.name, durationMs: s.durationMs, status: s.status, })), retrievedChunks: displayedChunks.map((c) => ({ citation: c.citationIndex, docPath: c.documentPath, relevance: rerankerEnabled ? c.relevanceScore : c.cosineScore, rerankBoost: rerankerEnabled ? c.rerankBoost : 0, tokenCount: c.tokenCount, })), synthesis: { model: 'claude-3-5-sonnet-20241022', promptTokens: 1248, completionTokens: 214, groundedFactRatio: 1.0, latencyMs: 820, }, }, null, 2, ) }, [currentQuery, topK, rerankerEnabled, stages, displayedChunks]) const handleRunPipeline = () => { if (isExecuting) return setIsExecuting(true) setSelectedStageId(1) setTimeout(() => { setSelectedStageId(2) }, 200) setTimeout(() => { setSelectedStageId(3) }, 450) setTimeout(() => { setSelectedStageId(4) }, 700) setTimeout(() => { setSelectedStageId(5) setIsExecuting(false) }, 950) } const handleSelectPreset = (preset: string) => { setCurrentQuery(preset) handleRunPipeline() } const handleCopyChunk = (id: string, text: string) => { navigator.clipboard.writeText(text) setCopiedChunkId(id) setTimeout(() => { setCopiedChunkId(null) }, 2000) } const handleCopyResponse = (text: string) => { navigator.clipboard.writeText(text) setCopiedResponse(true) setTimeout(() => { setCopiedResponse(false) }, 2000) } const handleCopyTrace = () => { navigator.clipboard.writeText(traceJson) setCopiedTrace(true) setTimeout(() => { setCopiedTrace(false) }, 2000) } return (

{/* 1. Pipeline Header */}

enterprise_knowledge_rag_v3

Pipeline Active p99 {totalPipelineLatency}

Production Retrieval-Augmented Generation pipeline with HyDE query rewriting, hybrid reciprocal rank fusion, and cross-encoder validation.

{/* Pipeline Metadata Specs Bar */}

Embedding: OpenAI text-embedding-3-small · 1536-dim

Vector DB: Pinecone Serverless · HNSW

Index Space: 482,910 chunks · 4 namespaces

Grounding: 100% strict context citation

{/* Optional Trace JSON Drawer */} {showTraceJson && (

OpenTelemetry Pipeline Execution Trace

              {traceJson}

)} {/* 2. Query Input & Runtime Controls Bar */}

Interactive Test Query Press Enter or click Test Query to simulate

setCurrentQuery(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleRunPipeline() }} className="pr-20 text-sm font-medium shadow-xs" placeholder="Enter search prompt or technical query..." prefixIcon={} />

{/* Query Presets Chips */}

Presets: {presetQueries.map((preset) => ( ))}

{/* Controls Toolbar: Top-K Slider + Reranker Switch + Metrics */}

{/* Top-K Slider */}

Top-K Chunks

Top {topK} Chunks

setTopK(val[0])} />

k=1 k=2 k=3

{/* Reranker Toggle */}

Cohere Rerank v3

Cross-encoder contextual re-scoring

{rerankerEnabled ? 'Active (+0.142 boost)' : 'Bypassed (Cosine only)'}

{/* Pipeline Telemetry Overview */}

Execution Latency {totalPipelineLatency} total

Dense + BM25 106ms

LLM Synthesis 820ms (85%)

{/* 3. Interactive RAG 5-Stage Architecture Flow */}

RAG Pipeline Execution Graph

Click any stage node to inspect low-level telemetry, prompt variables, and intermediate embeddings.

5 Connected Stages

{/* 5-Stage Connected Cards */}

{stages.map((stage) => { const Icon = stage.icon const isSelected = selectedStageId === stage.id return (

setSelectedStageId(stage.id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() setSelectedStageId(stage.id) } }} >

{stage.latency}

{stage.name}

{stage.subtitle}

{stage.tag}

) })}

{/* Stage Detail Drill-down Panel */}

{React.createElement(currentStage.icon, { className: 'size-4' })}

{currentStage.name} — Inspector {currentStage.details.description}

Stage {currentStage.id} of 5 · {currentStage.latency}

{/* Metrics Grid for Stage */}

{currentStage.details.metrics.map((metric) => (

{metric.label}

{metric.value}

))}

{/* Code or Data Artifact Preview */} {currentStage.details.codeOrData && (

{currentStage.details.codeOrData.title} read-only buffer

                  {currentStage.details.codeOrData.content}

)}

{/* 4. Retrieved Context Chunks Inspector */}

Retrieved Context Chunks ({displayedChunks.length} Active Chunks)

Ranked by cross-encoder relevance score. Keyword spans matching user intent are highlighted.

Fusion: Dense (70%) + Sparse (30%)

{displayedChunks.map((chunk) => (

{/* Citation Badge Pill */} [{chunk.citationIndex}] {/* Relevancy Score Badge */} = 0.9 ? 'border-success/30 bg-success/10 text-success' : chunk.relevanceScore >= 0.85 ? 'border-success/30 bg-success/10 text-success' : 'border-info/30 bg-info/10 text-info', )} > Score: {rerankerEnabled ? chunk.relevanceScore.toFixed(3) : chunk.cosineScore.toFixed(3)} {/* Rerank Delta Badge */} {rerankerEnabled && ( +{chunk.rerankBoost.toFixed(3)} boost (Rank #{chunk.citationIndex}) )} {/* Document Path */} {chunk.documentPath}

{/* Metadata & Copy Action */}

{chunk.chunkOffset} · {chunk.tokenCount} tok

{/* Chunk Text with Highlighted Spans */}

{chunk.snippetPrefix} {chunk.highlightedText} {chunk.snippetSuffix}

{/* Scoring Breakdown Sub-bar */}

Dense Cosine:{' '} {chunk.cosineScore.toFixed(3)} Sparse BM25:{' '} {chunk.bm25Score.toFixed(3)} {rerankerEnabled && ( Cross-Encoder:{' '} {chunk.relevanceScore.toFixed(3)} )}

Updated {chunk.updatedAgo}

))}

{/* 5. Final Synthesized Output Card with Citations */}

Synthesized Grounded Response Generated via Claude 3.5 Sonnet streaming with verified inline citations.

100% Grounded · 0 Hallucinations 820ms (TTFT 180ms)

{/* Markdown Formatted Synthesized Body */}

To configure OKLCH color palettes in Tailwind CSS v4 with UIPKGE:

Define Theme Tokens in CSS: Use{' '} @theme inline{' '} in your root stylesheet to declare single-source-of-truth OKLCH variables . Unlike legacy RGB/HSL, OKLCH ensures perceptually uniform lightness across hue shifts .
Calibrate Dark Mode Contrasts: Anchor chroma and shift lightness along the OKLCH L-axis (e.g.,{' '} --color-primary: oklch(0.65 0.22 260){' '} and{' '} --color-border: oklch(0.28 0.01 260) ) to maintain WCAG AA compliance across both light and dark modes .
Maintain Dual-Framework CVA Parity: Wire CSS tokens directly through Class Variance Authority (cva()) variants so that both Vue and React registry components share identical token namespaces with zero runtime bundle overhead .

{/* Streaming cursor pulse */}

Generation Complete · 214 tokens streamed

{/* Citation Footnotes Bar */}

Referenced Citations (Hover citation to locate chunk):

{displayedChunks.map((chunk) => (

setActiveCitationHover(chunk.citationIndex)} onMouseLeave={() => setActiveCitationHover(null)} > [{chunk.citationIndex}] {chunk.documentPath.split('/').pop()} {chunk.relevanceScore.toFixed(3)}

))}

{/* Telemetry Footer & Action Buttons */}

Input: 1,248 tok Output: 214 tok Cost: $0.00438 Grounding: 99.4%

) } export default RagPipelineVisualizer