Schedule list

Pro

Recurring agent jobs (a morning health check, a weekly hygiene report): when they run in plain words, when they run next, a strip of recent outcomes, and pause/resume. A paused job says so instead of showing a next run.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/schedule-list

Brings in: agent-avatar, locale, ops, relative-time, status, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { ScheduleList } from "@/components/schedule-list"
import type { Schedule } from "@/lib/ops"

const ahead = (m: number) => new Date(Date.now() + m * 60_000).toISOString()

export default function Example() {
  const [schedules, setSchedules] = React.useState<Schedule[]>([
    { id: "j1", title: "Morning health check", when: "Every weekday at 07:00", nextRunAt: ahead(13 * 60), paused: false, history: ["succeeded", "succeeded", "succeeded", "failed", "succeeded", "succeeded"], agent: { id: "qa", name: "QA agent", role: "tester" } },
    { id: "j2", title: "Weekly unused-flags report", when: "Mondays at 08:00", nextRunAt: ahead(5 * 24 * 60), paused: false, history: ["succeeded", "succeeded", "succeeded", "succeeded"], agent: { id: "an", name: "Analyst agent", role: "analyst" } },
    { id: "j3", title: "Re-read the main repository", when: "Every day at 02:00", nextRunAt: null, paused: true, history: ["succeeded", "failed", "failed"], agent: { id: "ar", name: "Architect agent", role: "planner" } },
  ])
  return (
    <ScheduleList
      className="max-w-xl"
      schedules={schedules}
      onToggle={(id, paused) => setSchedules((s) => s.map((x) => (x.id === id ? { ...x, paused, nextRunAt: paused ? null : ahead(60) } : x)))}
    />
  )
}

<ScheduleList>

Prop	Type	Default	Description
schedulesrequired	`Schedule[]`	—	The recurring jobs, with their schedule, next run and recent outcomes.
onToggle	`((id: string, paused: boolean) => void) \| undefined`	—	Shows pause/resume; called with the job id and whether it should now be paused.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under scheduleList in <LocaleProvider strings={{ … }}>; the table is exported as scheduleListStrings.

Key	English
label	Scheduled jobs
heading	Scheduled
paused	Paused
next	next {when}
notScheduled	not scheduled
lastRuns	Last {count} runs: {failed} failed
resume	Resume
pause	Pause
resumeJob	Resume {title}
pauseJob	Pause {title}