@kitlangton/ghui 0.1.19 → 0.1.21

package/src/services/MockGitHubService.ts

@@ -0,0 +1,146 @@
+import { Effect, Layer } from "effect"
+import type { CheckItem, CreatePullRequestCommentInput, Mergeable, PullRequestItem, PullRequestLabel, PullRequestMergeInfo, PullRequestPage, PullRequestQueueMode, PullRequestReviewComment, ReviewStatus } from "../domain.js"
+import { GitHubService } from "./GitHubService.js"
+
+export interface MockOptions {
+	readonly prCount: number
+	readonly repoCount?: number
+	readonly username?: string
+	readonly seed?: number
+}
+
+const REVIEW_CYCLE: readonly ReviewStatus[] = ["approved", "changes", "review", "none", "draft"]
+const MERGEABLE_CYCLE: readonly Mergeable[] = ["mergeable", "conflicting", "unknown"]
+
+const synthCheckSummary = (passed: number, total: number): Pick<PullRequestItem, "checkStatus" | "checkSummary" | "checks"> => {
+	const checks: readonly CheckItem[] = Array.from({ length: total }, (_, index) => ({
+		name: `check-${index}`,
+		status: "completed",
+		conclusion: index < passed ? "success" : "failure",
+	}))
+	if (total === 0) return { checkStatus: "none", checkSummary: null, checks: [] }
+	if (passed === total) return { checkStatus: "passing", checkSummary: `${passed}/${total}`, checks }
+	return { checkStatus: "failing", checkSummary: `${passed}/${total}`, checks }
+}
+
+const synthLabels = (index: number): readonly PullRequestLabel[] => {
+	if (index % 5 === 0) return [{ name: "bug", color: "#d73a4a" }]
+	if (index % 7 === 0) return [{ name: "enhancement", color: "#a2eeef" }, { name: "tests", color: "#0e8a16" }]
+	return []
+}
+
+const buildPullRequest = (index: number, options: Required<MockOptions>): PullRequestItem => {
+	const repoIndex = index % options.repoCount
+	const repository = `mock-org/repo-${repoIndex}`
+	const number = 1000 + index
+	const total = 8 + (index % 5)
+	const passed = total - (index % 3 === 0 ? 1 : 0)
+	const review = REVIEW_CYCLE[index % REVIEW_CYCLE.length]!
+	const createdAt = new Date(Date.now() - index * 86_400_000)
+
+	return {
+		repository,
+		author: options.username,
+		headRefOid: `deadbeef${index.toString(16).padStart(8, "0")}`,
+		number,
+		title: `Mock PR ${number}: example change ${index}`,
+		body: `This is mock pull request #${number}.\n\nLine A.\nLine B.`,
+		labels: synthLabels(index),
+		additions: 10 + index,
+		deletions: 5 + (index % 11),
+		changedFiles: 1 + (index % 7),
+		state: "open",
+		reviewStatus: review,
+		...synthCheckSummary(passed, total),
+		autoMergeEnabled: index % 11 === 0,
+		detailLoaded: true,
+		createdAt,
+		closedAt: null,
+		url: `https://github.com/${repository}/pull/${number}`,
+	}
+}
+
+export const buildMockPullRequests = (options: MockOptions): readonly PullRequestItem[] => {
+	const resolved: Required<MockOptions> = {
+		prCount: options.prCount,
+		repoCount: options.repoCount ?? 4,
+		username: options.username ?? "mock-user",
+		seed: options.seed ?? 0,
+	}
+	return Array.from({ length: resolved.prCount }, (_, index) => buildPullRequest(index, resolved))
+}
+
+const filterByView = (mode: PullRequestQueueMode, repository: string | null, source: readonly PullRequestItem[]) => {
+	if (mode === "repository") return repository ? source.filter((item) => item.repository === repository) : []
+	return source
+}
+
+const pageItems = (source: readonly PullRequestItem[], cursor: string | null, pageSize: number): PullRequestPage => {
+	const start = cursor ? Number.parseInt(cursor, 10) : 0
+	const safeStart = Number.isFinite(start) && start >= 0 ? start : 0
+	const safePageSize = Math.max(1, Math.min(100, pageSize))
+	const end = Math.min(source.length, safeStart + safePageSize)
+	return {
+		items: source.slice(safeStart, end),
+		endCursor: end > safeStart ? String(end) : null,
+		hasNextPage: end < source.length,
+	}
+}
+
+export const MockGitHubService = {
+	layer: (options: MockOptions) => {
+		const items = buildMockPullRequests(options)
+		const username = options.username ?? "mock-user"
+		const summaryItems = items.map((item) => ({
+			...item,
+			body: "",
+			labels: [],
+			additions: 0,
+			deletions: 0,
+			changedFiles: 0,
+			detailLoaded: false,
+		} satisfies PullRequestItem))
+		const findPullRequest = (repository: string, number: number) => items.find((item) => item.repository === repository && item.number === number) ?? items[0]!
+
+		return Layer.succeed(
+			GitHubService,
+			GitHubService.of({
+				listOpenPullRequests: (mode: PullRequestQueueMode, repository: string | null) => Effect.succeed(filterByView(mode, repository, summaryItems)),
+				listOpenPullRequestPage: (input) => Effect.succeed(pageItems(filterByView(input.mode, input.repository, summaryItems), input.cursor, input.pageSize)),
+				listOpenPullRequestDetails: (mode: PullRequestQueueMode, repository: string | null) => Effect.succeed(filterByView(mode, repository, items)),
+				getPullRequestDetails: (repository, number) => Effect.succeed(findPullRequest(repository, number)),
+				getAuthenticatedUser: () => Effect.succeed(username),
+				getPullRequestDiff: (_repo, _number) => Effect.succeed(""),
+				listPullRequestComments: (_repo, _number) => Effect.succeed([] as readonly PullRequestReviewComment[]),
+				getPullRequestMergeInfo: (repository, number) => Effect.succeed({
+					repository,
+					number,
+					title: `Mock PR ${number}`,
+					state: "open",
+					isDraft: false,
+					mergeable: MERGEABLE_CYCLE[number % MERGEABLE_CYCLE.length]!,
+					reviewStatus: "approved",
+					checkStatus: "passing",
+					checkSummary: "10/10",
+					autoMergeEnabled: false,
+				} satisfies PullRequestMergeInfo),
+				mergePullRequest: () => Effect.void,
+				closePullRequest: () => Effect.void,
+				createPullRequestComment: (input: CreatePullRequestCommentInput) => Effect.succeed({
+					id: `mock:${Date.now()}`,
+					path: input.path,
+					line: input.line,
+					side: input.side,
+					author: username,
+					body: input.body,
+					createdAt: new Date(),
+					url: null,
+				} satisfies PullRequestReviewComment),
+				toggleDraftStatus: () => Effect.void,
+				listRepoLabels: () => Effect.succeed([]),
+				addPullRequestLabel: () => Effect.void,
+				removePullRequestLabel: () => Effect.void,
+			}),
+		)
+	},
+}

