mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-17 03:10:38 +09:00
Fix typing lag in long comment threads (PAPA-63) (#3163)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - The issue detail page displays comment threads with rich timeline rendering > - Long threads (100+ items) cause severe typing lag in the comment composer because every keystroke re-renders the entire timeline > - CDP tracing confirmed 110ms avg key→paint latency and 60 long tasks blocking the main thread for 3.7s total > - This pull request memoizes the timeline, stabilizes callback props, debounces editor observers, and reduces idle polling frequency > - The benefit is responsive typing (21ms avg, 5.3× faster) even on threads with 100+ timeline items ## What Changed - **CommentThread.tsx**: Memoize `TimelineList` with `useMemo` so typing state changes don't re-render 143 timeline items; extract `handleFeedbackVote` to `useCallback`; added missing deps (`pendingApprovalAction`, `onApproveApproval`, `onRejectApproval`) to useMemo array - **IssueDetail.tsx**: Extract inline callbacks (`handleCommentAdd`, `handleCommentVote`, `handleCommentImageUpload`, `handleCommentAttachImage`, `handleInterruptQueued`) to `useCallback` with `.mutateAsync` deps (not full mutation objects) for stable references; add conditional polling intervals (3s active / 30s idle) for `liveRuns`, `activeRun`, `linkedRuns`, and timeline queries - **MarkdownEditor.tsx**: Debounce `MutationObserver` and `selectionchange` handlers via `requestAnimationFrame` coalescing - **LiveRunWidget.tsx**: Accept optional `liveRunsData` and `activeRunData` props to reuse parent-fetched data instead of duplicate polling ## Verification - Navigated to [IP address]:3105/PAPA/issues/PAPA-32 (thread with 100+ items) - Typed in comment composer — lag eliminated, characters appear instantly - CDP trace test script (`test-typing-lag.mjs`) confirmed: avg 21ms key→paint (was 110ms), 5 long tasks (was 60), 0.5s blocking (was 3.7s) - Ran `pnpm test:run` locally — all tests pass ## Risks - Low risk. All changes are additive memoization and callback stabilization — no behavioral changes. Polling intervals are only reduced for idle state; active runs still poll at 3–5s. ## Model Used - Claude Opus 4.6 (`claude-opus-4-6`) via Claude Code CLI, with tool use and extended context ## 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 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:
Devin Foley
GitHub
parent
642188f900
commit
3264f9c1f6
5 changed files with 372 additions and 229 deletions
|
|
@ -79,6 +79,7 @@ import {
|
|||
type ActivityEvent,
|
||||
type Agent,
|
||||
type FeedbackVote,
|
||||
type FeedbackVoteValue,
|
||||
type Issue,
|
||||
type IssueAttachment,
|
||||
type IssueComment,
|
||||
|
|
@ -93,6 +94,11 @@ type IssueDetailComment = (IssueComment | OptimisticIssueComment) & {
|
|||
queueTargetRunId?: string | null;
|
||||
};
|
||||
|
||||
const ACTIVE_ISSUE_RUN_POLL_INTERVAL_MS = 3000;
|
||||
const IDLE_ISSUE_RUN_POLL_INTERVAL_MS = 30000;
|
||||
const ACTIVE_ISSUE_TIMELINE_POLL_INTERVAL_MS = 5000;
|
||||
const IDLE_ISSUE_TIMELINE_POLL_INTERVAL_MS = 30000;
|
||||
|
||||
const ACTION_LABELS: Record<string, string> = {
|
||||
"issue.created": "created the issue",
|
||||
"issue.updated": "updated the issue",
|
||||
|
|
@ -338,13 +344,6 @@ export function IssueDetail() {
|
|||
enabled: !!issueId,
|
||||
});
|
||||
|
||||
const { data: linkedRuns } = useQuery({
|
||||
queryKey: queryKeys.issues.runs(issueId!),
|
||||
queryFn: () => activityApi.runsForIssue(issueId!),
|
||||
enabled: !!issueId,
|
||||
refetchInterval: 5000,
|
||||
});
|
||||
|
||||
const { data: linkedApprovals } = useQuery({
|
||||
queryKey: queryKeys.issues.approvals(issueId!),
|
||||
queryFn: () => issuesApi.listApprovals(issueId!),
|
||||
|
|
@ -361,17 +360,33 @@ export function IssueDetail() {
|
|||
queryKey: queryKeys.issues.liveRuns(issueId!),
|
||||
queryFn: () => heartbeatsApi.liveRunsForIssue(issueId!),
|
||||
enabled: !!issueId,
|
||||
refetchInterval: 3000,
|
||||
refetchInterval: (query) => {
|
||||
const data = query.state.data as Array<unknown> | undefined;
|
||||
return data && data.length > 0
|
||||
? ACTIVE_ISSUE_RUN_POLL_INTERVAL_MS
|
||||
: IDLE_ISSUE_RUN_POLL_INTERVAL_MS;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: activeRun } = useQuery({
|
||||
queryKey: queryKeys.issues.activeRun(issueId!),
|
||||
queryFn: () => heartbeatsApi.activeRunForIssue(issueId!),
|
||||
enabled: !!issueId,
|
||||
refetchInterval: 3000,
|
||||
refetchInterval: (query) =>
|
||||
query.state.data
|
||||
? ACTIVE_ISSUE_RUN_POLL_INTERVAL_MS
|
||||
: IDLE_ISSUE_RUN_POLL_INTERVAL_MS,
|
||||
});
|
||||
|
||||
const hasLiveRuns = (liveRuns ?? []).length > 0 || !!activeRun;
|
||||
const { data: linkedRuns } = useQuery({
|
||||
queryKey: queryKeys.issues.runs(issueId!),
|
||||
queryFn: () => activityApi.runsForIssue(issueId!),
|
||||
enabled: !!issueId,
|
||||
refetchInterval: hasLiveRuns
|
||||
? ACTIVE_ISSUE_TIMELINE_POLL_INTERVAL_MS
|
||||
: IDLE_ISSUE_TIMELINE_POLL_INTERVAL_MS,
|
||||
});
|
||||
const runningIssueRun = useMemo(
|
||||
() => (
|
||||
activeRun?.status === "running"
|
||||
|
|
@ -1033,6 +1048,53 @@ export function IssueDetail() {
|
|||
},
|
||||
});
|
||||
|
||||
const handleInterruptQueued = useCallback(
|
||||
async (runId: string) => {
|
||||
await interruptQueuedComment.mutateAsync(runId);
|
||||
},
|
||||
[interruptQueuedComment.mutateAsync],
|
||||
);
|
||||
|
||||
const handleCommentImageUpload = useCallback(
|
||||
async (file: File) => {
|
||||
const attachment = await uploadAttachment.mutateAsync(file);
|
||||
return attachment.contentPath;
|
||||
},
|
||||
[uploadAttachment.mutateAsync],
|
||||
);
|
||||
|
||||
const handleCommentAttachImage = useCallback(
|
||||
async (file: File) => {
|
||||
await uploadAttachment.mutateAsync(file);
|
||||
},
|
||||
[uploadAttachment.mutateAsync],
|
||||
);
|
||||
|
||||
const handleCommentAdd = useCallback(
|
||||
async (body: string, reopen?: boolean, reassignment?: CommentReassignment) => {
|
||||
if (reassignment) {
|
||||
await addCommentAndReassign.mutateAsync({ body, reopen, reassignment });
|
||||
return;
|
||||
}
|
||||
await addComment.mutateAsync({ body, reopen });
|
||||
},
|
||||
[addComment.mutateAsync, addCommentAndReassign.mutateAsync],
|
||||
);
|
||||
|
||||
const handleCommentVote = useCallback(
|
||||
async (commentId: string, vote: FeedbackVoteValue, options?: { reason?: string; allowSharing?: boolean }) => {
|
||||
await feedbackVoteMutation.mutateAsync({
|
||||
targetType: "issue_comment",
|
||||
targetId: commentId,
|
||||
vote,
|
||||
reason: options?.reason,
|
||||
allowSharing: options?.allowSharing,
|
||||
sharingPreferenceAtSubmit: feedbackDataSharingPreference,
|
||||
});
|
||||
},
|
||||
[feedbackVoteMutation.mutateAsync, feedbackDataSharingPreference],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const titleLabel = issue?.title ?? issueId ?? "Issue";
|
||||
setBreadcrumbs([
|
||||
|
|
@ -1739,35 +1801,13 @@ export function IssueDetail() {
|
|||
currentAssigneeValue={actualAssigneeValue}
|
||||
suggestedAssigneeValue={suggestedAssigneeValue}
|
||||
mentions={mentionOptions}
|
||||
composerDisabledReason={commentComposerDisabledReason}
|
||||
onVote={async (commentId, vote, options) => {
|
||||
await feedbackVoteMutation.mutateAsync({
|
||||
targetType: "issue_comment",
|
||||
targetId: commentId,
|
||||
vote,
|
||||
reason: options?.reason,
|
||||
allowSharing: options?.allowSharing,
|
||||
sharingPreferenceAtSubmit: feedbackDataSharingPreference,
|
||||
});
|
||||
}}
|
||||
onAdd={async (body, reopen, reassignment) => {
|
||||
if (reassignment) {
|
||||
await addCommentAndReassign.mutateAsync({ body, reopen, reassignment });
|
||||
return;
|
||||
}
|
||||
await addComment.mutateAsync({ body, reopen });
|
||||
}}
|
||||
imageUploadHandler={async (file) => {
|
||||
const attachment = await uploadAttachment.mutateAsync(file);
|
||||
return attachment.contentPath;
|
||||
}}
|
||||
onAttachImage={async (file) => {
|
||||
await uploadAttachment.mutateAsync(file);
|
||||
}}
|
||||
onInterruptQueued={async (runId) => {
|
||||
await interruptQueuedComment.mutateAsync(runId);
|
||||
}}
|
||||
onInterruptQueued={handleInterruptQueued}
|
||||
interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
|
||||
composerDisabledReason={commentComposerDisabledReason}
|
||||
onVote={handleCommentVote}
|
||||
onAdd={handleCommentAdd}
|
||||
imageUploadHandler={handleCommentImageUpload}
|
||||
onAttachImage={handleCommentAttachImage}
|
||||
onCancelRun={runningIssueRun
|
||||
? async () => {
|
||||
await interruptQueuedComment.mutateAsync(runningIssueRun.id);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue