Add ordered sub-issue navigation (#5938)

## Thinking Path

> - Paperclip orchestrates AI-agent companies through company-scoped
issues, comments, and execution context.
> - The issue detail page is the board surface where operators and
agents inspect a task in its parent/child workflow.
> - Ordered sub-issues need a low-friction way to move through work
without returning to the parent list after every issue.
> - Existing issue detail navigation only covered sibling transitions
and did not continue into a parent issue's first ordered child.
> - This pull request adds ordered previous/next navigation for issue
detail views and extends it to continue from a parent or last sibling
into the first direct child.
> - The benefit is a smoother review/execution path through hierarchical
work while preserving hidden issue filtering and dependency-aware
ordering.

## What Changed

- Added `IssueSiblingNavigation` and route-state handling so issue
detail footers can link to previous/next ordered issues.
- Extended sub-issue ordering helpers to build navigation from siblings
plus direct children, including root-parent and
last-sibling-to-first-child cases.
- Added page, component, and library tests for ordered sibling
navigation, child fallback navigation, hidden issues, and link
rendering.
- Fixed the quicklook blur/click race Greptile found by deferring close
until after portaled link clicks can complete, with a regression test.
- Polished the navigation landmark label so it remains accurate when the
next target is a direct child rather than a sibling.

## Verification

- `pnpm exec vitest run src/components/IssueLinkQuicklook.test.tsx
src/lib/issue-detail-subissues.test.ts
src/components/IssueSiblingNavigation.test.tsx
src/pages/IssueDetail.test.tsx --config vitest.config.ts` from `ui/` -
31 tests passed.
- `pnpm --filter @paperclipai/ui typecheck` - passed.
- `git diff --check` - passed.
- GitHub PR checks on latest head `34046be2` - passed: Greptile Review,
verify, e2e, Canary Dry Run, policy, Snyk, and serialized server shards.
- Screenshots: not captured in this heartbeat; this PR is a draft and
the changed states are covered by focused component/page tests.

## Risks

- Low risk; this is a UI navigation addition with no database or API
contract changes.
- The main behavioral risk is navigation ordering drift if
`workflowSort` expectations change later.
- The IssueDetail navigation now waits for child issue loading, which
avoids stale child fallback links but can delay footer navigation
briefly while data loads.

> 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 with repository tool use and shell
execution.

## 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
- [ ] 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

@@ -3,6 +3,7 @@
 import { describe, expect, it } from "vitest";
 import type { Issue } from "@paperclipai/shared";
 import {
+  buildIssueSiblingNavigation,
   buildSubIssueProgressSummary,
   shouldRenderRichSubIssuesSection,
   shouldRenderSubIssueProgressSummary,
@@ -24,6 +25,21 @@ function issue(
   } as Issue;
 }
 
+function siblingIssue(
+  id: string,
+  createdAt: string,
+  blockedByIds: string[] = [],
+  overrides: Partial<Issue> = {},
+): Issue {
+  return {
+    ...issue(id, "todo", createdAt, blockedByIds),
+    parentId: "parent-1",
+    title: `Sibling ${id}`,
+    hiddenAt: null,
+    ...overrides,
+  } as Issue;
+}
+
 describe("shouldRenderRichSubIssuesSection", () => {
   it("shows the rich sub-issues section while child issues are loading", () => {
     expect(shouldRenderRichSubIssuesSection(true, 0)).toBe(true);
@@ -78,3 +94,112 @@ describe("buildSubIssueProgressSummary", () => {
     expect(summary.target?.issue.id).toBe("2");
   });
 });
+
+describe("buildIssueSiblingNavigation", () => {
+  it("orders linear blocker chains before selecting previous and next siblings", () => {
+    const current = siblingIssue("2", "2026-04-02T00:00:00.000Z", ["1"]);
+    const navigation = buildIssueSiblingNavigation(current, [
+      siblingIssue("3", "2026-04-03T00:00:00.000Z", ["2"]),
+      siblingIssue("1", "2026-04-01T00:00:00.000Z"),
+      current,
+    ]);
+
+    expect(navigation?.previous?.id).toBe("1");
+    expect(navigation?.next?.id).toBe("3");
+    expect(navigation?.currentIndex).toBe(1);
+    expect(navigation?.totalCount).toBe(3);
+  });
+
+  it("degrades branch and merge graphs to stable workflow order", () => {
+    const current = siblingIssue("3", "2026-04-03T00:00:00.000Z", ["1"]);
+    const navigation = buildIssueSiblingNavigation(current, [
+      siblingIssue("4", "2026-04-04T00:00:00.000Z", ["2", "3"]),
+      siblingIssue("2", "2026-04-02T00:00:00.000Z", ["1"]),
+      current,
+      siblingIssue("1", "2026-04-01T00:00:00.000Z"),
+    ]);
+
+    expect(navigation?.previous?.id).toBe("2");
+    expect(navigation?.next?.id).toBe("4");
+  });
+
+  it("falls back to created time and id when siblings have no direct blocker hints", () => {
+    const current = siblingIssue("2", "2026-04-01T00:00:00.000Z");
+    const navigation = buildIssueSiblingNavigation(current, [
+      siblingIssue("3", "2026-04-02T00:00:00.000Z"),
+      siblingIssue("1", "2026-04-01T00:00:00.000Z"),
+      current,
+    ]);
+
+    expect(navigation?.previous?.id).toBe("1");
+    expect(navigation?.next?.id).toBe("3");
+  });
+
+  it("hides navigation for root issues without children or hidden current issues", () => {
+    expect(buildIssueSiblingNavigation(siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { parentId: null }), []))
+      .toBeNull();
+    expect(buildIssueSiblingNavigation(siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { parentId: null }), [
+      siblingIssue("2", "2026-04-02T00:00:00.000Z", [], { parentId: null }),
+    ])).toBeNull();
+    expect(buildIssueSiblingNavigation(siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { hiddenAt: new Date() }), []))
+      .toBeNull();
+  });
+
+  it("hides navigation when the current issue is the only visible child", () => {
+    const current = siblingIssue("1", "2026-04-01T00:00:00.000Z");
+    const navigation = buildIssueSiblingNavigation(current, [
+      current,
+      siblingIssue("2", "2026-04-02T00:00:00.000Z", [], { hiddenAt: new Date() }),
+    ]);
+
+    expect(navigation).toBeNull();
+  });
+
+  it("returns only next for the first sibling and only previous for the last sibling", () => {
+    const first = siblingIssue("1", "2026-04-01T00:00:00.000Z");
+    const last = siblingIssue("3", "2026-04-03T00:00:00.000Z");
+    const siblings = [
+      siblingIssue("2", "2026-04-02T00:00:00.000Z"),
+      last,
+      first,
+    ];
+
+    expect(buildIssueSiblingNavigation(first, siblings)).toMatchObject({
+      previous: null,
+      next: { id: "2" },
+    });
+    expect(buildIssueSiblingNavigation(last, siblings)).toMatchObject({
+      previous: { id: "2" },
+      next: null,
+    });
+  });
+
+  it("uses the first direct child as next when a root issue has no sibling next", () => {
+    const current = siblingIssue("1", "2026-04-01T00:00:00.000Z", [], { parentId: null });
+    const navigation = buildIssueSiblingNavigation(current, [], [
+      siblingIssue("3", "2026-04-03T00:00:00.000Z", ["2"], { parentId: "1" }),
+      siblingIssue("2", "2026-04-02T00:00:00.000Z", [], { parentId: "1" }),
+    ]);
+
+    expect(navigation).toMatchObject({
+      previous: null,
+      next: { id: "2" },
+    });
+  });
+
+  it("uses the first direct child as next when the current sibling is last", () => {
+    const current = siblingIssue("2", "2026-04-02T00:00:00.000Z");
+    const navigation = buildIssueSiblingNavigation(current, [
+      siblingIssue("1", "2026-04-01T00:00:00.000Z"),
+      current,
+    ], [
+      siblingIssue("4", "2026-04-04T00:00:00.000Z", ["3"], { parentId: "2" }),
+      siblingIssue("3", "2026-04-03T00:00:00.000Z", [], { parentId: "2" }),
+    ]);
+
+    expect(navigation).toMatchObject({
+      previous: { id: "1" },
+      next: { id: "3" },
+    });
+  });
+});

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

