Skip to content

ContextCards

Proposed

The chunks an agent retrieved before it answered: title, length, the passage, and a source chip with the file type. They enter once and stay.

@varick/ui/components/context-cardsAdded 2 Sept 2026

All chunks32
Appetite rule290 characters

Commercial auto fleets over 250 units, or any radius beyond 500 miles, need underwriter referral before a quote is released.

PDFMeridian Appetite Guide.pdf
Loss run summary row1,250 characters

Five-year view: frequency down 12% since 2023, severity flat, one open claim reserved at $48k; no claims over $100k.

CSVLoss Runs Export.csv

Usage

import { ContextCards } from "@varick/ui/components/context-cards";

export function Example() {
  return <ContextCards chunks={retrieval.chunks} count={String(retrieval.total)} />;
}

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
chunksContextChunk[]demo settitle, chars, body, source, badge (PDF, CSV), tone.
headerstring'All chunks'The heading.
countstring'32'Total retrieved, shown next to the heading.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.context-card { border: 1px solid var(--hairline); border-radius: 4px; background: #FFFFFF; overflow: hidden; }
.context-card-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--hairline-soft); background: var(--fill-soft); font-size: 13px; font-weight: 500; }
.context-card p { padding: 8px 12px 4px; font-size: 12.5px; line-height: 1.6; color: var(--fg-mid); }
.source-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--hairline-soft); background: var(--fill); border-radius: 4px; font-size: 12px; font-weight: 500; }