Quality trend

Pro

Scores over time (judge scores on live threads, by default), with what changed alongside: a model switch, an instructions edit, a new tool. The changes are listed under the chart by date so a move in the line can be read against its likely cause. Days the judge didn't sample are gaps.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/quality-trend

Brings in: line-chart, locale, ops, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { QualityTrend } from "@/components/quality-trend"
import type { QualityPoint } from "@/lib/ops"

const points: QualityPoint[] = [
  { date: "Oct 20", score: 0.86 },
  { date: "Oct 21", score: 0.87 },
  { date: "Oct 22", score: 0.85, change: "Instructions v3: shorter answers" },
  { date: "Oct 23", score: 0.81 },
  { date: "Oct 24", score: null },
  { date: "Oct 25", score: 0.8 },
  { date: "Oct 26", score: 0.83 },
  { date: "Oct 27", score: 0.88, change: "Dev agent moved to Claude Sonnet 5.5" },
  { date: "Oct 28", score: 0.89 },
  { date: "Oct 29", score: 0.9 },
  { date: "Oct 30", score: 0.84, change: "Added the repo.search tool" },
  { date: "Oct 31", score: 0.86 },
]

export default function Example() {
  return <QualityTrend className="max-w-2xl" points={points} />
}

<QualityTrend>

Prop	Type	Default	Description
title	`string \| undefined`	—	The chart's title. Defaults to "Answer quality".
subtitle	`string \| undefined`	—	The line under the title. Defaults to "Judge score, daily".
seriesLabel	`string \| undefined`	—	What the line measures, for the legend and the data table. Defaults to "Judge score".
gapNote	`((days: number) => string) \| undefined`	—	What to say about days with no score, given how many there are. Defaults to "3 days weren’t sampled."
pointsrequired	`QualityPoint[]`	—	One judge score per day (0–1, null when not sampled), with any change made that day.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under qualityTrend in <LocaleProvider strings={{ … }}>; the table is exported as qualityTrendStrings.

Key	English
title	Answer quality
subtitle	Judge score, daily
seriesLabel	Judge score
gapNote	{ one: "{count} day wasn’t sampled.", other: "{count} days weren’t sampled." }
changes	Changes