Improve issue thread scale and markdown polish (#4861)

## Thinking Path

> - Paperclip's board UI is the operator surface for supervising
AI-agent companies.
> - Issue threads are where operators read progress, respond to agents,
inspect markdown, and jump through long histories.
> - Large threads and rich markdown had become difficult to navigate and
expensive to render.
> - The previous rollup mixed these UI scale fixes with unrelated
backend recovery, costs, backups, and settings changes.
> - This pull request isolates the issue-thread scale and markdown
polish work.
> - The benefit is a reviewable UI slice that can merge independently of
the backend reliability, database backup, workflow, and board QoL PRs.

## What Changed

- Virtualized long issue chat threads and stabilized
anchor/jump-to-latest behavior for large histories.
- Added incremental issue-list row loading and tests for
scroll-triggered pagination behavior.
- Hardened markdown body rendering and markdown editor behavior around
HTML tags, image drops, code-copy UI, and escaped newline handling.
- Added a long-thread measurement harness at
`scripts/measure-issue-chat-long-thread.mjs` plus
`perf:issue-chat-long-thread`.
- Added focused UI/lib regression coverage for thread rendering,
markdown, optimistic comments, and message building.

## Verification

- `pnpm install --frozen-lockfile`
- `pnpm exec vitest run ui/src/components/IssueChatThread.test.tsx
ui/src/components/IssuesList.test.tsx
ui/src/components/MarkdownBody.test.tsx
ui/src/components/MarkdownEditor.test.tsx
ui/src/lib/issue-chat-messages.test.ts
ui/src/lib/optimistic-issue-comments.test.ts`
- Result: 6 test files passed, 170 tests passed.
- UI screenshots not included because this PR is covered by targeted
component tests and does not introduce a new page layout.

## Risks

- Virtualization changes can affect scroll anchoring in edge cases on
very long threads.
- Markdown/editor hardening changes are intentionally defensive, but
malformed content may render differently than before.

> 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.5, code execution and GitHub CLI tool use, medium
reasoning effort.

## 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-chat-messages.test.ts

@@ -605,6 +605,37 @@ describe("buildIssueChatMessages", () => {
     });
   });
 
