{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "rag-pipeline-visualizer", "title": "Rag Pipeline Visualizer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/rag-pipeline-visualizer/rag-pipeline-visualizer.component.ts", "content": "// Edit this file to change the pipeline stages, the sample chunks, the presets or the copy.\n// Everything is local sample data: wire `handleRunPipeline` to your own retrieval backend.\nimport { Component, DestroyRef, Input, computed, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n BookOpen,\n Bot,\n Check,\n ChevronRight,\n Code2,\n Copy,\n Cpu,\n Database,\n FileCode,\n Filter,\n Layers,\n LucideAngularModule,\n Play,\n RefreshCw,\n Search,\n ShieldCheck,\n SlidersHorizontal,\n Sparkles,\n Terminal,\n ThumbsDown,\n ThumbsUp,\n Workflow,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport interface RagPipelineStage {\n id: number\n name: string\n subtitle: string\n latency: string\n durationMs: number\n status: 'completed' | 'active' | 'queued' | 'bypassed'\n icon: LucideIconData\n tag: string\n details: {\n description: string\n metrics: { label: string; value: string }[]\n codeOrData?: { title: string; content: string }\n }\n}\n\nexport interface RagRetrievedChunk {\n id: string\n citationIndex: number\n relevanceScore: number\n rerankBoost: number\n cosineScore: number\n bm25Score: number\n documentPath: string\n namespace: string\n chunkOffset: string\n tokenCount: number\n updatedAgo: string\n title: string\n snippetPrefix: string\n highlightedText: string\n snippetSuffix: string\n fullSnippet: string\n}\n\nconst presetQueries = [\n 'How do I configure OKLCH color palettes in Tailwind v4 with UIPKGE?',\n 'Cross-Encoder vs Bi-Encoder reranker score calibration',\n 'HyDE prompt expansion for zero-shot semantic retrieval',\n 'Pinecone HNSW index tuning: efSearch & M parameter tradeoffs',\n]\n\nconst allChunks: RagRetrievedChunk[] = [\n {\n id: 'chunk-1',\n citationIndex: 1,\n relevanceScore: 0.942,\n rerankBoost: 0.142,\n cosineScore: 0.8,\n bm25Score: 0.785,\n documentPath: 'docs/styling/tailwind-v4-oklch.md',\n namespace: 'docs',\n chunkOffset: 'Chunk #3 · Lines 42–78',\n tokenCount: 384,\n updatedAgo: '2 hours ago',\n title: 'Tailwind v4 OKLCH Architecture & @theme Configuration',\n snippetPrefix: 'Tailwind CSS v4 introduces native CSS-first token configuration with ',\n highlightedText:\n '@theme inline and OKLCH color spaces. In contrast to RGB/HSL, OKLCH ensures perceptually uniform lightness across hues',\n snippetSuffix:\n ', preventing contrast degradation in dark mode variants while preserving single-source token truth.',\n fullSnippet:\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 },\n {\n id: 'chunk-2',\n citationIndex: 2,\n relevanceScore: 0.887,\n rerankBoost: 0.095,\n cosineScore: 0.792,\n bm25Score: 0.71,\n documentPath: 'docs/tokens/color-derivation.md',\n namespace: 'docs',\n chunkOffset: 'Chunk #1 · Lines 1–36',\n tokenCount: 412,\n updatedAgo: '1 day ago',\n title: 'Color Tokens Derivation & Contrast Calibration',\n snippetPrefix: 'Deriving consistent dark-mode contrasts requires ',\n highlightedText:\n 'anchoring chroma and shifting lightness along the OKLCH L-axis. Use --color-primary: oklch(0.65 0.22 260) for vibrant interactive states',\n snippetSuffix:\n ' and calibrate border contrast with `--color-border: oklch(0.28 0.01 260)` for WCAG AA compliance across both frameworks.',\n fullSnippet:\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 across both frameworks.',\n },\n {\n id: 'chunk-3',\n citationIndex: 3,\n relevanceScore: 0.824,\n rerankBoost: 0.048,\n cosineScore: 0.776,\n bm25Score: 0.65,\n documentPath: 'blog/2026/design-systems-monorepo.md',\n namespace: 'blog',\n chunkOffset: 'Chunk #5 · Lines 112–164',\n tokenCount: 526,\n updatedAgo: '3 days ago',\n title: 'Dual-Framework Component Registry Architecture',\n snippetPrefix: 'When architecting a dual-framework registry (Vue + React), ',\n highlightedText:\n 'shared design tokens must compile cleanly without runtime overhead. We leverage CSS custom properties to mirror CVA component variants',\n snippetSuffix: ' across both frameworks with zero extra runtime.',\n fullSnippet:\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 },\n]\n\nconst COPY_ANSWER_TEXT =\n 'To configure OKLCH color palettes in Tailwind CSS v4 with UIPKGE: 1. Define Theme Tokens in CSS (@theme inline)... 2. Calibrate Dark Mode Contrasts... 3. Maintain Dual-Framework CVA Parity...'\n\nconst CITATION_BUTTON_CLASS =\n 'bg-primary/10 py-0.2 text-primary hover:bg-primary hover:text-primary-foreground mx-1 inline-flex min-h-6 cursor-pointer items-center rounded px-1 font-mono text-xs font-bold transition-colors'\n\n/**\n * RagPipelineVisualizer -- the React block, 1:1: a RAG pipeline debugger with a header\n * (trace export + test run), a query bar with presets, Top-K slider and reranker switch,\n * a clickable 5-stage execution graph with a stage inspector, the retrieved chunks with\n * highlighted spans and scores, and the grounded answer whose citations light up their chunk.\n *\n * Icons: lucide-angular renders the inside a host. `class=\"...\"` lands on\n * both the host and the svg, so icons that carry a margin, transform or animation use\n * `[class]` (svg only) to avoid applying it twice.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-rag-pipeline-visualizer, [ui-rag-pipeline-visualizer]',\n standalone: true,\n // React renders the root
itself: keep this wrapper out of the layout.\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n UiSwitchComponent,\n ],\n template: `\n
\n \n \n \n
\n
\n
\n
\n \n
\n

\n enterprise_knowledge_rag_v3\n

\n \n \n Pipeline Active\n \n p99 {{ totalPipelineLatency() }}\n
\n

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

\n
\n\n
\n \n \n \n {{ showTraceJson() ? 'Hide Trace' : 'Export Trace JSON' }}\n \n \n @if (isExecuting()) {\n \n } @else {\n \n }\n {{ isExecuting() ? 'Executing Pipeline...' : 'Test Query Pipeline' }}\n \n
\n
\n\n \n
\n
\n \n \n Embedding: OpenAI text-embedding-3-small · 1536-dim\n \n
\n
\n \n \n Vector DB: Pinecone Serverless · HNSW\n \n
\n
\n \n \n Index Space: 482,910 chunks · 4 namespaces\n \n
\n
\n \n \n Grounding: 100% strict context citation\n \n
\n
\n \n \n\n \n @if (showTraceJson()) {\n \n \n
\n
\n \n OpenTelemetry Pipeline Execution Trace\n
\n \n
\n \n \n 
{{\n              traceJson()\n            }}
\n \n \n }\n\n \n \n \n
\n
\n \n Press Enter or click Test Query to simulate\n
\n\n
\n \n \n \n \n \n \n Run\n \n
\n
\n\n \n
\n Presets:\n @for (preset of presetQueries; track preset) {\n \n }\n
\n\n \n\n \n
\n \n
\n
\n
\n \n Top-K Chunks\n
\n Top {{ topK() }} Chunks\n
\n \n
\n k=1\n k=2\n k=3\n
\n
\n\n \n
\n
\n
\n
\n \n Cohere Rerank v3\n
\n

Cross-encoder contextual re-scoring

\n
\n \n
\n
\n \n {{ rerankerEnabled() ? 'Active (+0.142 boost)' : 'Bypassed (Cosine only)' }}\n \n
\n
\n\n \n \n
\n Execution Latency\n {{ totalPipelineLatency() }} total\n
\n
\n
\n Dense + BM25\n 106ms\n
\n \n
\n
\n
\n LLM Synthesis\n 820ms (85%)\n
\n \n
\n
\n
\n \n \n\n \n
\n
\n
\n

RAG Pipeline Execution Graph

\n

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

\n
\n 5 Connected Stages\n
\n\n \n
\n @for (stage of stages(); track stage.id) {\n \n
\n
\n
\n \n
\n {{ stage.latency }}\n
\n\n
\n

{{ stage.name }}

\n

{{ stage.subtitle }}

\n
\n
\n\n \n {{ stage.tag }}\n \n
\n
\n }\n
\n\n \n \n \n
\n
\n
\n \n
\n
\n \n {{ currentStage().name }} — Inspector\n \n {{ currentStage().details.description }}\n
\n
\n \n Stage {{ currentStage().id }} of 5 · {{ currentStage().latency }}\n \n
\n \n \n \n
\n @for (metric of currentStage().details.metrics; track metric.label) {\n
\n

{{ metric.label }}

\n

{{ metric.value }}

\n
\n }\n
\n\n \n @if (currentStage().details.codeOrData; as codeOrData) {\n
\n
\n \n \n {{ codeOrData.title }}\n \n read-only buffer\n
\n {{ codeOrData.content }}\n
\n }\n \n \n \n\n \n
\n
\n
\n

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

\n

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

\n
\n
\n Fusion: Dense (70%) + Sparse (30%)\n
\n
\n\n
\n @for (chunk of displayedChunks(); track chunk.id) {\n \n \n
\n
\n \n [{{ chunk.citationIndex }}]\n\n \n \n Score: {{ chunkScore(chunk) }}\n \n\n \n @if (rerankerEnabled()) {\n \n +{{ chunk.rerankBoost.toFixed(3) }} boost (Rank #{{ chunk.citationIndex }})\n \n }\n\n \n {{ chunk.documentPath }}\n
\n\n \n
\n \n \n @if (copiedChunkId() === chunk.id) {\n \n } @else {\n \n }\n {{ copiedChunkId() === chunk.id ? 'Copied' : 'Copy' }}\n \n
\n
\n \n\n \n \n \n {{ chunk.snippetPrefix }}\n {{\n chunk.highlightedText\n }}\n {{ chunk.snippetSuffix }}\n
\n\n \n
\n
\n \n Dense Cosine:\n {{ chunk.cosineScore.toFixed(3) }}\n \n \n Sparse BM25:\n {{ chunk.bm25Score.toFixed(3) }}\n \n @if (rerankerEnabled()) {\n \n Cross-Encoder:\n {{ chunk.relevanceScore.toFixed(3) }}\n \n }\n
\n Updated {{ chunk.updatedAgo }}\n
\n \n \n }\n
\n \n\n \n \n \n
\n
\n
\n \n
\n
\n Synthesized Grounded Response\n \n Generated via Claude 3.5 Sonnet streaming with verified inline citations.\n \n
\n
\n\n
\n \n \n 100% Grounded · 0 Hallucinations\n \n 820ms (TTFT 180ms)\n
\n
\n \n\n \n \n \n

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

\n\n \n
    \n
  1. \n Define Theme Tokens in CSS: Use\n @theme inline\n in your root stylesheet to declare single-source-of-truth OKLCH variables[1]. Unlike legacy RGB/HSL, OKLCH ensures perceptually uniform lightness across hue shifts[1].\n
    2. \n\n
  2. \n Calibrate Dark Mode Contrasts: Anchor chroma and shift lightness along the OKLCH L-axis\n (e.g.,\n --color-primary: oklch(0.65 0.22 260)\n and\n --color-border: oklch(0.28 0.01 260)) to maintain WCAG AA compliance across both light and dark modes[2].\n
    3. \n\n
  3. \n Maintain Dual-Framework CVA Parity: Wire CSS tokens directly through Class Variance\n Authority (cva()) variants so that\n both Vue and React registry components share identical token namespaces with zero runtime bundle\n overhead[3].\n
    4. \n
\n\n \n
\n \n Generation Complete · 214 tokens streamed\n
\n \n\n \n
\n \n \n Referenced Citations (Hover citation to locate chunk):\n \n
\n @for (chunk of displayedChunks(); track chunk.id) {\n \n [{{ chunk.citationIndex }}] {{ fileName(chunk) }}\n {{ chunk.relevanceScore.toFixed(3) }}\n
\n }\n
\n \n\n \n \n
\n Input: 1,248 tok\n Output: 214 tok\n Cost: $0.00438\n Grounding: 99.4%\n
\n\n
\n
\n \n \n \n \n \n \n \n
\n\n \n\n \n
\n \n \n \n \n `,\n})\nexport class UiRagPipelineVisualizerComponent {\n @Input('class') className?: string\n\n protected readonly Workflow = Workflow\n protected readonly FileCode = FileCode\n protected readonly RefreshCw = RefreshCw\n protected readonly Play = Play\n protected readonly Cpu = Cpu\n protected readonly Database = Database\n protected readonly Layers = Layers\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Search = Search\n protected readonly Zap = Zap\n protected readonly SlidersHorizontal = SlidersHorizontal\n protected readonly Filter = Filter\n protected readonly ChevronRight = ChevronRight\n protected readonly Code2 = Code2\n protected readonly Sparkles = Sparkles\n protected readonly BookOpen = BookOpen\n protected readonly ThumbsUp = ThumbsUp\n protected readonly ThumbsDown = ThumbsDown\n\n protected readonly presetQueries = presetQueries\n protected readonly copyAnswerText = COPY_ANSWER_TEXT\n protected readonly citationButtonClass = CITATION_BUTTON_CLASS\n\n readonly currentQuery = signal('How do I configure OKLCH color palettes in Tailwind v4 with UIPKGE?')\n readonly topK = signal(3)\n readonly rerankerEnabled = signal(true)\n readonly selectedStageId = signal(3)\n readonly isExecuting = signal(false)\n readonly copiedChunkId = signal(null)\n readonly copiedResponse = signal(false)\n readonly copiedTrace = signal(false)\n readonly activeCitationHover = signal(null)\n readonly showTraceJson = signal(false)\n readonly userFeedback = signal<'up' | 'down' | null>(null)\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach(clearTimeout))\n }\n\n readonly stages = computed(() => {\n const rerankerEnabled = this.rerankerEnabled()\n const topK = this.topK()\n return [\n {\n id: 1,\n name: '1. User Query & HyDE Expansion',\n subtitle: 'Query rewritten with hypothetical document embedding · 42ms',\n latency: '42ms',\n durationMs: 42,\n status: 'completed',\n icon: Sparkles,\n tag: 'Prompt Rewriting',\n details: {\n description:\n 'Generates a synthetic hypothetical answer using Claude 3.5 Haiku to bridge vocabulary mismatch between conversational queries and technical documentation.',\n metrics: [\n { label: 'Expansion Model', value: 'Claude 3.5 Haiku' },\n { label: 'Latency', value: '42ms' },\n { label: 'Prompt Tokens', value: '48 tokens' },\n { label: 'Hypothesis Length', value: '112 tokens' },\n ],\n codeOrData: {\n title: 'Generated Hypothetical Document (HyDE)',\n content:\n '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.',\n },\n },\n },\n {\n id: 2,\n name: '2. Hybrid Dense + Sparse Search',\n subtitle: 'Dense Cosine + BM25 Lexical search across 480k chunks · 64ms',\n latency: '64ms',\n durationMs: 64,\n status: 'completed',\n icon: Database,\n tag: 'Reciprocal Rank Fusion',\n details: {\n description:\n 'Performs vector similarity search on 1536-dim embeddings combined with sparse BM25 keyword matching across 482,910 document chunks.',\n metrics: [\n { label: 'Vector Index', value: 'Pinecone Serverless (HNSW)' },\n { label: 'Dimension', value: '1536-dim (text-embedding-3-small)' },\n { label: 'Fusion Weight', value: 'α = 0.70 Dense + 0.30 Sparse' },\n { label: 'Candidate Pool', value: '20 Candidate Chunks' },\n ],\n codeOrData: {\n title: 'Dense Vector Projection (32-float slice)',\n content:\n '[-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]',\n },\n },\n },\n {\n id: 3,\n name: '3. Cross-Encoder Reranker',\n subtitle: rerankerEnabled\n ? 'Cohere Rerank v3: re-scores Top 20 -> Top 3 · 28ms'\n : 'Bypassed (Using raw hybrid search ranking) · 0ms',\n latency: rerankerEnabled ? '28ms' : '0ms',\n durationMs: rerankerEnabled ? 28 : 0,\n status: rerankerEnabled ? 'completed' : 'bypassed',\n icon: Filter,\n tag: rerankerEnabled ? 'Cross-Attention Re-Scoring' : 'Bypassed',\n details: {\n description: rerankerEnabled\n ? 'Applies deep transformer cross-attention to score query-document pairs simultaneously, eliminating false-positive semantic matches.'\n : 'Reranker is currently bypassed. Chunks are ordered purely by initial hybrid reciprocal rank scores.',\n metrics: [\n { label: 'Model', value: 'cohere-rerank-v3.0-multilingual' },\n { label: 'Top-K Retained', value: `Top ${topK} of 20` },\n { label: 'Relevance Cutoff', value: '≥ 0.800 score' },\n { label: 'Max Rank Shift', value: '+3 positions (Chunk #3)' },\n ],\n codeOrData: {\n title: 'Reranker Score Calibration Delta',\n content:\n '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',\n },\n },\n },\n {\n id: 4,\n name: '4. Context Window Assembly',\n subtitle: '1,248 tokens packed, 98% prompt density · 8ms',\n latency: '8ms',\n durationMs: 8,\n status: 'completed',\n icon: Layers,\n tag: 'Token Packaging',\n details: {\n description:\n 'Deduplicates overlapping chunk boundaries, injects citation boundary anchors `[1]`, `[2]`, `[3]`, and formats system directives for zero-hallucination grounding.',\n metrics: [\n { label: 'Window Budget', value: '1,248 / 8,192 tokens (15.2%)' },\n { label: 'Prompt Density', value: '98.4% relevance tokens' },\n { label: 'Chunks Packaged', value: `${Math.min(topK, 3)} chunks` },\n { label: 'Delimiter Format', value: '' },\n ],\n codeOrData: {\n title: 'Assembled Prompt Context Envelope',\n content:\n '\\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',\n },\n },\n },\n {\n id: 5,\n name: '5. LLM Synthesis & Grounding',\n subtitle: 'Claude 3.5 Sonnet streaming generation · 820ms',\n latency: '820ms',\n durationMs: 820,\n status: 'completed',\n icon: Bot,\n tag: 'Streaming Synthesis',\n details: {\n description:\n 'Generates final structured markdown answer with streaming tokens, verifies every claim against citation sources, and produces grounded output.',\n metrics: [\n { label: 'Model', value: 'claude-3-5-sonnet-20241022' },\n { label: 'Time to First Token', value: '180ms' },\n { label: 'Generation Speed', value: '68.2 tokens/sec' },\n { label: 'Grounding Verification', value: '100% (3/3 facts grounded)' },\n ],\n codeOrData: {\n title: 'Telemetry & Cost Summary',\n content:\n 'Prompt Tokens: 1,248 ($0.00374)\\nCompletion Tokens: 214 ($0.00064)\\nTotal Cost: $0.00438\\nHallucination Detection: 0 violations detected',\n },\n },\n },\n ]\n })\n\n readonly displayedChunks = computed(() => {\n const count = Math.min(Math.max(1, this.topK()), allChunks.length)\n return allChunks.slice(0, count)\n })\n\n readonly currentStage = computed(() => {\n const stages = this.stages()\n return stages.find((s) => s.id === this.selectedStageId()) ?? stages[0]!\n })\n\n readonly totalPipelineLatency = computed(() => `${this.stages().reduce((acc, s) => acc + s.durationMs, 0)}ms`)\n\n readonly traceJson = computed(() => {\n const rerankerEnabled = this.rerankerEnabled()\n return JSON.stringify(\n {\n traceId: 'trc_rag_948201a4',\n pipeline: 'enterprise_knowledge_rag_v3',\n timestamp: new Date().toISOString(),\n query: this.currentQuery(),\n config: {\n embeddingModel: 'text-embedding-3-small',\n dimensions: 1536,\n vectorDb: 'Pinecone Serverless',\n topK: this.topK(),\n reranker: rerankerEnabled ? 'cohere-rerank-v3' : 'none',\n alphaFusion: 0.7,\n },\n stages: this.stages().map((s) => ({\n id: s.id,\n name: s.name,\n durationMs: s.durationMs,\n status: s.status,\n })),\n retrievedChunks: this.displayedChunks().map((c) => ({\n citation: c.citationIndex,\n docPath: c.documentPath,\n relevance: rerankerEnabled ? c.relevanceScore : c.cosineScore,\n rerankBoost: rerankerEnabled ? c.rerankBoost : 0,\n tokenCount: c.tokenCount,\n })),\n synthesis: {\n model: 'claude-3-5-sonnet-20241022',\n promptTokens: 1248,\n completionTokens: 214,\n groundedFactRatio: 1.0,\n latencyMs: 820,\n },\n },\n null,\n 2,\n )\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6 font-sans', this.className)\n }\n\n private later(fn: () => void, ms: number): void {\n const id = setTimeout(() => {\n this.timers.delete(id)\n fn()\n }, ms)\n this.timers.add(id)\n }\n\n handleRunPipeline(): void {\n if (this.isExecuting()) return\n this.isExecuting.set(true)\n this.selectedStageId.set(1)\n this.later(() => this.selectedStageId.set(2), 200)\n this.later(() => this.selectedStageId.set(3), 450)\n this.later(() => this.selectedStageId.set(4), 700)\n this.later(() => {\n this.selectedStageId.set(5)\n this.isExecuting.set(false)\n }, 950)\n }\n\n handleSelectPreset(preset: string): void {\n this.currentQuery.set(preset)\n this.handleRunPipeline()\n }\n\n handleCopyChunk(id: string, text: string): void {\n void navigator.clipboard?.writeText(text)\n this.copiedChunkId.set(id)\n this.later(() => this.copiedChunkId.set(null), 2000)\n }\n\n handleCopyResponse(text: string): void {\n void navigator.clipboard?.writeText(text)\n this.copiedResponse.set(true)\n this.later(() => this.copiedResponse.set(false), 2000)\n }\n\n handleCopyTrace(): void {\n void navigator.clipboard?.writeText(this.traceJson())\n this.copiedTrace.set(true)\n this.later(() => this.copiedTrace.set(false), 2000)\n }\n\n onTopKChange(value: number[]): void {\n this.topK.set(value[0] ?? this.topK())\n }\n\n onStageKeydown(event: KeyboardEvent, stage: RagPipelineStage): void {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n this.selectedStageId.set(stage.id)\n }\n }\n\n toggleFeedback(value: 'up' | 'down'): void {\n this.userFeedback.set(this.userFeedback() === value ? null : value)\n }\n\n chunkScore(chunk: RagRetrievedChunk): string {\n return this.rerankerEnabled() ? chunk.relevanceScore.toFixed(3) : chunk.cosineScore.toFixed(3)\n }\n\n fileName(chunk: RagRetrievedChunk): string {\n return chunk.documentPath.split('/').pop() ?? ''\n }\n\n presetClass(preset: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 cursor-pointer rounded-full border px-2.5 py-0.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-hidden',\n this.currentQuery() === preset\n ? 'border-primary bg-primary/10 text-primary font-medium'\n : 'border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n rerankerBadgeClass(): string {\n return cn(\n 'font-mono text-xs',\n this.rerankerEnabled() ? 'border-success/30 bg-success/10 text-success' : 'text-muted-foreground',\n )\n }\n\n stageCardClass(stage: RagPipelineStage): string {\n return cn(\n 'group focus-visible:ring-ring relative flex cursor-pointer flex-col justify-between rounded-lg border p-3.5 transition-colors focus-visible:ring-2 focus-visible:outline-hidden',\n this.selectedStageId() === stage.id\n ? 'border-primary bg-primary/5 ring-primary/40 shadow-xs ring-1'\n : 'border-border bg-card hover:border-primary/40 hover:bg-muted/30',\n )\n }\n\n stageIconClass(stage: RagPipelineStage): string {\n return cn(\n 'flex size-7 items-center justify-center rounded-md text-xs font-semibold',\n this.selectedStageId() === stage.id\n ? 'bg-primary text-primary-foreground'\n : 'bg-muted text-foreground group-hover:bg-primary/20 group-hover:text-primary',\n )\n }\n\n stageLatencyClass(stage: RagPipelineStage): string {\n return cn('font-mono text-xs', stage.status === 'bypassed' && 'text-muted-foreground line-through opacity-70')\n }\n\n stageChevronClass(stage: RagPipelineStage): string {\n return cn(\n 'size-3.5 transition-transform',\n this.selectedStageId() === stage.id ? 'text-primary translate-x-0.5' : 'text-muted-foreground',\n )\n }\n\n chunkCardClass(chunk: RagRetrievedChunk): string {\n return cn(\n 'border-border bg-card shadow-xs transition-colors',\n this.activeCitationHover() === chunk.citationIndex && 'border-primary/80 ring-primary/20 bg-primary/5 ring-2',\n )\n }\n\n citationPillClass(chunk: RagRetrievedChunk): string {\n return cn(\n 'flex size-6 items-center justify-center rounded-md font-mono text-xs font-bold transition-colors',\n this.activeCitationHover() === chunk.citationIndex\n ? 'bg-primary text-primary-foreground'\n : 'bg-muted text-foreground',\n )\n }\n\n scoreBadgeClass(chunk: RagRetrievedChunk): string {\n return cn(\n 'font-mono text-xs font-semibold',\n chunk.relevanceScore >= 0.9\n ? 'border-success/30 bg-success/10 text-success'\n : chunk.relevanceScore >= 0.85\n ? 'border-success/30 bg-success/10 text-success'\n : 'border-info/30 bg-info/10 text-info',\n )\n }\n\n footnoteClass(chunk: RagRetrievedChunk): string {\n return cn(\n 'flex cursor-pointer items-center justify-between rounded border p-1.5 font-mono text-xs transition-colors',\n this.activeCitationHover() === chunk.citationIndex\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border/60 bg-card text-muted-foreground hover:bg-muted',\n )\n }\n\n /** px-1.5 (not React's `px-2`): React's has-[>svg]:px-1.5 outranks it; the svg here sits in . */\n feedbackClass(value: 'up' | 'down'): string {\n return cn('px-1.5', this.userFeedback() === value && (value === 'up' ? 'text-success' : 'text-destructive'))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/rag-pipeline-visualizer/rag-pipeline-visualizer.component.ts" }, { "path": "packages/registry-angular/blocks/rag-pipeline-visualizer/index.ts", "content": "export {\n UiRagPipelineVisualizerComponent,\n type RagPipelineStage,\n type RagRetrievedChunk,\n} from './rag-pipeline-visualizer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/rag-pipeline-visualizer/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/slider.json", "https://uipkge.dev/r/angular/switch.json" ], "description": "LlamaIndex and LangChain style Retrieval-Augmented Generation (RAG) pipeline debugger and chunk retrieval inspector. Features 5-stage interactive DAG flow, HyDE expansion preview, hybrid dense/sparse search telemetry, cross-encoder reranking, and grounded response synthesis.", "categories": [ "ai", "dashboard", "database", "app" ] }