// @vitest-environment jsdom import { flushSync } from "react-dom"; import { createRoot, type Root } from "react-dom/client"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { BuiltInBundlePanel } from "./BuiltInBundlePanel"; import type { BuiltInAgentState, BuiltInManagedResourceState, BuiltInManagedResourceStockStatus, } from "@/api/builtInAgents"; // The panel links to agent tabs via `@/lib/router` (company-prefixed Link). // Stub it to a plain anchor so the panel test doesn't need CompanyContext. vi.mock("@/lib/router", () => ({ Link: ({ children, to }: { children: React.ReactNode; to: string }) => {children}, })); function resource( resourceKind: BuiltInManagedResourceState["resourceKind"], stockStatus: BuiltInManagedResourceStockStatus, overrides: Partial = {}, ): BuiltInManagedResourceState { return { resourceKind, resourceKey: resourceKind === "skill" ? "reflection-coach" : resourceKind === "routine" ? "recent-agent-reflection" : "AGENTS.md", resourceId: "res-1", stockVersion: "2026-07-08", stockHash: "aaaa", currentHash: stockStatus === "missing" ? null : stockStatus === "stock_current" ? "aaaa" : "bbbb", stockStatus, updateAvailable: stockStatus === "stock_update_available" || stockStatus === "operator_modified", resetAvailable: stockStatus !== "stock_current", ...overrides, }; } function makeState( status: BuiltInAgentState["status"], resources: BuiltInManagedResourceState[], ): BuiltInAgentState { return { definition: { key: "reflection-coach", displayName: "Reflection Coach", featureKeys: ["reflection"], shortPurpose: "Coaches recent agents.", defaultInstructions: "…", defaultRole: "general", allowedAdapterTypes: ["codex_local"], defaultBudgetMonthlyCents: 0, bundle: { stockVersion: "2026-07-08", instructions: { entryFile: "AGENTS.md", files: ["AGENTS.md"] }, skill: { skillKey: "reflection-coach", displayName: "reflection-coach", slug: "reflection-coach", canonicalKey: "paperclipai/bundled/paperclip-operations/reflection-coach", files: ["reflection-coach/SKILL.md"], }, routine: { routineKey: "recent-agent-reflection", title: "Recent agent reflection", status: "paused", triggerCount: 1, scheduleLabel: "Weekly · Mon 09:00 UTC", }, }, }, status, agentId: "agent-1", // eslint-disable-next-line @typescript-eslint/no-explicit-any agent: { id: "agent-1", pausedAt: status === "paused" ? new Date().toISOString() : null } as any, pauseReason: null, resources, }; } async function flushReact() { for (let index = 0; index < 5; index += 1) { await Promise.resolve(); await new Promise((resolve) => window.setTimeout(resolve, 0)); } flushSync(() => {}); } const READY_RESOURCES = [ resource("skill", "stock_current"), resource("instructions", "stock_current"), resource("routine", "stock_current"), ]; describe("BuiltInBundlePanel (PAP-13099)", () => { let container: HTMLDivElement; let root: Root | null = null; function render(state: BuiltInAgentState, handlers: Partial<{ onConfigure: () => void; onResetResource: (kind: BuiltInManagedResourceState["resourceKind"]) => void; onRunRoutine: (routineKey: string) => void; onEnableSchedule: (routineKey: string) => void; onDisableSchedule: (routineKey: string) => void; }> = {}) { root = createRoot(container); flushSync(() => { root!.render( {})} onResetResource={handlers.onResetResource ?? (() => {})} onRunRoutine={handlers.onRunRoutine ?? (() => {})} onEnableSchedule={handlers.onEnableSchedule ?? (() => {})} onDisableSchedule={handlers.onDisableSchedule ?? (() => {})} />, ); }); } beforeEach(() => { container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { flushSync(() => root?.unmount()); root = null; container.remove(); // Radix portals dialog content onto body; clear leftovers between tests. document.body.querySelectorAll("[data-slot='alert-dialog-portal']").forEach((node) => node.remove()); }); it("renders four resource rows with ready + schedule-off chips when healthy", () => { render(makeState("ready", READY_RESOURCES)); const text = container.textContent ?? ""; expect(text).toContain("Bundle status"); expect(text).toContain("Adapter"); expect(text).toContain("Skill"); expect(text).toContain("Instructions"); expect(text).toContain("Routine"); // Zero-token guarantee copy is always present on the routine row. expect(text).toContain("costs zero tokens by default"); expect(text).toContain("Schedule off"); expect(text).toContain("Ready"); expect(text).toContain("Run once"); expect(text).toContain("Enable weekly"); }); it("shows the active weekly schedule and disable action when enabled", () => { render(makeState("ready", [ resource("skill", "stock_current"), resource("instructions", "stock_current"), resource("routine", "stock_current", { scheduleEnabled: true }), ])); const text = container.textContent ?? ""; expect(text).toContain("Weekly · Mon 09:00 UTC"); expect(text).toContain("can create background work"); expect(text).toContain("Disable schedule"); expect(text).not.toContain("Enable weekly"); }); it("links to a pending proposal interaction when the routine resource reports one", () => { render(makeState("ready", [ resource("skill", "stock_current"), resource("instructions", "stock_current"), resource("routine", "stock_current", { pendingUpdateInteractionId: "interaction-1", pendingUpdateIssueId: "issue-1", pendingUpdateIssueIdentifier: "PAP-42", }), ])); const link = Array.from(container.querySelectorAll("a")).find((anchor) => anchor.textContent === "Review proposal"); expect(container.textContent).toContain("Proposal pending"); expect(link?.getAttribute("href")).toBe("/issues/PAP-42#interaction-interaction-1"); }); it("shows Needs setup for the adapter when the agent is not configured yet", () => { render(makeState("needs_setup", READY_RESOURCES)); const text = container.textContent ?? ""; expect(text).toContain("Needs setup"); expect(text).toContain("Pick an adapter this coach can run on"); }); it("surfaces an update-available chip and Update action for unedited stock drift", () => { render(makeState("ready", [ resource("skill", "stock_current"), resource("instructions", "stock_update_available"), resource("routine", "stock_current"), ])); const text = container.textContent ?? ""; expect(text).toContain("Update available"); expect(text).toContain("Paperclip shipped a newer default"); // The per-resource Update trigger button is present. const buttons = Array.from(container.querySelectorAll("button")).map((b) => b.textContent); expect(buttons).toContain("Update"); }); it("surfaces a Drifted chip and Reset action for operator-modified resources", () => { render(makeState("ready", [ resource("skill", "operator_modified"), resource("instructions", "stock_current"), resource("routine", "stock_current"), ])); const text = container.textContent ?? ""; expect(text).toContain("Drifted"); expect(text).toContain("Your changes are kept"); const buttons = Array.from(container.querySelectorAll("button")).map((b) => b.textContent); expect(buttons).toContain("Reset"); }); it("shows a Missing chip when a resource is not materialized", () => { render(makeState("ready", [ resource("skill", "missing"), resource("instructions", "stock_current"), resource("routine", "stock_current"), ])); expect(container.textContent).toContain("Missing"); }); it("fires onConfigure when the adapter Configure button is clicked", () => { const onConfigure = vi.fn(); render(makeState("needs_setup", READY_RESOURCES), { onConfigure }); const configureBtn = Array.from(container.querySelectorAll("button")).find( (b) => b.textContent === "Configure", ); expect(configureBtn).toBeTruthy(); flushSync(() => configureBtn!.dispatchEvent(new MouseEvent("click", { bubbles: true }))); expect(onConfigure).toHaveBeenCalledTimes(1); }); it("renders nothing for a built-in without a bundle", () => { const flat = makeState("ready", READY_RESOURCES); delete flat.definition.bundle; render(flat); expect(container.textContent).toBe(""); }); });