Drift Chart

An agent's plan drawn as dashed outlines with the real work filling in over them: when a step runs long it spills into amber, nudges everything after it to the right and drags the finish line with it.

akaplan vs actual·gantt

Install

Run this in any project set up for the shadcn CLI. It copies the Drift Chart source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/drift-chart.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { DriftChart } from "@/components/drift-chart";

export default function Page() {
  return <DriftChart />;
}

Built with

A free React component in the Mission Control collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: lucide-react, motion

Props

Read from the Drift Chart source. Everything is optional unless it says required.

Prop	Type	Default
titlerequired	string	—
agent	string	—
stepsrequired	DriftStep[]	—
unit	string	"m"
tickEvery	number	5
className	string	—

More in Mission Control

022

Run List

Keep an eye on every background agent from one calm list, with live clocks, counts by status and a click to see the last few steps or sign off the work.

023

Departures

An airport departures board for your agents: each row flips letter by letter as work boards, runs, gets delayed or lands, hand-offs show as connecting flights, and the one waiting on you glows amber with an Approve button.

024

Constellation

Your agents and the tools they reach for, drawn as a small constellation: each call and its answer travel the line as a spark, busy lines glow brighter, and an agent that needs you turns amber with Approve right underneath.

025

Spawn Tree

See which agent started which, with each one's time and cost ticking on its card and every branch adding up what it spent.

Prop

Type

Default

titlerequired

string

—

agent

string

—

stepsrequired

DriftStep[]

—

unit

string

"m"

tickEvery

number

className

string

—