Proposed AI agent plan with clear steps and controls to edit, cancel or start the work.
import { useState } from 'react'
import PlanApprovalCard from '@/components/ui/plan-approval-card'
const initialPlanSteps = [
{ id: 'news', label: 'Gather relevant information from trusted sources.' },
{
id: 'official',
label: 'Review key details and verify the available information.',
},
{ id: 'social', label: 'Identify common themes and highlight useful insights.' },
{
id: 'disruptions',
label: 'Organize the findings into a clear outline.',
},
{ id: 'summary', label: 'Create a concise summary with links to sources.' },
]
export default function Demo() {
const [steps, setSteps] = useState(initialPlanSteps)
const [editing, setEditing] = useState(false)
const [status, setStatus] = useState('')
return (
<div className="flex w-full max-w-2xl flex-col items-center gap-4">
<PlanApprovalCard
title="Research a topic"
steps={steps}
disabled={editing || Boolean(status)}
onEdit={() => setEditing(true)}
onCancel={() => setStatus('Plan cancelled.')}
onStart={() => setStatus('Plan approved. Ready to start research.')}
/>
{editing && (
<form
className="w-full space-y-3"
onSubmit={(event) => {
event.preventDefault()
setEditing(false)
}}
>
{steps.map((step, index) => (
<label key={step.id} className="block space-y-1 text-sm">
<span>Step {index + 1}</span>
<textarea
required
value={step.label}
className="min-h-20 w-full rounded-md border border-border bg-background p-3 focus-visible:outline-2 focus-visible:outline-ring"
onChange={(event) =>
setSteps((current) =>
current.map((item) =>
item.id === step.id ? { ...item, label: event.target.value } : item,
),
)
}
/>
</label>
))}
<button type="submit" className="h-8 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/80">Save plan</button>
</form>
)}
{status && (
<div className="flex w-full items-center justify-between gap-3">
<output className="text-sm text-muted-foreground">{status}</output>
<button
type="button"
className="h-8 rounded-md border border-border bg-background px-2.5 text-sm font-medium hover:bg-muted"
onClick={() => {
setStatus('')
setSteps(initialPlanSteps)
}}
>
Reset
</button>
</div>
)}
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.