feat(desktop): draw review threads on their lines in Files changed

Merged
DA
1d ago
+782-103

Summary

Fourth in the Pierre stack, now one commit on main (#3229, #3233 and #3238 have merged).

The developer confirmed inline comments: review threads drawn on their lines in Files changed, as GitHub's diff draws them.

  • Placement. threadsOn (changes-model.ts) splits a file's threads in two. A thread is drawn under the line it stands on now, on the side it counts on (GitHub's LEFT is Pierre's deletions, RIGHT is additions), keyed by its first comment's page. A thread whose line a later push took away (line: null) stands in a list above the file's diff, naming the line it was made on.

  • Pierre annotations. The diff contract gains annotations (key, side, line) and renderAnnotation(key) → HTMLElement. The bundle maps them onto Pierre's lineAnnotations / renderAnnotation. Pierre puts the element in the host's light DOM, slotted under its line, so the panel's own stylesheets draw it and nothing passes through inline style markup (the CSP still holds). PierreDiff keeps one element per key and React-portals the thread's content into it.

  • Drawing. AgentPullRequestTab hands AgentChangesTab the threads from the header's conversation read, plus a draw door. Since #3250 that read runs whichever tab is shown, so Files changed has the threads. InlineThread draws a thread with the overview's own parts (ThreadComments: PersonRef, RelativeTime, GitHubWords through EntryWords, and "N more replies on GitHub"). Resolved and outdated threads fold closed, and every thread folds while Minimize inline comments (the diffMinimizeComments app setting from #3238) is on.

  • Find. find-matches.ts reads a <slot> in a marked shadow root as the nodes its host slots there, so ⌘F finds words in the comments under their lines.

  • Reply / Resolve on the line. ThreadComments ends in #3308's <ThreadActions>, so a thread under its line in Files changed offers Reply… and Resolve conversation as the Conversation's does (the tab's ThreadWritesProvider already wraps Files changed). Covered by a new agent-pull-request-tab.test.ts case.

  • Unplaced threads. A thread is drawn on its line only where the file's diff draws a row for it; outdated threads, threads on lines no hunk shows, and threads on binary/too-large/empty patches stand above the diff naming their lines. Refresh changes reads the conversation again too.

Evidence

  • changes-model.test.ts covers placement on each side, outdated threads above, other files left out, and threads with no comment dropped.
  • agent-changes-tab.test.ts checks that the bundle is handed the annotation, that the annotation's element holds the drawn thread, and that an outdated thread stands above the diff.
  • agent-pull-request-tab.test.ts checks that Files changed draws a review's thread under line 13, with its comment's words through the overview's markdown, open by default and folded once Minimize inline comments is switched on in the Diff settings popover.
  • find-matches.test.ts checks that slotted content is found where its slot stands.
  • I rendered an annotation in the real bundle under the panel CSP. It stands under its line, indented past the gutter.
  • pnpm check:affected is green except src/main/app-menu.test.ts, which can't load Electron in the sandbox (environmental).

Notes

  • #testing/app-state's handSettings now passes acts other than settings writes to the bridge the test already held.
  • The Files changed extras (another agent, stacked on this) will move these annotations to Pierre's CodeView, keeping the key → element contract.

Made with Luke

Summary by cubic

Draws review threads on their lines in Files changed, as GitHub's diff draws them.

  • A thread stands under its line only where the diff draws a row for that line; one whose line no hunk shows, one a later push outdated, and one on a file whose diff is not drawn stand above the diff.
  • Resolved and outdated threads fold closed, as does every thread while Minimize inline comments is on.
  • A thread on its line offers Reply and Resolve as the Conversation's does.
  • Refresh changes reads the threads again along with the files, and ⌘F finds the comment text slotted under diff lines.
  • Inline threads take their border, fill, and spacing from the --luke-* roles, which replaced the legacy CSS aliases.