sprõut
ComponentsAI & chat

Chat Plan

A plan an agent proposed in chat. Each step shows if it is not started, in progress, complete, or failed. The header counts completed steps.

Progress

Fill in missing suppliers

2 of 4 complete

  1. Find deliveries with no supplier · Complete

    Search the Supplier deliveries table for empty Supplier fields.

  2. Match each delivery to a supplier by invoice number · Complete

  3. Show the matches for review · In progress

    Nothing changes until you approve.

  4. Update 42 delivery records · Not started

Usage

A plan with one running stepTSX
import { ChatPlan, type ChatPlanStep } from "@tulipfarm/sprout/chat-plan";

const steps: ChatPlanStep[] = [
  { id: "find", title: "Find deliveries with no supplier", state: "complete" },
  { id: "match", title: "Match each delivery to a supplier", state: "running" },
  { id: "update", title: "Update 42 delivery records", state: "pending" },
];

<ChatPlan title="Fill in missing suppliers" steps={steps} />

  • title: the plan name. It also names the section.
  • steps: { id, title, detail?, state }[], in order. state is pending,running, complete, or error.detail is one optional line under the title.

Chat Plan has one look and one size. It fills the width it gets.

Step states

Complete shows a green check, in progress a spinner, failed a red warning, and not started a clock.

Step statesComplete, in progress, failed, and not started

Fictional garden plan

1 of 4 complete

  1. Choose a patch · Complete

    A sunny place near water.

  2. Prepare the soil · In progress

  3. Order bulbs · Failed

    The sample supplier is unavailable.

  4. Plant the bulbs · Not started

Empty plan

With no steps, the plan says none were proposed yet.

Empty planThe agent has not proposed steps yet

New plan

0 of 0 complete

No steps have been proposed yet.

In the canvas

A to-do result opens in the Canvas. Wrap the plan in CanvasSection with no title, so the plan's own title leads.

TSX
<CanvasSection>
  <ChatPlan title={item.title} steps={item.steps} />
</CanvasSection>

In the canvasA to-do result, wrapped in Canvas Section
Launch checklist

Launch checklist

2 of 5 complete

  1. Draft the launch brief · Complete

    Saved to Launch week › Brief.

  2. Pull the press contact list from Contacts · Complete

    86 contacts tagged Press.

  3. Write the announcement emails · In progress

  4. Schedule sends for Tuesday 9:00 · Not started

  5. Report opens and replies on Friday · Not started

Long content

Long titles, links, and details wrap. The count moves below the title when space runs out.

Long contentLong titles, links, and details wrap inside a narrow chat

Move supplier deliveries from the legacy accounting export

1 of 3 complete

  1. Export https://files.example.com/workspaces/tulipfarm/exports/supplier-deliveries-2026-q3-final-v2.csv · Complete

    The export finished with 1,204 rows and 18 columns.

  2. Import the rows into Supplier deliveries · Failed

    The column InvoiceReferenceNumberFromLegacyAccountingSystem has no matching field. Pick a field or skip the column.

  3. Tell the operations channel when the import is done · Not started

Accessibility

The plan is a section named by its title, which is anh4. Steps are an ordered list. Icons are hidden; each step ends with hidden text such as “In progress” or “Failed”, so screen readers hear the state.

When a step changes state its icon fades in over 180ms; with reduced motion it changes at once.

Theme tokens

The border uses --sprout-line, muted text and pending icons--sprout-muted, complete icons--sprout-success, and failed icons--sprout-danger.