Skip to content

Plan

The plan an agent proposes before acting, for the user to read and approve. Its steps collapse; while it’s still being written the title shows the Spinner.

Sourcecomponents/plan.tsx

Rebuild the pricing page

3 steps. Nothing is changed until you approve.

  1. Add a Pricing route with three Card tiers
  2. Mark the middle tier with a brand Badge
  3. Run guibrief check and the tests

Add a dark mode toggle, Writing plan

Still writing the steps.

Usage

Plan usage
import { Button } from "@/components/button";import { Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger } from "@/components/plan";
export function PlanUsage({ steps, isStreaming, onApprove }: { steps: string[]; isStreaming: boolean; onApprove: () => void }) {  return (    <Plan defaultOpen isStreaming={isStreaming}>      <PlanHeader>        <PlanTitle>Rebuild the pricing page</PlanTitle>        <PlanDescription>{steps.length} steps, about 10 minutes</PlanDescription>        <PlanAction>          <PlanTrigger />        </PlanAction>      </PlanHeader>      <PlanContent>        <ol className="flex list-decimal flex-col gap-2 ps-6">          {steps.map((step) => (            <li key={step}>{step}</li>          ))}        </ol>      </PlanContent>      <PlanFooter>        <Button onClick={onApprove} disabled={isStreaming}>          Approve plan        </Button>      </PlanFooter>    </Plan>  );}

When to use

Use when

A plan the agent proposes before acting, for the user to read and approve. isStreaming while it's being written

Don’t use when

Steps already taken (use Trace); a page section that isn't a proposal (use Card)