PAPA-422: surface accepted-plan decomposition state in operator UI

Add a GET endpoint and corresponding UI panel that surfaces
issue_plan_decomposition records so operators can see when an
accepted plan revision has been decomposed and which child ids
were created, without doing raw DB forensics.

- Add GET /api/issues/:id/accepted-plan-decompositions
- Service helper listAcceptedPlanDecompositions enriches each
  record with the plan revision number and per-child summaries
- New IssuePlanDecompositionsSection renders on planning issues
  with status, child counts, child issue links, idempotent-reuse
  hint, and a deep link to the plan document
- Activity row labels for issue.accepted_plan_decomposition_updated
  describe whether children were created, reused, or both
- Regression test covering listAcceptedPlanDecompositions shape

Co-Authored-By: Paperclip <noreply@paperclip.ing>

packages/shared/src/index.ts

@@ -442,6 +442,8 @@ export type {
   AcceptedPlanDecompositionChild,
   AcceptedPlanDecomposition,
   AcceptedPlanDecompositionResult,
+  AcceptedPlanDecompositionChildIssue,
+  AcceptedPlanDecompositionSummary,
   IssueThreadInteractionBase,
   SuggestTasksInteraction,
   AskUserQuestionsInteraction,

packages/shared/src/types/index.ts

@@ -211,6 +211,8 @@ export type {
   AcceptedPlanDecompositionChild,
   AcceptedPlanDecomposition,
   AcceptedPlanDecompositionResult,
+  AcceptedPlanDecompositionChildIssue,
+  AcceptedPlanDecompositionSummary,
   IssueThreadInteractionBase,
   SuggestTasksInteraction,
   AskUserQuestionsInteraction,

packages/shared/src/types/issue.ts

@@ -179,6 +179,21 @@ export interface AcceptedPlanDecompositionResult {
   newlyCreatedChildIssueIds: string[];
 }
 
+export interface AcceptedPlanDecompositionChildIssue {
+  id: string;
+  identifier: string | null;
+  title: string;
+  status: IssueStatus;
+  priority: IssuePriority;
+  assigneeAgentId: string | null;
+  assigneeUserId: string | null;
+}
+
+export interface AcceptedPlanDecompositionSummary extends AcceptedPlanDecomposition {
+  acceptedPlanRevisionNumber: number | null;
+  childIssues: AcceptedPlanDecompositionChildIssue[];
+}
+
 export interface IssueRelationIssueSummary {
   id: string;
   identifier: string | null;

server/src/__tests__/issues-service.test.ts

@@ -3475,4 +3475,41 @@ describeEmbeddedPostgres("accepted plan decomposition", () => {
       status: 409,
     });
   });
+
+  it("lists persisted decompositions with child issue summaries", async () => {
+    const { sourceIssueId, acceptedPlanRevisionId, assigneeAgentId } = await seedAcceptedPlanIssue();
+
+    const initial = await svc.listAcceptedPlanDecompositions(sourceIssueId);
+    expect(initial).toEqual([]);
+
+    const result = await svc.decomposeAcceptedPlan(sourceIssueId, {
+      acceptedPlanRevisionId,
+      children: [
+        {
+          title: "Surface decomposition status in operator UI",
+          status: "todo",
+          workMode: "standard",
+          priority: "medium",
+        },
+        {
+          title: "Add regression coverage",
+          status: "todo",
+          workMode: "standard",
+          priority: "medium",
+        },
+      ],
+      actorAgentId: assigneeAgentId,
+    });
+
+    const decompositions = await svc.listAcceptedPlanDecompositions(sourceIssueId);
+    expect(decompositions).toHaveLength(1);
+    const [record] = decompositions;
+    expect(record?.status).toBe("completed");
+    expect(record?.acceptedPlanRevisionId).toBe(acceptedPlanRevisionId);
+    expect(record?.acceptedPlanRevisionNumber).toBeTypeOf("number");
+    expect(record?.childIssues.map((child) => child.id).sort()).toEqual(
+      [...result.childIssueIds].sort(),
+    );
+    expect(record?.childIssues.every((child) => typeof child.title === "string")).toBe(true);
+  });
 });

server/src/routes/issues.ts

