Design AI Citations for Failure, Not Just the Happy Path

A developer proposes designing AI citation components with explicit states—loading, available, changed, missing—rather than relying solely on a blue link. The pattern includes text-based status indicators, accessible labels, and support for live updates, keyboard navigation, and high contrast. The approach is illustrated with a code example and a list of test scenarios, though it is not a description of any existing product's UI.

An AI citation is often rendered as a tiny blue 3 . That works only when the source exists, loads quickly, matches the quoted revision, and is usable by keyboard and screen-reader users. A citation component needs states, not just a link. type CitationState = | { kind: "loading"; label: string } | { kind: "available"; label: string; href: string; excerpt: string } | { kind: "changed"; label: string; href: string; retrievedAt: string } | { kind: "missing"; label: string; reason: "deleted" | "forbidden" | "offline" }; Render each state in text: <aside aria-labelledby="sources-heading" <h2 id="sources-heading" Sources</h2 <ol <li <a href="/docs/retention" Audit-log retention policy</a <p Retrieved 12 July 2026. The source has changed since retrieval.</p <details <summary Show the excerpt used</summary <blockquote Audit logs are retained for 30 days…</blockquote </details </li </ol </aside Do not encode verification as green alone. Use text such as “source available,” “source changed,” or “source unavailable.” Keep inline markers short, but give links descriptive accessible names such as aria-label="Source 3: Audit-log retention policy" . For live updates, announce a restrained summary such as “Two sources added” in a polite live region. Let users navigate the durable list normally. Respect prefers-reduced-motion if citations animate into place. Test keyboard order, 200% zoom, high contrast, source deletion, authorization failure, slow networks, changed documents, long titles, duplicate sources, and citations created before streaming ends. The public MonkeyCode repository https://github.com/chaitin/MonkeyCode describes project requirements and AI task workflows. Citation states are relevant when a coding interface presents requirement or repository evidence, but this component is a proposed pattern, not a description of MonkeyCode's current UI. Disclosure: I contribute to the MonkeyCode project. The product connection is based on public documentation; no MonkeyCode accessibility test is claimed. A useful citation interface helps readers understand what evidence is available, what changed, and what still needs judgment.