Cycle planner

A React block (a whole screen) in Beamline's CMS & media app.

A team's work cycles: the schedule read as one sentence (every two weeks from Monday, no cooldown, three ahead) over a calendar of cycles on a week ruler, the running one carrying its progress (done of scope, day of length) and the next ones the work planned in them, cooldowns hatched and today marked; Change schedule opens the length, cooldown, start weekday and how many ahead in place, and the calendar and the table of cycles show which cycles move (lit, with their old dates) before it is saved, the running one never. The rules that add work to the current cycle on their own (when active, when started, unfinished work carried over) as a settings list, each reading as its consequence: how many issues it pulled in or carried over and the latest of them (ruleLog), or that it's off; what happens during a cooldown, and the work already matching offered once when a rule is switched on. A cycle's progress: done of scope as the headline with its pace (behind, on or ahead of the pace that finishes on the last day), scope change and days left, then scope, started, completed and the pace line day by day; a closed cycle's snapshot kept apart from what it holds now, said when they differ.

Use it for

Setting how a team's sprints or cycles run and which work joins them automatically.
Reviewing a closed cycle honestly: what it was at its close against what it holds now.

Not for

A project's portfolio and updates (projects).
Dragging work between stages (kanban-board).

Anatomy

header: the mark, <team> cycles, the view (Schedule · Adding work · Progress)
schedule: the policy as a sentence with Change schedule (opens Work in cycles, Each cycle 1–4 weeks, Cooldown after, Starts on, Planned ahead, Done); the calendar (a week ruler with today; cycles as blocks with name, dates, the running one's progress and day, the next ones' planned work; cooldowns hatched; moved cycles lit with their old dates); the table (cycle, dates, state, scope, completed); what a change moves, Undo, Save schedule
adding work: in a cooldown now; three rules, each with what it did (count, the latest issues it moved, and N more) or that it's off; during a cooldown (to the next cycle · waits outside); the existing work matching (add now · only from now on); Save rules
progress: done of scope as a large figure with pace, scope change and days left; the cycle; scope, started, completed (area) and pace (dashed) by day on the composed chart; at its close and what it holds now; the divergence said

States

cycles off (the running one finishes; none follow)
a change that moves cycles ahead; none move
in a cooldown
a rule switched on with existing work (a choice before saving)
not enough days; a closed cycle that diverged; saved; save failed

Keyboard

Tab through the views and controls; segmented controls take arrows

Motion

Moved cycles light; words fade in. Nothing moves at rest.

Props

Prop	Type	Default	Description
`team / current / today`	`string / Cycle / string`	—	The team, the running cycle (it keeps its dates), today.
`policy / defaultPolicy / onPolicyChange / onSavePolicy`	`CyclePolicy / (p) => Promise`	—	On, weeks, cooldown weeks, start weekday, how many ahead. cycles.ts plans the dates the same way for your server.
`autoAdd / defaultAutoAdd / onAutoAddChange / existingUnassigned / onSaveAutoAdd`	`AutoAdd / { active, started } / (a, backfill) => Promise`	—	The rules; the work already matching, offered once; the save says whether to add it now.
`progress`	`CycleProgress[]`	—	Past and current cycles' progress, newest first.
`team` (required)	`string`	—
`current` (required)	`Cycle`	—	The running cycle; it keeps its dates whatever the policy becomes.
`policy`	`CyclePolicy`	—
`defaultPolicy`	`CyclePolicy`	—
`onPolicyChange`	`((p: CyclePolicy) => void)`	—
`onSavePolicy`	`((p: CyclePolicy) => Promise<unknown>)`	—	Save the schedule; resolve once saved. Reject to keep the edit.
`autoAdd`	`AutoAdd`	—
`defaultAutoAdd`	`AutoAdd`	—
`onAutoAddChange`	`((a: AutoAdd) => void)`	—
`existingUnassigned`	`{ active: number; started: number; }`	—	Work already in the states a rule covers, not in a cycle: offered once when the rule is switched on.
`onSaveAutoAdd`	`((a: AutoAdd, backfill: boolean) => Promise<unknown>)`	—	Save the rules; `backfill`: also add the existing work now.
`today` (required)	`string`	—
`defaultView`	`"progress" \| "rules" \| "schedule"`	—
`canManage`	`boolean`	—
`loading`	`boolean`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`ruleLog`	`RuleMove[]`	—	What the rules did lately, newest first: the issues each pulled in or carried over. Shown under each rule, so the rules read as their consequences.

Built from

segmented-control
select
number-field
switch
radio-cards
badge
composed-chart
button
skeleton

Dependencies

lucide-react

Import

import { CyclePlanner } from "@beamline/cycle-planner";

Get it

Cycle planner is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent