Selfhost browser scenario: a remote MCP integration declaring an oauth2 method is DCR-capable, so the add-connection modal shows the OAuth tab plus the custom-method '+'. Guards that the OAuth tab's body card (the 'No app to choose' DCR explainer) renders under the tab strip instead of the tabs floating with no card. Fails on the pre-fix code.
Unified · Split
| @@ -0,0 +1,87 @@ | ||
| 1 | +// Selfhost (browser, recorded): the add-connection modal for a transparent-DCR | |
| 2 | +// OAuth MCP integration must render its body card, not just a floating tab | |
| 3 | +// strip. A remote MCP integration that declares an oauth2 method is DCR-capable | |
| 4 | +// (supportsDynamicRegistration), so the modal skips the app picker. When the | |
| 5 | +// integration also offers the custom-method "+" the method tab strip renders. | |
| 6 | +// | |
| 7 | +// The regression this guards: the OAuth tab's TabsContent card (the "No app to | |
| 8 | +// choose / automatic setup" explainer) was gated out whenever DCR was active, | |
| 9 | +// leaving the tab strip with no card under it and a detached-looking border. | |
| 10 | +// The same gate also made that explainer unreachable dead code. The per-step | |
| 11 | +// screenshots are the artifact. | |
| 12 | +import { randomBytes } from "node:crypto"; | |
| 13 | + | |
| 14 | +import { Effect } from "effect"; | |
| 15 | +import { composePluginApi } from "@executor-js/api/server"; | |
| 16 | +import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api"; | |
| 17 | +import { makeGreetingMcpServer, serveMcpServer } from "@executor-js/plugin-mcp/testing"; | |
| 18 | +import { IntegrationSlug } from "@executor-js/sdk/shared"; | |
| 19 | + | |
| 20 | +import { scenario } from "../src/scenario"; | |
| 21 | +import { Api, Browser, Target } from "../src/services"; | |
| 22 | + | |
| 23 | +const api = composePluginApi([mcpHttpPlugin()] as const); | |
| 24 | + | |
| 25 | +scenario( | |
| 26 | + "Connections · the add-connection modal for a transparent-DCR OAuth MCP renders its body card under the tab strip", | |
| 27 | + {}, | |
| 28 | + Effect.scoped( | |
| 29 | + Effect.gen(function* () { | |
| 30 | + const target = yield* Target; | |
| 31 | + const browser = yield* Browser; | |
| 32 | + const { client: makeApiClient } = yield* Api; | |
| 33 | + | |
| 34 | + // A remote MCP integration declaring an oauth2 method: remote + oauth2 is | |
| 35 | + // transparent-DCR (supportsDynamicRegistration true), so the modal skips | |
| 36 | + // the BYO-app picker. The server is never dialed here — opening the modal | |
| 37 | + // only reads the declared template. | |
| 38 | + const server = yield* serveMcpServer(() => makeGreetingMcpServer()); | |
| 39 | + const identity = yield* target.newIdentity(); | |
| 40 | + const client = yield* makeApiClient(api, identity); | |
| 41 | + const slug = `mcp-dcr-card-${randomBytes(3).toString("hex")}`; | |
| 42 | + | |
| 43 | + yield* client.mcp.addServer({ | |
| 44 | + payload: { | |
| 45 | + transport: "remote", | |
| 46 | + name: "DCR OAuth MCP", | |
| 47 | + endpoint: server.endpoint, | |
| 48 | + slug, | |
| 49 | + authenticationTemplate: [{ kind: "oauth2" }], | |
| 50 | + }, | |
| 51 | + }); | |
| 52 | + | |
| 53 | + // Remove the integration afterward — selfhost identities share one tenant, | |
| 54 | + // so a leaked integration would bleed into other scenarios. | |
| 55 | + yield* Effect.gen(function* () { | |
| 56 | + yield* browser.session(identity, async ({ page, step }) => { | |
| 57 | + const dialog = page.getByRole("dialog"); | |
| 58 | + | |
| 59 | + await step("Open the integration's add-connection modal", async () => { | |
| 60 | + await page.goto(`/integrations/${slug}`, { waitUntil: "networkidle" }); | |
| 61 | + await page.getByRole("button", { name: "Add connection" }).first().click(); | |
| 62 | + await dialog.waitFor({ state: "visible" }); | |
| 63 | + }); | |
| 64 | + | |
| 65 | + await step("The OAuth tab and the custom-method + are present", async () => { | |
| 66 | + await dialog.getByRole("tab", { name: "OAuth" }).waitFor(); | |
| 67 | + await dialog.getByRole("button", { name: "Add authentication method" }).waitFor(); | |
| 68 | + }); | |
| 69 | + | |
| 70 | + await step("The OAuth tab has its body card, not a floating tab strip", async () => { | |
| 71 | + // The card the fix restores: the DCR explainer that anchors the tab | |
| 72 | + // strip. Before the fix the TabsContent was gated out for DCR, so | |
| 73 | + // this copy was unreachable and the tabs floated with no card. | |
| 74 | + await dialog.getByText("No app to choose").waitFor({ timeout: 15_000 }); | |
| 75 | + await dialog.getByText(/supports automatic setup/).waitFor({ timeout: 15_000 }); | |
| 76 | + }); | |
| 77 | + }); | |
| 78 | + }).pipe( | |
| 79 | + Effect.ensuring( | |
| 80 | + client.mcp | |
| 81 | + .removeServer({ params: { slug: IntegrationSlug.make(slug) } }) | |
| 82 | + .pipe(Effect.ignore), | |
| 83 | + ), | |
| 84 | + ); | |
| 85 | + }), | |
| 86 | + ), | |
| 87 | +); | |