mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 01:50:39 +09:00
Add planning mode for issue work (#5353)
## Thinking Path > - Paperclip is a control plane for autonomous AI companies. > - Issues are the core unit of work, and issue comments are how board users and agents coordinate execution. > - Some issue conversations need to produce plans and approvals instead of immediate implementation work. > - The existing issue contract did not distinguish standard execution comments from planning-oriented issue work. > - This pull request adds an issue work-mode contract and board UI affordances for standard vs planning mode. > - The benefit is that planning-mode issues can be created, displayed, discussed, and carried through agent heartbeat context without losing the normal issue workflow. ## What Changed - Added `standard` / `planning` issue work-mode contracts across DB, shared validators/types, server issue flows, plugin protocol, and adapter heartbeat payloads. - Added an idempotent `0081_optimal_dormammu` migration for `issues.work_mode`, ordered after current `public-gh/master` migrations. - Updated heartbeat/context summaries and issue-thread interaction behavior so planning work mode is preserved when creating suggested follow-up issues. - Added UI support for planning-mode issue creation, issue rows, detail composer styling, and composer work-mode toggles. - Added focused server/shared/UI tests plus a Playwright visual verification spec for planning-mode surfaces. - Rebased the branch onto current `public-gh/master` and added durable planning-mode screenshots under `doc/assets/pap-3368/`. ## Verification - `pnpm --filter @paperclipai/db run check:migrations` - `pnpm exec vitest run --project @paperclipai/shared packages/shared/src/validators/issue.test.ts` - `pnpm exec vitest run --project @paperclipai/server server/src/__tests__/heartbeat-context-summary.test.ts server/src/__tests__/issue-thread-interactions-service.test.ts server/src/__tests__/issues-goal-context-routes.test.ts --pool=forks --poolOptions.forks.isolate=true` - `pnpm exec vitest run --project @paperclipai/ui ui/src/components/IssueChatThread.test.tsx ui/src/components/NewIssueDialog.test.tsx ui/src/components/IssueRow.test.tsx ui/src/pages/IssueDetail.test.tsx` - `pnpm exec vitest run --project @paperclipai/adapter-utils packages/adapter-utils/src/server-utils.test.ts` - `PAPERCLIP_E2E_SKIP_LLM=true npx playwright test --config tests/e2e/playwright.config.ts tests/e2e/planning-mode-visual-verification.spec.ts` ## Screenshots Desktop planning detail:  Desktop planning row:  Desktop staged standard toggle:  Mobile planning detail:  Mobile planning row:  ## Risks - Medium migration risk: this adds a non-null issue column. The migration uses `ADD COLUMN IF NOT EXISTS` so installations that applied an older branch-local migration number can still apply the final numbered migration safely. - Medium contract risk: issue payloads, plugin payloads, and adapter heartbeat payloads now include work mode; compatibility is handled by defaulting missing values to `standard`. - UI risk is moderate because composer controls changed; focused component tests and visual e2e coverage exercise standard vs planning display and toggle behavior. > 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 - OpenAI Codex, GPT-5 coding agent in a local Paperclip worktree, with shell/tool use. Exact context-window size is not exposed in this runtime. ## 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 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 - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
320fd5d23b
commit
a1b30c9f35
65 changed files with 1539 additions and 214 deletions
157
tests/e2e/planning-mode-visual-verification.spec.ts
Normal file
157
tests/e2e/planning-mode-visual-verification.spec.ts
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import { expect, test } from "@playwright/test";
|
||||
|
||||
const SKIP_LLM = process.env.PAPERCLIP_E2E_SKIP_LLM !== "false";
|
||||
|
||||
const AGENT_NAME = "CEO";
|
||||
const TASK_TITLE = "PAP-3413 planning mode evidence";
|
||||
|
||||
test("captures planning mode UI for desktop and mobile", async ({ page }) => {
|
||||
const timestamp = Date.now();
|
||||
const companyName = `PAP-3413-${timestamp}`;
|
||||
const screenshotDir = "test-results/planning-mode";
|
||||
|
||||
await page.goto("/onboarding");
|
||||
await expect(page.locator("h3", { hasText: "Name your company" })).toBeVisible({ timeout: 5_000 });
|
||||
|
||||
await page.locator('input[placeholder="Acme Corp"]').fill(companyName);
|
||||
await page.getByRole("button", { name: "Next" }).click();
|
||||
|
||||
await expect(page.locator("h3", { hasText: "Create your first agent" })).toBeVisible({ timeout: 30_000 });
|
||||
await expect(page.locator('input[placeholder="CEO"]')).toHaveValue(AGENT_NAME);
|
||||
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 === companyName);
|
||||
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);
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
await expect(page.locator("h3", { hasText: "Ready to launch" })).toBeVisible({ timeout: 30_000 });
|
||||
await page.getByRole("button", { name: "Create & Open Issue" }).click();
|
||||
await expect(page).toHaveURL(/\/issues\//, { timeout: 30_000 });
|
||||
|
||||
const openedIssueUrl = page.url();
|
||||
const openedIssueIdentifier = openedIssueUrl.split("/").filter(Boolean).pop();
|
||||
const baseOrigin = new URL(openedIssueUrl).origin;
|
||||
const companyRes = await page.request.get(`${baseOrigin}/api/companies`);
|
||||
expect(companyRes.ok()).toBe(true);
|
||||
const companies = await companyRes.json();
|
||||
const company = companies.find((c: { name: string }) => c.name === companyName);
|
||||
expect(company).toBeTruthy();
|
||||
const issueRes = await page.request.get(`${baseOrigin}/api/companies/${company.id}/issues`);
|
||||
expect(issueRes.ok()).toBe(true);
|
||||
const issues = await issueRes.json();
|
||||
const planningSeedIssue = issues.find(
|
||||
(candidate: { id: string; identifier?: string; title: string }) =>
|
||||
candidate.identifier === openedIssueIdentifier || candidate.id === openedIssueIdentifier || candidate.title === TASK_TITLE,
|
||||
);
|
||||
expect(planningSeedIssue).toBeTruthy();
|
||||
|
||||
const issue = planningSeedIssue;
|
||||
const issueIdentifier = issue.identifier ?? issue.id;
|
||||
const issuePath = `/${company.issuePrefix ?? company.id}/issues/${issueIdentifier}`;
|
||||
const companyPrefix = company.issuePrefix ?? company.id;
|
||||
const issueLinkSelector = `a[href$="/issues/${issueIdentifier}"]`;
|
||||
|
||||
const setMode = async (mode: "standard" | "planning") => {
|
||||
const patchRes = await page.request.patch(`${baseOrigin}/api/issues/${issue.id}`, {
|
||||
data: { workMode: mode },
|
||||
});
|
||||
expect(patchRes.ok()).toBe(true);
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const currentRes = await page.request.get(`${baseOrigin}/api/issues/${issue.id}`);
|
||||
expect(currentRes.ok()).toBe(true);
|
||||
const current = await currentRes.json();
|
||||
return current.workMode;
|
||||
}, { timeout: 10_000 })
|
||||
.toBe(mode);
|
||||
};
|
||||
|
||||
await setMode("planning");
|
||||
|
||||
await page.goto(issuePath);
|
||||
await expect(page.getByText("Planning").first()).toBeVisible();
|
||||
await expect(page.getByTestId("issue-chat-composer")).toHaveAttribute("data-pending-work-mode", "planning");
|
||||
const desktopPlanningToggle = page.getByTestId("issue-chat-composer-work-mode-toggle");
|
||||
await expect(desktopPlanningToggle).toBeVisible();
|
||||
await expect(desktopPlanningToggle).toHaveAttribute("data-pending-work-mode", "planning");
|
||||
await expect(desktopPlanningToggle).toHaveAttribute("aria-pressed", "true");
|
||||
|
||||
await page.screenshot({
|
||||
path: `${screenshotDir}/desktop-planning-detail-${timestamp}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
await page.goto(`/${companyPrefix}/issues`);
|
||||
await expect(page.locator(issueLinkSelector)).toBeVisible();
|
||||
await expect(page.locator(issueLinkSelector)).toContainText("Planning");
|
||||
await page.screenshot({
|
||||
path: `${screenshotDir}/desktop-planning-row-${timestamp}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
await page.goto(issuePath);
|
||||
await page.getByTestId("issue-chat-composer-work-mode-toggle").click();
|
||||
await expect(page.getByTestId("issue-chat-composer")).toHaveAttribute("data-pending-work-mode", "standard");
|
||||
await expect(page.getByTestId("issue-chat-composer-work-mode-toggle")).toBeHidden();
|
||||
await page.screenshot({
|
||||
path: `${screenshotDir}/desktop-standard-toggle-${timestamp}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
await setMode("planning");
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto(issuePath);
|
||||
await expect(page.getByText("Planning").first()).toBeVisible();
|
||||
const mobilePlanningToggle = page.getByTestId("issue-chat-composer-work-mode-toggle");
|
||||
await expect(mobilePlanningToggle).toBeVisible();
|
||||
await expect(mobilePlanningToggle).toHaveAttribute("data-pending-work-mode", "planning");
|
||||
await expect(mobilePlanningToggle).toHaveAttribute("aria-pressed", "true");
|
||||
await page.screenshot({
|
||||
path: `${screenshotDir}/mobile-planning-detail-${timestamp}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
await page.goto(`/${companyPrefix}/issues`);
|
||||
await expect(page.locator(issueLinkSelector)).toBeVisible();
|
||||
await expect(page.locator(issueLinkSelector)).toContainText("Planning");
|
||||
await page.screenshot({
|
||||
path: `${screenshotDir}/mobile-planning-row-${timestamp}.png`,
|
||||
fullPage: true,
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue