1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/**
 * PlanView renders the agent's current execution plan (ACP "plan" updates)
 * as a compact checklist, like the plan block of Zed's agent panel.
 *
 * @example
 * <PlanView entries={[{ content: "Read the code", priority: "medium", status: "completed" }]} />
 */

import type { AcpPlanEntry } from "../protocol";
import { InlineText } from "./InlineText";

const statusMarks: Record<string, string> = {
	pending: "○",
	in_progress: "◐",
	completed: "●",
};

export function PlanView({ entries }: { entries: AcpPlanEntry[] }) {
	if (entries.length === 0) {
		return null;
	}
	return (
		<details className="plan" open>
			<summary className="plan-summary">
				Plan ({entries.filter((e) => e.status === "completed").length}/
				{entries.length})
			</summary>
			<ul className="plan-entries">
				{entries.map((entry, index) => (
					// biome-ignore lint/suspicious/noArrayIndexKey: ACP plan entries carry no id and the list is replaced wholesale on every update.
					<li key={index} className={`plan-entry plan-entry-${entry.status}`}>
						<span aria-hidden>{statusMarks[entry.status] ?? "○"}</span>{" "}
						<InlineText text={entry.content} />
					</li>
				))}
			</ul>
		</details>
	);
}