# Design AI Citations for Failure, Not Just the Happy Path

> Source: <https://dev.to/babycat/design-ai-citations-for-failure-not-just-the-happy-path-1i9e>
> Published: 2026-07-12 15:12:04+00:00

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.