Schedule editor

Preview

Install

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

Brings in: button, chat, checkbox, combobox, heading-level, heading-scope, input, locale, locked, motion, radio-group, textarea, tokens, use-announcer, use-settle, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { ScheduleEditor, type ScheduleDraft } from "@/components/candor/schedule-editor"

const agents = [
  { id: "qa", name: "QA agent", role: "tester", specialty: "Health checks and test runs" },
  { id: "an", name: "Analyst agent", role: "analyst", specialty: "Reports" },
]

export default function Example() {
  const [saved, setSaved] = React.useState<ScheduleDraft>()
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <ScheduleEditor
        agents={agents}
        timeZones={["UTC", "America/New_York", "Europe/London", "Asia/Kolkata", "Australia/Sydney"]}
        value={{ title: "Morning health check", recurrence: { every: "weekday", time: "07:00" }, timeZone: "America/New_York", agentId: "qa", prompt: "Check every integration and report anything that failed overnight." }}
        onSave={async (draft) => {
          await new Promise((r) => setTimeout(r, 400))
          setSaved(draft)
        }}
        onCancel={() => {}}
      />
      {saved && <p className="text-xs text-muted-foreground">Saved {saved.title}.</p>}
    </div>
  )
}

<ScheduleEditor>

Functions

Strings

Motion

Set with --cd-motion-schedule-editor-<moment>-* in your brand file; the families are in the design reference.

Types

ScheduleRecurrence

How often a job runs. Times are wall-clock times in the schedule's own time zone.

/** Every hour, `minute` minutes past. */ { every: "hour"; minute: number; } /** Every day at `time` ("07:00", 24-hour). */ | { every: "day"; time: string; } /** Every working day at `time`: Monday to Friday, or the days ScheduleEditor's `weekdays` names. */ | { every: "weekday"; time: string; } /** On the chosen days of the week (0 is Sunday, 6 is Saturday) at `time`. */ | { every: "week"; days: number[]; time: string; } /** On `day` (1 to 28) of every month at `time`. */ | { every: "month"; day: number; time: string; }

ScheduleDraft

A scheduled job as the editor reads and saves it.

{ title: string; recurrence: ScheduleRecurrence; /** An IANA time zone, e.g. "Europe/London". */ timeZone: string; /** The agent that runs the job; `null` while none is chosen. */ agentId: string | null; /** The instruction the agent gets on every run. */ prompt: string; }

ScheduledRun

One computed run: when, and whether a clock change makes its wall-clock time not exist, or happen twice.

{ /** * The instant. For a time the clocks skip, the instant that time would have been on the old clock (02:30 skipped * reads 03:30 on the new one), so read `time` for the wall-clock time the rule names. */ at: Date; /** The clocks skip this wall-clock time that day, so it doesn't exist in the zone. Same as `clock === "skipped"`. */ clockChange: boolean; /** "skipped" when the clocks go forward over this time, "repeated" when they go back and it happens twice. */ clock?: "skipped" | "repeated" | undefined; /** The wall-clock time the rule names, "02:30" (24-hour), in the schedule's zone. */ time?: string | undefined; /** The day it falls on in the schedule's zone, "2027-03-14". */ date?: string | undefined; }

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

AgentIdentity from @/lib/candor/chat

{ id: string; /** The displayed name, e.g. "Architect agent". Never derived from model output. */ name: string; role: AgentRole; specialty?: string | undefined; }

HeadingLevel from @/lib/candor/heading-level

A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.

1 | 2 | 3 | 4 | 5 | 6

AgentRole from @/lib/candor/chat

What an agent does: "assistant", "coder", "reviewer"… The app registers each role's glyph and hue (AgentRolesProvider).

string