Change Summary - Everyday Interface Patterns

A static activity change summary shows field Status, before Draft, after Ready for review, and reason Copy approved.

Program

Change summaries should show what changed before implying an audit backend, mutation history, or realtime activity stream.

activity_change_summary.html

Visuals: captured from real browser rendering

<section class="change-summary" aria-labelledby="change-title">
  <h2 id="change-title">Activity change</h2>
  <dl>
    <div><dt>Field</dt><dd>Status</dd></div>
    <div><dt>Before</dt><dd>Draft</dd></div>
    <div><dt>After</dt><dd><span class="badge">Ready for review</span></dd></div>
    <div><dt>Reason</dt><dd>Copy approved</dd></div>
  </dl>
  <p class="note">Static change summary only; no route, save, share, filter, query, load, log, audit, mutation, or activity service runs.</p>
</section>
<style>
  .change-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .change-summary dl { display: grid; gap: 8px; margin: 0; }
  .change-summary dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .change-summary dt { color: #475569; }
  .change-summary dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the change summary.
The section is labelled by its visible heading.
Show the field row.
The field is exact pinned data.
Show the before row.
The before value is exact pinned data.
Show the after row.
The after value is exact pinned data.
Show the reason readback.
The reason is exact pinned data.
Check change summary honesty.
Field, before, after, reason, and no audit service.

labelled change summary The section heading names the activity change surface.

before after rows Field, before, after, and reason are exact pinned data.

no audit service The lesson should not imply logging APIs, audit APIs, mutation APIs, activity feeds, or realtime services.