Plan

Overview

Plan é o plano de execução do agente — Card colapsável com título, descrição, conteúdo (steps numerados) e footer. Quando isStreaming é true, o título e a descrição são envelopados em Shimmer — feedback visual de que o modelo ainda está formulando o plano.

Diferença de Task: Plan é o planejamento ANTES da execução; Task é a execução em si.

Anatomy

<Plan isStreaming={...}>
  ├─ <PlanHeader>
  │    ├─ <PlanTitle>...</PlanTitle>
  │    ├─ <PlanDescription>...</PlanDescription>
  │    └─ <PlanAction>
  │         └─ <PlanTrigger />
  ├─ <PlanContent>
  │    [steps numerados]
  └─ <PlanFooter>...</PlanFooter>
</Plan>

Usage

<Plan defaultOpen>
  <PlanHeader>
    <div>
      <PlanTitle>Adicionar autenticação ao app</PlanTitle>
      <PlanDescription>4 passos · 25 min</PlanDescription>
    </div>
    <PlanAction>
      <PlanTrigger />
    </PlanAction>
  </PlanHeader>
  <PlanContent>
    <ol className="list-decimal pl-4">
      <li>Configurar provider Supabase</li>
      <li>Criar tabela users</li>
      <li>Configurar magic link</li>
      <li>Adicionar middleware de session</li>
    </ol>
  </PlanContent>
  <PlanFooter>Estimativa baseada em apps similares.</PlanFooter>
</Plan>

Props

Plan (Root)

Herda de Collapsible.

PlanHeader

Wrapper flex (items-start justify-between). Aceita ComponentProps<typeof CardHeader>.

PlanTitle

PlanDescription

PlanAction

Wrapper de CardAction — encaixa o trigger no canto superior direito sem hack de absolute. Aceita ComponentProps<typeof CardAction>.

PlanContent

Wrapper de CollapsibleContent + CardContent. Aqui vai a lista de steps (formato livre — ol, ul, ChainOfThought, Task...).

PlanFooter

Wrapper de CardFooter. Aceita ComponentProps<"div">.

PlanTrigger

Botão que toggle Plan. Default visual: ChevronsUpDown size-4. Aceita ComponentProps<typeof CollapsibleTrigger>.

Subcomponents

• Plan — root, é Card + Collapsible combinado.
• PlanHeader — slot superior com Title/Description e Action.
• PlanTitle + PlanDescription — texto. Streamingoaware: recebem string children e aplicam Shimmer quando isStreaming=true.
• PlanAction — encaixa o trigger sem hack absolute.
• PlanContent — corpo (lista de steps).
• PlanFooter — meta footer (estimativa, autor, etc).
• PlanTrigger — botão toggle.

States

Composition

<Message from="assistant">
  <MessageContent>
    <Plan isStreaming={status === "planning"}>
      <PlanHeader>
        <div>
          <PlanTitle>{plan.title}</PlanTitle>
          <PlanDescription>{plan.description}</PlanDescription>
        </div>
        <PlanAction><PlanTrigger /></PlanAction>
      </PlanHeader>
      <PlanContent>
        <Task>
          <TaskTrigger title="Steps" />
          <TaskContent>
            {plan.steps.map((s) => <TaskItem key={s.id}>{s.label}</TaskItem>)}
          </TaskContent>
        </Task>
      </PlanContent>
    </Plan>
  </MessageContent>
</Message>

When to use

• Agente que apresenta plano antes de executar.
• Surface de "vou fazer X, Y, Z — confirma?"
• Roadmap apresentado por IA.

When not to use

• Pensamento livre — use Reasoning.
• Lista de execução já em andamento — use Task.
• Items numerados sem header rico — use lista markdown direto.

Best practices

• isStreaming durante a formulação. Sem Shimmer, o user não sabe se o plano está finalizado.
• defaultOpen=true quando o Plan precisa de aprovação. Fechado por padrão pra histórico de planos antigos.
• Use Plan + Task juntos. Plan apresenta, Task executa.

Accessibility

Related

• Task — execução em si.
• ChainOfThought — raciocínio numerado.
• Confirmation — aprovação do plano (HITL).
• Shimmer — usado internamente pelo PlanTitle/Description.