Source list

Sources placed above the answer so calibration comes first. Each carries a domain and a date, a paywalled one and an inaccessible one are marked, and the count says how many candidates were retrieved against how many were used.

npx shadcn@latest add button
npm i lucide-react

Tokens this needs: --card-foreground, --muted, --muted-foreground, --border, --status-warn, --chart-1
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// SourceList.tsx
────────────────────────────────────────────────────────────────────────

import { useState, type ReactNode } from "react";
import { Lock } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * A row is judged before the click, so the things that decide the judgement
 * are required: the domain, the date, and whether the reader can open it at
 * all. `access` is a closed set because each value wants a different mark and
 * a different explanation, and "unavailable" would cover none of them.
 */
export type Access = "open" | "paywalled" | "no-access" | "dead";

export type Source = {
  title: string;
  /** Host, or a path for a document in the viewer's own corpus. */
  domain: string;
  /** As the source states it: "Jan 2026". */
  date: string;
  url: string;
  access: Access;
};

const ACCESS_LABEL: Record<Exclude<Access, "open">, string> = {
  paywalled: "paywalled",
  "no-access": "no access",
  dead: "link dead",
};

export function SourceList({ sources, retrieved, max = 8, onOpen, children }: {
  /** What the answer drew on, most-used first. */
  sources: Source[];
  /** How many candidates retrieval returned before generation chose. Required:
   *  the used count alone hides how thin the basis was. */
  retrieved: number;
  /** Rows shown before the expander. */
  max?: number;
  onOpen?: (source: Source) => void;
  /** The answer. It renders below the list, so the reader is calibrated first. */
  children: ReactNode;
}) {
  const [expanded, setExpanded] = useState(false);
  const shown = expanded ? sources : sources.slice(0, max);
  const used = sources.length;

  return (
    <div>
      <ul className="grid grid-cols-2 gap-3 sm:grid-cols-4" aria-label="sources">
        {shown.map((s) => {
          const gated = s.access !== "open";
          return (
            <li key={s.url}>
              <a
                href={s.url}
                target="_blank"
                rel="noreferrer"
                onClick={() => onOpen?.(s)}
                title={s.title}
                className={cn("block rounded-md border px-3 py-2 no-underline", gated && "border-status-warn")}
              >
                <p className="truncate text-[11px] text-card-foreground">{s.domain}</p>
                <p className={cn("mt-1 flex items-center gap-1 text-[11px]", gated ? "text-status-warn" : "text-muted-foreground")}>
                  {gated && <Lock className="size-2.5" aria-hidden="true" />}
                  {gated ? ACCESS_LABEL[s.access as Exclude<Access, "open">] : s.date}
                </p>
              </a>
            </li>
          );
        })}
      </ul>

      <div className="mt-4 flex items-center gap-4">
        <p className="text-[11px] tabular-nums text-muted-foreground">retrieved {retrieved}, used {used}</p>
        <span role="meter" aria-valuemin={0} aria-valuemax={retrieved} aria-valuenow={used} aria-label="sources used of those retrieved"
          className="flex h-2 w-[200px] overflow-hidden rounded-full bg-muted">
          <span className="bg-chart-1" style={{ width: `${(100 * used) / retrieved}%` }} />
        </span>
        {sources.length > max && (
          <Button variant="link" size="sm" className="ml-auto h-auto p-0 text-[11px]" onClick={() => setExpanded((e) => !e)}>
            {expanded ? "fewer" : `${sources.length - max} more`}
          </Button>
        )}
      </div>

      <div className="mt-4 border-t pt-4">{children}</div>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { SourceList, type Source } from "./SourceList";

/**
 * Four sources used out of twenty retrieved, above the answer they produced.
 * Two are open, one is behind a paywall, and the figures spreadsheet is one
 * the viewer cannot open, which the answer then has to admit.
 */
const SOURCES: Source[] = [
  { title: "Histograms and summaries", domain: "prometheus.io", date: "Jan 2026", url: "https://prometheus.io/docs/practices/histograms/", access: "open" },
  { title: "Dashboards: making charts and graphs easier to understand", domain: "nngroup.com", date: "Apr 2026", url: "https://www.nngroup.com/articles/dashboards-preattentive/", access: "open" },
  { title: "Cloud spending rises as software firms chase AI capacity", domain: "wsj.com", date: "Aug 2026", url: "https://www.wsj.com/tech/ai/cloud-spending-ai-capacity", access: "paywalled" },
  { title: "Q3 figures", domain: "finance/Q3.xlsx", date: "Sep 2026", url: "drive://finance/Q3.xlsx", access: "no-access" },
];

export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <SourceList sources={SOURCES} retrieved={20} onOpen={(s) => console.log("opened", s.domain)}>
        <p className="text-sm leading-relaxed text-card-foreground">
          Report latency at p50, p95 and p99 rather than as a mean, since the tail is what pages someone, and put the comparison window beside every figure on the tile. The sector benchmark is taken from the WSJ piece's summary only, and the Q3 spreadsheet could not be read, so the infrastructure line below is from last quarter's figures.
        </p>
      </SourceList>
    </div>
  );
}