Skip to content
Statecraft

All patterns

  • Bulk Actions

    Let users perform one action across many records safely, with clear scope, eligibility and recovery.

    Data

  • Advanced Filters

    Help users narrow large datasets with filters they can see, edit, share and recover from.

    Data

  • Autosave

    Save changes continuously without a Save button, while keeping users certain their work is safe.

    Forms

  • Approval Workflow

    Route a request through one or more reviewers with clear status, accountability and an auditable history.

    Workflow

  • AI Response

    Present generated answers with streaming, sources, control and recovery, so users can trust and verify them.

    AI

  • File Upload

    Let users add files with visible progress, early validation and recovery that never loses what already uploaded.

    Files

  • Command Palette

    Give users one keyboard-first entry point to jump anywhere and run any action without hunting through menus.

    Navigation

  • Subscription Management

    Let customers upgrade, downgrade, change billing cycles and cancel with exact prices, dates and consequences shown before they confirm.

    Payments

  • Refunds

    Let support staff or customers return money with the exact amount, destination, timing and consequences stated before it's irreversible.

    Payments

  • Checkout

    Take a customer from plan choice to paid with the fewest fields, a total that never surprises, and errors that keep what they typed.

    Payments

  • Failed Payment Recovery

    Recover failed renewals with timely, specific prompts and a grace period, before customers lose access they still want.

    Payments

  • Usage & Limits

    Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

    Payments

  • App Sidebar

    Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

    Navigation

  • Tabs

    Split one object's content into peer views that users switch between without losing their place, state or URL.

    Navigation

  • Breadcrumbs & Back

    Show users where they are in a hierarchy and get them back to exactly where they came from — filters, scroll and all.

    Navigation

  • File Preview

    Let users look inside a file without downloading it, with a predictable fallback for every type the product can't render.

    Files

  • Attachments

    Attach files to records and comments with clear ownership, visibility and deletion rules that match the record they belong to.

    Files

  • CSV Import

    Bring spreadsheet data into the product with column mapping, row-level validation and a preview, so nothing is imported by surprise.

    Files

  • Confirmation

    Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

    Workflow

  • Partial Failure

    Report operations where some items succeed and some fail, so users know exactly what happened and what to do about the rest.

    Workflow

  • Permissions

    Show people what they can do, explain what they can't, and give them a way forward instead of a dead end.

    Workflow

  • Notifications

    Tell people about things that need them, in the right channel and at the right volume, without burying what matters.

    Workflow

  • Activity History

    Show who changed what and when on a record, in a timeline people can scan, filter and trust.

    Data

  • Empty States

    Design what users see when there's nothing to show, so every empty screen explains why and offers the next useful step.

    Data

  • Version History

    Let users see earlier versions of a document or record, compare them, and restore safely without losing current work.

    Forms

  • Human Review

    Put a person between AI output and real-world consequences, with review that's fast for good output and careful for risky output.

    AI

  • Feedback

    Collect quick, specific feedback on AI output that users actually give, and that the team can actually use.

    AI

  • Inline Validation

    Tell users about input problems at the right moment — not while they're still typing, and not only after they submit.

    Forms

  • Unsaved Changes

    Protect work in forms that save explicitly, warning only when something would actually be lost.

    Forms

  • Offline Mode

    Keep users working when the connection drops, with an honest view of what's synced, what's pending and what can't be done offline.

    Forms

  • Search

    Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

    Data

  • Pagination

    Split long lists into pages or progressive loads in a way that keeps position, counts and selection predictable.

    Data

  • Saved Views

    Let users save a combination of filters, sorting and columns as a named view they and their team can return to.

    Data

  • Comments

    Let people discuss work where it happens — on the record or the exact part of it — with mentions, threads and resolution.

    Workflow

  • Error Recovery

    When something fails, say what happened in plain language, protect the user's work, and offer the most useful next step.

    Workflow

  • Keyboard Shortcuts

    Give frequent users fast keyboard paths that are discoverable, consistent and never get in the way of typing.

    Navigation

  • Prompt Input

    Design the box where users ask AI for things — with context, attachments and controls visible — so prompts start strong and never get lost.

    AI

  • AI Suggestions

    Offer AI-generated values, completions and next steps inline, so users accept good ones in one action and ignore the rest at no cost.

    AI

  • Agent Progress

    Show what an AI agent is doing during long, multi-step tasks — steps, tool use and decisions — so users can follow, steer and stop it.

    AI

  • AI Onboarding

    Introduce an AI feature by showing what it can do with the user's own data, setting honest expectations about limits and privacy.

    AI

  • Export

    Let users take their data out in the format they need, with a clear scope and no surprises about what's included.

    Files

  • Sharing & Links

    Let people share files and records with teammates or outsiders, with access levels and link scope that are impossible to misread.

    Files

  • Storage Limits

    Show how much storage is used and by what, and handle a full quota without blocking work or deleting anything.

    Files
DataFree

Activity History

Show who changed what and when on a record, in a timeline people can scan, filter and trust.

6 states5 edge casesDesktop + Mobile

01The problem

