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>
This commit is contained in:
Dotta 2026-04-30 13:18:01 -05:00 committed by GitHub
parent cd606563f6
commit 87f19cd9a6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 1161 additions and 121 deletions

View file

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