import { randomBytes } from "node:crypto"; import { expect } from "@effect/vitest";import { Effect } from "effect";import { composePluginApi } from "@executor-js/api/server";import { openApiHttpPlugin } from "@executor-js/plugin-openapi/api";import { toolkitsPlugin } from "@executor-js/plugin-toolkits/server";import { AuthTemplateSlug, ConnectionName, IntegrationSlug } from "@executor-js/sdk/shared"; import { scenario } from "../src/scenario";import { Api, Browser, Target } from "../src/services"; const api = composePluginApi([toolkitsPlugin(), openApiHttpPlugin()] as const); const hiddenPersonalSpec = (baseUrl: string): string =>  JSON.stringify({    openapi: "3.0.3",    info: { title: "Personal Hidden API", version: "1.0.0" },    servers: [{ url: baseUrl }],    paths: {      "/personal-only": {        get: {          operationId: "personalOnly",          responses: { "200": { description: "Personal-only response" } },        },      },    },  }); scenario(  "Toolkits · self-host UI creates a toolkit and configures tools",  { 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 hiddenPersonalIntegration = `${prefix}-personal-api`;    const hiddenPersonalConnection = "mine";    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* () {      yield* client.connections        .remove({          params: {            owner: "user",            integration: IntegrationSlug.make(hiddenPersonalIntegration),            name: ConnectionName.make(hiddenPersonalConnection),          },        })        .pipe(Effect.ignore);      yield* client.openapi        .removeSpec({ params: { slug: hiddenPersonalIntegration } })        .pipe(Effect.ignore);      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* client.openapi.addSpec({        payload: {          spec: { kind: "blob", value: hiddenPersonalSpec("http://127.0.0.1:59999") },          slug: IntegrationSlug.make(hiddenPersonalIntegration),          baseUrl: "http://127.0.0.1:59999",          authenticationTemplate: [            {              slug: "apiKey",              type: "apiKey",              headers: { "x-api-key": [{ type: "variable", name: "token" }] },            },          ],        },      });      yield* client.connections.create({        payload: {          owner: "user",          name: ConnectionName.make(hiddenPersonalConnection),          integration: IntegrationSlug.make(hiddenPersonalIntegration),          template: AuthTemplateSlug.make("apiKey"),          value: "unused-token",        },      });       yield* browser.session(identity, async ({ page, step }) => {        await step("Open the Toolkits plugin page", async () => {          await page.goto("/default/toolkits/", { waitUntil: "domcontentloaded" });          await page.getByRole("heading", { name: "Toolkits" }).waitFor();          await page.getByRole("heading", { name: "Workspace" }).waitFor();          await page.getByRole("heading", { name: "Personal" }).waitFor();          await page.getByRole("button", { name: "Add workspace toolkit" }).waitFor();          await page.getByRole("button", { name: "Add personal toolkit" }).waitFor();          await page.locator('main [data-slot="skeleton"]').first().waitFor({ state: "detached" });          expect(await page.locator('main [data-slot="skeleton"]').count()).toBe(0);          const seededCard = page.getByRole("link", {            name: `Open toolkit ${prefix}-workspace-a`,          });          await seededCard.waitFor();          expect(await seededCard.getByText("/mcp/toolkits").count()).toBe(0);          expect(await seededCard.getByText("Workspace tools").count()).toBe(0);          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(`/toolkits/${slug}$`));          expect(page.url()).toMatch(new RegExp(`/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(/\/toolkits\/?$/);          expect(page.url()).toMatch(/\/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(`/default/toolkits/${slug}`, { waitUntil: "domcontentloaded" });          expect(page.url()).toMatch(new RegExp(`/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("Cancel toolkit deletion from the confirmation modal", async () => {          await page.getByRole("button", { name: "Delete toolkit" }).click();          const dialog = page.getByRole("alertdialog", { name: `Delete ${name}?` });          await dialog.waitFor();          await dialog.getByRole("button", { name: "Cancel" }).click();          await dialog.waitFor({ state: "detached" });          await page.getByRole("heading", { name }).waitFor();        });         await step("The connection picker explains hidden personal connections", async () => {          await page.getByRole("button", { name: "Manage toolkit connections" }).click();          const dialog = page.getByRole("dialog", { name: "Manage connections" });          await dialog.waitFor();          // The contract is the explanation, not the count: this suite's own          // hidden connection guarantees at least one, but the workspace is          // shared, so another scenario's personal connection may legitimately          // raise the number (asserting a global count is what e2e/AGENTS.md          // forbids).          await dialog            .getByText(              /You have \d+ personal connections? that (?:is|are) not shown because this is a shared toolkit\./,            )            .waitFor();        });         await step("Add a connection to the toolkit", async () => {          const dialog = page.getByRole("dialog", { name: "Manage connections" });          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.getByRole("button", { name: /^Remove connection / }).waitFor();          await page.keyboard.press("Escape");          await dialog.waitFor({ state: "hidden" });          const toolkitTools = page.getByRole("region", { name: "Toolkit tools" });          await toolkitTools.waitFor();          await toolkitTools.getByLabel("Filter tools").fill("policies.list");          await toolkitTools.getByRole("button").filter({ hasText: "list" }).last().waitFor();          await toolkitTools.getByLabel("Filter tools").clear();        });         await step("The add connection list reflects the saved toolkit connection", async () => {          await page.getByRole("button", { name: "Manage toolkit connections" }).click();          const dialog = page.getByRole("dialog", { name: "Manage connections" });          await dialog.waitFor();          await dialog.getByLabel("Search connections and tools").fill("policies.list");          await dialog.getByRole("button", { name: /^Remove connection / }).waitFor();          expect(await dialog.getByRole("button", { name: /^Add connection / }).count()).toBe(0);          await page.keyboard.press("Escape");          await dialog.waitFor({ state: "hidden" });        });         await step("Remove the connection from the manage modal", async () => {          await page.getByRole("button", { name: "Manage toolkit connections" }).click();          const removeDialog = page.getByRole("dialog", { name: "Manage connections" });          await removeDialog.waitFor();          await removeDialog.getByLabel("Search connections and tools").fill("policies.list");          await removeDialog            .getByRole("button", { name: /^Remove connection / })            .first()            .click();          await removeDialog.getByRole("button", { name: /^Add connection / }).waitFor();          await page.keyboard.press("Escape");          await removeDialog.waitFor({ state: "hidden" });          await page.getByText("No connections added").waitFor();          await page.getByRole("button", { name: "Manage toolkit connections" }).click();          const dialog = page.getByRole("dialog", { name: "Manage connections" });          await dialog.waitFor();          await dialog.getByLabel("Search connections and tools").fill("policies.list");          await dialog            .getByRole("button", { name: /^Add connection / })            .first()            .click();          await dialog.getByRole("button", { name: /^Remove connection / }).waitFor();          await page.keyboard.press("Escape");          await dialog.waitFor({ state: "hidden" });          const toolkitTools = page.getByRole("region", { name: "Toolkit tools" });          await toolkitTools.getByLabel("Filter tools").fill("policies.list");          await toolkitTools.getByRole("button").filter({ hasText: "list" }).last().waitFor();          await toolkitTools.getByLabel("Filter tools").clear();        });         await step("Block one tool from the toolkit tools list", 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: "Set policy", exact: true }).click();          await page.getByText(blockPattern, { exact: true }).waitFor();          await page.getByRole("menuitem", { name: "Block" }).click();          await toolkitTools.getByRole("button").filter({ hasText: "list" }).last().waitFor();          await page.getByText("This tool is not available through the current toolkit.").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 },      });      const { connections } = yield* client.toolkits.listConnections({        params: { toolkitId: toolkit.id },      });      expect(addedConnectionPattern.length, "the UI selected a connection").toBeGreaterThan(0);      expect(        connections.map((connection) => connection.pattern),        "the UI-authored toolkit connection persisted",      ).toContain(addedConnectionPattern);      expect(        policies.map((policy) => `${policy.pattern} ${policy.action}`).sort(),        "the UI-authored toolkit access persisted with its action",      ).toEqual([`${blockPattern} block`]);    }).pipe(Effect.ensuring(cleanup));  }),);