@kitlangton/ghui 0.1.18 → 0.1.20

package/src/ui/FooterHints.tsx

@@ -1,190 +1,99 @@
+import { Data } from "effect"
 import { colors } from "./colors.js"
-import { TextLine } from "./primitives.js"
+import { HintRow, type HintItem } from "./primitives.js"
 
-export interface RetryProgress {
-	readonly attempt: number
-	readonly max: number
+export type RetryProgress = Data.TaggedEnum<{
+	Idle: {}
+	Retrying: { readonly attempt: number; readonly max: number }
+}>
+
+export const RetryProgress = Data.taggedEnum<RetryProgress>()
+export const initialRetryProgress: RetryProgress = RetryProgress.Idle()
+
+interface HintsContext {
+	readonly filterEditing: boolean
+	readonly showFilterClear: boolean
+	readonly detailFullView: boolean
+	readonly diffFullView: boolean
+	readonly diffCommentMode: boolean
+	readonly hasSelection: boolean
+	readonly canCloseSelection: boolean
+	readonly hasError: boolean
+	readonly isLoading: boolean
+	readonly loadingIndicator: string
+	readonly retryProgress: RetryProgress
 }
 
-export const FooterHints = ({
-	filterEditing,
-	showFilterClear,
-	detailFullView,
-	diffFullView,
-	diffCommentMode,
-	hasSelection,
-	canCloseSelection,
-	hasError,
-	isLoading,
-	loadingIndicator,
-	retryProgress,
-}: {
-	filterEditing: boolean
-	showFilterClear: boolean
-	detailFullView: boolean
-	diffFullView: boolean
-	diffCommentMode: boolean
-	hasSelection: boolean
-	canCloseSelection: boolean
-	hasError: boolean
-	isLoading: boolean
-	loadingIndicator: string
-	retryProgress: RetryProgress | null
-}) => {
-	if (filterEditing) {
-		return (
-			<TextLine>
-				<span fg={colors.count}>search</span>
-				<span fg={colors.muted}> typing  </span>
-				<span fg={colors.count}>↑↓</span>
-				<span fg={colors.muted}> move  </span>
-				<span fg={colors.count}>enter</span>
-				<span fg={colors.muted}> apply  </span>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> cancel  </span>
-				<span fg={colors.count}>ctrl-u</span>
-				<span fg={colors.muted}> clear  </span>
-				<span fg={colors.count}>ctrl-w</span>
-				<span fg={colors.muted}> word</span>
-			</TextLine>
-		)
-	}
+const filterEditingHints: readonly HintItem[] = [
+	{ key: "search", label: "typing" },
+	{ key: "↑↓", label: "move" },
+	{ key: "enter", label: "apply" },
+	{ key: "esc", label: "cancel" },
+	{ key: "ctrl-u", label: "clear" },
+	{ key: "ctrl-w", label: "word" },
+]
+
+const diffCommentModeHints: readonly HintItem[] = [
+	{ key: "↑↓", label: "line" },
+	{ key: "pgup/pgdn", label: "jump" },
+	{ key: "←→", label: "side" },
+	{ key: "enter", label: "open" },
+	{ key: "a", label: "comment" },
+	{ key: "c", label: "done" },
+	{ key: "[]", label: "files" },
+	{ key: "esc", label: "back" },
+]
 
-	if (diffFullView) {
-		if (diffCommentMode) {
-			return (
-				<TextLine>
-					<span fg={colors.count}>↑↓</span>
-					<span fg={colors.muted}> line  </span>
-					<span fg={colors.count}>pgup/pgdn</span>
-					<span fg={colors.muted}> jump  </span>
-					<span fg={colors.count}>←→</span>
-					<span fg={colors.muted}> side  </span>
-					<span fg={colors.count}>enter</span>
-					<span fg={colors.muted}> open  </span>
-					<span fg={colors.count}>a</span>
-					<span fg={colors.muted}> comment  </span>
-					<span fg={colors.count}>c</span>
-					<span fg={colors.muted}> done  </span>
-					<span fg={colors.count}>[]</span>
-					<span fg={colors.muted}> files  </span>
-					<span fg={colors.count}>esc</span>
-					<span fg={colors.muted}> back</span>
-				</TextLine>
-			)
-		}
-		return (
-			<TextLine>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> back  </span>
-				<span fg={colors.count}>v</span>
-				<span fg={colors.muted}> view  </span>
-				<span fg={colors.count}>w</span>
-				<span fg={colors.muted}> wrap  </span>
-				<span fg={colors.count}>c</span>
-				<span fg={colors.muted}> comment  </span>
-				<span fg={colors.count}>[]</span>
-				<span fg={colors.muted}> files  </span>
-				<span fg={colors.count}>r</span>
-				<span fg={colors.muted}> reload  </span>
-				<span fg={colors.count}>o</span>
-				<span fg={colors.muted}> open  </span>
-				<span fg={colors.count}>q</span>
-				<span fg={colors.muted}> quit</span>
-			</TextLine>
-		)
-	}
+const diffViewHints: readonly HintItem[] = [
+	{ key: "esc", label: "back" },
+	{ key: "v", label: "view" },
+	{ key: "w", label: "wrap" },
+	{ key: "c", label: "comment" },
+	{ key: "[]", label: "files" },
+	{ key: "r", label: "reload" },
+	{ key: "o", label: "open" },
+	{ key: "q", label: "quit" },
+]
 
-	if (detailFullView) {
-		return (
-			<TextLine>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> back  </span>
-				<span fg={colors.count}>↑↓</span>
-				<span fg={colors.muted}> scroll  </span>
-				<span fg={colors.count}>r</span>
-				<span fg={colors.muted}>{hasError ? " retry  " : " refresh  "}</span>
-				<span fg={colors.count}>t</span>
-				<span fg={colors.muted}> theme  </span>
-				{hasSelection ? (
-					<>
-						<span fg={colors.count}>s</span>
-						<span fg={colors.muted}> state  </span>
-						<span fg={colors.count}>d</span>
-						<span fg={colors.muted}> diff  </span>
-						<span fg={colors.count}>l</span>
-						<span fg={colors.muted}> labels  </span>
-						<span fg={colors.count}>m</span>
-						<span fg={colors.muted}> merge  </span>
-						{canCloseSelection ? (
-							<>
-								<span fg={colors.count}>x</span>
-								<span fg={colors.muted}> close  </span>
-							</>
-						) : null}
-					</>
-				) : null}
-				<span fg={colors.count}>o</span>
-				<span fg={colors.muted}> open  </span>
-				<span fg={colors.count}>y</span>
-				<span fg={colors.muted}> copy  </span>
-				<span fg={colors.count}>q</span>
-				<span fg={colors.muted}> quit</span>
-			</TextLine>
-		)
-	}
+const detailFullViewHints = (ctx: HintsContext): readonly HintItem[] => [
+	{ key: "esc", label: "back" },
+	{ key: "↑↓", label: "scroll" },
+	{ key: "r", label: ctx.hasError ? "retry" : "refresh" },
+	{ key: "t", label: "theme" },
+	{ key: "s", label: "state", when: ctx.hasSelection },
+	{ key: "d", label: "diff", when: ctx.hasSelection },
+	{ key: "l", label: "labels", when: ctx.hasSelection },
+	{ key: "m", label: "merge", when: ctx.hasSelection },
+	{ key: "x", label: "close", when: ctx.hasSelection && ctx.canCloseSelection },
+	{ key: "o", label: "open" },
+	{ key: "y", label: "copy" },
+	{ key: "q", label: "quit" },
+]
 
-	return (
-		<TextLine>
-			<span fg={colors.count}>tab</span>
-			<span fg={colors.muted}> queue  </span>
-			<span fg={colors.count}>/</span>
-			<span fg={colors.muted}> filter  </span>
-			<span fg={colors.count}>t</span>
-			<span fg={colors.muted}> theme  </span>
-			{showFilterClear ? (
-				<>
-					<span fg={colors.count}>esc</span>
-					<span fg={colors.muted}> clear  </span>
-				</>
-			) : null}
-			{retryProgress ? (
-				<>
-					<span fg={colors.status.pending}>retry</span>
-					<span fg={colors.muted}> {retryProgress.attempt}/{retryProgress.max}  </span>
-				</>
-			) : isLoading ? (
-				<>
-					<span fg={colors.status.pending}>{loadingIndicator}</span>
-					<span fg={colors.muted}> loading  </span>
-				</>
-			) : null}
-			<span fg={colors.count}>r</span>
-			<span fg={colors.muted}>{hasError ? " retry  " : " refresh  "}</span>
-			{hasSelection ? (
-				<>
-					<span fg={colors.count}>s</span>
-					<span fg={colors.muted}> state  </span>
-					<span fg={colors.count}>d</span>
-					<span fg={colors.muted}> diff  </span>
-					<span fg={colors.count}>l</span>
-					<span fg={colors.muted}> labels  </span>
-					<span fg={colors.count}>m</span>
-					<span fg={colors.muted}> merge  </span>
-					{canCloseSelection ? (
-						<>
-							<span fg={colors.count}>x</span>
-							<span fg={colors.muted}> close  </span>
-						</>
-					) : null}
-					<span fg={colors.count}>o</span>
-					<span fg={colors.muted}> open  </span>
-					<span fg={colors.count}>y</span>
-					<span fg={colors.muted}> copy  </span>
-				</>
-			) : null}
-			<span fg={colors.count}>q</span>
-			<span fg={colors.muted}> quit</span>
-		</TextLine>
-	)
+const defaultHints = (ctx: HintsContext): readonly HintItem[] => {
+	const retrying = ctx.retryProgress._tag === "Retrying"
+	return [
+		{ key: "/", label: "filter" },
+		{ key: "t", label: "theme" },
+		{ key: "esc", label: "clear", when: ctx.showFilterClear },
+		{ key: "retry", label: retrying ? `${(ctx.retryProgress as { attempt: number; max: number }).attempt}/${(ctx.retryProgress as { attempt: number; max: number }).max}` : "", when: retrying, keyFg: colors.status.pending },
+		{ key: ctx.loadingIndicator, label: "loading", when: !retrying && ctx.isLoading, keyFg: colors.status.pending },
+		{ key: "r", label: "retry", when: ctx.hasError },
+		{ key: "d", label: "diff", when: ctx.hasSelection },
+		{ key: "l", label: "labels", when: ctx.hasSelection },
+		{ key: "m", label: "merge", when: ctx.hasSelection },
+		{ key: "x", label: "close", when: ctx.hasSelection && ctx.canCloseSelection },
+		{ key: "o", label: "open", when: ctx.hasSelection },
+		{ key: "y", label: "copy", when: ctx.hasSelection },
+		{ key: "ctrl-p", label: "commands" },
+	]
 }
+
+const footerHints = (ctx: HintsContext): readonly HintItem[] => {
+	if (ctx.filterEditing) return filterEditingHints
+	if (ctx.diffFullView) return ctx.diffCommentMode ? diffCommentModeHints : diffViewHints
+	if (ctx.detailFullView) return detailFullViewHints(ctx)
+	return defaultHints(ctx)
+}
+
+export const FooterHints = (props: HintsContext) => <HintRow items={footerHints(props)} />

package/src/ui/PullRequestDiffPane.tsx

@@ -1,34 +1,31 @@
-import type { DiffRenderable, ScrollBoxRenderable } from "@opentui/core"
+import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/core"
 import { useMemo, type Ref } from "react"
-import type { PullRequestItem, PullRequestReviewComment } from "../domain.js"
+import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { createDiffSyntaxStyle, diffFileStats, diffFileStatText, diffStatText, safeDiffFileIndex, type DiffCommentAnchor, type PullRequestDiffState, type StackedDiffFilePatch } from "./diff.js"
+import { createDiffSyntaxStyle, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
-import { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
+import { DiffStats } from "./diffStats.js"
+import { Divider, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
 import { shortRepoName } from "./pullRequests.js"
 
-const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
-	if (!pullRequest.detailLoaded) return <span fg={colors.muted}>loading details</span>
-	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
-	type Part = { key: string; text: string; color: string }
-	const rawParts: Array<Part | null> = [
-		pullRequest.additions > 0 ? { key: "additions", text: `+${pullRequest.additions}`, color: colors.status.passing } : null,
-		pullRequest.deletions > 0 ? { key: "deletions", text: `-${pullRequest.deletions}`, color: colors.status.failing } : null,
-		{ key: "files", text: files, color: colors.muted },
-	]
-	const parts = rawParts.filter((part): part is Part => part !== null)
-
+const DiffPaneHeader = ({ pullRequest, paneWidth }: { pullRequest: PullRequestItem; paneWidth: number }) => {
+	const stats = diffStatText(pullRequest)
+	const headerWidth = Math.max(24, paneWidth - 2)
+	const leftHeader = `#${pullRequest.number} ${shortRepoName(pullRequest.repository)}`
+	const headerGap = Math.max(2, headerWidth - leftHeader.length - stats.length)
 	return (
-		<>
-			{parts.map((part, index) => (
-				<span key={part.key} fg={part.color}>{`${index > 0 ? " " : ""}${part.text}`}</span>
-			))}
-		</>
+		<PaddedRow>
+			<TextLine>
+				<span fg={colors.count}>#{pullRequest.number}</span>
+				<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
+				<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+				<DiffStats pullRequest={pullRequest} />
+			</TextLine>
+		</PaddedRow>
 	)
 }
 
-const FileStats = ({ file }: { file: StackedDiffFilePatch["file"] }) => {
-	const stats = diffFileStats(file)
+const FileStats = ({ stats }: { stats: DiffFileStats }) => {
 	return (
 		<>
 			{stats.additions > 0 ? <span fg={colors.status.passing}>{`+${stats.additions}`}</span> : null}
@@ -38,16 +35,32 @@ const FileStats = ({ file }: { file: StackedDiffFilePatch["file"] }) => {
 	)
 }
 
-const FileHeader = ({ file, index, count, width }: { file: StackedDiffFilePatch["file"]; index: number; count: number; width: number }) => {
+const FileHeader = ({
+	file,
+	index,
+	count,
+	width,
+	suffix = "",
+	suffixColor = colors.muted,
+}: {
+	file: StackedDiffFilePatch["file"]
+	index: number
+	count: number
+	width: number
+	suffix?: string
+	suffixColor?: string
+}) => {
 	const counter = `${index + 1}/${count}`
-	const statsText = diffFileStatText(file)
-	const nameWidth = Math.max(1, width - counter.length - statsText.length - 5)
+	const stats = diffFileStats(file)
+	const statsText = diffFileStatsText(stats)
+	const nameWidth = Math.max(1, width - counter.length - statsText.length - suffix.length - 5)
 	return (
 		<TextLine>
 			<span fg={colors.muted}>{counter} </span>
 			<span fg={colors.text}>{fitCell(file.name, nameWidth)}</span>
 			{statsText ? <span fg={colors.muted}>  </span> : null}
-			<FileStats file={file} />
+			<FileStats stats={stats} />
+			{suffix ? <span fg={suffixColor}>{suffix}</span> : null}
 		</TextLine>
 	)
 }
@@ -56,7 +69,7 @@ export const PullRequestDiffPane = ({
 	pullRequest,
 	diffState,
 	stackedFiles,
-	fileIndex,
+	scrollTop,
 	view,
 	wrapMode,
 	paneWidth,
@@ -67,83 +80,60 @@ export const PullRequestDiffPane = ({
 	commentMode,
 	selectedCommentAnchor,
 	selectedCommentThread,
-	commentCount,
+	onSelectCommentLine,
 	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	diffState: PullRequestDiffState | undefined
 	stackedFiles: readonly StackedDiffFilePatch[]
-	fileIndex: number
-	view: "unified" | "split"
-	wrapMode: "none" | "word"
+	scrollTop: number
+	view: DiffView
+	wrapMode: DiffWrapMode
 	paneWidth: number
 	height: number
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
 	setDiffRef: (index: number, diff: DiffRenderable | null) => void
 	commentMode: boolean
-	selectedCommentAnchor: DiffCommentAnchor | null
+	selectedCommentAnchor: StackedDiffCommentAnchor | null
 	selectedCommentThread: readonly PullRequestReviewComment[]
-	commentCount: number
+	onSelectCommentLine: (renderLine: number, side: DiffCommentSide | null) => void
 	themeId: ThemeId
 }) => {
-	const readyFiles = diffState?.status === "ready" ? diffState.files : []
-	const safeIndex = safeDiffFileIndex(readyFiles, fileIndex)
-	const file = readyFiles[safeIndex] ?? null
+	const readyFiles = diffState?._tag === "Ready" ? diffState.files : []
 	const syntaxStyle = useMemo(() => createDiffSyntaxStyle(), [themeId])
 
 	if (!pullRequest) {
 		return <LoadingPane content={{ title: "No pull request selected", hint: "Press esc to go back" }} width={paneWidth} height={height} />
 	}
 
-	const stats = diffStatText(pullRequest)
-	const headerWidth = Math.max(24, paneWidth - 2)
-	const leftHeader = `#${pullRequest.number} ${shortRepoName(pullRequest.repository)}`
-	const headerGap = Math.max(2, headerWidth - leftHeader.length - stats.length)
-
-	if (!diffState || diffState.status === "loading") {
+	if (!diffState || diffState._tag === "Loading") {
 		return (
 			<box height={height} flexDirection="column">
-				<box height={1} paddingLeft={1} paddingRight={1}>
-					<TextLine>
-						<span fg={colors.count}>#{pullRequest.number}</span>
-						<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
-						<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
-						<DiffStats pullRequest={pullRequest} />
-					</TextLine>
-				</box>
+				<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 				<Divider width={paneWidth} />
 				<LoadingPane content={{ title: `${loadingIndicator} Loading diff`, hint: "Fetching patch from GitHub" }} width={paneWidth} height={Math.max(1, height - 2)} />
 			</box>
 		)
 	}
 
-	if (diffState.status === "error") {
+	if (diffState._tag === "Error") {
 		return (
 			<box height={height} flexDirection="column">
-				<box height={1} paddingLeft={1} paddingRight={1}>
+				<PaddedRow>
 					<PlainLine text={`#${pullRequest.number} ${shortRepoName(pullRequest.repository)} diff`} fg={colors.count} bold />
-				</box>
+				</PaddedRow>
 				<Divider width={paneWidth} />
 				<StatusCard content={{ title: "Could not load diff", hint: diffState.error }} width={paneWidth} />
 			</box>
 		)
 	}
 
-	if (readyFiles.length === 0 || !file) {
+	if (readyFiles.length === 0 || stackedFiles.length === 0) {
 		return <LoadingPane content={{ title: "No diff", hint: "This PR has no patch contents" }} width={paneWidth} height={height} />
 	}
 
-	const fileCounter = `${safeIndex + 1}/${readyFiles.length}`
-	const currentFileStatsText = file ? diffFileStatText(file) : ""
 	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
-	const commentLabel = commentMode && selectedCommentAnchor
-		? `  ${selectedSideLabel} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
-		: commentMode ? "  c no lines" : commentCount > 0 ? `  ● ${commentCount}` : ""
-	const commentLabelColor = commentMode && selectedCommentAnchor?.side === "LEFT"
-		? colors.status.failing
-		: commentMode ? colors.status.passing : colors.status.passing
-	const fileNameWidth = Math.max(8, headerWidth - fileCounter.length - currentFileStatsText.length - commentLabel.length - 4)
 	const commentPeek = commentMode && selectedCommentAnchor && selectedCommentThread.length > 0
 		? selectedCommentThread[selectedCommentThread.length - 1]!
 		: null
@@ -152,34 +142,43 @@ export const PullRequestDiffPane = ({
 	const commentPeekMeta = commentPeek && selectedCommentAnchor
 		? `${selectedSideLabel ?? "line"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}  ${commentPeek.author}  ${commentPeekCount}  enter thread  a comment`
 		: ""
+	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
+	const stickyFile = stackedDiffFileAtLine(stackedFiles, stickyScrollTop) ?? stackedFiles[0]
+	const stickyArrayIndex = stickyFile ? stackedFiles.indexOf(stickyFile) : -1
+	const incomingStickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex + 1] : undefined
+	const incomingHeaderDistance = incomingStickyFile ? incomingStickyFile.headerLine - stickyScrollTop : Number.POSITIVE_INFINITY
+	const incomingFile = incomingHeaderDistance === 1 ? incomingStickyFile : undefined
+	const stickyCommentLabelFor = (stackedFile: StackedDiffFilePatch | undefined) => {
+		if (!commentMode) return ""
+		if (!selectedCommentAnchor) return "  c no lines"
+		if (selectedCommentAnchor.fileIndex !== stackedFile?.index) return ""
+		return `  ${selectedCommentAnchor.side === "RIGHT" ? "right" : "left"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
+	}
+	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
+	const handleDiffMouseDown = function (this: ScrollBoxRenderable, event: MouseEvent) {
+		if (event.button !== 0) return
+		const localY = event.y - this.viewport.y
+		if (localY < 0 || localY >= this.viewport.height) return
+		const localX = event.x - this.viewport.x
+		const side = view === "split"
+			? localX < Math.floor(paneWidth / 2) ? "LEFT" : "RIGHT"
+			: null
+		onSelectCommentLine(Math.max(0, Math.floor(this.scrollTop + localY)), side)
+		event.preventDefault()
+		event.stopPropagation()
+	}
 
 	return (
 		<box height={height} flexDirection="column">
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<TextLine>
-					<span fg={colors.count}>#{pullRequest.number}</span>
-					<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
-					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
-					<DiffStats pullRequest={pullRequest} />
-				</TextLine>
-			</box>
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<TextLine>
-					<span fg={colors.text}>{fitCell(file.name, fileNameWidth)}</span>
-					<span fg={colors.muted}>  {fileCounter}</span>
-					{currentFileStatsText ? <span fg={colors.muted}>  </span> : null}
-					<FileStats file={file} />
-					{commentLabel ? <span fg={commentLabelColor}>{commentLabel}</span> : null}
-				</TextLine>
-			</box>
+			<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focused={!commentMode} flexGrow={1} scrollY scrollX={false}>
+			<scrollbox ref={scrollRef} focused={!commentMode} flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
 				{stackedFiles.map((stackedFile) => (
 					<box key={`${pullRequest.url}-${stackedFile.index}-${view}-${wrapMode}`} flexDirection="column" flexShrink={0}>
 						{stackedFile.index > 0 ? <Divider width={paneWidth} /> : null}
-						<box height={1} paddingLeft={1} paddingRight={1}>
+						<PaddedRow>
 							<FileHeader file={stackedFile.file} index={stackedFile.index} count={readyFiles.length} width={paneWidth} />
-						</box>
+						</PaddedRow>
 						<Divider width={paneWidth} />
 						<diff
 							ref={(diff: DiffRenderable | null) => setDiffRef(stackedFile.index, diff)}
@@ -207,15 +206,34 @@ export const PullRequestDiffPane = ({
 					</box>
 				))}
 			</scrollbox>
+			{stickyFile ? (
+				<box position="absolute" top={2} left={0} width={paneWidth} height={2} zIndex={10} flexDirection="column" backgroundColor={colors.background}>
+					{incomingFile ? (
+						<>
+							<Divider width={paneWidth} />
+							<PaddedRow backgroundColor={colors.background}>
+								<FileHeader file={incomingFile.file} index={incomingFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(incomingFile)} suffixColor={stickyCommentColor} />
+							</PaddedRow>
+						</>
+					) : (
+						<>
+							<PaddedRow backgroundColor={colors.background}>
+								<FileHeader file={stickyFile.file} index={stickyFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(stickyFile)} suffixColor={stickyCommentColor} />
+							</PaddedRow>
+							<Divider width={paneWidth} />
+						</>
+					)}
+				</box>
+			) : null}
 			{commentPeek ? (
 				<>
 					<Divider width={paneWidth} />
-					<box height={1} paddingLeft={1} paddingRight={1}>
+					<PaddedRow>
 						<PlainLine text={fitCell(commentPeekMeta, Math.max(1, paneWidth - 2))} fg={colors.count} />
-					</box>
-					<box height={1} paddingLeft={1} paddingRight={1}>
+					</PaddedRow>
+					<PaddedRow>
 						<PlainLine text={fitCell(commentPeekBody, Math.max(1, paneWidth - 2))} fg={colors.text} />
-					</box>
+					</PaddedRow>
 				</>
 			) : null}
 		</box>