Established

Edit attribution history

A per-change record of which edits came from a human and which from a model.

MWhy was I charged twice?Help article v14 · published

Milky Sam Okafor You Unmarked text: original draft

Why was I charged twice?

If you see two charges for the same invoice, the second is usually a repeated payment attempt. Nothing extra is owed.

Open Billing → Invoices and find both charges.
Compare the invoice numbers. Same number means a duplicate; different numbers mean two billing periods.
Click Request refund on the second charge. It reaches your payment method within 7 business days. Or call us on weekdays, 9–5.
Still see both after 7 days? Reply to your receipt email and we'll reopen it.

Example: Dana was charged $1,240 twice on 14 Aug.

History9 changes · 6 by Milky

MR

Maya Reyes · 26 Sep, 16:02

Reviewed and published v14
SO

Sam Okafor · 26 Sep, 15:40
M
Milky · for Sam Okafor · run #212 · 15:31

6 separate edits. Click one for its reason
SO

Sam Okafor · 25 Sep, 11:08

Created the first draft

Try it: Click any change in the history to see exactly which words it touched, and who made it. Then revert one of Milky's edits on its own, without losing the others.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Grammarly Authorship replay over an essay, with a timeline split into a 'Typed by a human' segment and an 'AI-generated' segment and a playhead — Grammarly Authorship
Authorship records how each passage got into the document, whether typed, pasted or AI-generated, and replays it on a colour-coded timeline.
Source: Grammarly product page ↗

When to use

Collaborative documents, code and designs where authorship affects review.

Seen in

Git co-author trailers on agent commits, Figma version history, Notion page analytics.

For engineers

Attribute at commit or block level with the agent identity, not the human's credentials.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Edit attribution history" pattern: `EditHistory`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A per-change record of which edits came from a human and which from a model.

Use it when: Collaborative documents, code and designs where authorship affects review.

## What to build
A per-change history for a document, file or design that attributes each edit to the person or agent who made it, shows exactly what each change touched, and lets a single change be reverted without undoing the others. It renders as a side panel next to the content.

### Props
- `changes`: Array<{ id: string; actor: { kind: "person" | "agent"; name: string; onBehalfOf?: string }; at: Date; summary: string; ranges: Array<{ before: string; after: string; location?: string }>; revertible: boolean; revertedBy?: { name: string; at: Date } }>, one entry per edit, never batched across actors.
- `selectedId?`: string and `onSelect(id | null)`: which change is highlighted in the content.
- `filter`: "all" | "people" | "agents" | string (an actor id), with `onFilterChange`.
- `onRevert(id)`: revert only this change. The component never edits the document itself.
- `groupBy?`: "none" | "session", collapse an actor's consecutive edits into an expandable group that still lists each one.
- `conflicts?`: Record<string, string>, reasons a change cannot be reverted cleanly, keyed by change id.

### States it must render
- List: newest first, each entry with the actor chip (agents visibly distinct), time and a specific summary like "Changed refund window from 5 to 10 days".
- Selected: the change's before and after text inline, with the affected words highlighted in the content.
- Grouped: "Agent made 50 edits" expands to all 50, each still selectable and revertible.
- Reverted: the entry stays, struck through, with "Reverted by <name>".
- Conflict: Revert disabled with the reason, e.g. "Later edits changed this text".

### Interactions
- Clicking an entry calls `onSelect`; arrow keys move between entries.
- Revert asks for inline confirmation showing the before text, then calls `onRevert`.
- Filter chips by people, agents or a specific actor call `onFilterChange` and show counts.

### Edge cases
- An agent edit made with a person's credentials: show the agent as actor and the person as "on behalf of"; if unknown, label it "Actor unclear" rather than crediting the person.
- A change that touched many places: show the first three ranges and "+ n more".
- Reverting a change that a later change depends on: surface the conflict, never silently revert both.
- Pure formatting or whitespace edits: label them as such so they don't look like content changes.

## Must avoid
Collapsing an agent's fifty edits into one anonymous "updated" entry.

## Engineering constraint
Attribute at commit or block level with the agent identity, not the human's credentials.

## Accessibility
- The history is a list; each entry's name includes actor type, actor, time and summary.
- After revert, announce "Reverted: <summary>" and keep focus on that entry.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for identifiers

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a viewer tell AI involvement without reading documentation?
Does the label survive export, copy and re-upload?
Is the acting agent distinguishable from the human it acts for?
Does disclosure meet the jurisdictions you ship to?