pro143 lines · framer-motion

Plan Stepper

When the agent wants to change the plan, you see it. A checklist the agent works through. Mid-run it can propose an edit: the old step is struck out, the new one shown in green with the reason, and the run pauses until you accept or keep the original.

Use it for: Planning agents, multi-step automations, research tasks.
Themes: Light + dark
License: Commercial use (draft)

Live

Plan

Find invoices with rounding errors
Patch fee calculation
Email all EU customers
Open PR and request review

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface PlanStep {
  id: string;
  text: string;
  done?: boolean;
}

export interface PlanEdit {
  /** Step to replace; omit to insert after `after`. */
  replace?: string;
  after?: string;
  text: string;
  why: string;
}

export interface PlanStepperProps {
  steps?: PlanStep[];

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Steps tick off on a timer with a progress bar.
→At the edit point the target step gets an orange border, strike-through and a green replacement with the agent's reason.
→Accept edit replaces the step and tags it 'edited by agent'; Keep original leaves it.
→Demo loops when it finishes.

Accessibility

✓Progress bar has aria values.
✓Status line is aria-live.
✓Honours prefers-reduced-motion.