package/src/ui/CommandPalette.tsx

@@ -0,0 +1,156 @@
+import { TextAttributes } from "@opentui/core"
+import { useEffect, useMemo, useState } from "react"
+import type { AppCommand } from "../commands.js"
+import { clampCommandIndex } from "../commands.js"
+import { colors } from "./colors.js"
+import { scrollTopForVisibleLine } from "./diff.js"
+import { centerCell, Filler, fitCell, HintRow, PlainLine, StandardModal, standardModalDims, TextLine, trimCell } from "./primitives.js"
+
+const scopeLabels = {
+	Global: "App",
+	View: "View",
+	"Pull request": "Pull Request",
+	Diff: "Diff",
+	Navigation: "Navigation",
+	System: "System",
+} as const satisfies Record<AppCommand["scope"], string>
+
+export type CommandPaletteRow =
+	| { readonly _tag: "section"; readonly scope: AppCommand["scope"] }
+	| { readonly _tag: "spacer" }
+	| { readonly _tag: "command"; readonly command: AppCommand; readonly commandIndex: number }
+
+export const buildCommandPaletteRows = (commands: readonly AppCommand[]): readonly CommandPaletteRow[] => {
+	const rows: CommandPaletteRow[] = []
+	let previousScope: AppCommand["scope"] | null = null
+	for (let commandIndex = 0; commandIndex < commands.length; commandIndex++) {
+		const command = commands[commandIndex]!
+		if (command.scope !== previousScope) {
+			if (previousScope !== null) rows.push({ _tag: "spacer" })
+			rows.push({ _tag: "section", scope: command.scope })
+			previousScope = command.scope
+		}
+		rows.push({ _tag: "command", command, commandIndex })
+	}
+	return rows
+}
+
+export const commandPaletteSelectedRowIndex = (rows: readonly CommandPaletteRow[], selectedCommandIndex: number) =>
+	Math.max(0, rows.findIndex((row) => row._tag === "command" && row.commandIndex === selectedCommandIndex))
+
+export const commandPaletteScrollTop = ({
+	current,
+	rowsLength,
+	listHeight,
+	selectedRowIndex,
+}: {
+	readonly current: number
+	readonly rowsLength: number
+	readonly listHeight: number
+	readonly selectedRowIndex: number
+}) => {
+	if (rowsLength <= listHeight) return 0
+	const maxScrollTop = Math.max(0, rowsLength - listHeight)
+	const clampScrollTop = (value: number) => Math.max(0, Math.min(value, maxScrollTop))
+	return clampScrollTop(scrollTopForVisibleLine(current, listHeight, selectedRowIndex, 0))
+}
+
+export const CommandPalette = ({
+	commands,
+	query,
+	selectedIndex,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+}: {
+	commands: readonly AppCommand[]
+	query: string
+	selectedIndex: number
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+}) => {
+	const { contentWidth, bodyHeight: listHeight, rowWidth } = standardModalDims(modalWidth, modalHeight)
+	const clampedIndex = clampCommandIndex(selectedIndex, commands)
+	const [scrollTop, setScrollTop] = useState(0)
+	const rows = useMemo(() => buildCommandPaletteRows(commands), [commands])
+	const selectedRowIndex = commandPaletteSelectedRowIndex(rows, clampedIndex)
+	const visibleRows = rows.slice(scrollTop, scrollTop + listHeight)
+	const bottomPaddingRows = Math.max(0, listHeight - visibleRows.length)
+	const countText = commands.length === 1 ? "1 command" : `${commands.length} commands`
+	const queryText = query.length > 0 ? query : "type a command, state, or shortcut"
+	const queryWidth = Math.max(1, contentWidth - 2)
+	const emptyTopRows = Math.max(0, Math.floor((listHeight - 1) / 2))
+	const emptyBottomRows = Math.max(0, listHeight - emptyTopRows - 1)
+	useEffect(() => {
+		setScrollTop((current) => commandPaletteScrollTop({ current, rowsLength: rows.length, listHeight, selectedRowIndex }))
+	}, [listHeight, rows.length, selectedRowIndex])
+
+	return (
+		<StandardModal
+			left={offsetLeft}
+			top={offsetTop}
+			width={modalWidth}
+			height={modalHeight}
+			title="Command Palette"
+			headerRight={{ text: countText }}
+			subtitle={
+				<TextLine>
+					<span fg={colors.count}>› </span>
+					<span fg={query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
+				</TextLine>
+			}
+			footer={<HintRow items={[{ key: "↑↓", label: "select" }, { key: "enter", label: "run" }, { key: "ctrl-u", label: "clear" }, { key: "ctrl-w", label: "word" }, { key: "esc", label: "close" }]} />}
+		>
+			{rows.length === 0 ? (
+				<>
+					<Filler rows={emptyTopRows} prefix="top" />
+					<PlainLine text={centerCell("No matching command", rowWidth)} fg={colors.muted} />
+					<Filler rows={emptyBottomRows} prefix="bottom" />
+				</>
+			) : (
+				<>
+					{visibleRows.map((row, index) => {
+						const rowIndex = scrollTop + index
+						if (row._tag === "spacer") {
+							return <PlainLine key={`spacer-${rowIndex}`} text="" />
+						}
+						if (row._tag === "section") {
+							return <PlainLine key={`section-${row.scope}-${rowIndex}`} text={fitCell(`  ${scopeLabels[row.scope].toUpperCase()}`, rowWidth)} fg={colors.muted} />
+						}
+
+						const { command, commandIndex } = row
+						const isSelected = commandIndex === clampedIndex
+						const shortcut = command.shortcut ? trimCell(command.shortcut, 16) : ""
+						const shortcutWidth = shortcut.length === 0 ? 0 : Math.min(18, Math.max(6, shortcut.length + 1))
+						const trailingPadding = shortcut.length === 0 ? 0 : 1
+						// Layout: "▸ " (2) + title + "  " (2) + subtitle + filler + shortcut + " " (1)
+						const SELECTOR_WIDTH = 2
+						const titleAvailable = Math.max(8, rowWidth - SELECTOR_WIDTH - shortcutWidth - trailingPadding)
+						const titleText = trimCell(command.title, Math.min(titleAvailable, 36))
+						const subtitleSpace = Math.max(0, titleAvailable - titleText.length - 2)
+						const subtitleText = command.subtitle && subtitleSpace > 4 ? trimCell(command.subtitle, subtitleSpace) : ""
+						const fillerWidth = Math.max(0, titleAvailable - titleText.length - (subtitleText ? 2 + subtitleText.length : 0))
+
+						return (
+							<box key={command.id} height={1}>
+								<TextLine width={rowWidth} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+									<span fg={isSelected ? colors.accent : colors.muted}>{isSelected ? "▸" : " "}</span>
+									<span> </span>
+									{isSelected ? <span attributes={TextAttributes.BOLD}>{titleText}</span> : <span>{titleText}</span>}
+									{subtitleText ? <span fg={colors.muted}>{`  ${subtitleText}`}</span> : null}
+									{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
+									{shortcutWidth > 0 ? <span fg={colors.muted}>{fitCell(shortcut, shortcutWidth, "right")}</span> : null}
+									{trailingPadding > 0 ? <span> </span> : null}
+								</TextLine>
+							</box>
+						)
+					})}
+					<Filler rows={bottomPaddingRows} prefix="pad" />
+				</>
+			)}
+		</StandardModal>
+	)
+}

package/src/ui/DetailsPane.tsx

@@ -4,7 +4,8 @@ import { formatRelativeDate } from "../date.js"
 import type { CheckItem, PullRequestItem } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
 import { diffStatText } from "./diff.js"
-import { centerCell, Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
+import { DiffStats } from "./diffStats.js"
+import { centerCell, Divider, Filler, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, labelTextColor, reviewLabel, shortRepoName, statusColor } from "./pullRequests.js"
 
 interface PreviewLine {
@@ -22,6 +23,7 @@ export interface DetailPlaceholderContent {
 
 export const DETAIL_BODY_LINES = 6
 export const DETAIL_PLACEHOLDER_ROWS = 4
+export const DETAIL_BODY_SCROLL_LIMIT = 1_000
 
 const pullRequestReferencePattern = /(#[0-9]+)/g
 
@@ -158,31 +160,6 @@ const bodyPreview = (body: string, width: number, limit = DETAIL_BODY_LINES): Ar
 	return preview.slice(0, limit)
 }
 
-const BlankRow = () => <box height={1} />
-
-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)
-
-	return (
-		<>
-			{parts.map((part, index) => (
-				<Fragment key={part.key}>
-					{index > 0 ? <span fg={colors.muted}> </span> : null}
-					<span fg={part.color}>{part.text}</span>
-				</Fragment>
-			))}
-		</>
-	)
-}
-
 const deduplicateChecks = (checks: readonly CheckItem[]): CheckItem[] => {
 	const seen = new Map<string, CheckItem>()
 	for (const check of checks) {
@@ -194,26 +171,30 @@ const deduplicateChecks = (checks: readonly CheckItem[]): CheckItem[] => {
 	return [...seen.values()]
 }
 
-const checkIcon = (check: CheckItem) => {
-	if (check.status === "completed") {
-		if (check.conclusion === "success" || check.conclusion === "neutral" || check.conclusion === "skipped") return "✓"
-		if (check.conclusion === "failure") return "✗"
-		return "·"
-	}
-	if (check.status === "in_progress") return "●"
-	return "○"
+type CheckKind = "passing" | "failing" | "in-progress" | "queued" | "missing"
+
+const CHECK_DISPLAY: Record<CheckKind, { icon: string; color: string }> = {
+	passing: { icon: "✓", color: colors.status.passing },
+	failing: { icon: "✗", color: colors.status.failing },
+	"in-progress": { icon: "●", color: colors.status.pending },
+	queued: { icon: "○", color: colors.muted },
+	missing: { icon: "·", color: colors.muted },
 }
 
-const checkColor = (check: CheckItem) => {
+const checkKind = (check: CheckItem): CheckKind => {
 	if (check.status === "completed") {
-		if (check.conclusion === "success" || check.conclusion === "neutral" || check.conclusion === "skipped") return colors.status.passing
-		if (check.conclusion === "failure") return colors.status.failing
-		return colors.muted
+		if (check.conclusion === "success" || check.conclusion === "neutral" || check.conclusion === "skipped") return "passing"
+		if (check.conclusion === "failure") return "failing"
+		return "missing"
 	}
-	if (check.status === "in_progress") return colors.status.pending
-	return colors.muted
+	if (check.status === "in_progress") return "in-progress"
+	return "queued"
 }
 
+const checkIcon = (check: CheckItem) => CHECK_DISPLAY[checkKind(check)].icon
+
+const checkColor = (check: CheckItem) => CHECK_DISPLAY[checkKind(check)].color
+
 const checksRowCount = (checks: readonly CheckItem[]) => {
 	const unique = deduplicateChecks(checks)
 	return Math.ceil(unique.length / 2)
@@ -280,6 +261,10 @@ export const getDetailBodyHeight = (pullRequest: PullRequestItem | null, content
 	return bodyPreview(pullRequest.body, contentWidth, bodyLines).length
 }
 
+export const getScrollableDetailBodyHeight = (pullRequest: PullRequestItem | null, contentWidth: number) => {
+	return getDetailBodyHeight(pullRequest, contentWidth, DETAIL_BODY_SCROLL_LIMIT)
+}
+
 export const getDetailsPaneHeight = ({
 	pullRequest,
 	contentWidth,
@@ -316,11 +301,10 @@ export const DetailHeader = ({
 	const statsText = diffStatText(pullRequest)
 	const labelsWidth = !pullRequest.detailLoaded
 		? "loading details...".length
-		: labels.length > 0
-		? labels.reduce((total, label, index) => total + label.name.length + 2 + (index > 0 ? 1 : 0), 0)
-		: "no labels".length
-	const showStats = contentWidth - labelsWidth - statsText.length >= 2
-	const statsGap = Math.max(2, contentWidth - labelsWidth - statsText.length)
+		: labels.reduce((total, label, index) => total + label.name.length + 2 + (index > 0 ? 1 : 0), 0)
+	const hasLabelContent = labelsWidth > 0
+	const showStats = contentWidth - labelsWidth - statsText.length >= (hasLabelContent ? 2 : 0)
+	const statsGap = Math.max(hasLabelContent ? 2 : 0, contentWidth - labelsWidth - statsText.length)
 	const opened = formatRelativeDate(pullRequest.createdAt)
 	const repo = shortRepoName(pullRequest.repository)
 	const author = viewerUsername && pullRequest.author !== viewerUsername ? ` by ${pullRequest.author}` : ""
@@ -334,7 +318,7 @@ export const DetailHeader = ({
 
 	return (
 		<>
-			<box height={1} paddingLeft={1} paddingRight={1}>
+			<PaddedRow>
 				<TextLine>
 					<span fg={colors.count}>#{number}</span>
 					<span fg={colors.muted}> {repo}</span>
@@ -346,28 +330,28 @@ export const DetailHeader = ({
 					{statusParts.length > 0 ? <span fg={colors.muted}> </span> : null}
 					<span fg={colors.muted}>{opened}</span>
 				</TextLine>
-			</box>
+			</PaddedRow>
 			<box height={wrappedTitle.length} flexDirection="column" paddingLeft={1} paddingRight={1}>
 				{wrappedTitle.map((line, index) => (
 					<PlainLine key={index} text={line} bold />
 				))}
 			</box>
-			<box height={1} paddingLeft={1} paddingRight={1}>
+			<PaddedRow>
 				<TextLine>
 					{!pullRequest.detailLoaded ? <span fg={colors.muted}>loading details...</span> : labels.length > 0 ? labels.map((label, index) => (
 						<Fragment key={label.name}>
 							{index > 0 ? <span fg={colors.muted}> </span> : null}
 							<span bg={labelColor(label)} fg={labelTextColor(labelColor(label))}> {label.name} </span>
 						</Fragment>
-					)) : <span fg={colors.muted}>no labels</span>}
+					)) : null}
 					{showStats ? (
 						<>
-							<span fg={colors.muted}>{" ".repeat(statsGap)}</span>
+							{statsGap > 0 ? <span fg={colors.muted}>{" ".repeat(statsGap)}</span> : null}
 							<DiffStats pullRequest={pullRequest} />
 						</>
 					) : null}
 				</TextLine>
-			</box>
+			</PaddedRow>
 			<box height={1}><Divider width={paneWidth} /></box>
 			{showChecks && unique.length > 0 ? (
 				<>
@@ -385,18 +369,20 @@ export const DetailBody = ({
 	pullRequest,
 	contentWidth,
 	bodyLines = DETAIL_BODY_LINES,
+	bodyLineLimit = bodyLines,
 	loadingIndicator,
 	themeId,
 }: {
 	pullRequest: PullRequestItem
 	contentWidth: number
 	bodyLines?: number
+	bodyLineLimit?: number
 	loadingIndicator: string
 	themeId: ThemeId
 }) => {
 	const previewLines = useMemo(
-		() => bodyPreview(pullRequest.body, contentWidth, bodyLines),
-		[pullRequest.body, contentWidth, bodyLines, themeId],
+		() => bodyPreview(pullRequest.body, contentWidth, bodyLineLimit),
+		[pullRequest.body, contentWidth, bodyLineLimit, themeId],
 	)
 
 	if (!pullRequest.detailLoaded) {
@@ -404,15 +390,15 @@ export const DetailBody = ({
 		const bottomRows = Math.max(0, bodyLines - topRows - 1)
 		return (
 			<box flexDirection="column" paddingLeft={1} paddingRight={1} height={bodyLines}>
-				{Array.from({ length: topRows }, (_, index) => <BlankRow key={`top-${index}`} />)}
+				<Filler rows={topRows} prefix="top" />
 				<PlainLine text={centerCell(`${loadingIndicator} Loading pull request details`, contentWidth)} fg={colors.muted} />
-				{Array.from({ length: bottomRows }, (_, index) => <BlankRow key={`bottom-${index}`} />)}
+				<Filler rows={bottomRows} prefix="bottom" />
 			</box>
 		)
 	}
 
 	return (
-		<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+		<box flexDirection="column" paddingLeft={1} paddingRight={1} height={previewLines.length}>
 			{previewLines.map((line, index) => (
 				<TextLine key={`${pullRequest.url}-${index}`}>
 					{line.segments.map((segment, segmentIndex) => (
@@ -472,9 +458,9 @@ export const LoadingPane = ({ content, width, height }: { content: DetailPlaceho
 
 	return (
 		<box height={height} flexDirection="column">
-			{Array.from({ length: topRows }, (_, index) => <BlankRow key={`top-${index}`} />)}
+			<Filler rows={topRows} prefix="top" />
 			<StatusCard content={content} width={width} />
-			{Array.from({ length: bottomRows }, (_, index) => <BlankRow key={`bottom-${index}`} />)}
+			<Filler rows={bottomRows} prefix="bottom" />
 		</box>
 	)
 }
@@ -484,6 +470,7 @@ export const DetailsPane = ({
 	viewerUsername,
 	contentWidth,
 	bodyLines = DETAIL_BODY_LINES,
+	bodyLineLimit = bodyLines,
 	paneWidth = contentWidth + 2,
 	showChecks = false,
 	placeholderContent,
@@ -494,28 +481,27 @@ export const DetailsPane = ({
 	viewerUsername: string | null
 	contentWidth: number
 	bodyLines?: number
+	bodyLineLimit?: number
 	paneWidth?: number
 	showChecks?: boolean
 	placeholderContent: DetailPlaceholderContent
 	loadingIndicator: string
 	themeId: ThemeId
 }) => {
-	const contentHeight = getDetailsPaneHeight({ pullRequest, contentWidth, bodyLines, paneWidth, showChecks })
+	const contentHeight = getDetailsPaneHeight({ pullRequest, contentWidth, bodyLines: bodyLineLimit, paneWidth, showChecks })
 
 	return (
 		<box flexDirection="column" height={contentHeight}>
 			{pullRequest ? (
 				<>
 					<DetailHeader pullRequest={pullRequest} viewerUsername={viewerUsername} contentWidth={contentWidth} paneWidth={paneWidth} showChecks={showChecks} />
-					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} loadingIndicator={loadingIndicator} themeId={themeId} />
+					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} bodyLineLimit={bodyLineLimit} loadingIndicator={loadingIndicator} themeId={themeId} />
 				</>
 			) : (
 				<>
 					<DetailPlaceholder content={placeholderContent} paneWidth={paneWidth} />
 					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-						{Array.from({ length: bodyLines }, (_, index) => (
-							<BlankRow key={index} />
-						))}
+						<Filler rows={bodyLines} prefix="empty" />
 					</box>
 				</>
 			)}