## 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>
Action bar for agent messages is now: [copy] [thumbs up] [thumbs down] [date] [three dots].
Date shows relative time (e.g. "2h ago") if < 1 week old, otherwise short date (e.g. "Apr 6").
Hovering the date shows full timestamp tooltip. Date links to the comment anchor.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Agent comment header now only shows name (+ running badge)
- Date, copy, thumbs up/down, and three-dots menu all in action bar
- Activity event STATUS/ASSIGNEE labels changed from text-[9px] to
text-xs to match value font size
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Replace absolute positioning (-right-8) with a flex row layout for the
"You" avatar. The avatar now sits naturally to the right of the bubble
via flex justify-end + gap-2.5, avoiding overflow clipping issues.
Max-width 85% is on the content column, not the bubble div, so the
bubble + avatar together fill the row naturally.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Use relative positioning with pr-8 reserved space and absolute
positioning for the avatar, so it sits outside the content column
boundary while the bubble's right edge aligns with the column edge.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Scale activity components (events, runs) to ~80% font size with
xs avatars for a quieter visual weight
- Hide succeeded runs from the timeline; only show failed/errored
- Always show three-dots menu on agent comments with "Copy message"
option, plus optional "View run" when available
- User avatar repositioned to top-right (items-start) of message
- Change "Me" → "You" in assignee labels for natural chat phrasing
("You updated this task")
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Agent messages: avatar outside left (matching feed items alignment),
always shown, consistently uses icon avatar instead of initials
- User messages: avatar outside right, action bar moved below the
gray bubble, gray darkened to bg-muted
- System events: right-aligned when actor is the current user
- Run messages: use agent icon avatar consistently
- Pass actorType/actorId in event metadata for current-user detection
Co-Authored-By: Paperclip <noreply@paperclip.ing>
User messages: right-aligned bubbles (85% max-width) with gray
background, no border. Hover reveals short date + copy icon.
Agent messages: borderless with avatar, name, date and three-dots
in header. Left-aligned action bar with icon-only copy, thumbs up,
and thumbs down. Thumbs down opens a floating popover for reason.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The IssueChatCtx.Provider was opened but never closed, causing the
context to not properly wrap the thread. This, combined with the
stable component references via context (already in place), ensures
OutputFeedbackButtons state is preserved across re-renders when
feedback votes update.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Strip the rounded border, padding, background gradient, and shadow
from ThreadPrimitive.Root so the chat thread flows naturally without
a bordered wrapper container.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Give the leading element of each row (the "For" text and the
Eye/ShieldCheck icons) a fixed w-6 width so all InlineEntitySelector
pills start at the same horizontal position.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Comment out non-functional Labels chip in new-issue bottom bar
- Remove reviewer/approver mini pills from bottom chip bar
- Add three-dot menu (⋯) next to Project selector in the "For/in" row
- Clicking Reviewer or Approver in that menu toggles a full-sized
participant selector row under Assignee, matching its styling
- Toggling off clears the selection
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The Upload button was missing the pill/chip styling (border, rounded-md,
padding) that all other buttons in the chip bar have. Apply the same
className pattern used by the Labels chip.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Per feedback: reviewer/approver pickers were incorrectly placed in the
issue header row. This moves them back to the Properties sidebar at
regular size and adds them as small chip-style selectors in the
new-issue dialog's bottom bar (next to Upload), matching the existing
chip styling.
- Restored Reviewers/Approvers PropertyPicker rows in IssueProperties
- Removed ExecutionParticipantPicker pills from IssueDetail header
- Added Eye/ShieldCheck-icon reviewer/approver InlineEntitySelectors
in NewIssueDialog chip bar after Upload button
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Extract execution participant pickers from sidebar PropertyPicker rows into
compact pill-style Popover triggers in the issue header row, next to labels.
Creates a reusable ExecutionParticipantPicker component with matching
text-[10px] sizing. Removes the old sidebar rows and unused code.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
On desktop, the floating scroll-to-bottom button now shifts left
to stay clear of the properties panel when it's open (320px + margin).
Mobile positioning is unchanged.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
The DialogContent base class applies sm:max-w-lg which was overriding
the wider max-w setting. Use \!important to ensure the modal takes up
90% of viewport width.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Long branch/folder paths now wrap with break-all instead of truncating
and overflowing. Copy icon is always visible instead of hover-only,
since the sidebar is narrow and hover-reveal was hiding it behind overflow.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Make modal much wider (90vw) to show full document content
- Use monospace font in diff area for better readability
- Enable word-wrap with pre-wrap so long lines wrap cleanly
without breaking line number gutters
- Move revision selectors into a single row with colored
Old/New badges instead of stacked Left:/Right: labels
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Add a "View diff" option to the document three-dot menu (visible when
revision > 1) that opens a modal showing side-by-side changes between
revisions using react-diff-viewer-continued. Defaults to comparing the
current revision with its predecessor, with dropdowns to select any two
revisions.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
Adds a new workspace section to the IssueProperties sidebar that
displays branch name and folder path (cwd) from the execution
workspace. Both values have copy-to-clipboard buttons and truncated
display with full path on hover.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
When dragging files like .zip onto the issue description editor, non-image
files are now uploaded as attachments instead of being silently ignored.
Images continue to be handled inline by MDXEditor's image plugin.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
dotta