diff --git a/apps/diffshub/app/_home/HomeGitHubTokenForm.tsx b/apps/diffshub/app/_home/HomeGitHubTokenForm.tsx
index cb59b2fce..5742fa845 100644
--- a/apps/diffshub/app/_home/HomeGitHubTokenForm.tsx
+++ b/apps/diffshub/app/_home/HomeGitHubTokenForm.tsx
@@ -6,10 +6,11 @@ import { GitHubTokenControl } from '@/components/GitHubTokenControl';
 import { useGitHubToken } from '@/components/useGitHubToken';
 
 export const HomeGitHubTokenForm = memo(function HomeGitHubTokenForm() {
-  const { clearToken, hasToken, setToken } = useGitHubToken();
+  const { capability, clearToken, hasToken, setToken } = useGitHubToken();
   return (
     <GitHubTokenControl
       active={hasToken}
+      capability={capability}
       className="border-border/70 border-t px-4 py-3"
       onClear={clearToken}
       onSave={setToken}
diff --git a/apps/diffshub/app/api/github-comments/route.ts b/apps/diffshub/app/api/github-comments/route.ts
new file mode 100644
index 000000000..8e7534d98
--- /dev/null
+++ b/apps/diffshub/app/api/github-comments/route.ts
@@ -0,0 +1,129 @@
+import { type NextRequest } from 'next/server';
+
+import {
+  GitHubCommentsRequestError,
+  loadGitHubComments,
+  parsePostGitHubCommentRequest,
+  postGitHubComment,
+} from '@/lib/githubCommentsServer';
+import { parseGitHubDiffSource } from '@/lib/githubDiffSource';
+
+const CACHE_CONTROL = 'no-store';
+
+// Upstream statuses passed through to the client as-is; anything else
+// collapses to 502. 403 in particular must survive: it drives the client's
+// write-capability downgrade.
+const PASSTHROUGH_ERROR_STATUSES = new Set([400, 401, 403, 404, 422, 429]);
+
+// Read-side proxy for GitHub comments. Browser code only talks to this
+// same-origin route: an optional user PAT arrives as a bearer header, and for
+// public sources without one the server falls back to its env token,
+// mirroring the other GitHub proxy routes. Responses are never cached
+// server-side so PAT-derived data cannot leak across viewers.
+export async function GET(request: NextRequest) {
+  const path = request.nextUrl.searchParams.get('path');
+  const token = parseBearerToken(request.headers.get('authorization'));
+
+  if (path == null) {
+    return createJSONResponse(
+      { error: 'path parameter is required.' },
+      { status: 400 }
+    );
+  }
+
+  const source = parseGitHubDiffSource(path);
+  if (source == null) {
+    return createJSONResponse(
+      { error: 'path is not a supported GitHub diff source.' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    return createJSONResponse(await loadGitHubComments(source, { token }));
+  } catch (error) {
+    return createErrorResponse(error);
+  }
+}
+
+// Write-side proxy: posts a review comment or thread reply to the pull
+// request named by `path`. Requires the caller's own token — the server env
+// token is never used to author comments on a user's behalf.
+export async function POST(request: NextRequest) {
+  const path = request.nextUrl.searchParams.get('path');
+  const token = parseBearerToken(request.headers.get('authorization'));
+
+  if (path == null) {
+    return createJSONResponse(
+      { error: 'path parameter is required.' },
+      { status: 400 }
+    );
+  }
+
+  const source = parseGitHubDiffSource(path);
+  if (source == null) {
+    return createJSONResponse(
+      { error: 'path is not a supported GitHub diff source.' },
+      { status: 400 }
+    );
+  }
+
+  if (token == null) {
+    return createJSONResponse(
+      { error: 'Posting comments requires a GitHub token.' },
+      { status: 401 }
+    );
+  }
+
+  const body: unknown = await request.json().catch(() => undefined);
+  const postRequest = parsePostGitHubCommentRequest(body);
+  if (postRequest == null) {
+    return createJSONResponse(
+      { error: 'Unsupported comment payload.' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    return createJSONResponse(
+      await postGitHubComment(source, postRequest, { token })
+    );
+  } catch (error) {
+    return createErrorResponse(error);
+  }
+}
+
+function createErrorResponse(error: unknown): Response {
+  const status =
+    error instanceof GitHubCommentsRequestError &&
+    PASSTHROUGH_ERROR_STATUSES.has(error.status)
+      ? error.status
+      : 502;
+  return createJSONResponse(
+    { error: error instanceof Error ? error.message : 'Unknown error' },
+    { status }
+  );
+}
+
+function parseBearerToken(value: string | null): string | undefined {
+  if (value == null) {
+    return undefined;
+  }
+
+  const match = /^Bearer\s+(.+)$/i.exec(value.trim());
+  const token = match?.[1]?.trim();
+  return token == null || token === '' ? undefined : token;
+}
+
+function createJSONResponse(
+  body: unknown,
+  options: { status?: number } = {}
+): Response {
+  return Response.json(body, {
+    status: options.status ?? 200,
+    headers: {
+      'Cache-Control': CACHE_CONTROL,
+      Vary: 'Authorization',
+    },
+  });
+}
diff --git a/apps/diffshub/app/api/github-user/route.ts b/apps/diffshub/app/api/github-user/route.ts
new file mode 100644
index 000000000..c0bd296a5
--- /dev/null
+++ b/apps/diffshub/app/api/github-user/route.ts
@@ -0,0 +1,51 @@
+import { type NextRequest } from 'next/server';
+
+import { loadGitHubTokenUser } from '@/lib/githubCommentsServer';
+
+const CACHE_CONTROL = 'no-store';
+
+// Resolves the identity of the caller's GitHub token (login + avatar) so the
+// comment form can show who a posted comment will be authored as. Requires
+// the user's own token — there is nothing meaningful to resolve without one.
+export async function GET(request: NextRequest) {
+  const token = parseBearerToken(request.headers.get('authorization'));
+
+  if (token == null) {
+    return createJSONResponse(
+      { error: 'Resolving the GitHub user requires a token.' },
+      { status: 401 }
+    );
+  }
+
+  try {
+    return createJSONResponse(await loadGitHubTokenUser({ token }));
+  } catch (error) {
+    return createJSONResponse(
+      { error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 502 }
+    );
+  }
+}
+
+function parseBearerToken(value: string | null): string | undefined {
+  if (value == null) {
+    return undefined;
+  }
+
+  const match = /^Bearer\s+(.+)$/i.exec(value.trim());
+  const token = match?.[1]?.trim();
+  return token == null || token === '' ? undefined : token;
+}
+
+function createJSONResponse(
+  body: unknown,
+  options: { status?: number } = {}
+): Response {
+  return Response.json(body, {
+    status: options.status ?? 200,
+    headers: {
+      'Cache-Control': CACHE_CONTROL,
+      Vary: 'Authorization',
+    },
+  });
+}
diff --git a/apps/diffshub/components/CommentAuthorAvatar.tsx b/apps/diffshub/components/CommentAuthorAvatar.tsx
index b795ac038..b9159e4a8 100644
--- a/apps/diffshub/components/CommentAuthorAvatar.tsx
+++ b/apps/diffshub/components/CommentAuthorAvatar.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/cn';
 interface CommentAuthorAvatarProps {
   // A stable seed (e.g. comment key or a fixed name) used to pick the avatar.
   seed: string;
+  avatarUrl?: string;
   className?: string;
 }
 
@@ -11,9 +12,13 @@ interface CommentAuthorAvatarProps {
 // Defaults to 32px (size-8); pass className to override for other sizes.
 export function CommentAuthorAvatar({
   seed,
+  avatarUrl,
   className,
 }: CommentAuthorAvatarProps) {
-  const { name, avatarSrc } = getCommentPersona(seed);
+  const { name, avatarSrc } =
+    avatarUrl == null
+      ? getCommentPersona(seed)
+      : { avatarSrc: avatarUrl, name: seed };
   return (
     <div className="relative shrink-0 self-start after:absolute after:inset-0 after:z-10 after:block after:rounded-full after:border after:border-[rgb(0_0_0_/_0.1)] after:content-[''] dark:after:border-[rgb(255_255_255_/_0.1)]">
       <img
diff --git a/apps/diffshub/components/DiffsHubCommentsList.tsx b/apps/diffshub/components/DiffsHubCommentsList.tsx
index 8e47370ca..f013b531b 100644
--- a/apps/diffshub/components/DiffsHubCommentsList.tsx
+++ b/apps/diffshub/components/DiffsHubCommentsList.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import type { AnnotationSide } from '@pierre/diffs';
-import { IconConvoFill, IconPlus } from '@pierre/icons';
-import { memo, type MouseEvent } from 'react';
+import { IconChevronSm, IconConvoFill, IconPlus } from '@pierre/icons';
+import { memo, type MouseEvent, useState } from 'react';
 
 import { CommentAuthorAvatar } from './CommentAuthorAvatar';
+import { GitHubThreadComment } from './GitHubAnnotation';
 import { cn } from '@/lib/cn';
 import type {
   CommentLineType,
@@ -13,21 +14,26 @@ import type {
 } from '@/lib/types';
 
 interface DiffsHubCommentsListProps {
+  // Whether saved drafts post to the pull request on GitHub; only changes
+  // the empty-state copy.
+  canPostToGitHub?: boolean;
   commentSections: readonly DiffsHubSavedCommentItem[];
   onSelectComment?(comment: DiffsHubSavedCommentEntry): void;
   onSelectItem?(itemId: string): void;
 }
 
-function getCommentLineLabel(
-  side: AnnotationSide,
-  lineNumber: number,
-  lineType: CommentLineType
-): string {
-  if (lineType === 'context') {
-    return `Line ${lineNumber}`;
+function getCommentLineLabel(comment: DiffsHubSavedCommentEntry): string {
+  if (comment.anchor === 'file') {
+    return 'File';
   }
-  const sigil = side === 'additions' ? '+' : '-';
-  return `Line ${sigil}${lineNumber}`;
+  if (comment.anchor === 'outdated') {
+    return comment.lineNumber > 0 ? `Line ${comment.lineNumber}` : 'a line';
+  }
+  if (comment.lineType === 'context') {
+    return `Line ${comment.lineNumber}`;
+  }
+  const sigil = comment.side === 'additions' ? '+' : '-';
+  return `Line ${sigil}${comment.lineNumber}`;
 }
 
 function getCommentLineClassName(
@@ -78,10 +84,27 @@ function handleRowClick(
 }
 
 export const DiffsHubCommentsList = memo(function DiffsHubCommentsList({
+  canPostToGitHub,
   commentSections,
   onSelectComment,
   onSelectItem,
 }: DiffsHubCommentsListProps) {
+  // Keys of outdated rows currently expanded to show their full thread.
+  const [expandedKeys, setExpandedKeys] = useState<ReadonlySet<string>>(
+    () => new Set()
+  );
+  const toggleExpanded = (key: string) => {
+    setExpandedKeys((previous) => {
+      const next = new Set(previous);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
   if (commentSections.length === 0) {
     return (
       <div className="text-muted-foreground flex h-full min-h-0 flex-col items-center justify-center gap-2 px-7 text-center text-sm">
@@ -93,7 +116,10 @@ export const DiffsHubCommentsList = memo(function DiffsHubCommentsList({
             <span className="light:text-white light:bg-[rgb(0,159,255)] inline-flex h-[20px] w-[20px] items-center justify-center rounded-[4px] align-top dark:bg-[rgb(0,159,255)] dark:text-black">
               <IconPlus />
             </span>{' '}
-            button to add fake code comments.
+            button to{' '}
+            {canPostToGitHub === true
+              ? 'comment on this pull request.'
+              : 'add fake code comments.'}
           </p>
         </div>
       </div>
@@ -125,53 +151,140 @@ export const DiffsHubCommentsList = memo(function DiffsHubCommentsList({
             </div>
           )}
           <div className="rounded-lg border border-[var(--diffshub-card-border,rgb(0_0_0_/_0.1))] dark:border-[var(--diffshub-card-border,rgb(255_255_255_/_0.15))]">
-            {section.comments.map((comment) => (
-              <button
-                key={comment.key}
-                type="button"
-                // Card surface, hover, and border come from the themed
-                // chrome (set on the sidebar wrapper) so cards stay
-                // on-palette for mixed-light/dark themes like slack-ochin
-                // (light-typed but uses a dark navy sidebar). The
-                // hardcoded fallbacks cover the brief window before the
-                // Shiki theme resolves on first render.
-                // No `transition-colors` here: the bg / border / text
-                // colors are driven by CSS variables that flip the entire
-                // chrome on every theme swap, so a smooth color transition
-                // on each card visibly trails the rest of the UI (header,
-                // file tree, diff body) which snap instantly. Hover bg is
-                // snappy enough without an interpolated transition.
-                className="focus-visible:ring-ring flex w-full cursor-pointer items-start gap-2 border-b border-[var(--diffshub-card-border,rgb(0_0_0_/_0.1))] bg-[var(--diffshub-card-bg,var(--color-card))] p-3 text-left text-sm outline-none first:rounded-t-lg last:rounded-b-lg last:border-b-0 hover:bg-[var(--diffshub-card-hover-bg,var(--color-muted))] focus-visible:ring-2 dark:border-[var(--diffshub-card-border,rgb(255_255_255_/_0.15))]"
-                onClick={(event) =>
-                  handleRowClick(event, () => onSelectComment?.(comment))
-                }
-              >
-                <CommentAuthorAvatar seed={comment.author} className="size-5" />
-                <div className="flex flex-col items-start gap-0.5 select-text">
-                  <div className="text-muted-foreground flex gap-1">
-                    {comment.author} commented on{' '}
-                    <span
-                      className={cn(
-                        getCommentLineClassName(comment.side, comment.lineType),
-                        'font-medium'
-                      )}
-                    >
-                      {getCommentLineLabel(
-                        comment.side,
-                        comment.lineNumber,
-                        comment.lineType
-                      )}
-                    </span>
-                  </div>
-                  <p className="text-foreground w-full break-words whitespace-pre-wrap">
-                    {comment.message}
-                  </p>
-                </div>
-              </button>
-            ))}
+            {section.comments.map((comment) =>
+              comment.anchor === 'outdated' ? (
+                <OutdatedCommentRow
+                  key={comment.key}
+                  comment={comment}
+                  expanded={expandedKeys.has(comment.key)}
+                  onToggle={() => toggleExpanded(comment.key)}
+                />
+              ) : (
+                <button
+                  key={comment.key}
+                  type="button"
+                  // Card surface, hover, and border come from the themed
+                  // chrome (set on the sidebar wrapper) so cards stay
+                  // on-palette for mixed-light/dark themes like slack-ochin
+                  // (light-typed but uses a dark navy sidebar). The
+                  // hardcoded fallbacks cover the brief window before the
+                  // Shiki theme resolves on first render.
+                  // No `transition-colors` here: the bg / border / text
+                  // colors are driven by CSS variables that flip the entire
+                  // chrome on every theme swap, so a smooth color transition
+                  // on each card visibly trails the rest of the UI (header,
+                  // file tree, diff body) which snap instantly. Hover bg is
+                  // snappy enough without an interpolated transition.
+                  className="focus-visible:ring-ring flex w-full cursor-pointer items-start gap-2 border-b border-[var(--diffshub-card-border,rgb(0_0_0_/_0.1))] bg-[var(--diffshub-card-bg,var(--color-card))] p-3 text-left text-sm outline-none first:rounded-t-lg last:rounded-b-lg last:border-b-0 hover:bg-[var(--diffshub-card-hover-bg,var(--color-muted))] focus-visible:ring-2 dark:border-[var(--diffshub-card-border,rgb(255_255_255_/_0.15))]"
+                  onClick={(event) =>
+                    handleRowClick(event, () => onSelectComment?.(comment))
+                  }
+                >
+                  <CommentRowContent comment={comment} />
+                </button>
+              )
+            )}
           </div>
         </section>
       ))}
     </div>
   );
 });
+
+// The avatar + text column shared by every sidebar comment row. `expanded`
+// is undefined for rows that navigate on click; expandable (outdated) rows
+// pass their current state, which unclamps the message and shows a chevron.
+function CommentRowContent({
+  comment,
+  expanded,
+}: {
+  comment: DiffsHubSavedCommentEntry;
+  expanded?: boolean;
+}) {
+  return (
+    <>
+      <CommentAuthorAvatar
+        seed={comment.author}
+        avatarUrl={comment.avatarUrl}
+        className="size-5"
+      />
+      <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 select-text">
+        <div className="text-muted-foreground w-full break-words">
+          {comment.author} commented on{' '}
+          <span
+            className={cn(
+              getCommentLineClassName(comment.side, comment.lineType),
+              'font-medium whitespace-nowrap'
+            )}
+          >
+            {getCommentLineLabel(comment)}
+          </span>
+          {comment.replyCount != null && comment.replyCount > 0 && (
+            <span className="whitespace-nowrap">
+              {' '}
+              · {comment.replyCount}{' '}
+              {comment.replyCount === 1 ? 'reply' : 'replies'}
+            </span>
+          )}
+          {comment.anchor === 'outdated' && (
+            <span className="ml-1.5 rounded-full border border-current/30 px-1.5 py-px align-middle text-[10px] leading-none tracking-wide uppercase">
+              Outdated
+            </span>
+          )}
+        </div>
+        <p
+          className={cn(
+            'text-foreground w-full break-words whitespace-pre-wrap',
+            expanded !== true && 'line-clamp-2'
+          )}
+        >
+          {comment.message}
+        </p>
+      </div>
+      {expanded != null && (
+        <IconChevronSm
+          aria-hidden="true"
+          className={cn(
+            'text-muted-foreground mt-0.5 size-4 shrink-0 transition-transform',
+            !expanded && '-rotate-90'
+          )}
+        />
+      )}
+    </>
+  );
+}
+
+// An outdated GitHub comment has no line (and therefore no inline card) in
+// the current diff, so its row expands in place to show the full thread
+// instead of navigating anywhere. The replies live outside the toggle button
+// because they contain links, which cannot nest inside a button.
+function OutdatedCommentRow({
+  comment,
+  expanded,
+  onToggle,
+}: {
+  comment: DiffsHubSavedCommentEntry;
+  expanded: boolean;
+  onToggle(): void;
+}) {
+  const replies = comment.thread?.replies ?? [];
+  return (
+    <div className="overflow-hidden border-b border-[var(--diffshub-card-border,rgb(0_0_0_/_0.1))] bg-[var(--diffshub-card-bg,var(--color-card))] first:rounded-t-lg last:rounded-b-lg last:border-b-0 dark:border-[var(--diffshub-card-border,rgb(255_255_255_/_0.15))]">
+      <button
+        type="button"
+        aria-expanded={expanded}
+        className="focus-visible:ring-ring flex w-full cursor-pointer items-start gap-2 p-3 text-left text-sm outline-none hover:bg-[var(--diffshub-card-hover-bg,var(--color-muted))] focus-visible:ring-2"
+        onClick={(event) => handleRowClick(event, onToggle)}
+      >
+        <CommentRowContent comment={comment} expanded={expanded} />
+      </button>
+      {expanded && replies.length > 0 && (
+        <div className="flex flex-col gap-2.5 px-3 pb-3 text-sm">
+          {replies.map((reply) => (
+            <GitHubThreadComment key={reply.id} comment={reply} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/diffshub/components/DiffsHubHeader.tsx b/apps/diffshub/components/DiffsHubHeader.tsx
index 24317949f..bc65a838d 100644
--- a/apps/diffshub/components/DiffsHubHeader.tsx
+++ b/apps/diffshub/components/DiffsHubHeader.tsx
@@ -45,6 +45,7 @@ import { GitHubTokenControl } from '@/components/GitHubTokenControl';
 import { Switch } from '@/components/Switch';
 import { docsThemeCatalog } from '@/components/themeCatalog';
 import { cn } from '@/lib/cn';
+import type { GitHubTokenCapability } from '@/lib/githubTokenStorage';
 import { diffshubChromeMapping } from '@/lib/theme/diffshubChromeMapping';
 import { getDropdownThemeStyle } from '@/lib/theme/dropdownChromeStyle';
 
@@ -63,13 +64,15 @@ interface HeaderProps {
   diffStyle: 'split' | 'unified';
   fileTreeAvailable: boolean;
   fileTreeOverlayOpen: boolean;
+  githubRepoOwner?: string;
   githubTokenActive: boolean;
+  githubTokenCapability: GitHubTokenCapability;
   initialUrl: string;
   lightThemeName: LightThemeName;
   lineNumbers: boolean;
   overflow: 'wrap' | 'scroll';
   onClearGitHubToken(): void;
-  onSaveGitHubToken(token: string): void;
+  onSaveGitHubToken(token: string, capability: GitHubTokenCapability): void;
   onToggleCollapseMode(): void;
   onToggleFileTreeOverlay(): void;
   setColorMode(mode: ColorMode): void;
@@ -92,7 +95,9 @@ export const DiffsHubHeader = memo(function DiffsHubHeader({
   diffStyle,
   fileTreeAvailable,
   fileTreeOverlayOpen,
+  githubRepoOwner,
   githubTokenActive,
+  githubTokenCapability,
   initialUrl,
   lightThemeName,
   lineNumbers,
@@ -250,8 +255,10 @@ export const DiffsHubHeader = memo(function DiffsHubHeader({
               >
                 <GitHubTokenControl
                   active={githubTokenActive}
+                  capability={githubTokenCapability}
                   onClear={onClearGitHubToken}
                   onSave={onSaveGitHubToken}
+                  resourceOwner={githubRepoOwner}
                 />
                 <div className="bg-border/70 my-2 h-px" />
                 <DropdownMenuItem
diff --git a/apps/diffshub/components/DiffsHubSidebar.tsx b/apps/diffshub/components/DiffsHubSidebar.tsx
index 7b490e079..b0b36ce34 100644
--- a/apps/diffshub/components/DiffsHubSidebar.tsx
+++ b/apps/diffshub/components/DiffsHubSidebar.tsx
@@ -61,6 +61,9 @@ const MOBILE_MEDIA_QUERY = '(max-width: 767px)';
 
 interface DiffsHubSidebarProps {
   className?: string;
+  // Whether saved drafts post to the pull request on GitHub; only changes
+  // the comments empty-state copy.
+  commentsPostToGitHub?: boolean;
   commentSections: readonly DiffsHubSavedCommentItem[];
   diffStats: DiffsHubDiffStatsData | null;
   mobileOverlayOpen?: boolean;
@@ -76,6 +79,7 @@ interface DiffsHubSidebarProps {
 
 export const DiffsHubSidebar = memo(function DiffsHubSidebar({
   className,
+  commentsPostToGitHub,
   commentSections,
   diffStats,
   mobileOverlayOpen = false,
@@ -303,6 +307,7 @@ export const DiffsHubSidebar = memo(function DiffsHubSidebar({
             className="h-full min-h-0"
           >
             <DiffsHubCommentsList
+              canPostToGitHub={commentsPostToGitHub}
               commentSections={commentSections}
               onSelectComment={onSelectComment}
               onSelectItem={onSelectItem}
diff --git a/apps/diffshub/components/DiffsHubViewer.tsx b/apps/diffshub/components/DiffsHubViewer.tsx
index 91b4791e2..183ab3a55 100644
--- a/apps/diffshub/components/DiffsHubViewer.tsx
+++ b/apps/diffshub/components/DiffsHubViewer.tsx
@@ -16,7 +16,8 @@ import { IconChevronSm } from '@pierre/icons';
 import { memo, type RefObject, useMemo, useRef, useState } from 'react';
 
 import { DraftAnnotation } from './DraftAnnotation';
-import { ExampleAnnotation } from './ExampleAnnotation';
+import { GitHubAnnotation } from './GitHubAnnotation';
+import { LocalCommentAnnotation } from './LocalCommentAnnotation';
 import { ThemedCodeView } from './ThemedCodeView';
 import { useChromeThemeProps } from './useChromeThemeProps';
 import type { AvatarName } from '@/lib/annotation';
@@ -24,15 +25,22 @@ import { buildAnnotationThemeStyle } from '@/lib/annotationThemeStyle';
 import { classifyCommentLineType } from '@/lib/classifyCommentLineType';
 import { cn } from '@/lib/cn';
 import { CODE_VIEW_CUSTOM_CSS, CODE_VIEW_LAYOUT } from '@/lib/constants';
+import type {
+  GitHubCommentUser,
+  GitHubCommentWire,
+} from '@/lib/githubComments';
 import { isDiffItem } from '@/lib/isDiffItem';
 import { isDraftAnnotation } from '@/lib/isDraftAnnotation';
 import { isDraftMetadata } from '@/lib/isDraftMetadata';
+import { isGitHubAnnotation } from '@/lib/isGitHubAnnotation';
 import { isSavedAnnotation } from '@/lib/isSavedAnnotation';
 import { diffshubChromeMapping } from '@/lib/theme/diffshubChromeMapping';
 import type {
   CommentMetadata,
   DiffsHubDeletedCommentEvent,
-  DiffsHubSavedCommentEvent,
+  DiffsHubPostDraftRequest,
+  DiffsHubPostReplyRequest,
+  DiffsHubSavedCommentEntry,
 } from '@/lib/types';
 
 function getNextItemVersion(item: CodeViewItem<CommentMetadata>): number {
@@ -65,8 +73,12 @@ interface ActiveDraftComment {
 interface DiffsHubViewerProps {
   className?: string;
   diffStyle: 'split' | 'unified';
+  draftAuthor?: GitHubCommentUser;
+  draftHint?: string;
   onCommentDeleted(comment: DiffsHubDeletedCommentEvent): void;
-  onCommentSaved(comment: DiffsHubSavedCommentEvent): void;
+  onCommentSaved(comment: DiffsHubSavedCommentEntry): void;
+  postComment?(request: DiffsHubPostDraftRequest): Promise<GitHubCommentWire>;
+  postReply?(request: DiffsHubPostReplyRequest): Promise<void>;
   overflow: 'wrap' | 'scroll';
   showBackgrounds: boolean;
   diffIndicators: DiffIndicators;
@@ -83,8 +95,12 @@ interface DiffsHubViewerProps {
 export const DiffsHubViewer = memo(function DiffsHubViewer({
   className,
   diffStyle,
+  draftAuthor,
+  draftHint,
   onCommentDeleted,
   onCommentSaved,
+  postComment,
+  postReply,
   overflow,
   showBackgrounds,
   diffIndicators,
@@ -269,6 +285,95 @@ export const DiffsHubViewer = memo(function DiffsHubViewer({
         return;
       }
 
+      if (postComment != null) {
+        const { range } = draftAnnotation.metadata;
+        const setDraftPending = (pending: boolean) => {
+          updateViewerDiffItem(viewer, itemId, (item) => {
+            if (item.annotations == null) {
+              return false;
+            }
+            item.annotations = item.annotations.map((annotation) =>
+              annotation.metadata.key === key && isDraftAnnotation(annotation)
+                ? {
+                    ...annotation,
+                    metadata: {
+                      ...annotation.metadata,
+                      message: trimmedMessage,
+                      pending,
+                    },
+                  }
+                : annotation
+            );
+            return true;
+          });
+        };
+
+        setDraftPending(true);
+        postComment({
+          itemId,
+          key,
+          lineNumber: draftAnnotation.lineNumber,
+          message: trimmedMessage,
+          range,
+          side: draftAnnotation.side,
+        })
+          .then((wire) => {
+            const githubKey = `gh-${wire.id}`;
+            const updatedItem = updateViewerDiffItem(viewer, itemId, (item) => {
+              if (item.annotations == null) {
+                return false;
+              }
+              item.annotations = item.annotations.map((annotation) =>
+                annotation.metadata.key === key
+                  ? {
+                      side: draftAnnotation.side,
+                      lineNumber: draftAnnotation.lineNumber,
+                      metadata: {
+                        kind: 'github',
+                        key: githubKey,
+                        range,
+                        thread: { root: wire, replies: [] },
+                      },
+                    }
+                  : annotation
+              );
+              return true;
+            });
+            if (updatedItem == null) {
+              return;
+            }
+            const { current: activeDraft } = activeDraftRef;
+            if (activeDraft?.itemId === itemId && activeDraft.key === key) {
+              activeDraftRef.current = null;
+            }
+            setSelectedLines(null);
+            onLineLinkChange(null);
+            onCommentSaved({
+              author: wire.user.login,
+              avatarUrl: wire.user.avatarUrl,
+              itemId,
+              key: githubKey,
+              lineNumber: draftAnnotation.lineNumber,
+              lineType: classifyCommentLineType(
+                updatedItem.fileDiff,
+                draftAnnotation.side,
+                draftAnnotation.lineNumber
+              ),
+              message: wire.body,
+              range,
+              replyCount: 0,
+              side: draftAnnotation.side,
+              thread: { root: wire, replies: [] },
+            });
+          })
+          .catch(() => {
+            // The caller already surfaced the error (toast); keep the draft
+            // with its text so the user can retry or cancel.
+            setDraftPending(false);
+          });
+        return;
+      }
+
       const updatedItem = updateViewerDiffItem(viewer, itemId, (item) => {
         if (item.annotations == null) {
           return false;
@@ -381,6 +486,8 @@ export const DiffsHubViewer = memo(function DiffsHubViewer({
         return (
           <DraftAnnotation
             annotation={annotation}
+            githubAuthor={draftAuthor}
+            hint={draftHint}
             itemId={item.id}
             onCancel={handleRemoveComment}
             onSave={handleSaveDraftComment}
@@ -388,12 +495,30 @@ export const DiffsHubViewer = memo(function DiffsHubViewer({
         );
       }
 
+      if (isGitHubAnnotation(annotation)) {
+        const { key } = annotation.metadata;
+        return (
+          <GitHubAnnotation
+            annotation={annotation}
+            itemId={item.id}
+            replyAuthor={draftAuthor}
+            onPostReply={
+              postReply == null
+                ? undefined
+                : (rootCommentId, body) =>
+                    postReply({ body, itemId: item.id, key, rootCommentId })
+            }
+            onToggleSelection={handleToggleCommentSelection}
+          />
+        );
+      }
+
       if (!isSavedAnnotation(annotation)) {
         return null;
       }
 
       return (
-        <ExampleAnnotation
+        <LocalCommentAnnotation
           annotation={annotation}
           itemId={item.id}
           onDelete={handleRemoveComment}
diff --git a/apps/diffshub/components/DraftAnnotation.tsx b/apps/diffshub/components/DraftAnnotation.tsx
index 114d53a1b..2b08e455a 100644
--- a/apps/diffshub/components/DraftAnnotation.tsx
+++ b/apps/diffshub/components/DraftAnnotation.tsx
@@ -1,5 +1,4 @@
 import type { DiffLineAnnotation } from '@pierre/diffs';
-import { IconArrowRight } from '@pierre/icons';
 import { useEffect, useRef, useState } from 'react';
 
 import { CommentAuthorAvatar } from './CommentAuthorAvatar';
@@ -10,10 +9,13 @@ import {
   getRandomPersona,
 } from '@/lib/annotation';
 import { cn } from '@/lib/cn';
+import type { GitHubCommentUser } from '@/lib/githubComments';
 import type { DraftCommentMetadata } from '@/lib/types';
 
 interface DraftAnnotationProps {
   annotation: DiffLineAnnotation<DraftCommentMetadata>;
+  githubAuthor?: GitHubCommentUser;
+  hint?: string;
   itemId: string;
   onCancel(itemId: string, key: string): void;
   onSave(
@@ -26,6 +28,8 @@ interface DraftAnnotationProps {
 
 export function DraftAnnotation({
   annotation,
+  githubAuthor,
+  hint,
   itemId,
   onCancel,
   onSave,
@@ -34,15 +38,19 @@ export function DraftAnnotation({
   const [persona] = useState(getRandomPersona);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const trimmedMessage = message.trim();
+  const pending = annotation.metadata.pending === true;
 
   function handleSave() {
-    if (trimmedMessage.length === 0) {
+    if (trimmedMessage.length === 0 || pending) {
       return;
     }
     onSave(itemId, annotation.metadata.key, trimmedMessage, persona.name);
   }
 
   function tryCancel() {
+    if (pending) {
+      return;
+    }
     if (trimmedMessage.length > 0 && !window.confirm('Discard this comment?')) {
       return;
     }
@@ -62,17 +70,21 @@ export function DraftAnnotation({
 
   return (
     <form
-      className={cn(annotationCardBase, 'flex-col md:flex-row')}
+      className={cn(annotationCardBase, 'flex-col gap-2')}
       onSubmit={(event) => {
         event.preventDefault();
         handleSave();
       }}
     >
       <div className="flex w-full gap-2.5">
-        <CommentAuthorAvatar seed={persona.name} />
+        <CommentAuthorAvatar
+          seed={githubAuthor?.login ?? persona.name}
+          avatarUrl={githubAuthor?.avatarUrl}
+        />
         <textarea
           ref={textareaRef}
           value={message}
+          disabled={pending}
           onChange={({ currentTarget }) => setMessage(currentTarget.value)}
           onKeyDown={(event) => {
             if (event.key === 'Escape') {
@@ -88,38 +100,34 @@ export function DraftAnnotation({
             event.preventDefault();
             handleSave();
           }}
-          placeholder="Add a comment…"
+          placeholder="Leave a comment"
           rows={2}
-          className="field-sizing-content w-full resize-none rounded-sm bg-transparent py-1.5 text-[14px] text-inherit placeholder:text-[var(--diffshub-popover-muted-fg,var(--color-muted-foreground))] focus:outline-none"
+          className="field-sizing-content min-h-16 w-full resize-none rounded-lg border border-[var(--diffshub-annotation-border,var(--color-border))] bg-transparent px-3 py-2 text-[14px] text-inherit placeholder:text-[var(--diffshub-popover-muted-fg,var(--color-muted-foreground))] focus:border-blue-500 focus:outline-none disabled:opacity-60"
         />
       </div>
-      <div className="flex w-full justify-between gap-3 pl-10.5 md:w-auto md:justify-end md:pl-0">
-        <Button
-          type="button"
-          variant="muted"
-          onClick={tryCancel}
-          className="text-muted-foreground hover:text-foreground gap-1 font-normal hover:no-underline md:hidden"
-        >
-          Cancel
-        </Button>
-        <Button
-          type="submit"
-          variant="default"
-          size="icon-md"
-          disabled={trimmedMessage.length === 0}
-          className="hidden rounded-full bg-blue-500 hover:bg-blue-600 md:flex"
-        >
-          <IconArrowRight className="size-4 rotate-[-90deg]" />
-        </Button>
-        <Button
-          type="submit"
-          variant="default"
-          disabled={trimmedMessage.length === 0}
-          className="gap-1.5 bg-blue-500 hover:bg-blue-600 md:hidden"
-        >
-          Submit
-          <IconArrowRight className="-mr-0.5 size-3" />
-        </Button>
+      <div className="flex w-full items-center justify-between gap-3 pl-10.5">
+        <p className="text-muted-foreground min-w-0 text-[12px]">{hint}</p>
+        <div className="flex shrink-0 gap-2">
+          <Button
+            type="button"
+            variant="muted"
+            size="sm"
+            disabled={pending}
+            onClick={tryCancel}
+            className="text-muted-foreground hover:text-foreground font-normal hover:no-underline"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            variant="default"
+            size="sm"
+            disabled={trimmedMessage.length === 0 || pending}
+            className="bg-blue-500 hover:bg-blue-600"
+          >
+            {pending ? 'Posting…' : githubAuthor != null ? 'Comment' : 'Submit'}
+          </Button>
+        </div>
       </div>
     </form>
   );
diff --git a/apps/diffshub/components/GitHubAnnotation.tsx b/apps/diffshub/components/GitHubAnnotation.tsx
new file mode 100644
index 000000000..a9655fbcc
--- /dev/null
+++ b/apps/diffshub/components/GitHubAnnotation.tsx
@@ -0,0 +1,231 @@
+import type { CodeViewLineSelection, DiffLineAnnotation } from '@pierre/diffs';
+import { IconShare } from '@pierre/icons';
+import { memo, useState } from 'react';
+
+import { CommentAuthorAvatar } from './CommentAuthorAvatar';
+import { Button } from '@/components/Button';
+import { annotationCardBase } from '@/lib/annotation';
+import { cn } from '@/lib/cn';
+import { formatRelativeTime } from '@/lib/formatRelativeTime';
+import type {
+  GitHubCommentUser,
+  GitHubCommentWire,
+} from '@/lib/githubComments';
+import type { GitHubCommentMetadata } from '@/lib/types';
+
+interface GitHubAnnotationProps {
+  annotation: DiffLineAnnotation<GitHubCommentMetadata>;
+  itemId: string;
+  onPostReply?(rootCommentId: number, body: string): Promise<void>;
+  onToggleSelection(selection: CodeViewLineSelection): void;
+  replyAuthor?: GitHubCommentUser;
+}
+
+// Renders a GitHub comment thread inline in the diff: the root comment plus
+// its replies in one card. Clicking the card toggles the anchored line
+// selection, mirroring the local comment card; file-level threads have no
+// lines to select and render as a plain card.
+export const GitHubAnnotation = memo(function GitHubAnnotation({
+  annotation,
+  itemId,
+  onPostReply,
+  onToggleSelection,
+  replyAuthor,
+}: GitHubAnnotationProps) {
+  const { range, thread } = annotation.metadata;
+  const selection = range == null ? undefined : { id: itemId, range };
+  const toggleSelection =
+    selection == null ? undefined : () => onToggleSelection(selection);
+  return (
+    <div
+      role={toggleSelection == null ? undefined : 'button'}
+      tabIndex={toggleSelection == null ? undefined : 0}
+      className={cn(
+        annotationCardBase,
+        'flex-col',
+        toggleSelection != null &&
+          'cursor-pointer hover:border-[var(--diffshub-annotation-hover-border,var(--diffshub-annotation-border,var(--color-border)))]'
+      )}
+      onClick={toggleSelection}
+      onKeyDown={(event) => {
+        if (
+          toggleSelection == null ||
+          (event.key !== 'Enter' && event.key !== ' ')
+        ) {
+          return;
+        }
+        event.preventDefault();
+        toggleSelection();
+      }}
+    >
+      <GitHubThreadComment comment={thread.root} />
+      {thread.replies.length > 0 && (
+        <div className="mt-2.5 flex flex-col gap-2.5 border-t border-[var(--diffshub-annotation-border,var(--color-border))] pt-2.5">
+          {thread.replies.map((reply) => (
+            <GitHubThreadComment key={reply.id} comment={reply} />
+          ))}
+        </div>
+      )}
+      {onPostReply != null && (
+        <GitHubReplyForm
+          author={replyAuthor}
+          onPostReply={(body) => onPostReply(thread.root.id, body)}
+        />
+      )}
+    </div>
+  );
+});
+
+function GitHubReplyForm({
+  author,
+  onPostReply,
+}: {
+  author?: GitHubCommentUser;
+  onPostReply(body: string): Promise<void>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [body, setBody] = useState('');
+  const [pending, setPending] = useState(false);
+  const trimmedBody = body.trim();
+
+  function submit() {
+    if (trimmedBody === '' || pending) {
+      return;
+    }
+    setPending(true);
+    onPostReply(trimmedBody)
+      .then(() => {
+        setBody('');
+        setOpen(false);
+      })
+      .catch(() => {})
+      .finally(() => setPending(false));
+  }
+
+  const avatar =
+    author != null ? (
+      <CommentAuthorAvatar
+        seed={author.login}
+        avatarUrl={author.avatarUrl}
+        className="size-6"
+      />
+    ) : null;
+
+  if (!open) {
+    return (
+      <div className="mt-2.5 flex items-center gap-2.5 border-t border-[var(--diffshub-annotation-border,var(--color-border))] pt-2.5">
+        {avatar}
+        <button
+          type="button"
+          className="text-muted-foreground hover:text-foreground min-w-0 flex-1 cursor-text rounded-lg border border-[var(--diffshub-annotation-border,var(--color-border))] px-3 py-1.5 text-left text-[13px]"
+          onClick={(event) => {
+            event.stopPropagation();
+            setOpen(true);
+          }}
+        >
+          Write a reply
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="mt-2.5 flex flex-col gap-1.5 border-t border-[var(--diffshub-annotation-border,var(--color-border))] pt-2.5"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <div className="flex w-full gap-2.5">
+        {avatar}
+        <textarea
+          value={body}
+          disabled={pending}
+          autoFocus
+          onChange={({ currentTarget }) => setBody(currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              event.preventDefault();
+              setOpen(false);
+              return;
+            }
+            if ((event.metaKey || event.shiftKey) && event.key === 'Enter') {
+              event.preventDefault();
+              submit();
+            }
+          }}
+          placeholder="Write a reply"
+          rows={2}
+          className="field-sizing-content min-w-0 flex-1 resize-none rounded-lg border border-[var(--diffshub-annotation-border,var(--color-border))] bg-transparent px-3 py-1.5 text-[14px] text-inherit placeholder:text-[var(--diffshub-popover-muted-fg,var(--color-muted-foreground))] focus:border-blue-500 focus:outline-none disabled:opacity-60"
+        />
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="muted"
+          size="sm"
+          disabled={pending}
+          onClick={() => setOpen(false)}
+          className="text-muted-foreground hover:text-foreground font-normal hover:no-underline"
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="default"
+          size="sm"
+          disabled={trimmedBody === '' || pending}
+          onClick={submit}
+          className="bg-blue-500 hover:bg-blue-600"
+        >
+          {pending ? 'Posting…' : 'Reply'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// One comment of a GitHub thread: avatar, author, relative timestamp, an
+// open-on-GitHub link, and the body. Shared between the inline annotation
+// card and the sidebar's expanded view of threads without an inline card.
+export function GitHubThreadComment({
+  comment,
+}: {
+  comment: GitHubCommentWire;
+}) {
+  const timestamp = formatRelativeTime(comment.createdAt);
+  return (
+    <div className="flex gap-2.5">
+      <CommentAuthorAvatar
+        seed={comment.user.login}
+        avatarUrl={comment.user.avatarUrl}
+        className="size-6"
+      />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex items-baseline gap-2">
+          <strong className="text-[14px]">{comment.user.login}</strong>
+          {timestamp != null && (
+            <span className="text-muted-foreground text-[12px]">
+              {timestamp}
+            </span>
+          )}
+          {comment.htmlUrl != null && (
+            <a
+              href={comment.htmlUrl}
+              target="_blank"
+              rel="noreferrer noopener"
+              aria-label="Open comment on GitHub"
+              title="Open comment on GitHub"
+              className="text-muted-foreground hover:text-foreground ml-auto self-center"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <IconShare className="size-3" />
+            </a>
+          )}
+        </div>
+        <p className="m-0 text-[14px] break-words whitespace-pre-wrap">
+          {comment.body}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/diffshub/components/GitHubTokenControl.tsx b/apps/diffshub/components/GitHubTokenControl.tsx
index 737054030..df5520368 100644
--- a/apps/diffshub/components/GitHubTokenControl.tsx
+++ b/apps/diffshub/components/GitHubTokenControl.tsx
@@ -4,40 +4,63 @@ import { IconBrandGithub } from '@pierre/icons';
 import { type FormEvent, memo, useState } from 'react';
 
 import { Button } from '@/components/Button';
+import { ButtonGroup, ButtonGroupItem } from '@/components/ButtonGroup';
 import { Input } from '@/components/Input';
 import { cn } from '@/lib/cn';
+import type { GitHubTokenCapability } from '@/lib/githubTokenStorage';
 
 export const CREATE_TOKEN_URL =
   'https://github.com/settings/personal-access-tokens/new?name=DiffsHub%20Private%20Repo%20Read%20Access&description=Read+private+PRs+and+expand+collapsed+hunks&expires_in=90&contents=read&pull_requests=read&issues=read';
 
+export const CREATE_WRITE_TOKEN_URL =
+  'https://github.com/settings/personal-access-tokens/new?name=DiffsHub%20GitHub%20Access&description=Read+private+PRs+and+post+review+comments&expires_in=90&contents=read&pull_requests=write&issues=write';
+
 export const CLASSIC_TOKEN_URL =
   'https://github.com/settings/tokens/new?description=DiffsHub%20Private%20Repo%20Read%20Access&scopes=repo&default_expires_at=90';
 
 interface GitHubTokenControlProps {
   active: boolean;
+  capability: GitHubTokenCapability;
   className?: string;
   onClear(): void;
-  onSave(token: string): void;
+  onSave(token: string, capability: GitHubTokenCapability): void;
+  // Owner (user or org) of the repo being viewed. Appended to the
+  // fine-grained creation link as target_name so GitHub preselects the right
+  // resource owner — a fine-grained PAT can only write to repos under its
+  // resource owner, so for org repos the org must be selected there.
+  resourceOwner?: string;
   title?: string;
 }
 
 export const GitHubTokenControl = memo(function GitHubTokenControl({
   active,
+  capability,
   className,
   onClear,
   onSave,
+  resourceOwner,
   title = 'GitHub Token',
 }: GitHubTokenControlProps) {
   const [draftToken, setDraftToken] = useState('');
+  const [draftCapability, setDraftCapability] =
+    useState<GitHubTokenCapability>('read-write');
   const canSave = draftToken.trim() !== '';
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!canSave) {
       return;
     }
-    onSave(draftToken);
+    onSave(draftToken, draftCapability);
     setDraftToken('');
   };
+  const baseCreateTokenUrl =
+    draftCapability === 'read-write'
+      ? CREATE_WRITE_TOKEN_URL
+      : CREATE_TOKEN_URL;
+  const createTokenUrl =
+    resourceOwner == null
+      ? baseCreateTokenUrl
+      : `${baseCreateTokenUrl}&target_name=${encodeURIComponent(resourceOwner)}`;
 
   return (
     <section className={cn('px-2 py-1.5', className)} aria-label={title}>
@@ -52,13 +75,19 @@ export const GitHubTokenControl = memo(function GitHubTokenControl({
               : 'text-muted-foreground border-current/20'
           )}
         >
-          {active ? 'Active' : 'Optional'}
+          {active
+            ? capability === 'read-write'
+              ? 'Active · Write'
+              : 'Active'
+            : 'Optional'}
         </span>
       </div>
       {active ? (
         <>
           <p className="text-muted-foreground mt-1 max-w-124 text-[13px] text-pretty">
-            Using your PAT from localStorage. Clear it to create a new one.
+            {capability === 'read-write'
+              ? 'Using your PAT from localStorage. It can read private diffs and post comments. Clear it to create a new one.'
+              : 'Using your read-only PAT from localStorage. Clear it and save a token with write access to post comments.'}
           </p>
           <div className="mt-2 flex items-center gap-2">
             <Button
@@ -76,16 +105,38 @@ export const GitHubTokenControl = memo(function GitHubTokenControl({
         </>
       ) : (
         <>
-          <p className="text-muted-foreground mt-1 max-w-124 text-[13px] text-pretty">
+          <ButtonGroup
+            className="mt-2 flex w-full max-w-124"
+            size="sm"
+            value={draftCapability}
+            onValueChange={(value) =>
+              setDraftCapability(value === 'read' ? 'read' : 'read-write')
+            }
+          >
+            <ButtonGroupItem className="flex-1" value="read" title="Read only">
+              Read only
+            </ButtonGroupItem>
+            <ButtonGroupItem
+              className="flex-1"
+              value="read-write"
+              title="Read and comment"
+            >
+              Read + comment
+            </ButtonGroupItem>
+          </ButtonGroup>
+          <p className="text-muted-foreground mt-2 max-w-124 text-[13px] text-pretty">
             <a
               className="inline-link"
-              href={CREATE_TOKEN_URL}
+              href={createTokenUrl}
               target="_blank"
               rel="noreferrer noopener"
             >
               Create a fine-grained PAT
             </a>{' '}
-            on GitHub to view private diffs, or{' '}
+            on GitHub
+            {draftCapability === 'read-write'
+              ? ' to view private diffs and post PR comments, or '
+              : ' to view private diffs, or '}
             <a
               className="inline-link"
               href={CLASSIC_TOKEN_URL}
@@ -96,6 +147,15 @@ export const GitHubTokenControl = memo(function GitHubTokenControl({
             </a>{' '}
             with repo scope. Saved only in localStorage.
           </p>
+          {draftCapability === 'read-write' && (
+            <p className="text-muted-foreground mt-1 max-w-124 text-[12px] text-pretty">
+              A fine-grained PAT only writes to repos under its{' '}
+              <strong>Resource owner</strong> — for an org repo, pick the org
+              there (even as an admin), and set{' '}
+              <strong>Repository access</strong> to include the repo. For repos
+              you can't select, use a classic token with repo scope.
+            </p>
+          )}
           <form className="mt-2 flex gap-1.5" onSubmit={handleSubmit}>
             <Input
               className="bg-background flex-1"
diff --git a/apps/diffshub/components/ExampleAnnotation.tsx b/apps/diffshub/components/LocalCommentAnnotation.tsx
similarity index 93%
rename from apps/diffshub/components/ExampleAnnotation.tsx
rename to apps/diffshub/components/LocalCommentAnnotation.tsx
index ca0191486..bd0497588 100644
--- a/apps/diffshub/components/ExampleAnnotation.tsx
+++ b/apps/diffshub/components/LocalCommentAnnotation.tsx
@@ -8,19 +8,19 @@ import { annotationCardBase } from '@/lib/annotation';
 import { cn } from '@/lib/cn';
 import type { SavedCommentMetadata } from '@/lib/types';
 
-interface ExampleAnnotationProps {
+interface LocalCommentAnnotationProps {
   annotation: DiffLineAnnotation<SavedCommentMetadata>;
   itemId: string;
   onDelete(itemId: string, key: string): void;
   onToggleSelection(selection: CodeViewLineSelection): void;
 }
 
-export const ExampleAnnotation = memo(function ExampleAnnotation({
+export const LocalCommentAnnotation = memo(function LocalCommentAnnotation({
   annotation,
   itemId,
   onDelete,
   onToggleSelection,
-}: ExampleAnnotationProps) {
+}: LocalCommentAnnotationProps) {
   const selection = { id: itemId, range: annotation.metadata.range };
   return (
     <div
diff --git a/apps/diffshub/components/ReviewUI.tsx b/apps/diffshub/components/ReviewUI.tsx
index 3a656f098..c1006bb82 100644
--- a/apps/diffshub/components/ReviewUI.tsx
+++ b/apps/diffshub/components/ReviewUI.tsx
@@ -12,13 +12,16 @@ import {
   useRef,
   useState,
 } from 'react';
+import { toast } from 'sonner';
 
 import { DiffsHubHeader } from './DiffsHubHeader';
 import { DiffsHubSidebar } from './DiffsHubSidebar';
 import { DiffsHubStatusPanel } from './DiffsHubStatusPanel';
 import { DiffsHubViewer } from './DiffsHubViewer';
 import { ThemeSourceProvider } from './ThemeSourceProvider';
+import { useGitHubComments } from './useGitHubComments';
 import { useGitHubToken } from './useGitHubToken';
+import { useGitHubUser } from './useGitHubUser';
 import { usePatchLoader } from './usePatchLoader';
 import { useThemeCycle } from './useThemeCycle';
 import {
@@ -26,14 +29,24 @@ import {
   themeController,
 } from '@/components/themeController';
 import { preloadAvatars } from '@/lib/annotation';
+import {
+  type GitHubCommentWire,
+  mapAnnotationSideToGitHub,
+} from '@/lib/githubComments';
+import {
+  GitHubCommentPostError,
+  postGitHubCommentRequest,
+} from '@/lib/githubCommentsClient';
 import { createGitHubDiffFileLoader } from '@/lib/githubDiffFileLoader';
+import { parseGitHubDiffSource } from '@/lib/githubDiffSource';
 import { removeSavedCommentSidebarEntry } from '@/lib/removeSavedCommentSidebarEntry';
 import type { DarkThemeName, LightThemeName } from '@/lib/themeNames';
 import type {
   CommentMetadata,
   DiffsHubDeletedCommentEvent,
+  DiffsHubPostDraftRequest,
+  DiffsHubPostReplyRequest,
   DiffsHubSavedCommentEntry,
-  DiffsHubSavedCommentEvent,
 } from '@/lib/types';
 import { upsertSavedCommentSidebarEntry } from '@/lib/upsertSavedCommentSidebarEntry';
 
@@ -67,6 +80,7 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
   const [diffIndicators, setDiffIndicators] = useState<DiffIndicators>('bars');
   const [lineNumbers, setLineNumbers] = useState(true);
   const {
+    capability: githubTokenCapability,
     clearToken: clearGitHubToken,
     hasToken: hasGitHubToken,
     setToken: setGitHubToken,
@@ -172,6 +186,169 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
     path,
     viewerRef,
   });
+  // Real GitHub comments for the viewed source, fed into the same sidebar
+  // sections local demo comments use. Fetches in parallel with the patch and
+  // applies once the viewer is ready.
+  const { payload: githubCommentsPayload } = useGitHubComments({
+    commentFileByItemId,
+    domain,
+    getToken: getGitHubToken,
+    loadState,
+    path,
+    setCommentSections,
+    tokenVersion: githubTokenVersion,
+    treeSource,
+    viewerRef,
+  });
+
+  // The token owner's identity, shown on the comment form so posting reads
+  // as "you", not a random persona.
+  const githubUser = useGitHubUser({
+    getToken: getGitHubToken,
+    hasToken: hasGitHubToken,
+    tokenVersion: githubTokenVersion,
+  });
+
+  // Posting is available only on pull sources with a write-declared token and
+  // a known head sha (GitHub needs it as the commit_id of new comments).
+  const githubDiffSource = useMemo(
+    () => (domain == null ? parseGitHubDiffSource(path) : undefined),
+    [domain, path]
+  );
+  const githubHeadSha = githubCommentsPayload?.headSha;
+  const canPostGitHubComments =
+    githubDiffSource?.kind === 'pull' &&
+    hasGitHubToken &&
+    githubTokenCapability === 'read-write' &&
+    githubHeadSha != null;
+
+  const handleGitHubPostError = useCallback((error: unknown) => {
+    // 403 means no write access to THIS repo, which for fine-grained tokens
+    // is usually resource-owner scoping (they can never write to repos
+    // outside their owner), not a globally read-only token — so explain
+    // rather than downgrading the stored capability. Rate limiting arrives
+    // as 429, not 403.
+    if (error instanceof GitHubCommentPostError && error.status === 403) {
+      toast.error(
+        "GitHub rejected the comment: this token has no write access to this repo. A fine-grained PAT must have the repo's owner (user or org) as its resource owner — or use a classic token with repo scope."
+      );
+      return;
+    }
+    toast.error(
+      error instanceof Error ? error.message : 'Posting to GitHub failed.'
+    );
+  }, []);
+
+  const postGitHubDraftComment = useCallback(
+    async (request: DiffsHubPostDraftRequest): Promise<GitHubCommentWire> => {
+      const token = githubTokenRef.current;
+      const filePath = commentFileByItemId?.get(request.itemId)?.path;
+      if (token == null || githubHeadSha == null || filePath == null) {
+        const error = new Error('Missing GitHub posting context.');
+        handleGitHubPostError(error);
+        throw error;
+      }
+      try {
+        return await postGitHubCommentRequest(path, token, {
+          kind: 'comment',
+          body: request.message,
+          commitId: githubHeadSha,
+          filePath,
+          line: request.lineNumber,
+          side: mapAnnotationSideToGitHub(request.side),
+          ...(request.range.start !== request.range.end
+            ? {
+                startLine: request.range.start,
+                startSide: mapAnnotationSideToGitHub(
+                  request.range.side ?? request.side
+                ),
+              }
+            : {}),
+        });
+      } catch (error) {
+        handleGitHubPostError(error);
+        throw error;
+      }
+    },
+    [commentFileByItemId, githubHeadSha, handleGitHubPostError, path]
+  );
+
+  const postGitHubReply = useCallback(
+    async ({ body, itemId, key, rootCommentId }: DiffsHubPostReplyRequest) => {
+      const token = githubTokenRef.current;
+      if (token == null) {
+        const error = new Error('Missing GitHub posting context.');
+        handleGitHubPostError(error);
+        throw error;
+      }
+      let reply: GitHubCommentWire;
+      try {
+        reply = await postGitHubCommentRequest(path, token, {
+          kind: 'reply',
+          body,
+          commentId: rootCommentId,
+        });
+      } catch (error) {
+        handleGitHubPostError(error);
+        throw error;
+      }
+      // Append the reply to the inline thread annotation…
+      const viewer = viewerRef.current;
+      const item = viewer?.getItem(itemId);
+      if (viewer != null && item != null && item.type === 'diff') {
+        item.annotations = (item.annotations ?? []).map((annotation) =>
+          annotation.metadata.kind === 'github' &&
+          annotation.metadata.key === key
+            ? {
+                ...annotation,
+                metadata: {
+                  ...annotation.metadata,
+                  thread: {
+                    root: annotation.metadata.thread.root,
+                    replies: [...annotation.metadata.thread.replies, reply],
+                  },
+                },
+              }
+            : annotation
+        );
+        item.version = typeof item.version === 'number' ? item.version + 1 : 1;
+        viewer.updateItem(item);
+      }
+      // …and mirror it into the sidebar entry.
+      setCommentSections((previous) =>
+        previous.map((section) =>
+          section.itemId !== itemId
+            ? section
+            : {
+                ...section,
+                comments: section.comments.map((comment) =>
+                  comment.key !== key
+                    ? comment
+                    : {
+                        ...comment,
+                        replyCount: (comment.replyCount ?? 0) + 1,
+                        thread:
+                          comment.thread == null
+                            ? undefined
+                            : {
+                                root: comment.thread.root,
+                                replies: [...comment.thread.replies, reply],
+                              },
+                      }
+                ),
+              }
+        )
+      );
+    },
+    [handleGitHubPostError, path, setCommentSections]
+  );
+
+  const draftHint =
+    githubDiffSource?.kind === 'pull'
+      ? canPostGitHubComments
+        ? 'Posts to the pull request on GitHub.'
+        : 'Saved locally only — add a GitHub token with write access to post.'
+      : undefined;
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 767px)');
@@ -212,7 +389,7 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
     applyCollapseModeToLoaded(next);
   }, [applyCollapseModeToLoaded, collapseMode]);
   const handleCommentSaved = useCallback(
-    (comment: DiffsHubSavedCommentEvent) => {
+    (comment: DiffsHubSavedCommentEntry) => {
       setCommentSections((prev) =>
         upsertSavedCommentSidebarEntry(prev, commentFileByItemId, comment)
       );
@@ -236,6 +413,17 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
   const handleSelectComment = useCallback(
     (comment: DiffsHubSavedCommentEntry) => {
       setFileTreeOverlayOpen(false);
+      // File-level and outdated comments have no selectable lines in the
+      // current diff; jump to the file instead.
+      if (comment.anchor != null) {
+        viewerRef.current?.scrollTo({
+          type: 'item',
+          id: comment.itemId,
+          align: 'start',
+          behavior: 'smooth-auto',
+        });
+        return;
+      }
       viewerRef.current?.setSelectedLines({
         id: comment.itemId,
         range: comment.range,
@@ -277,7 +465,9 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
         overflow={overflow}
         fileTreeOverlayOpen={fileTreeOverlayOpen}
         fileTreeAvailable={treeSource != null}
+        githubRepoOwner={githubDiffSource?.repo.owner}
         githubTokenActive={hasGitHubToken}
+        githubTokenCapability={githubTokenCapability}
         onClearGitHubToken={clearGitHubToken}
         onSaveGitHubToken={setGitHubToken}
         onToggleCollapseMode={handleToggleCollapseMode}
@@ -296,6 +486,7 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
         <>
           <DiffsHubSidebar
             className="[grid-area:viewer] md:[grid-area:tree]"
+            commentsPostToGitHub={canPostGitHubComments}
             commentSections={commentSections}
             diffStats={diffStats}
             mobileOverlayOpen={fileTreeOverlayOpen}
@@ -321,10 +512,16 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
             viewerRef={viewerRef}
             initialItems={initialItems}
             loadDiffFiles={loadDiffFiles}
+            draftAuthor={canPostGitHubComments ? githubUser : undefined}
+            draftHint={draftHint}
             onCommentDeleted={handleCommentDeleted}
             onCommentSaved={handleCommentSaved}
             onLineLinkChange={onLineLinkChange}
             onViewerReady={onViewerReady}
+            postComment={
+              canPostGitHubComments ? postGitHubDraftComment : undefined
+            }
+            postReply={canPostGitHubComments ? postGitHubReply : undefined}
           />
         </>
       ) : (
diff --git a/apps/diffshub/components/WorkerPoolContext.tsx b/apps/diffshub/components/WorkerPoolContext.tsx
index 69ed5d563..3c7ba4cc2 100644
--- a/apps/diffshub/components/WorkerPoolContext.tsx
+++ b/apps/diffshub/components/WorkerPoolContext.tsx
@@ -6,7 +6,10 @@ import {
   WorkerPoolContextProvider,
   type WorkerPoolOptions,
 } from '@pierre/diffs/react';
-import type { ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
+
+import { themeController } from '@/components/themeController';
+import { diffThemeProps } from '@/lib/theme/diffThemeProps';
 
 function isMobileBrowser(): boolean {
   const navigator = global.navigator;
@@ -47,9 +50,6 @@ const PoolOptions: WorkerPoolOptions = {
 };
 
 const HighlighterOptions: WorkerInitializationRenderOptions = {
-  // diffshub used to override the default pair with the soft pierre themes;
-  // now that the canonical default IS the non-soft pair (shared via theming),
-  // every site initializes the pool with the same defaults.
   theme: DEFAULT_THEMES,
   langs: [
     'cpp',
@@ -66,6 +66,19 @@ const HighlighterOptions: WorkerInitializationRenderOptions = {
   preferredHighlighter: 'shiki-wasm',
 };
 
+function createInitialHighlighterOptions(): WorkerInitializationRenderOptions {
+  const { darkThemeName, lightThemeName, resolvedColorScheme } =
+    themeController.getState();
+  return {
+    ...HighlighterOptions,
+    theme: diffThemeProps({
+      colorScheme: resolvedColorScheme,
+      darkThemeName,
+      lightThemeName,
+    }).theme,
+  };
+}
+
 interface WorkerPoolProps {
   children: ReactNode;
   highlighterOptions?: WorkerInitializationRenderOptions;
@@ -74,13 +87,14 @@ interface WorkerPoolProps {
 
 export function WorkerPoolContext({
   children,
-  highlighterOptions = HighlighterOptions,
+  highlighterOptions,
   poolOptions = PoolOptions,
 }: WorkerPoolProps) {
+  const [initialHighlighterOptions] = useState(createInitialHighlighterOptions);
   return (
     <WorkerPoolContextProvider
       poolOptions={poolOptions}
-      highlighterOptions={highlighterOptions}
+      highlighterOptions={highlighterOptions ?? initialHighlighterOptions}
     >
       {children}
     </WorkerPoolContextProvider>
diff --git a/apps/diffshub/components/useGitHubComments.ts b/apps/diffshub/components/useGitHubComments.ts
new file mode 100644
index 000000000..d61b9e0a6
--- /dev/null
+++ b/apps/diffshub/components/useGitHubComments.ts
@@ -0,0 +1,387 @@
+'use client';
+
+import type { DiffLineAnnotation } from '@pierre/diffs';
+import type { CodeViewHandle } from '@pierre/diffs/react';
+import {
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { classifyCommentLineType } from '@/lib/classifyCommentLineType';
+import {
+  type GitHubCommentsPayload,
+  type GitHubCommentThread,
+  groupGitHubCommentThreads,
+  isGitHubCommentWire,
+  mapGitHubCommentSide,
+} from '@/lib/githubComments';
+import type {
+  CommentMetadata,
+  DiffsHubCommentFileByItemId,
+  DiffsHubCommentSidebarFile,
+  DiffsHubFileTreeSource,
+  DiffsHubSavedCommentEntry,
+  DiffsHubSavedCommentItem,
+  ViewerLoadState,
+} from '@/lib/types';
+import { upsertSavedCommentSidebarEntry } from '@/lib/upsertSavedCommentSidebarEntry';
+
+interface UseGitHubCommentsOptions {
+  commentFileByItemId: DiffsHubCommentFileByItemId | null;
+  domain?: string;
+  getToken(): string | undefined;
+  loadState: ViewerLoadState;
+  path: string;
+  setCommentSections: Dispatch<SetStateAction<DiffsHubSavedCommentItem[]>>;
+  tokenVersion: number;
+  treeSource: DiffsHubFileTreeSource | null;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+}
+
+interface UseGitHubCommentsResult {
+  commentsError: string | undefined;
+  payload: GitHubCommentsPayload | undefined;
+}
+
+// One thread mapped onto the rendered diff: the sidebar row plus, when the
+// thread anchors to a visible line or a whole file, the inline annotation.
+interface MappedGitHubThreadView {
+  annotationsByItemId: ReadonlyMap<
+    string,
+    DiffLineAnnotation<CommentMetadata>[]
+  >;
+  sections: DiffsHubSavedCommentItem[];
+}
+
+// Loads the GitHub comments for the viewed source through the same-origin
+// /api/github-comments proxy, renders each thread as an inline annotation,
+// and feeds the sidebar's comments list. Fetching starts immediately, but
+// applying waits until the patch loader reports 'ready' — items stream in
+// incrementally and item ids can be renamed mid-stream, so anchoring against
+// a half-built view is unsafe. A comments failure never blocks the diff
+// itself; the error is only surfaced through the returned state.
+export function useGitHubComments({
+  commentFileByItemId,
+  domain,
+  getToken,
+  loadState,
+  path,
+  setCommentSections,
+  tokenVersion,
+  treeSource,
+  viewerRef,
+}: UseGitHubCommentsOptions): UseGitHubCommentsResult {
+  const [payload, setPayload] = useState<GitHubCommentsPayload>();
+  const [commentsError, setCommentsError] = useState<string>();
+  // Item ids that currently carry GitHub annotations, so a re-apply (e.g.
+  // after a token change refetch) can clear annotations from items whose
+  // threads disappeared.
+  const annotatedItemIdsRef = useRef<ReadonlySet<string>>(new Set());
+
+  useEffect(() => {
+    setPayload(undefined);
+    setCommentsError(undefined);
+    // Non-GitHub sources (tangled.org etc.) have no GitHub comments and must
+    // never see the PAT, mirroring the patch loader's domain gate.
+    if (domain != null) {
+      return;
+    }
+    const controller = new AbortController();
+    const load = async () => {
+      try {
+        const params = new URLSearchParams({ path });
+        const response = await fetch(
+          `/api/github-comments?${params.toString()}`,
+          createCommentsRequestInit(controller.signal, getToken())
+        );
+        const data: unknown = await response.json();
+        if (!response.ok) {
+          throw new Error(
+            isRecord(data) && typeof data.error === 'string'
+              ? data.error
+              : `GitHub comments request failed (${response.status}).`
+          );
+        }
+        setPayload(normalizeCommentsPayload(data));
+      } catch (error) {
+        if (controller.signal.aborted) {
+          return;
+        }
+        setCommentsError(
+          error instanceof Error
+            ? error.message
+            : 'Failed to load GitHub comments.'
+        );
+      }
+    };
+    void load();
+    return () => controller.abort();
+  }, [domain, getToken, path, tokenVersion]);
+
+  useEffect(() => {
+    if (payload == null || loadState !== 'ready' || treeSource == null) {
+      return;
+    }
+    const viewer = viewerRef.current;
+    const { annotationsByItemId, sections } = mapGitHubThreads(
+      groupGitHubCommentThreads(payload.comments),
+      treeSource.pathToItemId,
+      commentFileByItemId,
+      viewer
+    );
+    if (viewer != null) {
+      annotatedItemIdsRef.current = applyGitHubAnnotations(
+        viewer,
+        annotationsByItemId,
+        annotatedItemIdsRef.current
+      );
+    }
+    setCommentSections((previous) =>
+      restoreLocalEntries(sections, previous, commentFileByItemId)
+    );
+  }, [
+    commentFileByItemId,
+    loadState,
+    payload,
+    setCommentSections,
+    treeSource,
+    viewerRef,
+  ]);
+
+  return { commentsError, payload };
+}
+
+// Converts GitHub comment threads into inline annotations plus the sidebar's
+// per-file sections. One entry/annotation represents a whole thread, anchored
+// where its root comment is:
+// - current-line threads render inline and select their range on click;
+// - file-level threads render as a lineNumber-0 annotation above the file;
+// - outdated threads (no line in the head diff) are sidebar-only;
+// - threads on files outside the rendered diff are dropped entirely.
+function mapGitHubThreads(
+  threads: readonly GitHubCommentThread[],
+  pathToItemId: ReadonlyMap<string, string>,
+  commentFileByItemId: DiffsHubCommentFileByItemId | null,
+  viewer: CodeViewHandle<CommentMetadata> | null
+): MappedGitHubThreadView {
+  interface SectionAccumulator {
+    comments: DiffsHubSavedCommentEntry[];
+    file: DiffsHubCommentSidebarFile;
+  }
+  const sectionsByItemId = new Map<string, SectionAccumulator>();
+  const annotationsByItemId = new Map<
+    string,
+    DiffLineAnnotation<CommentMetadata>[]
+  >();
+
+  const pushEntry = (itemId: string, entry: DiffsHubSavedCommentEntry) => {
+    const section = sectionsByItemId.get(itemId);
+    if (section != null) {
+      section.comments.push(entry);
+    }
+  };
+  const pushAnnotation = (
+    itemId: string,
+    annotation: DiffLineAnnotation<CommentMetadata>
+  ) => {
+    const annotations = annotationsByItemId.get(itemId);
+    if (annotations == null) {
+      annotationsByItemId.set(itemId, [annotation]);
+    } else {
+      annotations.push(annotation);
+    }
+  };
+
+  for (const thread of threads) {
+    const { root } = thread;
+    const itemId = pathToItemId.get(root.path);
+    const file = itemId == null ? null : commentFileByItemId?.get(itemId);
+    if (itemId == null || file == null) {
+      continue;
+    }
+    if (!sectionsByItemId.has(itemId)) {
+      sectionsByItemId.set(itemId, { comments: [], file });
+    }
+
+    const key = `gh-${root.id}`;
+    const side = mapGitHubCommentSide(root.side);
+    const shared = {
+      author: root.user.login,
+      avatarUrl: root.user.avatarUrl,
+      itemId,
+      key,
+      message: root.body,
+      replyCount: thread.replies.length,
+      side,
+      thread,
+    };
+
+    if (root.subjectType === 'file') {
+      pushEntry(itemId, {
+        ...shared,
+        anchor: 'file',
+        lineNumber: 0,
+        lineType: 'context',
+        range: { start: 0, end: 0 },
+      });
+      pushAnnotation(itemId, {
+        side,
+        lineNumber: 0,
+        metadata: { kind: 'github', key, thread },
+      });
+      continue;
+    }
+
+    if (root.line == null) {
+      const lineNumber = root.originalLine ?? 0;
+      pushEntry(itemId, {
+        ...shared,
+        anchor: 'outdated',
+        lineNumber,
+        lineType: 'context',
+        range: { start: lineNumber, end: lineNumber },
+      });
+      continue;
+    }
+
+    const range = {
+      start: root.startLine ?? root.line,
+      side: mapGitHubCommentSide(root.startSide ?? root.side),
+      end: root.line,
+      endSide: side,
+    };
+    const item = viewer?.getItem(itemId);
+    pushEntry(itemId, {
+      ...shared,
+      lineNumber: root.line,
+      lineType:
+        item?.type === 'diff'
+          ? classifyCommentLineType(item.fileDiff, side, root.line)
+          : 'change',
+      range,
+    });
+    pushAnnotation(itemId, {
+      side,
+      lineNumber: root.line,
+      metadata: { kind: 'github', key, range, thread },
+    });
+  }
+
+  const sections: DiffsHubSavedCommentItem[] = [];
+  for (const [itemId, { comments, file }] of sectionsByItemId) {
+    if (comments.length === 0) {
+      continue;
+    }
+    comments.sort((a, b) => a.lineNumber - b.lineNumber);
+    sections.push({
+      comments,
+      fileOrder: file.fileOrder,
+      itemId,
+      path: file.path,
+    });
+  }
+  sections.sort((a, b) => a.fileOrder - b.fileOrder);
+  return { annotationsByItemId, sections };
+}
+
+// Replaces the GitHub-derived annotations on viewer items with the freshly
+// mapped set, leaving local draft/saved annotations untouched. Items that had
+// GitHub annotations in the previous apply but not in this one are cleared.
+// Returns the item ids that now carry GitHub annotations.
+function applyGitHubAnnotations(
+  viewer: CodeViewHandle<CommentMetadata>,
+  annotationsByItemId: ReadonlyMap<
+    string,
+    DiffLineAnnotation<CommentMetadata>[]
+  >,
+  previouslyAnnotatedItemIds: ReadonlySet<string>
+): ReadonlySet<string> {
+  for (const [itemId, annotations] of annotationsByItemId) {
+    setGitHubAnnotationsOnItem(viewer, itemId, annotations);
+  }
+  for (const itemId of previouslyAnnotatedItemIds) {
+    if (!annotationsByItemId.has(itemId)) {
+      setGitHubAnnotationsOnItem(viewer, itemId, undefined);
+    }
+  }
+  return new Set(annotationsByItemId.keys());
+}
+
+function setGitHubAnnotationsOnItem(
+  viewer: CodeViewHandle<CommentMetadata>,
+  itemId: string,
+  annotations: readonly DiffLineAnnotation<CommentMetadata>[] | undefined
+): void {
+  const item = viewer.getItem(itemId);
+  if (item == null || item.type !== 'diff') {
+    return;
+  }
+  const localAnnotations = (item.annotations ?? []).filter(
+    (annotation) => annotation.metadata.kind !== 'github'
+  );
+  const nextAnnotations =
+    annotations == null
+      ? localAnnotations
+      : [...localAnnotations, ...annotations];
+  if (nextAnnotations.length === 0 && (item.annotations?.length ?? 0) === 0) {
+    return;
+  }
+  item.annotations = nextAnnotations;
+  item.version = typeof item.version === 'number' ? item.version + 1 : 1;
+  viewer.updateItem(item);
+}
+
+// Re-applies locally created comments on top of freshly mapped GitHub
+// sections so a refetch (e.g. after a token change) does not wipe comments
+// the user added in this session. GitHub-derived entries are recognizable by
+// their `gh-` key prefix.
+function restoreLocalEntries(
+  githubSections: DiffsHubSavedCommentItem[],
+  previousSections: readonly DiffsHubSavedCommentItem[],
+  commentFileByItemId: DiffsHubCommentFileByItemId | null
+): DiffsHubSavedCommentItem[] {
+  let next = githubSections;
+  for (const section of previousSections) {
+    for (const entry of section.comments) {
+      if (entry.key.startsWith('gh-')) {
+        continue;
+      }
+      next = upsertSavedCommentSidebarEntry(next, commentFileByItemId, entry);
+    }
+  }
+  return next;
+}
+
+function normalizeCommentsPayload(data: unknown): GitHubCommentsPayload {
+  if (!isRecord(data) || !Array.isArray(data.comments)) {
+    throw new Error('DiffsHub GitHub comments response was malformed.');
+  }
+  return {
+    comments: data.comments.filter(isGitHubCommentWire),
+    headSha: typeof data.headSha === 'string' ? data.headSha : undefined,
+    truncated: data.truncated === true,
+  };
+}
+
+function createCommentsRequestInit(
+  signal: AbortSignal,
+  token: string | undefined
+): RequestInit {
+  const normalizedToken = token?.trim();
+  if (normalizedToken == null || normalizedToken === '') {
+    return { cache: 'no-store', signal };
+  }
+  return {
+    cache: 'no-store',
+    headers: { Authorization: `Bearer ${normalizedToken}` },
+    signal,
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
diff --git a/apps/diffshub/components/useGitHubToken.ts b/apps/diffshub/components/useGitHubToken.ts
index 7dc1a4ec2..c1b53291b 100644
--- a/apps/diffshub/components/useGitHubToken.ts
+++ b/apps/diffshub/components/useGitHubToken.ts
@@ -1,68 +1,149 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-const GITHUB_TOKEN_STORAGE_KEY = 'diffshub.github.token';
+import {
+  GITHUB_TOKEN_STORAGE_KEY,
+  type GitHubTokenCapability,
+  isSameStoredGitHubAuth,
+  parseStoredGitHubAuth,
+  serializeStoredGitHubAuth,
+  type StoredGitHubAuth,
+} from '@/lib/githubTokenStorage';
+
+// Same-tab broadcast so every mounted useGitHubToken instance (home form,
+// viewer header) sees a save/clear immediately; cross-tab sync rides the
+// native 'storage' event. The event carries the new auth as detail so sync
+// still works when localStorage itself is disabled.
+const AUTH_CHANGE_EVENT = 'diffshub:github-auth-change';
 
 export interface GitHubTokenState {
+  capability: GitHubTokenCapability;
   clearToken(): void;
   hasToken: boolean;
-  setToken(token: string): void;
-  token: string;
+  setToken(token: string, capability: GitHubTokenCapability): void;
+  token: string | undefined;
   tokenVersion: number;
 }
 
 // Owns the optional user-provided GitHub token. The token is persisted only in
 // localStorage for this browser and is not sent anywhere until the loader
-// explicitly reads it.
+// explicitly reads it. `capability` records what the user said the token can
+// do; posting UI is gated on 'read-write'.
 export function useGitHubToken(): GitHubTokenState {
-  const [token, setTokenState] = useState('');
+  const [auth, setAuthState] = useState<StoredGitHubAuth | undefined>();
   const [tokenVersion, setTokenVersion] = useState(0);
 
-  useEffect(() => {
-    const storedToken = readStoredToken();
-    if (storedToken !== '') {
-      setTokenState(storedToken);
-      setTokenVersion((version) => version + 1);
-    }
+  const applyAuth = useCallback((next: StoredGitHubAuth | undefined) => {
+    setAuthState((previous) =>
+      isSameStoredGitHubAuth(previous, next) ? previous : next
+    );
   }, []);
 
-  const setToken = useCallback((nextToken: string) => {
-    const normalizedToken = nextToken.trim();
-    setTokenState(normalizedToken);
+  useEffect(() => {
+    applyAuth(readStoredAuth());
+    const handleAuthChange = (event: Event) => {
+      applyAuth((event as CustomEvent<StoredGitHubAuth | undefined>).detail);
+    };
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key == null || event.key === GITHUB_TOKEN_STORAGE_KEY) {
+        applyAuth(readStoredAuth());
+      }
+    };
+    window.addEventListener(AUTH_CHANGE_EVENT, handleAuthChange);
+    window.addEventListener('storage', handleStorage);
+    return () => {
+      window.removeEventListener(AUTH_CHANGE_EVENT, handleAuthChange);
+      window.removeEventListener('storage', handleStorage);
+    };
+  }, [applyAuth]);
+
+  const token = auth?.token;
+  const capability = auth?.capability ?? 'read';
+  const savedAt = auth?.savedAt;
+
+  // tokenVersion is the cache-busting signal loaders key their effects on.
+  // Bump it whenever the token itself changes, skipping the initial mount so
+  // an empty hydrate keeps version 0 and does not re-trigger the first load.
+  // Capability is deliberately not a dependency: it only gates UI (posting),
+  // so a capability-only change must not force every loader to refetch.
+  const hasHydratedRef = useRef(false);
+  useEffect(() => {
+    if (!hasHydratedRef.current) {
+      hasHydratedRef.current = true;
+      return;
+    }
     setTokenVersion((version) => version + 1);
-    writeStoredToken(normalizedToken);
-  }, []);
+  }, [savedAt, token]);
+
+  // Updates local state and persists the new auth; writeStoredAuth also
+  // broadcasts the change to the other mounted hook instances (and other tabs
+  // via the storage write).
+  const commitAuth = useCallback(
+    (nextAuth: StoredGitHubAuth | undefined) => {
+      applyAuth(nextAuth);
+      writeStoredAuth(nextAuth);
+    },
+    [applyAuth]
+  );
+
+  const setToken = useCallback(
+    (nextToken: string, nextCapability: GitHubTokenCapability) => {
+      const normalizedToken = nextToken.trim();
+      commitAuth(
+        normalizedToken === ''
+          ? undefined
+          : {
+              capability: nextCapability,
+              savedAt: new Date().toISOString(),
+              token: normalizedToken,
+            }
+      );
+    },
+    [commitAuth]
+  );
 
   const clearToken = useCallback(() => {
-    setToken('');
-  }, [setToken]);
+    commitAuth(undefined);
+  }, [commitAuth]);
 
   return {
+    capability,
     clearToken,
-    hasToken: token !== '',
+    hasToken: token != null,
     setToken,
     token,
     tokenVersion,
   };
 }
 
-function readStoredToken(): string {
+function readStoredAuth(): StoredGitHubAuth | undefined {
   try {
-    return globalThis.localStorage?.getItem(GITHUB_TOKEN_STORAGE_KEY) ?? '';
+    return parseStoredGitHubAuth(
+      globalThis.localStorage?.getItem(GITHUB_TOKEN_STORAGE_KEY) ?? null
+    );
   } catch {
-    return '';
+    return undefined;
   }
 }
 
-function writeStoredToken(token: string): void {
+// Persists the auth to localStorage and always broadcasts the change to the
+// other mounted hook instances, even when the storage write fails — the event
+// carries the auth as detail, so in-memory sync keeps working with storage
+// disabled.
+function writeStoredAuth(auth: StoredGitHubAuth | undefined): void {
   try {
-    if (token === '') {
+    if (auth == null) {
       globalThis.localStorage?.removeItem(GITHUB_TOKEN_STORAGE_KEY);
     } else {
-      globalThis.localStorage?.setItem(GITHUB_TOKEN_STORAGE_KEY, token);
+      globalThis.localStorage?.setItem(
+        GITHUB_TOKEN_STORAGE_KEY,
+        serializeStoredGitHubAuth(auth)
+      );
     }
   } catch {
     // Browsers can disable storage; in-memory state still works for the page.
+  } finally {
+    window.dispatchEvent(new CustomEvent(AUTH_CHANGE_EVENT, { detail: auth }));
   }
 }
diff --git a/apps/diffshub/components/useGitHubUser.ts b/apps/diffshub/components/useGitHubUser.ts
new file mode 100644
index 000000000..12f074826
--- /dev/null
+++ b/apps/diffshub/components/useGitHubUser.ts
@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import type { GitHubCommentUser } from '@/lib/githubComments';
+
+interface UseGitHubUserOptions {
+  getToken(): string | undefined;
+  hasToken: boolean;
+  tokenVersion: number;
+}
+
+// Resolves the saved token's GitHub identity through the same-origin
+// /api/github-user proxy. The identity is cosmetic (it puts the user's real
+// avatar on the comment form), so failures resolve to undefined silently and
+// callers fall back to the local persona avatar.
+export function useGitHubUser({
+  getToken,
+  hasToken,
+  tokenVersion,
+}: UseGitHubUserOptions): GitHubCommentUser | undefined {
+  const [user, setUser] = useState<GitHubCommentUser>();
+
+  useEffect(() => {
+    setUser(undefined);
+    if (!hasToken) {
+      return;
+    }
+    const controller = new AbortController();
+    const load = async () => {
+      try {
+        const token = getToken();
+        if (token == null) {
+          return;
+        }
+        const response = await fetch('/api/github-user', {
+          cache: 'no-store',
+          headers: { Authorization: `Bearer ${token}` },
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          return;
+        }
+        const data: unknown = await response.json();
+        if (
+          typeof data === 'object' &&
+          data != null &&
+          typeof (data as Record<string, unknown>).login === 'string'
+        ) {
+          const record = data as Record<string, unknown>;
+          setUser({
+            avatarUrl:
+              typeof record.avatarUrl === 'string'
+                ? record.avatarUrl
+                : undefined,
+            login: record.login as string,
+          });
+        }
+      } catch {
+        // Cosmetic lookup; stay silent on failure.
+      }
+    };
+    void load();
+    return () => controller.abort();
+  }, [getToken, hasToken, tokenVersion]);
+
+  return user;
+}
diff --git a/apps/diffshub/lib/formatRelativeTime.ts b/apps/diffshub/lib/formatRelativeTime.ts
new file mode 100644
index 000000000..4c6aff236
--- /dev/null
+++ b/apps/diffshub/lib/formatRelativeTime.ts
@@ -0,0 +1,33 @@
+// Formats an ISO timestamp as a short relative label ("2h ago", "3d ago"),
+// falling back to a plain date for anything older than a month. Returns
+// undefined for missing or unparseable input so callers can just omit the
+// label.
+export function formatRelativeTime(
+  isoDate: string | undefined,
+  now: number = Date.now()
+): string | undefined {
+  if (isoDate == null) {
+    return undefined;
+  }
+  const timestamp = Date.parse(isoDate);
+  if (Number.isNaN(timestamp)) {
+    return undefined;
+  }
+  const seconds = Math.max(0, Math.floor((now - timestamp) / 1000));
+  if (seconds < 60) {
+    return 'just now';
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.floor(hours / 24);
+  if (days < 31) {
+    return `${days}d ago`;
+  }
+  return new Date(timestamp).toLocaleDateString();
+}
diff --git a/apps/diffshub/lib/githubComments.ts b/apps/diffshub/lib/githubComments.ts
new file mode 100644
index 000000000..876270d0f
--- /dev/null
+++ b/apps/diffshub/lib/githubComments.ts
@@ -0,0 +1,127 @@
+import type { AnnotationSide } from '@pierre/diffs';
+
+// Wire model for GitHub comments as served by /api/github-comments. The
+// server normalizes GitHub's REST payloads into this shape so the client
+// never handles raw GitHub JSON.
+
+export type GitHubCommentSide = 'LEFT' | 'RIGHT';
+
+// GitHub's user objects use `login` for the @-handle; deleted accounts are
+// normalized to 'ghost', mirroring GitHub's own rendering.
+export interface GitHubCommentUser {
+  avatarUrl?: string;
+  login: string;
+}
+
+export interface GitHubCommentWire {
+  body: string;
+  createdAt?: string;
+  htmlUrl?: string;
+  id: number;
+  inReplyToId?: number;
+  // Line in the current head diff; absent when the comment is outdated
+  // (anchored to an older commit of the PR).
+  line?: number;
+  // Line the comment was originally left on; the only anchor an outdated
+  // comment still has.
+  originalLine?: number;
+  path: string;
+  side?: GitHubCommentSide;
+  startLine?: number;
+  startSide?: GitHubCommentSide;
+  subjectType: 'file' | 'line';
+  user: GitHubCommentUser;
+}
+
+export interface GitHubCommentsPayload {
+  comments: GitHubCommentWire[];
+  // Pull sources only: the head commit id, required later to post comments.
+  headSha?: string;
+  // True when the source had more comments than the server-side page cap.
+  truncated: boolean;
+}
+
+export interface GitHubCommentThread {
+  replies: GitHubCommentWire[];
+  root: GitHubCommentWire;
+}
+
+// Body of a POST /api/github-comments request: either a new review comment
+// anchored to a line (or line range) of the pull's head diff, or a reply to
+// an existing thread. The pull request itself is addressed by the `path`
+// query parameter, like the GET.
+export type PostGitHubCommentRequest =
+  | { kind: 'reply'; body: string; commentId: number }
+  | {
+      kind: 'comment';
+      body: string;
+      commitId: string;
+      filePath: string;
+      line: number;
+      side: GitHubCommentSide;
+      startLine?: number;
+      startSide?: GitHubCommentSide;
+    };
+
+// GitHub anchors review comments to the LEFT (old) or RIGHT (new) version of
+// a file; the diff viewer calls the same columns deletions/additions.
+export function mapGitHubCommentSide(
+  side: GitHubCommentSide | undefined
+): AnnotationSide {
+  return side === 'LEFT' ? 'deletions' : 'additions';
+}
+
+export function mapAnnotationSideToGitHub(
+  side: AnnotationSide
+): GitHubCommentSide {
+  return side === 'deletions' ? 'LEFT' : 'RIGHT';
+}
+
+// Guards the wire-comment fields client code dereferences. Payloads come from
+// our own same-origin route, so this intentionally checks only what is used
+// rather than re-validating every property the server already normalized.
+export function isGitHubCommentWire(
+  value: unknown
+): value is GitHubCommentWire {
+  if (typeof value !== 'object' || value == null) {
+    return false;
+  }
+  const record = value as Record<string, unknown>;
+  const user = record.user as Record<string, unknown> | undefined;
+  return (
+    typeof record.id === 'number' &&
+    typeof record.path === 'string' &&
+    typeof record.body === 'string' &&
+    typeof user === 'object' &&
+    user != null &&
+    typeof user.login === 'string'
+  );
+}
+
+// Groups a flat comment list into threads. GitHub returns review comments in
+// ascending id (chronological) order, and a reply references an earlier
+// comment via inReplyToId — usually the thread root, but chains are tolerated
+// by indexing every seen comment. A reply whose parent is missing (e.g.
+// dropped by the server page cap) is promoted to a thread root so no comment
+// silently disappears.
+export function groupGitHubCommentThreads(
+  comments: readonly GitHubCommentWire[]
+): GitHubCommentThread[] {
+  const threads: GitHubCommentThread[] = [];
+  const threadByCommentId = new Map<number, GitHubCommentThread>();
+  for (const comment of comments) {
+    const parentThread =
+      comment.inReplyToId == null
+        ? undefined
+        : threadByCommentId.get(comment.inReplyToId);
+    if (parentThread == null) {
+      const thread: GitHubCommentThread = { replies: [], root: comment };
+      threads.push(thread);
+      threadByCommentId.set(comment.id, thread);
+    } else {
+      parentThread.replies.push(comment);
+      threadByCommentId.set(comment.id, parentThread);
+    }
+  }
+  return threads;
+}
diff --git a/apps/diffshub/lib/githubCommentsClient.ts b/apps/diffshub/lib/githubCommentsClient.ts
new file mode 100644
index 000000000..94e1dd971
--- /dev/null
+++ b/apps/diffshub/lib/githubCommentsClient.ts
@@ -0,0 +1,53 @@
+import {
+  type GitHubCommentWire,
+  isGitHubCommentWire,
+  type PostGitHubCommentRequest,
+} from './githubComments';
+
+// Error carrying the proxy response status so callers can react to specific
+// failures: 403 means the token lacks write permission (drives the stored
+// capability downgrade), 429 means rate limited.
+export class GitHubCommentPostError extends Error {
+  readonly status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.status = status;
+  }
+}
+
+// Posts a comment or reply through the same-origin /api/github-comments
+// proxy and returns the created comment.
+export async function postGitHubCommentRequest(
+  path: string,
+  token: string,
+  request: PostGitHubCommentRequest
+): Promise<GitHubCommentWire> {
+  const params = new URLSearchParams({ path });
+  const response = await fetch(`/api/github-comments?${params.toString()}`, {
+    body: JSON.stringify(request),
+    cache: 'no-store',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  });
+  const data: unknown = await response.json().catch(() => undefined);
+  if (!response.ok) {
+    const message =
+      typeof data === 'object' &&
+      data != null &&
+      typeof (data as Record<string, unknown>).error === 'string'
+        ? ((data as Record<string, unknown>).error as string)
+        : `Posting the comment failed (${response.status}).`;
+    throw new GitHubCommentPostError(message, response.status);
+  }
+  if (!isGitHubCommentWire(data)) {
+    throw new GitHubCommentPostError(
+      'GitHub returned an unexpected comment shape.',
+      502
+    );
+  }
+  return data;
+}
diff --git a/apps/diffshub/lib/githubCommentsServer.ts b/apps/diffshub/lib/githubCommentsServer.ts
new file mode 100644
index 000000000..dc634e67f
--- /dev/null
+++ b/apps/diffshub/lib/githubCommentsServer.ts
@@ -0,0 +1,380 @@
+import type {
+  GitHubCommentSide,
+  GitHubCommentsPayload,
+  GitHubCommentUser,
+  GitHubCommentWire,
+  PostGitHubCommentRequest,
+} from './githubComments';
+import {
+  encodeURLSegment,
+  type GitHubDiffSource,
+  type GitHubRepo,
+} from './githubDiffSource';
+
+const GITHUB_API_ROOT = 'https://api.github.com';
+const GITHUB_API_VERSION = '2022-11-28';
+// GitHub caps per_page at 100. Ten pages bounds a pathological source at
+// 1,000 comments; the payload reports `truncated` instead of silently
+// dropping the tail.
+const COMMENTS_PER_PAGE = 100;
+const MAX_COMMENT_PAGES = 10;
+
+type GitHubServerFetch = (url: string, init: RequestInit) => Promise<Response>;
+
+interface GitHubCommentsServerOptions {
+  fetch?: GitHubServerFetch;
+  token?: string;
+}
+
+// Error carrying an HTTP status the proxy route can pass back to the client,
+// so failures stay actionable there: 403 drives the capability downgrade, 429
+// distinguishes rate limiting from missing write permission.
+export class GitHubCommentsRequestError extends Error {
+  readonly status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.status = status;
+  }
+}
+
+// Fetches and normalizes the GitHub comments for a diff source. Pull sources
+// return PR review comments plus the head sha (needed later to post new
+// comments); commit sources return commit comments; compare views have no
+// GitHub comment API and resolve empty. Without a caller token the server env
+// token (if any) raises the anonymous rate limit for public sources.
+export async function loadGitHubComments(
+  source: GitHubDiffSource,
+  options: GitHubCommentsServerOptions = {}
+): Promise<GitHubCommentsPayload> {
+  const fetcher = options.fetch ?? fetch;
+  const token = options.token ?? getEnvGitHubToken();
+
+  if (source.kind === 'compare') {
+    return { comments: [], truncated: false };
+  }
+
+  if (source.kind === 'commit') {
+    const { comments, truncated } = await fetchCommentPages(
+      `${createRepoAPIRoot(source.repo)}/commits/${encodeURLSegment(source.sha)}/comments`,
+      fetcher,
+      token
+    );
+    return { comments, truncated };
+  }
+
+  const repoRoot = createRepoAPIRoot(source.repo);
+  const pullNumber = encodeURLSegment(source.number);
+  const [{ comments, truncated }, headSha] = await Promise.all([
+    fetchCommentPages(
+      `${repoRoot}/pulls/${pullNumber}/comments`,
+      fetcher,
+      token
+    ),
+    fetchPullHeadSha(`${repoRoot}/pulls/${pullNumber}`, fetcher, token),
+  ]);
+  return { comments, headSha, truncated };
+}
+
+// Creates a review comment or a thread reply on a pull request using the
+// caller's token — posting never falls back to the server env token, because
+// the server's identity must not author user comments.
+export async function postGitHubComment(
+  source: GitHubDiffSource,
+  request: PostGitHubCommentRequest,
+  options: { fetch?: GitHubServerFetch; token: string }
+): Promise<GitHubCommentWire> {
+  if (source.kind !== 'pull') {
+    throw new GitHubCommentsRequestError(
+      'Posting comments is only supported on pull requests.',
+      400
+    );
+  }
+  const fetcher = options.fetch ?? fetch;
+  const repoRoot = createRepoAPIRoot(source.repo);
+  const pullNumber = encodeURLSegment(source.number);
+  const target =
+    request.kind === 'reply'
+      ? {
+          url: `${repoRoot}/pulls/${pullNumber}/comments/${request.commentId}/replies`,
+          payload: { body: request.body },
+        }
+      : {
+          url: `${repoRoot}/pulls/${pullNumber}/comments`,
+          payload: {
+            body: request.body,
+            commit_id: request.commitId,
+            path: request.filePath,
+            line: request.line,
+            side: request.side,
+            // GitHub rejects start_line == line; only send the start pair for
+            // real multi-line ranges.
+            ...(request.startLine != null && request.startLine !== request.line
+              ? {
+                  start_line: request.startLine,
+                  start_side: request.startSide ?? request.side,
+                }
+              : {}),
+          },
+        };
+  const response = await fetcher(target.url, {
+    body: JSON.stringify(target.payload),
+    cache: 'no-store',
+    headers: {
+      ...createGitHubJSONHeaders(options.token),
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  });
+  await assertGitHubResponseOK(response, `GitHub API ${target.url}`);
+  const comment = normalizeGitHubComment(await response.json());
+  if (comment == null) {
+    throw new GitHubCommentsRequestError(
+      'GitHub returned an unexpected comment shape.',
+      502
+    );
+  }
+  return comment;
+}
+
+// Resolves the identity (login + avatar) of the token's owner, so the
+// posting UI can show who a comment will be authored as.
+export async function loadGitHubTokenUser(options: {
+  fetch?: GitHubServerFetch;
+  token: string;
+}): Promise<GitHubCommentUser> {
+  const fetcher = options.fetch ?? fetch;
+  const url = `${GITHUB_API_ROOT}/user`;
+  const response = await fetcher(url, {
+    cache: 'no-store',
+    headers: createGitHubJSONHeaders(options.token),
+  });
+  await assertGitHubResponseOK(response, `GitHub API ${url}`);
+  const data: unknown = await response.json();
+  const login = isRecord(data) ? readString(data.login) : undefined;
+  if (login == null) {
+    throw new GitHubCommentsRequestError(
+      'GitHub returned an unexpected user shape.',
+      502
+    );
+  }
+  return {
+    avatarUrl: isRecord(data) ? readString(data.avatar_url) : undefined,
+    login,
+  };
+}
+
+// Validates an untrusted POST body into a PostGitHubCommentRequest, or
+// undefined when the shape is unusable.
+export function parsePostGitHubCommentRequest(
+  data: unknown
+): PostGitHubCommentRequest | undefined {
+  if (!isRecord(data) || typeof data.body !== 'string') {
+    return undefined;
+  }
+  const body = data.body.trim();
+  if (body === '') {
+    return undefined;
+  }
+  if (data.kind === 'reply') {
+    return typeof data.commentId === 'number'
+      ? { kind: 'reply', body, commentId: data.commentId }
+      : undefined;
+  }
+  if (data.kind !== 'comment') {
+    return undefined;
+  }
+  const side = readCommentSide(data.side);
+  if (
+    typeof data.commitId !== 'string' ||
+    typeof data.filePath !== 'string' ||
+    typeof data.line !== 'number' ||
+    side == null
+  ) {
+    return undefined;
+  }
+  return {
+    kind: 'comment',
+    body,
+    commitId: data.commitId,
+    filePath: data.filePath,
+    line: data.line,
+    side,
+    startLine: readNumber(data.startLine),
+    startSide: readCommentSide(data.startSide),
+  };
+}
+
+function createRepoAPIRoot(repo: GitHubRepo): string {
+  return `${GITHUB_API_ROOT}/repos/${encodeURLSegment(repo.owner)}/${encodeURLSegment(repo.repo)}`;
+}
+
+async function fetchCommentPages(
+  baseURL: string,
+  fetcher: GitHubServerFetch,
+  token: string | undefined
+): Promise<{ comments: GitHubCommentWire[]; truncated: boolean }> {
+  const comments: GitHubCommentWire[] = [];
+  for (let page = 1; page <= MAX_COMMENT_PAGES; page++) {
+    const url = `${baseURL}?per_page=${COMMENTS_PER_PAGE}&page=${page}`;
+    const response = await fetcher(url, {
+      cache: 'no-store',
+      headers: createGitHubJSONHeaders(token),
+    });
+    await assertGitHubResponseOK(response, `GitHub API ${url}`);
+    const data: unknown = await response.json();
+    if (!Array.isArray(data)) {
+      throw new Error(`GitHub API ${baseURL} returned an unexpected shape.`);
+    }
+    for (const entry of data) {
+      const comment = normalizeGitHubComment(entry);
+      if (comment != null) {
+        comments.push(comment);
+      }
+    }
+    // A short page means it was the last one. (A source whose total is an
+    // exact multiple of the page size reads as truncated; that false positive
+    // is harmless and avoids parsing Link headers.)
+    if (data.length < COMMENTS_PER_PAGE) {
+      return { comments, truncated: false };
+    }
+  }
+  return { comments, truncated: true };
+}
+
+// The head sha only matters for posting comments later, so a failure here
+// degrades to an undefined sha instead of failing the whole comments load.
+async function fetchPullHeadSha(
+  url: string,
+  fetcher: GitHubServerFetch,
+  token: string | undefined
+): Promise<string | undefined> {
+  try {
+    const response = await fetcher(url, {
+      cache: 'no-store',
+      headers: createGitHubJSONHeaders(token),
+    });
+    await assertGitHubResponseOK(response, `GitHub API ${url}`);
+    const data: unknown = await response.json();
+    if (!isRecord(data) || !isRecord(data.head)) {
+      return undefined;
+    }
+    return readString(data.head.sha);
+  } catch {
+    return undefined;
+  }
+}
+
+// Normalizes one raw GitHub comment (PR review comment or commit comment)
+// into the wire model. Comments without an id or a file path are dropped —
+// path-less commit comments are commit-level discussion with no diff anchor,
+// which is out of scope.
+function normalizeGitHubComment(data: unknown): GitHubCommentWire | undefined {
+  if (!isRecord(data)) {
+    return undefined;
+  }
+  const id = readNumber(data.id);
+  const path = readString(data.path);
+  if (id == null || path == null) {
+    return undefined;
+  }
+  const user = isRecord(data.user) ? data.user : undefined;
+  return {
+    body: typeof data.body === 'string' ? data.body : '',
+    createdAt: readString(data.created_at),
+    htmlUrl: readString(data.html_url),
+    id,
+    inReplyToId: readNumber(data.in_reply_to_id),
+    line: readNumber(data.line),
+    originalLine: readNumber(data.original_line),
+    path,
+    side: readCommentSide(data.side),
+    startLine: readNumber(data.start_line),
+    startSide: readCommentSide(data.start_side),
+    subjectType: data.subject_type === 'file' ? 'file' : 'line',
+    user: {
+      avatarUrl: readString(user?.avatar_url),
+      // GitHub renders deleted accounts as "ghost"; mirror that.
+      login: readString(user?.login) ?? 'ghost',
+    },
+  };
+}
+
+function createGitHubJSONHeaders(
+  token: string | undefined
+): Record<string, string> {
+  const headers: Record<string, string> = {
+    Accept: 'application/vnd.github+json',
+    'User-Agent': 'pierre-diffshub',
+    'X-GitHub-Api-Version': GITHUB_API_VERSION,
+  };
+  if (token != null && token !== '') {
+    headers.Authorization = `Bearer ${token}`;
+  }
+  return headers;
+}
+
+async function assertGitHubResponseOK(
+  response: Response,
+  label: string
+): Promise<void> {
+  if (response.ok) {
+    return;
+  }
+
+  const detail = (await response.text()).trim();
+  if (isGitHubRateLimitResponse(response, detail)) {
+    // 429 keeps rate limiting distinguishable from a 403 permission failure,
+    // which the client reacts to by downgrading the stored capability.
+    throw new GitHubCommentsRequestError(
+      'GitHub rate limit exceeded. Add a GitHub token in DiffsHub settings to raise the limit.',
+      429
+    );
+  }
+
+  throw new GitHubCommentsRequestError(
+    detail.length > 0
+      ? `${label} failed (${response.status}): ${detail}`
+      : `${label} failed (${response.status}).`,
+    response.status
+  );
+}
+
+function isGitHubRateLimitResponse(
+  response: Response,
+  detail: string
+): boolean {
+  if (response.status !== 403) {
+    return false;
+  }
+  return (
+    response.headers.get('x-ratelimit-remaining') === '0' ||
+    /rate limit/i.test(detail)
+  );
+}
+
+function readString(value: unknown): string | undefined {
+  return typeof value === 'string' && value !== '' ? value : undefined;
+}
+
+function readNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
+function readCommentSide(value: unknown): GitHubCommentSide | undefined {
+  return value === 'LEFT' || value === 'RIGHT' ? value : undefined;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function getEnvGitHubToken(): string | undefined {
+  return (
+    process.env.DIFFSHUB_GITHUB_TOKEN ??
+    process.env.GITHUB_TOKEN ??
+    process.env.GH_TOKEN
+  );
+}
diff --git a/apps/diffshub/lib/githubTokenStorage.ts b/apps/diffshub/lib/githubTokenStorage.ts
new file mode 100644
index 000000000..d8ed198d4
--- /dev/null
+++ b/apps/diffshub/lib/githubTokenStorage.ts
@@ -0,0 +1,76 @@
+// Storage codec for the user's GitHub PAT. The token is persisted in
+// localStorage as a versioned JSON envelope that records what the token is
+// allowed to do ('read' views private diffs; 'read-write' can also post
+// comments). Legacy entries were the bare token string — those parse as
+// read-only since that is all the app ever asked those tokens to grant.
+
+export const GITHUB_TOKEN_STORAGE_KEY = 'diffshub.github.token';
+
+export type GitHubTokenCapability = 'read' | 'read-write';
+
+export interface StoredGitHubAuth {
+  capability: GitHubTokenCapability;
+  savedAt?: string;
+  token: string;
+}
+
+// Parses a raw localStorage value into auth state. Returns undefined for
+// empty/corrupt values so callers fall back to "no token". GitHub tokens
+// (ghp_/github_pat_/legacy hex) never start with '{', which makes the
+// envelope-vs-legacy check unambiguous.
+export function parseStoredGitHubAuth(
+  raw: string | null
+): StoredGitHubAuth | undefined {
+  if (raw == null || raw === '') {
+    return undefined;
+  }
+  if (!raw.startsWith('{')) {
+    return { capability: 'read', token: raw };
+  }
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return undefined;
+  }
+  if (typeof parsed !== 'object' || parsed == null) {
+    return undefined;
+  }
+  const record = parsed as Record<string, unknown>;
+  const token = typeof record.token === 'string' ? record.token.trim() : '';
+  if (token === '') {
+    return undefined;
+  }
+  return {
+    capability: record.capability === 'read-write' ? 'read-write' : 'read',
+    savedAt: typeof record.savedAt === 'string' ? record.savedAt : undefined,
+    token,
+  };
+}
+
+export function serializeStoredGitHubAuth(auth: StoredGitHubAuth): string {
+  return JSON.stringify({
+    capability: auth.capability,
+    savedAt: auth.savedAt,
+    token: auth.token,
+    version: 1,
+  });
+}
+
+// Equality over the fields that affect behavior; used to dedupe sync events
+// between hook instances. savedAt participates so re-saving the same token
+// still counts as a change (it re-triggers loads, matching the old behavior
+// of bumping the version on every save).
+export function isSameStoredGitHubAuth(
+  a: StoredGitHubAuth | undefined,
+  b: StoredGitHubAuth | undefined
+): boolean {
+  if (a == null || b == null) {
+    return a == null && b == null;
+  }
+  return (
+    a.capability === b.capability &&
+    a.savedAt === b.savedAt &&
+    a.token === b.token
+  );
+}
diff --git a/apps/diffshub/lib/isGitHubAnnotation.ts b/apps/diffshub/lib/isGitHubAnnotation.ts
new file mode 100644
index 000000000..a4fe048a6
--- /dev/null
+++ b/apps/diffshub/lib/isGitHubAnnotation.ts
@@ -0,0 +1,9 @@
+import type { DiffLineAnnotation } from '@pierre/diffs';
+
+import type { CommentMetadata, GitHubCommentMetadata } from './types';
+
+export function isGitHubAnnotation(
+  annotation: DiffLineAnnotation<CommentMetadata>
+): annotation is DiffLineAnnotation<GitHubCommentMetadata> {
+  return annotation.metadata.kind === 'github';
+}
diff --git a/apps/diffshub/lib/types.ts b/apps/diffshub/lib/types.ts
index aa50c07a7..a00d52b2e 100644
--- a/apps/diffshub/lib/types.ts
+++ b/apps/diffshub/lib/types.ts
@@ -1,6 +1,8 @@
 import type { AnnotationSide, SelectedLineRange } from '@pierre/diffs';
 import type { FileTreeGitStatusPatch, GitStatusEntry } from '@pierre/trees';
 
+import type { GitHubCommentThread } from './githubComments';
+
 export type ViewerLoadState =
   | 'fetching'
   | 'streaming'
@@ -20,10 +22,27 @@ export interface DraftCommentMetadata {
   kind: 'draft';
   key: string;
   message: string;
+  // True while the draft is being posted to GitHub; the form disables itself
+  // until the post settles.
+  pending?: boolean;
   range: SelectedLineRange;
 }
 
-export type CommentMetadata = SavedCommentMetadata | DraftCommentMetadata;
+// A real GitHub comment thread rendered inline. One annotation carries the
+// whole thread (root plus replies), anchored where the root comment is.
+export interface GitHubCommentMetadata {
+  kind: 'github';
+  key: string;
+  // Selection range for the anchored lines; absent for file-level threads,
+  // which have no line to select.
+  range?: SelectedLineRange;
+  thread: GitHubCommentThread;
+}
+
+export type CommentMetadata =
+  | SavedCommentMetadata
+  | DraftCommentMetadata
+  | GitHubCommentMetadata;
 
 export interface DiffsHubCommentSidebarFile {
   fileOrder: number;
@@ -40,31 +59,47 @@ export type DiffsHubCommentFileByItemId = ReadonlyMap<
 // render "Line N" without a misleading + / - sigil for context lines.
 export type CommentLineType = 'change' | 'context';
 
-export interface DiffsHubSavedCommentEvent {
-  author: string;
+// Payloads for the viewer→app posting callbacks: a finished draft to publish
+// as a new GitHub review comment, and a reply to an existing thread.
+export interface DiffsHubPostDraftRequest {
   itemId: string;
   key: string;
   lineNumber: number;
-  lineType: CommentLineType;
   message: string;
   range: SelectedLineRange;
   side: AnnotationSide;
 }
 
+export interface DiffsHubPostReplyRequest {
+  body: string;
+  itemId: string;
+  key: string;
+  rootCommentId: number;
+}
+
 export interface DiffsHubDeletedCommentEvent {
   itemId: string;
   key: string;
 }
 
 export interface DiffsHubSavedCommentEntry {
+  // How the comment attaches to the diff. Absent means a normal line anchor;
+  // 'file' is a file-level comment; 'outdated' is a GitHub comment whose line
+  // no longer exists in the current head diff (lineNumber then holds the
+  // original line, or 0 when unknown). Non-line anchors navigate to the file
+  // instead of selecting lines.
+  anchor?: 'file' | 'outdated';
   author: string;
+  avatarUrl?: string;
   itemId: string;
   key: string;
   lineNumber: number;
   lineType: CommentLineType;
   message: string;
   range: SelectedLineRange;
+  replyCount?: number;
   side: AnnotationSide;
+  thread?: GitHubCommentThread;
 }
 
 export interface DiffsHubSavedCommentItem {
diff --git a/apps/diffshub/lib/upsertSavedCommentSidebarEntry.ts b/apps/diffshub/lib/upsertSavedCommentSidebarEntry.ts
index cf69dd6ee..aa05313d9 100644
--- a/apps/diffshub/lib/upsertSavedCommentSidebarEntry.ts
+++ b/apps/diffshub/lib/upsertSavedCommentSidebarEntry.ts
@@ -2,31 +2,19 @@ import { insertCommentInLineOrder } from './insertCommentInLineOrder';
 import type {
   DiffsHubCommentFileByItemId,
   DiffsHubSavedCommentEntry,
-  DiffsHubSavedCommentEvent,
   DiffsHubSavedCommentItem,
 } from './types';
 
 export function upsertSavedCommentSidebarEntry(
   sections: readonly DiffsHubSavedCommentItem[],
   commentFileByItemId: DiffsHubCommentFileByItemId | null,
-  entry: DiffsHubSavedCommentEvent
+  entry: DiffsHubSavedCommentEntry
 ): DiffsHubSavedCommentItem[] {
   const file = commentFileByItemId?.get(entry.itemId);
   if (file == null) {
     return [...sections];
   }
 
-  const nextEntry: DiffsHubSavedCommentEntry = {
-    author: entry.author,
-    itemId: entry.itemId,
-    key: entry.key,
-    lineNumber: entry.lineNumber,
-    lineType: entry.lineType,
-    message: entry.message,
-    range: entry.range,
-    side: entry.side,
-  };
-
   const nextSections = [...sections];
   let sectionIndex = -1;
   for (let index = 0; index < nextSections.length; index++) {
@@ -38,7 +26,7 @@ export function upsertSavedCommentSidebarEntry(
 
   if (sectionIndex === -1) {
     const nextSection: DiffsHubSavedCommentItem = {
-      comments: [nextEntry],
+      comments: [entry],
       fileOrder: file.fileOrder,
       itemId: entry.itemId,
       path: file.path,
@@ -64,7 +52,7 @@ export function upsertSavedCommentSidebarEntry(
 
   nextSections[sectionIndex] = {
     ...section,
-    comments: insertCommentInLineOrder(section.comments, nextEntry),
+    comments: insertCommentInLineOrder(section.comments, entry),
   };
   return nextSections;
 }