@@ -17,6 +17,13 @@ export type SubIssueProgressSummary = {
   target: SubIssueProgressTarget | null;
 };
 
+export type IssueSiblingNavigation = {
+  previous: Issue | null;
+  next: Issue | null;
+  currentIndex: number;
+  totalCount: number;
+};
+
 export function shouldRenderRichSubIssuesSection(childIssuesLoading: boolean, childIssueCount: number): boolean {
   return childIssuesLoading || childIssueCount > 0;
 }
@@ -56,6 +63,57 @@ export function buildSubIssueProgressSummary(issues: Issue[]): SubIssueProgressS
   };
 }
 
+export function buildIssueSiblingNavigation(
+  currentIssue: Issue,
+  siblingIssues: Issue[],
+  childIssues: Issue[] = [],
+): IssueSiblingNavigation | null {
+  if (currentIssue.hiddenAt) return null;
+
+  const byId = new Map<string, Issue>();
+  if (currentIssue.parentId) {
+    for (const issue of siblingIssues) {
+      if (issue.parentId !== currentIssue.parentId || issue.hiddenAt) continue;
+      byId.set(
+        issue.id,
+        issue.id === currentIssue.id
+          ? { ...issue, ...currentIssue, blockedBy: currentIssue.blockedBy ?? issue.blockedBy }
+          : issue,
+      );
+    }
+    if (!byId.has(currentIssue.id)) byId.set(currentIssue.id, currentIssue);
+  }
+
+  const ordered = workflowSort(Array.from(byId.values()));
+  const currentIndex = ordered.findIndex((issue) => issue.id === currentIssue.id);
+  const directChildren = workflowSort(
+    childIssues.filter((issue) => issue.parentId === currentIssue.id && !issue.hiddenAt),
+  );
+  const firstChild = directChildren[0] ?? null;
+
+  if (currentIndex < 0) {
+    return firstChild
+      ? {
+          previous: null,
+          next: firstChild,
+          currentIndex: 0,
+          totalCount: directChildren.length + 1,
+        }
+      : null;
+  }
+
+  const previous = currentIndex > 0 ? ordered[currentIndex - 1] : null;
+  const next = currentIndex < ordered.length - 1 ? ordered[currentIndex + 1] : firstChild;
+  if (!previous && !next) return null;
+
+  return {
+    previous,
+    next,
+    currentIndex,
+    totalCount: ordered.length,
+  };
+}
+
 function isActionableStatus(status: IssueStatus): boolean {
   return status !== "done" && status !== "cancelled" && status !== "blocked";
 }

