Plan Outline

Usage

import { PlanOutline, type PlanOutlineTask } from "@tulipfarm/sprout/plan-outline";

const tasks: PlanOutlineTask[] = [
  {
    id: "research", title: "Research", mark: "running", label: "1 of 2 done",
    children: [
      { id: "audit", title: "Audit last spring's catalog", mark: "done", label: "Done", assignee: "Main agent" },
      {
        id: "suppliers", title: "Confirm supplier stock", mark: "running", label: "Working",
        criteria: ["Each variety has a confirmed count."],
        dependencies: [{ id: "audit", title: "Audit last spring's catalog", label: "Done" }],
      },
    ],
  },
];

<PlanOutline
  title="Launch the spring bulb catalog"
  status="Running"
  tone="active"
  progress="1 of 2 done · 1 working"
  tasks={tasks}
/>

• title, brief: the plan name (an h3 that also names the section) and one paragraph under it.
• status and tone: the badge text and its color. tone is active, attention, done, failed, or neutral.
• progress: the line under the bar, in words. The bar has one segment per task; cancelled tasks are left out.
• notice and stale: any content under the progress, such as an Alert.
• tasks: { id, title, mark, label, assignee?, brief?, criteria?, dependencies?, reason?, action?, children? }[]. A task with children is a group.

Plan Outline has one look and one size. Map your own plan data to tasks in an adapter, as the examples here do. It never ticks, edits, reorders, or assigns tasks.

Marks and tones

Seven marks: pending (clock), running (spinner),attention (question), blocked (lock),done (check), failed (warning), andcancelled (crossed out). Every mark has a textlabel, so color is never the only signal.

Nested groups

Groups start open and can nest. A group's brief shows above its tasks. A group with no tasks says so.

Task details

A task with a reason, brief,criteria, dependencies, or actionopens to show them. A failed task's reason is red. Each dependency links to its row and moves focus there, opening its group if it was closed. Tasks with none of these are plain rows.

{
  id: "pricing",
  title: "Set prices for the spring catalog",
  mark: "attention",
  label: "Needs your review",
  assignee: "Pricing analyst · created for this plan",
  brief: "Use last year's margins and current supplier quotes.",
  criteria: ["No variety sells below a 35% margin."],
  dependencies: [{ id: "audit", title: "Audit last spring's catalog", label: "Done" }],
  action: (
    <Button variant="outline" size="sm" nativeButton={false} render={<Link to={taskUrl} />}>
      Review in task
    </Button>
  ),
}

Pick “Waiting on you” or “Verified” in the playground above to open a task with an action or a verification report.

Notice and stale data

Put alerts and requirement checks in notice. When a refresh fails, keep the last plan and say so in stale.

Someone else's plan

People who did not start the plan see who a task waits for, such as “Waiting for a review”. The link to the task stays, so they can open it.

Loading, error, and empty

Before a plan loads, show Skeletonlines. When it can't load, use a State Panel. A plan with no tasks says none were added yet.

Long content

Long titles, names, and links wrap. Labels stay at the end of the row.

Accessibility

The outline is a section named by its title. Tasks are ordered lists named “Tasks” and “Group tasks”. Rows with details are buttons with aria-expanded; Enter and Space open them. Mark icons and the bar are hidden from screen readers; the label and progress text say the same.

Rows open in 180ms and chevrons turn in 120ms. With reduced motion they change at once and the spinner stops.

Theme tokens

Running uses --sprout-info, attention--sprout-warning, done --sprout-success, failed--sprout-danger, and pending, blocked, and cancelled--sprout-muted. Rows hover with --sprout-hover, lines use --sprout-line, and links--sprout-primary.