From 506d53ca8c4160aa70ab6da5c77a7497b78cc3bf Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Thu, 9 Apr 2026 09:41:34 -0400
Subject: [PATCH 1/3] Refactor dashboard detail components

---
 .../components/details/detail-activity.tsx    |   45 +
 .../src/components/details/detail-page.tsx    |  107 +
 .../src/components/details/detail-sidebar.tsx |   83 +
 .../issues/detail/issue-detail-activity.tsx   |   88 +
 .../issues/detail/issue-detail-header.tsx     |   98 +
 .../issues/detail/issue-detail-page.tsx       |  129 ++
 .../issues/detail/issue-detail-sidebar.tsx    |  136 ++
 .../src/components/issues/issue-row.tsx       |    2 +-
 .../{ => issues}/labels-section.tsx           |    0
 .../components/layouts/dashboard-layout.tsx   |    2 +-
 .../{ => navigation}/command-palette.tsx      |    2 +-
 .../pulls/detail/pull-body-section.tsx        |  447 ++++
 .../pulls/detail/pull-detail-activity.tsx     |  448 ++++
 .../pulls/detail/pull-detail-header.tsx       |  247 +++
 .../pulls/detail/pull-detail-page.tsx         |  188 ++
 .../pulls/detail/pull-detail-sidebar.tsx      |  545 +++++
 .../src/components/pulls/pull-request-row.tsx |   16 +-
 .../pulls/review/review-file-diff-block.tsx   |  378 ++++
 .../pulls/review/review-file-tree.tsx         |   97 +
 .../components/pulls/review/review-page.tsx   |  413 ++++
 .../pulls/review/review-submit-popover.tsx    |  161 ++
 .../components/pulls/review/review-types.ts   |   25 +
 .../components/pulls/review/review-utils.ts   |   78 +
 .../dashboard/src/lib/format-relative-time.ts |   14 +
 .../$owner/$repo/issues.$issueId.tsx          |  491 +----
 .../_protected/$owner/$repo/pull.$pullId.tsx  | 1843 +----------------
 .../$owner/$repo/review.$pullId.tsx           | 1232 +----------
 27 files changed, 3739 insertions(+), 3576 deletions(-)
 create mode 100644 apps/dashboard/src/components/details/detail-activity.tsx
 create mode 100644 apps/dashboard/src/components/details/detail-page.tsx
 create mode 100644 apps/dashboard/src/components/details/detail-sidebar.tsx
 create mode 100644 apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx
 create mode 100644 apps/dashboard/src/components/issues/detail/issue-detail-header.tsx
 create mode 100644 apps/dashboard/src/components/issues/detail/issue-detail-page.tsx
 create mode 100644 apps/dashboard/src/components/issues/detail/issue-detail-sidebar.tsx
 rename apps/dashboard/src/components/{ => issues}/labels-section.tsx (100%)
 rename apps/dashboard/src/components/{ => navigation}/command-palette.tsx (97%)
 create mode 100644 apps/dashboard/src/components/pulls/detail/pull-body-section.tsx
 create mode 100644 apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx
 create mode 100644 apps/dashboard/src/components/pulls/detail/pull-detail-header.tsx
 create mode 100644 apps/dashboard/src/components/pulls/detail/pull-detail-page.tsx
 create mode 100644 apps/dashboard/src/components/pulls/detail/pull-detail-sidebar.tsx
 create mode 100644 apps/dashboard/src/components/pulls/review/review-file-diff-block.tsx
 create mode 100644 apps/dashboard/src/components/pulls/review/review-file-tree.tsx
 create mode 100644 apps/dashboard/src/components/pulls/review/review-page.tsx
 create mode 100644 apps/dashboard/src/components/pulls/review/review-submit-popover.tsx
 create mode 100644 apps/dashboard/src/components/pulls/review/review-types.ts
 create mode 100644 apps/dashboard/src/components/pulls/review/review-utils.ts
 create mode 100644 apps/dashboard/src/lib/format-relative-time.ts

