{"slug": "design-ai-citations-for-failure-not-just-the-happy-path", "title": "Design AI Citations for Failure, Not Just the Happy Path", "summary": "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.", "body_md": "An AI citation is often rendered as a tiny blue `[3]`\n\n. That works only when the source exists, loads quickly, matches the quoted revision, and is usable by keyboard and screen-reader users.\n\nA citation component needs states, not just a link.\n\n```\ntype CitationState =\n  | { kind: \"loading\"; label: string }\n  | { kind: \"available\"; label: string; href: string; excerpt: string }\n  | { kind: \"changed\"; label: string; href: string; retrievedAt: string }\n  | { kind: \"missing\"; label: string; reason: \"deleted\" | \"forbidden\" | \"offline\" };\n```\n\nRender each state in text:\n\n```\n<aside aria-labelledby=\"sources-heading\">\n  <h2 id=\"sources-heading\">Sources</h2>\n  <ol>\n    <li>\n      <a href=\"/docs/retention\">Audit-log retention policy</a>\n      <p>Retrieved 12 July 2026. The source has changed since retrieval.</p>\n      <details>\n        <summary>Show the excerpt used</summary>\n        <blockquote>Audit logs are retained for 30 days…</blockquote>\n      </details>\n    </li>\n  </ol>\n</aside>\n```\n\nDo 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\"`\n\n.\n\nFor 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`\n\nif citations animate into place.\n\nTest keyboard order, 200% zoom, high contrast, source deletion, authorization failure, slow networks, changed documents, long titles, duplicate sources, and citations created before streaming ends.\n\nThe 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.\n\nDisclosure: I contribute to the MonkeyCode project. The product connection is based on public documentation; no MonkeyCode accessibility test is claimed.\n\nA useful citation interface helps readers understand what evidence is available, what changed, and what still needs judgment.", "url": "https://wpnews.pro/news/design-ai-citations-for-failure-not-just-the-happy-path", "canonical_source": "https://dev.to/babycat/design-ai-citations-for-failure-not-just-the-happy-path-1i9e", "published_at": "2026-07-12 15:12:04+00:00", "updated_at": "2026-07-12 15:15:43.384159+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-safety", "ai-ethics", "natural-language-processing"], "entities": ["MonkeyCode"], "alternates": {"html": "https://wpnews.pro/news/design-ai-citations-for-failure-not-just-the-happy-path", "markdown": "https://wpnews.pro/news/design-ai-citations-for-failure-not-just-the-happy-path.md", "text": "https://wpnews.pro/news/design-ai-citations-for-failure-not-just-the-happy-path.txt", "jsonld": "https://wpnews.pro/news/design-ai-citations-for-failure-not-just-the-happy-path.jsonld"}}