fragms
Studio

An agent's to do list that ticks itself off as it works. The step it is on shimmers, finished ones fold away, and a thin bar keeps the count, so a long task never feels like a wait.

On it. Here is how I will find out why people get logged out.

Fixing the logouts
  1. Read the auth flow

Marker

Fold finished steps

Progress bar

NeedsReactFramer MotionTheme

Source
npm install framer-motion && curl --create-dirs -o src/components/plan.tsx https://fragms.simonveprek.cz/source/plan -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme

Saves src/components/plan.tsx and theme.tsx beside it after installing what it needs. No setup, works in any React project.

import { Plan, type PlanStep } from "@/components/plan";const steps: PlanStep[] = [  { title: "Read the auth flow", status: "done" },  { title: "Find why sessions expire", status: "active", detail: "Comparing token and server time" },  { title: "Patch the refresh" },];<Plan  title="Fixing the logouts"  steps={steps}/>
steps

Each step's title, an optional detail line, and its status.

{ title, detail?, status? }[]Default required
status

Where a step is. Done and skipped count towards progress.

pendingactivedonefailedskipped
title

What the plan is for, over the list.

stringDefault none
fold

Folds finished steps into one line once this many are done. 0 never folds.

numberDefault 3
marker

How a waiting step is marked. Done steps always get a tick.

checknumberdot
progress

A thin bar under the title showing how far along it is.

truefalse
color

Progress and the step being worked on.

stringDefault the theme's accent

What's new

  1. 2.1
    • First release. An agent's to do list that ticks itself off
    • Finished steps fold into one line
BeforeApproveNextDiff