import { randomBytes } from "node:crypto"; import { expect } from "@effect/vitest";import { Effect } from "effect";import { composePluginApi } from "@executor-js/api/server";import { toolkitsPlugin } from "@executor-js/plugin-toolkits/server"; import { scenario } from "../src/scenario";import { Api, Browser, Target } from "../src/services"; const api = composePluginApi([toolkitsPlugin()] as const); scenario(  "Toolkits · self-host UI creates a toolkit and authors rules",  { timeout: 180_000 },  Effect.gen(function* () {    const target = yield* Target;    const browser = yield* Browser;    const { client: makeApiClient } = yield* Api;    const identity = yield* target.newIdentity();    const client = yield* makeApiClient(api, identity);     const suffix = randomBytes(4).toString("hex");    const prefix = `toolkits-ui-${suffix}`;    const name = `${prefix}-created`;    const slug = name;    const seededToolkits = [      { owner: "org" as const, name: `${prefix}-workspace-a` },      { owner: "org" as const, name: `${prefix}-workspace-b` },      { owner: "user" as const, name: `${prefix}-personal-a` },      { owner: "user" as const, name: `${prefix}-personal-b` },      { owner: "user" as const, name: `${prefix}-personal-c` },    ];    let addedConnectionPattern = "";    const blockPattern = "executor.coreTools.policies.list";     const cleanup = Effect.gen(function* () {      const listed = yield* client.toolkits.list();      yield* Effect.forEach(        listed.toolkits.filter((row) => row.slug.startsWith(prefix)),        (toolkit) => client.toolkits.remove({ params: { toolkitId: toolkit.id } }),        { discard: true },      );    }).pipe(Effect.ignore);     yield* Effect.gen(function* () {      yield* Effect.forEach(        seededToolkits,        (toolkit) => client.toolkits.create({ payload: toolkit }),        { discard: true },      );       yield* browser.session(identity, async ({ page, step }) => {        await step("Open the Toolkits plugin page", async () => {          await page.goto("/plugins/toolkits/", { waitUntil: "networkidle" });          await page.getByRole("heading", { name: "Toolkits" }).waitFor();          await page.getByRole("heading", { name: "Workspace" }).waitFor();          await page.getByRole("heading", { name: "Personal" }).waitFor();          expect(await page.getByLabel("New toolkit").count()).toBe(0);        });         await step("Create a workspace toolkit from the add card", async () => {          const workspaceSection = page.locator("section").filter({            has: page.getByRole("heading", { name: "Workspace" }),          });          await workspaceSection.getByRole("button", { name: "Add workspace toolkit" }).click();          await page.getByRole("dialog", { name: "New workspace toolkit" }).waitFor();          await page.getByLabel("Toolkit name").fill(name);          await page.getByRole("button", { name: "Create toolkit" }).click();          await page.getByRole("link", { name: `Open toolkit ${name}` }).waitFor();        });         await step("Validate owner sections render as three-column grids", async () => {          const workspaceSection = page.locator("section").filter({            has: page.getByRole("heading", { name: "Workspace" }),          });          const personalSection = page.locator("section").filter({            has: page.getByRole("heading", { name: "Personal" }),          });           const workspaceColumns = await workspaceSection            .getByRole("link", { name: /^Open toolkit/ })            .evaluateAll((nodes) =>              nodes.slice(0, 3).map((node) => Math.round(node.getBoundingClientRect().left)),            );          const personalColumns = await personalSection            .getByRole("link", { name: /^Open toolkit/ })            .evaluateAll((nodes) =>              nodes.slice(0, 3).map((node) => Math.round(node.getBoundingClientRect().left)),            );           expect(new Set(workspaceColumns).size).toBe(3);          expect(new Set(personalColumns).size).toBe(3);        });         await step("Open the created toolkit from the grid", async () => {          await page.getByRole("link", { name: `Open toolkit ${name}` }).click();          await page.waitForURL(new RegExp(`/plugins/toolkits/${slug}$`));          expect(page.url()).toMatch(new RegExp(`/plugins/toolkits/${slug}$`));          await page            .locator("code")            .filter({ hasText: `/mcp/toolkits/${slug}` })            .waitFor();          await page.getByText("No connections added").waitFor();          expect(await page.getByLabel("New toolkit").count()).toBe(0);        });         await step("Return to the toolkit grid with browser-visible routing", async () => {          await page.getByRole("button", { name: "Toolkits" }).click();          await page.waitForURL(/\/plugins\/toolkits\/?$/);          expect(page.url()).toMatch(/\/plugins\/toolkits\/?$/);          await page.getByRole("heading", { name: "Workspace" }).waitFor();          await page.getByRole("link", { name: `Open toolkit ${name}` }).waitFor();        });         await step("Open the created toolkit from a direct URL", async () => {          await page.goto(`/plugins/toolkits/${slug}`, { waitUntil: "networkidle" });          expect(page.url()).toMatch(new RegExp(`/plugins/toolkits/${slug}$`));          await page            .locator("code")            .filter({ hasText: `/mcp/toolkits/${slug}` })            .waitFor();          await page.getByText("No connections added").waitFor();          expect(await page.getByLabel("New toolkit").count()).toBe(0);        });         await step("Add a connection to the toolkit", async () => {          await page.getByRole("button", { name: "Add connection to toolkit" }).click();          const dialog = page.getByRole("dialog", { name: "Add connection" });          await dialog.waitFor();          await dialog.getByLabel("Search connections and tools").fill("policies.list");          expect(await dialog.getByRole("button", { name: /^Add tool/ }).count()).toBe(0);          addedConnectionPattern = "executor.*";          expect(await dialog.getByText(addedConnectionPattern, { exact: true }).count()).toBe(0);          await dialog            .getByRole("button", { name: /^Add connection / })            .first()            .click();          await dialog.waitFor({ state: "hidden" });          await page.getByText(addedConnectionPattern, { exact: true }).first().waitFor();          await page.getByText("Toolkit contents").waitFor();          await page.getByRole("region", { name: "Toolkit tools" }).waitFor();        });         await step("Block one tool from the existing policy menu", async () => {          const toolkitTools = page.getByRole("region", { name: "Toolkit tools" });          await toolkitTools.getByLabel("Filter tools").fill("policies.list");          await toolkitTools.getByRole("button").filter({ hasText: "list" }).last().click();          await page            .getByRole("button", { name: `Matched policy: ${addedConnectionPattern}` })            .click();          await page.getByText(blockPattern, { exact: true }).waitFor();          await page.getByRole("menuitem", { name: "Block" }).click();          await page.getByText(blockPattern, { exact: true }).waitFor();        });      });       const listed = yield* client.toolkits.list();      const toolkit = listed.toolkits.find((row) => row.slug === slug);      expect(toolkit, "the UI-created toolkit persisted").toBeDefined();      if (!toolkit) return;      expect(toolkit.owner).toBe("org");       const { policies } = yield* client.toolkits.listPolicies({        params: { toolkitId: toolkit.id },      });      expect(addedConnectionPattern.length, "the UI selected a connection policy").toBeGreaterThan(        0,      );      expect(        policies.map((policy) => `${policy.pattern} ${policy.action}`).sort(),        "the UI-authored rules persisted with their actions",      ).toEqual([`${addedConnectionPattern} approve`, `${blockPattern} block`].sort());    }).pipe(Effect.ensuring(cleanup));  }),);