AI Label

1import { AiLabel } from '@/ui/Display'23// The label opens the explainer — that is what makes it a disclosure rather4// than a decoration.5<Row>6  <h3>Incident summary</h3>7  <AiLabel8    provenance="Written from the deployment logs and the linked incident."9    reviewed={summary.reviewedBy}10    onFeedback={(useful) => track('ai_feedback', { id: summary.id, useful })}11  />12</Row>1314// The disclosure must be announced WITH the content, not merely beside it.15<section aria-describedby="ai-disclosure">16  <p id="ai-disclosure" className="sr-only">17    This summary was generated by a language model and has not been reviewed.18  </p>19  <p>{summary.text}</p>20</section>2122// Review status is a different claim about who is accountable.23{summary.reviewedBy ? (24  <Badge tone="success">Reviewed by {summary.reviewedBy}</Badge>25) : (26  <AiLabel />27)}2829// One disclosure per region. Twelve labels on twelve suggested tags is30// twelve marks nobody reads.31<Row>32  <h4>Suggested tags</h4>33  <AiLabel size="sm" />34</Row>35{tags.map((t) => <Badge key={t}>{t}</Badge>)}

<div class="ds-section">
  <h3 id="summary-heading">Incident summary</h3>

  <!-- The sparkle is decoration; the word is the disclosure. -->
  <button
    type="button"
    class="ds-ai-label"
    aria-label="AI generated — what does this mean?"
    aria-haspopup="dialog"
    aria-expanded="false"
  >
    <svg aria-hidden="true">…</svg>
    AI
  </button>

  <!-- Announced WITH the content, not merely beside it. -->
  <p id="ai-disclosure" class="sr-only">
    This summary was generated by a language model and has not been
    reviewed by a person.
  </p>

  <p aria-describedby="ai-disclosure">
    The health check failed in eu-west-2 at 14:32…
  </p>
</div>

<div role="dialog" aria-label="AI-generated summary">
  <p>Written by a language model from the deployment logs.</p>
  <button type="button">Useful</button>
  <button type="button">Not useful</button>
</div>

.ds-ai-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 22px;                  /* badge scale: visible and quiet */
  padding-inline: 8px;
  border: 1px solid var(--ds-accent-border);
  border-radius: 999px;
  /* Accent, never a status colour: green would claim the content is good,
     amber that it is risky. The label says neither. */
  background: var(--ds-accent-subtle);
  color: var(--ds-accent-text);
  font-size: 11px;
  font-weight: 500;
}

.ds-ai-label:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* Review status is a different claim, so it gets a different mark. */
.ds-ai-label--reviewed {
  border-color: var(--ds-success-border);
  background: var(--ds-success-subtle);
  color: var(--ds-success-text);
}

/* The tint is gone here, so the word and border must carry it alone. */
@media (forced-colors: active) {
  .ds-ai-label { border: 1px solid; }
}

/* Padding, not a bigger pill. */
@media (pointer: coarse) {
  .ds-ai-label { padding-block: 11px; margin-block: -11px; }
}