affectUI › Components › Agents

Scheduled Runs

Agent tasks sorted into a week of sessions – each session has a usage limit, small tasks fill the gaps, big ones are split across sessions, and the stack flies in one card at a time.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/scheduled-runs.json · Import from @/components/ui/scheduled-runs

When to use

Agents that run against a usage limit per session – coding agents, API quotas, rate-limited tools – and a week of work to fit in
Showing people where their queued tasks will run before they run, and which ones need more than one session
A backlog that gets sorted into a calendar automatically, next to runs that were booked by hand

When not to use

Tasks handed from agent to agent – use Agent Handoff
A queue that runs as soon as a worker is free, with no sessions – use Agent Queue
What a single run costs in time and money – use Trace Waterfall

Usage

import { ScheduledRuns, type ScheduledTask } from "@/components/ui/scheduled-runs-clean";

const tasks: ScheduledTask[] = [
  { id: "metrics", title: "Weekly metrics report", usage: 40, at: { day: 1, session: 0 } },
  { id: "oauth", title: "Migrate auth to OAuth 2.1", agent: "Claude Code", usage: 140 },
  { id: "flaky", title: "Fix flaky checkout test", agent: "Claude Code", usage: 35 },
];

export function Week() {
  return <ScheduledRuns tasks={tasks} now={{ day: 1, session: 0 }} note="5-hour sessions" />;
}

Props

Name	Type	Default	Description
`tasks`	`ScheduledTask[]`		{ id, title, usage, agent?, detail?, logo?, at? } – booked tasks have at: { day, session }; the rest wait in the stack and are sorted in, in this order
`usage`	`number`		Per task – what it takes out of one session's limit, in percent; over the limit it's split across sessions
`days`	`(string \| { name, date? })[]`	`Mon–Wed`	Column heads – three days read best; more fit, the week then scrolls sideways on narrow screens
`sessions`	`string[]`	`["07:00", "12:00", "17:00"]`	Row heads – when each session starts
`now`	`{ day, session }`	`{ day: 0, session: 0 }`	The session running now – earlier ones are dimmed and take no new tasks; a red line marks where it starts
`limit`	`number`	`100`	What one session can take, in the unit of usage
`minPiece`	`number`	`15`	A split task never leaves a piece smaller than this in a session
`agents`	`{ name, logo? }[]`	`every task's agent`	The agents in the head as small overlapping logos – picking one fans them out, slides its name out and fades the other agents' tasks back
`defaultMode`	`"auto" \| "manual"`	`"auto"`	Auto sorts the stack in when switched to; Manual puts the sorted-in cards back on the stack – booked cards and cards placed by hand stay. Both switch mid-run
`autoRun`	`boolean \| number`	`false`	In Auto: sorts the stack in on its own – after 800ms, or after the number of ms
`loop`	`boolean`	`false`	Clears the week and sorts in again, over and over – for demos
`title / note`	`string`	`"This week"`	Heading, and a quiet note next to it – e.g. "5-hour sessions"
`onScheduled`	`(parts: ScheduledPart[]) => void`		Every piece in the week once the stack is sorted in – { task, day, session, usage, part, parts }
`onPlace`	`(task: ScheduledTask, parts: ScheduledPart[]) => void`		A task was dragged from the stack into a session – with the pieces it was split into
`onMove`	`(part: ScheduledPart, to: { day, session }) => void`		A card was dragged to another session – save it
`className`	`string`		Extra class on the root

Keyboard

Escape: While dragging a card: puts it back where it was; with a card's details open: closes them

Accessibility

The week is a grid with day and session heads; every session says how much of its limit is booked
Every card names its task, and its part and share of the session when it's split
Auto and Manual are a radio group; the agent logos are toggle buttons named after their agent
The task count follows the picked agent

Responsive

Every session keeps its height and takes two cards – sessions with two are full for dragging and for Auto
Under 640px the stack moves on top and the week scrolls sideways
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Agent Handoff – A task passed from agent to agent like a relay – at every handoff what went along to the next one, and what got lost on the way
Agent Queue – The work waiting for your agents, and how fast it moves – jobs drop into a live queue, glide into free worker slots as growing bars and land in Done or Failed, while a depth chart shows the backlog build up when a rate limit pauses the workers and drain when they resume
Usage Meter – Plan usage and AI credits – a stacked credits meter by category, daily sparkline, limits and a button that speaks up near the limit
Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent