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
@@ -478,22 +478,34 @@ describe("MarkdownEditor", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("anchors the mention menu inside the visual viewport when mobile offsets are present", () => {
|
||||
it("places the menu top on the caret line and offsets the left a space-width past the caret", () => {
|
||||
expect(
|
||||
computeMentionMenuPosition(
|
||||
{ viewportTop: 180, viewportLeft: 120 },
|
||||
{ viewportTop: 100, viewportBottom: 118, viewportLeft: 240 },
|
||||
{ offsetLeft: 0, offsetTop: 0, width: 800, height: 600 },
|
||||
),
|
||||
).toEqual({
|
||||
top: 100,
|
||||
left: 250,
|
||||
});
|
||||
});
|
||||
|
||||
it("applies visual viewport offsets when present", () => {
|
||||
expect(
|
||||
computeMentionMenuPosition(
|
||||
{ viewportTop: 20, viewportBottom: 38, viewportLeft: 120 },
|
||||
{ offsetLeft: 24, offsetTop: 320, width: 320, height: 260 },
|
||||
),
|
||||
).toEqual({
|
||||
top: 372,
|
||||
left: 144,
|
||||
top: 340,
|
||||
left: 154,
|
||||
});
|
||||
});
|
||||
|
||||
it("clamps the mention menu back into view near the viewport edges", () => {
|
||||
expect(
|
||||
computeMentionMenuPosition(
|
||||
{ viewportTop: 260, viewportLeft: 240 },
|
||||
{ viewportTop: 260, viewportBottom: 278, viewportLeft: 240 },
|
||||
{ offsetLeft: 0, offsetTop: 0, width: 280, height: 220 },
|
||||
),
|
||||
).toEqual({
|
||||
@@ -502,16 +514,28 @@ describe("MarkdownEditor", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("flips the menu above the caret line when it would overflow below", () => {
|
||||
expect(
|
||||
computeMentionMenuPosition(
|
||||
{ viewportTop: 560, viewportBottom: 580, viewportLeft: 200 },
|
||||
{ offsetLeft: 0, offsetTop: 0, width: 800, height: 600 },
|
||||
),
|
||||
).toEqual({
|
||||
top: 372,
|
||||
left: 210,
|
||||
});
|
||||
});
|
||||
|
||||
it("keeps a short mention menu on the same line when it fits below the caret", () => {
|
||||
expect(
|
||||
computeMentionMenuPosition(
|
||||
{ viewportTop: 160, viewportLeft: 120 },
|
||||
{ viewportTop: 160, viewportBottom: 178, viewportLeft: 120 },
|
||||
{ offsetLeft: 0, offsetTop: 0, width: 320, height: 220 },
|
||||
{ width: 188, height: 42 },
|
||||
),
|
||||
).toEqual({
|
||||
top: 164,
|
||||
left: 120,
|
||||
top: 160,
|
||||
left: 130,
|
||||
});
|
||||
});
|
||||
|
||||
@@ -619,8 +643,20 @@ describe("MarkdownEditor", () => {
|
||||
editable.remove();
|
||||
});
|
||||
|
||||
it("accepts mention selection from touchstart taps", async () => {
|
||||
const handleChange = vi.fn();
|
||||
function createTouchEvent(
|
||||
type: "touchstart" | "touchmove" | "touchend",
|
||||
touches: Array<{ clientX: number; clientY: number }>,
|
||||
) {
|
||||
const event = new Event(type, { bubbles: true, cancelable: true });
|
||||
const list = touches as unknown as TouchList;
|
||||
Object.defineProperty(event, "touches", { value: type === "touchend" ? [] : list });
|
||||
Object.defineProperty(event, "changedTouches", { value: list });
|
||||
return event;
|
||||
}
|
||||
|
||||
async function openMentionMenuFor(
|
||||
handleChange: ReturnType<typeof vi.fn>,
|
||||
): Promise<{ option: HTMLButtonElement; root: ReturnType<typeof createRoot> }> {
|
||||
const root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
@@ -645,7 +681,6 @@ describe("MarkdownEditor", () => {
|
||||
|
||||
const editable = container.querySelector('[contenteditable="true"]');
|
||||
expect(editable).not.toBeNull();
|
||||
|
||||
const textNode = editable?.firstChild;
|
||||
expect(textNode?.nodeType).toBe(Node.TEXT_NODE);
|
||||
|
||||
@@ -659,15 +694,24 @@ describe("MarkdownEditor", () => {
|
||||
act(() => {
|
||||
document.dispatchEvent(new Event("selectionchange"));
|
||||
});
|
||||
|
||||
await flush();
|
||||
|
||||
const option = Array.from(document.body.querySelectorAll('button[type="button"]'))
|
||||
.find((node) => node.textContent?.includes("Paperclip App"));
|
||||
.find((node) => node.textContent?.includes("Paperclip App")) as HTMLButtonElement | undefined;
|
||||
expect(option).toBeTruthy();
|
||||
return { option: option!, root };
|
||||
}
|
||||
|
||||
it("accepts mention selection from a touch tap", async () => {
|
||||
const handleChange = vi.fn();
|
||||
const { option, root } = await openMentionMenuFor(handleChange);
|
||||
const point = { clientX: 100, clientY: 50 };
|
||||
|
||||
act(() => {
|
||||
option?.dispatchEvent(new Event("touchstart", { bubbles: true, cancelable: true }));
|
||||
option.dispatchEvent(createTouchEvent("touchstart", [point]));
|
||||
});
|
||||
act(() => {
|
||||
option.dispatchEvent(createTouchEvent("touchend", [point]));
|
||||
});
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith(
|
||||
@@ -678,4 +722,44 @@ describe("MarkdownEditor", () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("does not preventDefault on touchstart so the mention menu can scroll on mobile", async () => {
|
||||
const handleChange = vi.fn();
|
||||
const { option, root } = await openMentionMenuFor(handleChange);
|
||||
|
||||
const touchstart = createTouchEvent("touchstart", [{ clientX: 100, clientY: 50 }]);
|
||||
act(() => {
|
||||
option.dispatchEvent(touchstart);
|
||||
});
|
||||
|
||||
expect(touchstart.defaultPrevented).toBe(false);
|
||||
expect(handleChange).not.toHaveBeenCalled();
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("does not select when the touch moves like a scroll", async () => {
|
||||
const handleChange = vi.fn();
|
||||
const { option, root } = await openMentionMenuFor(handleChange);
|
||||
const start = { clientX: 100, clientY: 50 };
|
||||
const moved = { clientX: 100, clientY: 90 };
|
||||
|
||||
act(() => {
|
||||
option.dispatchEvent(createTouchEvent("touchstart", [start]));
|
||||
});
|
||||
act(() => {
|
||||
option.dispatchEvent(createTouchEvent("touchmove", [moved]));
|
||||
});
|
||||
act(() => {
|
||||
option.dispatchEvent(createTouchEvent("touchend", [moved]));
|
||||
});
|
||||
|
||||
expect(handleChange).not.toHaveBeenCalled();
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user