Eval card

Feedback paragraph card with a mono kicker. Surfaces evaluator prose alongside the dimension breakdown on /results.

Preview

What the grader noticed

You led with the read path, which is right for a fan-out heavy workload like this one. The choice of write-through over write-back is defensible at this scale.

Where the answer thinned out: bottleneck analysis at the queue layer. You named the queue but did not size it under burst.

Source

apps/docs/app/recipes/eval-card/recipe.tsx

export default function EvalCardRecipe() {
  return (
    <div className="bg-surface border-stroke rounded-xl border px-6 py-5">
      <p className="text-ink-3 text-2xs mb-2 font-mono font-bold tracking-[0.06em] uppercase">
        What the grader noticed
      </p>
      <div className="text-ink-2 space-y-3 text-sm leading-[1.6]">
        <p>
          You <strong className="text-ink-1 font-semibold">led with the read path</strong>, which is
          right for a fan-out heavy workload like this one. The choice of write-through over
          write-back is defensible at this scale.
        </p>
        <p>
          Where the answer thinned out:{' '}
          <strong className="text-ink-1 font-semibold">
            bottleneck analysis at the queue layer
          </strong>
          . You named the queue but did not size it under burst.
        </p>
      </div>
    </div>
  );
}

export default function EvalCardRecipe() {
  return (
    <div className="bg-surface border-stroke rounded-xl border px-6 py-5">
      <p className="text-ink-3 text-2xs mb-2 font-mono font-bold tracking-[0.06em] uppercase">
        What the grader noticed
      </p>
      <div className="text-ink-2 space-y-3 text-sm leading-[1.6]">
        <p>
          You <strong className="text-ink-1 font-semibold">led with the read path</strong>, which is
          right for a fan-out heavy workload like this one. The choice of write-through over
          write-back is defensible at this scale.
        </p>
        <p>
          Where the answer thinned out:{' '}
          <strong className="text-ink-1 font-semibold">
            bottleneck analysis at the queue layer
          </strong>
          . You named the queue but did not size it under burst.
        </p>
      </div>
    </div>
  );
}