Agent checkpoints

Q: What is the Agent checkpoints block made of?

4 parts: checkpoints on a rail, one per step; branch from any of them into a new attempt; earlier attempts fold into a card you can restore; and the attempt you are on is picked in a switcher. Keep them all, or drop the ones your product does not need; the rest of the block holds together without them.

Q: Is the Agent checkpoints block responsive?

Yes. It is drawn at 620px and never stretched past that. Below it, its controls, text and spacing step down with the container the block sits in rather than the browser window, so it holds up in a sidebar, a tablet layout and a 390px phone without clipping or sideways scrolling.

Q: Is the Agent checkpoints block accessible?

It ships with text labels on every icon-only button, full keyboard reach with a visible focus ring, states that never rely on colour alone, text contrast that holds when you retheme it, no animation for visitors who ask for reduced motion, and click targets of at least 24px.

Q: How do I add the Agent checkpoints block to my project?

It is part of every Orvain Library plan: the React and Vue code, its frame in the Orvain Figma file, and the Orvain MCP server. With the MCP connected, an AI assistant such as Claude Code, Cursor or v0 can build it from one line: “Add the Orvain Agent checkpoints block to this page.”

Agent checkpoints is a Agents block from Orvain UI, built for React and Vue with a matching Figma frame.

Best for

Going back to an earlier point in a run and trying again from there

Anatomy

Checkpoints on a rail, one per step · branch from any of them into a new attempt · earlier attempts fold into a card you can restore · the attempt you are on is picked in a switcher

MCP

Add a changelog to the docsAttempt 2 · 6 checkpoints

2:03

Read the docs outline
0:09
Took the layout from Figma
2 files+640:30
Attempt 12 checkpoints · 1 file+412−4
- Pulled 24 releases from GitHub0:47
- Wrote an entry per release1 file+412−41:17
Pulled 24 releases from GitHub
1:34
Wrote the entries by month
1 file+961:49
Linked it in the sidebar
1 file+3−11:57
Posted the preview to #docs
2:03

Rewind to any checkpoint to try another way

In the Orvain Library

Get Agent checkpoints for your product

The block’s code in React and Vue, its frame in the Figma file, and the Orvain MCP so your AI tools build with it. Part of every Library plan, alongside every other block.

React
Vue
Figma frame
Orvain MCP

Get all access How the MCP works

About this block

Part of Agents

What’s inside

04parts

The pieces it is built from. Keep them all, or drop the ones your product doesn’t need.

Checkpoints on a railone per step
Branch from any of them into a new attempt
Earlier attempts fold into a card you can restore
The attempt you areon is picked in a switcher

Responsive behaviour

620 px

Drawn at this width and never stretched past it. Below it, controls, text and spacing step down from the box the block sits in, not the window.

1440pxDesktop · 12 columns

When to use it

Where Agents earns its place

Reach for Agents

An agent that acts in other people's apps, where some of its actions need a yes before they happen.
Several agents or several attempts running at once, where someone has to see which is stuck and which is done.
Runs long enough that people leave and come back, and need to catch up on what happened and what waits on them.
Spend or time that has to be explained afterwards, step by step, against a budget.

Reach for something else

A single question and a single answer. An assistant thread from the AI Chat family is the right surface, with its research shown inline.
A background job with no decisions in it, such as a nightly export. A progress bar and a notification say all there is to say.
A fixed automation people design ahead of time. Build it on the Workflow canvas, where the steps are drawn before they run rather than chosen as it goes.

Notes for AI

1 line

Is all your assistant needs. With the Orvain MCP connected, it builds the block from your own tokens and components.

Add the Orvain “Agent checkpoints” block to this page: checkpoints on a rail, one per step, branch from any of them into a new attempt, earlier attempts fold into a card you can restore, the attempt you are on is picked in a switcher.

Works in

Connect the MCP

Questions about Agent checkpoints.

What is the Agent checkpoints block?

Agent checkpoints is a Agents block from Orvain UI, built for React and Vue with a matching Figma frame. Best for going back to an earlier point in a run and trying again from there.

What is the Agent checkpoints block made of?

Is the Agent checkpoints block responsive?

Is the Agent checkpoints block accessible?

How do I add the Agent checkpoints block to my project?

When should I not use a Agents block?

Previous← Agent plan NextAgent findings →

More Agents blocks

All Agents

Release agentClaude · web-app v3.2

Needs you

0:42Elapsed

$0.018Spent

3/4Steps

Waiting in

Publish v3.2.0 on GitHub?GitHub · waiting for your OK
0:01
The agent wants to publish the release with these notes.
gh release create v3.2.0 --target main --notes-file notes.md
11.4s
Wrote the notes in four sections: new, improved, fixed and thanks.
4.1s
Matched the closed issues in Cycle 32 to the commits that closed them.
6.2s
Listed every commit on main since the v3.1 tag and grouped them by pull request.

NextPublish the release

Agent monitor

Watching one agent run, and giving it the OK when it asks

Move billing to Stripe5 steps · asks before posting

Read the billing code and find every place we charge a cardrepo.search · src/billing
Create the matching products and prices in Stripestripe.products.create
Switch the charge calls to Stripe behind a flagflag billing.stripe · 3 files
Run the billing tests against Stripe test modepnpm test billing
Post a summary of the change to #billingslack · #billing · asks first

Agent plan

Reading what an agent will do before it starts, and watching it work through the plan

Launch check · Checkout v264 checks · 1 critical · 2 should fix · 2 note

1:12

Findings5

Empty cart has no Figma frameNoteDesign QACart · Empty state
47s
Retry test is flaky, failed 1 of 5 runsShould fixTestsretry.test.ts:41
56s
Refund page still says 14 daysNoteDocsHelp center · Refunds
1m
1m
The handler logs every request header, and Stripe's signing secret is one of them. Anyone who can read the logs could fake a payment.
1. 87const event = verify(req, secret)
2. 88logger.info('webhook', req.headers)
3. 88logger.info('webhook', { id: event.id, type: event.type })
Pay button radius is 8px, Figma says 12Should fixDesign QACheckout · Pay button
1m

Agent findings

Reviewing what an agent found, and fixing or dismissing each item

Agent fleet

Keeping track of many agents at once and answering the ones that ask

Agent graph

Seeing which agents hand work to which, and through which apps

Agent cursors

Editing a document alongside agents and taking or leaving what they change

Agent lanes

Comparing what several agents did over the same stretch of time

Agent queue

Watching a queue of agent jobs work through a pool of workers

Agent trail

A small live card for one agent while you do something else

Agent recap

Catching up on what agents did overnight

Trace waterfall

Finding where a run spent its time across models, tools and calls

Cost waterfall

Seeing where a run's money went, step by step, against a budget

Agent inbox

One place to answer everything agents are waiting on

Approval gates

Getting a run signed off by the people who have to say yes before it goes on

Autonomy dial

Deciding how much an agent may do on its own, app by app

Agent steering

Changing what a running agent does without stopping it

Parallel attempts

Letting several models try the same task and keeping the best one

The Orvain Dispatch

Premium components,
free in your inbox.

Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.

Just components, never spam. You can unsubscribe anytime.