[codex] Split PR #4692 UI/QoL updates (#4701)

## Thinking Path

> - Paperclip orchestrates AI agents through a company-scoped control
plane.
> - The affected surface is the board UI for issue threads, issue lists,
routines, dialogs, navigation, and issue review indicators.
> - Closed PR #4692 bundled backend, schema, docs, workflow, and UI/QoL
work into one oversized change set.
> - Greptile could not keep reviewing that broad PR because it exceeded
the 100-file review limit and mixed unrelated concerns.
> - This pull request extracts the UI/QoL slice into a fresh branch
under the review limit while leaving workflow and lockfile churn out.
> - The benefit is a focused review path for the board UI performance
and workflow improvements without reopening the oversized PR.

## What Changed

- Added long issue-thread virtualization, scroll-container binding,
anchor preservation, latest-comment jump targeting, and related
regression/perf fixtures.
- Improved issue list scalability with scroll-based loading, server
offset parameters, and pagination-focused UI tests.
- Reduced new issue dialog typing churn and split dialog action
subscriptions so broad layout/nav surfaces avoid unnecessary renders.
- Added routine variables help and routine description mention options
for users, agents, and projects.
- Added productivity review badge/link UI and fixed the badge to use
Paperclip's company-prefixed router link.
- Kept the split PR below Greptile's review limit and excluded
`.github/workflows/pr.yml` and `pnpm-lock.yaml`.

## Verification

- `pnpm install --no-frozen-lockfile` in the clean worktree to install
`@tanstack/react-virtual` locally without committing lockfile churn.
- `pnpm --filter @paperclipai/ui exec vitest run --config
vitest.config.ts src/components/IssueChatThread.test.tsx
src/components/IssuesList.test.tsx
src/components/NewIssueDialog.test.tsx src/pages/Routines.test.tsx
src/pages/Issues.test.tsx` passed: 5 files, 83 tests.
- `pnpm --filter @paperclipai/ui typecheck` passed.
- `git diff --check origin/master..HEAD` passed.
- Split-scope checks: 53 changed files; no `.github/workflows/pr.yml`;
no `pnpm-lock.yaml`.
- Screenshots were not captured in this heartbeat; the changes are
primarily virtualization, routing, pagination, and editor behavior
covered by focused regression tests.

## Risks

- Moderate UI risk because issue-thread virtualization changes scroll
behavior on long conversations; regression tests cover anchor jumps,
latest-comment targeting, row metadata, and short-thread fallback.
- Moderate integration risk because the issue-list offset parameter and
productivity review field depend on matching API behavior.
- Dependency risk: the UI package adds `@tanstack/react-virtual` while
repository policy keeps `pnpm-lock.yaml` out of PRs, so CI must resolve
dependency changes through the repo's normal lockfile policy.

> 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 local repository and
GitHub workflow. Exact runtime context window was not exposed by the
harness.

## 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/storybook/stories/forms-editors.stories.tsx

@@ -92,6 +92,8 @@ Ship criteria for the board UI refresh:
 - [x] Keep comments and task updates auditable
 - [ ] Attach screenshots after QA
 
+Tooling: lean on [/react-perf-optimizer](skill://skill-react-perf?s=react-perf-optimizer) and [/vercel-react-best-practices](skill://skill-vercel-react?s=vercel-react-best-practices) so we don't regress render performance on the page it's open to. Inline skill chips like [/release-changelog](skill://skill-release?s=release-changelog) must sit on the surrounding text line, not hang below it.
+
 | Surface | Owner | State |
 | --- | --- | --- |
 | Issues | CodexCoder | In progress |

ui/storybook/stories/status-language.stories.tsx

@@ -1,7 +1,11 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AGENT_STATUSES, ISSUE_PRIORITIES, ISSUE_STATUSES } from "@paperclipai/shared";
-import type { IssueBlockerAttention, IssueRelationIssueSummary } from "@paperclipai/shared";
+import type {
+  IssueBlockerAttention,
+  IssueProductivityReview,
+  IssueRelationIssueSummary,
+} from "@paperclipai/shared";
 import { Bot, CheckCircle2, Clock3, DollarSign, FolderKanban, Inbox, MessageSquare, Users } from "lucide-react";
 import { CopyText } from "@/components/CopyText";
 import { EmptyState } from "@/components/EmptyState";
@@ -10,6 +14,7 @@ import { IssueBlockedNotice } from "@/components/IssueBlockedNotice";
 import { IssueRow } from "@/components/IssueRow";
 import { MetricCard } from "@/components/MetricCard";
 import { PriorityIcon } from "@/components/PriorityIcon";
+import { ProductivityReviewBadge } from "@/components/ProductivityReviewBadge";
 import { QuotaBar } from "@/components/QuotaBar";
 import { StatusBadge } from "@/components/StatusBadge";
 import { StatusIcon } from "@/components/StatusIcon";
