mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-18 03:30:39 +09:00
## Thinking Path > - Paperclip is a control plane for AI-agent companies, so issue detail pages are a primary surface for understanding agent work and human feedback. > - The relevant subsystem here is the issue comments/chat experience across the React issue detail page and the server comment pagination API. > - Long issue threads were only surfacing the newest page of comments at first render, which hid earlier human and agent messages behind extra pagination. > - The first UI fix exposed that the descending cursor path on the server could also fail for older-page fetches, leaving the chat tab stuck on an infinite "Loading earlier comments..." state. > - This needed to be addressed in both layers so the chat tab can surface earlier conversation history without manual recovery and without server errors. > - This pull request auto-loads earlier comment pages in the issue detail chat view and fixes the descending cursor predicate used by issue comment pagination. > - The benefit is that long-running issues like `PAPA-103` now show the missing conversation history near the top of the chat surface instead of hiding it or failing to load it. ## What Changed - Auto-load earlier issue comment pages in the issue detail chat tab until the thread reaches a 150-comment cap or there are no older comments left. - Add UI-side guard logic and regression coverage for optimistic issue comment pagination so the autoload behavior stops cleanly. - Replace the raw SQL descending cursor predicate in `issueService.listComments` with typed Drizzle comparisons for the `(createdAt, id)` anchor tuple. - Add a server regression test that paginates earlier comments in descending order from an anchor comment. - Smoke-test the exact previously failing seeded `PAPA-103` cursor path on the isolated dev instance used for review. ## Verification - `pnpm --filter @paperclipai/server exec vitest run src/__tests__/issues-service.test.ts` - `pnpm --filter @paperclipai/server typecheck` - Manual smoke against seeded `PAPA-103` data on the isolated dev server: - `GET /api/issues/PAPA-103/comments?order=desc&limit=50` returns `200` - `GET /api/issues/PAPA-103/comments?after=765d3609-edc6-4d11-a8fe-d466affbe85d&order=desc&limit=50` now returns `200` with 50 comments instead of `500` ## Risks - Moderate UI/perf risk on very large threads because the chat tab now prefetches multiple earlier pages on mount; the cap is intentionally limited to 150 comments to bound that work. - Low API risk because the server fix only changes the cursor predicate construction for anchor-based comment pagination, but any mistake there would affect older-comment paging order. > I checked `ROADMAP.md` before opening this PR and this bug fix does not duplicate planned core work. ## Model Used - OpenAI Codex coding agent in the Paperclip local adapter environment. The exact backend model ID and context window were not exposed in-session. Tool-assisted workflow included shell execution, git/GitHub CLI, local test execution, and targeted code edits. ## 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 - [ ] 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
324 lines
9.7 KiB
TypeScript
324 lines
9.7 KiB
TypeScript
import type { Issue, IssueComment } from "@paperclipai/shared";
|
|
|
|
export interface IssueCommentReassignment {
|
|
assigneeAgentId: string | null;
|
|
assigneeUserId: string | null;
|
|
}
|
|
|
|
export interface OptimisticIssueComment extends IssueComment {
|
|
clientId: string;
|
|
clientStatus: "pending" | "queued";
|
|
queueTargetRunId?: string | null;
|
|
}
|
|
|
|
export type IssueTimelineComment = IssueComment | OptimisticIssueComment;
|
|
export type LocallyQueuedIssueComment<T extends IssueComment> = T & {
|
|
clientStatus: "queued";
|
|
queueState: "queued";
|
|
queueTargetRunId: string;
|
|
};
|
|
|
|
function toTimestamp(value: Date | string) {
|
|
return new Date(value).getTime();
|
|
}
|
|
|
|
function createOptimisticCommentId() {
|
|
const randomUuid = globalThis.crypto?.randomUUID?.();
|
|
if (randomUuid) {
|
|
return `optimistic-${randomUuid}`;
|
|
}
|
|
return `optimistic-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
|
|
}
|
|
|
|
export function sortIssueComments<T extends { createdAt: Date | string; id: string }>(comments: T[]) {
|
|
return [...comments].sort((a, b) => {
|
|
const createdAtDiff = toTimestamp(a.createdAt) - toTimestamp(b.createdAt);
|
|
if (createdAtDiff !== 0) return createdAtDiff;
|
|
return a.id.localeCompare(b.id);
|
|
});
|
|
}
|
|
|
|
function sortIssueCommentsDesc<T extends { createdAt: Date | string; id: string }>(comments: T[]) {
|
|
return sortIssueComments(comments).reverse();
|
|
}
|
|
|
|
export function createOptimisticIssueComment(params: {
|
|
companyId: string;
|
|
issueId: string;
|
|
body: string;
|
|
authorUserId: string | null;
|
|
clientStatus?: OptimisticIssueComment["clientStatus"];
|
|
queueTargetRunId?: string | null;
|
|
}): OptimisticIssueComment {
|
|
const now = new Date();
|
|
const clientId = createOptimisticCommentId();
|
|
return {
|
|
id: clientId,
|
|
clientId,
|
|
companyId: params.companyId,
|
|
issueId: params.issueId,
|
|
authorAgentId: null,
|
|
authorUserId: params.authorUserId,
|
|
body: params.body,
|
|
clientStatus: params.clientStatus ?? "pending",
|
|
queueTargetRunId: params.queueTargetRunId ?? null,
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
};
|
|
}
|
|
|
|
export function isQueuedIssueComment(params: {
|
|
comment: Pick<IssueTimelineComment, "createdAt"> &
|
|
Partial<Pick<OptimisticIssueComment, "clientStatus">> & {
|
|
authorAgentId?: string | null;
|
|
};
|
|
activeRunStartedAt?: Date | string | null;
|
|
activeRunAgentId?: string | null;
|
|
runId?: string | null;
|
|
interruptedRunId?: string | null;
|
|
}) {
|
|
if (params.runId) return false;
|
|
if (params.interruptedRunId) return false;
|
|
if (params.comment.authorAgentId && params.activeRunAgentId && params.comment.authorAgentId === params.activeRunAgentId) {
|
|
return false;
|
|
}
|
|
if (params.comment.clientStatus === "queued") return true;
|
|
if (!params.activeRunStartedAt) return false;
|
|
return toTimestamp(params.comment.createdAt) >= toTimestamp(params.activeRunStartedAt);
|
|
}
|
|
|
|
export function applyLocalQueuedIssueCommentState<T extends IssueComment>(
|
|
comment: T,
|
|
params: {
|
|
queuedTargetRunId?: string | null;
|
|
targetRunIsLive: boolean;
|
|
runningRunId?: string | null;
|
|
},
|
|
): T | LocallyQueuedIssueComment<T> {
|
|
const queuedTargetRunId = params.queuedTargetRunId ?? null;
|
|
if (!queuedTargetRunId || !params.targetRunIsLive) return comment;
|
|
if (params.runningRunId && params.runningRunId !== queuedTargetRunId) return comment;
|
|
|
|
return {
|
|
...comment,
|
|
clientStatus: "queued",
|
|
queueState: "queued",
|
|
queueTargetRunId: queuedTargetRunId,
|
|
};
|
|
}
|
|
|
|
export function mergeIssueComments(
|
|
comments: IssueComment[] | undefined,
|
|
optimisticComments: OptimisticIssueComment[],
|
|
): IssueTimelineComment[] {
|
|
const merged = [...(comments ?? [])];
|
|
const existingIds = new Set(merged.map((comment) => comment.id));
|
|
for (const comment of optimisticComments) {
|
|
if (!existingIds.has(comment.id)) {
|
|
merged.push(comment);
|
|
}
|
|
}
|
|
return sortIssueComments(merged);
|
|
}
|
|
|
|
export function takeOptimisticIssueComment(
|
|
comments: OptimisticIssueComment[],
|
|
clientId: string,
|
|
): { comments: OptimisticIssueComment[]; comment: OptimisticIssueComment | null } {
|
|
const index = comments.findIndex((comment) => comment.clientId === clientId);
|
|
if (index === -1) {
|
|
return { comments, comment: null };
|
|
}
|
|
|
|
return {
|
|
comments: comments.filter((comment) => comment.clientId !== clientId),
|
|
comment: comments[index] ?? null,
|
|
};
|
|
}
|
|
|
|
export function flattenIssueCommentPages(
|
|
pages: ReadonlyArray<ReadonlyArray<IssueComment>> | undefined,
|
|
): IssueComment[] {
|
|
return sortIssueComments((pages ?? []).flatMap((page) => page));
|
|
}
|
|
|
|
export function getNextIssueCommentPageParam(
|
|
lastPage: ReadonlyArray<IssueComment> | undefined,
|
|
pageSize: number,
|
|
): string | undefined {
|
|
if (!lastPage || lastPage.length < pageSize) return undefined;
|
|
return lastPage[lastPage.length - 1]?.id;
|
|
}
|
|
|
|
export function shouldAutoloadOlderIssueComments(params: {
|
|
activeDetailTab: string;
|
|
hasOlderComments: boolean;
|
|
loadedCommentCount: number;
|
|
initialPageLoading: boolean;
|
|
olderPageLoading: boolean;
|
|
autoLoadLimit: number;
|
|
}) {
|
|
if (params.activeDetailTab !== "chat") return false;
|
|
if (!params.hasOlderComments) return false;
|
|
if (params.initialPageLoading || params.olderPageLoading) return false;
|
|
if (params.loadedCommentCount === 0) return false;
|
|
return params.loadedCommentCount < params.autoLoadLimit;
|
|
}
|
|
|
|
export function upsertIssueComment(
|
|
comments: IssueComment[] | undefined,
|
|
nextComment: IssueComment,
|
|
): IssueComment[] {
|
|
const current = comments ?? [];
|
|
const existingIndex = current.findIndex((comment) => comment.id === nextComment.id);
|
|
if (existingIndex === -1) {
|
|
return sortIssueComments([...current, nextComment]);
|
|
}
|
|
|
|
const updated = [...current];
|
|
updated[existingIndex] = nextComment;
|
|
return sortIssueComments(updated);
|
|
}
|
|
|
|
export function applyOptimisticIssueCommentUpdate(
|
|
issue: Issue | undefined,
|
|
params: {
|
|
reopen?: boolean;
|
|
reassignment?: IssueCommentReassignment;
|
|
},
|
|
) {
|
|
if (!issue) return issue;
|
|
const nextIssue: Issue = { ...issue };
|
|
|
|
if (params.reopen === true && (issue.status === "done" || issue.status === "cancelled" || issue.status === "blocked")) {
|
|
nextIssue.status = "todo";
|
|
}
|
|
|
|
if (params.reassignment) {
|
|
nextIssue.assigneeAgentId = params.reassignment.assigneeAgentId;
|
|
nextIssue.assigneeUserId = params.reassignment.assigneeUserId;
|
|
}
|
|
|
|
return nextIssue;
|
|
}
|
|
|
|
export function applyOptimisticIssueFieldUpdate(
|
|
issue: Issue | undefined,
|
|
data: Record<string, unknown>,
|
|
) {
|
|
if (!issue) return issue;
|
|
|
|
const nextIssue: Issue = {
|
|
...issue,
|
|
updatedAt: new Date(),
|
|
};
|
|
const hasOwn = (key: string) => Object.prototype.hasOwnProperty.call(data, key);
|
|
const assign = <K extends keyof Issue>(key: K) => {
|
|
if (hasOwn(key)) {
|
|
nextIssue[key] = data[key] as Issue[K];
|
|
}
|
|
};
|
|
|
|
assign("status");
|
|
assign("priority");
|
|
assign("assigneeAgentId");
|
|
assign("assigneeUserId");
|
|
assign("projectId");
|
|
assign("parentId");
|
|
assign("projectWorkspaceId");
|
|
assign("executionWorkspaceId");
|
|
assign("executionWorkspacePreference");
|
|
assign("executionWorkspaceSettings");
|
|
assign("hiddenAt");
|
|
|
|
if (hasOwn("labelIds") && Array.isArray(data.labelIds)) {
|
|
const nextLabelIds = data.labelIds.filter((value): value is string => typeof value === "string");
|
|
nextIssue.labelIds = nextLabelIds;
|
|
if (issue.labels) {
|
|
nextIssue.labels = issue.labels.filter((label) => nextLabelIds.includes(label.id));
|
|
}
|
|
}
|
|
|
|
if (hasOwn("blockedByIssueIds") && Array.isArray(data.blockedByIssueIds) && issue.blockedBy) {
|
|
const nextBlockedByIds = new Set(
|
|
data.blockedByIssueIds.filter((value): value is string => typeof value === "string"),
|
|
);
|
|
nextIssue.blockedBy = issue.blockedBy.filter((relation) => nextBlockedByIds.has(relation.id));
|
|
}
|
|
|
|
if (hasOwn("projectId")) {
|
|
nextIssue.project = issue.project?.id === nextIssue.projectId ? issue.project : null;
|
|
}
|
|
|
|
if (hasOwn("parentId")) {
|
|
nextIssue.ancestors = undefined;
|
|
}
|
|
|
|
if (hasOwn("executionWorkspaceId")) {
|
|
nextIssue.currentExecutionWorkspace =
|
|
issue.currentExecutionWorkspace?.id === nextIssue.executionWorkspaceId
|
|
? issue.currentExecutionWorkspace
|
|
: null;
|
|
}
|
|
|
|
return nextIssue;
|
|
}
|
|
|
|
export function matchesIssueRef(
|
|
issue: Pick<Issue, "id" | "identifier">,
|
|
refs: Iterable<string>,
|
|
) {
|
|
const refSet = refs instanceof Set ? refs : new Set(refs);
|
|
return refSet.has(issue.id) || (!!issue.identifier && refSet.has(issue.identifier));
|
|
}
|
|
|
|
export function applyOptimisticIssueFieldUpdateToCollection(
|
|
issues: Issue[] | undefined,
|
|
refs: Iterable<string>,
|
|
data: Record<string, unknown>,
|
|
) {
|
|
if (!issues) return issues;
|
|
|
|
let changed = false;
|
|
const nextIssues = issues.map((issue) => {
|
|
if (!matchesIssueRef(issue, refs)) return issue;
|
|
changed = true;
|
|
return applyOptimisticIssueFieldUpdate(issue, data) ?? issue;
|
|
});
|
|
|
|
return changed ? nextIssues : issues;
|
|
}
|
|
|
|
export function upsertIssueCommentInPages(
|
|
pages: ReadonlyArray<ReadonlyArray<IssueComment>> | undefined,
|
|
nextComment: IssueComment,
|
|
): IssueComment[][] {
|
|
if (!pages || pages.length === 0) {
|
|
return [[nextComment]];
|
|
}
|
|
|
|
const nextPages = pages.map((page) => [...page]);
|
|
for (let pageIndex = 0; pageIndex < nextPages.length; pageIndex += 1) {
|
|
const existingIndex = nextPages[pageIndex]!.findIndex((comment) => comment.id === nextComment.id);
|
|
if (existingIndex === -1) continue;
|
|
nextPages[pageIndex]![existingIndex] = nextComment;
|
|
nextPages[pageIndex] = sortIssueCommentsDesc(nextPages[pageIndex]!);
|
|
return nextPages;
|
|
}
|
|
|
|
nextPages[0] = sortIssueCommentsDesc([...nextPages[0]!, nextComment]);
|
|
return nextPages;
|
|
}
|
|
|
|
export function removeIssueCommentFromPages(
|
|
pages: ReadonlyArray<ReadonlyArray<IssueComment>> | undefined,
|
|
commentId: string,
|
|
): IssueComment[][] {
|
|
if (!pages || pages.length === 0) {
|
|
return [];
|
|
}
|
|
|
|
return pages
|
|
.map((page) => page.filter((comment) => comment.id !== commentId))
|
|
.filter((page) => page.length > 0);
|
|
}
|