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
dark](doc/assets/pap-2189/desktop-1440x900-dark.png)
- Desktop light: ![Desktop
light](doc/assets/pap-2189/desktop-1440x900-light.png)
- Mobile dark: ![Mobile
dark](doc/assets/pap-2189/mobile-390x844-dark.png)
- Mobile light: ![Mobile
light](doc/assets/pap-2189/mobile-390x844-light.png)
- 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>

ui/src/lib/issue-detail-subissues.test.ts

@@ -1,7 +1,28 @@
 // @vitest-environment node
 
 import { describe, expect, it } from "vitest";
-import { shouldRenderRichSubIssuesSection } from "./issue-detail-subissues";
+import type { Issue } from "@paperclipai/shared";
+import {
+  buildSubIssueProgressSummary,
+  shouldRenderRichSubIssuesSection,
+  shouldRenderSubIssueProgressSummary,
+} from "./issue-detail-subissues";
+
+function issue(
+  id: string,
+  status: Issue["status"],
+  createdAt: string,
+  blockedByIds: string[] = [],
+): Issue {
+  return {
+    id,
+    identifier: `PAP-${id}`,
+    title: `Issue ${id}`,
+    status,
+    createdAt: new Date(createdAt),
+    blockedBy: blockedByIds.map((blockerId) => ({ id: blockerId })),
+  } as Issue;
+}
 
 describe("shouldRenderRichSubIssuesSection", () => {
   it("shows the rich sub-issues section while child issues are loading", () => {
@@ -16,3 +37,43 @@ describe("shouldRenderRichSubIssuesSection", () => {
     expect(shouldRenderRichSubIssuesSection(false, 0)).toBe(false);
   });
 });
+
+describe("shouldRenderSubIssueProgressSummary", () => {
+  it("requires both the opt-in flag and child issues", () => {
+    expect(shouldRenderSubIssueProgressSummary(true, 1)).toBe(true);
+    expect(shouldRenderSubIssueProgressSummary(false, 1)).toBe(false);
+    expect(shouldRenderSubIssueProgressSummary(true, 0)).toBe(false);
+  });
+});
+
+describe("buildSubIssueProgressSummary", () => {
+  it("counts statuses and picks the first actionable issue in workflow order", () => {
+    const summary = buildSubIssueProgressSummary([
+      issue("3", "todo", "2026-04-03T00:00:00.000Z", ["2"]),
+      issue("1", "done", "2026-04-01T00:00:00.000Z"),
+      issue("2", "in_progress", "2026-04-02T00:00:00.000Z", ["1"]),
+      issue("4", "blocked", "2026-04-04T00:00:00.000Z"),
+      issue("5", "cancelled", "2026-04-05T00:00:00.000Z"),
+    ]);
+
+    expect(summary.totalCount).toBe(4);
+    expect(summary.doneCount).toBe(1);
+    expect(summary.inProgressCount).toBe(1);
+    expect(summary.blockedCount).toBe(1);
+    expect(summary.countsByStatus.todo).toBe(1);
+    expect(summary.countsByStatus.cancelled).toBeUndefined();
+    expect(summary.target?.kind).toBe("next");
+    expect(summary.target?.issue.id).toBe("2");
+  });
+
+  it("waits on the first blocked issue when no remaining work is actionable", () => {
+    const summary = buildSubIssueProgressSummary([
+      issue("1", "done", "2026-04-01T00:00:00.000Z"),
+      issue("2", "blocked", "2026-04-02T00:00:00.000Z"),
+      issue("3", "cancelled", "2026-04-03T00:00:00.000Z"),
+    ]);
+
+    expect(summary.target?.kind).toBe("blocked");
+    expect(summary.target?.issue.id).toBe("2");
+  });
+});