+  it("labels pause-caused cancelled runs as paused by board", () => {
+    const messages = buildIssueChatMessages({
+      comments: [],
+      timelineEvents: [],
+      linkedRuns: [
+        {
+          runId: "run-paused",
+          status: "cancelled",
+          agentId: "agent-1",
+          agentName: "CodexCoder",
+          createdAt: new Date("2026-04-06T12:01:00.000Z"),
+          startedAt: new Date("2026-04-06T12:01:00.000Z"),
+          finishedAt: new Date("2026-04-06T12:02:00.000Z"),
+          resultJson: { stopReason: "paused" },
+        },
+      ],
+      liveRuns: [],
+      transcriptsByRunId: new Map([
+        ["run-paused", [{ kind: "assistant", ts: "2026-04-06T12:01:05.000Z", text: "Working on it." }]],
+      ]),
+      hasOutputForRun: (runId) => runId === "run-paused",
+      currentUserId: "user-1",
+    });
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]?.metadata.custom).toMatchObject({
+      chainOfThoughtLabel: "Paused by board after 1 minute",
+      runStatus: "cancelled",
+    });
+  });
+
   it("can keep succeeded runs without transcript output for embedded run feeds", () => {
     const messages = buildIssueChatMessages({
       comments: [],

ui/src/lib/issue-chat-messages.ts

@@ -45,6 +45,7 @@ export interface IssueChatLinkedRun {
   finishedAt?: Date | string | null;
   hasStoredOutput?: boolean;
   logBytes?: number | null;
+  resultJson?: Record<string, unknown> | null;
 }
 
 export interface IssueChatTranscriptEntry {
@@ -484,11 +485,13 @@ function runDurationLabel(run: {
   createdAt: Date | string;
   startedAt: Date | string | null;
   finishedAt?: Date | string | null;
+  resultJson?: Record<string, unknown> | null;
 }) {
   const start = run.startedAt ?? run.createdAt;
   const end = run.finishedAt ?? null;
   const durationMs = end ? Math.max(0, toTimestamp(end) - toTimestamp(start)) : null;
   const durationText = formatDurationWords(durationMs);
+  const stopReason = typeof run.resultJson?.stopReason === "string" ? run.resultJson.stopReason : null;
   switch (run.status) {
     case "succeeded":
       return durationText ? `Worked for ${durationText}` : "Finished work";
@@ -498,6 +501,9 @@ function runDurationLabel(run: {
     case "timed_out":
       return durationText ? `Timed out after ${durationText}` : "Run timed out";
     case "cancelled":
+      if (stopReason === "paused") {
+        return durationText ? `Paused by board after ${durationText}` : "Paused by board";
+      }
       return durationText ? `Cancelled after ${durationText}` : "Run cancelled";
     case "queued":
       return "Queued";

ui/src/lib/optimistic-issue-comments.test.ts

@@ -9,6 +9,7 @@ import {
   flattenIssueCommentPages,
   getNextIssueCommentPageParam,
   isQueuedIssueComment,
+  loadRemainingIssueCommentPages,
   matchesIssueRef,
   mergeIssueComments,
   removeIssueCommentFromPages,
@@ -234,6 +235,31 @@ describe("optimistic issue comments", () => {
     ).toBe("comment-1");
   });
 
+  it("loads remaining comment pages until the terminal partial page", async () => {
+    const fetchPage = vi.fn(async (afterCommentId: string) => {
+      if (afterCommentId === "comment-3") return [{ id: "comment-2" }, { id: "comment-1" }];
+      if (afterCommentId === "comment-1") return [{ id: "comment-0" }];
+      return [];
+    });
+
+    const loaded = await loadRemainingIssueCommentPages({
+      pages: [[{ id: "comment-4" }, { id: "comment-3" }]],
+      pageParams: [null],
+      pageSize: 2,
+      fetchPage,
+    });
+
+    expect(fetchPage).toHaveBeenCalledTimes(2);
+    expect(fetchPage).toHaveBeenNthCalledWith(1, "comment-3");
+    expect(fetchPage).toHaveBeenNthCalledWith(2, "comment-1");
+    expect(loaded.pages.map((page) => page.map((comment) => comment.id))).toEqual([
+      ["comment-4", "comment-3"],
+      ["comment-2", "comment-1"],
+      ["comment-0"],
+    ]);
+    expect(loaded.pageParams).toEqual([null, "comment-3", "comment-1"]);
+  });
+
   it("autoloads older chat comments while the initial thread is still under the threshold", () => {
     expect(
       shouldAutoloadOlderIssueComments({

ui/src/lib/optimistic-issue-comments.ts

@@ -150,6 +150,45 @@ export function getNextIssueCommentPageParam(
   return lastPage[lastPage.length - 1]?.id;
 }
 
+function getNextPageCursor<T extends { id: string }>(
+  lastPage: ReadonlyArray<T> | undefined,
+  pageSize: number,
+): string | undefined {
+  if (!lastPage || lastPage.length < pageSize) return undefined;
+  return lastPage[lastPage.length - 1]?.id;
+}
+
+export async function loadRemainingIssueCommentPages<T extends { id: string }>(params: {
+  pages: ReadonlyArray<ReadonlyArray<T>> | undefined;
+  pageParams: ReadonlyArray<string | null> | undefined;
+  pageSize: number;
+  fetchPage: (afterCommentId: string) => Promise<ReadonlyArray<T>>;
+}): Promise<{ pages: T[][]; pageParams: Array<string | null> }> {
+  const pages = (params.pages ?? []).map((page) => [...page]);
+  const pageParams = params.pageParams
+    ? [...params.pageParams].slice(0, pages.length)
+    : pages.map(() => null);
+
+  while (pageParams.length < pages.length) {
+    pageParams.push(null);
+  }
+
+  if (params.pageSize <= 0) return { pages, pageParams };
+
+  let cursor = getNextPageCursor(pages[pages.length - 1], params.pageSize);
+  const seenCursors = new Set<string>();
+  while (cursor && !seenCursors.has(cursor)) {
+    seenCursors.add(cursor);
+    const nextPage = [...await params.fetchPage(cursor)];
+    pages.push(nextPage);
+    pageParams.push(cursor);
+
+    cursor = getNextPageCursor(nextPage, params.pageSize);
+  }
+
+  return { pages, pageParams };
+}
+
 export function shouldAutoloadOlderIssueComments(params: {
   activeDetailTab: string;
   hasOlderComments: boolean;