feat(ui): NUX rework behind enableConferenceRoomChat experimental flag — capsule onboarding, conference-room chat, unified composer (#8000)
## Thinking Path
> - Paperclip is the open source app people use to manage AI agents for
work
> - The first-run experience (onboarding wizard) and the chat surfaces
(conference-room/board chat, task threads, composers) are the product's
front door — they decide whether a new operator understands "hire
agents, give them work, review results" in the first five minutes
> - Today those surfaces feel ticket-y and form-like: the wizard is a
static multi-step form that ends in an anticlimactic "Launch" screen,
the task composer and board chat behave differently from each other, and
agent-feed issue quicklooks misbehave (multiple flyouts open at once,
cards jump on hover)
> - We wanted to iterate toward a conversational, team-centric NUX — but
without risking the workflows of everyone already running Paperclip
> - This PR reworks the NUX behind a new default-OFF
`enableConferenceRoomChat` experimental flag: a capsule-motif onboarding
wizard that builds your team as you answer, a conference-room chat
surface, one shared ChatComposer across surfaces, brand-accurate status
chips, and feed-quicklook fixes — with the pre-existing UI
fork-and-frozen as `*Classic` components that flag-OFF users keep
> - The benefit is a complete, testable modern NUX that anyone can opt
into from Settings → Experimental, with zero default behavior change and
a clean path to either graduate or drop the experiment
## Linked Issues or Issue Description
No pre-existing GitHub issue — feature description per
`feature_request.yml`:
- **Problem / motivation:** Paperclip's onboarding wizard and chat
surfaces grew up as separate ticket-centric forms. New users get a
form-filling experience rather than the feeling of standing up a team;
the board chat and task threads use different composers with different
affordances; the agent feed's issue quicklook can stack multiple
popovers and shifts cards on hover.
- **Proposed solution:** A coherent NUX experiment behind one
experimental flag (`enableConferenceRoomChat`, Settings → Experimental,
default OFF): capsule onboarding wizard with an evolving team capsule,
conference-room chat, unified `ChatComposer`, team-centric copy, brand
status chips, quicklook single-flight fix. Flag-OFF users get the exact
pre-experiment UI via frozen `*Classic` forks, verified by an on/off
parity test matrix.
- **Alternatives considered:** (a) incremental unflagged restyling —
rejected: the changes interlock across surfaces and would drip risk into
every release; (b) a separate app shell / route for the new NUX —
rejected: too much divergence, the flag + classic-fork pattern keeps the
diff reviewable and reversible.
- **Roadmap alignment:** `ROADMAP.md` lists **CEO Chat** ("a
lighter-weight way to talk to leadership agents... should still resolve
to real work objects"). This experiment is groundwork in that direction
(conference-room chat resolves to issues/tasks via the same composer
used in task threads) and does not change the core task-and-comments
model.
Related PRs found in the dedup search (same area, none duplicate this
work — they target the classic wizard, which this PR intentionally
leaves intact and mergeable):
- #5385 — Coach-driven onboarding: conversational entry +
agent-companies package import
- #5378 — Onboarding wizard: reusable adapter picker + probe card
- #6636 — ui(onboarding): friendly error surface + retry for the wizard
- #7005 — fix(onboarding): explicitly await first-task wake
- #2616 — fix: restore workspace directory config in onboarding wizard
## What Changed
- **Experimental flag plumbing** — `enableConferenceRoomChat` in shared
types/validators, server instance-settings service + API, Settings →
Experimental card with explicit enable/disable copy
- **Onboarding wizard** — classic wizard forked and frozen
(`OnboardingWizardClassic`); flag-ON variant is a 5-step capsule wizard
with a persistent evolving `AgentCapsule` (gradient/glow motif),
team-centric reframed copy, and a typing-dots intro (hardened with
fake-timer tests)
- **Conference-room chat** — flag-ON board-chat surface with agent
bubble name/icon headers and copy/vote/timestamp action rows
(`AgentBubbleActionRow`)
- **Unified composer** — shared `ChatComposer` adopted across surfaces;
translucent surface + scroll-mask removal; "Agent mode"/"Plan mode"
relabels; no-assignee confirmation `AlertDialog` (new
`ui/alert-dialog.tsx` primitive); `@task` reference picker +
linkification in mentions
- **Agent feed** — single-flight issue-quicklook store (one popover at a
time), flyouts open to the left, removed hover translate-y jitter
- **Status chips** — brand-accurate task status chips behind the flag
(light/dark, 1px borders per paperclip.ing/brand)
- **Tests** — flag on/off parity matrix across IssueDetail,
NewIssueDialog, Sidebar, wizard, gate components; component tests for
all new pieces
- **Merge with `master`** — one conflict in
`ui/src/components/IssueChatThread.tsx`, resolved by keeping master's
new `AssigneeChip`/`HandoffWakeRow`/`RunStatusBadge` components inside
the flag-gated metadata-row chrome (details in commit `21a5642a`);
post-merge fixes: vitest 4 mock typing in `MarkdownEditor.test.tsx`,
flag hook made safe for provider-less mounts (master's new isolated
component tests)
- **Branch hygiene** — internal design wireframes/mockups stripped
before the PR (they live in the Paperclip issue threads)
- No user-facing documentation changes required: the flag is
intentionally experimental and self-described in the Settings card; no
existing docs reference the affected surfaces
## Verification
- `pnpm run typecheck` — green across the workspace (ui, server, shared,
plugins)
- Full UI suite (`vitest run` in `ui/`, clean worktree at this HEAD):
**1593/1595 passing, 223/224 files** — the 2 remaining failures are in
`src/components/artifacts/ArtifactCard.test.tsx` and **fail identically
on pristine `origin/master`** (pre-existing upstream, unrelated to this
branch)
- Full server suite (`vitest run` in `server/`, same clean worktree):
results in PR checks; flag plumbing covered by instance-settings tests
- Targeted post-merge resolution check: `IssueChatThread`,
`IssueChatThreadSystemNotice`, `IssueDetail`, `Sidebar`,
`ConferenceRoomChatGate`, `OnboardingWizardVariant`, `NewIssueDialog`,
`InstanceExperimentalSettings`, `MarkdownEditor` — 172/172 passing
- Manual walkthrough: flag OFF (default) → onboarding wizard, task
thread, board chat, composer all render the classic UI; flag ON via
Settings → Experimental → capsule wizard, conference-room chat, unified
composer, status chips active
- Screenshots: see below
**Flag on/off screenshots** (committed on this branch under
`screenshots/PR-8000-*`):
| Surface | Flag OFF (classic, default) | Flag ON (experimental) |
| --- | --- | --- |
| Settings → Experimental | 
| 
|
| Task thread | 
| 
|
| Home / nav | 
| 
|
| Conference Room (flag-ON only surface) | — | 
|
Capsule onboarding wizard walkthrough screenshots (flag ON) are attached
to the Paperclip design/implementation threads; the wizard requires a
fresh instance so it is captured via the e2e harness
(`tests/e2e/nux-phase4-screenshots.spec.ts`).
## Risks
- **Large surface, but gated:** all new behavior sits behind
`enableConferenceRoomChat`, default OFF; flag-OFF rendering is locked by
frozen `*Classic` forks plus an on/off parity test suite
- **Classic forks are frozen at the fork point (`e3aada1d`):** master
features added to the live thread component after that point (assignee
handoff chips, run status badge, composer mention coach) render in the
flag-ON path; the flag-OFF task thread keeps the fork-point behavior
until the experiment graduates (forks deleted) or is dropped (forks
restored as canonical). Called out for reviewer attention.
- **Merge-conflict resolution in `IssueChatThread.tsx`** (commit
`21a5642a`) deserves reviewer eyes: master's new handoff/run-status
components were kept; the base toast-style no-assignee flow remains
replaced by the AlertDialog flow introduced on this branch
- Schema/server changes are additive (one optional boolean instance
setting); no migrations of existing data
## Model Used
- Claude (Anthropic) via Claude Code running in the Paperclip agent
harness (agent: ClaudeCoder)
- Branch implemented across multiple agent sessions on Claude Opus-class
models with extended thinking + tool use (file edits, shell, Playwright
screenshots); merge/PR session model ID as reported by the harness:
`claude-fable-5` (Claude Code CLI)
- All code was agent-authored and board-reviewed through Paperclip issue
threads (plans, wireframes, confirmations) before merging
## 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 run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes (none
required — experimental flag, self-documenting Settings card; noted
above)
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green (run 3 on `8af3041a`: all 16
gates SUCCESS, incl. e2e and all 4 serialized-suite shards)
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
(re-review verdict: Confidence 5/5, “Safe to merge”; all 4 round-1
findings fixed + confirmed resolved; both summary notes addressed in
`8af3041a`)
- [x] I will address all Greptile and reviewer comments before
requesting merge
---------
Co-authored-by: Paperclip <noreply@paperclip.ing>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
scotttong
@@ -0,0 +1,142 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
/**
|
||||
* E2E: post-wizard Conference Room typing intro (PAP-134, plan PAP-133).
|
||||
*
|
||||
* Completing the onboarding wizard must land the user in the Conference Room
|
||||
* with a staged intro: three-dot typing bubble first (~2s), then the CEO
|
||||
* welcome message, then the suggestion chips. This is the regression spec
|
||||
* from the PAP-133 investigation, checked in so the intro can't silently
|
||||
* vanish again (it already did once — PAP-54 dropped the dots CSS during a
|
||||
* theme migration).
|
||||
*
|
||||
* The wizard is driven end-to-end against real endpoints with two
|
||||
* deterministic intercepts so no live LLM/CLI is needed:
|
||||
* - the adapter env-test returns an instant pass, and
|
||||
* - the team-lead hire is re-issued server-side as a REAL hire with an
|
||||
* inert `http` adapter (dead URL, heartbeat disabled), so a real CEO
|
||||
* agent exists for the welcome bubble but no agent process ever runs.
|
||||
*/
|
||||
|
||||
const COMPANY_NAME = `E2E-TypingIntro-${Date.now()}`;
|
||||
const MISSION = "Verify the typing-dots intro survives the wizard handoff.";
|
||||
|
||||
test.describe("Conference Room typing intro after onboarding wizard", () => {
|
||||
test("shows typing dots first, then welcome, then chips", async ({
|
||||
page,
|
||||
baseURL,
|
||||
}) => {
|
||||
// The dots animation is intentionally disabled under reduced motion —
|
||||
// pin the e2e run to full motion so the animation guard is deterministic.
|
||||
await page.emulateMedia({ reducedMotion: "no-preference" });
|
||||
|
||||
// Intercept env-test → instant pass (avoid running a real CLI check).
|
||||
await page.route("**/test-environment", (route) =>
|
||||
route.fulfill({
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ status: "pass", checks: [] }),
|
||||
}),
|
||||
);
|
||||
|
||||
// Intercept hire → perform a REAL hire server-side with an inert http
|
||||
// adapter so no real agent process spawns.
|
||||
await page.route("**/agent-hires", async (route) => {
|
||||
const req = route.request();
|
||||
const body = JSON.parse(req.postData() || "{}");
|
||||
const auth = req.headers().authorization;
|
||||
const real = await fetch(new URL(req.url(), baseURL).toString(), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(auth ? { Authorization: auth } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: body.name,
|
||||
role: body.role,
|
||||
adapterType: "http",
|
||||
adapterConfig: { url: "http://127.0.0.1:1/dead" },
|
||||
runtimeConfig: { heartbeat: { enabled: false } },
|
||||
}),
|
||||
});
|
||||
await route.fulfill({
|
||||
status: real.status,
|
||||
contentType: "application/json",
|
||||
body: await real.text(),
|
||||
});
|
||||
});
|
||||
|
||||
// New-NUX surfaces are flag-gated default-OFF (PAP-136/137/138): turn the
|
||||
// experimental flag on for this throwaway instance before driving them.
|
||||
const flagRes = await page.request.patch("/api/instance/settings/experimental", {
|
||||
data: { enableConferenceRoomChat: true },
|
||||
});
|
||||
expect(flagRes.ok()).toBe(true);
|
||||
|
||||
await page.goto("/onboarding");
|
||||
|
||||
// Launcher card path (existing companies) — enter the wizard if the
|
||||
// route shows a launcher instead of opening the wizard directly.
|
||||
const startBtn = page.getByRole("button", { name: /Start Onboarding/i });
|
||||
if (await startBtn.count()) await startBtn.first().click();
|
||||
|
||||
// Step 0: front door (skipped when the wizard opens on the create path).
|
||||
const frontDoor = page.getByText("Build a new team");
|
||||
if (await frontDoor.count()) await frontDoor.first().click();
|
||||
|
||||
// Step 1: team name.
|
||||
await page.getByPlaceholder("Acme Corp").fill(COMPANY_NAME);
|
||||
await page.getByRole("button", { name: /^Next/ }).click();
|
||||
|
||||
// Step 2: mission (direct path default).
|
||||
await page
|
||||
.getByPlaceholder("What is your team trying to achieve?")
|
||||
.fill(MISSION);
|
||||
await page.getByRole("button", { name: /Confirm mission/ }).click();
|
||||
|
||||
// Step 3: lead name (prefilled) → Next.
|
||||
await page.waitForSelector('input[placeholder="Chief of staff"]', {
|
||||
timeout: 15_000,
|
||||
});
|
||||
await page.getByRole("button", { name: /^Next/ }).click();
|
||||
|
||||
// Step 4: adapter (claude_local default); heartbeat is intercepted.
|
||||
await page.getByRole("button", { name: /Give it a heartbeat/ }).click();
|
||||
|
||||
// Step 5: review → Get started hands off to the Conference Room.
|
||||
const getStarted = page.getByRole("button", { name: /Get started/ });
|
||||
await getStarted.waitFor({ timeout: 20_000 });
|
||||
await getStarted.click();
|
||||
|
||||
// Dots-first: the typing bubble must be on screen before the welcome.
|
||||
const dots = page.locator(".typing-dots");
|
||||
await expect(dots).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// Atomic snapshot — dots and welcome state read in one evaluation so a
|
||||
// slow assertion can't race the 2s reveal timer.
|
||||
const snapshot = await page.evaluate(() => ({
|
||||
dots: document.querySelectorAll(".typing-dots").length,
|
||||
welcomeVisible: document.body.textContent?.includes("Welcome to") ?? false,
|
||||
}));
|
||||
expect(snapshot.dots).toBeGreaterThan(0);
|
||||
expect(snapshot.welcomeVisible).toBe(false);
|
||||
|
||||
// Animation-presence guard (PAP-54 failure mode): the dots must carry a
|
||||
// real computed animation, not silently render as static circles after
|
||||
// the CSS block gets dropped in a refactor.
|
||||
const animationName = await dots
|
||||
.locator("span")
|
||||
.first()
|
||||
.evaluate((el) => getComputedStyle(el).animationName);
|
||||
expect(animationName).not.toBe("none");
|
||||
expect(animationName).toBeTruthy();
|
||||
|
||||
// Staged reveal completes: welcome bubble (~2s) then chips (~+700ms).
|
||||
await expect(page.getByText(/Welcome to/).first()).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
await expect(
|
||||
page.getByRole("button", { name: "Draft a Company Brief" }),
|
||||
).toBeVisible({ timeout: 5_000 });
|
||||
await expect(dots).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,175 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
/**
|
||||
* NUX Phase 4 — visual QA screenshot capture.
|
||||
*
|
||||
* Boots a throwaway local_trusted instance (see playwright.config.ts webServer)
|
||||
* and captures screenshots of every surface integrated by NUX Phases 1–3:
|
||||
* - "Build a new team" step 1 (team name) + step 2 (mission)
|
||||
* - Team-lead hire step (capsule wizard, PAP-125)
|
||||
* - Onboarding front door (path picker)
|
||||
* - "Add agents to your org" growth intake
|
||||
* - Conference Room (BoardChat) shell + composer + activity feed
|
||||
* - Artifacts page
|
||||
*
|
||||
* These are structural/rendering checks — LLM-dependent streaming (CEO chat
|
||||
* responses, hiring-plan generation) is verified separately on an LLM-backed
|
||||
* instance. Screenshots land in ./nux-phase4-shots for upload as evidence.
|
||||
*/
|
||||
|
||||
// Write under the gitignored test-results dir so re-runs leave no untracked
|
||||
// noise; screenshots are uploaded to the issue as QA evidence, not committed.
|
||||
const SHOT_DIR = path.join(__dirname, "test-results", "nux-phase4-shots");
|
||||
|
||||
function shot(name: string) {
|
||||
fs.mkdirSync(SHOT_DIR, { recursive: true });
|
||||
return path.join(SHOT_DIR, name);
|
||||
}
|
||||
|
||||
async function openWizard(page: import("@playwright/test").Page) {
|
||||
await page.goto("/onboarding");
|
||||
const startBtn = page.getByRole("button", { name: /Start Onboarding|New Company|Add Agent/ });
|
||||
if (await startBtn.count()) {
|
||||
await startBtn.first().click();
|
||||
}
|
||||
}
|
||||
|
||||
test.describe("NUX Phase 4 visual QA", () => {
|
||||
test("captures every integrated surface", async ({ page }) => {
|
||||
// New-NUX surfaces are flag-gated default-OFF (PAP-136/137/138): turn the
|
||||
// experimental flag on for this throwaway instance before driving them.
|
||||
const flagRes = await page.request.patch("/api/instance/settings/experimental", {
|
||||
data: { enableConferenceRoomChat: true },
|
||||
});
|
||||
expect(flagRes.ok()).toBe(true);
|
||||
|
||||
const consoleErrors: string[] = [];
|
||||
page.on("console", (msg) => {
|
||||
if (msg.type() === "error") consoleErrors.push(msg.text());
|
||||
});
|
||||
page.on("pageerror", (err) => consoleErrors.push("PAGEERROR: " + err.message));
|
||||
|
||||
const baseUrl =
|
||||
"http://127.0.0.1:" + (process.env.PAPERCLIP_E2E_PORT ?? "3199");
|
||||
|
||||
// ── Section A: create-team path (name → mission → hire) ───────────────
|
||||
await openWizard(page);
|
||||
// Front door shows when the wizard doesn't open directly on the create
|
||||
// path (e.g. another spec already created a company on this instance).
|
||||
const createCard = page.getByRole("button", { name: /Build a new team/ });
|
||||
if (await createCard.count()) {
|
||||
await createCard.first().click();
|
||||
}
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Name your team" }),
|
||||
).toBeVisible({ timeout: 15_000 });
|
||||
await page.getByPlaceholder("Acme Corp").fill("QA Robotics");
|
||||
await page.screenshot({ path: shot("02-create-name.png") });
|
||||
|
||||
await page.getByRole("button", { name: /^Next/ }).click();
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Define your mission" }),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
await page
|
||||
.getByPlaceholder("What is your team trying to achieve?")
|
||||
.fill("Build affordable home robots that handle household chores.");
|
||||
await page.screenshot({ path: shot("03-create-mission.png") });
|
||||
|
||||
// Step 2 advances via "Confirm mission" (creates the company + goal);
|
||||
// step 3 is the team-lead naming step of the capsule wizard.
|
||||
await page.getByRole("button", { name: /Confirm mission/ }).click();
|
||||
await page.waitForSelector('input[placeholder="Chief of staff"]', {
|
||||
timeout: 30_000,
|
||||
});
|
||||
await page.screenshot({ path: shot("04-hire-team-lead.png") });
|
||||
|
||||
// The company just created anchors the route-scoped sections below.
|
||||
const companiesRes = await page.request.get(`${baseUrl}/api/companies`);
|
||||
expect(companiesRes.ok()).toBe(true);
|
||||
const companies = await companiesRes.json();
|
||||
const qaCompany = (Array.isArray(companies) ? companies : []).find(
|
||||
(c: { name: string }) => c.name === "QA Robotics",
|
||||
);
|
||||
expect(qaCompany, "wizard should have created QA Robotics").toBeTruthy();
|
||||
const prefix: string = qaCompany.issuePrefix;
|
||||
|
||||
// ── Section B: front door + growth intake ─────────────────────────────
|
||||
await page.evaluate(() => window.localStorage.clear());
|
||||
await openWizard(page);
|
||||
// Reach the full-screen front door (step 0): either it shows directly or
|
||||
// "← Back to start" returns to it from the create step.
|
||||
if (!(await page.getByRole("heading", { name: "Welcome to Paperclip" }).count())) {
|
||||
await page.getByRole("button", { name: /Back to start/ }).click();
|
||||
}
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Welcome to Paperclip" }),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Build a new team" }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Add agents to your org" }),
|
||||
).toBeVisible();
|
||||
await page.screenshot({ path: shot("01-front-door.png") });
|
||||
|
||||
await page.getByRole("button", { name: /Add agents to your org/ }).click();
|
||||
// The grow path shares step 1 (team name) before its step-2 intake.
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Name your team" }),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
await page.getByPlaceholder("Acme Corp").fill("QA Robotics Grow");
|
||||
await page.getByRole("button", { name: /^Next/ }).click();
|
||||
await expect(
|
||||
page.getByRole("heading", { name: /Tell us about your team/ }),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
await page.screenshot({ path: shot("05-growth-intake.png") });
|
||||
|
||||
// ── Section C: Conference Room (BoardChat) ────────────────────────────
|
||||
// Visit the company dashboard first so CompanyContext selects the company
|
||||
// from the route before we land on the board-chat surface.
|
||||
await page.evaluate(() => window.localStorage.clear());
|
||||
await page.goto(`/${prefix}/dashboard`);
|
||||
await page.waitForLoadState("networkidle");
|
||||
await page.goto(`/${prefix}/board-chat`);
|
||||
await expect(page).toHaveURL(new RegExp(`/${prefix}/board-chat`));
|
||||
// Composer renders once a company is selected. (Regression guard for the
|
||||
// Rules-of-Hooks crash that previously blanked this page — see PAP-50.)
|
||||
await expect(
|
||||
page.getByPlaceholder("Ask anything about your company..."),
|
||||
).toBeVisible({ timeout: 20_000 });
|
||||
await page.waitForTimeout(2_000); // let welcome bubble + suggestion chips stage in
|
||||
await page.screenshot({ path: shot("06-board-chat.png") });
|
||||
|
||||
// ── Section D: Artifacts ──────────────────────────────────────────────
|
||||
await page.goto(`/${prefix}/artifacts`);
|
||||
await expect(page).toHaveURL(new RegExp(`/${prefix}/artifacts`));
|
||||
await page.waitForLoadState("networkidle");
|
||||
await page.waitForTimeout(1_000);
|
||||
await page.screenshot({ path: shot("07-artifacts.png") });
|
||||
|
||||
for (const f of [
|
||||
"01-front-door.png",
|
||||
"02-create-name.png",
|
||||
"03-create-mission.png",
|
||||
"04-hire-team-lead.png",
|
||||
"05-growth-intake.png",
|
||||
"06-board-chat.png",
|
||||
"07-artifacts.png",
|
||||
]) {
|
||||
const p = shot(f);
|
||||
expect(fs.existsSync(p), `missing ${f}`).toBe(true);
|
||||
expect(fs.statSync(p).size, `empty ${f}`).toBeGreaterThan(1_000);
|
||||
}
|
||||
|
||||
// No React Rules-of-Hooks / render crashes on any surface we visited.
|
||||
const hookErrors = consoleErrors.filter(
|
||||
(e) => /Rendered more hooks|change in the order of Hooks/i.test(e),
|
||||
);
|
||||
expect(hookErrors, hookErrors.join("\n")).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
+72
-152
@@ -1,181 +1,101 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
/**
|
||||
* E2E: Onboarding wizard flow (skip_llm mode).
|
||||
* E2E: Onboarding wizard flow (NUX Phase 2 expanded wizard).
|
||||
*
|
||||
* Walks through the 4-step OnboardingWizard:
|
||||
* Step 1 — Name your company
|
||||
* Step 2 — Create your first agent (adapter selection + config)
|
||||
* Step 3 — Give it something to do (task creation)
|
||||
* Step 4 — Ready to launch (summary + open issue)
|
||||
* The wizard now opens on a front door (path picker) and the "Create a new
|
||||
* company" path runs:
|
||||
* Step 0 — Front door (Create a new company / Level up existing)
|
||||
* Step 1a — Name your company
|
||||
* Step 1b — Define your mission (direct or guided)
|
||||
* Step 2 — Hire your team lead (adapter picker)
|
||||
* Step 3+ — Launch celebration → CEO chat → hiring plan → orientation
|
||||
*
|
||||
* By default this runs in skip_llm mode: we do NOT assert that an LLM
|
||||
* heartbeat fires. Set PAPERCLIP_E2E_SKIP_LLM=false to enable LLM-dependent
|
||||
* assertions (requires a valid ANTHROPIC_API_KEY).
|
||||
* This test covers the deterministic, LLM-free core: it drives the front door
|
||||
* through company naming + mission definition (which creates the company and a
|
||||
* company-level goal) and verifies the wizard advances to the team-lead step.
|
||||
*
|
||||
* The tail (CEO chat at step 4, hiring-plan generation at step 5, final
|
||||
* landing) depends on a live LLM and is verified separately during manual /
|
||||
* LLM-backed QA — see PAP-50. Surface-level rendering of every step is
|
||||
* snapshotted by nux-phase4-screenshots.spec.ts.
|
||||
*/
|
||||
|
||||
const SKIP_LLM = process.env.PAPERCLIP_E2E_SKIP_LLM !== "false";
|
||||
|
||||
const COMPANY_NAME = `E2E-Test-${Date.now()}`;
|
||||
const AGENT_NAME = "CEO";
|
||||
const TASK_TITLE = "E2E test task";
|
||||
const MISSION = "Build affordable home robots that handle household chores.";
|
||||
|
||||
test.describe("Onboarding wizard", () => {
|
||||
test("completes full wizard flow", async ({ page }) => {
|
||||
test("create-company path: name + mission creates company and goal", async ({
|
||||
page,
|
||||
}) => {
|
||||
const pageErrors: string[] = [];
|
||||
page.on("pageerror", (err) => pageErrors.push(err.message));
|
||||
|
||||
// New-NUX surfaces are flag-gated default-OFF (PAP-136/137/138): turn the
|
||||
// experimental flag on for this throwaway instance before driving them.
|
||||
const flagRes = await page.request.patch("/api/instance/settings/experimental", {
|
||||
data: { enableConferenceRoomChat: true },
|
||||
});
|
||||
expect(flagRes.ok()).toBe(true);
|
||||
|
||||
await page.goto("/onboarding");
|
||||
|
||||
const wizardHeading = page.locator("h3", { hasText: "Name your company" });
|
||||
|
||||
await expect(wizardHeading).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
const companyNameInput = page.locator('input[placeholder="Acme Corp"]');
|
||||
await companyNameInput.fill(COMPANY_NAME);
|
||||
|
||||
const nextButton = page.getByRole("button", { name: "Next" });
|
||||
await nextButton.click();
|
||||
|
||||
await expect(
|
||||
page.locator("h3", { hasText: "Create your first agent" })
|
||||
).toBeVisible({ timeout: 30_000 });
|
||||
|
||||
const agentNameInput = page.locator('input[placeholder="CEO"]');
|
||||
await expect(agentNameInput).toHaveValue(AGENT_NAME);
|
||||
|
||||
await expect(
|
||||
page.locator("button", { hasText: "Claude Code" }).locator("..")
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "More Agent Adapter Types" }).click();
|
||||
await expect(page.getByRole("button", { name: "Process" })).toHaveCount(0);
|
||||
|
||||
await page.getByRole("button", { name: "Next" }).click();
|
||||
|
||||
await expect(
|
||||
page.locator("h3", { hasText: "Give it something to do" })
|
||||
).toBeVisible({ timeout: 30_000 });
|
||||
|
||||
const baseUrl = page.url().split("/").slice(0, 3).join("/");
|
||||
if (SKIP_LLM) {
|
||||
const companiesAfterAgentRes = await page.request.get(`${baseUrl}/api/companies`);
|
||||
expect(companiesAfterAgentRes.ok()).toBe(true);
|
||||
const companiesAfterAgent = await companiesAfterAgentRes.json();
|
||||
const companyAfterAgent = companiesAfterAgent.find(
|
||||
(c: { name: string }) => c.name === COMPANY_NAME
|
||||
);
|
||||
expect(companyAfterAgent).toBeTruthy();
|
||||
|
||||
const agentsAfterCreateRes = await page.request.get(
|
||||
`${baseUrl}/api/companies/${companyAfterAgent.id}/agents`
|
||||
);
|
||||
expect(agentsAfterCreateRes.ok()).toBe(true);
|
||||
const agentsAfterCreate = await agentsAfterCreateRes.json();
|
||||
const ceoAgentAfterCreate = agentsAfterCreate.find(
|
||||
(a: { name: string }) => a.name === AGENT_NAME
|
||||
);
|
||||
expect(ceoAgentAfterCreate).toBeTruthy();
|
||||
|
||||
const disableWakeRes = await page.request.patch(
|
||||
`${baseUrl}/api/agents/${ceoAgentAfterCreate.id}?companyId=${encodeURIComponent(companyAfterAgent.id)}`,
|
||||
{
|
||||
data: {
|
||||
runtimeConfig: {
|
||||
heartbeat: {
|
||||
enabled: false,
|
||||
intervalSec: 300,
|
||||
wakeOnDemand: false,
|
||||
cooldownSec: 10,
|
||||
maxConcurrentRuns: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
expect(disableWakeRes.ok()).toBe(true);
|
||||
// The wizard may open on a launcher card or directly on the capsule
|
||||
// wizard; the front door (step 0) requires a click into the create path.
|
||||
const startBtn = page.getByRole("button", {
|
||||
name: /Start Onboarding|New Company|Add Agent/,
|
||||
});
|
||||
if (await startBtn.count()) {
|
||||
await startBtn.first().click();
|
||||
}
|
||||
const createCard = page.getByRole("button", { name: /Build a new team/ });
|
||||
if (await createCard.count()) {
|
||||
await createCard.first().click();
|
||||
}
|
||||
|
||||
const taskTitleInput = page.locator(
|
||||
'input[placeholder="e.g. Research competitor pricing"]'
|
||||
);
|
||||
await taskTitleInput.clear();
|
||||
await taskTitleInput.fill(TASK_TITLE);
|
||||
|
||||
await page.getByRole("button", { name: "Next" }).click();
|
||||
|
||||
// Step 1 — Name your team.
|
||||
await expect(
|
||||
page.locator("h3", { hasText: "Ready to launch" })
|
||||
).toBeVisible({ timeout: 30_000 });
|
||||
page.getByRole("heading", { name: "Name your team" }),
|
||||
).toBeVisible({ timeout: 15_000 });
|
||||
await page.getByPlaceholder("Acme Corp").fill(COMPANY_NAME);
|
||||
await page.getByRole("button", { name: /^Next/ }).click();
|
||||
|
||||
await expect(page.locator("text=" + COMPANY_NAME)).toBeVisible();
|
||||
await expect(page.locator("text=" + AGENT_NAME)).toBeVisible();
|
||||
await expect(page.locator("text=" + TASK_TITLE)).toBeVisible();
|
||||
// Step 2 — Define your mission (direct entry is the default path).
|
||||
await expect(
|
||||
page.getByRole("heading", { name: "Define your mission" }),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
await page
|
||||
.getByPlaceholder("What is your team trying to achieve?")
|
||||
.fill(MISSION);
|
||||
|
||||
await page.getByRole("button", { name: "Create & Open Task" }).click();
|
||||
|
||||
await expect(page).toHaveURL(/\/issues\//, { timeout: 30_000 });
|
||||
// "Confirm mission" creates the company + a company-level goal, then
|
||||
// advances to the team-lead naming step of the capsule wizard.
|
||||
await page.getByRole("button", { name: /Confirm mission/ }).click();
|
||||
await page.waitForSelector('input[placeholder="Chief of staff"]', {
|
||||
timeout: 30_000,
|
||||
});
|
||||
|
||||
// Verify the company + company-level goal were persisted.
|
||||
const baseUrl = page.url().split("/").slice(0, 3).join("/");
|
||||
const companiesRes = await page.request.get(`${baseUrl}/api/companies`);
|
||||
expect(companiesRes.ok()).toBe(true);
|
||||
const companies = await companiesRes.json();
|
||||
const company = companies.find(
|
||||
(c: { name: string }) => c.name === COMPANY_NAME
|
||||
(c: { name: string }) => c.name === COMPANY_NAME,
|
||||
);
|
||||
expect(company).toBeTruthy();
|
||||
expect(company, `company ${COMPANY_NAME} should exist`).toBeTruthy();
|
||||
|
||||
const agentsRes = await page.request.get(
|
||||
`${baseUrl}/api/companies/${company.id}/agents`
|
||||
const goalsRes = await page.request.get(
|
||||
`${baseUrl}/api/companies/${company.id}/goals`,
|
||||
);
|
||||
expect(agentsRes.ok()).toBe(true);
|
||||
const agents = await agentsRes.json();
|
||||
const ceoAgent = agents.find(
|
||||
(a: { name: string }) => a.name === AGENT_NAME
|
||||
expect(goalsRes.ok()).toBe(true);
|
||||
const goals = await goalsRes.json();
|
||||
const companyGoal = (Array.isArray(goals) ? goals : []).find(
|
||||
(g: { level?: string }) => g.level === "company",
|
||||
);
|
||||
expect(ceoAgent).toBeTruthy();
|
||||
expect(ceoAgent.role).toBe("ceo");
|
||||
expect(ceoAgent.adapterType).not.toBe("process");
|
||||
expect(companyGoal, "a company-level goal should be created").toBeTruthy();
|
||||
|
||||
const instructionsBundleRes = await page.request.get(
|
||||
`${baseUrl}/api/agents/${ceoAgent.id}/instructions-bundle?companyId=${company.id}`
|
||||
);
|
||||
expect(instructionsBundleRes.ok()).toBe(true);
|
||||
const instructionsBundle = await instructionsBundleRes.json();
|
||||
expect(
|
||||
instructionsBundle.files.map((file: { path: string }) => file.path).sort()
|
||||
).toEqual(["AGENTS.md", "HEARTBEAT.md", "SOUL.md", "TOOLS.md"]);
|
||||
|
||||
const issuesRes = await page.request.get(
|
||||
`${baseUrl}/api/companies/${company.id}/issues`
|
||||
);
|
||||
expect(issuesRes.ok()).toBe(true);
|
||||
const issues = await issuesRes.json();
|
||||
const task = issues.find(
|
||||
(i: { title: string }) => i.title === TASK_TITLE
|
||||
);
|
||||
expect(task).toBeTruthy();
|
||||
expect(task.assigneeAgentId).toBe(ceoAgent.id);
|
||||
expect(task.description).toContain(
|
||||
"You are the CEO. You set the direction for the company."
|
||||
);
|
||||
expect(task.description).not.toContain("github.com/paperclipai/companies");
|
||||
|
||||
if (!SKIP_LLM) {
|
||||
await expect(async () => {
|
||||
const res = await page.request.get(
|
||||
`${baseUrl}/api/issues/${task.id}`
|
||||
);
|
||||
const issue = await res.json();
|
||||
expect(["in_progress", "done"]).toContain(issue.status);
|
||||
}).toPass({ timeout: 120_000, intervals: [5_000] });
|
||||
} else {
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const runsRes = await page.request.get(
|
||||
`${baseUrl}/api/companies/${company.id}/heartbeat-runs?agentId=${ceoAgent.id}`
|
||||
);
|
||||
expect(runsRes.ok()).toBe(true);
|
||||
const runs = await runsRes.json();
|
||||
return Array.isArray(runs) ? runs.length : -1;
|
||||
}, { timeout: 10_000, intervals: [500, 1_000, 2_000] })
|
||||
.toBe(0);
|
||||
}
|
||||
// The expanded wizard must not crash the app (Rules-of-Hooks regression).
|
||||
expect(pageErrors, pageErrors.join("\n")).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,6 +10,14 @@ test("captures planning mode UI for desktop and mobile", async ({ page }) => {
|
||||
const companyName = `PAP-3413-${timestamp}`;
|
||||
const screenshotDir = "test-results/planning-mode";
|
||||
|
||||
// This spec captures the CLASSIC (flag-off) wizard + composer; pin the
|
||||
// experimental flag off in case an earlier spec on this shared instance
|
||||
// turned it on (the NUX specs do).
|
||||
const flagRes = await page.request.patch("/api/instance/settings/experimental", {
|
||||
data: { enableConferenceRoomChat: false },
|
||||
});
|
||||
expect(flagRes.ok()).toBe(true);
|
||||
|
||||
await page.goto("/onboarding");
|
||||
await expect(page.locator("h3", { hasText: "Name your company" })).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
|
||||
@@ -18,6 +18,11 @@ export default defineConfig({
|
||||
testIgnore: ["multi-user.spec.ts", "multi-user-authenticated.spec.ts"],
|
||||
timeout: 60_000,
|
||||
retries: 0,
|
||||
// All specs share one throwaway server, and several toggle instance-level
|
||||
// state (the `enableConferenceRoomChat` experimental flag) that changes
|
||||
// which UI variant renders. Run files serially so a flag flip in one spec
|
||||
// can't change the wizard/thread under another spec mid-flight.
|
||||
workers: 1,
|
||||
use: {
|
||||
baseURL: BASE_URL,
|
||||
headless: true,
|
||||
|
||||
Reference in New Issue
Block a user