Add accepted-plan decomposition exact-once guards and UI state (#6831)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies, so planning approvals and child-issue fan-out are part of the core control-plane loop. > - Accepted plans are supposed to be a safe bridge from planning into execution, especially when agents wake from review decisions and reuse isolated workspaces. > - The duplicate-subtask incident showed that an accepted plan revision could be interpreted more than once across overlapping runs, which broke the single-source-of-truth model for issue decomposition. > - Fixing that required tightening the backend contract first: accepted-plan decomposition needs an exact-once fingerprint, durable claim state, and retry-safe child creation. > - Once that backend behavior existed, the board still needed visibility into what happened, so the issue detail view needed a dedicated decomposition section instead of forcing operators to reconstruct child creation from raw activity. > - This pull request adds the exact-once decomposition primitive, hardens wake routing and regressions around the incident, and surfaces decomposition state in the UI so future incidents are both prevented and easier to inspect. ## What Changed - Added accepted-plan decomposition semantics to `doc/execution-semantics.md`, including the exact-once fingerprint, durable claim/result expectations, and retry/resume behavior. - Added persistent accepted-plan decomposition claims in the backend, including schema, shared types/validators, service logic, and issue routes for creating and listing decomposition state. - Hardened heartbeat routing so an accepted-plan continuation stays scoped to the relevant planning issue instead of opportunistically re-decomposing another accepted issue on the same assignee. - Added regression coverage for the original failure modes: concurrent same-parent retries, cross-issue accepted-plan isolation, and partial child recreation under the same fingerprint. - Added the `Plan decomposition` issue-detail section plus supporting API/query-key/activity formatting updates so operators can see revision status, owner, child counts, and the linked child issues directly in the UI. - Included the small follow-up UI fix so the decomposition section still renders when the issue work mode is no longer `planning`. ## Verification - `pnpm --filter @paperclipai/server typecheck` - `pnpm --filter @paperclipai/ui typecheck` - `pnpm --filter @paperclipai/db typecheck` - `pnpm exec vitest run server/src/__tests__/issues-service.test.ts` - `pnpm exec vitest run server/src/__tests__/issues-service.test.ts -t "lists persisted decompositions with child issue summaries"` - `pnpm exec vitest run server/src/__tests__/issues-service.test.ts -t "accepted plan decomposition" server/src/__tests__/heartbeat-accepted-plan-workspace-refresh.test.ts server/src/__tests__/heartbeat-context-summary.test.ts` - Manual UI path: create a planning issue without an isolated execution workspace, add a `plan` document, accept the `request_confirmation`, let Paperclip create child issues, then reopen the parent issue detail page and confirm the `Plan decomposition` section shows the accepted revision, status, idempotent-claim badge, and child links. - Separate follow-up bug noted during manual UI validation: accepting a plan on an issue whose run never records `workspace_finalize` is tracked in `PAPA-445` and is not part of this PR’s fix scope. ## Risks - This adds a new migration and a large Drizzle snapshot update; reviewers should confirm the schema shape and generated metadata match the intended decomposition table. - The exact-once claim changes sit on the accepted-plan fan-out path, so regressions there could block legitimate child creation or mis-handle retries if the claim state machine is wrong. - The new UI only appears when decomposition records exist; reviewers should use the manual verification path above rather than expecting existing issues on a stale local instance to show the section automatically. - `PAPA-445` remains an open follow-up for the `workspace_finalize` accept gate when a planning handoff never records finalize; that bug can interfere with reproducing the UI flow on isolated workspaces but does not change the correctness of the exact-once decomposition feature itself. > Checked `ROADMAP.md`: this PR is a bug fix / control-plane hardening change for accepted-plan decomposition, not a new uncoordinated roadmap feature. ## Model Used - OpenAI Codex via Paperclip `codex_local` (GPT-5-based coding agent; exact backend model ID/context window not exposed in the run context), with repository tool use, shell execution, and code-editing capabilities. <img width="806" height="1069" alt="Screenshot 2026-05-27 at 11 05 48 PM" src="https://github.com/user-attachments/assets/5b00b670-96cd-4470-b0a3-581743bcae28" /> ## 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:
Devin Foley
@@ -1,4 +1,5 @@
|
||||
import type {
|
||||
AcceptedPlanDecompositionSummary,
|
||||
AskUserQuestionsAnswer,
|
||||
Approval,
|
||||
CreateIssueTreeHold,
|
||||
@@ -201,6 +202,8 @@ export const issuesApi = {
|
||||
},
|
||||
listInteractions: (id: string) =>
|
||||
api.get<IssueThreadInteraction[]>(`/issues/${id}/interactions`),
|
||||
listAcceptedPlanDecompositions: (id: string) =>
|
||||
api.get<AcceptedPlanDecompositionSummary[]>(`/issues/${id}/accepted-plan-decompositions`),
|
||||
createInteraction: (id: string, data: Record<string, unknown>) =>
|
||||
api.post<IssueThreadInteraction>(`/issues/${id}/interactions`, data),
|
||||
acceptInteraction: (
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
import { useMemo } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { Agent, AcceptedPlanDecompositionSummary } from "@paperclipai/shared";
|
||||
import { ChevronRight, GitBranch, Repeat, CheckCircle2, Loader2 } from "lucide-react";
|
||||
import { Link } from "@/lib/router";
|
||||
import { issuesApi } from "../api/issues";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { cn, formatDateTime, relativeTime } from "../lib/utils";
|
||||
|
||||
interface IssuePlanDecompositionsSectionProps {
|
||||
issueId: string;
|
||||
issueIdentifier: string | null;
|
||||
agentMap?: Map<string, Agent>;
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: AcceptedPlanDecompositionSummary["status"] }) {
|
||||
if (status === "completed") {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-sm border border-emerald-500/50 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-900 dark:text-emerald-100">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
Completed
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-sm border border-amber-500/50 bg-amber-500/10 px-2 py-0.5 text-[11px] font-medium text-amber-900 dark:text-amber-100">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
In flight
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function IssuePlanDecompositionsSection({
|
||||
issueId,
|
||||
issueIdentifier,
|
||||
agentMap,
|
||||
}: IssuePlanDecompositionsSectionProps) {
|
||||
const { data: decompositions } = useQuery({
|
||||
queryKey: queryKeys.issues.acceptedPlanDecompositions(issueId),
|
||||
queryFn: () => issuesApi.listAcceptedPlanDecompositions(issueId),
|
||||
});
|
||||
|
||||
const items = useMemo(() => decompositions ?? [], [decompositions]);
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="text-sm font-medium text-muted-foreground">Plan decomposition</h3>
|
||||
<span className="text-[11px] text-muted-foreground/80">
|
||||
{items.length === 1 ? "1 accepted plan revision" : `${items.length} accepted plan revisions`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{items.map((record) => {
|
||||
const requested = record.requestedChildCount ?? 0;
|
||||
const created = record.childIssueIds?.length ?? 0;
|
||||
const ownerName = record.ownerAgentId
|
||||
? agentMap?.get(record.ownerAgentId)?.name ?? "agent"
|
||||
: null;
|
||||
const revisionLabel =
|
||||
record.acceptedPlanRevisionNumber != null
|
||||
? `revision ${record.acceptedPlanRevisionNumber}`
|
||||
: `revision ${record.acceptedPlanRevisionId.slice(0, 8)}`;
|
||||
const completedAt =
|
||||
record.completedAt && typeof record.completedAt === "string"
|
||||
? record.completedAt
|
||||
: record.completedAt instanceof Date
|
||||
? record.completedAt.toISOString()
|
||||
: null;
|
||||
const updatedAt =
|
||||
typeof record.updatedAt === "string"
|
||||
? record.updatedAt
|
||||
: record.updatedAt instanceof Date
|
||||
? record.updatedAt.toISOString()
|
||||
: null;
|
||||
const startedAt =
|
||||
typeof record.createdAt === "string"
|
||||
? record.createdAt
|
||||
: record.createdAt instanceof Date
|
||||
? record.createdAt.toISOString()
|
||||
: null;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={record.id}
|
||||
className="rounded-md border border-border bg-card/50 p-3 text-sm"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<StatusBadge status={record.status} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Plan {revisionLabel}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/70">·</span>
|
||||
<span className="inline-flex items-center gap-1 text-xs text-foreground">
|
||||
<GitBranch className="h-3 w-3 text-muted-foreground" />
|
||||
{created} of {requested} child {requested === 1 ? "issue" : "issues"} created
|
||||
</span>
|
||||
{record.status === "completed" && requested > 0 ? (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 rounded-sm border border-sky-500/40 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-medium text-sky-900 dark:text-sky-100"
|
||||
title="Repeat attempts with this fingerprint reuse this record instead of creating new children"
|
||||
>
|
||||
<Repeat className="h-3 w-3" />
|
||||
Idempotent claim
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-muted-foreground">
|
||||
{ownerName ? <span>Owner: {ownerName}</span> : null}
|
||||
{startedAt ? (
|
||||
<span title={formatDateTime(startedAt)}>Started {relativeTime(startedAt)}</span>
|
||||
) : null}
|
||||
{completedAt ? (
|
||||
<span title={formatDateTime(completedAt)}>Completed {relativeTime(completedAt)}</span>
|
||||
) : updatedAt ? (
|
||||
<span title={formatDateTime(updatedAt)}>Updated {relativeTime(updatedAt)}</span>
|
||||
) : null}
|
||||
{issueIdentifier ? (
|
||||
<Link
|
||||
to={`/issues/${issueIdentifier}#document-plan`}
|
||||
className="underline-offset-2 hover:underline"
|
||||
>
|
||||
Plan document
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{record.childIssues && record.childIssues.length > 0 ? (
|
||||
<ul className="mt-2 flex flex-wrap gap-1.5">
|
||||
{record.childIssues.map((child) => (
|
||||
<li key={child.id}>
|
||||
<Link
|
||||
to={`/issues/${child.identifier ?? child.id}`}
|
||||
className={cn(
|
||||
"inline-flex max-w-full items-center gap-1 rounded-sm border border-border bg-background px-2 py-0.5 text-[11px] text-foreground transition-colors hover:bg-accent/40",
|
||||
)}
|
||||
title={child.title}
|
||||
>
|
||||
<span className="font-medium">
|
||||
{child.identifier ?? child.id.slice(0, 8)}
|
||||
</span>
|
||||
<span className="truncate max-w-[24ch] text-muted-foreground">
|
||||
{child.title}
|
||||
</span>
|
||||
<ChevronRight className="h-3 w-3 text-muted-foreground" />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -48,6 +48,7 @@ const ACTIVITY_ROW_VERBS: Record<string, string> = {
|
||||
"issue.successful_run_handoff_required": "flagged missing next step on",
|
||||
"issue.successful_run_handoff_resolved": "recorded next step chosen on",
|
||||
"issue.successful_run_handoff_escalated": "escalated missing next step on",
|
||||
"issue.accepted_plan_decomposition_updated": "updated accepted-plan decomposition on",
|
||||
"issue.recovery_action_opened": "opened a recovery action on",
|
||||
"issue.recovery_action_resolved": "resolved the recovery action on",
|
||||
"issue.recovery_action_escalated": "escalated the recovery action on",
|
||||
@@ -110,6 +111,7 @@ const ISSUE_ACTIVITY_LABELS: Record<string, string> = {
|
||||
"issue.recovery_action_opened": "Opened a source-scoped recovery action",
|
||||
"issue.recovery_action_resolved": "Resolved the recovery action",
|
||||
"issue.recovery_action_escalated": "Escalated the recovery action",
|
||||
"issue.accepted_plan_decomposition_updated": "updated the accepted-plan decomposition",
|
||||
"agent.created": "created an agent",
|
||||
"agent.updated": "updated the agent",
|
||||
"agent.paused": "paused the agent",
|
||||
@@ -189,6 +191,34 @@ function formatChangedEntityLabel(
|
||||
return `${labels.length} ${plural}`;
|
||||
}
|
||||
|
||||
function readNumber(value: unknown): number | null {
|
||||
if (typeof value === "number" && Number.isFinite(value)) return value;
|
||||
return null;
|
||||
}
|
||||
|
||||
function readStringArrayLength(value: unknown): number {
|
||||
if (!Array.isArray(value)) return 0;
|
||||
return value.filter((entry) => typeof entry === "string" && entry.length > 0).length;
|
||||
}
|
||||
|
||||
function formatAcceptedPlanDecompositionDetail(details: ActivityDetails): string | null {
|
||||
if (!details) return null;
|
||||
const status = typeof details.status === "string" ? details.status : null;
|
||||
const requested = readNumber(details.requestedChildCount);
|
||||
const totalChildren = readStringArrayLength(details.childIssueIds);
|
||||
const newlyCreated = readStringArrayLength(details.newlyCreatedChildIssueIds);
|
||||
const reused = Math.max(0, totalChildren - newlyCreated);
|
||||
const parts: string[] = [];
|
||||
if (newlyCreated > 0) parts.push(`created ${newlyCreated} new`);
|
||||
if (reused > 0) parts.push(`reused ${reused} existing`);
|
||||
if (parts.length === 0 && requested !== null) parts.push(`${requested} requested`);
|
||||
const summary = parts.length > 0 ? parts.join(", ") : null;
|
||||
if (status === "completed" && summary) return `decomposition completed (${summary})`;
|
||||
if (status === "completed") return "decomposition completed";
|
||||
if (status === "in_flight" && summary) return `decomposition in flight (${summary})`;
|
||||
return summary;
|
||||
}
|
||||
|
||||
function formatIssueUpdatedVerb(details: ActivityDetails): string | null {
|
||||
if (!details) return null;
|
||||
const previous = asRecord(details._previous) ?? {};
|
||||
@@ -332,6 +362,11 @@ export function formatIssueActivityAction(
|
||||
});
|
||||
if (structuredChange) return structuredChange;
|
||||
|
||||
if (action === "issue.accepted_plan_decomposition_updated") {
|
||||
const detail = formatAcceptedPlanDecompositionDetail(details);
|
||||
if (detail) return detail;
|
||||
}
|
||||
|
||||
if (action.startsWith("issue.monitor_") && details) {
|
||||
const serviceName = typeof details.serviceName === "string" && details.serviceName.trim()
|
||||
? details.serviceName.trim()
|
||||
|
||||
@@ -59,6 +59,8 @@ export const queryKeys = {
|
||||
detail: (id: string) => ["issues", "detail", id] as const,
|
||||
comments: (issueId: string) => ["issues", "comments", issueId] as const,
|
||||
interactions: (issueId: string) => ["issues", "interactions", issueId] as const,
|
||||
acceptedPlanDecompositions: (issueId: string) =>
|
||||
["issues", "accepted-plan-decompositions", issueId] as const,
|
||||
feedbackVotes: (issueId: string) => ["issues", "feedback-votes", issueId] as const,
|
||||
costSummary: (issueId: string, options: { excludeRoot?: boolean } = {}) =>
|
||||
options.excludeRoot
|
||||
|
||||
@@ -205,6 +205,8 @@ export function InstanceExperimentalSettings() {
|
||||
|
||||
const enableEnvironments = experimentalQuery.data?.enableEnvironments === true;
|
||||
const enableIsolatedWorkspaces = experimentalQuery.data?.enableIsolatedWorkspaces === true;
|
||||
const enableIssuePlanDecompositions =
|
||||
experimentalQuery.data?.enableIssuePlanDecompositions === true;
|
||||
const enableCloudSync = experimentalQuery.data?.enableCloudSync === true;
|
||||
const autoRestartDevServerWhenIdle = experimentalQuery.data?.autoRestartDevServerWhenIdle === true;
|
||||
const enableIssueGraphLivenessAutoRecovery =
|
||||
@@ -299,6 +301,28 @@ export function InstanceExperimentalSettings() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border border-border bg-card p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<h2 className="text-sm font-semibold">Issue Plan Decomposition Panel</h2>
|
||||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||
Show accepted-plan decomposition history on issue detail pages. Intended for debugging and validating
|
||||
subtask creation behavior while the presentation is still being refined.
|
||||
</p>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
checked={enableIssuePlanDecompositions}
|
||||
onCheckedChange={() =>
|
||||
toggleMutation.mutate({
|
||||
enableIssuePlanDecompositions: !enableIssuePlanDecompositions,
|
||||
})
|
||||
}
|
||||
disabled={toggleMutation.isPending}
|
||||
aria-label="Toggle issue plan decomposition panel experimental setting"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border border-border bg-card p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-1.5">
|
||||
|
||||
@@ -10,6 +10,7 @@ import { canBoardResolveRecoveryAction, IssueDetail } from "./IssueDetail";
|
||||
const mockIssuesApi = vi.hoisted(() => ({
|
||||
get: vi.fn(),
|
||||
list: vi.fn(),
|
||||
listAcceptedPlanDecompositions: vi.fn(),
|
||||
listComments: vi.fn(),
|
||||
listAttachments: vi.fn(),
|
||||
listFeedbackVotes: vi.fn(),
|
||||
@@ -59,6 +60,7 @@ const mockProjectsApi = vi.hoisted(() => ({
|
||||
|
||||
const mockInstanceSettingsApi = vi.hoisted(() => ({
|
||||
getGeneral: vi.fn(),
|
||||
getExperimental: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockNavigate = vi.hoisted(() => vi.fn());
|
||||
@@ -823,6 +825,10 @@ describe("IssueDetail", () => {
|
||||
keyboardShortcuts: false,
|
||||
feedbackDataSharingPreference: "prompt",
|
||||
});
|
||||
mockInstanceSettingsApi.getExperimental.mockResolvedValue({
|
||||
enableIssuePlanDecompositions: false,
|
||||
});
|
||||
mockIssuesApi.listAcceptedPlanDecompositions.mockResolvedValue([]);
|
||||
mockIssuesListRender.mockClear();
|
||||
mockIssueChatThreadRender.mockClear();
|
||||
});
|
||||
@@ -858,6 +864,79 @@ describe("IssueDetail", () => {
|
||||
expect(consoleErrorSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("hides the plan decomposition panel by default", async () => {
|
||||
mockIssuesApi.get.mockResolvedValue(createIssue());
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
expect(container.textContent).not.toContain("Plan decomposition");
|
||||
expect(mockIssuesApi.listAcceptedPlanDecompositions).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shows the plan decomposition panel when the experimental flag is enabled", async () => {
|
||||
mockIssuesApi.get.mockResolvedValue(createIssue());
|
||||
mockInstanceSettingsApi.getExperimental.mockResolvedValue({
|
||||
enableIssuePlanDecompositions: true,
|
||||
});
|
||||
mockIssuesApi.listAcceptedPlanDecompositions.mockResolvedValue([
|
||||
{
|
||||
id: "decomp-1",
|
||||
companyId: "company-1",
|
||||
sourceIssueId: "issue-1",
|
||||
acceptedPlanRevisionId: "plan-rev-1",
|
||||
acceptedPlanRevisionNumber: 2,
|
||||
acceptedInteractionId: null,
|
||||
status: "completed",
|
||||
requestFingerprint: "fingerprint-1",
|
||||
requestedChildCount: 2,
|
||||
childIssueIds: ["issue-2", "issue-3"],
|
||||
childIssues: [
|
||||
{
|
||||
id: "issue-2",
|
||||
identifier: "PAP-2",
|
||||
title: "First child issue",
|
||||
status: "todo",
|
||||
priority: "medium",
|
||||
assigneeAgentId: null,
|
||||
assigneeUserId: null,
|
||||
},
|
||||
],
|
||||
ownerAgentId: null,
|
||||
ownerUserId: null,
|
||||
ownerRunId: null,
|
||||
completedAt: "2026-05-28T06:00:00.000Z",
|
||||
createdAt: "2026-05-28T05:50:00.000Z",
|
||||
updatedAt: "2026-05-28T06:00:00.000Z",
|
||||
},
|
||||
]);
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
expect(container.textContent).toContain("Plan decomposition");
|
||||
expect(container.textContent).toContain("Plan revision 2");
|
||||
expect(container.textContent).toContain("2 of 2 child issues created");
|
||||
expect(container.textContent).toContain("First child issue");
|
||||
expect(mockIssuesApi.listAcceptedPlanDecompositions).toHaveBeenCalledWith("issue-1");
|
||||
});
|
||||
|
||||
it("renders sibling previous and next navigation at the chat footer", async () => {
|
||||
const issue = createIssue({
|
||||
id: "issue-2",
|
||||
|
||||
@@ -66,6 +66,7 @@ import { InlineEditor } from "../components/InlineEditor";
|
||||
import { IssueChatThread, type IssueChatComposerHandle } from "../components/IssueChatThread";
|
||||
import { IssueContinuationHandoff } from "../components/IssueContinuationHandoff";
|
||||
import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
|
||||
import { IssuePlanDecompositionsSection } from "../components/IssuePlanDecompositionsSection";
|
||||
import { IssueSiblingNavigation } from "../components/IssueSiblingNavigation";
|
||||
import { IssuesList } from "../components/IssuesList";
|
||||
import { AgentIcon } from "../components/AgentIconPicker";
|
||||
@@ -1440,8 +1441,16 @@ export function IssueDetail() {
|
||||
enabled: !!issueId,
|
||||
retry: false,
|
||||
});
|
||||
const { data: instanceExperimentalSettings } = useQuery({
|
||||
queryKey: queryKeys.instance.experimentalSettings,
|
||||
queryFn: () => instanceSettingsApi.getExperimental(),
|
||||
enabled: !!issueId,
|
||||
retry: false,
|
||||
});
|
||||
const keyboardShortcutsEnabled = instanceGeneralSettings?.keyboardShortcuts === true;
|
||||
const feedbackDataSharingPreference = instanceGeneralSettings?.feedbackDataSharingPreference ?? "prompt";
|
||||
const showPlanDecompositionsSection =
|
||||
instanceExperimentalSettings?.enableIssuePlanDecompositions === true;
|
||||
const { orderedProjects } = useProjectOrder({
|
||||
projects: projects ?? [],
|
||||
companyId: selectedCompanyId,
|
||||
@@ -3713,6 +3722,14 @@ export function IssueDetail() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showPlanDecompositionsSection ? (
|
||||
<IssuePlanDecompositionsSection
|
||||
issueId={issue.id}
|
||||
issueIdentifier={issue.identifier}
|
||||
agentMap={agentMap}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<IssueDocumentsSection
|
||||
issue={issue}
|
||||
canDeleteDocuments={Boolean(session?.user?.id)}
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
import { useState } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { AcceptedPlanDecompositionSummary } from "@paperclipai/shared";
|
||||
import { IssuePlanDecompositionsSection } from "@/components/IssuePlanDecompositionsSection";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import { storybookAgentMap } from "../fixtures/paperclipData";
|
||||
|
||||
const issueId = "issue-plan-decomposition-story";
|
||||
const issueIdentifier = "PAP-6831";
|
||||
|
||||
function buildDecomposition(
|
||||
overrides: Partial<AcceptedPlanDecompositionSummary>,
|
||||
): AcceptedPlanDecompositionSummary {
|
||||
return {
|
||||
id: "decomposition-story-1",
|
||||
companyId: "company-storybook",
|
||||
sourceIssueId: issueId,
|
||||
acceptedPlanRevisionId: "revision-story-1",
|
||||
acceptedInteractionId: "interaction-story-1",
|
||||
status: "completed",
|
||||
requestFingerprint: "fingerprint-story-1",
|
||||
requestedChildCount: 2,
|
||||
childIssueIds: ["issue-child-1", "issue-child-2"],
|
||||
ownerAgentId: "agent-codex",
|
||||
ownerUserId: null,
|
||||
ownerRunId: "run-story-1",
|
||||
completedAt: "2026-05-28T06:22:00.000Z",
|
||||
createdAt: "2026-05-28T06:18:00.000Z",
|
||||
updatedAt: "2026-05-28T06:22:00.000Z",
|
||||
acceptedPlanRevisionNumber: 7,
|
||||
childIssues: [
|
||||
{
|
||||
id: "issue-child-1",
|
||||
identifier: "PAP-6840",
|
||||
title: "Harden accepted-plan wake routing",
|
||||
status: "done",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-codex",
|
||||
assigneeUserId: null,
|
||||
},
|
||||
{
|
||||
id: "issue-child-2",
|
||||
identifier: "PAP-6841",
|
||||
title: "Add decomposition regression coverage",
|
||||
status: "in_progress",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-qa",
|
||||
assigneeUserId: null,
|
||||
},
|
||||
],
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function HydratedSection({
|
||||
decompositions,
|
||||
}: {
|
||||
decompositions: AcceptedPlanDecompositionSummary[];
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [ready] = useState(() => {
|
||||
queryClient.setQueryData(queryKeys.issues.acceptedPlanDecompositions(issueId), decompositions);
|
||||
return true;
|
||||
});
|
||||
|
||||
if (!ready) return null;
|
||||
|
||||
return (
|
||||
<div className="paperclip-story">
|
||||
<main className="paperclip-story__inner">
|
||||
<div className="mx-auto max-w-3xl rounded-2xl border border-border bg-background/95 p-6 shadow-sm">
|
||||
<IssuePlanDecompositionsSection
|
||||
issueId={issueId}
|
||||
issueIdentifier={issueIdentifier}
|
||||
agentMap={storybookAgentMap}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: "Issue Detail/Plan Decompositions",
|
||||
component: HydratedSection,
|
||||
args: {
|
||||
decompositions: [],
|
||||
},
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
} satisfies Meta<typeof HydratedSection>;
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const InFlight: Story = {
|
||||
args: {
|
||||
decompositions: [
|
||||
buildDecomposition({
|
||||
status: "in_flight",
|
||||
completedAt: null,
|
||||
updatedAt: "2026-05-28T06:20:00.000Z",
|
||||
childIssueIds: ["issue-child-1"],
|
||||
childIssues: [
|
||||
{
|
||||
id: "issue-child-1",
|
||||
identifier: "PAP-6840",
|
||||
title: "Harden accepted-plan wake routing",
|
||||
status: "done",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-codex",
|
||||
assigneeUserId: null,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const Completed: Story = {
|
||||
args: {
|
||||
decompositions: [
|
||||
buildDecomposition({}),
|
||||
],
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user