When something looks wrong — an amount changed, a status reverted, a file disappeared — the first question is “who did this, and when?”. Without a history, users ask around in chat. With a raw event log, they scroll through hundreds of “updated record” entries that say nothing about what actually changed.

02When to use

Use when

  • Records edited by several people: deals, invoices, tickets, documents
  • Regulated or financial data needing an audit trail
  • Records that change state through a workflow

Avoid when

  • Single-user data where nobody else changes anything.
  • High-frequency system updates (sensor readings, sync heartbeats) — summarise them instead.

03Recommended UX

Statecraft recommendation

Show a chronological timeline on each record where every entry names the person, the action and the specific change — “Dana changed amount from $4,800 to $9,200” — with consecutive minor edits by the same person collapsed into one entry.

“Dana updated this invoice” forces users to compare versions themselves. The before → after value is the information they came for.

Collapsing a burst of edits by one person keeps the timeline readable without hiding anything.

Placing history on the record, not in a separate admin log, means it's actually used when questions arise.

04Interaction flow

  1. 01

    Change happens

    User, API or automation edits the record.

  2. 02

    Event recorded

    Actor, timestamp, field, before and after.

  3. 03

    Timeline renders

    Grouped by day; consecutive edits collapsed.

  4. 04

    Filter

    Comments only, changes only, or by person.

  5. Result

    • Answer found
    • Change reverted

05Desktop behaviour

On desktop, the timeline sits beside or below the record and mixes changes with comments, so the discussion and the edits read as one story.

Desktop rules

  • Each entry: avatar, name, action sentence, relative time (absolute time on hover).
  • Field changes show old → new values; long text shows a diff on expand.
  • Filters: All, Comments, Changes.
  • Automation and API changes show their source (“via Salesforce sync”).
Every entry names the person and the exact change — before and after — mixed with comments in one timeline.

06Mobile behaviour

On mobile, the timeline is a tab or section of the record, with compact entries and changes expandable on tap.

Mobile rules

  • Compact rows: name, action, time; tap to expand values.
  • Keep the comment composer separate from the history so it doesn't scroll away.
  • Load older entries on scroll, newest first.
Compact rows newest first; tapping a change expands the before and after values.

07States

  • Timeline

    Entries grouped by day, newest first.

  • Collapsed edits

    “Dana made 6 changes” — expands to the list.

  • Filtered

    Comments or changes only; count shown.

  • Loading older

    Older entries loaded on scroll.

  • Empty

    “Created by Alex on 2 Oct. No changes since.”

  • Restricted entries

    Changes to fields the viewer can't see are summarised without values.

08Edge cases

  1. EC-01

    Sensitive field changes

    A salary field changes, and some viewers can't see salaries.

    Recommendation

    Show “Alex changed a restricted field” without values for those viewers.

  2. EC-02

    Deleted users

    A change was made by someone who has since left.

    Recommendation

    Keep their name with a “(deactivated)” label. Never rewrite history to “Unknown user”.

  3. EC-03

    Bulk changes

    An admin updates 500 records at once.

    Recommendation

    Record per-record entries, but tag them with the batch so the timeline reads “as part of a bulk update of 500 invoices”.

  4. EC-04

    Automations

    A workflow rule changes status automatically.

    Recommendation

    Name the rule as the actor (“Rule: Overdue after 30 days”) with a link to it, rather than attributing it to the rule's creator.

  5. EC-05

    Time zones

    A team spans London and San Francisco.

    Recommendation

    Show relative time, with the absolute time in the viewer's time zone on hover.

09Microcopy

  • Change

    Avoid

    “Dana updated this record”

    Prefer

    “Dana changed amount from $4,800 to $9,200”

  • Collapsed

    Prefer

    “Dana made 6 changes · Show”

  • Automation

    Prefer

    “Status set to Overdue by rule “30 days past due””

  • Empty

    Avoid

    “No activity”

    Prefer

    “Created by Alex on 2 Oct. No changes since.”

10Accessibility

  • The timeline is an ordered list; each entry is a complete sentence for screen readers.
  • Use <time> elements with machine-readable datetimes.
  • Expandable groups use buttons with aria-expanded.

11Developer notes

  1. 01

    Write history as an append-only event log at the domain layer (actor, source, field, before, after, batch id), not inferred from row snapshots.

  2. 02

    Apply field-level permissions when reading history, not when writing it.

  3. 03

    Collapse consecutive edits at read time so the raw log stays complete.

  4. 04

    Index by record and time for fast pagination.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement an activity history timeline on records.

Requirements:
- Append-only event log: actor (user, API, automation), source, field, before, after, batch id, timestamp.
- Timeline on the record: grouped by day, newest first, mixing comments and changes.
- Entries as sentences with before → after values; long text diff on expand.
- Collapse consecutive edits by the same actor within a short window.
- Filters: All / Comments / Changes.
- Automation and integration sources named as actors.
- Field-level permission filtering at read time ("changed a restricted field").
- Deactivated users keep their names with a label.
- Relative time with absolute local time on hover; <time> elements.
- Pagination of older entries.
- Mobile: compact rows, tap to expand values.

Do not redesign the existing interface.