@@ -3333,6 +3333,18 @@ export function issueRoutes(
     res.status(201).json(issue);
   });
 
+  router.get("/issues/:id/accepted-plan-decompositions", async (req, res) => {
+    const sourceIssueId = req.params.id as string;
+    const sourceIssue = await svc.getById(sourceIssueId);
+    if (!sourceIssue) {
+      res.status(404).json({ error: "Issue not found" });
+      return;
+    }
+    assertCompanyAccess(req, sourceIssue.companyId);
+    const decompositions = await svc.listAcceptedPlanDecompositions(sourceIssue.id);
+    res.json(decompositions);
+  });
+
   router.post("/issues/:id/accepted-plan-decompositions", validate(createAcceptedPlanDecompositionSchema), async (req, res) => {
     const sourceIssueId = req.params.id as string;
     const sourceIssue = await svc.getById(sourceIssueId);

server/src/services/issues.ts

@@ -4376,6 +4376,67 @@ export function issueService(db: Db) {
       };
     },
 
+    listAcceptedPlanDecompositions: async (sourceIssueId: string) => {
+      const sourceIssue = await db
+        .select({ id: issues.id, companyId: issues.companyId })
+        .from(issues)
+        .where(eq(issues.id, sourceIssueId))
+        .then((rows) => rows[0] ?? null);
+      if (!sourceIssue) return [];
+
+      const rows = await db
+        .select({
+          decomposition: issuePlanDecompositions,
+          revisionNumber: documentRevisions.revisionNumber,
+        })
+        .from(issuePlanDecompositions)
+        .leftJoin(
+          documentRevisions,
+          eq(documentRevisions.id, issuePlanDecompositions.acceptedPlanRevisionId),
+        )
+        .where(and(
+          eq(issuePlanDecompositions.companyId, sourceIssue.companyId),
+          eq(issuePlanDecompositions.sourceIssueId, sourceIssue.id),
+        ))
+        .orderBy(desc(issuePlanDecompositions.createdAt));
+
+      if (rows.length === 0) return [];
+
+      const allChildIds = new Set<string>();
+      for (const row of rows) {
+        for (const childId of normalizeIssuePlanDecompositionChildIds(row.decomposition.childIssueIds)) {
+          allChildIds.add(childId);
+        }
+      }
+
+      const childIssueRows = allChildIds.size > 0
+        ? await db
+            .select({
+              id: issues.id,
+              identifier: issues.identifier,
+              title: issues.title,
+              status: issues.status,
+              priority: issues.priority,
+              assigneeAgentId: issues.assigneeAgentId,
+              assigneeUserId: issues.assigneeUserId,
+            })
+            .from(issues)
+            .where(and(eq(issues.companyId, sourceIssue.companyId), inArray(issues.id, Array.from(allChildIds))))
+        : [];
+      const childIssueMap = new Map(childIssueRows.map((row) => [row.id, row]));
+
+      return rows.map((row) => {
+        const childIds = normalizeIssuePlanDecompositionChildIds(row.decomposition.childIssueIds);
+        return {
+          ...row.decomposition,
+          acceptedPlanRevisionNumber: row.revisionNumber ?? null,
+          childIssues: childIds
+            .map((childId) => childIssueMap.get(childId) ?? null)
+            .filter((entry): entry is NonNullable<typeof entry> => entry !== null),
+        };
+      });
+    },
+
     create: async (
       companyId: string,
       data: IssueCreateInput,

ui/src/api/issues.ts

@@ -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: (

ui/src/components/IssuePlanDecompositionsSection.tsx

@@ -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.childIssues?.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>
+  );
+}

ui/src/lib/activity-format.ts

@@ -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()

ui/src/lib/queryKeys.ts

@@ -54,6 +54,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

ui/src/pages/IssueDetail.tsx

@@ -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";
@@ -3713,6 +3714,14 @@ export function IssueDetail() {
         </div>
       )}
 
+      {issue.workMode === "planning" ? (
+        <IssuePlanDecompositionsSection
+          issueId={issue.id}
+          issueIdentifier={issue.identifier}
+          agentMap={agentMap}
+        />
+      ) : null}
+
       <IssueDocumentsSection
         issue={issue}
         canDeleteDocuments={Boolean(session?.user?.id)}