REFERENCE
- Gallery page: https://magpui.com/en/i/agent-checkpoints-with-rewind-581e14
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-checkpoints-with-rewind-581e14/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/agent-checkpoints-with-rewind-581e14/clip.mp4
- Original post: https://x.com/flohoeller/status/2117589078581612582 by @flohoeller
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: A compact 'Checkpoints' card that works like git for an AI agent run. Each step the agent completes is appended as a checkpoint row on a vertical timeline. Hovering a row reveals a Rewind button; rewinding to a step greys out every later step as discarded and starts a new branch from that point, labelled 'Attempt 2', where new steps keep appending. It should feel calm, precise and alive, like watching a well-behaved agent work.
DESIGN SYSTEM: Page #F8F8F7, card white #FFFFFF, radius 14px, 1px border #ECECEC, shadow 0 1px 2px rgba(0,0,0,0.04), width about 560px, padding 14px 18px. Header row: small branch glyph 14px #6B6B6B, 'Checkpoints' 14px/600 #111111, task name 'Ship the pricing page' 14px #8A8A8A, right-aligned meta '5 checkpoints · $0.38' 12px #8A8A8A (becomes '8 checkpoints · 2 attempts · $0.57'). Rows 32px tall: a 18px rounded app icon tile (neutral placeholder icons), step title 13px #1A1A1A, at right a files meta ('4 files' with a tiny stacked-files icon, 11px #9A9A9A) and a timestamp 12px #8A8A8A tabular-nums ('0:09', '0:30', '2:02'). Timeline rail at the left: 1.5px line #B9CCF5 with the newest checkpoint as an 8px solid dot #1F5BE0 and older ones as small rail ticks. Hovered row: background #F6F6F6, radius 8px, the timestamp is replaced by a 'Rewind' pill (counter-clockwise arrow icon, 12px/500 #333). Discarded rows: text and icons at 35% opacity, a 'Skipped' label 11px #B0B0B0 near the right. Attempt badge: 'Attempt 2' 11px/500 #555 on #F0F0F0, radius 5px, padding 1px 6px, next to the first step of the new branch. Branch: a second rail splits from the rewound checkpoint with a smooth 12px curve and continues down the new rows, while the old rail fades to #E3E3E3.
MOTION: New checkpoint: row height grows from 0 to 32px over 260ms cubic-bezier(0.22,1,0.36,1), content fades and slides up 4px, the rail extends by drawing (stroke-dashoffset) over 260ms and the blue head dot moves down to the new row with a spring (stiffness 420, damping 34); header count and cost tick up with a rolling number. Hover: background and Rewind pill fade in over 120ms. Rewind: later rows fade to 35% opacity over 220ms and get the Skipped label, the head dot springs back up to the chosen checkpoint, then the branch curve draws out over 300ms and new rows append on it with the Attempt 2 badge popping in (scale 0.9 to 1, 160ms). Rows appear about every 0.6s in the demo loop.
SECTIONS: Parts: header (title, task, meta), checkpoint rows, rail with head dot, branch rail, Rewind pill, Attempt badge, Skipped state. Row states: active head, past, hovered, discarded, branched.
IMPLEMENTATION: React with Motion (AnimatePresence plus layout for rows, an SVG path for the rails with animated pathLength). Model checkpoints as a tree: each node has parentId and attempt; the visible list is the current branch plus greyed siblings. Rewind sets a new head and later nodes become discarded. Rows are buttons; Rewind is reachable with Tab and Enter, with an aria-live message 'Rewound to Wrote the plan copy'. prefers-reduced-motion: rows and branch appear with a 120ms fade, no drawing or spring. Animate only transform, opacity and stroke properties.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map the colors above to the closest existing tokens. Never copy logos, brand names or provider icons from the original: use neutral placeholder icons and sample step names.
SUCCESS CHECK:
- Steps append one by one with the rail and blue head dot following, and the header count and cost update.
- Hovering a past row shows Rewind; clicking it greys out the later rows and starts a branch labelled Attempt 2 where new steps continue.
- It works with the keyboard and respects prefers-reduced-motion.
