From 9370a8c7f4cc7f2d7c55ab93ed4d6fef099718da Mon Sep 17 00:00:00 2001
From: Johannes du Plessis <johannes@langchain.dev>
Date: Tue, 23 Jun 2026 16:01:46 -0700
Subject: [PATCH] feat: inline PR comments in the reviews UI (#1600)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: inline PR comments in the reviews UI

Click the diff gutter "+" on a line to open an inline comment composer
(rendered like the finding card via a Pierre annotation); submitting
posts a real inline PR review comment as the signed-in user through a
new POST /reviews/{owner}/{repo}/{number}/comments. The "+" press-drag →
"Add to Chat" selection path is unchanged.

* feat: GitHub-parity comment box, PR comments dropdown, collapse nav

- Comment composer now mirrors GitHub's box: Write/Preview tabs (markdown
  rendered via the existing Markdown component) and a markdown toolbar
  (heading, bold, italic, quote, code, link, bulleted/numbered/task list).
- Surface other people's inline PR comments in a Devin-style dropdown in the
  review header (search + link to the thread on GitHub). New
  GET /reviews/{owner}/{repo}/{number}/comments lists them and flags the
  reviewer's own (marker-bearing) comments so they're filtered out.
- Collapse the global nav by default on a review detail page, restoring the
  prior preference on leave.

* feat: bigger comment-toolbar icons; open dropdown comments inline

- Enlarge the markdown toolbar glyphs (Phosphor) in the comment composer —
  they were rendering at 10px.
- Clicking a comment in the PR comments dropdown now opens it inline in the
  diff as a read-only finding-style card (InlineComment), scrolling its line
  into view, instead of navigating to GitHub. Falls back to GitHub when the
  comment's file/line isn't in the current diff.

* fix: drive "Add to Chat" from native text selection

