paperclip/ui/src
Devin Foley 3264f9c1f6
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>
2026-04-08 17:54:03 -07:00
..
adapters Merge branch 'master' into fix/configurable-claimed-api-key-path 2026-04-06 06:17:42 -04:00
api Merge pull request #2441 from DanielSousa/skill-removal-ui 2026-04-07 21:51:51 -05:00
components Fix typing lag in long comment threads (PAPA-63) (#3163) 2026-04-08 17:54:03 -07:00
context Default sub-issues to parent workspace 2026-04-06 21:24:44 -05:00
fixtures Polish issue chat chain-of-thought rendering 2026-04-08 06:02:34 -05:00
hooks Implement assistant-ui issue chat thread 2026-04-08 06:02:34 -05:00
lib Reuse chat-style run feed on dashboard 2026-04-08 06:02:34 -05:00
pages Fix typing lag in long comment threads (PAPA-63) (#3163) 2026-04-08 17:54:03 -07:00
plugins Enhance plugin loading and toolbar integration 2026-03-14 15:27:45 -07:00
App.tsx Polish issue chat layout and add UX lab 2026-04-08 06:02:34 -05:00
index.css Polish issue chat transcript presentation 2026-04-08 06:02:34 -05:00
main.tsx Add skill slash-command autocomplete 2026-04-04 17:48:54 -05:00
vite-env.d.ts Add feedback voting and thumbs capture flow 2026-04-02 09:11:49 -05:00