Audit detail

The expanded content of an Item list row that records what changed — the screen "What the assistant did" (/asistent/historie, bundle K3, approved prototype proto/asistent-audit@60ff4f48f, 18 Oct 2026). It fills the row's block slot; it never replaces the row frame. React apps/web/src/components/assistant/audit/AuditDetail.tsx (AuditDetail, AuditChanges, AuditItems, AuditMail), CSS apps/web/src/ds/audit-detail.css (.acrm-audit*, tokens only). Sub-component of the Item list family (owner decision, 19 Oct 2026).

When to use

• A row of an Item list that can be expanded to show the fields a write changed (before → after), the items of a batch action, or the e-mail that was sent.
• A history of edits of a record, or a preview of a batch action before it is confirmed — any place where "field · before → after" repeats.

When not to use

• The fields of one record at rest — that is Record rail.
• Events on a time axis with no field diff — that is Timeline.
• A full side-by-side text diff — this is a one-line-per-field summary, not a diff viewer.
• Anything that has to stay visible all the time: the detail is collapsed by default and opened by the row's chevron.

Anatomy

• Container div.acrm-audit (grid, --sp-3 gap), aria-busy while the batch items are being fetched.
• Note p.acrm-audit-note (--fg-secondary): the extra sentence — "Waiting for your confirmation…", "Reverted…". On a phone it also carries actor · time, which the narrow row has no column for.
• Changes dl.acrm-audit-ch: two columns max-content 1fr; dt is the field name (--fg-muted), dd is .was (struck through, --fg-muted) · arrow icon · .now (--fg). An empty value is an em dash.
• Batch ul.acrm-audit-items: one line per item — .n (name, --fg, max 45 %, ellipsis) and .c (field: before → after, --fg-muted, ellipsis); the last line .more says "and N more" when the list is truncated.
• E-mail div.acrm-audit-mail: a dl.acrm-audit-ch with To / Cc / Subject without the arrow (nothing "changed"), then the label .acrm-audit-mail-h and the body in p (white-space: pre-wrap); border-left: 2px solid var(--border).
• Actions div.acrm-audit-act: supplied by the caller — undo, "Open record". The detail never renders actions itself. On a phone they stretch (flex: 1) and are --tap-min high.

Props

AuditDetail takes: changes (array of { key, field, before, after }, required), note? (string), mail? ({ to, cc, subject, body, bodyHidden }), items? + itemsTotal? (batch lines and the full count), loading? (boolean, sets aria-busy), actions? (ReactNode). The parts AuditChanges, AuditItems and AuditMail are exported for reuse. Which block shows is decided by the data: items win over changes, an e-mail replaces the changes grid.

Best practices

• Show only fields that changed. The grid is a summary; the full record lives behind "Open record".
• Field names and values are already localised and formatted by the server — the component does no domain logic.
• Put the undo action in actions only while the change is reversible; the row decides, not the detail.
• The e-mail body is shown to the mailbox owner only (bodyHidden → a sentence instead of the text).
• A title-wrapping rule for narrow rows belongs to the screen, not to this component (.acrm-audit-page .il-row .il-t in the audit page stylesheet).

Content

• Sentence case, no capitals; the note is one sentence.
• Before → after is read left to right; never reverse it.
• A missing value is "—", never an empty cell and never the word "null".

Related

• Item list (item-list) — the host; the detail sits in its block slot.
• Timeline (timeline) — events without a field diff.
• Count badge — the batch size next to the verb in the row title.