mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-19 12:10:37 +09:00
Present ordered sub-issues as a workflow checklist (#4523)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies. > - Operators use issue detail pages and child issue lists to understand multi-step execution plans. > - Ordered sub-issues currently read like a flat table, so dependency chains and current next steps are harder to scan. > - The branch work adds a workflow-oriented presentation for child issues without changing the single-assignee task model. > - This pull request makes ordered sub-issues read more like a progress checklist while preserving normal issue list controls. > - The benefit is that operators can see completed steps, active work, blocked follow-ups, and dependency order at a glance. ## What Changed - Added workflow sorting utilities and tests for dependency-aware child issue ordering. - Added sub-issue progress summary, checklist numbering, current-step affordances, blocker context, and done-state de-emphasis in the issue list UI. - Wired issue detail sub-issue panels to use the workflow sort/progress checklist presentation. - Updated issue service behavior/tests for child issue ordering inputs used by the UI. - Added a Storybook visual review fixture and screenshot helper for the sub-issue workflow checklist surface. ## Verification - `pnpm run preflight:workspace-links && pnpm exec vitest run server/src/__tests__/issues-service.test.ts ui/src/components/IssueRow.test.tsx ui/src/components/IssuesList.test.tsx ui/src/pages/IssueDetail.test.tsx ui/src/lib/issue-detail-subissues.test.ts ui/src/lib/workflow-sort.test.ts` - Result: 6 test files passed, 55 tests passed, 34 embedded Postgres issue-service tests skipped because `@embedded-postgres/darwin-x64` is unavailable on this host. - Visual review: generated Storybook screenshots from the existing local Storybook server on port 6006 with `node scripts/screenshot-subissues.mjs /tmp/pap-2189-subissues-screens http://localhost:6006`. - Screenshot artifacts: - Desktop dark:  - Desktop light:  - Mobile dark:  - Mobile light:  - Local Storybook note: starting a second Storybook process selected port 6008 because 6006 was occupied, then Vite failed with an esbuild host/binary version mismatch (`0.25.12` host vs `0.27.3` binary). The already-running Storybook server on 6006 served the fixture successfully for screenshots. ## Risks - Medium UI risk: the issue list now has additional sub-issue-specific visual states, so dense lists should be checked for spacing and scanability. - Low ordering risk: workflow sorting is covered by focused unit tests, but unusual dependency topologies may still need reviewer attention. - No migration risk: this PR does not add database migrations or touch `pnpm-lock.yaml`. > 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, tool-enabled shell/git/GitHub workflow. Context window is runtime-provided and not exposed in this environment. ## 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
40782f703d
commit
df425fde96
22 changed files with 1449 additions and 18 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import type { ReactNode } from "react";
|
||||
import type { AnchorHTMLAttributes, ReactNode } from "react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
|
@ -50,6 +50,22 @@ vi.mock("../context/DialogContext", () => ({
|
|||
useDialog: () => dialogState,
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/router", () => ({
|
||||
Link: ({
|
||||
children,
|
||||
to,
|
||||
state: _state,
|
||||
issuePrefetch: _issuePrefetch,
|
||||
...props
|
||||
}: AnchorHTMLAttributes<HTMLAnchorElement> & {
|
||||
to: string;
|
||||
state?: unknown;
|
||||
issuePrefetch?: unknown;
|
||||
}) => (
|
||||
<a href={to} {...props}>{children}</a>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("../api/issues", () => ({
|
||||
issuesApi: mockIssuesApi,
|
||||
}));
|
||||
|
|
@ -75,15 +91,32 @@ vi.mock("./IssueRow", () => ({
|
|||
issue,
|
||||
desktopMetaLeading,
|
||||
desktopTrailing,
|
||||
titleClassName,
|
||||
checklistStepNumber,
|
||||
checklistCurrentStep,
|
||||
checklistDependencyChips,
|
||||
checklistRowId,
|
||||
}: {
|
||||
issue: Issue;
|
||||
desktopMetaLeading?: ReactNode;
|
||||
desktopTrailing?: ReactNode;
|
||||
titleClassName?: string;
|
||||
checklistStepNumber?: number | string | null;
|
||||
checklistCurrentStep?: boolean;
|
||||
checklistDependencyChips?: ReactNode;
|
||||
checklistRowId?: string;
|
||||
}) => (
|
||||
<div data-testid="issue-row">
|
||||
<div
|
||||
data-testid="issue-row"
|
||||
id={checklistRowId}
|
||||
data-step={checklistStepNumber ?? undefined}
|
||||
data-current-step={checklistCurrentStep ? "true" : undefined}
|
||||
data-title-class={titleClassName ?? undefined}
|
||||
>
|
||||
<span>{issue.title}</span>
|
||||
{desktopMetaLeading}
|
||||
{desktopTrailing}
|
||||
{checklistDependencyChips}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
|
@ -350,6 +383,250 @@ describe("IssuesList", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("renders the opt-in sub-issue progress summary with workflow next-up linking", async () => {
|
||||
const doneIssue = createIssue({
|
||||
id: "issue-done",
|
||||
identifier: "PAP-1",
|
||||
title: "Completed setup",
|
||||
status: "done",
|
||||
createdAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
});
|
||||
const nextIssue = createIssue({
|
||||
id: "issue-next",
|
||||
identifier: "PAP-2",
|
||||
title: "Implement next slice",
|
||||
status: "todo",
|
||||
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
||||
blockedBy: [{
|
||||
id: "issue-done",
|
||||
identifier: "PAP-1",
|
||||
title: "Completed setup",
|
||||
status: "done",
|
||||
priority: "medium",
|
||||
assigneeAgentId: null,
|
||||
assigneeUserId: null,
|
||||
}],
|
||||
});
|
||||
const blockedIssue = createIssue({
|
||||
id: "issue-blocked",
|
||||
identifier: "PAP-3",
|
||||
title: "Blocked follow-up",
|
||||
status: "blocked",
|
||||
createdAt: new Date("2026-04-03T00:00:00.000Z"),
|
||||
});
|
||||
const cancelledIssue = createIssue({
|
||||
id: "issue-cancelled",
|
||||
identifier: "PAP-4",
|
||||
title: "Cancelled follow-up",
|
||||
status: "cancelled",
|
||||
createdAt: new Date("2026-04-04T00:00:00.000Z"),
|
||||
});
|
||||
|
||||
const { root } = renderWithQueryClient(
|
||||
<IssuesList
|
||||
issues={[cancelledIssue, blockedIssue, nextIssue, doneIssue]}
|
||||
agents={[]}
|
||||
projects={[]}
|
||||
viewStateKey="paperclip:test-issues"
|
||||
showProgressSummary
|
||||
onUpdateIssue={() => undefined}
|
||||
/>,
|
||||
container,
|
||||
);
|
||||
|
||||
await waitForAssertion(() => {
|
||||
const progress = container.querySelector('[role="progressbar"]');
|
||||
expect(progress).not.toBeNull();
|
||||
expect(progress?.getAttribute("aria-valuenow")).toBe("1");
|
||||
expect(progress?.getAttribute("aria-valuemax")).toBe("3");
|
||||
expect(container.textContent).toContain("1/3 done");
|
||||
expect(container.textContent).toContain("0 in progress");
|
||||
expect(container.textContent).toContain("1 blocked");
|
||||
expect(container.textContent).not.toContain("Done 1");
|
||||
expect(container.textContent).toContain("Next up");
|
||||
const link = container.querySelector('a[href="/issues/PAP-2"]');
|
||||
expect(link?.textContent).toContain("Implement next slice");
|
||||
expect(container.querySelector('[title="Cancelled: 1"]')).toBeNull();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("adds checklist affordances for workflow-sorted sub-issue lists", async () => {
|
||||
const issueDone = createIssue({
|
||||
id: "issue-done",
|
||||
identifier: "PAP-1",
|
||||
title: "Done first",
|
||||
status: "done",
|
||||
createdAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
});
|
||||
const issueBlocked = createIssue({
|
||||
id: "issue-blocked",
|
||||
identifier: "PAP-2",
|
||||
title: "Blocked issue",
|
||||
status: "blocked",
|
||||
blockedBy: [{ id: "issue-active", identifier: "PAP-3", title: "Active blocker", status: "todo", priority: "medium", assigneeAgentId: null, assigneeUserId: null }],
|
||||
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
||||
});
|
||||
const issueActive = createIssue({
|
||||
id: "issue-active",
|
||||
identifier: "PAP-3",
|
||||
title: "Active blocker",
|
||||
status: "todo",
|
||||
createdAt: new Date("2026-04-03T00:00:00.000Z"),
|
||||
});
|
||||
|
||||
const { root } = renderWithQueryClient(
|
||||
<IssuesList
|
||||
issues={[issueBlocked, issueActive, issueDone]}
|
||||
agents={[]}
|
||||
projects={[]}
|
||||
viewStateKey="paperclip:test-issues"
|
||||
defaultSortField="workflow"
|
||||
onUpdateIssue={() => undefined}
|
||||
/>,
|
||||
container,
|
||||
);
|
||||
|
||||
await waitForAssertion(() => {
|
||||
const rows = Array.from(container.querySelectorAll('[data-testid="issue-row"]'));
|
||||
expect(rows).toHaveLength(3);
|
||||
expect(rows.map((row) => row.getAttribute("data-step"))).toEqual(["1", "2", "3"]);
|
||||
expect(container.textContent?.replace(/\s+/g, "")).toContain("1.PAP-1");
|
||||
expect(container.textContent?.replace(/\s+/g, "")).toContain("2.PAP-3");
|
||||
expect(rows.filter((row) => row.getAttribute("data-current-step") === "true")).toHaveLength(1);
|
||||
expect(rows.find((row) => row.textContent?.includes("Active blocker"))?.getAttribute("data-current-step")).toBe("true");
|
||||
expect(rows.find((row) => row.textContent?.includes("Done first"))?.getAttribute("data-title-class")).toContain("text-muted-foreground");
|
||||
expect(container.textContent).toContain("blocked by PAP-3 · step 2");
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("uses hierarchical checklist step numbers when nested rows render inline", async () => {
|
||||
const firstRoot = createIssue({
|
||||
id: "issue-first-root",
|
||||
identifier: "PAP-1",
|
||||
title: "First root",
|
||||
status: "done",
|
||||
createdAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
});
|
||||
const parent = createIssue({
|
||||
id: "issue-parent",
|
||||
identifier: "PAP-2",
|
||||
title: "Parent slice",
|
||||
status: "todo",
|
||||
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
||||
});
|
||||
const nextRoot = createIssue({
|
||||
id: "issue-next-root",
|
||||
identifier: "PAP-3",
|
||||
title: "Next root",
|
||||
status: "todo",
|
||||
createdAt: new Date("2026-04-03T00:00:00.000Z"),
|
||||
});
|
||||
const grandchild = createIssue({
|
||||
id: "issue-grandchild",
|
||||
identifier: "PAP-4",
|
||||
title: "Nested cancelled cleanup",
|
||||
status: "cancelled",
|
||||
parentId: "issue-parent",
|
||||
createdAt: new Date("2026-04-04T00:00:00.000Z"),
|
||||
});
|
||||
|
||||
const { root } = renderWithQueryClient(
|
||||
<IssuesList
|
||||
issues={[grandchild, nextRoot, firstRoot, parent]}
|
||||
agents={[]}
|
||||
projects={[]}
|
||||
viewStateKey="paperclip:test-issues"
|
||||
defaultSortField="workflow"
|
||||
onUpdateIssue={() => undefined}
|
||||
/>,
|
||||
container,
|
||||
);
|
||||
|
||||
await waitForAssertion(() => {
|
||||
const rows = Array.from(container.querySelectorAll('[data-testid="issue-row"]'));
|
||||
expect(rows).toHaveLength(4);
|
||||
expect(rows.map((row) => row.textContent)).toEqual([
|
||||
expect.stringContaining("First root"),
|
||||
expect.stringContaining("Parent slice"),
|
||||
expect.stringContaining("Nested cancelled cleanup"),
|
||||
expect.stringContaining("Next root"),
|
||||
]);
|
||||
expect(rows.map((row) => row.getAttribute("data-step"))).toEqual(["1", "2", "2.1", "3"]);
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("hides the sub-issue progress summary unless it is enabled and populated", async () => {
|
||||
const { root } = renderWithQueryClient(
|
||||
<IssuesList
|
||||
issues={[createIssue()]}
|
||||
agents={[]}
|
||||
projects={[]}
|
||||
viewStateKey="paperclip:test-issues"
|
||||
onUpdateIssue={() => undefined}
|
||||
/>,
|
||||
container,
|
||||
);
|
||||
|
||||
await waitForAssertion(() => {
|
||||
expect(container.querySelector('[role="progressbar"]')).toBeNull();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows waiting on blockers when every remaining sub-issue is blocked", async () => {
|
||||
const { root } = renderWithQueryClient(
|
||||
<IssuesList
|
||||
issues={[
|
||||
createIssue({
|
||||
id: "issue-done",
|
||||
identifier: "PAP-1",
|
||||
title: "Completed setup",
|
||||
status: "done",
|
||||
createdAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
}),
|
||||
createIssue({
|
||||
id: "issue-blocked",
|
||||
identifier: "PAP-2",
|
||||
title: "Blocked follow-up",
|
||||
status: "blocked",
|
||||
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
||||
}),
|
||||
]}
|
||||
agents={[]}
|
||||
projects={[]}
|
||||
viewStateKey="paperclip:test-issues"
|
||||
showProgressSummary
|
||||
onUpdateIssue={() => undefined}
|
||||
/>,
|
||||
container,
|
||||
);
|
||||
|
||||
await waitForAssertion(() => {
|
||||
expect(container.textContent).toContain("Waiting on blockers");
|
||||
const link = container.querySelector('a[href="/issues/PAP-2"]');
|
||||
expect(link?.textContent).toContain("Blocked follow-up");
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("debounces search updates so typing does not notify the page on every keystroke", async () => {
|
||||
vi.useFakeTimers();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue