Components / agents

Plan Card

A plan the agent asks permission to run: a title, what it will do, the steps (Task Items) and Approve and Reject.

import { PlanCard } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { PlanCard } from '@basiiik/ui';

<PlanCard title="Add a confirm-delete dialog">Plan Card</PlanCard>

• Example values were filled in for the required prop title: replace them with your own.
• Status is the status prop: pending shows Approve and Reject; approved and rejected replace them with the outcome, announced politely through a status region. Hover and Focused are CSS on the buttons.
• Compose with: badge, button, task-item.
• Storybook: Agents/Plan card.

Props

States. Status is the status prop: pending shows Approve and Reject; approved and rejected replace them with the outcome, announced politely through a status region. Hover and Focused are CSS on the buttons.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• An agent asks permission before a multi-step or risky action
• Show a plan the person can approve or turn down
• Human-in-the-loop confirmation: the agent waits for approval before it acts

Do not use it when

• A single yes or no on one action (use Modal with a danger Button)
• A question with choices (use Question Card)

Rules for agents

• Put the steps in a TaskList as children
• Describe what will change and what will not, in description
• Keep status="pending" until the person decides, then set approved or rejected
• Do the work only after onApprove; do nothing after onReject
• Name the plan for the outcome: "Add a confirm-delete dialog"
• The card shows the outcome by itself; add a ChatMessage about the decision only when the agent replies to it, not as an echo of the buttons

Avoid

• Starting the work and showing the plan as a record afterwards
• Approve and Reject as plain text links
• A plan with no steps

Writing the content

• Title: the outcome, not the process
• Description: one or two sentences: what changes, what stays

Keyboard

• Tab moves to Reject, then Approve
• Enter and Space press the focused button

Accessibility

• A section named by its heading (level 3 by default; headingLevel changes it)
• The outcome is a polite status region that is always in the page, so the change is announced
• The badge says Needs your approval, Approved or Rejected: never colour alone

Colour tokens it reads

Related

• Task Item
• Question Card
• Button
• Badge

agents 3 Figma variants Try it in the live demo