diff --git a/apps/dashboard/src/components/details/detail-activity.tsx b/apps/dashboard/src/components/details/detail-activity.tsx
new file mode 100644
index 0000000..7980900
--- /dev/null
+++ b/apps/dashboard/src/components/details/detail-activity.tsx
@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+export function DetailActivityHeader({
+	title,
+	count,
+}: {
+	title: string;
+	count?: number;
+}) {
+	return (
+		<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
+			<h2 className="text-xs font-medium">{title}</h2>
+			{count != null && (
+				<span className="text-xs tabular-nums text-muted-foreground">
+					{count}
+				</span>
+			)}
+		</div>
+	);
+}
+
+export function DetailCommentBox() {
+	const [value, setValue] = useState("");
+
+	return (
+		<div className="flex flex-col gap-2 rounded-lg border bg-surface-0 p-3">
+			<textarea
+				value={value}
+				onChange={(event) => setValue(event.target.value)}
+				placeholder="Leave a comment..."
+				rows={3}
+				className="w-full resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+			/>
+			<div className="flex justify-end">
+				<button
+					type="button"
+					disabled={!value.trim()}
+					className="rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity disabled:opacity-40"
+				>
+					Send
+				</button>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/details/detail-page.tsx b/apps/dashboard/src/components/details/detail-page.tsx
new file mode 100644
index 0000000..d1792a9
--- /dev/null
+++ b/apps/dashboard/src/components/details/detail-page.tsx
@@ -0,0 +1,107 @@
+import { Skeleton } from "@diffkit/ui/components/skeleton";
+import { cn } from "@diffkit/ui/lib/utils";
+import { Link } from "@tanstack/react-router";
+
+type DetailHeaderIcon = React.ComponentType<{
+	size?: number;
+	strokeWidth?: number;
+	className?: string;
+}>;
+
+export function DetailPageLayout({
+	main,
+	sidebar,
+}: {
+	main: React.ReactNode;
+	sidebar: React.ReactNode;
+}) {
+	return (
+		<div className="h-full overflow-auto">
+			<div className="mx-auto grid max-w-7xl gap-16 px-6 py-10 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
+				<div className="flex min-w-0 flex-col gap-8">{main}</div>
+				{sidebar}
+			</div>
+		</div>
+	);
+}
+
+export function DetailPageTitle({
+	collectionHref,
+	collectionLabel,
+	owner,
+	repo,
+	number,
+	icon: Icon,
+	iconClassName,
+	title,
+	subtitle,
+}: {
+	collectionHref: string;
+	collectionLabel: string;
+	owner: string;
+	repo: string;
+	number: number;
+	icon: DetailHeaderIcon;
+	iconClassName?: string;
+	title: string;
+	subtitle: React.ReactNode;
+}) {
+	return (
+		<div className="flex flex-col gap-3">
+			<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+				<Link
+					to={collectionHref}
+					className="transition-colors hover:text-foreground"
+				>
+					{collectionLabel}
+				</Link>
+				<span>/</span>
+				<span>
+					{owner}/{repo}
+				</span>
+				<span>/</span>
+				<span>#{number}</span>
+			</div>
+
+			<div className="flex items-start gap-3">
+				<div className={cn("mt-1 shrink-0", iconClassName)}>
+					<Icon size={20} strokeWidth={2} />
+				</div>
+				<div className="flex min-w-0 flex-col gap-2">
+					<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+					{subtitle}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function DetailPageSkeletonLayout({
+	main,
+	sidebarSectionCount = 4,
+}: {
+	main: React.ReactNode;
+	sidebarSectionCount?: number;
+}) {
+	return (
+		<div className="h-full overflow-auto">
+			<div className="mx-auto grid max-w-7xl gap-16 px-6 py-10 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
+				<div className="flex min-w-0 flex-col gap-8">{main}</div>
+				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
+					{Array.from(
+						{ length: sidebarSectionCount },
+						(_, index) => `sidebar-skeleton-${index}`,
+					).map((key) => (
+						<div key={key} className="flex flex-col gap-2.5">
+							<Skeleton className="h-4 w-24 rounded-md" />
+							<div className="flex flex-col gap-2">
+								<Skeleton className="h-4 w-full rounded-md" />
+								<Skeleton className="h-4 w-[85%] rounded-md" />
+							</div>
+						</div>
+					))}
+				</aside>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/details/detail-sidebar.tsx b/apps/dashboard/src/components/details/detail-sidebar.tsx
new file mode 100644
index 0000000..f56e19f
--- /dev/null
+++ b/apps/dashboard/src/components/details/detail-sidebar.tsx
@@ -0,0 +1,83 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@diffkit/ui/components/tooltip";
+
+type DetailRowIcon = React.ComponentType<{
+	size?: number;
+	strokeWidth?: number;
+	className?: string;
+}>;
+
+export function DetailSidebar({ children }: { children: React.ReactNode }) {
+	return (
+		<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
+			{children}
+		</aside>
+	);
+}
+
+export function DetailSidebarSection({
+	title,
+	children,
+}: {
+	title: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="flex flex-col gap-2.5">
+			<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+				{title}
+			</h3>
+			{children}
+		</div>
+	);
+}
+
+export function DetailSidebarRow({
+	icon: Icon,
+	label,
+	children,
+}: {
+	icon?: DetailRowIcon;
+	label: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="flex items-center justify-between gap-4">
+			<span className="flex items-center gap-1.5 text-muted-foreground">
+				{Icon ? <Icon size={13} strokeWidth={2} /> : null}
+				{label}
+			</span>
+			<span className="text-foreground">{children}</span>
+		</div>
+	);
+}
+
+export function DetailParticipantAvatars({
+	actors,
+}: {
+	actors: Array<{
+		login: string;
+		avatarUrl: string;
+	}>;
+}) {
+	return (
+		<div className="group/participants flex items-center">
+			{actors.map((actor, index) => (
+				<Tooltip key={actor.login}>
+					<TooltipTrigger asChild>
+						<img
+							src={actor.avatarUrl}
+							alt={actor.login}
+							className="size-6 rounded-full border-2 border-card transition-[margin] duration-200 group-hover/participants:ml-0"
+							style={index > 0 ? { marginLeft: -6 } : undefined}
+						/>
+					</TooltipTrigger>
+					<TooltipContent>{actor.login}</TooltipContent>
+				</Tooltip>
+			))}
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx b/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx
new file mode 100644
index 0000000..a9c283d
--- /dev/null
+++ b/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx
@@ -0,0 +1,88 @@
+import { Markdown } from "@diffkit/ui/components/markdown";
+import { cn } from "@diffkit/ui/lib/utils";
+import {
+	DetailActivityHeader,
+	DetailCommentBox,
+} from "#/components/details/detail-activity";
+import { formatRelativeTime } from "#/lib/format-relative-time";
+import type { IssueComment } from "#/lib/github.types";
+
+export function IssueDetailActivitySection({
+	comments,
+	isFetching,
+}: {
+	comments?: IssueComment[];
+	isFetching: boolean;
+}) {
+	return (
+		<div className="flex flex-col">
+			<DetailActivityHeader title="Activity" count={comments?.length} />
+
+			{isFetching && !comments && (
+				<div className="flex items-center justify-center py-8">
+					<svg
+						className="size-4 animate-spin text-muted-foreground"
+						viewBox="0 0 16 16"
+						fill="none"
+						aria-hidden="true"
+					>
+						<circle
+							cx="8"
+							cy="8"
+							r="6.5"
+							stroke="currentColor"
+							strokeWidth="2"
+							opacity="0.25"
+						/>
+						<path
+							d="M14.5 8a6.5 6.5 0 0 0-6.5-6.5"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+						/>
+					</svg>
+				</div>
+			)}
+
+			{comments && comments.length === 0 && (
+				<p className="py-4 text-sm text-muted-foreground">No comments yet.</p>
+			)}
+
+			{comments && comments.length > 0 && (
+				<div className="relative flex flex-col pl-8 before:absolute before:left-4 before:top-0 before:h-full before:w-px before:bg-[linear-gradient(to_bottom,var(--color-border)_80%,transparent)]">
+					{comments.map((comment, index) => (
+						<div
+							key={comment.id}
+							className={cn("flex flex-col gap-1 py-4", index === 0 && "pt-5")}
+						>
+							<div className="flex items-center gap-1.5">
+								{comment.author ? (
+									<img
+										src={comment.author.avatarUrl}
+										alt={comment.author.login}
+										className="size-4 rounded-full border border-border"
+									/>
+								) : (
+									<div className="size-4 rounded-full bg-surface-2" />
+								)}
+								<span className="text-xs font-medium">
+									{comment.author?.login ?? "Unknown"}
+								</span>
+								<span className="text-xs text-muted-foreground">
+									{formatRelativeTime(comment.createdAt)}
+								</span>
+							</div>
+							<Markdown className="text-muted-foreground">
+								{comment.body}
+							</Markdown>
+						</div>
+					))}
+				</div>
+			)}
+
+			<div className="mt-6">
+				<DetailCommentBox />
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/issues/detail/issue-detail-header.tsx b/apps/dashboard/src/components/issues/detail/issue-detail-header.tsx
new file mode 100644
index 0000000..ff56f3d
--- /dev/null
+++ b/apps/dashboard/src/components/issues/detail/issue-detail-header.tsx
@@ -0,0 +1,98 @@
+import { IssuesIcon } from "@diffkit/icons";
+import { Markdown } from "@diffkit/ui/components/markdown";
+import { cn } from "@diffkit/ui/lib/utils";
+import { DetailPageTitle } from "#/components/details/detail-page";
+import { formatRelativeTime } from "#/lib/format-relative-time";
+import type { IssueDetail } from "#/lib/github.types";
+
+type IssueStateConfig = {
+	color: string;
+	label: string;
+	badgeClass: string;
+};
+
+export function getIssueStateConfig(issue: IssueDetail): IssueStateConfig {
+	if (issue.state === "closed") {
+		if (issue.stateReason === "not_planned") {
+			return {
+				color: "text-muted-foreground",
+				label: "Closed",
+				badgeClass: "bg-muted text-muted-foreground",
+			};
+		}
+		return {
+			color: "text-purple-500",
+			label: "Closed",
+			badgeClass: "bg-purple-500/10 text-purple-500",
+		};
+	}
+	return {
+		color: "text-green-500",
+		label: "Open",
+		badgeClass: "bg-green-500/10 text-green-500",
+	};
+}
+
+export function IssueDetailHeader({
+	owner,
+	repo,
+	issue,
+}: {
+	owner: string;
+	repo: string;
+	issue: IssueDetail;
+}) {
+	const stateConfig = getIssueStateConfig(issue);
+
+	return (
+		<>
+			<DetailPageTitle
+				collectionHref="/issues"
+				collectionLabel="Issues"
+				owner={owner}
+				repo={repo}
+				number={issue.number}
+				icon={IssuesIcon}
+				iconClassName={stateConfig.color}
+				title={issue.title}
+				subtitle={
+					<div className="flex flex-wrap items-center gap-2">
+						<span
+							className={cn(
+								"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+								stateConfig.badgeClass,
+							)}
+						>
+							{stateConfig.label}
+						</span>
+						{issue.author && (
+							<span className="flex items-center gap-1.5 text-sm text-muted-foreground">
+								<img
+									src={issue.author.avatarUrl}
+									alt={issue.author.login}
+									className="size-4 rounded-full border border-border"
+								/>
+								<span className="font-medium text-foreground">
+									{issue.author.login}
+								</span>
+								<span>opened {formatRelativeTime(issue.createdAt)}</span>
+							</span>
+						)}
+					</div>
+				}
+			/>
+
+			{issue.body ? (
+				<div className="rounded-lg border bg-surface-0 p-5">
+					<Markdown>{issue.body}</Markdown>
+				</div>
+			) : (
+				<div className="rounded-lg border bg-surface-0 p-5">
+					<p className="text-sm italic text-muted-foreground">
+						No description provided.
+					</p>
+				</div>
+			)}
+		</>
+	);
+}
diff --git a/apps/dashboard/src/components/issues/detail/issue-detail-page.tsx b/apps/dashboard/src/components/issues/detail/issue-detail-page.tsx
new file mode 100644
index 0000000..43684ed
--- /dev/null
+++ b/apps/dashboard/src/components/issues/detail/issue-detail-page.tsx
@@ -0,0 +1,129 @@
+import { Skeleton } from "@diffkit/ui/components/skeleton";
+import { useQuery } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import {
+	DetailPageLayout,
+	DetailPageSkeletonLayout,
+} from "#/components/details/detail-page";
+import { githubIssuePageQueryOptions } from "#/lib/github.query";
+import { useHasMounted } from "#/lib/use-has-mounted";
+import { useRegisterTab } from "#/lib/use-register-tab";
+import { IssueDetailActivitySection } from "./issue-detail-activity";
+import { getIssueStateConfig, IssueDetailHeader } from "./issue-detail-header";
+import { IssueDetailSidebar } from "./issue-detail-sidebar";
+
+const routeApi = getRouteApi("/_protected/$owner/$repo/issues/$issueId");
+
+export function IssueDetailPage() {
+	const { user } = routeApi.useRouteContext();
+	const { owner, repo, issueId } = routeApi.useParams();
+	const issueNumber = Number(issueId);
+	const scope = { userId: user.id };
+	const hasMounted = useHasMounted();
+
+	const pageQuery = useQuery({
+		...githubIssuePageQueryOptions(scope, { owner, repo, issueNumber }),
+		enabled: hasMounted,
+	});
+
+	const issue = pageQuery.data?.detail;
+	const comments = pageQuery.data?.comments;
+
+	useRegisterTab(
+		issue
+			? {
+					type: "issue",
+					title: issue.title,
+					number: issue.number,
+					url: `/${owner}/${repo}/issues/${issueId}`,
+					repo: `${owner}/${repo}`,
+					iconColor: getIssueStateConfig(issue).color,
+				}
+			: null,
+	);
+
+	if (pageQuery.error) throw pageQuery.error;
+	if (!issue) return <IssueDetailPageSkeleton />;
+
+	return (
+		<DetailPageLayout
+			main={
+				<>
+					<IssueDetailHeader owner={owner} repo={repo} issue={issue} />
+					<IssueDetailActivitySection
+						comments={comments}
+						isFetching={pageQuery.isFetching}
+					/>
+				</>
+			}
+			sidebar={
+				<IssueDetailSidebar
+					issue={issue}
+					owner={owner}
+					repo={repo}
+					issueNumber={issueNumber}
+					scope={scope}
+					comments={comments ?? []}
+				/>
+			}
+		/>
+	);
+}
+
+function IssueDetailPageSkeleton() {
+	return (
+		<DetailPageSkeletonLayout
+			main={
+				<>
+					<div className="flex flex-col gap-3">
+						<Skeleton className="h-4 w-48 rounded-md" />
+						<div className="flex items-start gap-3">
+							<Skeleton className="mt-1 size-5 rounded-full" />
+							<div className="flex min-w-0 flex-1 flex-col gap-2">
+								<Skeleton className="h-8 w-3/4 rounded-md" />
+								<div className="flex gap-2">
+									<Skeleton className="h-6 w-16 rounded-full" />
+									<Skeleton className="h-6 w-48 rounded-full" />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="flex flex-wrap gap-1.5">
+						<Skeleton className="h-6 w-20 rounded-full" />
+						<Skeleton className="h-6 w-24 rounded-full" />
+					</div>
+
+					<div className="rounded-lg border bg-surface-0 p-5">
+						<div className="flex flex-col gap-2">
+							<Skeleton className="h-4 w-full rounded-md" />
+							<Skeleton className="h-4 w-[92%] rounded-md" />
+							<Skeleton className="h-4 w-[78%] rounded-md" />
+							<Skeleton className="h-4 w-[66%] rounded-md" />
+						</div>
+					</div>
+
+					<div className="flex flex-col">
+						<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
+							<Skeleton className="h-4 w-14 rounded-md" />
+							<Skeleton className="h-4 w-6 rounded-md" />
+						</div>
+						<div className="relative flex flex-col gap-5 py-5 pl-8 before:absolute before:left-4 before:top-0 before:h-full before:w-px before:bg-[linear-gradient(to_bottom,var(--color-border)_80%,transparent)]">
+							{["activity-1", "activity-2", "activity-3"].map((key) => (
+								<div key={key} className="flex flex-col gap-2">
+									<div className="flex items-center gap-2">
+										<Skeleton className="size-4 rounded-full" />
+										<Skeleton className="h-4 w-24 rounded-md" />
+										<Skeleton className="h-4 w-16 rounded-md" />
+									</div>
+									<Skeleton className="h-4 w-[88%] rounded-md" />
+									<Skeleton className="h-4 w-[72%] rounded-md" />
+								</div>
+							))}
+						</div>
+					</div>
+				</>
+			}
+		/>
+	);
+}
diff --git a/apps/dashboard/src/components/issues/detail/issue-detail-sidebar.tsx b/apps/dashboard/src/components/issues/detail/issue-detail-sidebar.tsx
new file mode 100644
index 0000000..0799e53
--- /dev/null
+++ b/apps/dashboard/src/components/issues/detail/issue-detail-sidebar.tsx
@@ -0,0 +1,136 @@
+import {
+	DetailParticipantAvatars,
+	DetailSidebar,
+	DetailSidebarRow,
+	DetailSidebarSection,
+} from "#/components/details/detail-sidebar";
+import { LabelsSection } from "#/components/issues/labels-section";
+import { formatRelativeTime } from "#/lib/format-relative-time";
+import { type GitHubQueryScope, githubQueryKeys } from "#/lib/github.query";
+import type {
+	GitHubActor,
+	IssueComment,
+	IssueDetail,
+} from "#/lib/github.types";
+
+export function IssueDetailSidebar({
+	issue,
+	owner,
+	repo,
+	issueNumber,
+	scope,
+	comments,
+}: {
+	issue: IssueDetail;
+	owner: string;
+	repo: string;
+	issueNumber: number;
+	scope: GitHubQueryScope;
+	comments: IssueComment[];
+}) {
+	return (
+		<DetailSidebar>
+			<DetailSidebarSection title="Assignees">
+				{issue.assignees.length > 0 ? (
+					<div className="flex flex-col gap-2">
+						{issue.assignees.map((assignee) => (
+							<div key={assignee.login} className="flex items-center gap-2">
+								<img
+									src={assignee.avatarUrl}
+									alt={assignee.login}
+									className="size-5 rounded-full border border-border"
+								/>
+								<span className="text-sm">{assignee.login}</span>
+							</div>
+						))}
+					</div>
+				) : (
+					<p className="text-xs text-muted-foreground">No one assigned</p>
+				)}
+			</DetailSidebarSection>
+
+			<LabelsSection
+				currentLabels={issue.labels}
+				owner={owner}
+				repo={repo}
+				issueNumber={issueNumber}
+				scope={scope}
+				pageQueryKey={githubQueryKeys.issues.page(scope, {
+					owner,
+					repo,
+					issueNumber,
+				})}
+			/>
+
+			<DetailSidebarSection title="Participants">
+				<ParticipantsList issue={issue} comments={comments} />
+			</DetailSidebarSection>
+
+			{issue.milestone && (
+				<DetailSidebarSection title="Milestone">
+					<div className="flex flex-col gap-1 text-xs">
+						<span className="font-medium text-foreground">
+							{issue.milestone.title}
+						</span>
+						{issue.milestone.dueOn && (
+							<span className="text-muted-foreground">
+								Due {formatRelativeTime(issue.milestone.dueOn)}
+							</span>
+						)}
+					</div>
+				</DetailSidebarSection>
+			)}
+
+			<DetailSidebarSection title="Details">
+				<div className="flex flex-col gap-2 text-xs">
+					<DetailSidebarRow label="Created">
+						{formatRelativeTime(issue.createdAt)}
+					</DetailSidebarRow>
+					<DetailSidebarRow label="Updated">
+						{formatRelativeTime(issue.updatedAt)}
+					</DetailSidebarRow>
+					{issue.closedAt && (
+						<DetailSidebarRow label="Closed">
+							{formatRelativeTime(issue.closedAt)}
+						</DetailSidebarRow>
+					)}
+					<DetailSidebarRow label="Comments">
+						<span className="tabular-nums">{issue.comments}</span>
+					</DetailSidebarRow>
+				</div>
+			</DetailSidebarSection>
+		</DetailSidebar>
+	);
+}
+
+function ParticipantsList({
+	issue,
+	comments,
+}: {
+	issue: IssueDetail;
+	comments: IssueComment[];
+}) {
+	const seen = new Set<string>();
+	const participants: GitHubActor[] = [];
+
+	const addActor = (actor: GitHubActor | null) => {
+		if (actor && !seen.has(actor.login)) {
+			seen.add(actor.login);
+			participants.push(actor);
+		}
+	};
+
+	addActor(issue.author);
+	for (const assignee of issue.assignees) {
+		addActor(assignee);
+	}
+	for (const comment of comments) {
+		addActor(comment.author);
+	}
+
+	if (participants.length === 0) {
+		return <p className="text-xs text-muted-foreground">No participants yet</p>;
+	}
+
+	return <DetailParticipantAvatars actors={participants} />;
+}
diff --git a/apps/dashboard/src/components/issues/issue-row.tsx b/apps/dashboard/src/components/issues/issue-row.tsx
index 0a06301..f1becfd 100644
--- a/apps/dashboard/src/components/issues/issue-row.tsx
+++ b/apps/dashboard/src/components/issues/issue-row.tsx
@@ -1,7 +1,7 @@
 import { CommentIcon, IssuesIcon } from "@diffkit/icons";
 import { cn } from "@diffkit/ui/lib/utils";
 import { Link } from "@tanstack/react-router";
-import { formatRelativeTime } from "#/components/pulls/pull-request-row";
+import { formatRelativeTime } from "#/lib/format-relative-time";
 import type { IssueSummary } from "#/lib/github.types";
 
 function getIssueStateProps(issue: IssueSummary) {
diff --git a/apps/dashboard/src/components/labels-section.tsx b/apps/dashboard/src/components/issues/labels-section.tsx
similarity index 100%
rename from apps/dashboard/src/components/labels-section.tsx
rename to apps/dashboard/src/components/issues/labels-section.tsx
diff --git a/apps/dashboard/src/components/layouts/dashboard-layout.tsx b/apps/dashboard/src/components/layouts/dashboard-layout.tsx
index 4a4fd2b..13645ae 100644
--- a/apps/dashboard/src/components/layouts/dashboard-layout.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-layout.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { getRouteApi, Outlet } from "@tanstack/react-router";
-import { CommandPalette } from "#/components/command-palette";
+import { CommandPalette } from "#/components/navigation/command-palette";
 import {
 	githubMyIssuesQueryOptions,
 	githubMyPullsQueryOptions,
diff --git a/apps/dashboard/src/components/command-palette.tsx b/apps/dashboard/src/components/navigation/command-palette.tsx
similarity index 97%
rename from apps/dashboard/src/components/command-palette.tsx
rename to apps/dashboard/src/components/navigation/command-palette.tsx
index a379828..ffcdbb4 100644
--- a/apps/dashboard/src/components/command-palette.tsx
+++ b/apps/dashboard/src/components/navigation/command-palette.tsx
@@ -10,10 +10,10 @@ import {
 } from "@diffkit/ui/components/command";
 import { cn } from "@diffkit/ui/lib/utils";
 import { useRouter } from "@tanstack/react-router";
-import { formatRelativeTime } from "#/components/pulls/pull-request-row";
 import type { CommandItem, CommandItemMeta } from "#/lib/command-palette/types";
 import { useCommandItems } from "#/lib/command-palette/use-command-items";
 import { useCommandPalette } from "#/lib/command-palette/use-command-palette";
+import { formatRelativeTime } from "#/lib/format-relative-time";
 
 export function CommandPalette() {
 	const { open, setOpen, close } = useCommandPalette();
diff --git a/apps/dashboard/src/components/pulls/detail/pull-body-section.tsx b/apps/dashboard/src/components/pulls/detail/pull-body-section.tsx
new file mode 100644
index 0000000..2fa9636
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/detail/pull-body-section.tsx
@@ -0,0 +1,447 @@
+import {
+	CheckIcon,
+	CopyIcon,
+	EditIcon,
+	MoreHorizontalIcon,
+} from "@diffkit/icons";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@diffkit/ui/components/dropdown-menu";
+import { highlightCode, Markdown } from "@diffkit/ui/components/markdown";
+import { Spinner } from "@diffkit/ui/components/spinner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@diffkit/ui/components/tooltip";
+import { cn } from "@diffkit/ui/lib/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { updatePullBody } from "#/lib/github.functions";
+import { type GitHubQueryScope, githubQueryKeys } from "#/lib/github.query";
+import type { PullDetail, PullPageData } from "#/lib/github.types";
+import { useOptimisticMutation } from "#/lib/use-optimistic-mutation";
+
+export function PullBodySection({
+	pr,
+	owner,
+	repo,
+	pullNumber,
+	isAuthor,
+	scope,
+}: {
+	pr: PullDetail;
+	owner: string;
+	repo: string;
+	pullNumber: number;
+	isAuthor: boolean;
+	scope: GitHubQueryScope;
+}) {
+	const { mutate } = useOptimisticMutation();
+	const [isEditing, setIsEditing] = useState(false);
+	const [editTab, setEditTab] = useState<"edit" | "preview">("edit");
+	const [draft, setDraft] = useState(pr.body);
+	const [isSaving, setIsSaving] = useState(false);
+	const editorRef = useRef<HTMLTextAreaElement>(null);
+
+	const insertMarkdown = useCallback(
+		(before: string, after = "", placeholder = "") => {
+			const textarea = editorRef.current;
+			if (!textarea) return;
+			const start = textarea.selectionStart;
+			const end = textarea.selectionEnd;
+			const selected = draft.slice(start, end);
+			const text = selected || placeholder;
+			const newValue = `${draft.slice(0, start)}${before}${text}${after}${draft.slice(end)}`;
+			setDraft(newValue);
+			requestAnimationFrame(() => {
+				textarea.focus();
+				const cursorStart = start + before.length;
+				textarea.setSelectionRange(cursorStart, cursorStart + text.length);
+			});
+		},
+		[draft],
+	);
+
+	const handleEditorKeyDown = useCallback(
+		(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+			const mod = event.metaKey || event.ctrlKey;
+			if (!mod) return;
+
+			const shortcuts: Record<string, () => void> = {
+				b: () => insertMarkdown("**", "**", "bold"),
+				i: () => insertMarkdown("_", "_", "italic"),
+				e: () => insertMarkdown("`", "`", "code"),
+				k: () => insertMarkdown("[", "](url)", "text"),
+				h: () => insertMarkdown("### ", "", "heading"),
+			};
+
+			if (event.shiftKey) {
+				const shiftShortcuts: Record<string, () => void> = {
+					".": () => insertMarkdown("> ", "", "quote"),
+					"8": () => insertMarkdown("- ", "", "item"),
+					"7": () => insertMarkdown("1. ", "", "item"),
+				};
+				const action = shiftShortcuts[event.key];
+				if (action) {
+					event.preventDefault();
+					action();
+				}
+				return;
+			}
+
+			const action = shortcuts[event.key];
+			if (action) {
+				event.preventDefault();
+				action();
+			}
+		},
+		[insertMarkdown],
+	);
+
+	const pageQueryKey = githubQueryKeys.pulls.page(scope, {
+		owner,
+		repo,
+		pullNumber,
+	});
+
+	const startEditing = () => {
+		setDraft(pr.body);
+		setEditTab("edit");
+		setIsEditing(true);
+	};
+
+	const saveBody = async () => {
+		setIsSaving(true);
+		try {
+			await mutate({
+				mutationFn: () =>
+					updatePullBody({
+						data: { owner, repo, pullNumber, body: draft },
+					}),
+				updates: [
+					{
+						queryKey: pageQueryKey,
+						updater: (prev: PullPageData) => ({
+							...prev,
+							detail: prev.detail
+								? { ...prev.detail, body: draft }
+								: prev.detail,
+						}),
+					},
+				],
+			});
+			setIsEditing(false);
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	if (isEditing) {
+		return (
+			<div className="flex flex-col gap-2">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-0.5">
+						<button
+							type="button"
+							onClick={() => setEditTab("edit")}
+							className={cn(
+								"rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+								editTab === "edit"
+									? "bg-surface-1 text-foreground"
+									: "text-muted-foreground hover:bg-surface-1 hover:text-foreground",
+							)}
+						>
+							Edit
+						</button>
+						<button
+							type="button"
+							onClick={() => setEditTab("preview")}
+							className={cn(
+								"rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+								editTab === "preview"
+									? "bg-surface-1 text-foreground"
+									: "text-muted-foreground hover:bg-surface-1 hover:text-foreground",
+							)}
+						>
+							Preview
+						</button>
+					</div>
+					{editTab === "edit" && (
+						<TooltipProvider delayDuration={300}>
+							<div className="flex items-center gap-0.5 text-muted-foreground">
+								<MdToolbarButton
+									label="Heading"
+									shortcut="⌘H"
+									onClick={() => insertMarkdown("### ", "", "heading")}
+								>
+									<path d="M4 12h8M4 4v16M12 4v16M20 8v8" />
+								</MdToolbarButton>
+								<MdToolbarButton
+									label="Bold"
+									shortcut="⌘B"
+									onClick={() => insertMarkdown("**", "**", "bold")}
+								>
+									<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6zM6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+								</MdToolbarButton>
+								<MdToolbarButton
+									label="Italic"
+									shortcut="⌘I"
+									onClick={() => insertMarkdown("_", "_", "italic")}
+								>
+									<path d="M10 4h4M8 20h4M15 4l-6 16" />
+								</MdToolbarButton>
+								<span className="mx-1 h-4 w-px bg-border" />
+								<MdToolbarButton
+									label="Code"
+									shortcut="⌘E"
+									onClick={() => insertMarkdown("`", "`", "code")}
+								>
+									<path d="M16 18l6-6-6-6M8 6l-6 6 6 6" />
+								</MdToolbarButton>
+								<MdToolbarButton
+									label="Link"
+									shortcut="⌘K"
+									onClick={() => insertMarkdown("[", "](url)", "text")}
+								>
+									<path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" />
+									<path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5" />
+								</MdToolbarButton>
+								<MdToolbarButton
+									label="Quote"
+									shortcut="⌘⇧."
+									onClick={() => insertMarkdown("> ", "", "quote")}
+								>
+									<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z" />
+									<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
+								</MdToolbarButton>
+								<span className="mx-1 h-4 w-px bg-border" />
+								<MdToolbarButton
+									label="Unordered list"
+									shortcut="⌘⇧8"
+									onClick={() => insertMarkdown("- ", "", "item")}
+								>
+									<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+								</MdToolbarButton>
+								<MdToolbarButton
+									label="Ordered list"
+									shortcut="⌘⇧7"
+									onClick={() => insertMarkdown("1. ", "", "item")}
+								>
+									<path d="M10 6h11M10 12h11M10 18h11M4 6h1v4M3 10h3M4 14.5a.5.5 0 0 1 .5-.5H5a.5.5 0 0 1 .5.5v0a1.5 1.5 0 0 1-1.5 1.5H3.5a.5.5 0 0 0-.5.5v0a.5.5 0 0 0 .5.5H5a.5.5 0 0 1 .5.5v0a1.5 1.5 0 0 1-1.5 1.5H3" />
+								</MdToolbarButton>
+								<MdToolbarButton
+									label="Task list"
+									onClick={() => insertMarkdown("- [ ] ", "", "task")}
+								>
+									<path d="M9 11l3 3L22 4" />
+									<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+								</MdToolbarButton>
+							</div>
+						</TooltipProvider>
+					)}
+				</div>
+				<div className="rounded-lg border bg-surface-0">
+					{editTab === "edit" ? (
+						<HighlightedMarkdownEditor
+							value={draft}
+							onChange={setDraft}
+							placeholder="Write a description..."
+							textareaRef={editorRef}
+							onKeyDown={handleEditorKeyDown}
+						/>
+					) : (
+						<div className="min-h-[200px] p-5">
+							{draft ? (
+								<Markdown>{draft}</Markdown>
+							) : (
+								<p className="text-sm italic text-muted-foreground">
+									Nothing to preview
+								</p>
+							)}
+						</div>
+					)}
+				</div>
+				<div className="flex items-center justify-end gap-2 pt-2">
+					<button
+						type="button"
+						onClick={() => setIsEditing(false)}
+						disabled={isSaving}
+						className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onClick={saveBody}
+						disabled={isSaving}
+						className="flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50"
+					>
+						{isSaving ? (
+							<Spinner size={13} />
+						) : (
+							<CheckIcon size={13} strokeWidth={2.5} />
+						)}
+						{isSaving ? "Saving..." : "Save"}
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="relative rounded-lg border bg-surface-0 p-5">
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<button
+						type="button"
+						className="absolute right-3 top-3 flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground"
+					>
+						<MoreHorizontalIcon size={15} strokeWidth={2} />
+					</button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end" className="w-44">
+					{pr.body && (
+						<DropdownMenuItem
+							onSelect={() => {
+								void navigator.clipboard.writeText(pr.body);
+							}}
+						>
+							<CopyIcon size={14} strokeWidth={2} />
+							Copy as Markdown
+						</DropdownMenuItem>
+					)}
+					{isAuthor && (
+						<DropdownMenuItem onSelect={startEditing}>
+							<EditIcon size={14} strokeWidth={2} />
+							Edit
+						</DropdownMenuItem>
+					)}
+				</DropdownMenuContent>
+			</DropdownMenu>
+			{pr.body ? (
+				<Markdown>{pr.body}</Markdown>
+			) : (
+				<p className="text-sm italic text-muted-foreground">
+					No description provided.
+				</p>
+			)}
+		</div>
+	);
+}
+
+function MdToolbarButton({
+	label,
+	shortcut,
+	onClick,
+	children,
+}: {
+	label: string;
+	shortcut?: string;
+	onClick: () => void;
+	children: React.ReactNode;
+}) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					onClick={onClick}
+					className="flex size-7 items-center justify-center rounded-md transition-colors hover:bg-surface-1 hover:text-foreground"
+				>
+					<svg
+						aria-hidden="true"
+						fill="none"
+						height={15}
+						stroke="currentColor"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth={2}
+						viewBox="0 0 24 24"
+						width={15}
+					>
+						{children}
+					</svg>
+				</button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<span className="flex items-center gap-1.5">
+					{label}
+					{shortcut && (
+						<kbd className="rounded bg-foreground/10 px-1 font-mono text-[10px]">
+							{shortcut}
+						</kbd>
+					)}
+				</span>
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
+function HighlightedMarkdownEditor({
+	value,
+	onChange,
+	placeholder,
+	textareaRef: externalRef,
+	onKeyDown,
+}: {
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	textareaRef?: React.RefObject<HTMLTextAreaElement | null>;
+	onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+}) {
+	const [highlightedHtml, setHighlightedHtml] = useState("");
+	const internalRef = useRef<HTMLTextAreaElement>(null);
+	const textareaRef = externalRef || internalRef;
+	const highlightRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		let cancelled = false;
+		if (!value) {
+			setHighlightedHtml("");
+			return;
+		}
+		highlightCode(value, "markdown").then((html) => {
+			if (!cancelled) {
+				setHighlightedHtml(html);
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [value]);
+
+	const syncScroll = () => {
+		if (highlightRef.current && textareaRef.current) {
+			highlightRef.current.scrollTop = textareaRef.current.scrollTop;
+			highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
+		}
+	};
+
+	return (
+		<div className="relative" style={{ height: 640, maxHeight: 1200 }}>
+			<div
+				ref={highlightRef}
+				aria-hidden
+				className="pointer-events-none absolute inset-0 overflow-auto whitespace-pre-wrap break-words p-5 [scrollbar-width:none] [word-break:break-all] [&::-webkit-scrollbar]:hidden [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!whitespace-pre-wrap [&_pre]:!break-words [&_pre]:font-mono [&_pre]:text-sm [&_pre]:!leading-[1.625] [&_code]:!font-mono [&_code]:!text-sm [&_code]:!leading-[1.625]"
+				// biome-ignore lint/security/noDangerouslySetInnerHtml: HTML from shiki highlighter is trusted
+				dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+			/>
+			<textarea
+				ref={textareaRef}
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+				onKeyDown={onKeyDown}
+				onScroll={syncScroll}
+				className="relative w-full resize-y whitespace-pre-wrap break-words bg-transparent p-5 font-mono text-sm leading-[1.625] text-transparent caret-foreground outline-none [word-break:break-all] placeholder:text-muted-foreground"
+				style={{ height: 640, maxHeight: 1200 }}
+				placeholder={placeholder}
+				spellCheck={false}
+			/>
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx b/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx
new file mode 100644
index 0000000..3dbee5b
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx
@@ -0,0 +1,448 @@
+import { GitCommitIcon } from "@diffkit/icons";
+import { Markdown } from "@diffkit/ui/components/markdown";
+import { Skeleton } from "@diffkit/ui/components/skeleton";
+import { cn } from "@diffkit/ui/lib/utils";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import {
+	DetailActivityHeader,
+	DetailCommentBox,
+} from "#/components/details/detail-activity";
+import { formatRelativeTime } from "#/lib/format-relative-time";
+import { updatePullBranch } from "#/lib/github.functions";
+import type {
+	PullComment,
+	PullCommit,
+	PullDetail,
+	PullStatus,
+} from "#/lib/github.types";
+
+export function PullDetailActivitySection({
+	comments,
+	commits,
+	isFetching,
+	status,
+	pr,
+	owner,
+	repo,
+	pullNumber,
+}: {
+	comments?: PullComment[];
+	commits?: PullCommit[];
+	isFetching: boolean;
+	status: PullStatus | null;
+	pr: PullDetail;
+	owner: string;
+	repo: string;
+	pullNumber: number;
+}) {
+	return (
+		<div className="flex flex-col">
+			<DetailActivityHeader
+				title="Activity"
+				count={
+					comments && commits ? comments.length + commits.length : undefined
+				}
+			/>
+
+			{isFetching && !comments && (
+				<div className="flex items-center justify-center py-8">
+					<svg
+						className="size-4 animate-spin text-muted-foreground"
+						viewBox="0 0 16 16"
+						fill="none"
+						aria-hidden="true"
+					>
+						<circle
+							cx="8"
+							cy="8"
+							r="6.5"
+							stroke="currentColor"
+							strokeWidth="2"
+							opacity="0.25"
+						/>
+						<path
+							d="M14.5 8a6.5 6.5 0 0 0-6.5-6.5"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+						/>
+					</svg>
+				</div>
+			)}
+
+			{comments && commits && comments.length === 0 && commits.length === 0 && (
+				<p className="py-4 text-sm text-muted-foreground">No activity yet.</p>
+			)}
+
+			<ActivityTimeline comments={comments ?? []} commits={commits ?? []} />
+
+			{!pr.isMerged && pr.state !== "closed" && (
+				<div className="mt-6">
+					{status ? (
+						<MergeStatusCard
+							status={status}
+							owner={owner}
+							repo={repo}
+							pullNumber={pullNumber}
+						/>
+					) : (
+						<MergeStatusSkeleton />
+					)}
+				</div>
+			)}
+
+			<div className="mt-6">
+				<DetailCommentBox />
+			</div>
+		</div>
+	);
+}
+
+function MergeStatusCard({
+	status,
+	owner,
+	repo,
+	pullNumber,
+}: {
+	status: PullStatus;
+	owner: string;
+	repo: string;
+	pullNumber: number;
+}) {
+	const {
+		checks,
+		reviews,
+		mergeable,
+		mergeableState,
+		behindBy,
+		baseRefName,
+		canUpdateBranch,
+	} = status;
+	const [isUpdating, setIsUpdating] = useState(false);
+
+	const approvedReviews = reviews.filter(
+		(review) => review.state === "APPROVED",
+	);
+	const changesRequested = reviews.filter(
+		(review) => review.state === "CHANGES_REQUESTED",
+	);
+	const pendingReviewers = reviews.filter(
+		(review) => review.state === "PENDING",
+	);
+
+	const hasReviewIssue =
+		changesRequested.length > 0 || pendingReviewers.length > 0;
+	const allChecksPassed =
+		checks.total > 0 && checks.failed === 0 && checks.pending === 0;
+	const hasCheckFailures = checks.failed > 0;
+	const hasChecksPending = checks.pending > 0;
+	const isBehind = behindBy !== null && behindBy > 0;
+	const isMergeBlocked = mergeableState === "blocked" || mergeable === false;
+
+	return (
+		<div className="flex flex-col rounded-lg border">
+			<StatusRow
+				icon={
+					changesRequested.length > 0 ? (
+						<StatusDot color="text-red-500" />
+					) : approvedReviews.length > 0 && !hasReviewIssue ? (
+						<StatusDot color="text-green-500" />
+					) : (
+						<StatusDot color="text-yellow-500" />
+					)
+				}
+				title={
+					changesRequested.length > 0
+						? "Changes requested"
+						: approvedReviews.length > 0
+							? `${approvedReviews.length} approving review${approvedReviews.length > 1 ? "s" : ""}`
+							: "Review required"
+				}
+				description={
+					changesRequested.length > 0
+						? `${changesRequested.map((review) => review.author?.login).join(", ")} requested changes`
+						: approvedReviews.length > 0 && !hasReviewIssue
+							? "All required reviews have been provided"
+							: "Code owner review required by reviewers with write access."
+				}
+			/>
+
+			{checks.total > 0 && (
+				<StatusRow
+					icon={
+						allChecksPassed ? (
+							<StatusDot color="text-green-500" />
+						) : hasCheckFailures ? (
+							<StatusDot color="text-red-500" />
+						) : (
+							<StatusDot color="text-yellow-500" />
+						)
+					}
+					title={
+						allChecksPassed
+							? "All checks have passed"
+							: hasCheckFailures
+								? `${checks.failed} failing check${checks.failed > 1 ? "s" : ""}`
+								: `${checks.pending} pending check${checks.pending > 1 ? "s" : ""}`
+					}
+					description={
+						`${checks.skipped > 0 ? `${checks.skipped} skipped, ` : ""}${checks.passed} successful check${checks.passed !== 1 ? "s" : ""}` +
+						(hasChecksPending ? `, ${checks.pending} pending` : "") +
+						(hasCheckFailures ? `, ${checks.failed} failing` : "")
+					}
+				/>
+			)}
+
+			{isBehind && (
+				<StatusRow
+					icon={<StatusDot color="text-yellow-500" />}
+					title="This branch is out-of-date with the base branch"
+					description={`Merge the latest changes from ${baseRefName} into this branch.`}
+					action={
+						canUpdateBranch ? (
+							<UpdateBranchButton
+								owner={owner}
+								repo={repo}
+								pullNumber={pullNumber}
+								isUpdating={isUpdating}
+								setIsUpdating={setIsUpdating}
+							/>
+						) : undefined
+					}
+				/>
+			)}
+
+			<StatusRow
+				icon={
+					isMergeBlocked ? (
+						<StatusDot color="text-yellow-500" />
+					) : (
+						<StatusDot color="text-green-500" />
+					)
+				}
+				title={isMergeBlocked ? "Merging is blocked" : "Ready to merge"}
+				description={
+					isMergeBlocked
+						? "All required conditions have not been met."
+						: "All required conditions have been satisfied."
+				}
+				isLast
+			/>
+		</div>
+	);
+}
+
+function StatusRow({
+	icon,
+	title,
+	description,
+	action,
+	isLast,
+}: {
+	icon: React.ReactNode;
+	title: string;
+	description: string;
+	action?: React.ReactNode;
+	isLast?: boolean;
+}) {
+	return (
+		<div
+			className={cn(
+				"flex items-start gap-3 px-4 py-3",
+				!isLast && "border-b border-border/50",
+			)}
+		>
+			<div className="mt-0.5 shrink-0">{icon}</div>
+			<div className="flex min-w-0 flex-1 flex-col gap-0.5">
+				<p className="text-sm font-medium">{title}</p>
+				<p className="text-xs text-muted-foreground">{description}</p>
+			</div>
+			{action && <div className="shrink-0">{action}</div>}
+		</div>
+	);
+}
+
+function StatusDot({ color }: { color: string }) {
+	return (
+		<div className={cn("flex size-4 items-center justify-center", color)}>
+			<div className="size-2 rounded-full bg-current" />
+		</div>
+	);
+}
+
+function MergeStatusSkeleton() {
+	return (
+		<div className="flex flex-col rounded-lg border">
+			{[0, 1, 2].map((item) => (
+				<div
+					key={item}
+					className={cn(
+						"flex items-start gap-3 px-4 py-3",
+						item < 2 && "border-b border-border/50",
+					)}
+				>
+					<Skeleton className="mt-0.5 size-4 rounded-full" />
+					<div className="flex flex-1 flex-col gap-1.5">
+						<Skeleton className="h-3.5 w-48" />
+						<Skeleton className="h-3 w-72" />
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
+function UpdateBranchButton({
+	owner,
+	repo,
+	pullNumber,
+	isUpdating,
+	setIsUpdating,
+}: {
+	owner: string;
+	repo: string;
+	pullNumber: number;
+	isUpdating: boolean;
+	setIsUpdating: (value: boolean) => void;
+}) {
+	const queryClient = useQueryClient();
+
+	const handleUpdate = async () => {
+		setIsUpdating(true);
+		try {
+			const success = await updatePullBranch({
+				data: { owner, repo, pullNumber },
+			});
+			if (success) {
+				await queryClient.invalidateQueries({
+					queryKey: ["github"],
+				});
+			}
+		} finally {
+			setIsUpdating(false);
+		}
+	};
+
+	return (
+		<button
+			type="button"
+			disabled={isUpdating}
+			onClick={() => {
+				void handleUpdate();
+			}}
+			className="rounded-md border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground disabled:opacity-50"
+		>
+			{isUpdating ? "Updating…" : "Update branch"}
+		</button>
+	);
+}
+
+type TimelineItem =
+	| { type: "comment"; date: string; data: PullComment }
+	| { type: "commit"; date: string; data: PullCommit };
+
+function ActivityTimeline({
+	comments,
+	commits,
+}: {
+	comments: PullComment[];
+	commits: PullCommit[];
+}) {
+	const items: TimelineItem[] = [
+		...comments.map((comment) => ({
+			type: "comment" as const,
+			date: comment.createdAt,
+			data: comment,
+		})),
+		...commits.map((commit) => ({
+			type: "commit" as const,
+			date: commit.createdAt,
+			data: commit,
+		})),
+	].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+	if (items.length === 0) return null;
+
+	return (
+		<div className="relative flex flex-col pl-8 before:absolute before:left-4 before:top-0 before:h-full before:w-px before:bg-[linear-gradient(to_bottom,var(--color-border)_80%,transparent)]">
+			{items.map((item, index) => {
+				const previousType = index > 0 ? items[index - 1].type : null;
+				const nextType =
+					index < items.length - 1 ? items[index + 1].type : null;
+				const isConsecutiveCommit =
+					item.type === "commit" && previousType === "commit";
+				const isLastInCommitRun =
+					item.type === "commit" && nextType !== "commit";
+
+				if (item.type === "comment") {
+					const comment = item.data;
+					return (
+						<div
+							key={`comment-${comment.id}`}
+							className={cn("flex flex-col gap-1 py-5", index === 0 && "pt-5")}
+						>
+							<div className="flex items-center gap-1.5">
+								{comment.author ? (
+									<img
+										src={comment.author.avatarUrl}
+										alt={comment.author.login}
+										className="size-4 rounded-full border border-border"
+									/>
+								) : (
+									<div className="size-4 rounded-full bg-surface-2" />
+								)}
+								<span className="text-xs font-medium">
+									{comment.author?.login ?? "Unknown"}
+								</span>
+								<span className="text-xs text-muted-foreground">
+									{formatRelativeTime(comment.createdAt)}
+								</span>
+							</div>
+							<Markdown className="text-muted-foreground">
+								{comment.body}
+							</Markdown>
+						</div>
+					);
+				}
+
+				const commit = item.data;
+				const firstLine = commit.message.split("\n")[0];
+				return (
+					<div
+						key={`commit-${commit.sha}`}
+						className={cn(
+							"flex items-center gap-1.5",
+							index === 0 ? "pt-5" : isConsecutiveCommit ? "pt-2" : "pt-5",
+							isLastInCommitRun ? "pb-5" : "pb-2",
+						)}
+					>
+						<div className="flex size-5 shrink-0 items-center justify-center rounded-full border border-border bg-surface-1">
+							<GitCommitIcon
+								size={12}
+								strokeWidth={2}
+								className="text-muted-foreground"
+							/>
+						</div>
+						{commit.author ? (
+							<img
+								src={commit.author.avatarUrl}
+								alt={commit.author.login}
+								className="size-5 shrink-0 rounded-full border border-border"
+							/>
+						) : (
+							<div className="size-5 shrink-0 rounded-full bg-surface-2" />
+						)}
+						<span className="min-w-0 truncate text-sm">{firstLine}</span>
+						<code className="ml-auto shrink-0 rounded bg-surface-1 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+							{commit.sha.slice(0, 7)}
+						</code>
+						<span className="shrink-0 text-xs text-muted-foreground">
+							{formatRelativeTime(commit.createdAt)}
+						</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/detail/pull-detail-header.tsx b/apps/dashboard/src/components/pulls/detail/pull-detail-header.tsx
new file mode 100644
index 0000000..129e9e1
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/detail/pull-detail-header.tsx
@@ -0,0 +1,247 @@
+import {
+	FileIcon,
+	GitCommitIcon,
+	GitMergeIcon,
+	GitPullRequestClosedIcon,
+	GitPullRequestDraftIcon,
+	GitPullRequestIcon,
+	ReviewsIcon,
+} from "@diffkit/icons";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@diffkit/ui/components/tooltip";
+import { cn } from "@diffkit/ui/lib/utils";
+import { Link } from "@tanstack/react-router";
+import { useCallback, useRef, useState } from "react";
+import { DetailPageTitle } from "#/components/details/detail-page";
+import type { PullDetail } from "#/lib/github.types";
+
+type PullStateConfig = {
+	icon: React.ComponentType<{
+		size?: number;
+		strokeWidth?: number;
+		className?: string;
+	}>;
+	color: string;
+	label: string;
+	badgeClass: string;
+};
+
+export function getPrStateConfig(pr: PullDetail): PullStateConfig {
+	if (pr.isDraft) {
+		return {
+			icon: GitPullRequestDraftIcon,
+			color: "text-muted-foreground",
+			label: "Draft",
+			badgeClass: "bg-muted text-muted-foreground",
+		};
+	}
+	if (pr.isMerged || pr.mergedAt) {
+		return {
+			icon: GitMergeIcon,
+			color: "text-purple-500",
+			label: "Merged",
+			badgeClass: "bg-purple-500/10 text-purple-500",
+		};
+	}
+	if (pr.state === "closed") {
+		return {
+			icon: GitPullRequestClosedIcon,
+			color: "text-red-500",
+			label: "Closed",
+			badgeClass: "bg-red-500/10 text-red-500",
+		};
+	}
+	return {
+		icon: GitPullRequestIcon,
+		color: "text-green-500",
+		label: "Open",
+		badgeClass: "bg-green-500/10 text-green-500",
+	};
+}
+
+export function PullDetailHeader({
+	owner,
+	repo,
+	pullId,
+	pr,
+	viewerLogin,
+}: {
+	owner: string;
+	repo: string;
+	pullId: string;
+	pr: PullDetail;
+	viewerLogin?: string | null;
+}) {
+	const stateConfig = getPrStateConfig(pr);
+	const StateIcon = stateConfig.icon;
+	const isReviewRequested =
+		viewerLogin != null &&
+		pr.requestedReviewers.some((reviewer) => reviewer.login === viewerLogin);
+
+	return (
+		<>
+			<DetailPageTitle
+				collectionHref="/pulls"
+				collectionLabel="Pull Requests"
+				owner={owner}
+				repo={repo}
+				number={pr.number}
+				icon={StateIcon}
+				iconClassName={stateConfig.color}
+				title={pr.title}
+				subtitle={
+					<div className="flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground">
+						<span
+							className={cn(
+								"shrink-0 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+								stateConfig.badgeClass,
+							)}
+						>
+							{stateConfig.label}
+						</span>
+						{pr.author && (
+							<>
+								<img
+									src={pr.author.avatarUrl}
+									alt={pr.author.login}
+									className="size-4 shrink-0 rounded-full border border-border"
+								/>
+								<span className="shrink-0 font-medium text-foreground">
+									{pr.author.login}
+								</span>
+								<span className="shrink-0">wants to merge into</span>
+								<CopyBadge value={pr.baseRefName} />
+								<span className="shrink-0">from</span>
+								<CopyBadge value={pr.headRefName} canTruncate />
+							</>
+						)}
+					</div>
+				}
+			/>
+
+			<div className="flex flex-col gap-2">
+				{isReviewRequested && (
+					<div className="flex items-center justify-between rounded-lg bg-yellow-500/15 px-4 py-2.5">
+						<span className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400">
+							<ReviewsIcon size={15} strokeWidth={2} />
+							Your review has been requested
+						</span>
+						<Link
+							to="/$owner/$repo/review/$pullId"
+							params={{ owner, repo, pullId }}
+							className="rounded-md bg-yellow-600 px-3 py-1 text-xs font-medium text-white transition-opacity hover:opacity-90 dark:bg-yellow-500 dark:text-black"
+						>
+							Review changes
+						</Link>
+					</div>
+				)}
+
+				<div className="flex items-center gap-3 rounded-lg bg-surface-1 px-4 py-2.5 text-sm text-muted-foreground">
+					<span className="flex items-center gap-1.5">
+						<GitCommitIcon size={15} strokeWidth={2} />
+						<span className="tabular-nums font-medium text-foreground">
+							{pr.commits}
+						</span>{" "}
+						{pr.commits === 1 ? "commit" : "commits"}
+					</span>
+					<span className="text-muted-foreground/50">·</span>
+					<span className="flex items-center gap-1.5">
+						<FileIcon size={15} strokeWidth={2} />
+						<span className="tabular-nums font-medium text-foreground">
+							{pr.changedFiles}
+						</span>{" "}
+						{pr.changedFiles === 1 ? "file" : "files"} changed
+					</span>
+					<span className="ml-auto flex items-center gap-3 text-xs">
+						<span className="flex items-center gap-1.5">
+							<span className="tabular-nums font-medium text-green-500">
+								+{pr.additions}
+							</span>
+							<span className="tabular-nums font-medium text-red-500">
+								-{pr.deletions}
+							</span>
+							<DiffBoxes additions={pr.additions} deletions={pr.deletions} />
+						</span>
+						{!pr.isMerged && !isReviewRequested && (
+							<Link
+								to="/$owner/$repo/review/$pullId"
+								params={{ owner, repo, pullId }}
+								className="rounded-lg bg-foreground px-3 py-1 text-xs font-medium text-background transition-opacity hover:opacity-90"
+							>
+								Review changes
+							</Link>
+						)}
+					</span>
+				</div>
+			</div>
+		</>
+	);
+}
+
+const DIFF_BOX_COUNT = 5;
+
+function CopyBadge({
+	value,
+	canTruncate,
+}: {
+	value: string;
+	canTruncate?: boolean;
+}) {
+	const [copied, setCopied] = useState(false);
+	const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+	const handleClick = useCallback(() => {
+		void navigator.clipboard.writeText(value);
+		setCopied(true);
+		clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => setCopied(false), 1500);
+	}, [value]);
+
+	return (
+		<Tooltip open={copied}>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					onClick={handleClick}
+					className={cn(
+						"shrink-0 cursor-pointer rounded bg-surface-1 px-1.5 py-0.5 font-mono text-xs font-[550] transition-colors hover:bg-surface-2",
+						canTruncate && "min-w-0 shrink truncate",
+					)}
+				>
+					{value}
+				</button>
+			</TooltipTrigger>
+			<TooltipContent>Copied!</TooltipContent>
+		</Tooltip>
+	);
+}
+
+function DiffBoxes({
+	additions,
+	deletions,
+}: {
+	additions: number;
+	deletions: number;
+}) {
+	const total = additions + deletions;
+	const greenCount =
+		total === 0 ? 0 : Math.round((additions / total) * DIFF_BOX_COUNT);
+	const redCount = total === 0 ? 0 : DIFF_BOX_COUNT - greenCount;
+
+	const boxes: string[] = [];
+	for (let i = 0; i < greenCount; i++) boxes.push("bg-green-500");
+	for (let i = 0; i < redCount; i++) boxes.push("bg-red-500");
+	while (boxes.length < DIFF_BOX_COUNT) boxes.push("bg-muted-foreground/30");
+
+	return (
+		<span className="flex items-center gap-px">
+			{boxes.map((color, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: static decorative boxes, order never changes
+				<span key={i} className={cn("size-2 rounded-[2px]", color)} />
+			))}
+		</span>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/detail/pull-detail-page.tsx b/apps/dashboard/src/components/pulls/detail/pull-detail-page.tsx
new file mode 100644
index 0000000..fb8f15e
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/detail/pull-detail-page.tsx
@@ -0,0 +1,188 @@
+import { Skeleton } from "@diffkit/ui/components/skeleton";
+import { useQuery } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import {
+	DetailPageLayout,
+	DetailPageSkeletonLayout,
+} from "#/components/details/detail-page";
+import {
+	githubPullPageQueryOptions,
+	githubPullStatusQueryOptions,
+	githubViewerQueryOptions,
+} from "#/lib/github.query";
+import { githubCachePolicy } from "#/lib/github-cache-policy";
+import { useHasMounted } from "#/lib/use-has-mounted";
+import { useRegisterTab } from "#/lib/use-register-tab";
+import { PullBodySection } from "./pull-body-section";
+import { PullDetailActivitySection } from "./pull-detail-activity";
+import { getPrStateConfig, PullDetailHeader } from "./pull-detail-header";
+import { PullDetailSidebar } from "./pull-detail-sidebar";
+
+const routeApi = getRouteApi("/_protected/$owner/$repo/pull/$pullId");
+
+export function PullDetailPage() {
+	const { user } = routeApi.useRouteContext();
+	const { owner, repo, pullId } = routeApi.useParams();
+	const pullNumber = Number(pullId);
+	const scope = { userId: user.id };
+	const hasMounted = useHasMounted();
+
+	const pageQuery = useQuery({
+		...githubPullPageQueryOptions(scope, { owner, repo, pullNumber }),
+		enabled: hasMounted,
+	});
+
+	const statusQuery = useQuery({
+		...githubPullStatusQueryOptions(scope, { owner, repo, pullNumber }),
+		enabled: hasMounted && pageQuery.data?.detail != null,
+		refetchOnWindowFocus: "always",
+		refetchInterval: githubCachePolicy.status.staleTimeMs,
+	});
+
+	const viewerQuery = useQuery({
+		...githubViewerQueryOptions(scope),
+		enabled: hasMounted,
+	});
+
+	const pr = pageQuery.data?.detail;
+	const comments = pageQuery.data?.comments;
+	const commits = pageQuery.data?.commits;
+	const status = statusQuery.data ?? null;
+	const viewer = viewerQuery.data ?? null;
+
+	useRegisterTab(
+		pr
+			? {
+					type: "pull",
+					title: pr.title,
+					number: pr.number,
+					url: `/${owner}/${repo}/pull/${pullId}`,
+					repo: `${owner}/${repo}`,
+					iconColor: getPrStateConfig(pr).color,
+				}
+			: null,
+	);
+
+	if (pageQuery.error) throw pageQuery.error;
+	if (!pr) return <PullDetailPageSkeleton />;
+
+	return (
+		<DetailPageLayout
+			main={
+				<>
+					<PullDetailHeader
+						owner={owner}
+						repo={repo}
+						pullId={pullId}
+						pr={pr}
+						viewerLogin={viewer?.login}
+					/>
+
+					<PullBodySection
+						pr={pr}
+						owner={owner}
+						repo={repo}
+						pullNumber={pullNumber}
+						isAuthor={viewer?.login === pr.author?.login}
+						scope={scope}
+					/>
+
+					<PullDetailActivitySection
+						comments={comments}
+						commits={commits}
+						isFetching={pageQuery.isFetching}
+						status={status}
+						pr={pr}
+						owner={owner}
+						repo={repo}
+						pullNumber={pullNumber}
+					/>
+				</>
+			}
+			sidebar={
+				<PullDetailSidebar
+					pr={pr}
+					owner={owner}
+					repo={repo}
+					pullNumber={pullNumber}
+					scope={scope}
+					comments={comments ?? []}
+					commits={commits ?? []}
+				/>
+			}
+		/>
+	);
+}
+
+function PullDetailPageSkeleton() {
+	return (
+		<DetailPageSkeletonLayout
+			main={
+				<>
+					<div className="flex flex-col gap-3">
+						<Skeleton className="h-3 w-32" />
+						<div className="flex items-start gap-3">
+							<Skeleton className="mt-1 size-5 rounded-full" />
+							<div className="flex min-w-0 flex-1 flex-col gap-2">
+								<Skeleton className="h-7 w-3/5" />
+								<div className="flex flex-wrap items-center gap-2">
+									<Skeleton className="h-5 w-14 rounded-full" />
+									<Skeleton className="h-4 w-64" />
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="flex items-center gap-3 rounded-lg bg-surface-1 px-4 py-2.5">
+						<Skeleton className="h-4 w-20" />
+						<Skeleton className="h-4 w-16" />
+						<Skeleton className="h-4 w-24" />
+					</div>
+
+					<div className="rounded-lg border bg-surface-0 p-5">
+						<div className="flex flex-col gap-3">
+							<Skeleton className="h-4 w-full" />
+							<Skeleton className="h-4 w-5/6" />
+							<Skeleton className="h-4 w-2/3" />
+							<Skeleton className="h-4 w-3/4" />
+						</div>
+					</div>
+
+					<div className="flex flex-col gap-6">
+						<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
+							<Skeleton className="h-4 w-16" />
+							<Skeleton className="h-4 w-6" />
+						</div>
+						<div className="flex flex-col gap-4 pl-8">
+							{[0, 1, 2].map((item) => (
+								<div key={item} className="flex flex-col gap-2">
+									<div className="flex items-center gap-2">
+										<Skeleton className="size-4 rounded-full" />
+										<Skeleton className="h-3.5 w-24" />
+										<Skeleton className="h-3.5 w-16" />
+									</div>
+									<Skeleton className="h-4 w-5/6" />
+									<Skeleton className="h-4 w-2/3" />
+								</div>
+							))}
+						</div>
+						<div className="flex flex-col rounded-lg border">
+							{[0, 1, 2].map((item) => (
+								<div
+									key={item}
+									className="flex items-start gap-3 border-b border-border/50 px-4 py-3 last:border-b-0"
+								>
+									<Skeleton className="mt-0.5 size-4 rounded-full" />
+									<div className="flex flex-1 flex-col gap-1.5">
+										<Skeleton className="h-3.5 w-48" />
+										<Skeleton className="h-3 w-72" />
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</>
+			}
+		/>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/detail/pull-detail-sidebar.tsx b/apps/dashboard/src/components/pulls/detail/pull-detail-sidebar.tsx
new file mode 100644
index 0000000..a1d6f39
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/detail/pull-detail-sidebar.tsx
@@ -0,0 +1,545 @@
+import {
+	CalendarIcon,
+	CheckIcon,
+	ClockIcon,
+	CloseIcon,
+	CommentIcon,
+	GitMergeIcon,
+	MessageIcon,
+	PlusSignIcon,
+	SearchIcon,
+} from "@diffkit/icons";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@diffkit/ui/components/popover";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+	DetailParticipantAvatars,
+	DetailSidebar,
+	DetailSidebarRow,
+	DetailSidebarSection,
+} from "#/components/details/detail-sidebar";
+import { LabelsSection } from "#/components/issues/labels-section";
+import { formatRelativeTime } from "#/lib/format-relative-time";
+import {
+	removeReviewRequest,
+	requestPullReviewers,
+} from "#/lib/github.functions";
+import {
+	type GitHubQueryScope,
+	githubOrgTeamsQueryOptions,
+	githubQueryKeys,
+	githubRepoCollaboratorsQueryOptions,
+} from "#/lib/github.query";
+import type {
+	GitHubActor,
+	PullComment,
+	PullCommit,
+	PullDetail,
+	PullPageData,
+} from "#/lib/github.types";
+import { useOptimisticMutation } from "#/lib/use-optimistic-mutation";
+
+export function PullDetailSidebar({
+	pr,
+	owner,
+	repo,
+	pullNumber,
+	scope,
+	comments,
+	commits,
+}: {
+	pr: PullDetail;
+	owner: string;
+	repo: string;
+	pullNumber: number;
+	scope: GitHubQueryScope;
+	comments: PullComment[];
+	commits: PullCommit[];
+}) {
+	return (
+		<DetailSidebar>
+			<LabelsSection
+				currentLabels={pr.labels}
+				owner={owner}
+				repo={repo}
+				issueNumber={pullNumber}
+				scope={scope}
+				pageQueryKey={githubQueryKeys.pulls.page(scope, {
+					owner,
+					repo,
+					pullNumber,
+				})}
+			/>
+
+			<ReviewersSection
+				pr={pr}
+				owner={owner}
+				repo={repo}
+				pullNumber={pullNumber}
+				scope={scope}
+			/>
+
+			<DetailSidebarSection title="Participants">
+				<ParticipantsList pr={pr} comments={comments} commits={commits} />
+			</DetailSidebarSection>
+
+			<DetailSidebarSection title="Details">
+				<div className="flex flex-col gap-2 text-xs">
+					<DetailSidebarRow icon={CalendarIcon} label="Created">
+						{formatRelativeTime(pr.createdAt)}
+					</DetailSidebarRow>
+					<DetailSidebarRow icon={ClockIcon} label="Updated">
+						{formatRelativeTime(pr.updatedAt)}
+					</DetailSidebarRow>
+					{pr.mergedAt && (
+						<DetailSidebarRow icon={GitMergeIcon} label="Merged">
+							{formatRelativeTime(pr.mergedAt)}
+						</DetailSidebarRow>
+					)}
+					{pr.closedAt && !pr.mergedAt && (
+						<DetailSidebarRow icon={CloseIcon} label="Closed">
+							{formatRelativeTime(pr.closedAt)}
+						</DetailSidebarRow>
+					)}
+					<DetailSidebarRow icon={CommentIcon} label="Comments">
+						<span className="tabular-nums">{pr.comments}</span>
+					</DetailSidebarRow>
+					<DetailSidebarRow icon={MessageIcon} label="Review comments">
+						<span className="tabular-nums">{pr.reviewComments}</span>
+					</DetailSidebarRow>
+				</div>
+			</DetailSidebarSection>
+		</DetailSidebar>
+	);
+}
+
+function ReviewersSection({
+	pr,
+	owner,
+	repo,
+	pullNumber,
+	scope,
+}: {
+	pr: PullDetail;
+	owner: string;
+	repo: string;
+	pullNumber: number;
+	scope: GitHubQueryScope;
+}) {
+	const { mutate } = useOptimisticMutation();
+	const [pickerOpen, setPickerOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [focusedIndex, setFocusedIndex] = useState(-1);
+	const listRef = useRef<HTMLDivElement>(null);
+
+	const collaboratorsQuery = useQuery({
+		...githubRepoCollaboratorsQueryOptions(scope, { owner, repo }),
+		enabled: pickerOpen,
+	});
+	const teamsQuery = useQuery({
+		...githubOrgTeamsQueryOptions(scope, owner),
+		enabled: pickerOpen,
+	});
+
+	const collaborators = collaboratorsQuery.data ?? [];
+	const teams = teamsQuery.data ?? [];
+	const isLoading = collaboratorsQuery.isLoading || teamsQuery.isLoading;
+	const isOpen = !pr.isMerged && pr.state !== "closed";
+
+	const requestedLogins = useMemo(
+		() => new Set(pr.requestedReviewers.map((reviewer) => reviewer.login)),
+		[pr.requestedReviewers],
+	);
+	const requestedTeamSlugs = useMemo(
+		() => new Set(pr.requestedTeams.map((team) => team.slug)),
+		[pr.requestedTeams],
+	);
+
+	const candidates = useMemo(() => {
+		const authorLogin = pr.author?.login;
+		return collaborators.filter(
+			(collaborator) => collaborator.login !== authorLogin,
+		);
+	}, [collaborators, pr.author?.login]);
+
+	const filteredUsers = useMemo(() => {
+		if (!search) return candidates;
+		const query = search.toLowerCase();
+		return candidates.filter((candidate) =>
+			candidate.login.toLowerCase().includes(query),
+		);
+	}, [candidates, search]);
+
+	const filteredTeams = useMemo(() => {
+		if (!search) return teams;
+		const query = search.toLowerCase();
+		return teams.filter(
+			(team) =>
+				team.name.toLowerCase().includes(query) ||
+				team.slug.toLowerCase().includes(query),
+		);
+	}, [teams, search]);
+
+	const pageQueryKey = githubQueryKeys.pulls.page(scope, {
+		owner,
+		repo,
+		pullNumber,
+	});
+
+	const toggleReviewer = (login: string) => {
+		const isRequested = requestedLogins.has(login);
+		const collaborator = collaborators.find(
+			(candidate) => candidate.login === login,
+		);
+
+		mutate({
+			mutationFn: () =>
+				isRequested
+					? removeReviewRequest({
+							data: { owner, repo, pullNumber, reviewers: [login] },
+						})
+					: requestPullReviewers({
+							data: { owner, repo, pullNumber, reviewers: [login] },
+						}),
+			updates: [
+				{
+					queryKey: pageQueryKey,
+					updater: (prev: PullPageData) => ({
+						...prev,
+						detail: prev.detail
+							? {
+									...prev.detail,
+									requestedReviewers: isRequested
+										? prev.detail.requestedReviewers.filter(
+												(reviewer) => reviewer.login !== login,
+											)
+										: [
+												...prev.detail.requestedReviewers,
+												{
+													login,
+													avatarUrl: collaborator?.avatarUrl ?? "",
+													url: `https://github.com/${login}`,
+													type: "User",
+												},
+											],
+								}
+							: prev.detail,
+					}),
+				},
+			],
+		});
+	};
+
+	const toggleTeam = (slug: string) => {
+		const isRequested = requestedTeamSlugs.has(slug);
+		const team = teams.find((candidate) => candidate.slug === slug);
+
+		mutate({
+			mutationFn: () =>
+				isRequested
+					? removeReviewRequest({
+							data: { owner, repo, pullNumber, teamReviewers: [slug] },
+						})
+					: requestPullReviewers({
+							data: { owner, repo, pullNumber, teamReviewers: [slug] },
+						}),
+			updates: [
+				{
+					queryKey: pageQueryKey,
+					updater: (prev: PullPageData) => ({
+						...prev,
+						detail: prev.detail
+							? {
+									...prev.detail,
+									requestedTeams: isRequested
+										? prev.detail.requestedTeams.filter(
+												(requestedTeam) => requestedTeam.slug !== slug,
+											)
+										: [
+												...prev.detail.requestedTeams,
+												{
+													slug,
+													name: team?.name ?? slug,
+													url: `https://github.com/orgs/${owner}/teams/${slug}`,
+												},
+											],
+								}
+							: prev.detail,
+					}),
+				},
+			],
+		});
+	};
+
+	const hasReviewers =
+		pr.requestedReviewers.length > 0 || pr.requestedTeams.length > 0;
+
+	type ReviewerItem =
+		| { kind: "team"; slug: string }
+		| { kind: "user"; login: string };
+
+	const flatItems = useMemo<ReviewerItem[]>(() => {
+		const items: ReviewerItem[] = [];
+		for (const team of filteredTeams)
+			items.push({ kind: "team", slug: team.slug });
+		for (const collaborator of filteredUsers) {
+			items.push({ kind: "user", login: collaborator.login });
+		}
+		return items;
+	}, [filteredTeams, filteredUsers]);
+
+	const scrollToFocused = useCallback((index: number) => {
+		const element = listRef.current?.querySelector(`[data-index="${index}"]`);
+		if (element) {
+			element.scrollIntoView({ block: "nearest" });
+		}
+	}, []);
+
+	const handleKeyDown = (event: React.KeyboardEvent) => {
+		if (flatItems.length === 0) return;
+
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			const next = focusedIndex < flatItems.length - 1 ? focusedIndex + 1 : 0;
+			setFocusedIndex(next);
+			scrollToFocused(next);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			const next = focusedIndex > 0 ? focusedIndex - 1 : flatItems.length - 1;
+			setFocusedIndex(next);
+			scrollToFocused(next);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			if (focusedIndex < 0) return;
+			const item = flatItems[focusedIndex];
+			if (item.kind === "team") {
+				toggleTeam(item.slug);
+			} else {
+				toggleReviewer(item.login);
+			}
+		}
+	};
+
+	return (
+		<div className="flex flex-col gap-2.5">
+			<div className="flex items-center justify-between">
+				<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+					Reviewers
+				</h3>
+				{isOpen && (
+					<Popover
+						open={pickerOpen}
+						onOpenChange={(open) => {
+							setPickerOpen(open);
+							if (!open) {
+								setSearch("");
+								setFocusedIndex(-1);
+							}
+						}}
+					>
+						<PopoverTrigger asChild>
+							<button
+								type="button"
+								className="flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+							>
+								<PlusSignIcon size={14} strokeWidth={2} />
+							</button>
+						</PopoverTrigger>
+						<PopoverContent align="end" className="w-64 p-0">
+							<div className="flex items-center gap-2 border-b px-3 py-2">
+								<SearchIcon className="size-3.5 shrink-0 text-muted-foreground" />
+								<input
+									value={search}
+									onChange={(event) => {
+										setSearch(event.target.value);
+										setFocusedIndex(-1);
+									}}
+									onKeyDown={handleKeyDown}
+									placeholder="Search people and teams..."
+									className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+								/>
+							</div>
+							<div ref={listRef} className="max-h-64 overflow-y-auto py-1">
+								{isLoading ? (
+									<p className="px-3 py-4 text-center text-xs text-muted-foreground">
+										Loading…
+									</p>
+								) : filteredUsers.length === 0 && filteredTeams.length === 0 ? (
+									<p className="px-3 py-4 text-center text-xs text-muted-foreground">
+										No results found
+									</p>
+								) : (
+									<>
+										{filteredTeams.length > 0 && (
+											<>
+												<p className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground">
+													Teams
+												</p>
+												{filteredTeams.map((team, index) => {
+													const isSelected = requestedTeamSlugs.has(team.slug);
+													return (
+														<button
+															key={`team-${team.slug}`}
+															type="button"
+															data-index={index}
+															onClick={() => toggleTeam(team.slug)}
+															onMouseEnter={() => setFocusedIndex(index)}
+															className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors hover:bg-surface-1 disabled:opacity-50 ${focusedIndex === index ? "bg-surface-1" : ""}`}
+														>
+															<div className="flex size-5 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-[10px] font-semibold text-muted-foreground">
+																T
+															</div>
+															<span className="min-w-0 flex-1 truncate">
+																{team.name}
+															</span>
+															{isSelected && (
+																<CheckIcon
+																	size={14}
+																	strokeWidth={2}
+																	className="shrink-0 text-green-500"
+																/>
+															)}
+														</button>
+													);
+												})}
+											</>
+										)}
+										{filteredUsers.length > 0 && (
+											<>
+												<p className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground">
+													People
+												</p>
+												{filteredUsers.map((collaborator, index) => {
+													const itemIndex = filteredTeams.length + index;
+													const isSelected = requestedLogins.has(
+														collaborator.login,
+													);
+													return (
+														<button
+															key={collaborator.login}
+															type="button"
+															data-index={itemIndex}
+															onClick={() => toggleReviewer(collaborator.login)}
+															onMouseEnter={() => setFocusedIndex(itemIndex)}
+															className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors hover:bg-surface-1 disabled:opacity-50 ${focusedIndex === itemIndex ? "bg-surface-1" : ""}`}
+														>
+															<img
+																src={collaborator.avatarUrl}
+																alt={collaborator.login}
+																className="size-5 rounded-full border border-border"
+															/>
+															<span className="min-w-0 flex-1 truncate">
+																{collaborator.login}
+															</span>
+															{isSelected && (
+																<CheckIcon
+																	size={14}
+																	strokeWidth={2}
+																	className="shrink-0 text-green-500"
+																/>
+															)}
+														</button>
+													);
+												})}
+											</>
+										)}
+									</>
+								)}
+							</div>
+						</PopoverContent>
+					</Popover>
+				)}
+			</div>
+			{hasReviewers ? (
+				<div className="flex flex-col gap-2">
+					{pr.requestedTeams.map((team) => (
+						<div
+							key={`team-${team.slug}`}
+							className="group/reviewer flex items-center gap-2"
+						>
+							<div className="flex size-5 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-[10px] font-semibold text-muted-foreground">
+								T
+							</div>
+							<span className="min-w-0 flex-1 truncate text-sm">
+								{team.name}
+							</span>
+							{isOpen && (
+								<button
+									type="button"
+									onClick={() => toggleTeam(team.slug)}
+									className="flex size-4 shrink-0 items-center justify-center rounded opacity-0 transition-opacity hover:text-red-400 group-hover/reviewer:opacity-100 disabled:opacity-50"
+								>
+									<CloseIcon size={12} strokeWidth={2} />
+								</button>
+							)}
+						</div>
+					))}
+					{pr.requestedReviewers.map((reviewer) => (
+						<div
+							key={reviewer.login}
+							className="group/reviewer flex items-center gap-2"
+						>
+							<img
+								src={reviewer.avatarUrl}
+								alt={reviewer.login}
+								className="size-5 rounded-full border border-border"
+							/>
+							<span className="min-w-0 flex-1 truncate text-sm">
+								{reviewer.login}
+							</span>
+							{isOpen && (
+								<button
+									type="button"
+									onClick={() => toggleReviewer(reviewer.login)}
+									className="flex size-4 shrink-0 items-center justify-center rounded opacity-0 transition-opacity hover:text-red-400 group-hover/reviewer:opacity-100 disabled:opacity-50"
+								>
+									<CloseIcon size={12} strokeWidth={2} />
+								</button>
+							)}
+						</div>
+					))}
+				</div>
+			) : (
+				<p className="text-xs text-muted-foreground">No reviewers requested</p>
+			)}
+		</div>
+	);
+}
+
+function ParticipantsList({
+	pr,
+	comments,
+	commits,
+}: {
+	pr: PullDetail;
+	comments: PullComment[];
+	commits: PullCommit[];
+}) {
+	const seen = new Set<string>();
+	const participants: GitHubActor[] = [];
+
+	const addActor = (actor: GitHubActor | null) => {
+		if (actor && !seen.has(actor.login)) {
+			seen.add(actor.login);
+			participants.push(actor);
+		}
+	};
+
+	addActor(pr.author);
+	for (const comment of comments) {
+		addActor(comment.author);
+	}
+	for (const commit of commits) {
+		addActor(commit.author);
+	}
+
+	if (participants.length === 0) {
+		return <p className="text-xs text-muted-foreground">No participants yet</p>;
+	}
+
+	return <DetailParticipantAvatars actors={participants} />;
+}
diff --git a/apps/dashboard/src/components/pulls/pull-request-row.tsx b/apps/dashboard/src/components/pulls/pull-request-row.tsx
index 0e09ad6..7ade4fe 100644
--- a/apps/dashboard/src/components/pulls/pull-request-row.tsx
+++ b/apps/dashboard/src/components/pulls/pull-request-row.tsx
@@ -12,6 +12,7 @@ import { cn } from "@diffkit/ui/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { Link, useRouter } from "@tanstack/react-router";
 import { useState } from "react";
+import { formatRelativeTime } from "#/lib/format-relative-time";
 import {
 	type GitHubQueryScope,
 	githubPullCommentsQueryOptions,
@@ -19,21 +20,6 @@ import {
 import type { PullSummary } from "#/lib/github.types";
 import { preloadRouteOnce } from "#/lib/route-preload";
 
-export function formatRelativeTime(dateStr: string): string {
-	const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 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 < 30) return `${days}d ago`;
-	const months = Math.floor(days / 30);
-	if (months < 12) return `${months}mo ago`;
-	const years = Math.floor(months / 12);
-	return `${years}y ago`;
-}
-
 function getPrStateProps(pr: PullSummary) {
 	if (pr.isDraft) {
 		return { icon: GitPullRequestDraftIcon, color: "text-muted-foreground" };
diff --git a/apps/dashboard/src/components/pulls/review/review-file-diff-block.tsx b/apps/dashboard/src/components/pulls/review/review-file-diff-block.tsx
new file mode 100644
index 0000000..aba19ed
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/review/review-file-diff-block.tsx
@@ -0,0 +1,378 @@
+import { CommentIcon } from "@diffkit/icons";
+import { Markdown } from "@diffkit/ui/components/markdown";
+import { vercelDark, vercelLight } from "@diffkit/ui/lib/shiki-themes";
+import { cn } from "@diffkit/ui/lib/utils";
+import type { SelectedLineRange } from "@pierre/diffs";
+import type { DiffLineAnnotation, PatchDiffProps } from "@pierre/diffs/react";
+import { useTheme } from "next-themes";
+import {
+	type ComponentType,
+	type LazyExoticComponent,
+	lazy,
+	Suspense,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { formatRelativeTime } from "#/lib/format-relative-time";
+import type { PullFile, PullReviewComment } from "#/lib/github.types";
+import type {
+	ActiveCommentForm,
+	PendingComment,
+	ReviewAnnotation,
+} from "./review-types";
+import { buildPatchString, encodeFileId } from "./review-utils";
+
+type ReviewPatchDiffComponent = ComponentType<PatchDiffProps<ReviewAnnotation>>;
+
+const PatchDiff: LazyExoticComponent<ReviewPatchDiffComponent> = lazy(() =>
+	import.meta.env.SSR
+		? Promise.resolve({
+				default: (() => null) as ReviewPatchDiffComponent,
+			})
+		: import("@pierre/diffs/react").then((mod) => ({
+				default: mod.PatchDiff as ReviewPatchDiffComponent,
+			})),
+);
+
+if (!import.meta.env.SSR) {
+	import("@pierre/diffs").then(({ registerCustomTheme }) => {
+		registerCustomTheme("vercel-light", () => Promise.resolve(vercelLight));
+		registerCustomTheme("vercel-dark", () => Promise.resolve(vercelDark));
+	});
+}
+
+export function ReviewFileDiffBlock({
+	file,
+	diffStyle,
+	annotations,
+	pendingComments,
+	activeCommentForm,
+	selectedLines,
+	onGutterClick,
+	onCancelComment,
+	onAddComment,
+}: {
+	file: PullFile;
+	diffStyle: "unified" | "split";
+	annotations: DiffLineAnnotation<PullReviewComment>[];
+	pendingComments: PendingComment[];
+	activeCommentForm: ActiveCommentForm | null;
+	selectedLines: SelectedLineRange | null;
+	onGutterClick: (range: SelectedLineRange) => void;
+	onCancelComment: () => void;
+	onAddComment: (comment: PendingComment) => void;
+}) {
+	const [isCollapsed, setIsCollapsed] = useState(false);
+	const { resolvedTheme } = useTheme();
+	const isDark = resolvedTheme === "dark";
+
+	const allAnnotations = useMemo(() => {
+		const result: DiffLineAnnotation<ReviewAnnotation>[] = [...annotations];
+
+		for (const pending of pendingComments) {
+			result.push({
+				side: pending.side === "LEFT" ? "deletions" : "additions",
+				lineNumber: pending.line,
+				metadata: pending,
+			});
+		}
+
+		if (activeCommentForm) {
+			result.push({
+				side: activeCommentForm.side === "LEFT" ? "deletions" : "additions",
+				lineNumber: activeCommentForm.line,
+				metadata: {
+					path: activeCommentForm.path,
+					line: activeCommentForm.line,
+					startLine: activeCommentForm.startLine,
+					side: activeCommentForm.side,
+					startSide: activeCommentForm.startSide,
+					body: "__FORM__",
+				} satisfies PendingComment,
+			});
+		}
+
+		return result;
+	}, [annotations, pendingComments, activeCommentForm]);
+
+	const mutedFg = isDark
+		? "oklch(0.705 0.015 286.067)"
+		: "oklch(0.552 0.016 285.938)";
+
+	const diffOptions = useMemo(
+		() => ({
+			diffStyle,
+			theme: {
+				dark: "vercel-dark" as const,
+				light: "vercel-light" as const,
+			},
+			lineDiffType: "word" as const,
+			hunkSeparators: "line-info" as const,
+			overflow: "scroll" as const,
+			disableFileHeader: true,
+			enableGutterUtility: true,
+			enableLineSelection: true,
+			onGutterUtilityClick: onGutterClick,
+			unsafeCSS: [
+				`:host { color-scheme: ${isDark ? "dark" : "light"}; ${isDark ? "" : "--diffs-light-bg: oklch(0.967 0.001 286.375);"} }`,
+				`:host { --diffs-font-family: 'Geist Mono Variable', 'SF Mono', ui-monospace, 'Cascadia Code', monospace; }`,
+				`:host { --diffs-selection-base: ${mutedFg}; }`,
+				`[data-utility-button] { background-color: ${mutedFg}; }`,
+				`[data-line-annotation] { font-family: 'Inter Variable', 'Inter', 'Avenir Next', ui-sans-serif, system-ui, sans-serif; }`,
+				`[data-line-annotation] code { font-family: var(--diffs-font-family, var(--diffs-font-fallback)); }`,
+				isDark
+					? `:host { --diffs-bg-addition-override: color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-addition-base)); --diffs-bg-addition-number-override: color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)); --diffs-bg-addition-emphasis-override: color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-addition-base)); --diffs-bg-deletion-override: color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-deletion-base)); --diffs-bg-deletion-number-override: color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)); --diffs-bg-deletion-emphasis-override: color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base)); }`
+					: `:host { --diffs-bg-addition-override: color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-addition-base)); --diffs-bg-addition-number-override: color-mix(in lab, var(--diffs-bg) 78%, var(--diffs-addition-base)); --diffs-bg-deletion-override: color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-deletion-base)); --diffs-bg-deletion-number-override: color-mix(in lab, var(--diffs-bg) 78%, var(--diffs-deletion-base)); }`,
+			].join("\n"),
+		}),
+		[diffStyle, isDark, mutedFg, onGutterClick],
+	);
+
+	if (!file.patch) {
+		return (
+			<div id={encodeFileId(file.filename)} data-filename={file.filename}>
+				<FileHeader
+					file={file}
+					isCollapsed={isCollapsed}
+					onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+				/>
+				{!isCollapsed && (
+					<div className="flex items-center justify-center rounded-b-lg border border-t-0 bg-surface-0 py-8 text-sm text-muted-foreground">
+						Binary file or diff too large to display
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	const patchString = buildPatchString(file);
+
+	return (
+		<div id={encodeFileId(file.filename)} data-filename={file.filename}>
+			<FileHeader
+				file={file}
+				isCollapsed={isCollapsed}
+				onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+			/>
+			{!isCollapsed && (
+				<div className="px-2 pb-2">
+					<Suspense>
+						<PatchDiff
+							patch={patchString}
+							options={diffOptions}
+							selectedLines={selectedLines}
+							lineAnnotations={allAnnotations}
+							renderAnnotation={(
+								annotation: DiffLineAnnotation<ReviewAnnotation>,
+							) => {
+								const data = annotation.metadata as
+									| PendingComment
+									| PullReviewComment
+									| null;
+								if (!data) return null;
+
+								if ("body" in data && data.body === "__FORM__") {
+									const formData = data as PendingComment;
+									return (
+										<InlineCommentForm
+											isMultiLine={
+												formData.startLine != null &&
+												formData.startLine !== formData.line
+											}
+											startLine={formData.startLine}
+											endLine={formData.line}
+											onSubmit={(body) =>
+												onAddComment({
+													path: file.filename,
+													line: formData.line,
+													startLine: formData.startLine,
+													side: formData.side,
+													startSide: formData.startSide,
+													body,
+												})
+											}
+											onCancel={onCancelComment}
+										/>
+									);
+								}
+
+								if ("body" in data && !("id" in data)) {
+									return (
+										<PendingCommentBubble comment={data as PendingComment} />
+									);
+								}
+
+								if ("id" in data) {
+									return (
+										<ReviewCommentBubble comment={data as PullReviewComment} />
+									);
+								}
+
+								return null;
+							}}
+						/>
+					</Suspense>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function FileHeader({
+	file,
+	isCollapsed,
+	onToggleCollapse,
+}: {
+	file: PullFile;
+	isCollapsed: boolean;
+	onToggleCollapse: () => void;
+}) {
+	return (
+		<div className="sticky top-2 z-10 flex items-center gap-2 rounded-lg border bg-surface-1 px-3 py-2">
+			<button
+				type="button"
+				onClick={onToggleCollapse}
+				className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
+			>
+				<svg
+					aria-hidden="true"
+					className={cn(
+						"size-3 shrink-0 transition-transform",
+						!isCollapsed && "rotate-90",
+					)}
+					viewBox="0 0 16 16"
+					fill="currentColor"
+				>
+					<path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
+				</svg>
+			</button>
+
+			<span className="truncate font-mono text-xs font-medium">
+				{file.previousFilename && file.previousFilename !== file.filename ? (
+					<>
+						<span className="text-muted-foreground line-through">
+							{file.previousFilename}
+						</span>
+						<span className="mx-1 text-muted-foreground">→</span>
+						{file.filename}
+					</>
+				) : (
+					file.filename
+				)}
+			</span>
+
+			<span className="ml-auto flex items-center gap-2 font-mono text-xs tabular-nums">
+				{file.additions > 0 && (
+					<span className="font-medium text-green-500">+{file.additions}</span>
+				)}
+				{file.deletions > 0 && (
+					<span className="font-medium text-red-500">-{file.deletions}</span>
+				)}
+			</span>
+		</div>
+	);
+}
+
+function InlineCommentForm({
+	isMultiLine,
+	startLine,
+	endLine,
+	onSubmit,
+	onCancel,
+}: {
+	isMultiLine?: boolean;
+	startLine?: number;
+	endLine?: number;
+	onSubmit: (body: string) => void;
+	onCancel: () => void;
+}) {
+	const [body, setBody] = useState("");
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+	useEffect(() => {
+		textareaRef.current?.focus();
+	}, []);
+
+	return (
+		<div className="mx-2 my-1 flex flex-col gap-2 rounded-lg border bg-surface-0 p-3">
+			{isMultiLine && startLine != null && endLine != null && (
+				<div className="text-xs text-muted-foreground">
+					Commenting on lines {startLine}–{endLine}
+				</div>
+			)}
+			<textarea
+				ref={textareaRef}
+				value={body}
+				onChange={(event) => setBody(event.target.value)}
+				placeholder="Leave a comment..."
+				className="min-h-[60px] w-full resize-y rounded-md border bg-background px-3 py-2 text-xs outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+			/>
+			<div className="flex items-center justify-end gap-2">
+				<button
+					type="button"
+					onClick={onCancel}
+					className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					onClick={() => {
+						if (body.trim()) onSubmit(body.trim());
+					}}
+					disabled={!body.trim()}
+					className="rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity disabled:opacity-50"
+				>
+					Add comment
+				</button>
+			</div>
+		</div>
+	);
+}
+
+function ReviewCommentBubble({ comment }: { comment: PullReviewComment }) {
+	return (
+		<div className="mx-2 my-1 rounded-lg border bg-surface-0 p-3">
+			<div className="mb-2 flex items-center gap-2">
+				{comment.author && (
+					<>
+						<img
+							src={comment.author.avatarUrl}
+							alt={comment.author.login}
+							className="size-5 rounded-full border border-border"
+						/>
+						<span className="text-xs font-medium">{comment.author.login}</span>
+					</>
+				)}
+				<span className="text-xs text-muted-foreground">
+					{formatRelativeTime(comment.createdAt)}
+				</span>
+			</div>
+			<div className="text-xs">
+				<Markdown>{comment.body}</Markdown>
+			</div>
+		</div>
+	);
+}
+
+function PendingCommentBubble({ comment }: { comment: PendingComment }) {
+	const isMultiLine =
+		comment.startLine != null && comment.startLine !== comment.line;
+
+	return (
+		<div className="mx-2 my-1 rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3">
+			<div className="mb-1 flex items-center gap-1.5 text-xs text-yellow-600 dark:text-yellow-400">
+				<CommentIcon size={12} strokeWidth={2} />
+				<span className="font-medium">
+					Pending
+					{isMultiLine ? ` (lines ${comment.startLine}–${comment.line})` : ""}
+				</span>
+			</div>
+			<div className="text-xs">
+				<Markdown>{comment.body}</Markdown>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/review/review-file-tree.tsx b/apps/dashboard/src/components/pulls/review/review-file-tree.tsx
new file mode 100644
index 0000000..3e01e54
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/review/review-file-tree.tsx
@@ -0,0 +1,97 @@
+import { FileIcon, FolderIcon } from "@diffkit/icons";
+import { cn } from "@diffkit/ui/lib/utils";
+import { useState } from "react";
+import type { FileTreeNode } from "./review-types";
+
+export function ReviewFileTreeNode({
+	node,
+	depth,
+	activeFile,
+	onFileClick,
+}: {
+	node: FileTreeNode;
+	depth: number;
+	activeFile: string | null;
+	onFileClick: (path: string) => void;
+}) {
+	const [isOpen, setIsOpen] = useState(true);
+
+	if (node.type === "directory") {
+		return (
+			<div>
+				<button
+					type="button"
+					className="flex w-full items-center gap-1.5 px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground"
+					style={{ paddingLeft: `${depth * 12 + 12}px` }}
+					onClick={() => setIsOpen(!isOpen)}
+				>
+					<svg
+						aria-hidden="true"
+						className={cn(
+							"size-3 shrink-0 text-muted-foreground/60 transition-transform",
+							isOpen && "rotate-90",
+						)}
+						viewBox="0 0 16 16"
+						fill="currentColor"
+					>
+						<path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
+					</svg>
+					<FolderIcon
+						size={14}
+						strokeWidth={2}
+						className="shrink-0 text-muted-foreground"
+					/>
+					<span className="truncate font-medium">{node.name}</span>
+				</button>
+				{isOpen && (
+					<div>
+						{node.children.map((child) => (
+							<ReviewFileTreeNode
+								key={child.path}
+								node={child}
+								depth={depth + 1}
+								activeFile={activeFile}
+								onFileClick={onFileClick}
+							/>
+						))}
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	const isActive = activeFile === node.path;
+
+	return (
+		<button
+			type="button"
+			className={cn(
+				"flex w-full items-center gap-1.5 px-3 py-1.5 text-[13px] transition-colors hover:bg-surface-1",
+				isActive ? "bg-surface-1 text-foreground" : "text-muted-foreground",
+			)}
+			style={{ paddingLeft: `${depth * 12 + 30}px` }}
+			onClick={() => onFileClick(node.path)}
+		>
+			<FileIcon
+				size={14}
+				strokeWidth={2}
+				className="shrink-0 text-muted-foreground"
+			/>
+			<span
+				className={cn("truncate", node.status === "removed" && "line-through")}
+			>
+				{node.name}
+			</span>
+			{(node.additions != null || node.deletions != null) && (
+				<span className="ml-auto flex shrink-0 items-center gap-1 font-mono tabular-nums">
+					{node.additions != null && node.additions > 0 && (
+						<span className="text-green-500">+{node.additions}</span>
+					)}
+					{node.deletions != null && node.deletions > 0 && (
+						<span className="text-red-500">-{node.deletions}</span>
+					)}
+				</span>
+			)}
+		</button>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/review/review-page.tsx b/apps/dashboard/src/components/pulls/review/review-page.tsx
new file mode 100644
index 0000000..629cbd4
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/review/review-page.tsx
@@ -0,0 +1,413 @@
+import { FileIcon, GitPullRequestIcon, SearchIcon } from "@diffkit/icons";
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "@diffkit/ui/components/resizable";
+import { cn } from "@diffkit/ui/lib/utils";
+import type { SelectedLineRange } from "@pierre/diffs";
+import type { DiffLineAnnotation } from "@pierre/diffs/react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi, Link } from "@tanstack/react-router";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getPrStateConfig } from "#/components/pulls/detail/pull-detail-header";
+import { submitPullReview } from "#/lib/github.functions";
+import {
+	githubPullFilesQueryOptions,
+	githubPullPageQueryOptions,
+	githubPullReviewCommentsQueryOptions,
+	githubQueryKeys,
+} from "#/lib/github.query";
+import type { PullReviewComment } from "#/lib/github.types";
+import { useHasMounted } from "#/lib/use-has-mounted";
+import { useRegisterTab } from "#/lib/use-register-tab";
+import { ReviewFileDiffBlock } from "./review-file-diff-block";
+import { ReviewFileTreeNode } from "./review-file-tree";
+import { ReviewSubmitPopover } from "./review-submit-popover";
+import type {
+	ActiveCommentForm,
+	FileTreeNode,
+	PendingComment,
+	ReviewEvent,
+} from "./review-types";
+import { buildFileTree, encodeFileId } from "./review-utils";
+
+const routeApi = getRouteApi("/_protected/$owner/$repo/review/$pullId");
+
+export function ReviewPage() {
+	const { user } = routeApi.useRouteContext();
+	const { owner, repo, pullId } = routeApi.useParams();
+	const pullNumber = Number(pullId);
+	const scope = { userId: user.id };
+	const hasMounted = useHasMounted();
+	const queryClient = useQueryClient();
+	const input = { owner, repo, pullNumber };
+
+	const pageQuery = useQuery({
+		...githubPullPageQueryOptions(scope, input),
+		enabled: hasMounted,
+	});
+
+	const filesQuery = useQuery({
+		...githubPullFilesQueryOptions(scope, input),
+		enabled: hasMounted,
+	});
+
+	const reviewCommentsQuery = useQuery({
+		...githubPullReviewCommentsQueryOptions(scope, input),
+		enabled: hasMounted,
+	});
+
+	const pr = pageQuery.data?.detail;
+	const files = filesQuery.data ?? [];
+	const reviewComments = reviewCommentsQuery.data ?? [];
+
+	const [diffStyle, setDiffStyle] = useState<"unified" | "split">("unified");
+	const [pendingComments, setPendingComments] = useState<PendingComment[]>([]);
+	const [activeCommentForm, setActiveCommentForm] =
+		useState<ActiveCommentForm | null>(null);
+	const [selectedLines, setSelectedLines] = useState<SelectedLineRange | null>(
+		null,
+	);
+	const [activeFile, setActiveFile] = useState<string | null>(null);
+	const [fileFilter, setFileFilter] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const diffPanelRef = useRef<HTMLDivElement>(null);
+
+	useRegisterTab(
+		pr
+			? {
+					type: "review",
+					title: pr.title,
+					number: pr.number,
+					url: `/${owner}/${repo}/review/${pullId}`,
+					repo: `${owner}/${repo}`,
+					iconColor: getPrStateConfig(pr).color,
+					additions: pr.additions,
+					deletions: pr.deletions,
+				}
+			: null,
+	);
+
+	const fileTree = useMemo(() => buildFileTree(files), [files]);
+
+	const filteredTree = useMemo(() => {
+		if (!fileFilter) return fileTree;
+		const lower = fileFilter.toLowerCase();
+
+		function filterNodes(nodes: FileTreeNode[]): FileTreeNode[] {
+			return nodes
+				.map((node) => {
+					if (node.type === "file") {
+						return node.name.toLowerCase().includes(lower) ? node : null;
+					}
+
+					const filteredChildren = filterNodes(node.children);
+					return filteredChildren.length > 0
+						? { ...node, children: filteredChildren }
+						: null;
+				})
+				.filter(Boolean) as FileTreeNode[];
+		}
+
+		return filterNodes(fileTree);
+	}, [fileFilter, fileTree]);
+
+	const scrollToFile = useCallback((filename: string) => {
+		const element = document.getElementById(encodeFileId(filename));
+		if (element) {
+			element.scrollIntoView({ behavior: "smooth", block: "start" });
+			setActiveFile(filename);
+		}
+	}, []);
+
+	useEffect(() => {
+		const panel = diffPanelRef.current;
+		if (!panel || files.length === 0) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						const filename = entry.target.getAttribute("data-filename");
+						if (filename) setActiveFile(filename);
+					}
+				}
+			},
+			{
+				root: panel,
+				rootMargin: "-10% 0px -80% 0px",
+				threshold: 0,
+			},
+		);
+
+		for (const file of files) {
+			const element = document.getElementById(encodeFileId(file.filename));
+			if (element) observer.observe(element);
+		}
+
+		return () => observer.disconnect();
+	}, [files]);
+
+	const annotationsByFile = useMemo(() => {
+		const map = new Map<string, DiffLineAnnotation<PullReviewComment>[]>();
+		for (const comment of reviewComments) {
+			if (comment.line == null) continue;
+			const existing = map.get(comment.path) ?? [];
+			existing.push({
+				side: comment.side === "LEFT" ? "deletions" : "additions",
+				lineNumber: comment.line,
+				metadata: comment,
+			});
+			map.set(comment.path, existing);
+		}
+		return map;
+	}, [reviewComments]);
+
+	const addPendingComment = useCallback((comment: PendingComment) => {
+		setPendingComments((previous) => [...previous, comment]);
+		setActiveCommentForm(null);
+	}, []);
+
+	const handleSubmitReview = useCallback(
+		async (body: string, event: ReviewEvent) => {
+			setIsSubmitting(true);
+			try {
+				const success = await submitPullReview({
+					data: {
+						owner,
+						repo,
+						pullNumber,
+						body,
+						event,
+						comments: pendingComments.map((comment) => ({
+							path: comment.path,
+							line: comment.line,
+							side: comment.side,
+							body: comment.body,
+							...(comment.startLine != null &&
+							comment.startLine !== comment.line
+								? {
+										startLine: comment.startLine,
+										startSide: comment.startSide ?? comment.side,
+									}
+								: {}),
+						})),
+					},
+				});
+
+				if (success) {
+					setPendingComments([]);
+					void queryClient.invalidateQueries({
+						queryKey: githubQueryKeys.all,
+					});
+				}
+			} finally {
+				setIsSubmitting(false);
+			}
+		},
+		[owner, pendingComments, pullNumber, queryClient, repo],
+	);
+
+	if (pageQuery.error) throw pageQuery.error;
+
+	if (!pr) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<div className="size-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+			</div>
+		);
+	}
+
+	const stateConfig = getPrStateConfig(pr);
+	const StateIcon = stateConfig.icon;
+	const totalAdditions = files.reduce((sum, file) => sum + file.additions, 0);
+	const totalDeletions = files.reduce((sum, file) => sum + file.deletions, 0);
+
+	return (
+		<div className="flex h-full flex-col">
+			<div className="flex shrink-0 items-center gap-3 border-b bg-surface-0 px-4 py-2">
+				<Link
+					to="/$owner/$repo/pull/$pullId"
+					params={{ owner, repo, pullId }}
+					className="flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
+				>
+					<GitPullRequestIcon size={14} strokeWidth={2} />
+					<span>#{pr.number}</span>
+				</Link>
+
+				<div className="mx-1 h-4 w-px bg-border" />
+
+				<div className="flex min-w-0 items-center gap-2">
+					<div className={cn("shrink-0", stateConfig.color)}>
+						<StateIcon size={14} strokeWidth={2} />
+					</div>
+					<span className="truncate text-sm font-medium">{pr.title}</span>
+				</div>
+
+				<div className="ml-auto flex items-center gap-3">
+					<div className="flex items-center gap-2 text-xs text-muted-foreground">
+						<span className="flex items-center gap-1">
+							<FileIcon size={13} strokeWidth={2} />
+							<span className="font-mono tabular-nums font-medium text-foreground">
+								{files.length}
+							</span>{" "}
+							{files.length === 1 ? "file" : "files"}
+						</span>
+						<span className="font-mono tabular-nums font-medium text-green-500">
+							+{totalAdditions}
+						</span>
+						<span className="font-mono tabular-nums font-medium text-red-500">
+							-{totalDeletions}
+						</span>
+					</div>
+
+					<div className="h-4 w-px bg-border" />
+
+					<div className="flex items-center rounded-md border bg-surface-1">
+						<button
+							type="button"
+							className={cn(
+								"rounded-l-md px-2.5 py-1 text-xs font-medium transition-colors",
+								diffStyle === "unified"
+									? "bg-surface-0 text-foreground shadow-sm"
+									: "text-muted-foreground hover:text-foreground",
+							)}
+							onClick={() => setDiffStyle("unified")}
+						>
+							Unified
+						</button>
+						<button
+							type="button"
+							className={cn(
+								"rounded-r-md px-2.5 py-1 text-xs font-medium transition-colors",
+								diffStyle === "split"
+									? "bg-surface-0 text-foreground shadow-sm"
+									: "text-muted-foreground hover:text-foreground",
+							)}
+							onClick={() => setDiffStyle("split")}
+						>
+							Split
+						</button>
+					</div>
+
+					<div className="h-4 w-px bg-border" />
+
+					<ReviewSubmitPopover
+						pendingCount={pendingComments.length}
+						isSubmitting={isSubmitting}
+						onSubmit={handleSubmitReview}
+					/>
+				</div>
+			</div>
+
+			<ResizablePanelGroup direction="horizontal" className="flex-1">
+				<ResizablePanel
+					defaultSize={20}
+					minSize={12}
+					maxSize={40}
+					className="border-r"
+				>
+					<div className="flex h-full flex-col">
+						<div className="px-3 py-2">
+							<div className="relative flex items-center rounded-md border bg-surface-0 px-2.5 py-1.5">
+								<SearchIcon
+									size={13}
+									strokeWidth={2}
+									className="shrink-0 text-muted-foreground"
+								/>
+								<input
+									type="text"
+									placeholder="Filter files..."
+									value={fileFilter}
+									onChange={(event) => setFileFilter(event.target.value)}
+									className="ml-2 w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+								/>
+							</div>
+						</div>
+
+						<div className="flex-1 overflow-auto py-1">
+							{filteredTree.map((node) => (
+								<ReviewFileTreeNode
+									key={node.path}
+									node={node}
+									depth={0}
+									activeFile={activeFile}
+									onFileClick={scrollToFile}
+								/>
+							))}
+						</div>
+
+						<div className="border-t px-3 py-2 text-xs text-muted-foreground">
+							{files.length} {files.length === 1 ? "file" : "files"} changed
+						</div>
+					</div>
+				</ResizablePanel>
+
+				<ResizableHandle />
+
+				<ResizablePanel defaultSize={80}>
+					<div ref={diffPanelRef} className="h-full overflow-auto">
+						<div className="flex flex-col gap-4 p-4">
+							{files.map((file) => (
+								<ReviewFileDiffBlock
+									key={file.filename}
+									file={file}
+									diffStyle={diffStyle}
+									annotations={annotationsByFile.get(file.filename) ?? []}
+									pendingComments={pendingComments.filter(
+										(comment) => comment.path === file.filename,
+									)}
+									activeCommentForm={
+										activeCommentForm?.path === file.filename
+											? activeCommentForm
+											: null
+									}
+									selectedLines={
+										activeCommentForm?.path === file.filename
+											? selectedLines
+											: null
+									}
+									onGutterClick={(range) => {
+										const side = range.side === "deletions" ? "LEFT" : "RIGHT";
+										const isMultiLine = range.start !== range.end;
+										setActiveCommentForm({
+											path: file.filename,
+											line: Math.max(range.start, range.end),
+											side,
+											...(isMultiLine
+												? {
+														startLine: Math.min(range.start, range.end),
+														startSide:
+															(range.endSide ?? range.side) === "deletions"
+																? "LEFT"
+																: "RIGHT",
+													}
+												: {}),
+										});
+										setSelectedLines(range);
+									}}
+									onCancelComment={() => {
+										setActiveCommentForm(null);
+										setSelectedLines(null);
+									}}
+									onAddComment={(comment) => {
+										addPendingComment(comment);
+										setSelectedLines(null);
+									}}
+								/>
+							))}
+
+							{files.length === 0 && !filesQuery.isLoading && (
+								<div className="flex items-center justify-center py-20 text-sm text-muted-foreground">
+									No files changed in this pull request.
+								</div>
+							)}
+						</div>
+					</div>
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</div>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/review/review-submit-popover.tsx b/apps/dashboard/src/components/pulls/review/review-submit-popover.tsx
new file mode 100644
index 0000000..fa1a7f8
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/review/review-submit-popover.tsx
@@ -0,0 +1,161 @@
+import {
+	CloseIcon,
+	CommentIcon,
+	GitBranchIcon,
+	TickIcon,
+} from "@diffkit/icons";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@diffkit/ui/components/popover";
+import { cn } from "@diffkit/ui/lib/utils";
+import { useState } from "react";
+import type { ReviewEvent } from "./review-types";
+
+export function ReviewSubmitPopover({
+	pendingCount,
+	isSubmitting,
+	onSubmit,
+}: {
+	pendingCount: number;
+	isSubmitting: boolean;
+	onSubmit: (body: string, event: ReviewEvent) => void;
+}) {
+	const [body, setBody] = useState("");
+	const [event, setEvent] = useState<ReviewEvent>("COMMENT");
+	const [isOpen, setIsOpen] = useState(false);
+
+	const handleSubmit = () => {
+		onSubmit(body, event);
+		setBody("");
+		setIsOpen(false);
+	};
+
+	const reviewOptions: Array<{
+		value: ReviewEvent;
+		label: string;
+		description: string;
+		icon: typeof CommentIcon;
+		color: string;
+	}> = [
+		{
+			value: "COMMENT",
+			label: "Comment",
+			description: "Submit general feedback without explicit approval.",
+			icon: CommentIcon,
+			color: "text-foreground",
+		},
+		{
+			value: "APPROVE",
+			label: "Approve",
+			description: "Submit feedback and approve merging these changes.",
+			icon: TickIcon,
+			color: "text-green-500",
+		},
+		{
+			value: "REQUEST_CHANGES",
+			label: "Request changes",
+			description: "Submit feedback suggesting changes.",
+			icon: GitBranchIcon,
+			color: "text-red-500",
+		},
+	];
+
+	return (
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					className="flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700"
+				>
+					Submit review
+					{pendingCount > 0 && (
+						<span className="flex size-4 items-center justify-center rounded-full bg-white/20 text-[10px] font-bold">
+							{pendingCount}
+						</span>
+					)}
+				</button>
+			</PopoverTrigger>
+
+			<PopoverContent align="end" className="w-96 p-0" sideOffset={8}>
+				<div className="flex flex-col">
+					<div className="flex items-center justify-between border-b px-4 py-3">
+						<h3 className="text-sm font-semibold">Finish your review</h3>
+						<button
+							type="button"
+							className="text-muted-foreground transition-colors hover:text-foreground"
+							onClick={() => setIsOpen(false)}
+						>
+							<CloseIcon size={14} strokeWidth={2} />
+						</button>
+					</div>
+
+					<div className="p-4">
+						<textarea
+							value={body}
+							onChange={(event) => setBody(event.target.value)}
+							placeholder="Leave a comment"
+							className="min-h-[80px] w-full resize-y rounded-md border bg-background px-3 py-2 text-xs outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+						/>
+					</div>
+
+					<div className="flex flex-col gap-1 border-t px-4 py-3">
+						{reviewOptions.map((option) => {
+							const Icon = option.icon;
+							return (
+								<label
+									key={option.value}
+									className="flex cursor-pointer items-start gap-3 rounded-md p-2 transition-colors hover:bg-surface-1"
+								>
+									<input
+										type="radio"
+										name="review-event"
+										value={option.value}
+										checked={event === option.value}
+										onChange={() => setEvent(option.value)}
+										className="mt-0.5"
+									/>
+									<div className="flex flex-col gap-0.5">
+										<span
+											className={cn(
+												"flex items-center gap-1.5 text-xs font-semibold",
+												option.color,
+											)}
+										>
+											<Icon size={13} strokeWidth={2} />
+											{option.label}
+										</span>
+										<span className="text-[11px] text-muted-foreground">
+											{option.description}
+										</span>
+									</div>
+								</label>
+							);
+						})}
+					</div>
+
+					<div className="flex items-center justify-between border-t px-4 py-3">
+						<button
+							type="button"
+							onClick={() => setIsOpen(false)}
+							className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onClick={handleSubmit}
+							disabled={isSubmitting}
+							className="rounded-md bg-green-600 px-4 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
+						>
+							{isSubmitting
+								? "Submitting..."
+								: `Submit review${pendingCount > 0 ? ` (${pendingCount})` : ""}`}
+						</button>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}
diff --git a/apps/dashboard/src/components/pulls/review/review-types.ts b/apps/dashboard/src/components/pulls/review/review-types.ts
new file mode 100644
index 0000000..9c1f56b
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/review/review-types.ts
@@ -0,0 +1,25 @@
+import type { PullFile, PullReviewComment } from "#/lib/github.types";
+
+export type PendingComment = {
+	path: string;
+	line: number;
+	startLine?: number;
+	side: "LEFT" | "RIGHT";
+	startSide?: "LEFT" | "RIGHT";
+	body: string;
+};
+
+export type ActiveCommentForm = Omit<PendingComment, "body">;
+
+export type ReviewAnnotation = PullReviewComment | PendingComment;
+export type ReviewEvent = "APPROVE" | "REQUEST_CHANGES" | "COMMENT";
+
+export type FileTreeNode = {
+	name: string;
+	path: string;
+	type: "file" | "directory";
+	status?: PullFile["status"];
+	additions?: number;
+	deletions?: number;
+	children: FileTreeNode[];
+};
diff --git a/apps/dashboard/src/components/pulls/review/review-utils.ts b/apps/dashboard/src/components/pulls/review/review-utils.ts
new file mode 100644
index 0000000..f03db50
--- /dev/null
+++ b/apps/dashboard/src/components/pulls/review/review-utils.ts
@@ -0,0 +1,78 @@
+import type { PullFile } from "#/lib/github.types";
+import type { FileTreeNode } from "./review-types";
+
+export function buildFileTree(files: PullFile[]): FileTreeNode[] {
+	const root: FileTreeNode = {
+		name: "",
+		path: "",
+		type: "directory",
+		children: [],
+	};
+
+	for (const file of files) {
+		const parts = file.filename.split("/");
+		let current = root;
+
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			const isFile = i === parts.length - 1;
+
+			let child = current.children.find((node) => node.name === part);
+			if (!child) {
+				child = {
+					name: part,
+					path: parts.slice(0, i + 1).join("/"),
+					type: isFile ? "file" : "directory",
+					status: isFile ? file.status : undefined,
+					additions: isFile ? file.additions : undefined,
+					deletions: isFile ? file.deletions : undefined,
+					children: [],
+				};
+				current.children.push(child);
+			}
+			current = child;
+		}
+	}
+
+	function collapse(node: FileTreeNode): FileTreeNode {
+		if (
+			node.type === "directory" &&
+			node.children.length === 1 &&
+			node.children[0].type === "directory"
+		) {
+			const child = node.children[0];
+			return collapse({
+				...child,
+				name: `${node.name}/${child.name}`,
+				children: child.children,
+			});
+		}
+
+		return {
+			...node,
+			children: node.children.map(collapse),
+		};
+	}
+
+	function sortTree(nodes: FileTreeNode[]): FileTreeNode[] {
+		return nodes
+			.map((node) => ({ ...node, children: sortTree(node.children) }))
+			.sort((a, b) => {
+				if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+				return a.name.localeCompare(b.name);
+			});
+	}
+
+	return sortTree(root.children.map(collapse));
+}
+
+export function buildPatchString(file: PullFile): string {
+	if (!file.patch) return "";
+	const source = file.previousFilename ?? file.filename;
+	const header = `diff --git a/${source} b/${file.filename}\n--- a/${source}\n+++ b/${file.filename}\n`;
+	return header + file.patch;
+}
+
+export function encodeFileId(filename: string): string {
+	return `diff-${filename.replaceAll("/", "-").replaceAll(".", "-")}`;
+}
diff --git a/apps/dashboard/src/lib/format-relative-time.ts b/apps/dashboard/src/lib/format-relative-time.ts
new file mode 100644
index 0000000..6c3d312
--- /dev/null
+++ b/apps/dashboard/src/lib/format-relative-time.ts
@@ -0,0 +1,14 @@
+export function formatRelativeTime(dateStr: string): string {
+	const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 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 < 30) return `${days}d ago`;
+	const months = Math.floor(days / 30);
+	if (months < 12) return `${months}mo ago`;
+	const years = Math.floor(months / 12);
+	return `${years}y ago`;
+}
diff --git a/apps/dashboard/src/routes/_protected/$owner/$repo/issues.$issueId.tsx b/apps/dashboard/src/routes/_protected/$owner/$repo/issues.$issueId.tsx
index f6e7b66..323fc6d 100644
--- a/apps/dashboard/src/routes/_protected/$owner/$repo/issues.$issueId.tsx
+++ b/apps/dashboard/src/routes/_protected/$owner/$repo/issues.$issueId.tsx
@@ -1,25 +1,7 @@
-import { IssuesIcon } from "@diffkit/icons";
-import { Markdown } from "@diffkit/ui/components/markdown";
-import { Skeleton } from "@diffkit/ui/components/skeleton";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@diffkit/ui/components/tooltip";
-import { cn } from "@diffkit/ui/lib/utils";
-import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { useState } from "react";
-import { LabelsSection } from "#/components/labels-section";
-import { formatRelativeTime } from "#/components/pulls/pull-request-row";
-import {
-	githubIssuePageQueryOptions,
-	githubQueryKeys,
-} from "#/lib/github.query";
-import type { GitHubActor, IssueDetail } from "#/lib/github.types";
+import { createFileRoute } from "@tanstack/react-router";
+import { IssueDetailPage } from "#/components/issues/detail/issue-detail-page";
+import { githubIssuePageQueryOptions } from "#/lib/github.query";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
-import { useHasMounted } from "#/lib/use-has-mounted";
-import { useRegisterTab } from "#/lib/use-register-tab";
 
 export const Route = createFileRoute(
 	"/_protected/$owner/$repo/issues/$issueId",
@@ -60,470 +42,3 @@ export const Route = createFileRoute(
 	},
 	component: IssueDetailPage,
 });
-
-function getIssueStateConfig(issue: IssueDetail) {
-	if (issue.state === "closed") {
-		if (issue.stateReason === "not_planned") {
-			return {
-				color: "text-muted-foreground",
-				label: "Closed",
-				badgeClass: "bg-muted text-muted-foreground",
-			};
-		}
-		return {
-			color: "text-purple-500",
-			label: "Closed",
-			badgeClass: "bg-purple-500/10 text-purple-500",
-		};
-	}
-	return {
-		color: "text-green-500",
-		label: "Open",
-		badgeClass: "bg-green-500/10 text-green-500",
-	};
-}
-
-function IssueDetailPage() {
-	const { user } = Route.useRouteContext();
-	const { owner, repo, issueId } = Route.useParams();
-	const issueNumber = Number(issueId);
-	const scope = { userId: user.id };
-	const hasMounted = useHasMounted();
-
-	const pageQuery = useQuery({
-		...githubIssuePageQueryOptions(scope, { owner, repo, issueNumber }),
-		enabled: hasMounted,
-	});
-
-	const issue = pageQuery.data?.detail;
-	const comments = pageQuery.data?.comments;
-
-	useRegisterTab(
-		issue
-			? {
-					type: "issue",
-					title: issue.title,
-					number: issue.number,
-					url: `/${owner}/${repo}/issues/${issueId}`,
-					repo: `${owner}/${repo}`,
-					iconColor: getIssueStateConfig(issue).color,
-				}
-			: null,
-	);
-
-	if (pageQuery.error) throw pageQuery.error;
-	if (!issue) return <IssueDetailPageSkeleton />;
-
-	const stateConfig = getIssueStateConfig(issue);
-
-	return (
-		<div className="h-full overflow-auto">
-			<div className="mx-auto grid max-w-7xl gap-16 px-6 py-10 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
-				{/* Left: Issue content */}
-				<div className="flex min-w-0 flex-col gap-8">
-					{/* Header */}
-					<div className="flex flex-col gap-3">
-						<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-							<Link
-								to="/issues"
-								className="transition-colors hover:text-foreground"
-							>
-								Issues
-							</Link>
-							<span>/</span>
-							<span>
-								{owner}/{repo}
-							</span>
-							<span>/</span>
-							<span>#{issue.number}</span>
-						</div>
-
-						<div className="flex items-start gap-3">
-							<div className={cn("mt-1 shrink-0", stateConfig.color)}>
-								<IssuesIcon size={20} strokeWidth={2} />
-							</div>
-							<div className="flex min-w-0 flex-col gap-2">
-								<h1 className="text-xl font-semibold tracking-tight">
-									{issue.title}
-								</h1>
-								<div className="flex flex-wrap items-center gap-2">
-									<span
-										className={cn(
-											"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
-											stateConfig.badgeClass,
-										)}
-									>
-										{stateConfig.label}
-									</span>
-									{issue.author && (
-										<span className="flex items-center gap-1.5 text-sm text-muted-foreground">
-											<img
-												src={issue.author.avatarUrl}
-												alt={issue.author.login}
-												className="size-4 rounded-full border border-border"
-											/>
-											<span className="font-medium text-foreground">
-												{issue.author.login}
-											</span>
-											<span>opened {formatRelativeTime(issue.createdAt)}</span>
-										</span>
-									)}
-								</div>
-							</div>
-						</div>
-					</div>
-
-					{/* Body */}
-					{issue.body ? (
-						<div className="rounded-lg border bg-surface-0 p-5">
-							<Markdown>{issue.body}</Markdown>
-						</div>
-					) : (
-						<div className="rounded-lg border bg-surface-0 p-5">
-							<p className="text-sm text-muted-foreground italic">
-								No description provided.
-							</p>
-						</div>
-					)}
-
-					{/* Activity / Comments */}
-					<div className="flex flex-col">
-						<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
-							<h2 className="text-xs font-medium">Activity</h2>
-							{comments && (
-								<span className="text-xs tabular-nums text-muted-foreground">
-									{comments.length}
-								</span>
-							)}
-						</div>
-
-						{pageQuery.isFetching && !comments && (
-							<div className="flex items-center justify-center py-8">
-								<svg
-									className="size-4 animate-spin text-muted-foreground"
-									viewBox="0 0 16 16"
-									fill="none"
-									aria-hidden="true"
-								>
-									<circle
-										cx="8"
-										cy="8"
-										r="6.5"
-										stroke="currentColor"
-										strokeWidth="2"
-										opacity="0.25"
-									/>
-									<path
-										d="M14.5 8a6.5 6.5 0 0 0-6.5-6.5"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-									/>
-								</svg>
-							</div>
-						)}
-
-						{comments && comments.length === 0 && (
-							<p className="py-4 text-sm text-muted-foreground">
-								No comments yet.
-							</p>
-						)}
-
-						{comments && comments.length > 0 && (
-							<div className="relative flex flex-col pl-8 before:absolute before:left-4 before:top-0 before:h-full before:w-px before:bg-[linear-gradient(to_bottom,var(--color-border)_80%,transparent)]">
-								{comments.map((comment, i) => (
-									<div
-										key={comment.id}
-										className={cn(
-											"flex flex-col gap-1 py-4",
-											i === 0 && "pt-5",
-										)}
-									>
-										<div className="flex items-center gap-1.5">
-											{comment.author ? (
-												<img
-													src={comment.author.avatarUrl}
-													alt={comment.author.login}
-													className="size-4 rounded-full border border-border"
-												/>
-											) : (
-												<div className="size-4 rounded-full bg-surface-2" />
-											)}
-											<span className="text-xs font-medium">
-												{comment.author?.login ?? "Unknown"}
-											</span>
-											<span className="text-xs text-muted-foreground">
-												{formatRelativeTime(comment.createdAt)}
-											</span>
-										</div>
-										<Markdown className="text-muted-foreground">
-											{comment.body}
-										</Markdown>
-									</div>
-								))}
-							</div>
-						)}
-
-						{/* Comment input */}
-						<div className="mt-6">
-							<CommentBox />
-						</div>
-					</div>
-				</div>
-
-				{/* Right sidebar: Metadata */}
-				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
-					{/* Assignees */}
-					<SidebarSection title="Assignees">
-						{issue.assignees.length > 0 ? (
-							<div className="flex flex-col gap-2">
-								{issue.assignees.map((assignee) => (
-									<div key={assignee.login} className="flex items-center gap-2">
-										<img
-											src={assignee.avatarUrl}
-											alt={assignee.login}
-											className="size-5 rounded-full border border-border"
-										/>
-										<span className="text-sm">{assignee.login}</span>
-									</div>
-								))}
-							</div>
-						) : (
-							<p className="text-xs text-muted-foreground">No one assigned</p>
-						)}
-					</SidebarSection>
-
-					{/* Labels */}
-					<LabelsSection
-						currentLabels={issue.labels}
-						owner={owner}
-						repo={repo}
-						issueNumber={issueNumber}
-						scope={scope}
-						pageQueryKey={githubQueryKeys.issues.page(scope, {
-							owner,
-							repo,
-							issueNumber,
-						})}
-					/>
-
-					{/* Participants */}
-					<SidebarSection title="Participants">
-						<ParticipantsList issue={issue} comments={comments ?? []} />
-					</SidebarSection>
-
-					{/* Milestone */}
-					{issue.milestone && (
-						<SidebarSection title="Milestone">
-							<div className="flex flex-col gap-1 text-xs">
-								<span className="font-medium text-foreground">
-									{issue.milestone.title}
-								</span>
-								{issue.milestone.dueOn && (
-									<span className="text-muted-foreground">
-										Due {formatRelativeTime(issue.milestone.dueOn)}
-									</span>
-								)}
-							</div>
-						</SidebarSection>
-					)}
-
-					{/* Details */}
-					<SidebarSection title="Details">
-						<div className="flex flex-col gap-2 text-xs">
-							<DetailRow label="Created">
-								{formatRelativeTime(issue.createdAt)}
-							</DetailRow>
-							<DetailRow label="Updated">
-								{formatRelativeTime(issue.updatedAt)}
-							</DetailRow>
-							{issue.closedAt && (
-								<DetailRow label="Closed">
-									{formatRelativeTime(issue.closedAt)}
-								</DetailRow>
-							)}
-							<DetailRow label="Comments">
-								<span className="tabular-nums">{issue.comments}</span>
-							</DetailRow>
-						</div>
-					</SidebarSection>
-				</aside>
-			</div>
-		</div>
-	);
-}
-
-function SidebarSection({
-	title,
-	children,
-}: {
-	title: string;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="flex flex-col gap-2.5">
-			<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-				{title}
-			</h3>
-			{children}
-		</div>
-	);
-}
-
-function DetailRow({
-	label,
-	children,
-}: {
-	label: string;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="flex items-center justify-between gap-4">
-			<span className="text-muted-foreground">{label}</span>
-			<span className="text-foreground">{children}</span>
-		</div>
-	);
-}
-
-function ParticipantsList({
-	issue,
-	comments,
-}: {
-	issue: IssueDetail;
-	comments: Array<{ author: GitHubActor | null }>;
-}) {
-	const seen = new Set<string>();
-	const participants: GitHubActor[] = [];
-
-	const addActor = (actor: GitHubActor | null) => {
-		if (actor && !seen.has(actor.login)) {
-			seen.add(actor.login);
-			participants.push(actor);
-		}
-	};
-
-	addActor(issue.author);
-	for (const assignee of issue.assignees) {
-		addActor(assignee);
-	}
-	for (const comment of comments) {
-		addActor(comment.author);
-	}
-
-	if (participants.length === 0) {
-		return <p className="text-xs text-muted-foreground">No participants yet</p>;
-	}
-
-	return (
-		<div className="group/participants flex items-center">
-			{participants.map((actor, i) => (
-				<Tooltip key={actor.login}>
-					<TooltipTrigger asChild>
-						<img
-							src={actor.avatarUrl}
-							alt={actor.login}
-							className="size-6 rounded-full border-2 border-card transition-[margin] duration-200 group-hover/participants:ml-0"
-							style={i > 0 ? { marginLeft: -6 } : undefined}
-						/>
-					</TooltipTrigger>
-					<TooltipContent>{actor.login}</TooltipContent>
-				</Tooltip>
-			))}
-		</div>
-	);
-}
-
-function CommentBox() {
-	const [value, setValue] = useState("");
-
-	return (
-		<div className="flex flex-col gap-2 rounded-lg border bg-surface-0 p-3">
-			<textarea
-				value={value}
-				onChange={(e) => setValue(e.target.value)}
-				placeholder="Leave a comment..."
-				rows={3}
-				className="w-full resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-			/>
-			<div className="flex justify-end">
-				<button
-					type="button"
-					disabled={!value.trim()}
-					className="rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity disabled:opacity-40"
-				>
-					Send
-				</button>
-			</div>
-		</div>
-	);
-}
-
-function IssueDetailPageSkeleton() {
-	return (
-		<div className="h-full overflow-auto">
-			<div className="mx-auto grid max-w-7xl gap-16 px-6 py-10 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
-				<div className="flex min-w-0 flex-col gap-8">
-					<div className="flex flex-col gap-3">
-						<Skeleton className="h-4 w-48 rounded-md" />
-						<div className="flex items-start gap-3">
-							<Skeleton className="mt-1 size-5 rounded-full" />
-							<div className="flex min-w-0 flex-1 flex-col gap-2">
-								<Skeleton className="h-8 w-3/4 rounded-md" />
-								<div className="flex gap-2">
-									<Skeleton className="h-6 w-16 rounded-full" />
-									<Skeleton className="h-6 w-48 rounded-full" />
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className="flex flex-wrap gap-1.5">
-						<Skeleton className="h-6 w-20 rounded-full" />
-						<Skeleton className="h-6 w-24 rounded-full" />
-					</div>
-
-					<div className="rounded-lg border bg-surface-0 p-5">
-						<div className="flex flex-col gap-2">
-							<Skeleton className="h-4 w-full rounded-md" />
-							<Skeleton className="h-4 w-[92%] rounded-md" />
-							<Skeleton className="h-4 w-[78%] rounded-md" />
-							<Skeleton className="h-4 w-[66%] rounded-md" />
-						</div>
-					</div>
-
-					<div className="flex flex-col">
-						<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
-							<Skeleton className="h-4 w-14 rounded-md" />
-							<Skeleton className="h-4 w-6 rounded-md" />
-						</div>
-						<div className="relative flex flex-col gap-5 py-5 pl-8 before:absolute before:left-4 before:top-0 before:h-full before:w-px before:bg-[linear-gradient(to_bottom,var(--color-border)_80%,transparent)]">
-							{["activity-1", "activity-2", "activity-3"].map((key) => (
-								<div key={key} className="flex flex-col gap-2">
-									<div className="flex items-center gap-2">
-										<Skeleton className="size-4 rounded-full" />
-										<Skeleton className="h-4 w-24 rounded-md" />
-										<Skeleton className="h-4 w-16 rounded-md" />
-									</div>
-									<Skeleton className="h-4 w-[88%] rounded-md" />
-									<Skeleton className="h-4 w-[72%] rounded-md" />
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-
-				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
-					{["meta-1", "meta-2", "meta-3", "meta-4"].map((key) => (
-						<div key={key} className="flex flex-col gap-2.5">
-							<Skeleton className="h-4 w-24 rounded-md" />
-							<div className="flex flex-col gap-2">
-								<Skeleton className="h-4 w-full rounded-md" />
-								<Skeleton className="h-4 w-[85%] rounded-md" />
-							</div>
-						</div>
-					))}
-				</aside>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx b/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
index 990afc9..ca5e369 100644
--- a/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
+++ b/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
@@ -1,76 +1,7 @@
-import {
-	CalendarIcon,
-	CheckIcon,
-	ClockIcon,
-	CloseIcon,
-	CommentIcon,
-	CopyIcon,
-	EditIcon,
-	FileIcon,
-	GitCommitIcon,
-	GitMergeIcon,
-	GitPullRequestClosedIcon,
-	GitPullRequestDraftIcon,
-	GitPullRequestIcon,
-	MessageIcon,
-	MoreHorizontalIcon,
-	PlusSignIcon,
-	ReviewsIcon,
-	SearchIcon,
-} from "@diffkit/icons";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@diffkit/ui/components/dropdown-menu";
-import { highlightCode, Markdown } from "@diffkit/ui/components/markdown";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@diffkit/ui/components/popover";
-import { Skeleton } from "@diffkit/ui/components/skeleton";
-import { Spinner } from "@diffkit/ui/components/spinner";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@diffkit/ui/components/tooltip";
-import { cn } from "@diffkit/ui/lib/utils";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { LabelsSection } from "#/components/labels-section";
-import { formatRelativeTime } from "#/components/pulls/pull-request-row";
-import {
-	removeReviewRequest,
-	requestPullReviewers,
-	updatePullBody,
-	updatePullBranch,
-} from "#/lib/github.functions";
-import {
-	githubOrgTeamsQueryOptions,
-	githubPullPageQueryOptions,
-	githubPullStatusQueryOptions,
-	githubQueryKeys,
-	githubRepoCollaboratorsQueryOptions,
-	githubViewerQueryOptions,
-} from "#/lib/github.query";
-import type {
-	GitHubActor,
-	PullComment,
-	PullCommit,
-	PullDetail,
-	PullPageData,
-	PullStatus,
-} from "#/lib/github.types";
-import { githubCachePolicy } from "#/lib/github-cache-policy";
+import { createFileRoute } from "@tanstack/react-router";
+import { PullDetailPage } from "#/components/pulls/detail/pull-detail-page";
+import { githubPullPageQueryOptions } from "#/lib/github.query";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
-import { useHasMounted } from "#/lib/use-has-mounted";
-import { useOptimisticMutation } from "#/lib/use-optimistic-mutation";
-import { useRegisterTab } from "#/lib/use-register-tab";
 
 export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
 	loader: async ({ context, params }) => {
@@ -109,1771 +40,3 @@ export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
 	},
 	component: PullDetailPage,
 });
-
-function getPrStateConfig(pr: PullDetail) {
-	if (pr.isDraft) {
-		return {
-			icon: GitPullRequestDraftIcon,
-			color: "text-muted-foreground",
-			label: "Draft",
-			badgeClass: "bg-muted text-muted-foreground",
-		};
-	}
-	if (pr.isMerged || pr.mergedAt) {
-		return {
-			icon: GitMergeIcon,
-			color: "text-purple-500",
-			label: "Merged",
-			badgeClass: "bg-purple-500/10 text-purple-500",
-		};
-	}
-	if (pr.state === "closed") {
-		return {
-			icon: GitPullRequestClosedIcon,
-			color: "text-red-500",
-			label: "Closed",
-			badgeClass: "bg-red-500/10 text-red-500",
-		};
-	}
-	return {
-		icon: GitPullRequestIcon,
-		color: "text-green-500",
-		label: "Open",
-		badgeClass: "bg-green-500/10 text-green-500",
-	};
-}
-
-function PullDetailPage() {
-	const { user } = Route.useRouteContext();
-	const { owner, repo, pullId } = Route.useParams();
-	const pullNumber = Number(pullId);
-	const scope = { userId: user.id };
-	const hasMounted = useHasMounted();
-
-	const pageQuery = useQuery({
-		...githubPullPageQueryOptions(scope, { owner, repo, pullNumber }),
-		enabled: hasMounted,
-	});
-
-	const statusQuery = useQuery({
-		...githubPullStatusQueryOptions(scope, { owner, repo, pullNumber }),
-		enabled: hasMounted && pageQuery.data?.detail != null,
-		refetchOnWindowFocus: "always",
-		refetchInterval: githubCachePolicy.status.staleTimeMs,
-	});
-
-	const viewerQuery = useQuery({
-		...githubViewerQueryOptions(scope),
-		enabled: hasMounted,
-	});
-
-	const pr = pageQuery.data?.detail;
-	const comments = pageQuery.data?.comments;
-	const commits = pageQuery.data?.commits;
-	const status = statusQuery.data ?? null;
-	const viewer = viewerQuery.data ?? null;
-
-	useRegisterTab(
-		pr
-			? {
-					type: "pull",
-					title: pr.title,
-					number: pr.number,
-					url: `/${owner}/${repo}/pull/${pullId}`,
-					repo: `${owner}/${repo}`,
-					iconColor: getPrStateConfig(pr).color,
-				}
-			: null,
-	);
-
-	if (pageQuery.error) throw pageQuery.error;
-	if (!pr) return <PullDetailPageSkeleton />;
-
-	const stateConfig = getPrStateConfig(pr);
-	const StateIcon = stateConfig.icon;
-
-	return (
-		<div className="h-full overflow-auto">
-			<div className="mx-auto grid max-w-7xl gap-16 px-6 py-10 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
-				{/* Left: PR content */}
-				<div className="flex min-w-0 flex-col gap-8">
-					{/* Header */}
-					<div className="flex flex-col gap-3">
-						<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-							<Link
-								to="/pulls"
-								className="transition-colors hover:text-foreground"
-							>
-								Pull Requests
-							</Link>
-							<span>/</span>
-							<span>
-								{owner}/{repo}
-							</span>
-							<span>/</span>
-							<span>#{pr.number}</span>
-						</div>
-
-						<div className="flex items-start gap-3">
-							<div className={cn("mt-1 shrink-0", stateConfig.color)}>
-								<StateIcon size={20} strokeWidth={2} />
-							</div>
-							<div className="flex min-w-0 flex-col gap-2">
-								<h1 className="text-xl font-semibold tracking-tight">
-									{pr.title}
-								</h1>
-								<div className="flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground">
-									<span
-										className={cn(
-											"shrink-0 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
-											stateConfig.badgeClass,
-										)}
-									>
-										{stateConfig.label}
-									</span>
-									{pr.author && (
-										<>
-											<img
-												src={pr.author.avatarUrl}
-												alt={pr.author.login}
-												className="size-4 shrink-0 rounded-full border border-border"
-											/>
-											<span className="shrink-0 font-medium text-foreground">
-												{pr.author.login}
-											</span>
-											<span className="shrink-0">wants to merge into</span>
-											<CopyBadge value={pr.baseRefName} />
-											<span className="shrink-0">from</span>
-											<CopyBadge value={pr.headRefName} canTruncate />
-										</>
-									)}
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className="flex flex-col gap-2">
-						{/* Review request banner */}
-						{viewer &&
-							pr.requestedReviewers.some((r) => r.login === viewer.login) && (
-								<div className="flex items-center justify-between rounded-lg bg-yellow-500/15 px-4 py-2.5">
-									<span className="flex items-center gap-2 text-sm text-yellow-600 dark:text-yellow-400">
-										<ReviewsIcon size={15} strokeWidth={2} />
-										Your review has been requested
-									</span>
-									<Link
-										to="/$owner/$repo/review/$pullId"
-										params={{ owner, repo, pullId }}
-										className="rounded-md bg-yellow-600 px-3 py-1 text-xs font-medium text-white transition-opacity hover:opacity-90 dark:bg-yellow-500 dark:text-black"
-									>
-										Review changes
-									</Link>
-								</div>
-							)}
-
-						{/* Stats bar */}
-						<div className="flex items-center gap-3 rounded-lg bg-surface-1 px-4 py-2.5 text-sm text-muted-foreground">
-							<span className="flex items-center gap-1.5">
-								<GitCommitIcon size={15} strokeWidth={2} />
-								<span className="tabular-nums font-medium text-foreground">
-									{pr.commits}
-								</span>{" "}
-								{pr.commits === 1 ? "commit" : "commits"}
-							</span>
-							<span className="text-muted-foreground/50">·</span>
-							<span className="flex items-center gap-1.5">
-								<FileIcon size={15} strokeWidth={2} />
-								<span className="tabular-nums font-medium text-foreground">
-									{pr.changedFiles}
-								</span>{" "}
-								{pr.changedFiles === 1 ? "file" : "files"} changed
-							</span>
-							<span className="ml-auto flex items-center gap-3 text-xs">
-								<span className="flex items-center gap-1.5">
-									<span className="tabular-nums font-medium text-green-500">
-										+{pr.additions}
-									</span>
-									<span className="tabular-nums font-medium text-red-500">
-										-{pr.deletions}
-									</span>
-									<DiffBoxes
-										additions={pr.additions}
-										deletions={pr.deletions}
-									/>
-								</span>
-								{!pr.isMerged &&
-									!(
-										viewer &&
-										pr.requestedReviewers.some((r) => r.login === viewer.login)
-									) && (
-										<Link
-											to="/$owner/$repo/review/$pullId"
-											params={{ owner, repo, pullId }}
-											className="rounded-lg bg-foreground px-3 py-1 text-xs font-medium text-background transition-opacity hover:opacity-90"
-										>
-											Review changes
-										</Link>
-									)}
-							</span>
-						</div>
-					</div>
-
-					{/* Body */}
-					<PullBodySection
-						pr={pr}
-						owner={owner}
-						repo={repo}
-						pullNumber={pullNumber}
-						isAuthor={viewer?.login === pr.author?.login}
-						scope={scope}
-					/>
-
-					{/* Activity */}
-					<div className="flex flex-col">
-						<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
-							<h2 className="text-xs font-medium">Activity</h2>
-							{comments && commits && (
-								<span className="text-xs tabular-nums text-muted-foreground">
-									{comments.length + commits.length}
-								</span>
-							)}
-						</div>
-
-						{pageQuery.isFetching && !comments && (
-							<div className="flex items-center justify-center py-8">
-								<svg
-									className="size-4 animate-spin text-muted-foreground"
-									viewBox="0 0 16 16"
-									fill="none"
-									aria-hidden="true"
-								>
-									<circle
-										cx="8"
-										cy="8"
-										r="6.5"
-										stroke="currentColor"
-										strokeWidth="2"
-										opacity="0.25"
-									/>
-									<path
-										d="M14.5 8a6.5 6.5 0 0 0-6.5-6.5"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-									/>
-								</svg>
-							</div>
-						)}
-
-						{comments &&
-							commits &&
-							comments.length === 0 &&
-							commits.length === 0 && (
-								<p className="py-4 text-sm text-muted-foreground">
-									No activity yet.
-								</p>
-							)}
-
-						<ActivityTimeline
-							comments={comments ?? []}
-							commits={commits ?? []}
-						/>
-
-						{/* Status card */}
-						{!pr.isMerged && pr.state !== "closed" && (
-							<div className="mt-6">
-								{status ? (
-									<MergeStatusCard
-										status={status}
-										owner={owner}
-										repo={repo}
-										pullNumber={pullNumber}
-									/>
-								) : (
-									<MergeStatusSkeleton />
-								)}
-							</div>
-						)}
-
-						{/* Comment input */}
-						<div className="mt-6">
-							<CommentBox />
-						</div>
-					</div>
-				</div>
-
-				{/* Right sidebar: Metadata */}
-				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
-					{/* Labels */}
-					<LabelsSection
-						currentLabels={pr.labels}
-						owner={owner}
-						repo={repo}
-						issueNumber={pullNumber}
-						scope={scope}
-						pageQueryKey={githubQueryKeys.pulls.page(scope, {
-							owner,
-							repo,
-							pullNumber,
-						})}
-					/>
-
-					{/* Reviewers */}
-					<ReviewersSection
-						pr={pr}
-						owner={owner}
-						repo={repo}
-						pullNumber={pullNumber}
-						scope={scope}
-					/>
-
-					{/* Participants */}
-					<SidebarSection title="Participants">
-						<ParticipantsList
-							pr={pr}
-							comments={comments ?? []}
-							commits={commits ?? []}
-						/>
-					</SidebarSection>
-
-					{/* Details */}
-					<SidebarSection title="Details">
-						<div className="flex flex-col gap-2 text-xs">
-							<DetailRow icon={CalendarIcon} label="Created">
-								{formatRelativeTime(pr.createdAt)}
-							</DetailRow>
-							<DetailRow icon={ClockIcon} label="Updated">
-								{formatRelativeTime(pr.updatedAt)}
-							</DetailRow>
-							{pr.mergedAt && (
-								<DetailRow icon={GitMergeIcon} label="Merged">
-									{formatRelativeTime(pr.mergedAt)}
-								</DetailRow>
-							)}
-							{pr.closedAt && !pr.mergedAt && (
-								<DetailRow icon={CloseIcon} label="Closed">
-									{formatRelativeTime(pr.closedAt)}
-								</DetailRow>
-							)}
-							<DetailRow icon={CommentIcon} label="Comments">
-								<span className="tabular-nums">{pr.comments}</span>
-							</DetailRow>
-							<DetailRow icon={MessageIcon} label="Review comments">
-								<span className="tabular-nums">{pr.reviewComments}</span>
-							</DetailRow>
-						</div>
-					</SidebarSection>
-				</aside>
-			</div>
-		</div>
-	);
-}
-
-function SidebarSection({
-	title,
-	children,
-}: {
-	title: string;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="flex flex-col gap-2.5">
-			<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-				{title}
-			</h3>
-			{children}
-		</div>
-	);
-}
-
-function PullBodySection({
-	pr,
-	owner,
-	repo,
-	pullNumber,
-	isAuthor,
-	scope,
-}: {
-	pr: PullDetail;
-	owner: string;
-	repo: string;
-	pullNumber: number;
-	isAuthor: boolean;
-	scope: { userId: string };
-}) {
-	const { mutate } = useOptimisticMutation();
-	const [isEditing, setIsEditing] = useState(false);
-	const [editTab, setEditTab] = useState<"edit" | "preview">("edit");
-	const [draft, setDraft] = useState(pr.body);
-	const [isSaving, setIsSaving] = useState(false);
-	const editorRef = useRef<HTMLTextAreaElement>(null);
-
-	const insertMarkdown = useCallback(
-		(before: string, after = "", placeholder = "") => {
-			const ta = editorRef.current;
-			if (!ta) return;
-			const start = ta.selectionStart;
-			const end = ta.selectionEnd;
-			const selected = draft.slice(start, end);
-			const text = selected || placeholder;
-			const newValue = `${draft.slice(0, start)}${before}${text}${after}${draft.slice(end)}`;
-			setDraft(newValue);
-			requestAnimationFrame(() => {
-				ta.focus();
-				const cursorStart = start + before.length;
-				ta.setSelectionRange(cursorStart, cursorStart + text.length);
-			});
-		},
-		[draft],
-	);
-
-	const handleEditorKeyDown = useCallback(
-		(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-			const mod = e.metaKey || e.ctrlKey;
-			if (!mod) return;
-
-			const shortcuts: Record<string, () => void> = {
-				b: () => insertMarkdown("**", "**", "bold"),
-				i: () => insertMarkdown("_", "_", "italic"),
-				e: () => insertMarkdown("`", "`", "code"),
-				k: () => insertMarkdown("[", "](url)", "text"),
-				h: () => insertMarkdown("### ", "", "heading"),
-			};
-
-			// Shift combos
-			if (e.shiftKey) {
-				const shiftShortcuts: Record<string, () => void> = {
-					".": () => insertMarkdown("> ", "", "quote"),
-					"8": () => insertMarkdown("- ", "", "item"),
-					"7": () => insertMarkdown("1. ", "", "item"),
-				};
-				const action = shiftShortcuts[e.key];
-				if (action) {
-					e.preventDefault();
-					action();
-				}
-				return;
-			}
-
-			const action = shortcuts[e.key];
-			if (action) {
-				e.preventDefault();
-				action();
-			}
-		},
-		[insertMarkdown],
-	);
-
-	const pageQueryKey = githubQueryKeys.pulls.page(scope, {
-		owner,
-		repo,
-		pullNumber,
-	});
-
-	const startEditing = () => {
-		setDraft(pr.body);
-		setEditTab("edit");
-		setIsEditing(true);
-	};
-
-	const cancelEditing = () => {
-		setIsEditing(false);
-	};
-
-	const saveBody = async () => {
-		setIsSaving(true);
-		try {
-			await mutate({
-				mutationFn: () =>
-					updatePullBody({
-						data: { owner, repo, pullNumber, body: draft },
-					}),
-				updates: [
-					{
-						queryKey: pageQueryKey,
-						updater: (prev: PullPageData) => ({
-							...prev,
-							detail: prev.detail
-								? { ...prev.detail, body: draft }
-								: prev.detail,
-						}),
-					},
-				],
-			});
-			setIsEditing(false);
-		} finally {
-			setIsSaving(false);
-		}
-	};
-
-	if (isEditing) {
-		return (
-			<div className="flex flex-col gap-2">
-				<div className="flex items-center justify-between">
-					<div className="flex items-center gap-0.5">
-						<button
-							type="button"
-							onClick={() => setEditTab("edit")}
-							className={cn(
-								"rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-								editTab === "edit"
-									? "bg-surface-1 text-foreground"
-									: "text-muted-foreground hover:bg-surface-1 hover:text-foreground",
-							)}
-						>
-							Edit
-						</button>
-						<button
-							type="button"
-							onClick={() => setEditTab("preview")}
-							className={cn(
-								"rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-								editTab === "preview"
-									? "bg-surface-1 text-foreground"
-									: "text-muted-foreground hover:bg-surface-1 hover:text-foreground",
-							)}
-						>
-							Preview
-						</button>
-					</div>
-					{editTab === "edit" && (
-						<TooltipProvider delayDuration={300}>
-							<div className="flex items-center gap-0.5 text-muted-foreground">
-								<MdToolbarButton
-									label="Heading"
-									shortcut="⌘H"
-									onClick={() => insertMarkdown("### ", "", "heading")}
-								>
-									<path d="M4 12h8M4 4v16M12 4v16M20 8v8" />
-								</MdToolbarButton>
-								<MdToolbarButton
-									label="Bold"
-									shortcut="⌘B"
-									onClick={() => insertMarkdown("**", "**", "bold")}
-								>
-									<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6zM6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
-								</MdToolbarButton>
-								<MdToolbarButton
-									label="Italic"
-									shortcut="⌘I"
-									onClick={() => insertMarkdown("_", "_", "italic")}
-								>
-									<path d="M10 4h4M8 20h4M15 4l-6 16" />
-								</MdToolbarButton>
-								<span className="mx-1 h-4 w-px bg-border" />
-								<MdToolbarButton
-									label="Code"
-									shortcut="⌘E"
-									onClick={() => insertMarkdown("`", "`", "code")}
-								>
-									<path d="M16 18l6-6-6-6M8 6l-6 6 6 6" />
-								</MdToolbarButton>
-								<MdToolbarButton
-									label="Link"
-									shortcut="⌘K"
-									onClick={() => insertMarkdown("[", "](url)", "text")}
-								>
-									<path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" />
-									<path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5" />
-								</MdToolbarButton>
-								<MdToolbarButton
-									label="Quote"
-									shortcut="⌘⇧."
-									onClick={() => insertMarkdown("> ", "", "quote")}
-								>
-									<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z" />
-									<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
-								</MdToolbarButton>
-								<span className="mx-1 h-4 w-px bg-border" />
-								<MdToolbarButton
-									label="Unordered list"
-									shortcut="⌘⇧8"
-									onClick={() => insertMarkdown("- ", "", "item")}
-								>
-									<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
-								</MdToolbarButton>
-								<MdToolbarButton
-									label="Ordered list"
-									shortcut="⌘⇧7"
-									onClick={() => insertMarkdown("1. ", "", "item")}
-								>
-									<path d="M10 6h11M10 12h11M10 18h11M4 6h1v4M3 10h3M4 14.5a.5.5 0 0 1 .5-.5H5a.5.5 0 0 1 .5.5v0a1.5 1.5 0 0 1-1.5 1.5H3.5a.5.5 0 0 0-.5.5v0a.5.5 0 0 0 .5.5H5a.5.5 0 0 1 .5.5v0a1.5 1.5 0 0 1-1.5 1.5H3" />
-								</MdToolbarButton>
-								<MdToolbarButton
-									label="Task list"
-									onClick={() => insertMarkdown("- [ ] ", "", "task")}
-								>
-									<path d="M9 11l3 3L22 4" />
-									<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
-								</MdToolbarButton>
-							</div>
-						</TooltipProvider>
-					)}
-				</div>
-				<div className="rounded-lg border bg-surface-0">
-					{editTab === "edit" ? (
-						<HighlightedMarkdownEditor
-							value={draft}
-							onChange={setDraft}
-							placeholder="Write a description..."
-							textareaRef={editorRef}
-							onKeyDown={handleEditorKeyDown}
-						/>
-					) : (
-						<div className="min-h-[200px] p-5">
-							{draft ? (
-								<Markdown>{draft}</Markdown>
-							) : (
-								<p className="text-sm text-muted-foreground italic">
-									Nothing to preview
-								</p>
-							)}
-						</div>
-					)}
-				</div>
-				<div className="flex items-center justify-end gap-2 pt-2">
-					<button
-						type="button"
-						onClick={cancelEditing}
-						disabled={isSaving}
-						className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
-					>
-						Cancel
-					</button>
-					<button
-						type="button"
-						onClick={saveBody}
-						disabled={isSaving}
-						className="flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50"
-					>
-						{isSaving ? (
-							<Spinner size={13} />
-						) : (
-							<CheckIcon size={13} strokeWidth={2.5} />
-						)}
-						{isSaving ? "Saving..." : "Save"}
-					</button>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="relative rounded-lg border bg-surface-0 p-5">
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<button
-						type="button"
-						className="absolute right-3 top-3 flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground"
-					>
-						<MoreHorizontalIcon size={15} strokeWidth={2} />
-					</button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="end" className="w-44">
-					{pr.body && (
-						<DropdownMenuItem
-							onSelect={() => {
-								void navigator.clipboard.writeText(pr.body);
-							}}
-						>
-							<CopyIcon size={14} strokeWidth={2} />
-							Copy as Markdown
-						</DropdownMenuItem>
-					)}
-					{isAuthor && (
-						<DropdownMenuItem onSelect={startEditing}>
-							<EditIcon size={14} strokeWidth={2} />
-							Edit
-						</DropdownMenuItem>
-					)}
-				</DropdownMenuContent>
-			</DropdownMenu>
-			{pr.body ? (
-				<Markdown>{pr.body}</Markdown>
-			) : (
-				<p className="text-sm text-muted-foreground italic">
-					No description provided.
-				</p>
-			)}
-		</div>
-	);
-}
-
-function ReviewersSection({
-	pr,
-	owner,
-	repo,
-	pullNumber,
-	scope,
-}: {
-	pr: PullDetail;
-	owner: string;
-	repo: string;
-	pullNumber: number;
-	scope: { userId: string };
-}) {
-	const { mutate } = useOptimisticMutation();
-	const [pickerOpen, setPickerOpen] = useState(false);
-	const [search, setSearch] = useState("");
-
-	const collaboratorsQuery = useQuery({
-		...githubRepoCollaboratorsQueryOptions(scope, { owner, repo }),
-		enabled: pickerOpen,
-	});
-	const teamsQuery = useQuery({
-		...githubOrgTeamsQueryOptions(scope, owner),
-		enabled: pickerOpen,
-	});
-	const collaborators = collaboratorsQuery.data ?? [];
-	const teams = teamsQuery.data ?? [];
-	const isLoading = collaboratorsQuery.isLoading || teamsQuery.isLoading;
-
-	const isOpen = !pr.isMerged && pr.state !== "closed";
-
-	const requestedLogins = useMemo(
-		() => new Set(pr.requestedReviewers.map((r) => r.login)),
-		[pr.requestedReviewers],
-	);
-
-	const requestedTeamSlugs = useMemo(
-		() => new Set(pr.requestedTeams.map((t) => t.slug)),
-		[pr.requestedTeams],
-	);
-
-	const candidates = useMemo(() => {
-		const authorLogin = pr.author?.login;
-		return collaborators.filter((c) => c.login !== authorLogin);
-	}, [collaborators, pr.author?.login]);
-
-	const filteredUsers = useMemo(() => {
-		if (!search) return candidates;
-		const q = search.toLowerCase();
-		return candidates.filter((c) => c.login.toLowerCase().includes(q));
-	}, [candidates, search]);
-
-	const filteredTeams = useMemo(() => {
-		if (!search) return teams;
-		const q = search.toLowerCase();
-		return teams.filter(
-			(t) =>
-				t.name.toLowerCase().includes(q) || t.slug.toLowerCase().includes(q),
-		);
-	}, [teams, search]);
-
-	const pageQueryKey = githubQueryKeys.pulls.page(scope, {
-		owner,
-		repo,
-		pullNumber,
-	});
-
-	const toggleReviewer = (login: string) => {
-		const isRequested = requestedLogins.has(login);
-		const collaborator = collaborators.find((c) => c.login === login);
-
-		mutate({
-			mutationFn: () =>
-				isRequested
-					? removeReviewRequest({
-							data: { owner, repo, pullNumber, reviewers: [login] },
-						})
-					: requestPullReviewers({
-							data: { owner, repo, pullNumber, reviewers: [login] },
-						}),
-			updates: [
-				{
-					queryKey: pageQueryKey,
-					updater: (prev: PullPageData) => ({
-						...prev,
-						detail: prev.detail
-							? {
-									...prev.detail,
-									requestedReviewers: isRequested
-										? prev.detail.requestedReviewers.filter(
-												(r) => r.login !== login,
-											)
-										: [
-												...prev.detail.requestedReviewers,
-												{
-													login,
-													avatarUrl: collaborator?.avatarUrl ?? "",
-													url: `https://github.com/${login}`,
-													type: "User",
-												},
-											],
-								}
-							: prev.detail,
-					}),
-				},
-			],
-		});
-	};
-
-	const toggleTeam = (slug: string) => {
-		const isRequested = requestedTeamSlugs.has(slug);
-		const team = teams.find((t) => t.slug === slug);
-
-		mutate({
-			mutationFn: () =>
-				isRequested
-					? removeReviewRequest({
-							data: { owner, repo, pullNumber, teamReviewers: [slug] },
-						})
-					: requestPullReviewers({
-							data: { owner, repo, pullNumber, teamReviewers: [slug] },
-						}),
-			updates: [
-				{
-					queryKey: pageQueryKey,
-					updater: (prev: PullPageData) => ({
-						...prev,
-						detail: prev.detail
-							? {
-									...prev.detail,
-									requestedTeams: isRequested
-										? prev.detail.requestedTeams.filter((t) => t.slug !== slug)
-										: [
-												...prev.detail.requestedTeams,
-												{
-													slug,
-													name: team?.name ?? slug,
-													url: `https://github.com/orgs/${owner}/teams/${slug}`,
-												},
-											],
-								}
-							: prev.detail,
-					}),
-				},
-			],
-		});
-	};
-
-	const hasReviewers =
-		pr.requestedReviewers.length > 0 || pr.requestedTeams.length > 0;
-
-	const [focusedIndex, setFocusedIndex] = useState(-1);
-	const listRef = useRef<HTMLDivElement>(null);
-
-	type ReviewerItem =
-		| { kind: "team"; slug: string }
-		| { kind: "user"; login: string };
-
-	const flatItems = useMemo<ReviewerItem[]>(() => {
-		const items: ReviewerItem[] = [];
-		for (const t of filteredTeams) items.push({ kind: "team", slug: t.slug });
-		for (const c of filteredUsers) items.push({ kind: "user", login: c.login });
-		return items;
-	}, [filteredTeams, filteredUsers]);
-
-	const scrollToFocused = useCallback((index: number) => {
-		const el = listRef.current?.querySelector(`[data-index="${index}"]`);
-		if (el) {
-			el.scrollIntoView({ block: "nearest" });
-		}
-	}, []);
-
-	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (flatItems.length === 0) return;
-
-		if (e.key === "ArrowDown") {
-			e.preventDefault();
-			const next = focusedIndex < flatItems.length - 1 ? focusedIndex + 1 : 0;
-			setFocusedIndex(next);
-			scrollToFocused(next);
-		} else if (e.key === "ArrowUp") {
-			e.preventDefault();
-			const next = focusedIndex > 0 ? focusedIndex - 1 : flatItems.length - 1;
-			setFocusedIndex(next);
-			scrollToFocused(next);
-		} else if (e.key === "Enter") {
-			e.preventDefault();
-			if (focusedIndex < 0) return;
-			const item = flatItems[focusedIndex];
-			if (item.kind === "team") {
-				toggleTeam(item.slug);
-			} else {
-				toggleReviewer(item.login);
-			}
-		}
-	};
-
-	return (
-		<div className="flex flex-col gap-2.5">
-			<div className="flex items-center justify-between">
-				<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-					Reviewers
-				</h3>
-				{isOpen && (
-					<Popover
-						open={pickerOpen}
-						onOpenChange={(open) => {
-							setPickerOpen(open);
-							if (!open) {
-								setSearch("");
-								setFocusedIndex(-1);
-							}
-						}}
-					>
-						<PopoverTrigger asChild>
-							<button
-								type="button"
-								className="flex size-5 items-center justify-center rounded transition-colors hover:bg-surface-2 text-muted-foreground hover:text-foreground"
-							>
-								<PlusSignIcon size={14} strokeWidth={2} />
-							</button>
-						</PopoverTrigger>
-						<PopoverContent align="end" className="w-64 p-0">
-							<div className="flex items-center gap-2 border-b px-3 py-2">
-								<SearchIcon className="size-3.5 shrink-0 text-muted-foreground" />
-								<input
-									value={search}
-									onChange={(e) => {
-										setSearch(e.target.value);
-										setFocusedIndex(-1);
-									}}
-									onKeyDown={handleKeyDown}
-									placeholder="Search people and teams..."
-									className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-								/>
-							</div>
-							<div ref={listRef} className="max-h-64 overflow-y-auto py-1">
-								{isLoading ? (
-									<p className="px-3 py-4 text-center text-xs text-muted-foreground">
-										Loading…
-									</p>
-								) : filteredUsers.length === 0 && filteredTeams.length === 0 ? (
-									<p className="px-3 py-4 text-center text-xs text-muted-foreground">
-										No results found
-									</p>
-								) : (
-									<>
-										{filteredTeams.length > 0 && (
-											<>
-												<p className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground">
-													Teams
-												</p>
-												{filteredTeams.map((t, i) => {
-													const isSelected = requestedTeamSlugs.has(t.slug);
-													return (
-														<button
-															key={`team-${t.slug}`}
-															type="button"
-															data-index={i}
-															onClick={() => toggleTeam(t.slug)}
-															onMouseEnter={() => setFocusedIndex(i)}
-															className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors hover:bg-surface-1 disabled:opacity-50 ${focusedIndex === i ? "bg-surface-1" : ""}`}
-														>
-															<div className="flex size-5 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-[10px] font-semibold text-muted-foreground">
-																T
-															</div>
-															<span className="min-w-0 flex-1 truncate">
-																{t.name}
-															</span>
-															{isSelected && (
-																<CheckIcon
-																	size={14}
-																	strokeWidth={2}
-																	className="shrink-0 text-green-500"
-																/>
-															)}
-														</button>
-													);
-												})}
-											</>
-										)}
-										{filteredUsers.length > 0 && (
-											<>
-												<p className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground">
-													People
-												</p>
-												{filteredUsers.map((c, i) => {
-													const idx = filteredTeams.length + i;
-													const isSelected = requestedLogins.has(c.login);
-													return (
-														<button
-															key={c.login}
-															type="button"
-															data-index={idx}
-															onClick={() => toggleReviewer(c.login)}
-															onMouseEnter={() => setFocusedIndex(idx)}
-															className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors hover:bg-surface-1 disabled:opacity-50 ${focusedIndex === idx ? "bg-surface-1" : ""}`}
-														>
-															<img
-																src={c.avatarUrl}
-																alt={c.login}
-																className="size-5 rounded-full border border-border"
-															/>
-															<span className="min-w-0 flex-1 truncate">
-																{c.login}
-															</span>
-															{isSelected && (
-																<CheckIcon
-																	size={14}
-																	strokeWidth={2}
-																	className="shrink-0 text-green-500"
-																/>
-															)}
-														</button>
-													);
-												})}
-											</>
-										)}
-									</>
-								)}
-							</div>
-						</PopoverContent>
-					</Popover>
-				)}
-			</div>
-			{hasReviewers ? (
-				<div className="flex flex-col gap-2">
-					{pr.requestedTeams.map((team) => (
-						<div
-							key={`team-${team.slug}`}
-							className="group/reviewer flex items-center gap-2"
-						>
-							<div className="flex size-5 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-[10px] font-semibold text-muted-foreground">
-								T
-							</div>
-							<span className="min-w-0 flex-1 truncate text-sm">
-								{team.name}
-							</span>
-							{isOpen && (
-								<button
-									type="button"
-									onClick={() => toggleTeam(team.slug)}
-									className="flex size-4 shrink-0 items-center justify-center rounded opacity-0 transition-opacity hover:text-red-400 group-hover/reviewer:opacity-100 disabled:opacity-50"
-								>
-									<CloseIcon size={12} strokeWidth={2} />
-								</button>
-							)}
-						</div>
-					))}
-					{pr.requestedReviewers.map((reviewer) => (
-						<div
-							key={reviewer.login}
-							className="group/reviewer flex items-center gap-2"
-						>
-							<img
-								src={reviewer.avatarUrl}
-								alt={reviewer.login}
-								className="size-5 rounded-full border border-border"
-							/>
-							<span className="min-w-0 flex-1 truncate text-sm">
-								{reviewer.login}
-							</span>
-							{isOpen && (
-								<button
-									type="button"
-									onClick={() => toggleReviewer(reviewer.login)}
-									className="flex size-4 shrink-0 items-center justify-center rounded opacity-0 transition-opacity hover:text-red-400 group-hover/reviewer:opacity-100 disabled:opacity-50"
-								>
-									<CloseIcon size={12} strokeWidth={2} />
-								</button>
-							)}
-						</div>
-					))}
-				</div>
-			) : (
-				<p className="text-xs text-muted-foreground">No reviewers requested</p>
-			)}
-		</div>
-	);
-}
-
-function DetailRow({
-	icon: Icon,
-	label,
-	children,
-}: {
-	icon: React.FC<{ size?: number; strokeWidth?: number }>;
-	label: string;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="flex items-center justify-between gap-4">
-			<span className="flex items-center gap-1.5 text-muted-foreground">
-				<Icon size={13} strokeWidth={2} />
-				{label}
-			</span>
-			<span className="text-foreground">{children}</span>
-		</div>
-	);
-}
-
-function ParticipantsList({
-	pr,
-	comments,
-	commits,
-}: {
-	pr: PullDetail;
-	comments: Array<{ author: GitHubActor | null }>;
-	commits: Array<{ author: GitHubActor | null }>;
-}) {
-	const seen = new Set<string>();
-	const participants: GitHubActor[] = [];
-
-	const addActor = (actor: GitHubActor | null) => {
-		if (actor && !seen.has(actor.login)) {
-			seen.add(actor.login);
-			participants.push(actor);
-		}
-	};
-
-	addActor(pr.author);
-	for (const comment of comments) {
-		addActor(comment.author);
-	}
-	for (const commit of commits) {
-		addActor(commit.author);
-	}
-
-	if (participants.length === 0) {
-		return <p className="text-xs text-muted-foreground">No participants yet</p>;
-	}
-
-	return (
-		<div className="group/participants flex items-center">
-			{participants.map((actor, i) => (
-				<Tooltip key={actor.login}>
-					<TooltipTrigger asChild>
-						<img
-							src={actor.avatarUrl}
-							alt={actor.login}
-							className="size-6 rounded-full border-2 border-card transition-[margin] duration-200 group-hover/participants:ml-0"
-							style={i > 0 ? { marginLeft: -6 } : undefined}
-						/>
-					</TooltipTrigger>
-					<TooltipContent>{actor.login}</TooltipContent>
-				</Tooltip>
-			))}
-		</div>
-	);
-}
-
-function MergeStatusCard({
-	status,
-	owner,
-	repo,
-	pullNumber,
-}: {
-	status: PullStatus;
-	owner: string;
-	repo: string;
-	pullNumber: number;
-}) {
-	const {
-		checks,
-		reviews,
-		mergeable,
-		mergeableState,
-		behindBy,
-		baseRefName,
-		canUpdateBranch,
-	} = status;
-	const [isUpdating, setIsUpdating] = useState(false);
-
-	const approvedReviews = reviews.filter((r) => r.state === "APPROVED");
-	const changesRequested = reviews.filter(
-		(r) => r.state === "CHANGES_REQUESTED",
-	);
-	const pendingReviewers = reviews.filter((r) => r.state === "PENDING");
-
-	const hasReviewIssue =
-		changesRequested.length > 0 || pendingReviewers.length > 0;
-	const allChecksPassed =
-		checks.total > 0 && checks.failed === 0 && checks.pending === 0;
-	const hasCheckFailures = checks.failed > 0;
-	const hasChecksPending = checks.pending > 0;
-	const isBehind = behindBy !== null && behindBy > 0;
-
-	const isMergeBlocked = mergeableState === "blocked" || mergeable === false;
-
-	return (
-		<div className="flex flex-col rounded-lg border">
-			{/* Reviews */}
-			<StatusRow
-				icon={
-					changesRequested.length > 0 ? (
-						<StatusDot color="text-red-500" />
-					) : approvedReviews.length > 0 && !hasReviewIssue ? (
-						<StatusDot color="text-green-500" />
-					) : (
-						<StatusDot color="text-yellow-500" />
-					)
-				}
-				title={
-					changesRequested.length > 0
-						? "Changes requested"
-						: approvedReviews.length > 0
-							? `${approvedReviews.length} approving review${approvedReviews.length > 1 ? "s" : ""}`
-							: "Review required"
-				}
-				description={
-					changesRequested.length > 0
-						? `${changesRequested.map((r) => r.author?.login).join(", ")} requested changes`
-						: approvedReviews.length > 0 && !hasReviewIssue
-							? "All required reviews have been provided"
-							: "Code owner review required by reviewers with write access."
-				}
-			/>
-
-			{/* Checks */}
-			{checks.total > 0 && (
-				<StatusRow
-					icon={
-						allChecksPassed ? (
-							<StatusDot color="text-green-500" />
-						) : hasCheckFailures ? (
-							<StatusDot color="text-red-500" />
-						) : (
-							<StatusDot color="text-yellow-500" />
-						)
-					}
-					title={
-						allChecksPassed
-							? "All checks have passed"
-							: hasCheckFailures
-								? `${checks.failed} failing check${checks.failed > 1 ? "s" : ""}`
-								: `${checks.pending} pending check${checks.pending > 1 ? "s" : ""}`
-					}
-					description={
-						`${checks.skipped > 0 ? `${checks.skipped} skipped, ` : ""}${checks.passed} successful check${checks.passed !== 1 ? "s" : ""}` +
-						(hasChecksPending ? `, ${checks.pending} pending` : "") +
-						(hasCheckFailures ? `, ${checks.failed} failing` : "")
-					}
-				/>
-			)}
-
-			{/* Behind base */}
-			{isBehind && (
-				<StatusRow
-					icon={<StatusDot color="text-yellow-500" />}
-					title="This branch is out-of-date with the base branch"
-					description={`Merge the latest changes from ${baseRefName} into this branch.`}
-					action={
-						canUpdateBranch ? (
-							<UpdateBranchButton
-								owner={owner}
-								repo={repo}
-								pullNumber={pullNumber}
-								isUpdating={isUpdating}
-								setIsUpdating={setIsUpdating}
-							/>
-						) : undefined
-					}
-				/>
-			)}
-
-			{/* Merge status */}
-			<StatusRow
-				icon={
-					isMergeBlocked ? (
-						<StatusDot color="text-yellow-500" />
-					) : (
-						<StatusDot color="text-green-500" />
-					)
-				}
-				title={isMergeBlocked ? "Merging is blocked" : "Ready to merge"}
-				description={
-					isMergeBlocked
-						? "All required conditions have not been met."
-						: "All required conditions have been satisfied."
-				}
-				isLast
-			/>
-		</div>
-	);
-}
-
-function StatusRow({
-	icon,
-	title,
-	description,
-	action,
-	isLast,
-}: {
-	icon: React.ReactNode;
-	title: string;
-	description: string;
-	action?: React.ReactNode;
-	isLast?: boolean;
-}) {
-	return (
-		<div
-			className={cn(
-				"flex items-start gap-3 px-4 py-3",
-				!isLast && "border-b border-border/50",
-			)}
-		>
-			<div className="mt-0.5 shrink-0">{icon}</div>
-			<div className="flex min-w-0 flex-1 flex-col gap-0.5">
-				<p className="text-sm font-medium">{title}</p>
-				<p className="text-xs text-muted-foreground">{description}</p>
-			</div>
-			{action && <div className="shrink-0">{action}</div>}
-		</div>
-	);
-}
-
-const DIFF_BOX_COUNT = 5;
-
-function CopyBadge({
-	value,
-	canTruncate,
-}: {
-	value: string;
-	canTruncate?: boolean;
-}) {
-	const [copied, setCopied] = useState(false);
-	const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-	const handleClick = useCallback(() => {
-		navigator.clipboard.writeText(value);
-		setCopied(true);
-		clearTimeout(timeoutRef.current);
-		timeoutRef.current = setTimeout(() => setCopied(false), 1500);
-	}, [value]);
-
-	return (
-		<Tooltip open={copied}>
-			<TooltipTrigger asChild>
-				<button
-					type="button"
-					onClick={handleClick}
-					className={cn(
-						"shrink-0 cursor-pointer rounded bg-surface-1 px-1.5 py-0.5 font-mono text-xs font-[550] transition-colors hover:bg-surface-2",
-						canTruncate && "min-w-0 shrink truncate",
-					)}
-				>
-					{value}
-				</button>
-			</TooltipTrigger>
-			<TooltipContent>Copied!</TooltipContent>
-		</Tooltip>
-	);
-}
-
-function MdToolbarButton({
-	label,
-	shortcut,
-	onClick,
-	children,
-}: {
-	label: string;
-	shortcut?: string;
-	onClick: () => void;
-	children: React.ReactNode;
-}) {
-	return (
-		<Tooltip>
-			<TooltipTrigger asChild>
-				<button
-					type="button"
-					onClick={onClick}
-					className="flex size-7 items-center justify-center rounded-md transition-colors hover:bg-surface-1 hover:text-foreground"
-				>
-					<svg
-						aria-hidden="true"
-						fill="none"
-						height={15}
-						stroke="currentColor"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeWidth={2}
-						viewBox="0 0 24 24"
-						width={15}
-					>
-						{children}
-					</svg>
-				</button>
-			</TooltipTrigger>
-			<TooltipContent>
-				<span className="flex items-center gap-1.5">
-					{label}
-					{shortcut && (
-						<kbd className="rounded bg-foreground/10 px-1 font-mono text-[10px]">
-							{shortcut}
-						</kbd>
-					)}
-				</span>
-			</TooltipContent>
-		</Tooltip>
-	);
-}
-
-function HighlightedMarkdownEditor({
-	value,
-	onChange,
-	placeholder,
-	textareaRef: externalRef,
-	onKeyDown,
-}: {
-	value: string;
-	onChange: (value: string) => void;
-	placeholder?: string;
-	textareaRef?: React.RefObject<HTMLTextAreaElement | null>;
-	onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
-}) {
-	const [highlightedHtml, setHighlightedHtml] = useState("");
-	const containerRef = useRef<HTMLDivElement>(null);
-	const internalRef = useRef<HTMLTextAreaElement>(null);
-	const textareaRef = externalRef || internalRef;
-
-	useEffect(() => {
-		let cancelled = false;
-		if (!value) {
-			setHighlightedHtml("");
-			return;
-		}
-		highlightCode(value, "markdown").then((html) => {
-			if (!cancelled) setHighlightedHtml(html);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [value]);
-
-	const highlightRef = useRef<HTMLDivElement>(null);
-
-	const syncScroll = () => {
-		if (highlightRef.current && textareaRef.current) {
-			highlightRef.current.scrollTop = textareaRef.current.scrollTop;
-			highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
-		}
-	};
-
-	return (
-		<div
-			ref={containerRef}
-			className="relative"
-			style={{ height: 640, maxHeight: 1200 }}
-		>
-			{/* Highlighted layer */}
-			<div
-				ref={highlightRef}
-				aria-hidden
-				className="pointer-events-none absolute inset-0 overflow-auto whitespace-pre-wrap break-words p-5 [scrollbar-width:none] [word-break:break-all] [&::-webkit-scrollbar]:hidden [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:!whitespace-pre-wrap [&_pre]:!break-words [&_pre]:font-mono [&_pre]:text-sm [&_pre]:!leading-[1.625] [&_code]:!font-mono [&_code]:!text-sm [&_code]:!leading-[1.625]"
-				// biome-ignore lint/security/noDangerouslySetInnerHtml: HTML from shiki highlighter is trusted
-				dangerouslySetInnerHTML={{ __html: highlightedHtml }}
-			/>
-			{/* Editable textarea */}
-			<textarea
-				ref={textareaRef}
-				value={value}
-				onChange={(e) => onChange(e.target.value)}
-				onKeyDown={onKeyDown}
-				onScroll={syncScroll}
-				className="relative w-full resize-y whitespace-pre-wrap break-words bg-transparent p-5 font-mono text-sm leading-[1.625] text-transparent caret-foreground outline-none [word-break:break-all] placeholder:text-muted-foreground"
-				style={{ height: 640, maxHeight: 1200 }}
-				placeholder={placeholder}
-				spellCheck={false}
-			/>
-		</div>
-	);
-}
-
-function DiffBoxes({
-	additions,
-	deletions,
-}: {
-	additions: number;
-	deletions: number;
-}) {
-	const total = additions + deletions;
-	const greenCount =
-		total === 0 ? 0 : Math.round((additions / total) * DIFF_BOX_COUNT);
-	const redCount = total === 0 ? 0 : DIFF_BOX_COUNT - greenCount;
-
-	const boxes: string[] = [];
-	for (let i = 0; i < greenCount; i++) boxes.push("bg-green-500");
-	for (let i = 0; i < redCount; i++) boxes.push("bg-red-500");
-	while (boxes.length < DIFF_BOX_COUNT) boxes.push("bg-muted-foreground/30");
-
-	return (
-		<span className="flex items-center gap-px">
-			{boxes.map((color, i) => (
-				// biome-ignore lint/suspicious/noArrayIndexKey: static decorative boxes, order never changes
-				<span key={i} className={cn("size-2 rounded-[2px]", color)} />
-			))}
-		</span>
-	);
-}
-
-function StatusDot({ color }: { color: string }) {
-	return (
-		<div className={cn("flex size-4 items-center justify-center", color)}>
-			<div className="size-2 rounded-full bg-current" />
-		</div>
-	);
-}
-
-function MergeStatusSkeleton() {
-	return (
-		<div className="flex flex-col rounded-lg border">
-			{[0, 1, 2].map((i) => (
-				<div
-					key={i}
-					className={cn(
-						"flex items-start gap-3 px-4 py-3",
-						i < 2 && "border-b border-border/50",
-					)}
-				>
-					<Skeleton className="mt-0.5 size-4 rounded-full" />
-					<div className="flex flex-1 flex-col gap-1.5">
-						<Skeleton className="h-3.5 w-48" />
-						<Skeleton className="h-3 w-72" />
-					</div>
-				</div>
-			))}
-		</div>
-	);
-}
-
-function PullDetailPageSkeleton() {
-	return (
-		<div className="h-full overflow-auto">
-			<div className="mx-auto grid max-w-7xl gap-16 px-6 py-10 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
-				<div className="flex min-w-0 flex-col gap-8">
-					<div className="flex flex-col gap-3">
-						<Skeleton className="h-3 w-32" />
-						<div className="flex items-start gap-3">
-							<Skeleton className="mt-1 size-5 rounded-full" />
-							<div className="flex min-w-0 flex-1 flex-col gap-2">
-								<Skeleton className="h-7 w-3/5" />
-								<div className="flex flex-wrap items-center gap-2">
-									<Skeleton className="h-5 w-14 rounded-full" />
-									<Skeleton className="h-4 w-64" />
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div className="flex items-center gap-3 rounded-lg bg-surface-1 px-4 py-2.5">
-						<Skeleton className="h-4 w-20" />
-						<Skeleton className="h-4 w-16" />
-						<Skeleton className="h-4 w-24" />
-					</div>
-
-					<div className="rounded-lg border bg-surface-0 p-5">
-						<div className="flex flex-col gap-3">
-							<Skeleton className="h-4 w-full" />
-							<Skeleton className="h-4 w-5/6" />
-							<Skeleton className="h-4 w-2/3" />
-							<Skeleton className="h-4 w-3/4" />
-						</div>
-					</div>
-
-					<div className="flex flex-col gap-6">
-						<div className="flex items-center justify-between gap-2 rounded-lg bg-surface-1 px-4 py-2.5">
-							<Skeleton className="h-4 w-16" />
-							<Skeleton className="h-4 w-6" />
-						</div>
-						<div className="flex flex-col gap-4 pl-8">
-							{[0, 1, 2].map((item) => (
-								<div key={item} className="flex flex-col gap-2">
-									<div className="flex items-center gap-2">
-										<Skeleton className="size-4 rounded-full" />
-										<Skeleton className="h-3.5 w-24" />
-										<Skeleton className="h-3.5 w-16" />
-									</div>
-									<Skeleton className="h-4 w-5/6" />
-									<Skeleton className="h-4 w-2/3" />
-								</div>
-							))}
-						</div>
-						<MergeStatusSkeleton />
-					</div>
-				</div>
-
-				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
-					{[0, 1, 2, 3].map((section) => (
-						<div key={section} className="flex flex-col gap-2.5">
-							<Skeleton className="h-3 w-20" />
-							<div className="flex flex-col gap-2">
-								<Skeleton className="h-4 w-full" />
-								<Skeleton className="h-4 w-5/6" />
-								<Skeleton className="h-4 w-2/3" />
-							</div>
-						</div>
-					))}
-				</aside>
-			</div>
-		</div>
-	);
-}
-
-function UpdateBranchButton({
-	owner,
-	repo,
-	pullNumber,
-	isUpdating,
-	setIsUpdating,
-}: {
-	owner: string;
-	repo: string;
-	pullNumber: number;
-	isUpdating: boolean;
-	setIsUpdating: (v: boolean) => void;
-}) {
-	const queryClient = useQueryClient();
-
-	const handleUpdate = async () => {
-		setIsUpdating(true);
-		try {
-			const success = await updatePullBranch({
-				data: { owner, repo, pullNumber },
-			});
-			if (success) {
-				await queryClient.invalidateQueries({
-					queryKey: ["github"],
-				});
-			}
-		} finally {
-			setIsUpdating(false);
-		}
-	};
-
-	return (
-		<button
-			type="button"
-			disabled={isUpdating}
-			onClick={handleUpdate}
-			className="rounded-md border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground disabled:opacity-50"
-		>
-			{isUpdating ? "Updating…" : "Update branch"}
-		</button>
-	);
-}
-
-type TimelineItem =
-	| { type: "comment"; date: string; data: PullComment }
-	| { type: "commit"; date: string; data: PullCommit };
-
-function ActivityTimeline({
-	comments,
-	commits,
-}: {
-	comments: PullComment[];
-	commits: PullCommit[];
-}) {
-	const items: TimelineItem[] = [
-		...comments.map((c) => ({
-			type: "comment" as const,
-			date: c.createdAt,
-			data: c,
-		})),
-		...commits.map((c) => ({
-			type: "commit" as const,
-			date: c.createdAt,
-			data: c,
-		})),
-	].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
-
-	if (items.length === 0) return null;
-
-	return (
-		<div className="relative flex flex-col pl-8 before:absolute before:left-4 before:top-0 before:h-full before:w-px before:bg-[linear-gradient(to_bottom,var(--color-border)_80%,transparent)]">
-			{items.map((item, i) => {
-				const prevType = i > 0 ? items[i - 1].type : null;
-				const nextType = i < items.length - 1 ? items[i + 1].type : null;
-				const isConsecutiveCommit =
-					item.type === "commit" && prevType === "commit";
-				const isLastInCommitRun =
-					item.type === "commit" && nextType !== "commit";
-
-				if (item.type === "comment") {
-					const comment = item.data;
-					return (
-						<div
-							key={`comment-${comment.id}`}
-							className={cn("flex flex-col gap-1 py-5", i === 0 && "pt-5")}
-						>
-							<div className="flex items-center gap-1.5">
-								{comment.author ? (
-									<img
-										src={comment.author.avatarUrl}
-										alt={comment.author.login}
-										className="size-4 rounded-full border border-border"
-									/>
-								) : (
-									<div className="size-4 rounded-full bg-surface-2" />
-								)}
-								<span className="text-xs font-medium">
-									{comment.author?.login ?? "Unknown"}
-								</span>
-								<span className="text-xs text-muted-foreground">
-									{formatRelativeTime(comment.createdAt)}
-								</span>
-							</div>
-							<Markdown className="text-muted-foreground">
-								{comment.body}
-							</Markdown>
-						</div>
-					);
-				}
-
-				const commit = item.data;
-				const firstLine = commit.message.split("\n")[0];
-				return (
-					<div
-						key={`commit-${commit.sha}`}
-						className={cn(
-							"flex items-center gap-1.5",
-							i === 0 ? "pt-5" : isConsecutiveCommit ? "pt-2" : "pt-5",
-							isLastInCommitRun ? "pb-5" : "pb-2",
-						)}
-					>
-						<div className="flex size-5 shrink-0 items-center justify-center rounded-full border border-border bg-surface-1">
-							<GitCommitIcon
-								size={12}
-								strokeWidth={2}
-								className="text-muted-foreground"
-							/>
-						</div>
-						{commit.author ? (
-							<img
-								src={commit.author.avatarUrl}
-								alt={commit.author.login}
-								className="size-5 shrink-0 rounded-full border border-border"
-							/>
-						) : (
-							<div className="size-5 shrink-0 rounded-full bg-surface-2" />
-						)}
-						<span className="min-w-0 truncate text-sm">{firstLine}</span>
-						<code className="ml-auto shrink-0 rounded bg-surface-1 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-							{commit.sha.slice(0, 7)}
-						</code>
-						<span className="shrink-0 text-xs text-muted-foreground">
-							{formatRelativeTime(commit.createdAt)}
-						</span>
-					</div>
-				);
-			})}
-		</div>
-	);
-}
-
-function CommentBox() {
-	const [value, setValue] = useState("");
-
-	return (
-		<div className="flex flex-col gap-2 rounded-lg border bg-surface-0 p-3">
-			<textarea
-				value={value}
-				onChange={(e) => setValue(e.target.value)}
-				placeholder="Leave a comment..."
-				rows={3}
-				className="w-full resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-			/>
-			<div className="flex justify-end">
-				<button
-					type="button"
-					disabled={!value.trim()}
-					className="rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity disabled:opacity-40"
-				>
-					Send
-				</button>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/dashboard/src/routes/_protected/$owner/$repo/review.$pullId.tsx b/apps/dashboard/src/routes/_protected/$owner/$repo/review.$pullId.tsx
index f7f722c..d5b07c6 100644
--- a/apps/dashboard/src/routes/_protected/$owner/$repo/review.$pullId.tsx
+++ b/apps/dashboard/src/routes/_protected/$owner/$repo/review.$pullId.tsx
@@ -1,85 +1,11 @@
-import {
-	CloseIcon,
-	CommentIcon,
-	FileIcon,
-	FolderIcon,
-	GitBranchIcon,
-	GitMergeIcon,
-	GitPullRequestClosedIcon,
-	GitPullRequestDraftIcon,
-	GitPullRequestIcon,
-	SearchIcon,
-	TickIcon,
-} from "@diffkit/icons";
-import { Markdown } from "@diffkit/ui/components/markdown";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@diffkit/ui/components/popover";
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-} from "@diffkit/ui/components/resizable";
-import { vercelDark, vercelLight } from "@diffkit/ui/lib/shiki-themes";
-import { cn } from "@diffkit/ui/lib/utils";
-import type { SelectedLineRange } from "@pierre/diffs";
-import type { DiffLineAnnotation, PatchDiffProps } from "@pierre/diffs/react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { useTheme } from "next-themes";
-import {
-	type ComponentType,
-	type LazyExoticComponent,
-	lazy,
-	Suspense,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { formatRelativeTime } from "#/components/pulls/pull-request-row";
-import { submitPullReview } from "#/lib/github.functions";
+import { createFileRoute } from "@tanstack/react-router";
+import { ReviewPage } from "#/components/pulls/review/review-page";
 import {
 	githubPullFilesQueryOptions,
 	githubPullPageQueryOptions,
 	githubPullReviewCommentsQueryOptions,
-	githubQueryKeys,
 } from "#/lib/github.query";
-import type {
-	PullDetail,
-	PullFile,
-	PullReviewComment,
-} from "#/lib/github.types";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
-import { useHasMounted } from "#/lib/use-has-mounted";
-import { useRegisterTab } from "#/lib/use-register-tab";
-
-// Lazy-load PatchDiff so @pierre/diffs (which bundles all shiki language grammars)
-// is excluded from the server bundle, keeping it under the CF Workers 3 MiB limit.
-// During SSR, return a no-op component to avoid stubbed-shiki runtime errors.
-type ReviewPatchDiffComponent = ComponentType<PatchDiffProps<ReviewAnnotation>>;
-
-const PatchDiff: LazyExoticComponent<ReviewPatchDiffComponent> = lazy(() =>
-	import.meta.env.SSR
-		? Promise.resolve({
-				default: (() => null) as ReviewPatchDiffComponent,
-			})
-		: import("@pierre/diffs/react").then((mod) => ({
-				default: mod.PatchDiff as ReviewPatchDiffComponent,
-			})),
-);
-
-// Register custom themes lazily on the client to avoid pulling shiki into the server bundle.
-// import.meta.env.SSR is statically replaced by Vite so the import is fully tree-shaken from SSR.
-if (!import.meta.env.SSR) {
-	import("@pierre/diffs").then(({ registerCustomTheme }) => {
-		registerCustomTheme("vercel-light", () => Promise.resolve(vercelLight));
-		registerCustomTheme("vercel-dark", () => Promise.resolve(vercelDark));
-	});
-}
 
 export const Route = createFileRoute("/_protected/$owner/$repo/review/$pullId")(
 	{
@@ -133,1157 +59,3 @@ export const Route = createFileRoute("/_protected/$owner/$repo/review/$pullId")(
 		component: ReviewPage,
 	},
 );
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type PendingComment = {
-	path: string;
-	line: number;
-	startLine?: number;
-	side: "LEFT" | "RIGHT";
-	startSide?: "LEFT" | "RIGHT";
-	body: string;
-};
-
-type ReviewAnnotation = PullReviewComment | PendingComment;
-type ReviewEvent = "APPROVE" | "REQUEST_CHANGES" | "COMMENT";
-
-type FileTreeNode = {
-	name: string;
-	path: string;
-	type: "file" | "directory";
-	status?: PullFile["status"];
-	additions?: number;
-	deletions?: number;
-	children: FileTreeNode[];
-};
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function getPrStateConfig(pr: PullDetail) {
-	if (pr.isDraft) {
-		return {
-			icon: GitPullRequestDraftIcon,
-			color: "text-muted-foreground",
-			label: "Draft",
-			badgeClass: "bg-muted text-muted-foreground",
-		};
-	}
-	if (pr.isMerged || pr.mergedAt) {
-		return {
-			icon: GitMergeIcon,
-			color: "text-purple-500",
-			label: "Merged",
-			badgeClass: "bg-purple-500/10 text-purple-500",
-		};
-	}
-	if (pr.state === "closed") {
-		return {
-			icon: GitPullRequestClosedIcon,
-			color: "text-red-500",
-			label: "Closed",
-			badgeClass: "bg-red-500/10 text-red-500",
-		};
-	}
-	return {
-		icon: GitPullRequestIcon,
-		color: "text-green-500",
-		label: "Open",
-		badgeClass: "bg-green-500/10 text-green-500",
-	};
-}
-
-function buildFileTree(files: PullFile[]): FileTreeNode[] {
-	const root: FileTreeNode = {
-		name: "",
-		path: "",
-		type: "directory",
-		children: [],
-	};
-
-	for (const file of files) {
-		const parts = file.filename.split("/");
-		let current = root;
-
-		for (let i = 0; i < parts.length; i++) {
-			const part = parts[i];
-			const isFile = i === parts.length - 1;
-
-			let child = current.children.find((c) => c.name === part);
-			if (!child) {
-				child = {
-					name: part,
-					path: parts.slice(0, i + 1).join("/"),
-					type: isFile ? "file" : "directory",
-					status: isFile ? file.status : undefined,
-					additions: isFile ? file.additions : undefined,
-					deletions: isFile ? file.deletions : undefined,
-					children: [],
-				};
-				current.children.push(child);
-			}
-			current = child;
-		}
-	}
-
-	// Collapse single-child directories
-	function collapse(node: FileTreeNode): FileTreeNode {
-		if (
-			node.type === "directory" &&
-			node.children.length === 1 &&
-			node.children[0].type === "directory"
-		) {
-			const child = node.children[0];
-			return collapse({
-				...child,
-				name: `${node.name}/${child.name}`,
-				children: child.children,
-			});
-		}
-		return {
-			...node,
-			children: node.children.map(collapse),
-		};
-	}
-
-	// Sort: directories first, then files, alphabetically
-	function sortTree(nodes: FileTreeNode[]): FileTreeNode[] {
-		return nodes
-			.map((n) => ({ ...n, children: sortTree(n.children) }))
-			.sort((a, b) => {
-				if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
-				return a.name.localeCompare(b.name);
-			});
-	}
-
-	return sortTree(root.children.map(collapse));
-}
-
-function buildPatchString(file: PullFile): string {
-	if (!file.patch) return "";
-	const header = `diff --git a/${file.previousFilename ?? file.filename} b/${file.filename}\n--- a/${file.previousFilename ?? file.filename}\n+++ b/${file.filename}\n`;
-	return header + file.patch;
-}
-
-function encodeFileId(filename: string): string {
-	return `diff-${filename.replaceAll("/", "-").replaceAll(".", "-")}`;
-}
-
-// ---------------------------------------------------------------------------
-// Main Component
-// ---------------------------------------------------------------------------
-
-function ReviewPage() {
-	const { user } = Route.useRouteContext();
-	const { owner, repo, pullId } = Route.useParams();
-	const pullNumber = Number(pullId);
-	const scope = { userId: user.id };
-	const hasMounted = useHasMounted();
-	const queryClient = useQueryClient();
-	const input = { owner, repo, pullNumber };
-
-	const pageQuery = useQuery({
-		...githubPullPageQueryOptions(scope, input),
-		enabled: hasMounted,
-	});
-
-	const filesQuery = useQuery({
-		...githubPullFilesQueryOptions(scope, input),
-		enabled: hasMounted,
-	});
-
-	const reviewCommentsQuery = useQuery({
-		...githubPullReviewCommentsQueryOptions(scope, input),
-		enabled: hasMounted,
-	});
-
-	const pr = pageQuery.data?.detail;
-	const files = filesQuery.data ?? [];
-	const reviewComments = reviewCommentsQuery.data ?? [];
-
-	// Diff style state
-	const [diffStyle, setDiffStyle] = useState<"unified" | "split">("unified");
-
-	// Pending comments state
-	const [pendingComments, setPendingComments] = useState<PendingComment[]>([]);
-	const [activeCommentForm, setActiveCommentForm] = useState<{
-		path: string;
-		line: number;
-		startLine?: number;
-		side: "LEFT" | "RIGHT";
-		startSide?: "LEFT" | "RIGHT";
-	} | null>(null);
-
-	// Track selected line range for highlighting during gutter drag
-	const [selectedLines, setSelectedLines] = useState<SelectedLineRange | null>(
-		null,
-	);
-
-	// Active file tracking
-	const [activeFile, setActiveFile] = useState<string | null>(null);
-	const diffPanelRef = useRef<HTMLDivElement>(null);
-
-	// File tree filter
-	const [fileFilter, setFileFilter] = useState("");
-
-	// Tab registration
-	useRegisterTab(
-		pr
-			? {
-					type: "review",
-					title: pr.title,
-					number: pr.number,
-					url: `/${owner}/${repo}/review/${pullId}`,
-					repo: `${owner}/${repo}`,
-					iconColor: getPrStateConfig(pr).color,
-					additions: pr.additions,
-					deletions: pr.deletions,
-				}
-			: null,
-	);
-
-	// Build file tree
-	const fileTree = useMemo(() => buildFileTree(files), [files]);
-
-	// Filtered files for tree
-	const filteredTree = useMemo(() => {
-		if (!fileFilter) return fileTree;
-		const lower = fileFilter.toLowerCase();
-
-		function filterNodes(nodes: FileTreeNode[]): FileTreeNode[] {
-			return nodes
-				.map((node) => {
-					if (node.type === "file") {
-						return node.name.toLowerCase().includes(lower) ? node : null;
-					}
-					const filtered = filterNodes(node.children);
-					return filtered.length > 0 ? { ...node, children: filtered } : null;
-				})
-				.filter(Boolean) as FileTreeNode[];
-		}
-
-		return filterNodes(fileTree);
-	}, [fileTree, fileFilter]);
-
-	// Scroll to file on click
-	const scrollToFile = useCallback((filename: string) => {
-		const element = document.getElementById(encodeFileId(filename));
-		if (element) {
-			element.scrollIntoView({ behavior: "smooth", block: "start" });
-			setActiveFile(filename);
-		}
-	}, []);
-
-	// Intersection observer for active file tracking
-	useEffect(() => {
-		const panel = diffPanelRef.current;
-		if (!panel || files.length === 0) return;
-
-		const observer = new IntersectionObserver(
-			(entries) => {
-				for (const entry of entries) {
-					if (entry.isIntersecting) {
-						const filename = entry.target.getAttribute("data-filename");
-						if (filename) setActiveFile(filename);
-					}
-				}
-			},
-			{
-				root: panel,
-				rootMargin: "-10% 0px -80% 0px",
-				threshold: 0,
-			},
-		);
-
-		for (const file of files) {
-			const el = document.getElementById(encodeFileId(file.filename));
-			if (el) observer.observe(el);
-		}
-
-		return () => observer.disconnect();
-	}, [files]);
-
-	// Build annotations map per file
-	const annotationsByFile = useMemo(() => {
-		const map = new Map<string, DiffLineAnnotation<PullReviewComment>[]>();
-		for (const comment of reviewComments) {
-			if (comment.line == null) continue;
-			const existing = map.get(comment.path) ?? [];
-			existing.push({
-				side: comment.side === "LEFT" ? "deletions" : "additions",
-				lineNumber: comment.line,
-				metadata: comment,
-			});
-			map.set(comment.path, existing);
-		}
-		return map;
-	}, [reviewComments]);
-
-	// Add pending comment
-	const addPendingComment = useCallback((comment: PendingComment) => {
-		setPendingComments((prev) => [...prev, comment]);
-		setActiveCommentForm(null);
-	}, []);
-
-	// Submit review
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const handleSubmitReview = useCallback(
-		async (body: string, event: ReviewEvent) => {
-			setIsSubmitting(true);
-			try {
-				const success = await submitPullReview({
-					data: {
-						owner,
-						repo,
-						pullNumber,
-						body,
-						event,
-						comments: pendingComments.map((c) => ({
-							path: c.path,
-							line: c.line,
-							side: c.side,
-							body: c.body,
-							...(c.startLine != null && c.startLine !== c.line
-								? { startLine: c.startLine, startSide: c.startSide ?? c.side }
-								: {}),
-						})),
-					},
-				});
-
-				if (success) {
-					setPendingComments([]);
-					queryClient.invalidateQueries({
-						queryKey: githubQueryKeys.all,
-					});
-				}
-			} finally {
-				setIsSubmitting(false);
-			}
-		},
-		[owner, repo, pullNumber, pendingComments, queryClient],
-	);
-
-	if (pageQuery.error) throw pageQuery.error;
-
-	if (!pr) {
-		return (
-			<div className="flex h-full items-center justify-center">
-				<div className="size-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
-			</div>
-		);
-	}
-
-	const stateConfig = getPrStateConfig(pr);
-	const StateIcon = stateConfig.icon;
-
-	const totalAdditions = files.reduce((s, f) => s + f.additions, 0);
-	const totalDeletions = files.reduce((s, f) => s + f.deletions, 0);
-
-	return (
-		<div className="flex h-full flex-col">
-			{/* Toolbar */}
-			<div className="flex shrink-0 items-center gap-3 border-b bg-surface-0 px-4 py-2">
-				<Link
-					to="/$owner/$repo/pull/$pullId"
-					params={{ owner, repo, pullId }}
-					className="flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
-				>
-					<GitPullRequestIcon size={14} strokeWidth={2} />
-					<span>#{pr.number}</span>
-				</Link>
-
-				<div className="mx-1 h-4 w-px bg-border" />
-
-				<div className="flex min-w-0 items-center gap-2">
-					<div className={cn("shrink-0", stateConfig.color)}>
-						<StateIcon size={14} strokeWidth={2} />
-					</div>
-					<span className="truncate text-sm font-medium">{pr.title}</span>
-				</div>
-
-				<div className="ml-auto flex items-center gap-3">
-					<div className="flex items-center gap-2 text-xs text-muted-foreground">
-						<span className="flex items-center gap-1">
-							<FileIcon size={13} strokeWidth={2} />
-							<span className="font-mono tabular-nums font-medium text-foreground">
-								{files.length}
-							</span>{" "}
-							{files.length === 1 ? "file" : "files"}
-						</span>
-						<span className="font-mono tabular-nums font-medium text-green-500">
-							+{totalAdditions}
-						</span>
-						<span className="font-mono tabular-nums font-medium text-red-500">
-							-{totalDeletions}
-						</span>
-					</div>
-
-					<div className="h-4 w-px bg-border" />
-
-					{/* Diff style toggle */}
-					<div className="flex items-center rounded-md border bg-surface-1">
-						<button
-							type="button"
-							className={cn(
-								"rounded-l-md px-2.5 py-1 text-xs font-medium transition-colors",
-								diffStyle === "unified"
-									? "bg-surface-0 text-foreground shadow-sm"
-									: "text-muted-foreground hover:text-foreground",
-							)}
-							onClick={() => setDiffStyle("unified")}
-						>
-							Unified
-						</button>
-						<button
-							type="button"
-							className={cn(
-								"rounded-r-md px-2.5 py-1 text-xs font-medium transition-colors",
-								diffStyle === "split"
-									? "bg-surface-0 text-foreground shadow-sm"
-									: "text-muted-foreground hover:text-foreground",
-							)}
-							onClick={() => setDiffStyle("split")}
-						>
-							Split
-						</button>
-					</div>
-
-					<div className="h-4 w-px bg-border" />
-
-					{/* Submit review button */}
-					<ReviewSubmitPopover
-						pendingCount={pendingComments.length}
-						isSubmitting={isSubmitting}
-						onSubmit={handleSubmitReview}
-					/>
-				</div>
-			</div>
-
-			{/* Main content: file tree + diffs */}
-			<ResizablePanelGroup direction="horizontal" className="flex-1">
-				{/* File tree sidebar */}
-				<ResizablePanel
-					defaultSize={20}
-					minSize={12}
-					maxSize={40}
-					className="border-r"
-				>
-					<div className="flex h-full flex-col">
-						{/* Filter */}
-						<div className="px-3 py-2">
-							<div className="relative flex items-center rounded-md border bg-surface-0 px-2.5 py-1.5">
-								<SearchIcon
-									size={13}
-									strokeWidth={2}
-									className="shrink-0 text-muted-foreground"
-								/>
-								<input
-									type="text"
-									placeholder="Filter files..."
-									value={fileFilter}
-									onChange={(e) => setFileFilter(e.target.value)}
-									className="ml-2 w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground"
-								/>
-							</div>
-						</div>
-
-						{/* Tree */}
-						<div className="flex-1 overflow-auto py-1">
-							{filteredTree.map((node) => (
-								<FileTreeNodeComponent
-									key={node.path}
-									node={node}
-									depth={0}
-									activeFile={activeFile}
-									onFileClick={scrollToFile}
-								/>
-							))}
-						</div>
-
-						{/* Summary */}
-						<div className="border-t px-3 py-2 text-xs text-muted-foreground">
-							{files.length} {files.length === 1 ? "file" : "files"} changed
-						</div>
-					</div>
-				</ResizablePanel>
-
-				<ResizableHandle />
-
-				{/* Diff panel */}
-				<ResizablePanel defaultSize={80}>
-					<div ref={diffPanelRef} className="h-full overflow-auto">
-						<div className="flex flex-col gap-4 p-4">
-							{files.map((file) => (
-								<FileDiffBlock
-									key={file.filename}
-									file={file}
-									diffStyle={diffStyle}
-									annotations={annotationsByFile.get(file.filename) ?? []}
-									pendingComments={pendingComments.filter(
-										(c) => c.path === file.filename,
-									)}
-									activeCommentForm={
-										activeCommentForm?.path === file.filename
-											? activeCommentForm
-											: null
-									}
-									selectedLines={
-										activeCommentForm?.path === file.filename
-											? selectedLines
-											: null
-									}
-									onGutterClick={(range) => {
-										const side = range.side === "deletions" ? "LEFT" : "RIGHT";
-										const isMultiLine = range.start !== range.end;
-										setActiveCommentForm({
-											path: file.filename,
-											line: Math.max(range.start, range.end),
-											side,
-											...(isMultiLine
-												? {
-														startLine: Math.min(range.start, range.end),
-														startSide:
-															(range.endSide ?? range.side) === "deletions"
-																? "LEFT"
-																: "RIGHT",
-													}
-												: {}),
-										});
-										setSelectedLines(range);
-									}}
-									onCancelComment={() => {
-										setActiveCommentForm(null);
-										setSelectedLines(null);
-									}}
-									onAddComment={(comment) => {
-										addPendingComment(comment);
-										setSelectedLines(null);
-									}}
-								/>
-							))}
-
-							{files.length === 0 && !filesQuery.isLoading && (
-								<div className="flex items-center justify-center py-20 text-sm text-muted-foreground">
-									No files changed in this pull request.
-								</div>
-							)}
-						</div>
-					</div>
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-// ---------------------------------------------------------------------------
-// File Tree Node
-// ---------------------------------------------------------------------------
-
-function FileTreeNodeComponent({
-	node,
-	depth,
-	activeFile,
-	onFileClick,
-}: {
-	node: FileTreeNode;
-	depth: number;
-	activeFile: string | null;
-	onFileClick: (path: string) => void;
-}) {
-	const [isOpen, setIsOpen] = useState(true);
-
-	if (node.type === "directory") {
-		return (
-			<div>
-				<button
-					type="button"
-					className="flex w-full items-center gap-1.5 px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-surface-1 hover:text-foreground"
-					style={{ paddingLeft: `${depth * 12 + 12}px` }}
-					onClick={() => setIsOpen(!isOpen)}
-				>
-					<svg
-						aria-hidden="true"
-						className={cn(
-							"size-3 shrink-0 text-muted-foreground/60 transition-transform",
-							isOpen && "rotate-90",
-						)}
-						viewBox="0 0 16 16"
-						fill="currentColor"
-					>
-						<path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
-					</svg>
-					<FolderIcon
-						size={14}
-						strokeWidth={2}
-						className="shrink-0 text-muted-foreground"
-					/>
-					<span className="truncate font-medium">{node.name}</span>
-				</button>
-				{isOpen && (
-					<div>
-						{node.children.map((child) => (
-							<FileTreeNodeComponent
-								key={child.path}
-								node={child}
-								depth={depth + 1}
-								activeFile={activeFile}
-								onFileClick={onFileClick}
-							/>
-						))}
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	const isActive = activeFile === node.path;
-
-	return (
-		<button
-			type="button"
-			className={cn(
-				"flex w-full items-center gap-1.5 px-3 py-1.5 text-[13px] transition-colors hover:bg-surface-1",
-				isActive ? "bg-surface-1 text-foreground" : "text-muted-foreground",
-			)}
-			style={{ paddingLeft: `${depth * 12 + 12 + 18}px` }}
-			onClick={() => onFileClick(node.path)}
-		>
-			<FileIcon
-				size={14}
-				strokeWidth={2}
-				className="shrink-0 text-muted-foreground"
-			/>
-			<span
-				className={cn("truncate", node.status === "removed" && "line-through")}
-			>
-				{node.name}
-			</span>
-			{(node.additions != null || node.deletions != null) && (
-				<span className="ml-auto flex shrink-0 items-center gap-1 font-mono tabular-nums">
-					{node.additions != null && node.additions > 0 && (
-						<span className="text-green-500">+{node.additions}</span>
-					)}
-					{node.deletions != null && node.deletions > 0 && (
-						<span className="text-red-500">-{node.deletions}</span>
-					)}
-				</span>
-			)}
-		</button>
-	);
-}
-
-// ---------------------------------------------------------------------------
-// File Diff Block
-// ---------------------------------------------------------------------------
-
-function FileDiffBlock({
-	file,
-	diffStyle,
-	annotations,
-	pendingComments,
-	activeCommentForm,
-	selectedLines,
-	onGutterClick,
-	onCancelComment,
-	onAddComment,
-}: {
-	file: PullFile;
-	diffStyle: "unified" | "split";
-	annotations: DiffLineAnnotation<PullReviewComment>[];
-	pendingComments: PendingComment[];
-	activeCommentForm: {
-		path: string;
-		line: number;
-		startLine?: number;
-		side: "LEFT" | "RIGHT";
-		startSide?: "LEFT" | "RIGHT";
-	} | null;
-	selectedLines: SelectedLineRange | null;
-	onGutterClick: (range: SelectedLineRange) => void;
-	onCancelComment: () => void;
-	onAddComment: (comment: PendingComment) => void;
-}) {
-	const [isCollapsed, setIsCollapsed] = useState(false);
-	const { resolvedTheme } = useTheme();
-	const isDark = resolvedTheme === "dark";
-
-	// Combine existing review comments and pending comments into annotations
-	const allAnnotations = useMemo(() => {
-		const result: DiffLineAnnotation<ReviewAnnotation>[] = [...annotations];
-
-		for (const pending of pendingComments) {
-			result.push({
-				side: pending.side === "LEFT" ? "deletions" : "additions",
-				lineNumber: pending.line,
-				metadata: pending,
-			});
-		}
-
-		// Add active comment form as an annotation
-		if (activeCommentForm) {
-			result.push({
-				side: activeCommentForm.side === "LEFT" ? "deletions" : "additions",
-				lineNumber: activeCommentForm.line,
-				metadata: {
-					path: activeCommentForm.path,
-					line: activeCommentForm.line,
-					startLine: activeCommentForm.startLine,
-					side: activeCommentForm.side,
-					startSide: activeCommentForm.startSide,
-					body: "__FORM__",
-				} satisfies PendingComment,
-			});
-		}
-
-		return result;
-	}, [annotations, pendingComments, activeCommentForm]);
-
-	const mutedFg = isDark
-		? "oklch(0.705 0.015 286.067)"
-		: "oklch(0.552 0.016 285.938)";
-
-	const diffOptions = useMemo(
-		() => ({
-			diffStyle,
-			theme: {
-				dark: "vercel-dark" as const,
-				light: "vercel-light" as const,
-			},
-			lineDiffType: "word" as const,
-			hunkSeparators: "line-info" as const,
-			overflow: "scroll" as const,
-			disableFileHeader: true,
-			enableGutterUtility: true,
-			enableLineSelection: true,
-			onGutterUtilityClick: onGutterClick,
-			unsafeCSS: [
-				`:host { color-scheme: ${isDark ? "dark" : "light"}; ${isDark ? "" : "--diffs-light-bg: oklch(0.967 0.001 286.375);"} }`,
-				`:host { --diffs-font-family: 'Geist Mono Variable', 'SF Mono', ui-monospace, 'Cascadia Code', monospace; }`,
-				`:host { --diffs-selection-base: ${mutedFg}; }`,
-				`[data-utility-button] { background-color: ${mutedFg}; }`,
-				`[data-line-annotation] { font-family: 'Inter Variable', 'Inter', 'Avenir Next', ui-sans-serif, system-ui, sans-serif; }`,
-				`[data-line-annotation] code { font-family: var(--diffs-font-family, var(--diffs-font-fallback)); }`,
-				isDark
-					? `:host { --diffs-bg-addition-override: color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-addition-base)); --diffs-bg-addition-number-override: color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-addition-base)); --diffs-bg-addition-emphasis-override: color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-addition-base)); --diffs-bg-deletion-override: color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-deletion-base)); --diffs-bg-deletion-number-override: color-mix(in lab, var(--diffs-bg) 88%, var(--diffs-deletion-base)); --diffs-bg-deletion-emphasis-override: color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base)); }`
-					: `:host { --diffs-bg-addition-override: color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-addition-base)); --diffs-bg-addition-number-override: color-mix(in lab, var(--diffs-bg) 78%, var(--diffs-addition-base)); --diffs-bg-deletion-override: color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-deletion-base)); --diffs-bg-deletion-number-override: color-mix(in lab, var(--diffs-bg) 78%, var(--diffs-deletion-base)); }`,
-			].join("\n"),
-		}),
-		[diffStyle, onGutterClick, isDark, mutedFg],
-	);
-
-	if (!file.patch) {
-		return (
-			<div id={encodeFileId(file.filename)} data-filename={file.filename}>
-				<FileHeader
-					file={file}
-					isCollapsed={isCollapsed}
-					onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
-				/>
-				{!isCollapsed && (
-					<div className="flex items-center justify-center rounded-b-lg border border-t-0 bg-surface-0 py-8 text-sm text-muted-foreground">
-						Binary file or diff too large to display
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	const patchString = buildPatchString(file);
-
-	return (
-		<div id={encodeFileId(file.filename)} data-filename={file.filename}>
-			<FileHeader
-				file={file}
-				isCollapsed={isCollapsed}
-				onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
-			/>
-			{!isCollapsed && (
-				<div className="px-2 pb-2">
-					<Suspense>
-						<PatchDiff
-							patch={patchString}
-							options={diffOptions}
-							selectedLines={selectedLines}
-							lineAnnotations={allAnnotations}
-							renderAnnotation={(
-								annotation: DiffLineAnnotation<ReviewAnnotation>,
-							) => {
-								const data = annotation.metadata as
-									| PendingComment
-									| PullReviewComment
-									| null;
-								if (!data) return null;
-
-								// Pending comment form
-								if ("body" in data && data.body === "__FORM__") {
-									const formData = data as PendingComment;
-									return (
-										<InlineCommentForm
-											isMultiLine={
-												formData.startLine != null &&
-												formData.startLine !== formData.line
-											}
-											startLine={formData.startLine}
-											endLine={formData.line}
-											onSubmit={(body) =>
-												onAddComment({
-													path: file.filename,
-													line: formData.line,
-													startLine: formData.startLine,
-													side: formData.side,
-													startSide: formData.startSide,
-													body,
-												})
-											}
-											onCancel={onCancelComment}
-										/>
-									);
-								}
-
-								// Pending comment display
-								if ("body" in data && !("id" in data)) {
-									return (
-										<PendingCommentBubble comment={data as PendingComment} />
-									);
-								}
-
-								// Existing review comment
-								if ("id" in data) {
-									return (
-										<ReviewCommentBubble comment={data as PullReviewComment} />
-									);
-								}
-
-								return null;
-							}}
-						/>
-					</Suspense>
-				</div>
-			)}
-		</div>
-	);
-}
-
-// ---------------------------------------------------------------------------
-// File Header
-// ---------------------------------------------------------------------------
-
-function FileHeader({
-	file,
-	isCollapsed,
-	onToggleCollapse,
-}: {
-	file: PullFile;
-	isCollapsed: boolean;
-	onToggleCollapse: () => void;
-}) {
-	return (
-		<div className="sticky top-2 z-10 flex items-center gap-2 rounded-lg border bg-surface-1 px-3 py-2">
-			<button
-				type="button"
-				onClick={onToggleCollapse}
-				className="flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
-			>
-				<svg
-					aria-hidden="true"
-					className={cn(
-						"size-3 shrink-0 transition-transform",
-						!isCollapsed && "rotate-90",
-					)}
-					viewBox="0 0 16 16"
-					fill="currentColor"
-				>
-					<path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
-				</svg>
-			</button>
-
-			<span className="truncate text-xs font-medium font-mono">
-				{file.previousFilename && file.previousFilename !== file.filename ? (
-					<>
-						<span className="text-muted-foreground line-through">
-							{file.previousFilename}
-						</span>
-						<span className="mx-1 text-muted-foreground">→</span>
-						{file.filename}
-					</>
-				) : (
-					file.filename
-				)}
-			</span>
-
-			<span className="ml-auto flex items-center gap-2 font-mono text-xs tabular-nums">
-				{file.additions > 0 && (
-					<span className="font-medium text-green-500">+{file.additions}</span>
-				)}
-				{file.deletions > 0 && (
-					<span className="font-medium text-red-500">-{file.deletions}</span>
-				)}
-			</span>
-		</div>
-	);
-}
-
-// ---------------------------------------------------------------------------
-// Inline Comment Form
-// ---------------------------------------------------------------------------
-
-function InlineCommentForm({
-	isMultiLine,
-	startLine,
-	endLine,
-	onSubmit,
-	onCancel,
-}: {
-	isMultiLine?: boolean;
-	startLine?: number;
-	endLine?: number;
-	onSubmit: (body: string) => void;
-	onCancel: () => void;
-}) {
-	const [body, setBody] = useState("");
-	const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-	useEffect(() => {
-		textareaRef.current?.focus();
-	}, []);
-
-	return (
-		<div className="mx-2 my-1 flex flex-col gap-2 rounded-lg border bg-surface-0 p-3">
-			{isMultiLine && startLine != null && endLine != null && (
-				<div className="text-xs text-muted-foreground">
-					Commenting on lines {startLine}–{endLine}
-				</div>
-			)}
-			<textarea
-				ref={textareaRef}
-				value={body}
-				onChange={(e) => setBody(e.target.value)}
-				placeholder="Leave a comment..."
-				className="min-h-[60px] w-full resize-y rounded-md border bg-background px-3 py-2 text-xs outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-			/>
-			<div className="flex items-center justify-end gap-2">
-				<button
-					type="button"
-					onClick={onCancel}
-					className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
-				>
-					Cancel
-				</button>
-				<button
-					type="button"
-					onClick={() => {
-						if (body.trim()) onSubmit(body.trim());
-					}}
-					disabled={!body.trim()}
-					className="rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity disabled:opacity-50"
-				>
-					Add comment
-				</button>
-			</div>
-		</div>
-	);
-}
-
-// ---------------------------------------------------------------------------
-// Comment Bubbles
-// ---------------------------------------------------------------------------
-
-function ReviewCommentBubble({ comment }: { comment: PullReviewComment }) {
-	return (
-		<div className="mx-2 my-1 rounded-lg border bg-surface-0 p-3">
-			<div className="mb-2 flex items-center gap-2">
-				{comment.author && (
-					<>
-						<img
-							src={comment.author.avatarUrl}
-							alt={comment.author.login}
-							className="size-5 rounded-full border border-border"
-						/>
-						<span className="text-xs font-medium">{comment.author.login}</span>
-					</>
-				)}
-				<span className="text-xs text-muted-foreground">
-					{formatRelativeTime(comment.createdAt)}
-				</span>
-			</div>
-			<div className="text-xs">
-				<Markdown>{comment.body}</Markdown>
-			</div>
-		</div>
-	);
-}
-
-function PendingCommentBubble({ comment }: { comment: PendingComment }) {
-	const isMultiLine =
-		comment.startLine != null && comment.startLine !== comment.line;
-
-	return (
-		<div className="mx-2 my-1 rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3">
-			<div className="mb-1 flex items-center gap-1.5 text-xs text-yellow-600 dark:text-yellow-400">
-				<CommentIcon size={12} strokeWidth={2} />
-				<span className="font-medium">
-					Pending
-					{isMultiLine ? ` (lines ${comment.startLine}–${comment.line})` : ""}
-				</span>
-			</div>
-			<div className="text-xs">
-				<Markdown>{comment.body}</Markdown>
-			</div>
-		</div>
-	);
-}
-
-// ---------------------------------------------------------------------------
-// Review Submit Popover
-// ---------------------------------------------------------------------------
-
-function ReviewSubmitPopover({
-	pendingCount,
-	isSubmitting,
-	onSubmit,
-}: {
-	pendingCount: number;
-	isSubmitting: boolean;
-	onSubmit: (body: string, event: ReviewEvent) => void;
-}) {
-	const [body, setBody] = useState("");
-	const [event, setEvent] = useState<ReviewEvent>("COMMENT");
-	const [isOpen, setIsOpen] = useState(false);
-
-	const handleSubmit = () => {
-		onSubmit(body, event);
-		setBody("");
-		setIsOpen(false);
-	};
-
-	const reviewOptions: Array<{
-		value: ReviewEvent;
-		label: string;
-		description: string;
-		icon: typeof CommentIcon;
-		color: string;
-	}> = [
-		{
-			value: "COMMENT",
-			label: "Comment",
-			description: "Submit general feedback without explicit approval.",
-			icon: CommentIcon,
-			color: "text-foreground",
-		},
-		{
-			value: "APPROVE",
-			label: "Approve",
-			description: "Submit feedback and approve merging these changes.",
-			icon: TickIcon,
-			color: "text-green-500",
-		},
-		{
-			value: "REQUEST_CHANGES",
-			label: "Request changes",
-			description: "Submit feedback suggesting changes.",
-			icon: GitBranchIcon,
-			color: "text-red-500",
-		},
-	];
-
-	return (
-		<Popover open={isOpen} onOpenChange={setIsOpen}>
-			<PopoverTrigger asChild>
-				<button
-					type="button"
-					className="flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700"
-				>
-					Submit review
-					{pendingCount > 0 && (
-						<span className="flex size-4 items-center justify-center rounded-full bg-white/20 text-[10px] font-bold">
-							{pendingCount}
-						</span>
-					)}
-				</button>
-			</PopoverTrigger>
-
-			<PopoverContent align="end" className="w-96 p-0" sideOffset={8}>
-				<div className="flex flex-col">
-					<div className="flex items-center justify-between border-b px-4 py-3">
-						<h3 className="text-sm font-semibold">Finish your review</h3>
-						<button
-							type="button"
-							className="text-muted-foreground transition-colors hover:text-foreground"
-							onClick={() => setIsOpen(false)}
-						>
-							<CloseIcon size={14} strokeWidth={2} />
-						</button>
-					</div>
-
-					<div className="p-4">
-						<textarea
-							value={body}
-							onChange={(e) => setBody(e.target.value)}
-							placeholder="Leave a comment"
-							className="min-h-[80px] w-full resize-y rounded-md border bg-background px-3 py-2 text-xs outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-						/>
-					</div>
-
-					<div className="flex flex-col gap-1 border-t px-4 py-3">
-						{reviewOptions.map((option) => {
-							const Icon = option.icon;
-							return (
-								<label
-									key={option.value}
-									className="flex cursor-pointer items-start gap-3 rounded-md p-2 transition-colors hover:bg-surface-1"
-								>
-									<input
-										type="radio"
-										name="review-event"
-										value={option.value}
-										checked={event === option.value}
-										onChange={() => setEvent(option.value)}
-										className="mt-0.5"
-									/>
-									<div className="flex flex-col gap-0.5">
-										<span
-											className={cn(
-												"flex items-center gap-1.5 text-xs font-semibold",
-												option.color,
-											)}
-										>
-											<Icon size={13} strokeWidth={2} />
-											{option.label}
-										</span>
-										<span className="text-[11px] text-muted-foreground">
-											{option.description}
-										</span>
-									</div>
-								</label>
-							);
-						})}
-					</div>
-
-					<div className="flex items-center justify-between border-t px-4 py-3">
-						<button
-							type="button"
-							onClick={() => setIsOpen(false)}
-							className="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
-						>
-							Cancel
-						</button>
-						<button
-							type="button"
-							onClick={handleSubmit}
-							disabled={isSubmitting}
-							className="rounded-md bg-green-600 px-4 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
-						>
-							{isSubmitting
-								? "Submitting..."
-								: `Submit review${pendingCount > 0 ? ` (${pendingCount})` : ""}`}
-						</button>
-					</div>
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-}

From dd0d735cd5cdbfcf6f27b7008f3f27b5196d0218 Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Thu, 9 Apr 2026 09:50:10 -0400
Subject: [PATCH 2/3] Fix side/startSide swap in multi-line review comment
 selection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When selecting lines top-to-bottom in a split diff, the side metadata
sent to the GitHub API was swapped — line got the anchor's side instead
of the endpoint's side. Now correctly assigns sides based on selection
direction.
---
 .../components/pulls/review/review-page.tsx   | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/pulls/review/review-page.tsx b/apps/dashboard/src/components/pulls/review/review-page.tsx
index 629cbd4..4c280a3 100644
--- a/apps/dashboard/src/components/pulls/review/review-page.tsx
+++ b/apps/dashboard/src/components/pulls/review/review-page.tsx
@@ -370,19 +370,26 @@ export function ReviewPage() {
 											: null
 									}
 									onGutterClick={(range) => {
-										const side = range.side === "deletions" ? "LEFT" : "RIGHT";
 										const isMultiLine = range.start !== range.end;
+										const startIsSmaller = range.start <= range.end;
+										const lineSide = startIsSmaller
+											? (range.endSide ?? range.side)
+											: range.side;
+										const startLineSide = startIsSmaller
+											? range.side
+											: (range.endSide ?? range.side);
+										const toGithubSide = (s: string) =>
+											s === "deletions"
+												? ("LEFT" as const)
+												: ("RIGHT" as const);
 										setActiveCommentForm({
 											path: file.filename,
 											line: Math.max(range.start, range.end),
-											side,
+											side: toGithubSide(lineSide),
 											...(isMultiLine
 												? {
 														startLine: Math.min(range.start, range.end),
-														startSide:
-															(range.endSide ?? range.side) === "deletions"
-																? "LEFT"
-																: "RIGHT",
+														startSide: toGithubSide(startLineSide),
 													}
 												: {}),
 										});

From abbd785002698c6539a9d87358efc15aa7f362e9 Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Thu, 9 Apr 2026 09:51:54 -0400
Subject: [PATCH 3/3] Fix TS error: accept string | undefined in toGithubSide
 helper

---
 apps/dashboard/src/components/pulls/review/review-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/pulls/review/review-page.tsx b/apps/dashboard/src/components/pulls/review/review-page.tsx
index 4c280a3..4837621 100644
--- a/apps/dashboard/src/components/pulls/review/review-page.tsx
+++ b/apps/dashboard/src/components/pulls/review/review-page.tsx
@@ -378,7 +378,7 @@ export function ReviewPage() {
 										const startLineSide = startIsSmaller
 											? range.side
 											: (range.endSide ?? range.side);
-										const toGithubSide = (s: string) =>
+										const toGithubSide = (s: string | undefined) =>
 											s === "deletions"
 												? ("LEFT" as const)
 												: ("RIGHT" as const);