The gutter "+" is now comment-only; wiring its click to the composer
conflicted with its old double-duty as the drag-to-select handle, which
broke selection → "Add to Chat". Switch to Devin's model: disable Pierre's
interactive line selection and instead map a native text highlight in the
diff to a line range (via the data-line / data-line-type attributes Pierre
stamps on each line, read from the diff's open shadow root) to show the
"Add to Chat" popup. ⌘L and the existing attachment/popup path are unchanged.

* feat: gutter "+" drag selects a range for multi-line comments

Re-enable Pierre's gutter line selection so dragging the "+" down the
gutter comments across a range (click still comments on a single line);
onLineSelectionEnd routes the range to the composer. Native code-text
selection still drives "Add to Chat" — Pierre only line-selects from the
gutter, and onLineSelectionEnd bails when a native text selection is
present, so a code highlight never opens the composer.

* fix: keep the range highlighted while its comment composer is open

Previously opening the composer cleared the selection, so the lines being
commented on lost their highlight. Drive the controlled selection from the
open comment draft's range so the rows stay highlighted until the composer
is closed.

* fix: address PR review — paginate comments, fall back for outdated ones

- list_review_comments now pages through all PR review comments (bounded by
  _MAX_REVIEW_COMMENT_PAGES) instead of returning only the first 100, so older
  comments still show in the dropdown.
- Surface GitHub's outdated flag (position == null) as is_outdated; opening such
  a comment (or one whose line isn't in the diff) now opens it on GitHub instead
  of silently rendering nothing, plus a timeout fallback if the annotation never
  mounts (e.g. collapsed context).
---
 agent/dashboard/review_api.py                 | 146 +++
 agent/dashboard/routes.py                     |  55 +-
 .../components/agents/ReviewCommentsMenu.tsx  | 167 ++++
 ui/src/components/agents/ReviewMainBody.tsx   | 844 ++++++++++++++++--
 ui/src/components/sidebar-layout.tsx          |   6 +
 ui/src/lib/api.ts                             |  47 +
 .../agents/reviews/$owner.$repo.$number.tsx   |  37 +-
 7 files changed, 1235 insertions(+), 67 deletions(-)
 create mode 100644 ui/src/components/agents/ReviewCommentsMenu.tsx

diff --git a/agent/dashboard/review_api.py b/agent/dashboard/review_api.py
index 3351c884..6389601d 100644
--- a/agent/dashboard/review_api.py
+++ b/agent/dashboard/review_api.py
@@ -10,6 +10,7 @@ from __future__ import annotations
 
 import ipaddress
 import logging
+import re
 import socket
 from collections.abc import Awaitable, Callable
 from typing import Any, Literal
@@ -55,6 +56,43 @@ async def _github_get(
     return response.json()
 
 
+def _github_error_message(response: httpx.Response) -> str:
+    """Best-effort extraction of GitHub's error message for surfacing to the UI."""
+    fallback = f"GitHub request failed ({response.status_code})"
+    try:
+        data = response.json()
+    except ValueError:
+        return fallback
+    if not isinstance(data, dict):
+        return fallback
+    message = data.get("message")
+    message_str = message if isinstance(message, str) else ""
+    errors = data.get("errors")
+    detail_parts: list[str] = []
+    if isinstance(errors, list):
+        for err in errors:
+            if isinstance(err, dict) and isinstance(err.get("message"), str):
+                detail_parts.append(err["message"])
+    detail = "; ".join(detail_parts)
+    if message_str and detail:
+        return f"{message_str}: {detail}"
+    return message_str or detail or fallback
+
+
+async def _github_post(path: str, token: str, *, json: dict[str, Any]) -> Any:
+    async with httpx.AsyncClient(timeout=_GITHUB_TIMEOUT) as client:
+        response = await client.post(
+            f"{_GITHUB_API}{path}", headers=github_headers(token), json=json
+        )
+    if response.status_code >= 400:
+        message = _github_error_message(response)
+        logger.warning("GitHub POST %s failed: %s %s", path, response.status_code, message)
+        # Pass 4xx through verbatim (422 = line not in diff, 403 = perms); collapse
+        # 5xx to a 502 so a GitHub outage doesn't masquerade as a client error.
+        raise HTTPException(response.status_code if response.status_code < 500 else 502, message)
+    return response.json()
+
+
 def reviewer_thread_id(owner: str, repo: str, pr_number: int) -> str:
     import uuid
 
@@ -364,6 +402,114 @@ async def get_pr_head_sha(owner: str, repo: str, pr_number: int) -> str:
     return sha if isinstance(sha, str) else ""
 
 
+async def create_review_comment(
+    owner: str,
+    repo: str,
+    pr_number: int,
+    *,
+    token: str,
+    path: str,
+    line: int,
+    side: Literal["LEFT", "RIGHT"],
+    body: str,
+    start_line: int | None = None,
+    start_side: Literal["LEFT", "RIGHT"] | None = None,
+) -> dict[str, Any]:
+    """Post a single inline review comment to a PR using the caller's token.
+
+    Unlike the reviewer agent (which batches comments into one review via the App
+    token), this posts a standalone comment immediately, authored by the signed-in
+    user. ``commit_id`` is the PR's live head SHA. GitHub errors surface verbatim so
+    the UI can explain a 422 (line not part of the diff) or 403 (missing permission).
+    """
+    head_sha = await get_pr_head_sha(owner, repo, pr_number)
+    if not head_sha:
+        raise HTTPException(502, "could not resolve PR head commit")
+    payload: dict[str, Any] = {
+        "body": body,
+        "commit_id": head_sha,
+        "path": path,
+        "line": line,
+        "side": side,
+    }
+    # GitHub forbids multi-line ranges that span sides; only add the range start
+    # when it is a distinct earlier line on the same side.
+    if start_line is not None and start_line != line:
+        payload["start_line"] = start_line
+        payload["start_side"] = start_side or side
+    return await _github_post(
+        f"/repos/{owner}/{repo}/pulls/{pr_number}/comments", token, json=payload
+    )
+
+
+_HTML_COMMENT_RE = re.compile(r"<!--.*?-->", re.DOTALL)
+# Inline comments the reviewer posts carry this hidden marker (see reviewer_publish).
+_OPEN_SWE_COMMENT_RE = re.compile(r"<!--\s*open-swe-review-comment\b")
+_REVIEW_COMMENTS_PER_PAGE = 100
+# Bound the fetch so a pathological PR can't trigger unbounded paging (~2000 comments).
+_MAX_REVIEW_COMMENT_PAGES = 20
+
+
+def _clean_comment_body(body: str) -> str:
+    return _HTML_COMMENT_RE.sub("", body).strip()
+
+
+def _normalize_review_comment(item: dict[str, Any]) -> dict[str, Any]:
+    body = item.get("body") if isinstance(item.get("body"), str) else ""
+    user = item.get("user") if isinstance(item.get("user"), dict) else {}
+    line = item.get("line")
+    if not isinstance(line, int):
+        original = item.get("original_line")
+        line = original if isinstance(original, int) else None
+    return {
+        "id": item.get("id"),
+        "author": user.get("login") if isinstance(user.get("login"), str) else "",
+        "author_avatar_url": (
+            user.get("avatar_url") if isinstance(user.get("avatar_url"), str) else ""
+        ),
+        "path": item.get("path") if isinstance(item.get("path"), str) else "",
+        "line": line,
+        "side": item.get("side") if item.get("side") in ("LEFT", "RIGHT") else "RIGHT",
+        "body": _clean_comment_body(body),
+        "html_url": item.get("html_url") if isinstance(item.get("html_url"), str) else "",
+        "created_at": item.get("created_at") if isinstance(item.get("created_at"), str) else "",
+        "is_open_swe": bool(_OPEN_SWE_COMMENT_RE.search(body)),
+        # GitHub nulls `position` when the line no longer appears in the current
+        # diff — i.e. the comment is outdated and can't be rendered inline.
+        "is_outdated": not isinstance(item.get("position"), int),
+    }
+
+
+async def list_review_comments(owner: str, repo: str, pr_number: int) -> dict[str, Any]:
+    """List inline review comments on a PR (newest first), normalized for the UI.
+
+    Surfaces every inline comment on the PR — including humans' — not just the
+    reviewer's findings. ``is_open_swe`` flags the reviewer's own (marker-bearing)
+    comments so the UI can separate them from other people's. Pages through the
+    full list (bounded by ``_MAX_REVIEW_COMMENT_PAGES``) so older comments aren't
+    silently dropped.
+    """
+    token = await _require_app_token()
+    comments: list[dict[str, Any]] = []
+    for page in range(1, _MAX_REVIEW_COMMENT_PAGES + 1):
+        raw = await _github_get(
+            f"/repos/{owner}/{repo}/pulls/{pr_number}/comments",
+            token,
+            params={
+                "per_page": _REVIEW_COMMENTS_PER_PAGE,
+                "page": page,
+                "sort": "created",
+                "direction": "desc",
+            },
+        )
+        if not isinstance(raw, list) or not raw:
+            break
+        comments.extend(_normalize_review_comment(item) for item in raw if isinstance(item, dict))
+        if len(raw) < _REVIEW_COMMENTS_PER_PAGE:
+            break
+    return {"comments": comments}
+
+
 async def get_review(owner: str, repo: str, pr_number: int) -> dict[str, Any]:
     thread_id = reviewer_thread_id(owner, repo, pr_number)
     client = langgraph_client()
diff --git a/agent/dashboard/routes.py b/agent/dashboard/routes.py
index 0e1cb429..d38d0c34 100644
--- a/agent/dashboard/routes.py
+++ b/agent/dashboard/routes.py
@@ -5,7 +5,7 @@ from __future__ import annotations
 import hmac
 import logging
 import os
-from typing import Any
+from typing import Any, Literal
 
 import httpx
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Request
@@ -83,8 +83,10 @@ from .repo_snapshots import (
     update_repo_snapshot,
 )
 from .review_api import (
+    create_review_comment,
     get_review,
     get_review_diff,
+    list_review_comments,
     list_reviews,
     proxy_pr_image,
     trigger_re_review,
@@ -1070,6 +1072,57 @@ async def api_re_review(
     return await trigger_re_review(owner, repo, pr_number, session["sub"])
 
 
+class ReviewCommentCreate(BaseModel):
+    path: str
+    line: int
+    side: Literal["LEFT", "RIGHT"]
+    body: str
+    start_line: int | None = None
+    start_side: Literal["LEFT", "RIGHT"] | None = None
+
+
+@router.get("/reviews/{owner}/{repo}/{pr_number}/comments")
+async def api_list_review_comments(
+    owner: str,
+    repo: str,
+    pr_number: int,
+    session: dict[str, Any] = _SESSION_DEP,
+) -> dict[str, Any]:
+    await require_repo_access_for_user(session["sub"], f"{owner}/{repo}")
+    return await list_review_comments(owner, repo, pr_number)
+
+
+@router.post("/reviews/{owner}/{repo}/{pr_number}/comments")
+async def api_create_review_comment(
+    owner: str,
+    repo: str,
+    pr_number: int,
+    comment: ReviewCommentCreate,
+    session: dict[str, Any] = _SESSION_DEP,
+) -> dict[str, Any]:
+    await require_repo_access_for_user(session["sub"], f"{owner}/{repo}")
+    body = comment.body.strip()
+    if not body:
+        raise HTTPException(422, "comment body is required")
+    # Post as the signed-in user (their user-to-server token), so the comment is
+    # attributed to them rather than the Open SWE app.
+    token = await get_valid_access_token(session["sub"])
+    if not token:
+        raise HTTPException(401, "GitHub re-auth required")
+    return await create_review_comment(
+        owner,
+        repo,
+        pr_number,
+        token=token,
+        path=comment.path,
+        line=comment.line,
+        side=comment.side,
+        body=body,
+        start_line=comment.start_line,
+        start_side=comment.start_side,
+    )
+
+
 # --- PR chat (sandbox-less ``chat`` graph) -----------------------------------
 # The frontend points a LangGraph StreamProvider at the base
 # ``/reviews/{owner}/{repo}/{pr_number}/chat``; the SDK then issues the
diff --git a/ui/src/components/agents/ReviewCommentsMenu.tsx b/ui/src/components/agents/ReviewCommentsMenu.tsx
new file mode 100644
index 00000000..47c24731
--- /dev/null
+++ b/ui/src/components/agents/ReviewCommentsMenu.tsx
@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { ChatCircleIcon, MagnifyingGlassIcon } from "@phosphor-icons/react"
+
+import type { PrReviewComment } from "@/lib/api"
+import { api } from "@/lib/api"
+import { cn } from "@/lib/utils"
+
+function basename(path: string): string {
+  const idx = path.lastIndexOf("/")
+  return idx === -1 ? path : path.slice(idx + 1)
+}
+
+// Devin-style dropdown surfacing inline PR comments left by people (the
+// reviewer's own findings already render inline + in the side panel, so they're
+// filtered out). Each entry links to the comment thread on GitHub.
+export function ReviewCommentsMenu({
+  owner,
+  repo,
+  number,
+  onSelect,
+}: {
+  owner: string
+  repo: string
+  number: number
+  onSelect: (comment: PrReviewComment) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+
+  const comments = useQuery({
+    queryKey: ["reviewComments", owner, repo, number],
+    queryFn: () => api.listReviewComments(owner, repo, number),
+    enabled: Number.isFinite(number),
+    staleTime: 30_000,
+  })
+
+  const otherComments = useMemo(
+    () => (comments.data?.comments ?? []).filter((c) => !c.is_open_swe),
+    [comments.data]
+  )
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return otherComments
+    return otherComments.filter((c) =>
+      `${c.author} ${c.path} ${c.body}`.toLowerCase().includes(q)
+    )
+  }, [otherComments, query])
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      if (
+        event.target instanceof Node &&
+        !wrapperRef.current?.contains(event.target)
+      ) {
+        setOpen(false)
+      }
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false)
+    }
+    window.addEventListener("pointerdown", onPointerDown)
+    window.addEventListener("keydown", onKeyDown)
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown)
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [open])
+
+  const count = otherComments.length
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        aria-label="PR comments"
+        aria-expanded={open}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
+          open && "text-foreground"
+        )}
+      >
+        <ChatCircleIcon className="size-3.5" />
+        <span>Comments</span>
+        {count > 0 && (
+          <span className="rounded bg-muted px-1 text-[10px] font-medium text-foreground">
+            {count}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div className="absolute top-full right-0 z-50 mt-1 w-96 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md">
+          <div className="flex items-center gap-1.5 border-b border-border px-2 py-1.5">
+            <MagnifyingGlassIcon className="size-3.5 shrink-0 text-muted-foreground" />
+            <input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search comments"
+              className="w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+          <div className="max-h-96 overflow-y-auto">
+            {comments.isLoading ? (
+              <p className="px-3 py-4 text-center text-xs text-muted-foreground">
+                Loading…
+              </p>
+            ) : comments.isError ? (
+              <p className="px-3 py-4 text-center text-xs text-destructive">
+                Failed to load comments
+              </p>
+            ) : filtered.length === 0 ? (
+              <p className="px-3 py-4 text-center text-xs text-muted-foreground">
+                {otherComments.length === 0
+                  ? "No comments yet"
+                  : "No matching comments"}
+              </p>
+            ) : (
+              <ul className="divide-y divide-border">
+                {filtered.map((comment) => (
+                  <li key={comment.id}>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onSelect(comment)
+                        setOpen(false)
+                      }}
+                      className="flex w-full gap-2 px-3 py-2 text-left hover:bg-muted/50"
+                    >
+                      {comment.author_avatar_url ? (
+                        <img
+                          src={comment.author_avatar_url}
+                          alt=""
+                          className="mt-0.5 size-4 shrink-0 rounded-full"
+                        />
+                      ) : (
+                        <span className="mt-0.5 size-4 shrink-0 rounded-full bg-muted" />
+                      )}
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-1.5 text-[11px]">
+                          <span className="font-medium text-foreground">
+                            {comment.author}
+                          </span>
+                          {comment.path && (
+                            <span className="truncate font-mono text-muted-foreground">
+                              {basename(comment.path)}
+                              {comment.line !== null ? `:${comment.line}` : ""}
+                            </span>
+                          )}
+                        </div>
+                        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+                          {comment.body}
+                        </p>
+                      </div>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/ui/src/components/agents/ReviewMainBody.tsx b/ui/src/components/agents/ReviewMainBody.tsx
index 2e34c675..9fa30a78 100644
--- a/ui/src/components/agents/ReviewMainBody.tsx
+++ b/ui/src/components/agents/ReviewMainBody.tsx
@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import {
+  Fragment,
   createContext,
   memo,
   useCallback,
@@ -14,16 +15,27 @@ import {
   ArrowSquareOutIcon,
   BugBeetleIcon,
   CaretDownIcon,
+  ChatCircleIcon,
   CheckCircleIcon,
   CheckIcon,
   CircleIcon,
+  CodeIcon,
   CopyIcon,
   FlagIcon,
   GitPullRequestIcon,
   InfoIcon,
+  LinkIcon,
+  ListBulletsIcon,
+  ListChecksIcon,
+  ListNumbersIcon,
+  QuotesIcon,
   RowsIcon,
   SquareSplitHorizontalIcon,
+  TextBIcon,
+  TextHIcon,
+  TextItalicIcon,
   XCircleIcon,
+  XIcon,
 } from "@phosphor-icons/react"
 import { IoLogoGithub } from "react-icons/io5"
 import {
@@ -31,6 +43,7 @@ import {
   Virtualizer,
   WorkerPoolContextProvider,
 } from "@pierre/diffs/react"
+import type { Icon } from "@phosphor-icons/react"
 import type { FileContents } from "@pierre/diffs/react"
 import type {
   FileDiff as CoreFileDiff,
@@ -40,7 +53,9 @@ import type {
 } from "@pierre/diffs"
 
 import type {
+  PrReviewComment,
   ReviewCheckRun,
+  ReviewCommentCreate,
   ReviewDetail,
   ReviewDiffFile,
   ReviewFinding,
@@ -68,12 +83,22 @@ import {
   useDiffOptions,
   warmDiffHighlighter,
 } from "@/components/agents/utils/diffUtils"
+import { IconButton } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Textarea } from "@/components/ui/textarea"
 import { api, reviewImageProxyUrl } from "@/lib/api"
 import { cn } from "@/lib/utils"
 
 type SideTab = "info" | "chat"
 
+// Metadata carried by a Pierre diff line annotation. Findings render as the
+// read-only InlineFinding card; a draftComment renders the inline composer; a
+// comment renders an existing PR comment opened from the comments dropdown.
+type ReviewAnnotation =
+  | { kind: "finding"; finding: ReviewFinding }
+  | { kind: "draftComment"; path: string; range: SelectedLineRange }
+  | { kind: "comment"; comment: PrReviewComment }
+
 const REVIEW_VIEW_STORAGE_KEY = "open-swe.review.view"
 const REVIEW_DIFF_STYLE_STORAGE_KEY = "open-swe.review.diffStyle"
 const FINDING_SCROLL_MAX_FRAMES = 120
@@ -135,6 +160,59 @@ function buildSelectionAttachments(
   ]
 }
 
+interface ShadowRootWithSelection {
+  getSelection?: () => Selection | null
+}
+
+// Read the active selection inside a <diffs-container>'s open shadow root.
+// Chromium exposes ShadowRoot.getSelection(); elsewhere fall back to the document
+// selection (events from open shadow DOM are composed/retargeted).
+function readDiffSelection(
+  container: Element | null | undefined
+): Selection | null {
+  const root = container?.shadowRoot
+  if (root) {
+    const scoped = (root as ShadowRoot & ShadowRootWithSelection).getSelection
+    if (typeof scoped === "function") return scoped.call(root)
+  }
+  return typeof document !== "undefined" ? document.getSelection() : null
+}
+
+// Map a selection boundary node to its file line number + side via the
+// data-line / data-line-type attributes Pierre stamps on every line div.
+function lineMetaFromNode(
+  node: Node | null
+): { line: number; side: SelectionSide } | null {
+  const el = node instanceof Element ? node : (node?.parentElement ?? null)
+  const lineEl = el?.closest("[data-line]")
+  if (!lineEl) return null
+  const line = Number(lineEl.getAttribute("data-line"))
+  if (!Number.isInteger(line)) return null
+  const type = lineEl.getAttribute("data-line-type") ?? ""
+  return { line, side: type.includes("deletion") ? "deletions" : "additions" }
+}
+
+// Resolve the current native text selection inside a diff to a line range, so a
+// plain text highlight can drive "Add to Chat" (Devin-style) instead of a
+// gutter drag.
+function selectedRangeFromDiff(
+  container: Element | null | undefined
+): SelectedLineRange | null {
+  const selection = readDiffSelection(container)
+  if (!selection || selection.isCollapsed || selection.rangeCount === 0)
+    return null
+  const range = selection.getRangeAt(0)
+  const start = lineMetaFromNode(range.startContainer)
+  const end = lineMetaFromNode(range.endContainer)
+  if (!start || !end) return null
+  return {
+    start: start.line,
+    side: start.side,
+    end: end.line,
+    endSide: end.side,
+  }
+}
+
 // Scroll a file card / group flush to the top of the diff scroller. Under
 // virtualization, scrollIntoView computes its target against estimated row
 // heights; scrolling past unmeasured files reconciles their real heights
@@ -186,12 +264,12 @@ interface PositionedDiffInstance {
 
 interface RegisteredDiffInstance {
   host: HTMLElement
-  instance: CoreFileDiff<ReviewFinding>
+  instance: CoreFileDiff<ReviewAnnotation>
 }
 
 function hasLinePosition(
-  instance: CoreFileDiff<ReviewFinding>
-): instance is CoreFileDiff<ReviewFinding> & PositionedDiffInstance {
+  instance: CoreFileDiff<ReviewAnnotation>
+): instance is CoreFileDiff<ReviewAnnotation> & PositionedDiffInstance {
   return (
     typeof (instance as { getLinePosition?: unknown }).getLinePosition ===
     "function"
@@ -217,21 +295,14 @@ function scrollElementToCenter(el: HTMLElement, scroller: HTMLElement): number {
   return Math.abs(delta)
 }
 
-function scrollFindingLineToCenter({
-  target,
-  finding,
-  scroller,
-}: {
-  target: RegisteredDiffInstance
-  finding: ReviewFinding
+function scrollDiffLineToCenter(
+  target: RegisteredDiffInstance,
+  lineNumber: number,
+  side: SelectionSide,
   scroller: HTMLElement
-}): boolean {
-  if (finding.end_line === null || !hasLinePosition(target.instance))
-    return false
-  const line = target.instance.getLinePosition(
-    finding.end_line,
-    findingSide(finding)
-  )
+): boolean {
+  if (!hasLinePosition(target.instance)) return false
+  const line = target.instance.getLinePosition(lineNumber, side)
   if (!line) return false
   const hostTop =
     target.host.getBoundingClientRect().top -
@@ -245,6 +316,24 @@ function scrollFindingLineToCenter({
   return true
 }
 
+function scrollFindingLineToCenter({
+  target,
+  finding,
+  scroller,
+}: {
+  target: RegisteredDiffInstance
+  finding: ReviewFinding
+  scroller: HTMLElement
+}): boolean {
+  if (finding.end_line === null) return false
+  return scrollDiffLineToCenter(
+    target,
+    finding.end_line,
+    findingSide(finding),
+    scroller
+  )
+}
+
 interface ResolvedGroup {
   index: number
   title: string
@@ -297,6 +386,52 @@ function findingSelectedRange(
   }
 }
 
+function selectionSideToGithub(
+  side: SelectionSide | undefined
+): "LEFT" | "RIGHT" {
+  return side === "deletions" ? "LEFT" : "RIGHT"
+}
+
+// Map a Pierre selection range to a GitHub inline-comment payload. GitHub
+// forbids multi-line ranges that span sides, so a cross-side selection collapses
+// to a single line on the end side; same-side ranges keep their start_line.
+function buildCommentPayload(
+  path: string,
+  range: SelectedLineRange,
+  body: string
+): ReviewCommentCreate {
+  const startSide = range.side ?? "additions"
+  const endSide = range.endSide ?? startSide
+  if (startSide !== endSide) {
+    return {
+      path,
+      line: range.end,
+      side: selectionSideToGithub(endSide),
+      body,
+      start_line: null,
+      start_side: null,
+    }
+  }
+  const side = selectionSideToGithub(endSide)
+  const lo = Math.min(range.start, range.end)
+  const hi = Math.max(range.start, range.end)
+  return {
+    path,
+    line: hi,
+    side,
+    body,
+    start_line: lo < hi ? lo : null,
+    start_side: lo < hi ? side : null,
+  }
+}
+
+function commentRangeLabel(range: SelectedLineRange): string {
+  const side = (range.endSide ?? range.side) === "deletions" ? "L" : "R"
+  const lo = Math.min(range.start, range.end)
+  const hi = Math.max(range.start, range.end)
+  return lo === hi ? `${side}${hi}` : `${side}${lo}-${hi}`
+}
+
 function findingClipboardText(finding: ReviewFinding): string {
   const style = GROUP_STYLES[finding.group]
   const lines = [
@@ -347,6 +482,9 @@ export interface ReviewMainBodyProps {
   // just the main body with an expand affordance (used inside the git panel).
   variant?: ReviewMainBodyVariant
   onExpand?: () => void
+  // A PR comment opened from the comments dropdown: shown inline at its line.
+  openComment?: PrReviewComment | null
+  onCloseOpenComment?: () => void
 }
 
 export function ReviewMainBody({
@@ -354,6 +492,8 @@ export function ReviewMainBody({
   diffFiles,
   variant = "full",
   onExpand,
+  openComment,
+  onCloseOpenComment,
 }: ReviewMainBodyProps) {
   // The composer provider lives here so it remounts in lockstep with the
   // head_sha-keyed body (and the activeId-keyed chat thread). The embedded
@@ -370,7 +510,13 @@ export function ReviewMainBody({
   }
   return (
     <ReviewChatComposerProvider>
-      <ReviewBodyInner detail={detail} diffFiles={diffFiles} variant="full" />
+      <ReviewBodyInner
+        detail={detail}
+        diffFiles={diffFiles}
+        variant="full"
+        openComment={openComment ?? null}
+        onCloseOpenComment={onCloseOpenComment}
+      />
     </ReviewChatComposerProvider>
   )
 }
@@ -380,11 +526,15 @@ function ReviewBodyInner({
   diffFiles,
   variant,
   onExpand,
+  openComment = null,
+  onCloseOpenComment,
 }: {
   detail: ReviewDetail
   diffFiles: Array<ReviewDiffFile> | null
   variant: ReviewMainBodyVariant
   onExpand?: () => void
+  openComment?: PrReviewComment | null
+  onCloseOpenComment?: () => void
 }) {
   const embedded = variant === "embedded"
   const composer = useReviewChatComposer()
@@ -405,6 +555,11 @@ function ReviewBodyInner({
   )
   const [expandedId, setExpandedId] = useState<string | null>(null)
   const [userSelection, setUserSelection] = useState<UserSelection | null>(null)
+  // The single open inline comment composer (at most one across all files).
+  const [commentDraft, setCommentDraft] = useState<{
+    file: string
+    range: SelectedLineRange
+  } | null>(null)
   const diffScrollElRef = useRef<HTMLDivElement | null>(null)
   const findingScrollRequestRef = useRef(0)
   const groupRefs = useRef<Record<number, HTMLDivElement | null>>({})
@@ -683,6 +838,15 @@ function ReviewBodyInner({
     [composer]
   )
 
+  // Open the inline comment composer for a line (gutter "+" click). Clearing the
+  // chat selection + expanded finding keeps the "+" owned by the composer alone.
+  const startComment = useCallback((path: string, range: SelectedLineRange) => {
+    setUserSelection(null)
+    setExpandedId(null)
+    setCommentDraft({ file: path, range })
+  }, [])
+  const closeComment = useCallback(() => setCommentDraft(null), [])
+
   // ⌘L / Ctrl+L adds the current line selection to the chat (Cursor-style).
   const userSelectionRef = useRef(userSelection)
   userSelectionRef.current = userSelection
@@ -774,13 +938,83 @@ function ReviewBodyInner({
     [markRead]
   )
 
+  // Open an existing PR comment inline: expand its file and scroll its line to
+  // center (mirrors openFromPanel). Comments whose file/line aren't in the
+  // current diff (e.g. outdated) have no inline anchor, so fall back to GitHub.
+  const closeOpenCommentRef = useRef(onCloseOpenComment)
+  closeOpenCommentRef.current = onCloseOpenComment
+  useEffect(() => {
+    if (!openComment) return
+    const { path, line } = openComment
+    const fallbackToGitHub = () => {
+      if (openComment.html_url) {
+        window.open(openComment.html_url, "_blank", "noopener,noreferrer")
+      }
+      closeOpenCommentRef.current?.()
+    }
+    const file = filesByPathRef.current.get(path)
+    // No inline anchor: the file isn't in the diff, the comment has no line, or
+    // it's outdated (its line no longer appears in the current diff).
+    if (!file || line === null || openComment.is_outdated) {
+      fallbackToGitHub()
+      return
+    }
+    setSelectedFile(path)
+    setExpandedFiles((prev) => ({ ...prev, [path]: true }))
+    const requestId = ++findingScrollRequestRef.current
+    const side: SelectionSide =
+      openComment.side === "LEFT" ? "deletions" : "additions"
+    const key = `comment:${openComment.id}`
+    let frames = 0
+    let lineScrollDone = false
+    let mounted = false
+    const snap = () => {
+      if (requestId !== findingScrollRequestRef.current) return
+      const scroller = diffScrollElRef.current
+      if (!scroller) return
+      const annotation = annotationRefs.current[key]
+      if (annotation?.isConnected && annotation.getClientRects().length > 0) {
+        mounted = true
+        const delta = scrollElementToCenter(annotation, scroller)
+        if (delta <= 1 || frames >= FINDING_SCROLL_MAX_FRAMES) return
+        frames += 1
+        requestAnimationFrame(snap)
+        return
+      }
+      const diffTarget = diffInstanceRefs.current[path]
+      if (diffTarget) {
+        lineScrollDone = scrollDiffLineToCenter(
+          diffTarget,
+          line,
+          side,
+          scroller
+        )
+      } else if (!lineScrollDone) {
+        const fileNode = fileRefs.current[path]
+        if (fileNode) scrollElementToCenter(fileNode, scroller)
+      }
+      if (frames++ < FINDING_SCROLL_MAX_FRAMES) {
+        requestAnimationFrame(snap)
+      } else if (!mounted) {
+        // The line never rendered (e.g. collapsed context) — fall back to GitHub
+        // rather than leaving the menu closed with nothing shown.
+        fallbackToGitHub()
+      }
+    }
+    requestAnimationFrame(snap)
+  }, [openComment])
+
   const renderFileCard = (file: ReviewDiffFile) => {
+    // Keep the range highlighted while its comment composer is open, so the
+    // user can see exactly which lines they're commenting on.
     const selectedLines =
       expandedFinding?.file === file.path && isAnchored(expandedFinding)
         ? findingSelectedRange(expandedFinding)
-        : userSelection?.file === file.path
-          ? userSelection.range
-          : null
+        : commentDraft?.file === file.path
+          ? commentDraft.range
+          : userSelection?.file === file.path
+            ? userSelection.range
+            : null
     return (
       <FileDiffCard
         key={file.path}
@@ -796,6 +1030,16 @@ function ReviewBodyInner({
         registerSection={registerSection}
         registerDiffInstance={registerDiffInstance}
         diffStyle={diffStyle}
+        owner={detail.owner}
+        repo={detail.repo}
+        prNumber={detail.number}
+        commentDraftRange={
+          commentDraft?.file === file.path ? commentDraft.range : null
+        }
+        onStartComment={embedded ? undefined : startComment}
+        onCloseComment={closeComment}
+        openComment={openComment?.path === file.path ? openComment : null}
+        onCloseOpenComment={onCloseOpenComment}
       />
     )
   }
@@ -1094,6 +1338,14 @@ const FileDiffCard = memo(function FileDiffCard({
   registerSection,
   registerDiffInstance,
   diffStyle,
+  owner,
+  repo,
+  prNumber,
+  commentDraftRange,
+  onStartComment,
+  onCloseComment,
+  openComment,
+  onCloseOpenComment,
 }: {
   file: ReviewDiffFile
   findings: Array<ReviewFinding>
@@ -1110,9 +1362,20 @@ const FileDiffCard = memo(function FileDiffCard({
     target: RegisteredDiffInstance | null
   ) => void
   diffStyle: DiffStyle
+  owner: string
+  repo: string
+  prNumber: number
+  commentDraftRange: SelectedLineRange | null
+  onStartComment?: (path: string, range: SelectedLineRange) => void
+  onCloseComment: () => void
+  openComment: PrReviewComment | null
+  onCloseOpenComment?: () => void
 }) {
   // No chat means no line-selection → "Add to Chat" affordance (embedded view).
   const selectable = Boolean(onAddToChat)
+  // Commenting rides the same gutter "+" as selection, so it's available only
+  // where the gutter utility is enabled (the full reviews page).
+  const commentable = selectable && Boolean(onStartComment)
   const diffOptions = useDiffOptions(diffStyle)
   const diffWrapperRef = useRef<HTMLDivElement | null>(null)
   const lastPointerRef = useRef<{ x: number; y: number } | null>(null)
@@ -1122,64 +1385,113 @@ const FileDiffCard = memo(function FileDiffCard({
     y: number
   } | null>(null)
 
-  const lineAnnotations = useMemo<Array<DiffLineAnnotation<ReviewFinding>>>(
+  const findingAnnotations = useMemo<
+    Array<DiffLineAnnotation<ReviewAnnotation>>
+  >(
     () =>
       findings
         .filter((finding) => finding.end_line !== null)
         .map((finding) => ({
           side: findingSide(finding),
           lineNumber: finding.end_line as number,
-          metadata: finding,
+          metadata: { kind: "finding", finding },
         })),
     [findings]
   )
 
-  // Native line selection plus the visible gutter "+" handle you can click and
-  // drag to select a range. onLineSelectionChange fires on every drag move; we
-  // push it into the controlled selection so the rows highlight live as you
-  // drag (in controlled mode Pierre only paints when the prop updates). The
-  // "Add to Chat" popup is shown on onLineSelectionEnd (release only); ⌘L
-  // (handled in ReviewBody) adds without it. onGutterUtilityClick must be
-  // non-null for Pierre to turn the "+" into a drag selector.
+  // The open draft composer and an opened existing comment each render inline as
+  // one more annotation, anchored to their line on the appropriate side.
+  const lineAnnotations = useMemo<
+    Array<DiffLineAnnotation<ReviewAnnotation>>
+  >(() => {
+    const extra: Array<DiffLineAnnotation<ReviewAnnotation>> = []
+    if (commentDraftRange) {
+      extra.push({
+        side:
+          commentDraftRange.endSide ?? commentDraftRange.side ?? "additions",
+        lineNumber: commentDraftRange.end,
+        metadata: {
+          kind: "draftComment",
+          path: file.path,
+          range: commentDraftRange,
+        },
+      })
+    }
+    if (openComment && openComment.line !== null) {
+      extra.push({
+        side: openComment.side === "LEFT" ? "deletions" : "additions",
+        lineNumber: openComment.line,
+        metadata: { kind: "comment", comment: openComment },
+      })
+    }
+    return extra.length > 0
+      ? [...findingAnnotations, ...extra]
+      : findingAnnotations
+  }, [findingAnnotations, commentDraftRange, openComment, file.path])
+
+  // The gutter "+" drives comments: a click comments on one line, and a drag down
+  // the gutter comments across a range (Pierre's gutter selection, which needs
+  // enableLineSelection). "Add to Chat" instead comes from a native text highlight
+  // on the code (handleTextSelection) — Pierre leaves code content user-selectable
+  // and only line-selects from the gutter, so the two don't collide. onLineSelectionEnd
+  // bails if a native text selection is present, so a code highlight never opens the
+  // composer (belt-and-suspenders in case Pierre ever reports a content drag).
   const cardOptions = useMemo(
     () => ({
       ...diffOptions,
-      enableLineSelection: selectable,
-      enableGutterUtility: selectable,
-      onGutterUtilityClick: selectable ? () => undefined : undefined,
-      onLineSelectionChange: (range: SelectedLineRange | null) =>
-        onSelectLines(file.path, range),
-      onLineSelectionEnd: (range: SelectedLineRange | null) => {
-        onSelectLines(file.path, range)
-        if (!range) {
-          setPopup(null)
-          return
-        }
-        // Anchor to the gutter "+" handle Pierre places on the selection's
-        // bottom line (inside the diff's shadow DOM) — a stable position,
-        // unlike the pointer-release point. Fall back to the pointer.
-        const host = diffWrapperRef.current?.querySelector("diffs-container")
-        const handle = host?.shadowRoot?.querySelector(
-          "[data-gutter-utility-slot]"
-        )
-        const rect =
-          handle instanceof HTMLElement ? handle.getBoundingClientRect() : null
-        const pointer = lastPointerRef.current
-        if (rect) setPopup({ range, x: rect.left, y: rect.top })
-        else if (pointer) setPopup({ range, x: pointer.x, y: pointer.y })
-        else setPopup(null)
-      },
+      enableLineSelection: commentable,
+      enableGutterUtility: commentable,
+      onGutterUtilityClick: commentable
+        ? (range: SelectedLineRange) => onStartComment?.(file.path, range)
+        : undefined,
+      onLineSelectionChange: commentable
+        ? (range: SelectedLineRange | null) => onSelectLines(file.path, range)
+        : undefined,
+      onLineSelectionEnd: commentable
+        ? (range: SelectedLineRange | null) => {
+            if (!range) return
+            const host =
+              diffWrapperRef.current?.querySelector("diffs-container")
+            const native = readDiffSelection(host)
+            if (native && !native.isCollapsed && native.rangeCount > 0) return
+            onStartComment?.(file.path, range)
+          }
+        : undefined,
       onPostRender: (
         node: HTMLElement,
-        instance: CoreFileDiff<ReviewFinding>
+        instance: CoreFileDiff<ReviewAnnotation>
       ) => registerDiffInstance(file.path, { host: node, instance }),
     }),
-    [diffOptions, selectable, file.path, onSelectLines, registerDiffInstance]
+    [
+      diffOptions,
+      commentable,
+      onStartComment,
+      onSelectLines,
+      file.path,
+      registerDiffInstance,
+    ]
   )
 
+  // On mouse release, turn any native text highlight inside the diff into a line
+  // range: highlight rows (controlled selection) + show the "Add to Chat" popup
+  // at the cursor. A collapsed selection (plain click) is ignored.
+  const handleTextSelection = useCallback(() => {
+    if (!selectable) return
+    const container = diffWrapperRef.current?.querySelector("diffs-container")
+    const range = selectedRangeFromDiff(container)
+    if (!range) return
+    onSelectLines(file.path, range)
+    const pointer = lastPointerRef.current
+    if (pointer) setPopup({ range, x: pointer.x, y: pointer.y })
+  }, [selectable, file.path, onSelectLines])
+
   const addPopupToChat = useCallback(() => {
     if (popup) onAddToChat?.(file.path, popup.range)
     setPopup(null)
+    // Clear the lingering native highlight once added.
+    readDiffSelection(
+      diffWrapperRef.current?.querySelector("diffs-container")
+    )?.removeAllRanges()
   }, [popup, onAddToChat, file.path])
 
   // Drop the popup once the selection clears (e.g. added via ⌘L, or a finding
@@ -1188,6 +1500,12 @@ const FileDiffCard = memo(function FileDiffCard({
     if (!selectedLines) setPopup(null)
   }, [selectedLines])
 
+  // Opening a comment draft owns the "+"; never show "Add to Chat" alongside it
+  // (a single "+" click can otherwise both open the composer and arm the popup).
+  useEffect(() => {
+    if (commentDraftRange) setPopup(null)
+  }, [commentDraftRange])
+
   const oldFile = useMemo<FileContents>(
     () => ({
       name: file.path,
@@ -1214,10 +1532,29 @@ const FileDiffCard = memo(function FileDiffCard({
     [file.path, registerDiffInstance]
   )
   const renderAnnotation = useCallback(
-    (annotation: DiffLineAnnotation<ReviewFinding>) => (
-      <InlineFinding finding={annotation.metadata} />
-    ),
-    []
+    (annotation: DiffLineAnnotation<ReviewAnnotation>) => {
+      const meta = annotation.metadata
+      if (meta.kind === "finding")
+        return <InlineFinding finding={meta.finding} />
+      if (meta.kind === "comment")
+        return (
+          <InlineComment
+            comment={meta.comment}
+            onClose={onCloseOpenComment ?? (() => undefined)}
+          />
+        )
+      return (
+        <CommentComposer
+          owner={owner}
+          repo={repo}
+          prNumber={prNumber}
+          path={meta.path}
+          range={meta.range}
+          onClose={onCloseComment}
+        />
+      )
+    },
+    [owner, repo, prNumber, onCloseComment, onCloseOpenComment]
   )
 
   return (
@@ -1276,9 +1613,10 @@ const FileDiffCard = memo(function FileDiffCard({
             onPointerUpCapture={(event) => {
               lastPointerRef.current = { x: event.clientX, y: event.clientY }
             }}
+            onMouseUp={handleTextSelection}
             className="overflow-x-auto bg-[var(--ui-panel)] font-mono text-[11px] leading-5"
           >
-            <MultiFileDiff<ReviewFinding>
+            <MultiFileDiff<ReviewAnnotation>
               oldFile={oldFile}
               newFile={newFile}
               options={cardOptions}
@@ -1287,7 +1625,7 @@ const FileDiffCard = memo(function FileDiffCard({
               selectedLines={selectedLines}
               renderAnnotation={renderAnnotation}
             />
-            {popup && (
+            {popup && !commentDraftRange && (
               <AddToChatPopup
                 x={popup.x}
                 y={popup.y}
@@ -1355,6 +1693,386 @@ function AddToChatPopup({
   )
 }
 
+type MarkdownAction =
+  | "heading"
+  | "bold"
+  | "italic"
+  | "quote"
+  | "code"
+  | "link"
+  | "ul"
+  | "ol"
+  | "task"
+
+interface EditState {
+  value: string
+  start: number
+  end: number
+}
+
+// Wrap the current selection (or a placeholder when empty) with a marker, e.g.
+// **bold**. Returns the new value and the selection to restore.
+function wrapSelection(
+  state: EditState,
+  marker: string,
+  placeholder: string
+): EditState {
+  const selected = state.value.slice(state.start, state.end) || placeholder
+  const value =
+    state.value.slice(0, state.start) +
+    marker +
+    selected +
+    marker +
+    state.value.slice(state.end)
+  const start = state.start + marker.length
+  return { value, start, end: start + selected.length }
+}
+
+// Prefix each line touched by the selection, e.g. "> " for quotes or "1. " for
+// ordered lists (prefix is computed per line so numbering increments).
+function prefixLines(
+  state: EditState,
+  prefix: (index: number) => string
+): EditState {
+  const lineStart = state.value.lastIndexOf("\n", state.start - 1) + 1
+  const block = state.value.slice(lineStart, state.end)
+  const prefixed = block
+    .split("\n")
+    .map((line, index) => prefix(index) + line)
+    .join("\n")
+  const value =
+    state.value.slice(0, lineStart) + prefixed + state.value.slice(state.end)
+  return { value, start: lineStart, end: lineStart + prefixed.length }
+}
+
+function applyMarkdownAction(
+  state: EditState,
+  action: MarkdownAction
+): EditState {
+  switch (action) {
+    case "bold":
+      return wrapSelection(state, "**", "bold text")
+    case "italic":
+      return wrapSelection(state, "_", "italic text")
+    case "code":
+      return wrapSelection(state, "`", "code")
+    case "heading":
+      return prefixLines(state, () => "### ")
+    case "quote":
+      return prefixLines(state, () => "> ")
+    case "ul":
+      return prefixLines(state, () => "- ")
+    case "ol":
+      return prefixLines(state, (index) => `${index + 1}. `)
+    case "task":
+      return prefixLines(state, () => "- [ ] ")
+    case "link": {
+      const text = state.value.slice(state.start, state.end) || "text"
+      const inserted = `[${text}](url)`
+      const value =
+        state.value.slice(0, state.start) +
+        inserted +
+        state.value.slice(state.end)
+      const urlStart = state.start + text.length + 3
+      return { value, start: urlStart, end: urlStart + 3 }
+    }
+  }
+}
+
+interface ToolbarItem {
+  action: MarkdownAction
+  label: string
+  Icon: Icon
+}
+
+// Grouped to match GitHub's comment toolbar (format group, then list group).
+const MARKDOWN_TOOLBAR: ReadonlyArray<ReadonlyArray<ToolbarItem>> = [
+  [
+    { action: "heading", label: "Heading", Icon: TextHIcon },
+    { action: "bold", label: "Bold", Icon: TextBIcon },
+    { action: "italic", label: "Italic", Icon: TextItalicIcon },
+    { action: "quote", label: "Quote", Icon: QuotesIcon },
+    { action: "code", label: "Code", Icon: CodeIcon },
+    { action: "link", label: "Link", Icon: LinkIcon },
+  ],
+  [
+    { action: "ul", label: "Bulleted list", Icon: ListBulletsIcon },
+    { action: "ol", label: "Numbered list", Icon: ListNumbersIcon },
+    { action: "task", label: "Task list", Icon: ListChecksIcon },
+  ],
+]
+
+// The inline comment composer, opened by clicking the gutter "+" on a line.
+// Rendered through the same Pierre annotation portal as InlineFinding, so it sits
+// in place at the line. Mirrors GitHub's stock comment box (Write/Preview tabs +
+// markdown toolbar); submitting posts a real PR review comment as the user.
+function CommentComposer({
+  owner,
+  repo,
+  prNumber,
+  path,
+  range,
+  onClose,
+}: {
+  owner: string
+  repo: string
+  prNumber: number
+  path: string
+  range: SelectedLineRange
+  onClose: () => void
+}) {
+  const [value, setValue] = useState("")
+  const [mode, setMode] = useState<"write" | "preview">("write")
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+  useEffect(() => {
+    textareaRef.current?.focus()
+  }, [])
+  const mutation = useMutation({
+    mutationFn: (body: string) =>
+      api.createReviewComment(
+        owner,
+        repo,
+        prNumber,
+        buildCommentPayload(path, range, body)
+      ),
+  })
+  const submit = () => {
+    const body = value.trim()
+    if (!body || mutation.isPending) return
+    mutation.mutate(body)
+  }
+  // Apply a toolbar action to the live textarea selection, then restore the
+  // caret/selection on the next frame (after the controlled value re-renders).
+  const applyAction = (action: MarkdownAction) => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+    const next = applyMarkdownAction(
+      { value, start: textarea.selectionStart, end: textarea.selectionEnd },
+      action
+    )
+    setValue(next.value)
+    requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(next.start, next.end)
+    })
+  }
+  const posted = mutation.data
+  const tabClass = (active: boolean) =>
+    cn(
+      "rounded px-2 py-0.5 text-[11px]",
+      active
+        ? "bg-[var(--ui-panel-2)] font-medium text-foreground"
+        : "text-muted-foreground hover:text-foreground"
+    )
+  return (
+    <div className="px-2 py-1 font-sans">
+      <div className="overflow-hidden rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)]">
+        <div className="flex items-center gap-1.5 border-b border-[var(--ui-border)] px-2 py-1 text-[11px]">
+          <ChatCircleIcon className="size-3 text-muted-foreground" />
+          <span className="font-medium">
+            Add a comment on line {commentRangeLabel(range)}
+          </span>
+          <IconButton
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            aria-label="Close comment"
+            className="ml-auto"
+            onClick={onClose}
+          >
+            <XIcon />
+          </IconButton>
+        </div>
+        {posted ? (
+          <div className="flex items-center gap-2 px-3 py-2.5 text-[11px] text-muted-foreground">
+            <CheckCircleIcon className="size-3.5 text-emerald-500" />
+            Comment posted
+            <a
+              href={posted.html_url}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 text-foreground hover:underline"
+            >
+              <IoLogoGithub className="size-3" />
+              View on GitHub
+            </a>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center gap-1 border-b border-[var(--ui-border)] px-1.5 py-1">
+              <button
+                type="button"
+                onClick={() => setMode("write")}
+                aria-selected={mode === "write"}
+                className={tabClass(mode === "write")}
+              >
+                Write
+              </button>
+              <button
+                type="button"
+                onClick={() => setMode("preview")}
+                aria-selected={mode === "preview"}
+                className={tabClass(mode === "preview")}
+              >
+                Preview
+              </button>
+              {mode === "write" && (
+                <div className="ml-auto flex items-center gap-0.5">
+                  {MARKDOWN_TOOLBAR.map((group, groupIndex) => (
+                    <Fragment key={group[0]?.action ?? groupIndex}>
+                      {groupIndex > 0 && (
+                        <span className="mx-0.5 h-4 w-px bg-[var(--ui-border)]" />
+                      )}
+                      {group.map(({ action, label, Icon }) => (
+                        <IconButton
+                          key={action}
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          aria-label={label}
+                          title={label}
+                          onMouseDown={(event) => event.preventDefault()}
+                          onClick={() => applyAction(action)}
+                        >
+                          <Icon className="size-4" />
+                        </IconButton>
+                      ))}
+                    </Fragment>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="p-2">
+              {mode === "write" ? (
+                <Textarea
+                  ref={textareaRef}
+                  value={value}
+                  onChange={(event) => setValue(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (
+                      (event.metaKey || event.ctrlKey) &&
+                      event.key === "Enter"
+                    ) {
+                      event.preventDefault()
+                      submit()
+                    } else if (event.key === "Escape") {
+                      event.preventDefault()
+                      onClose()
+                    }
+                  }}
+                  placeholder="Leave a comment…"
+                  rows={3}
+                  className="resize-y text-xs"
+                />
+              ) : (
+                <div className="min-h-16 rounded-md border border-input bg-input/20 px-2 py-2 text-xs">
+                  {value.trim() ? (
+                    <Markdown content={value} />
+                  ) : (
+                    <span className="text-muted-foreground">
+                      Nothing to preview
+                    </span>
+                  )}
+                </div>
+              )}
+              {mutation.isError && (
+                <p className="mt-1.5 text-[11px] text-destructive">
+                  {mutation.error instanceof Error
+                    ? mutation.error.message
+                    : "Failed to post comment"}
+                </p>
+              )}
+              <div className="mt-2 flex items-center justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="rounded border border-border px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={submit}
+                  disabled={!value.trim() || mutation.isPending}
+                  className="rounded bg-foreground px-2 py-1 text-[11px] font-medium text-background disabled:opacity-50"
+                >
+                  {mutation.isPending ? "Posting…" : "Comment"}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// An existing PR comment opened from the comments dropdown, rendered inline at
+// its line through the same annotation portal as InlineFinding. Read-only; the
+// node is registered so the dropdown can scroll it into view. Links to the
+// full thread on GitHub.
+function InlineComment({
+  comment,
+  onClose,
+}: {
+  comment: PrReviewComment
+  onClose: () => void
+}) {
+  const { registerAnnotation } = useExpandedFinding()
+  const sideLabel = comment.side === "LEFT" ? "L" : "R"
+  return (
+    <div
+      ref={(node) => registerAnnotation(`comment:${comment.id}`, node)}
+      className="px-2 py-1 font-sans"
+    >
+      <div className="overflow-hidden rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)]">
+        <div className="flex items-center gap-1.5 border-b border-[var(--ui-border)] px-2 py-1 text-[11px]">
+          {comment.author_avatar_url ? (
+            <img
+              src={comment.author_avatar_url}
+              alt=""
+              className="size-4 shrink-0 rounded-full"
+            />
+          ) : (
+            <span className="size-4 shrink-0 rounded-full bg-muted" />
+          )}
+          <span className="font-medium">{comment.author}</span>
+          {comment.line !== null && (
+            <span className="font-mono text-muted-foreground">
+              {sideLabel}
+              {comment.line}
+            </span>
+          )}
+          <div className="ml-auto flex items-center gap-0.5">
+            <a
+              href={comment.html_url}
+              target="_blank"
+              rel="noreferrer"
+              aria-label="View on GitHub"
+              title="View on GitHub"
+              className="inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
+            >
+              <IoLogoGithub className="size-3" />
+            </a>
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              aria-label="Close comment"
+              onClick={onClose}
+            >
+              <XIcon />
+            </IconButton>
+          </div>
+        </div>
+        <div className="px-3 py-2.5 text-xs text-muted-foreground">
+          <Markdown content={comment.body} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // The finding rendered inline in the diff (via Pierre's annotation portal). A
 // collapsed header sits at the line; clicking it expands the full details in
 // place. Expand state is shared through context so it survives the annotation
diff --git a/ui/src/components/sidebar-layout.tsx b/ui/src/components/sidebar-layout.tsx
index 1a3dee9d..cb8662e6 100644
--- a/ui/src/components/sidebar-layout.tsx
+++ b/ui/src/components/sidebar-layout.tsx
@@ -86,6 +86,12 @@ export function useSidebarCollapsed(): boolean {
   return useContext(SidebarLayoutContext)?.collapsed ?? false;
 }
 
+// Full sidebar controls (collapse/expand) for pages that want to drive the nav,
+// e.g. the review detail page collapsing it by default. Null outside the provider.
+export function useSidebarControls(): SidebarLayout | null {
+  return useContext(SidebarLayoutContext);
+}
+
 interface SidebarFrameProps {
   width: number;
   setWidth: (next: number) => void;
diff --git a/ui/src/lib/api.ts b/ui/src/lib/api.ts
index dcd477fd..e60ee8f9 100644
--- a/ui/src/lib/api.ts
+++ b/ui/src/lib/api.ts
@@ -388,6 +388,39 @@ export interface ReviewFinding {
   group: FindingGroup
 }
 
+export interface ReviewCommentCreate {
+  path: string
+  line: number
+  side: "LEFT" | "RIGHT"
+  body: string
+  start_line?: number | null
+  start_side?: "LEFT" | "RIGHT" | null
+}
+
+export interface ReviewCommentResult {
+  id: number
+  html_url: string
+}
+
+export interface PrReviewComment {
+  id: number
+  author: string
+  author_avatar_url: string
+  path: string
+  line: number | null
+  side: "LEFT" | "RIGHT"
+  body: string
+  html_url: string
+  created_at: string
+  is_open_swe: boolean
+  // Outdated: the line no longer appears in the current diff, so it can't render inline.
+  is_outdated: boolean
+}
+
+export interface ReviewCommentsPayload {
+  comments: Array<PrReviewComment>
+}
+
 export interface ReviewCounts {
   open: number
   resolved: number
@@ -742,6 +775,20 @@ export const api = {
       `/reviews/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/${number}/re-review`,
       { method: "POST" }
     ),
+  createReviewComment: (
+    owner: string,
+    repo: string,
+    number: number,
+    body: ReviewCommentCreate
+  ) =>
+    request<ReviewCommentResult>(
+      `/reviews/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/${number}/comments`,
+      { method: "POST", body: JSON.stringify(body) }
+    ),
+  listReviewComments: (owner: string, repo: string, number: number) =>
+    request<ReviewCommentsPayload>(
+      `/reviews/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/${number}/comments`
+    ),
   getReviewerEval: () => request<ReviewerEvalStatus>("/admin/evals/reviewer"),
   logout: () => request<void>("/auth/logout", { method: "POST" }),
 }
diff --git a/ui/src/routes/agents/reviews/$owner.$repo.$number.tsx b/ui/src/routes/agents/reviews/$owner.$repo.$number.tsx
index 567f218b..1fe49b26 100644
--- a/ui/src/routes/agents/reviews/$owner.$repo.$number.tsx
+++ b/ui/src/routes/agents/reviews/$owner.$repo.$number.tsx
@@ -1,10 +1,12 @@
 import { Link, Navigate, createFileRoute } from "@tanstack/react-router"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { ArrowLeftIcon, GitPullRequestIcon } from "@phosphor-icons/react"
 
+import type { PrReviewComment } from "@/lib/api"
+import { ReviewCommentsMenu } from "@/components/agents/ReviewCommentsMenu"
 import { ReviewMainBody } from "@/components/agents/ReviewMainBody"
-import { useSidebarCollapsed } from "@/components/sidebar-layout"
+import { useSidebarControls } from "@/components/sidebar-layout"
 import { Skeleton } from "@/components/ui/skeleton"
 import { api } from "@/lib/api"
 import { useSession } from "@/lib/session"
@@ -18,7 +20,24 @@ function ReviewDetailPage() {
   const { owner, repo, number } = Route.useParams()
   const prNumber = Number(number)
   const session = useSession()
-  const sidebarCollapsed = useSidebarCollapsed()
+  const sidebar = useSidebarControls()
+  const sidebarCollapsed = sidebar?.collapsed ?? false
+  // A comment picked from the dropdown, shown inline in the diff (not GitHub).
+  const [activeComment, setActiveComment] = useState<PrReviewComment | null>(
+    null
+  )
+  const closeActiveComment = useCallback(() => setActiveComment(null), [])
+
+  // Collapse the global nav by default while viewing a review (roomy diff),
+  // restoring the prior preference on leave. Runs once for the page's lifetime.
+  const sidebarRef = useRef(sidebar)
+  sidebarRef.current = sidebar
+  useEffect(() => {
+    const controls = sidebarRef.current
+    if (!controls || controls.collapsed) return
+    controls.setCollapsed(true)
+    return () => controls.setCollapsed(false)
+  }, [])
   const detail = useQuery({
     queryKey: ["review", owner, repo, prNumber],
     queryFn: () => api.getReview(owner, repo, prNumber),
@@ -80,6 +99,16 @@ function ReviewDetailPage() {
             {detail.data ? ` ${detail.data.pr.title}` : ""}
           </span>
         </span>
+        {Number.isFinite(prNumber) && (
+          <div className="ml-auto shrink-0">
+            <ReviewCommentsMenu
+              owner={owner}
+              repo={repo}
+              number={prNumber}
+              onSelect={setActiveComment}
+            />
+          </div>
+        )}
       </header>
 
       {detail.error ? (
@@ -96,6 +125,8 @@ function ReviewDetailPage() {
           key={detail.data.head_sha}
           detail={detail.data}
           diffFiles={diff.data?.files ?? null}
+          openComment={activeComment}
+          onCloseOpenComment={closeActiveComment}
         />
       )}
     </div>