@@ -370,6 +375,114 @@ function CoveredBlockedSurface({ mode, size }: { mode: "light" | "dark"; size: "
   );
 }
 
+type ProductivityReviewFixture = {
+  label: string;
+  description: string;
+  review: IssueProductivityReview;
+};
+
+const productivityReviewFixtures: ProductivityReviewFixture[] = [
+  {
+    label: "No-comment streak",
+    description: "Source issue has had 12 completed runs without a run-created comment.",
+    review: {
+      reviewIssueId: "review-issue-1",
+      reviewIdentifier: "PAP-2702",
+      status: "todo",
+      priority: "high",
+      trigger: "no_comment_streak",
+      noCommentStreak: 12,
+      createdAt: new Date("2026-04-28T13:30:00.000Z"),
+      updatedAt: new Date("2026-04-28T13:55:00.000Z"),
+    },
+  },
+  {
+    label: "Long active duration",
+    description: "Source issue has been actively running for over 6 hours.",
+    review: {
+      reviewIssueId: "review-issue-2",
+      reviewIdentifier: "PAP-2703",
+      status: "in_progress",
+      priority: "medium",
+      trigger: "long_active_duration",
+      noCommentStreak: null,
+      createdAt: new Date("2026-04-28T08:30:00.000Z"),
+      updatedAt: new Date("2026-04-28T13:00:00.000Z"),
+    },
+  },
+  {
+    label: "High churn",
+    description: "Source issue is producing >10 runs/comments per hour.",
+    review: {
+      reviewIssueId: "review-issue-3",
+      reviewIdentifier: "PAP-2704",
+      status: "todo",
+      priority: "high",
+      trigger: "high_churn",
+      noCommentStreak: 4,
+      createdAt: new Date("2026-04-28T13:45:00.000Z"),
+      updatedAt: new Date("2026-04-28T13:55:00.000Z"),
+    },
+  },
+];
+
+const productivityReviewIssueRowFixtures = productivityReviewFixtures.map((fixture, index) =>
+  createIssue({
+    id: `issue-productivity-source-${index + 1}`,
+    identifier: `PAP-${2710 + index}`,
+    issueNumber: 2710 + index,
+    title: `Source issue under review · ${fixture.label}`,
+    status: index === 1 ? "in_progress" : "in_progress",
+    priority: fixture.review.priority,
+    productivityReview: fixture.review,
+    lastActivityAt: fixture.review.updatedAt,
+    updatedAt: fixture.review.updatedAt,
+  }),
+);
+
+function ProductivityReviewMatrix() {
+  return (
+    <div className="space-y-5">
+      <div className="grid gap-3 md:grid-cols-3">
+        {productivityReviewFixtures.map((fixture) => (
+          <div
+            key={fixture.label}
+            className="flex flex-col gap-3 rounded-lg border border-border bg-background/70 p-4"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <div className="text-sm font-medium">{fixture.label}</div>
+                <div className="mt-1 text-xs text-muted-foreground">{fixture.description}</div>
+              </div>
+              <ProductivityReviewBadge review={fixture.review} />
+            </div>
+            <div className="rounded-md bg-muted/45 px-2.5 py-2 font-mono text-[11px] leading-5 text-muted-foreground">
+              Trigger {fixture.review.trigger ?? "unknown"} · review {fixture.review.reviewIdentifier}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="rounded-lg border border-border">
+        <div className="border-b border-border px-3 py-2 text-xs font-medium text-muted-foreground">
+          IssueRow with productivity-review indicator
+        </div>
+        <div>
+          {productivityReviewIssueRowFixtures.map((issue) => (
+            <IssueRow key={issue.id} issue={issue} mobileMeta={<StatusBadge status={issue.status} />} />
+          ))}
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        On the source issue header the amber pill reads <strong>Under review</strong> and links to the open
+        productivity-review child — describing the state the task is in. The productivity-review issue itself
+        carries a static <strong>Productivity review</strong> pill identifying what kind of issue it is.
+        List rows get a smaller eye glyph next to the status icon so operators can spot yellow tasks without
+        the clickable label.
+      </p>
+    </div>
+  );
+}
+
 function StatusLanguage() {
   const [priority, setPriority] = useState("high");
 
@@ -466,6 +579,10 @@ function StatusLanguage() {
           </p>
         </Section>
 
+        <Section eyebrow="Productivity review" title="Yellow accountability state on source issues">
+          <ProductivityReviewMatrix />
+        </Section>
+
         <Section eyebrow="Priority" title="Static labels and editable popover trigger">
           <div className="grid gap-4 lg:grid-cols-[1fr_320px]">
             <div className="grid gap-3 sm:grid-cols-2">