ui/src/lib/router.tsx

@@ -46,10 +46,19 @@ export * from "react-router-dom";
 type CompanyLinkProps = React.ComponentProps<typeof RouterDom.Link> & {
   disableIssueQuicklook?: boolean;
   issuePrefetch?: Issue | null;
+  issueQuicklookSide?: React.ComponentProps<typeof IssueLinkQuicklook>["issueQuicklookSide"];
+  issueQuicklookAlign?: React.ComponentProps<typeof IssueLinkQuicklook>["issueQuicklookAlign"];
 };
 
 export const Link = React.forwardRef<HTMLAnchorElement, CompanyLinkProps>(
-  function CompanyLink({ to, disableIssueQuicklook = false, issuePrefetch = null, ...props }, ref) {
+  function CompanyLink({
+    to,
+    disableIssueQuicklook = false,
+    issuePrefetch = null,
+    issueQuicklookSide,
+    issueQuicklookAlign,
+    ...props
+  }, ref) {
     const companyPrefix = useActiveCompanyPrefix();
     const resolvedTo = resolveTo(to, companyPrefix);
     const issuePathId = parseIssuePathIdFromPath(typeof resolvedTo === "string" ? resolvedTo : resolvedTo.pathname);
@@ -62,6 +71,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, CompanyLinkProps>(
           issuePathId={issuePathId}
           disableIssueQuicklook={disableIssueQuicklook}
           issuePrefetch={issuePrefetch}
+          issueQuicklookSide={issueQuicklookSide}
+          issueQuicklookAlign={issueQuicklookAlign}
           {...props}
         />
       );