Files
PaperClipAI/tests/e2e/connection-reviews.spec.ts
467125fafb feat(connections): one-screen connector setup with stated defaults (#14811)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - Agents use Connections (the Apps catalog) to act in services like
Notion, GitHub, Google Workspace and Railway
> - Each connector asked the user to answer setup questions before it
went to the provider. Most of the questions already had the correct
answer selected
> - ROADMAP.md lists "simpler setup" for Apps and Connections as ongoing
work. This change continues that work
> - This pull request removes the questions that Paperclip can answer
itself. It states the defaults in one line and moves the choices behind
"Change" and onto the Permissions tab
> - The benefit is that most connectors take one click in Paperclip and
then the provider's own consent screen

## Linked Issues or Issue Description

No public issue exists. This is the description, from the enhancement
template.

**What existing behavior does this improve?**
The setup flow for tool connectors in the Apps catalog.

**Subsystem affected**
Apps and Connections: `ui/src/features/connections`,
`ui/src/pages/apps`, the `packages/shared` app definitions, and the
OAuth routes in `server/src/routes/tool-access.ts`.

**Current behavior**
Every connector opened with an Access step. The step asked who can use
the connection and which agents get it, and both answers were already
selected. 18 connectors also asked "How do you want to connect?" when
Paperclip could rank the methods. The Google apps and Postman also asked
"What should Paperclip be able to do?" before sign-in. The four gateway
connectors (Zapier, Arcade, Composio, Executor) used a separate two-step
wizard. Asana was pinned to a customer-owned OAuth app, so the user had
to register an app in Asana's developer console. The "Set all" control
on the Permissions tab changed only one action. After the user approved
access, Railway's consent page showed "you can close this window" and
did not return to Paperclip.

**Proposed behavior**
One screen per connector, with one primary button. The screen states the
defaults in one sentence, for example "Connects for everyone in your
organization, available to all agents". A "Change" link opens one
Advanced panel. When the provider's metadata allows dynamic client
registration, Paperclip registers a client itself. Connecting lands on
the Permissions tab. On that tab, "Set all" changes every action in the
group.

**Reason and benefit**
The user makes fewer decisions before the connection exists. Most
choices are easier to make after the connection, on the Permissions tab,
where a change has an immediate effect.

**Breaking changes**
None. No schema or API change. Existing connections keep their settings.

## What Changed

- **No Access step.** `ConnectionSetupFlow` no longer has the Access
step. The flow shows the resolved default above the primary button and
on the completion screen. The access controls moved into one Advanced
panel. The panel opens automatically only when a setting in it is
required.
- **A default method for every app.** The flow always picks the ranked
default method. Alternate methods are in the Advanced panel. The Google
and Postman capability choice is not asked before sign-in. The
write-capable method is the default.
- **Gateway connectors.** `RemoteMcpProductionSetup` (Zapier, Arcade,
Composio, Executor) no longer has its own Access step. Its commit path
and the main commit path use one helper, `askFirstCatalogEntryIdsFor`,
for server-suggested defaults.
- **Dynamic registration from live metadata.**
`canRegisterOAuthClientDynamically` now allows registration when the
provider advertises a registration endpoint, even if the catalog entry
lists only customer-owned clients. The Asana and Linear definitions and
catalog text match live probes. Asana issues clients for loopback
callbacks only, so a hosted deployment still needs an Asana app.
- **Connection setup states.** New
`packages/shared/src/connection-setup-state.ts` sorts each method into
`instant`, `authorize`, `paste` or `register`. The gallery card verb
("Connect" or "Add key") comes from this resolver and the instance's
ownership availability.
- **Generic MCP.** The generic path no longer asks "Does it need a key?"
first. A credential challenge from the server shows the key field.
- **Permissions tab.** Each action row shows its risk level. Each group
has a "Set all" control. The control sends one change for the whole
group. Before, each row's save started from the same render, so the
saves overwrote each other. The Zapier/Arcade/Composio/Executor setup
screen had the same defect.
- **OAuth callback interstitial.** A cross-site browser navigation to
`/api/tools/oauth/callback` gets a small same-origin "Finishing your
connection…" page. That page repeats the request, and the repeat does
the code exchange. Railway's consent page replaces itself after about
two seconds, and the code exchange plus tool discovery takes longer than
that. The interstitial uses only a meta refresh, because the OAuth code
is single-use. Requests without `Sec-Fetch-Site: cross-site` take the
old path.
- **Linear registers through its MCP server.** Linear pins the console
endpoints at `linear.app`. Pinned endpoints now replace discovery only
when the method cannot register, or when the connection has an
operator-entered client. So a Linear connection now finds the
registration endpoint at `mcp.linear.app`.
- **Own-OAuth-app recovery stays on the one-click screen.** When the
method also accepts a customer-owned client, the client fields are in
the Advanced panel. The panel opens after a failed sign-in. "Try again"
resumes the draft with the operator's client.
- **E2E specs** follow the one-screen flow. The Access-step clicks are
removed, the specs open **Change** before they pick agents, and they
expect GitHub's **Add key** verb.
- **Default permissions do not change.** New connections still allow
every action. The user can set actions to Ask first or Off on the
Permissions tab.

## Verification

- `cd ui && npx vitest run src/pages/apps src/features/connections
--no-file-parallelism`
- `cd packages/shared && npx vitest run src/app-definitions.test.ts
src/connection-setup-state.test.ts`
- `cd server && npx vitest run src/__tests__/tool-access-service.test.ts
src/__tests__/remote-mcp-connectors.test.ts`
- `pnpm check:token-gates`
- New tests:
- `PermissionsPanel.group.test.tsx` checks that "Set all" sends one
change for the whole group. It fails on the old code.
  - `action-permissions.test.ts` checks the group update.
  - `connection-setup-state.test.ts` checks the four setup states.
- A server test checks that a cross-site callback gets the interstitial
and does not use the OAuth state, and that the same-origin repeat
completes the connection.
- Manual check on a hosted staging deployment. GitHub, Google Drive,
Composio, Notion, PostHog and Railway each connected from one screen and
returned to the Permissions tab. On Railway, "Set all" changed all 65
write actions, and the change remained after a reload.
- Visual changes: snapshot baselines are intentionally not updated. See
the `doc/design/DECISION-SHEET.md` entry "Per-change snapshot
verification demoted to dormant (Jul 13 2026)".

## Risks

- **Fewer confirmation clicks.** Organization-wide access is the
default, and the user does not confirm it on a separate step. This was
already the preselected answer. The flow shows the default before the
user clicks and again after the connection.
- **Google write scope.** Google apps now request the write-capable
scope by default. A narrower scope needs a new sign-in.
- **Dynamic registration from live metadata.** A provider can advertise
registration and then reject a redirect URI. Asana rejects hosted
callbacks, for example. In that case registration fails, and the
customer-owned client path remains available for recovery.
- **Callback interstitial.** The OAuth callback adds one same-origin
step for cross-site browser navigations. Browsers without `Sec-Fetch-*`
headers use the old direct path.
- Chat and bot connectors (Discord, Telegram, Microsoft Teams, iMessage)
do not change.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- Claude Opus 5.5 (Anthropic), model ID `claude-opus-5-5`, used through
Claude Code with tool use (shell, file editing, browser automation) and
extended thinking. It wrote the code, the tests and this description. A
human product owner directed the work and tested it by hand.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: scotttong <squadbot000@gmail.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 23:13:47 -07:00

378 lines
15 KiB
TypeScript

import { expect, test, type APIRequestContext } from "@playwright/test";
import { readFile, writeFile } from "node:fs/promises";
import { startReviewProvider } from "../fixtures/connection-review-provider";
type Json = Record<string, unknown>;
type Seed = { companyId: string; prefix: string };
type Agent = { id: string; name: string };
async function json<T = Json>(
response: Awaited<ReturnType<APIRequestContext["get"]>>,
): Promise<T> {
expect(
response.ok(),
`${response.url()} failed ${response.status()}: ${await response.text()}`,
).toBe(true);
return (await response.json()) as T;
}
async function newCompany(request: APIRequestContext): Promise<Seed> {
const company = await json<{ id: string; issuePrefix: string }>(
await request.post("/api/companies", {
data: { name: `Connection review E2E ${Date.now()}` },
}),
);
return { companyId: company.id, prefix: company.issuePrefix };
}
async function createAgent(
request: APIRequestContext,
companyId: string,
name: string,
): Promise<Agent> {
return await json<Agent>(
await request.post(`/api/companies/${companyId}/agents`, {
data: {
name,
role: "qa",
title: "Connection intent fixture agent",
capabilities: "Exercises deterministic connection intent wiring.",
adapterType: "process",
adapterConfig: {
command: process.execPath,
args: ["--input-type=module", "-e", "process.exit(0)"],
},
},
}),
);
}
function reviewAgentScript(connectionId: string, query: string) {
return `
const base = process.env.PAPERCLIP_API_URL + "/api";
const headers = { authorization: "Bearer " + process.env.PAPERCLIP_API_KEY, "content-type": "application/json", "x-paperclip-run-id": process.env.PAPERCLIP_RUN_ID };
const api = async (path, method = "GET", body) => {
const response = await fetch(base + path, { method, headers, body: body === undefined ? undefined : JSON.stringify(body) });
if (!response.ok) throw new Error(await response.text());
return await response.json();
};
const describePages = (raw) => {
let value = raw;
if (typeof value === "string") { try { value = JSON.parse(value); } catch {} }
const content = typeof value === "string" ? value : typeof value?.content === "string" ? value.content : value?.data?.content?.filter(item => item.type === "text").map(item => item.text).join(" ") ?? "No pages returned.";
return "I found these recent pages: " + content.replace(/^Pages: /, "") + ".";
};
const issueId = process.env.PAPERCLIP_TASK_ID ?? (await api("/heartbeat-runs/" + process.env.PAPERCLIP_RUN_ID)).contextSnapshot.issueId;
const interactions = await api("/issues/" + issueId + "/interactions");
const review = interactions.find(i => i.payload?.toolAction);
if (review?.status === "pending") { console.log("Still waiting for the existing review; no retry."); process.exit(0); }
if (review && review.status !== "pending") {
const result = review.result?.toolAction;
const message = review.status === "rejected" ? "Review declined. No pages were read." : result?.status === "failed" ? "Read failed: " + result.errorMessage : ["expired", "cancelled"].includes(review.status) ? "The review expired or was cancelled. No pages were read." : describePages(result?.resultSummary);
await api("/issues/" + issueId + "/comments", "POST", { body: message });
await api("/issues/" + issueId, "PATCH", { status: "done" });
console.log(message);
process.exit(0);
}
const session = await api("/tool-gateway/sessions", "POST", { runId: process.env.PAPERCLIP_RUN_ID, ttlMs: 60000 });
const gatewayHeaders = { "x-paperclip-tool-gateway-token": session.token, "content-type": "application/json" };
const tools = await (await fetch(base + "/tool-gateway/tools", { headers: gatewayHeaders })).json();
const tool = tools.find(t => t.connectionId === ${JSON.stringify(connectionId)} && t.upstreamToolName === "notion:list_pages");
if (!tool) throw new Error("Missing fixture connection");
const call = await fetch(base + "/tool-gateway/tools/call", { method: "POST", headers: gatewayHeaders, body: JSON.stringify({ tool: tool.name, parameters: { query: ${JSON.stringify(query)} } }) });
const result = await call.json();
if (!call.ok) {
if (result.reasonCode !== "approval_required" && result.code !== "approval_required" && !JSON.stringify(result).includes("approval_required")) throw new Error(JSON.stringify(result));
await api("/issues/" + issueId, "PATCH", { status: "in_review" });
console.log("Waiting for human review. No retry.");
process.exit(0);
}
await api("/issues/" + issueId + "/comments", "POST", { body: describePages(result.result) });
await api("/issues/" + issueId, "PATCH", { status: "done" });
`;
}
for (const journey of [
"approve",
"decline",
"always",
"failure",
"restart",
] as const) {
test(`connection review: ${journey}, synchronized task history and actual continuation`, async ({
page,
context,
request,
}, testInfo) => {
test.setTimeout(180_000);
test.skip(
journey === "restart" && !process.env.PAPERCLIP_REVIEW_RESTART_FILE,
"Use connection-reviews.config.ts for controlled server restart",
);
let suppressReviewEvents = journey === "decline";
if (journey === "decline") {
// Reproduce a review arriving between the initial fetch and subscription:
// return an empty first snapshot and drop its live creation notification.
const initialSnapshots = new Set<string>();
await page.route("**/api/issues/*/interactions", async (route) => {
const url = route.request().url();
if (route.request().method() === "GET" && !initialSnapshots.has(url)) {
initialSnapshots.add(url);
await route.fulfill({ json: [] });
} else await route.continue();
});
await page.routeWebSocket("**/api/companies/*/events/ws", (socket) => {
const server = socket.connectToServer();
server.onMessage((message) => {
if (suppressReviewEvents && String(message).includes("issue.thread_interaction_")) return;
socket.send(message);
});
});
}
const provider = await startReviewProvider();
try {
const seed = await newCompany(request);
const agent = await createAgent(request, seed.companyId, "Page reader");
await page.goto(`/${seed.prefix}/apps`);
const connector = page
.getByRole("list", { name: "Connector list" })
.getByRole("listitem")
.filter({ hasText: "Connect your own tool" });
await connector
.getByRole("button", { name: "Connect", exact: true })
.click();
await connector
.getByRole("button", { name: "Connect your own MCP server" })
.click();
await page
.getByPlaceholder("https://example.com/actions")
.fill(provider.url);
await page.getByRole("button", { name: "Continue", exact: true }).click();
await page.getByRole("button", { name: /Check link/i }).click();
await expect(
page.getByRole("heading", { name: /is ready/i }),
).toBeVisible({ timeout: 30_000 });
const {
connections: [connection],
} = await json<{ connections: Array<{ id: string }> }>(
await request.get(`/api/companies/${seed.companyId}/tools/connections`),
);
await json(
await request.put(`/api/tool-connections/${connection.id}/installs`, {
data: { installs: [{ targetType: "agent", targetId: agent.id }] },
}),
);
await page.goto(`/${seed.prefix}/apps/${connection.id}/permissions`);
await page
.getByRole("radio", { name: "List fixture pages: Ask first" })
.click();
const configureAgent = async (query: string) =>
json(
await request.patch(`/api/agents/${agent.id}`, {
data: {
adapterConfig: {
command: process.execPath,
args: [
"--input-type=module",
"-e",
reviewAgentScript(connection.id, query),
],
},
replaceAdapterConfig: true,
},
}),
);
await configureAgent(journey === "failure" ? "fail" : "recent");
const issue = await json<{ id: string; identifier: string }>(
await request.post(`/api/companies/${seed.companyId}/issues`, {
data: {
title: "Read recent pages",
status: "in_progress",
assigneeAgentId: agent.id,
},
}),
);
await page.goto(`/${seed.prefix}/issues/${issue.identifier}`);
await expect(
page.getByRole("button", { name: "Approve & run", exact: true }),
).toBeVisible({ timeout: 45_000 });
suppressReviewEvents = false;
const originatingReviews = await json<Array<{ id: string; sourceRunId: string | null }>>(await request.get(`/api/issues/${issue.id}/interactions`));
const originatingReview = originatingReviews[0];
const calls = () =>
provider.captures.filter((c) => c.method === "tools/call").length;
expect(calls()).toBe(0);
await page.screenshot({
path: testInfo.outputPath("pending-review.png"),
});
await page
.getByRole("button", { name: "Dismiss Approve tool action" })
.click();
await expect(
page.getByRole("button", { name: "Approve & run", exact: true }),
).not.toBeVisible();
await json(
await request.post(`/api/issues/${issue.id}/comments`, {
data: { body: "Keeping this review pending while I check." },
}),
);
await page
.getByRole("button", { name: "Review request", exact: true })
.click();
await expect(
page.getByRole("button", { name: "Approve & run", exact: true }),
).toBeVisible();
const queue = await context.newPage();
await queue.goto(`/${seed.prefix}/apps/review`);
await expect(
queue.getByRole("button", { name: "Decline", exact: true }),
).toBeVisible({ timeout: 20_000 });
if (journey === "restart") {
const control = process.env.PAPERCLIP_REVIEW_RESTART_FILE!;
const token = String(Date.now());
await writeFile(control, `restart:${token}`);
await expect
.poll(() => readFile(control, "utf8"), { timeout: 60_000 })
.toBe(`started:${token}`);
await expect
.poll(
async () => {
try {
return (await request.get("/api/health")).ok();
} catch {
return false;
}
},
{ timeout: 60_000 },
)
.toBe(true);
await page.reload();
await queue.reload();
await expect(
page.getByRole("button", { name: "Approve & run", exact: true }),
).toBeVisible();
expect(calls()).toBe(0);
}
if (journey === "decline") {
// Resolve from Connections and observe the still-open task tab update.
await queue
.getByRole("button", { name: "Decline", exact: true })
.click();
} else {
if (journey === "always") {
await page.getByRole("button", { name: "Approval options", exact: true }).click();
await page.getByRole("menuitem", { name: "Always allow", exact: true }).click();
} else {
await page.getByRole("button", { name: "Approve & run", exact: true }).click();
}
}
await expect
.poll(
async () =>
(
await json<Array<{ body: string }>>(
await request.get(`/api/issues/${issue.id}/comments`),
)
)
.map((c) => c.body)
.join("\n"),
{ timeout: 60_000 },
)
.toContain(
journey === "decline"
? "Review declined"
: journey === "failure"
? "Read failed"
: "Roadmap",
);
const replies = await json<Array<{ body: string; authorAgentId: string | null; createdByRunId: string | null }>>(await request.get(`/api/issues/${issue.id}/comments`));
const reply = replies.find(comment => comment.authorAgentId === agent.id)!;
expect(reply.createdByRunId).toBeTruthy();
expect(originatingReview.sourceRunId).toBeTruthy();
expect(reply.createdByRunId).not.toBe(originatingReview.sourceRunId);
expect(reply.body).not.toContain('"content":');
if (!["decline", "failure"].includes(journey)) {
await expect(page.getByRole("button", { name: "Show result details" })).toBeVisible();
await expect(page.locator("pre")).not.toBeVisible();
await page.getByRole("button", { name: "Show result details" }).click();
await expect(page.locator("pre")).toContainText('"content":');
await page.getByRole("button", { name: "Hide result details" }).click();
}
expect(calls()).toBe(journey === "decline" ? 0 : 1);
await expect(
page.getByRole("button", { name: "Approve & run", exact: true }),
).not.toBeVisible();
await expect(
queue.getByRole("button", { name: "Decline", exact: true }),
).not.toBeVisible({ timeout: 20_000 });
await page.reload();
await expect(
page
.getByText(
journey === "decline"
? "Declined"
: journey === "failure"
? "Execution failed"
: "Succeeded",
{ exact: false },
)
.first(),
).toBeVisible();
await page.screenshot({
path: testInfo.outputPath("resolved-review.png"),
});
if (journey === "always") {
await configureAgent("different search options");
const later = await json<{ id: string }>(
await request.post(`/api/companies/${seed.companyId}/issues`, {
data: {
title: "Read pages with different arguments",
status: "in_progress",
assigneeAgentId: agent.id,
},
}),
);
await expect
.poll(
async () =>
(
await json<Array<{ body: string }>>(
await request.get(`/api/issues/${later.id}/comments`),
)
)
.map((c) => c.body)
.join("\n"),
{ timeout: 45_000 },
)
.toContain("Roadmap");
expect(calls()).toBe(2);
expect(
await json<unknown[]>(
await request.get(`/api/issues/${later.id}/interactions`),
),
).toHaveLength(0);
}
await testInfo.attach("journey", {
body: JSON.stringify(
{
source: "local MCP fixture; no live Notion",
journey,
...seed,
issue,
agent,
providerCalls: calls(),
},
null,
2,
),
contentType: "application/json",
});
await queue.close();
} finally {
await provider.close();
}
});
}