Retrieval debuggerPro
Query, rewritten queries, retrieved chunks with scores and the reranked order, with a line from each chunk's first place to its new one.
On this page
ProRewrite, retrieve, rerank: the refund window rule climbs from 6th to 1st and the top 4 go to the model.
Installation
Usage
import { RetrievalDebugger } from "@/components/ui/chatcn/pro/retrieval-debugger"
<RetrievalDebugger
query={query}
variants={rewrites}
candidates={candidates}
stage={run.stage}
topK={5}
/>Feed it your retriever's trace. Each candidate has its first stage rank and score, optional vector and keyword scores, a rerankScore once reranking is done, and the variants that found it. Choosing a query variant dims everything it did not find. Selecting a chunk shows its text with the query terms marked and every score. On narrow panels it keeps the reranked list with each chunk's movement.
Examples
States
ProReranker timed out, nothing retrieved, and a narrow panel with a chunk selected.
Props
| Prop | Type | Notes |
|---|---|---|
query | string | The user's question |
variants | { id, text, kind }[] | kind: "original" | "rewrite" | "hyde" | "keywords" |
candidates | RetrievalCandidate[] | { id, text, source, location?, rank, score, vectorScore?, keywordScore?, rerankScore?, variants?, used? } |
stage | "rewriting" | "retrieving" | "reranking" | "done" | Default done |
topK | number | Chunks sent to the model. Default 5 |
error, errorStage, onRetry | A failed stage keeps what came before | |
timings | { rewrite?, retrieve?, rerank? } | Milliseconds, drawn as the stage bar |
retriever, reranker | string | Column notes |
Keyboard
| Key | Action |
|---|---|
| Tab | Query variants, then first stage rows, then reranked rows |
Accessibility
- Rank changes are said in words (up 5), not only with arrows.
- Rows are pressed buttons; the selected chunk's details follow the board.
- The lines between columns are decorative; both lists carry the order.
Motion
When reranking lands, rows glide to their new places over 280 ms with the in-out curve, then the lines fade in. Reduced motion moves rows instantly and keeps the fade.