Agent Plan

1'use client';
2 
3import { useState } from 'react';
4import { ArrowRight, Check, GripVertical } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7export interface PlanStep {
8  id: string;
9  title: string;
10  detail?: string;
11}
12 
13export type AgentPlanVariant = 'Default' | 'Compact';
14 
15export interface AgentPlanProps {
16  title?: string;
17  steps: PlanStep[];
18  runLabel?: string;
19  onRun?: (enabledStepIds: string[]) => void;
20  variant?: AgentPlanVariant;
21  className?: string;
22}
23 
24export function AgentPlan({
25  title = 'Proposed plan',
26  steps,
27  runLabel = 'Run plan',
28  onRun,
29  variant = 'Default',
30  className,
31}: AgentPlanProps) {
32  const [disabled, setDisabled] = useState<Set<string>>(new Set());
33  const compact = variant === 'Compact';
34  const enabledCount = steps.length - disabled.size;
35 
36  function toggle(id: string) {
37    setDisabled((previous) => {
38      const next = new Set(previous);
39      if (next.has(id)) next.delete(id);
40      else next.add(id);
41      return next;
42    });
43  }
44 
45  return (
46    <div
47      className={cn(
48        'w-full max-w-[440px] rounded-2xl border border-black/[0.08] bg-white shadow-xs dark:border-white/[0.09] dark:bg-[#0B0B0D]',
49        className,
50      )}
51    >
52      <div className="flex items-center justify-between gap-3 border-b border-black/[0.06] px-4 py-2.5 dark:border-white/[0.07]">
53        <h3 className="text-[13px] font-semibold tracking-[-0.1px] text-neutral-900 dark:text-neutral-50">
54          {title}
55        </h3>
56        <span className="font-mono text-[10.5px] tabular-nums text-neutral-400 dark:text-neutral-600">
57          {enabledCount}/{steps.length} steps
58        </span>
59      </div>
60 
61      <ol className={cn('px-2 py-1.5', compact ? 'space-y-0' : 'space-y-0.5')}>
62        {steps.map((step, index) => {
63          const off = disabled.has(step.id);
64          return (
65            <li key={step.id}>
66              <button
67                type="button"
68                role="checkbox"
69                aria-checked={!off}
70                onClick={() => toggle(step.id)}
71                className={cn(
72                  'group flex w-full items-start gap-2.5 rounded-lg px-2 text-left transition-[background-color,opacity] duration-150',
73                  compact ? 'py-1.5' : 'py-2',
74                  'hover:bg-black/[0.03] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-white/[0.04]',
75                  off && 'opacity-45',
76                )}
77              >
78// … truncated