@kitlangton/ghui 0.3.0 → 0.3.3

package/src/ui/FooterHints.tsx

@@ -1,90 +0,0 @@
-import { Data } from "effect"
-import { colors } from "./colors.js"
-import { HintRow, type HintItem } from "./primitives.js"
-
-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 diffRangeActive: boolean
-	readonly hasSelection: boolean
-	readonly canCloseSelection: boolean
-	readonly hasError: boolean
-	readonly isLoading: boolean
-	readonly loadingIndicator: string
-	readonly retryProgress: RetryProgress
-}
-
-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 diffViewHints = (ctx: HintsContext): readonly HintItem[] => [
-	{ key: "esc", label: "back" },
-	{ key: "↑↓", label: ctx.diffRangeActive ? "range" : "line" },
-	{ key: "enter", label: ctx.diffRangeActive ? "comment" : "open" },
-	{ key: "v", label: ctx.diffRangeActive ? "clear" : "range" },
-	{ key: "n/p", label: "threads" },
-	{ key: "[]", label: "files" },
-	{ key: "V", label: "view" },
-	{ key: "w", label: "wrap" },
-	{ key: "r", label: "reload" },
-	{ key: "o", label: "open" },
-]
-
-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" },
-]
-
-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 diffViewHints(ctx)
-	if (ctx.detailFullView) return detailFullViewHints(ctx)
-	return defaultHints(ctx)
-}
-
-export const FooterHints = (props: HintsContext) => <HintRow items={footerHints(props)} />

package/src/ui/LoadingLogo.tsx

@@ -1,75 +0,0 @@
-import { TextAttributes } from "@opentui/core"
-import { colors, mixHex } from "./colors.js"
-import type { DetailPlaceholderContent } from "./DetailsPane.js"
-import { centerCell, Filler, PlainLine, TextLine } from "./primitives.js"
-import { SPINNER_FRAMES } from "./spinner.js"
-
-type LoadingLogoContent = Pick<DetailPlaceholderContent, "hint">
-
-const GHUI_LOGO = ["█▀▀▀ █  █ █  █ ▀█▀", "█ ▀█ █▀▀█ █  █  █ ", "▀▀▀▀ ▀  ▀ ▀▀▀▀ ▀▀▀"] as const
-
-const LEFT_WORD_WIDTH = 9
-const LOGO_WIDTH = Math.max(...GHUI_LOGO.map((line) => line.length))
-const LOGO_HEIGHT = GHUI_LOGO.length
-const LOGO_BLOCK_HEIGHT = LOGO_HEIGHT + 2
-
-const logoColor = (x: number) => (x < LEFT_WORD_WIDTH ? mixHex(colors.accent, colors.text, 0.14) : mixHex(colors.accent, colors.text, 0.52))
-
-const LOGO_COLORS = Array.from({ length: LOGO_WIDTH }, (_, index) => logoColor(index))
-const LOGO_ROWS = GHUI_LOGO.map((line) => Array.from(line.padEnd(LOGO_WIDTH, " "), (char, index) => ({ char, color: LOGO_COLORS[index]! })))
-
-const LogoRow = ({ row, left }: { row: (typeof LOGO_ROWS)[number]; left: number }) => (
-	<TextLine>
-		<span fg={colors.muted}>{" ".repeat(left)}</span>
-		{row.map(({ char, color }, index) =>
-			char === " " ? (
-				<span key={index}> </span>
-			) : (
-				<span key={index} fg={color} attributes={TextAttributes.BOLD}>
-					{char}
-				</span>
-			),
-		)}
-	</TextLine>
-)
-
-export const LoadingLogo = ({ content, width, frame }: { content: LoadingLogoContent; width: number; frame: number }) => {
-	const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length]!
-	const logoLeft = Math.max(0, Math.floor((width - LOGO_WIDTH) / 2))
-
-	return (
-		<box flexDirection="column" width={width}>
-			{LOGO_ROWS.map((row, index) => (
-				<LogoRow key={index} row={row} left={logoLeft} />
-			))}
-			<box height={1} />
-			<PlainLine text={centerCell(`${spinner} ${content.hint}`, width)} fg={colors.muted} />
-		</box>
-	)
-}
-
-export const LoadingLogoPane = ({ content, width, height, frame }: { content: LoadingLogoContent; width: number; height: number; frame: number }) => {
-	if (width < LOGO_WIDTH + 2 || height < LOGO_BLOCK_HEIGHT) {
-		const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length]!
-		const topRows = Math.max(0, Math.floor((height - 1) / 2))
-		const bottomRows = Math.max(0, height - topRows - 1)
-		return (
-			<box height={height} flexDirection="column">
-				<Filler rows={topRows} prefix="loading-logo-compact-top" />
-				<PlainLine text={centerCell(`${spinner} ${content.hint}`, width)} fg={colors.muted} />
-				<Filler rows={bottomRows} prefix="loading-logo-compact-bottom" />
-			</box>
-		)
-	}
-
-	const topRows = Math.max(0, Math.floor((height - LOGO_BLOCK_HEIGHT) / 2))
-	const bottomRows = Math.max(0, height - topRows - LOGO_BLOCK_HEIGHT)
-
-	return (
-		<box height={height} flexDirection="column">
-			<Filler rows={topRows} prefix="loading-logo-top" />
-			<LoadingLogo content={content} width={width} frame={frame} />
-			<Filler rows={bottomRows} prefix="loading-logo-bottom" />
-		</box>
-	)
-}

package/src/ui/PullRequestDiffPane.tsx

@@ -1,249 +0,0 @@
-import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/core"
-import { useMemo, type Ref } from "react"
-import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
-import { colors, lineNumberTextColor, type ThemeId } from "./colors.js"
-import { CommentBodyLine, commentCountText, commentMetaSegments, CommentSegmentsLine } from "./comments.js"
-import { createDiffSyntaxStyle, diffCommentAnchorLabel, diffCommentLineLabel, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileIndexAtLine, type DiffFileStats, type DiffView, type DiffWhitespaceMode, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
-import { LoadingPane, StatusCard } from "./DetailsPane.js"
-import { DiffStats } from "./diffStats.js"
-import { Divider, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
-import { shortRepoName } from "./pullRequests.js"
-
-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 (
-		<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 = ({ stats }: { stats: DiffFileStats }) => {
-	return (
-		<>
-			{stats.additions > 0 ? <span fg={colors.status.passing}>{`+${stats.additions}`}</span> : null}
-			{stats.additions > 0 && stats.deletions > 0 ? <span fg={colors.muted}> </span> : null}
-			{stats.deletions > 0 ? <span fg={colors.status.failing}>{`-${stats.deletions}`}</span> : null}
-		</>
-	)
-}
-
-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 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 stats={stats} />
-			{suffix ? <span fg={suffixColor}>{suffix}</span> : null}
-		</TextLine>
-	)
-}
-
-export const PullRequestDiffPane = ({
-	pullRequest,
-	diffState,
-	stackedFiles,
-	scrollTop,
-	view,
-	whitespaceMode,
-	wrapMode,
-	paneWidth,
-	height,
-	loadingIndicator,
-	scrollRef,
-	setDiffRef,
-	selectedCommentAnchor,
-	selectedCommentLabel,
-	selectedCommentThread,
-	onSelectCommentLine,
-	themeId,
-}: {
-	pullRequest: PullRequestItem | null
-	diffState: PullRequestDiffState | undefined
-	stackedFiles: readonly StackedDiffFilePatch[]
-	scrollTop: number
-	view: DiffView
-	whitespaceMode: DiffWhitespaceMode
-	wrapMode: DiffWrapMode
-	paneWidth: number
-	height: number
-	loadingIndicator: string
-	scrollRef: Ref<ScrollBoxRenderable>
-	setDiffRef: (index: number, diff: DiffRenderable | null) => void
-	selectedCommentAnchor: StackedDiffCommentAnchor | null
-	selectedCommentLabel: string | null
-	selectedCommentThread: readonly PullRequestReviewComment[]
-	onSelectCommentLine: (renderLine: number, side: DiffCommentSide | null) => void
-	themeId: ThemeId
-}) => {
-	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} />
-	}
-
-	if (!diffState || diffState._tag === "Loading") {
-		return (
-			<box height={height} flexDirection="column">
-				<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._tag === "Error") {
-		return (
-			<box height={height} flexDirection="column">
-				<PaddedRow>
-					<PlainLine text={`#${pullRequest.number} ${shortRepoName(pullRequest.repository)} diff`} fg={colors.count} bold />
-				</PaddedRow>
-				<Divider width={paneWidth} />
-				<StatusCard content={{ title: "Could not load diff", hint: diffState.error }} width={paneWidth} />
-			</box>
-		)
-	}
-
-	if (readyFiles.length === 0 || stackedFiles.length === 0) {
-		return <LoadingPane content={{ title: whitespaceMode === "ignore" ? "No non-whitespace diff" : "No diff", hint: whitespaceMode === "ignore" ? "Use the command palette to show whitespace changes" : "This PR has no patch contents" }} width={paneWidth} height={height} />
-	}
-
-	const hasSelectedCommentAnchor = selectedCommentAnchor !== null
-	const commentPeek = hasSelectedCommentAnchor && selectedCommentThread.length > 0
-		? selectedCommentThread[selectedCommentThread.length - 1]!
-		: null
-	const commentPeekMeta = commentPeek && selectedCommentAnchor
-		? commentMetaSegments({
-			item: commentPeek,
-			markerLabel: diffCommentLineLabel(selectedCommentAnchor),
-			groups: [
-				[{ text: commentCountText(selectedCommentThread.length), fg: colors.muted }],
-				[{ text: "enter", fg: colors.text }, { text: " thread", fg: colors.muted }],
-			],
-		})
-		: []
-	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
-	const stickyArrayIndex = stackedDiffFileIndexAtLine(stackedFiles, stickyScrollTop)
-	const stickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex] : stackedFiles[0]
-	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 (!selectedCommentAnchor) return "  no lines"
-		if (selectedCommentAnchor.fileIndex !== stackedFile?.index) return ""
-		return `  ${selectedCommentLabel ?? diffCommentAnchorLabel(selectedCommentAnchor)}`
-	}
-	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
-	const diffLineNumberFg = lineNumberTextColor(colors.diff.lineNumberBg, colors.text)
-	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">
-			<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
-			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focusable={false} 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}
-						<PaddedRow>
-							<FileHeader file={stackedFile.file} index={stackedFile.index} count={readyFiles.length} width={paneWidth} />
-						</PaddedRow>
-						<Divider width={paneWidth} />
-						<diff
-							ref={(diff: DiffRenderable | null) => setDiffRef(stackedFile.index, diff)}
-							diff={stackedFile.file.patch}
-							view={view}
-							syncScroll
-							filetype={stackedFile.file.filetype ?? "text"}
-							syntaxStyle={syntaxStyle}
-							showLineNumbers
-							wrapMode={wrapMode}
-							addedBg={colors.diff.addedBg}
-							removedBg={colors.diff.removedBg}
-							contextBg={colors.diff.contextBg}
-							addedSignColor={colors.status.passing}
-							removedSignColor={colors.status.failing}
-							lineNumberFg={diffLineNumberFg}
-							lineNumberBg={colors.diff.lineNumberBg}
-							addedLineNumberBg={colors.diff.addedLineNumberBg}
-							removedLineNumberBg={colors.diff.removedLineNumberBg}
-							selectionBg={colors.selectedBg}
-							selectionFg={colors.selectedText}
-							height={stackedFile.diffHeight}
-							style={{ flexShrink: 0 }}
-						/>
-					</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} />
-					<PaddedRow>
-						<CommentSegmentsLine segments={commentPeekMeta} />
-					</PaddedRow>
-					<PaddedRow>
-						<CommentBodyLine body={commentPeek.body} width={Math.max(1, paneWidth - 2)} />
-					</PaddedRow>
-				</>
-			) : null}
-		</box>
-	)
-}

package/src/ui/PullRequestList.tsx

@@ -1,194 +0,0 @@
-import { TextAttributes } from "@opentui/core"
-import type { LoadStatus, PullRequestItem } from "../domain.js"
-import { daysOpen } from "../date.js"
-import { colors } from "./colors.js"
-import { fitCell, MatchedCell, PlainLine, SectionTitle, TextLine } from "./primitives.js"
-import { pullRequestRowDisplay, repoColor, reviewIcon } from "./pullRequests.js"
-
-export type PullRequestGroups = Array<[string, PullRequestItem[]]>
-
-export type PullRequestListRow =
-	| { readonly _tag: "title" }
-	| { readonly _tag: "filter" }
-	| { readonly _tag: "message"; readonly text: string; readonly color: string }
-	| { readonly _tag: "group"; readonly repository: string; readonly pullRequests: readonly PullRequestItem[] }
-	| { readonly _tag: "pull-request"; readonly pullRequest: PullRequestItem; readonly groupPullRequests: readonly PullRequestItem[] }
-	| { readonly _tag: "load-more"; readonly text: string }
-
-const GROUP_ICON = "◆"
-
-const getRowLayout = (contentWidth: number, numberWidth: number, ageWidth: number) => {
-	const reviewWidth = 1
-	const checkWidth = 6
-	const fixedWidth = reviewWidth + 1 + numberWidth + 1 + checkWidth + ageWidth
-	const titleWidth = Math.max(8, contentWidth - fixedWidth)
-	return { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth }
-}
-
-const groupNumberWidth = (pullRequests: readonly PullRequestItem[]) => {
-	if (pullRequests.length === 0) return 4
-	const maxLen = Math.max(...pullRequests.map((pr) => String(pr.number).length))
-	return maxLen + 1
-}
-
-const groupAgeWidth = (pullRequests: readonly PullRequestItem[]) => {
-	if (pullRequests.length === 0) return 4
-	const maxLen = Math.max(...pullRequests.map((pr) => `${daysOpen(pr.createdAt)}d`.length))
-	return Math.max(4, maxLen + 1)
-}
-
-const GroupTitle = ({ label, color, filterText }: { label: string; color: string; filterText: string }) => (
-	<TextLine>
-		<span fg={color}>{GROUP_ICON} </span>
-		<span fg={color} attributes={TextAttributes.BOLD}><MatchedCell text={label} width={label.length} query={filterText} /></span>
-	</TextLine>
-)
-
-export const buildPullRequestListRows = ({
-	groups,
-	status,
-	error,
-	filterText,
-	showFilterBar,
-	loadedCount,
-	hasMore,
-	isLoadingMore,
-	loadingIndicator = "-",
-}: {
-	readonly groups: PullRequestGroups
-	readonly status: LoadStatus
-	readonly error: string | null
-	readonly filterText: string
-	readonly showFilterBar: boolean
-	readonly loadedCount: number
-	readonly hasMore: boolean
-	readonly isLoadingMore: boolean
-	readonly loadingIndicator?: string
-}): readonly PullRequestListRow[] => {
-	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
-	const rows: PullRequestListRow[] = [{ _tag: "title" }]
-	if (showFilterBar) rows.push({ _tag: "filter" })
-	if (status === "loading" && itemCount === 0) rows.push({ _tag: "message", text: "- Loading pull requests...", color: colors.muted })
-	if (status === "error") rows.push({ _tag: "message", text: `- ${error ?? "Could not load pull requests."}`, color: colors.error })
-	if (status === "ready" && itemCount === 0) rows.push({ _tag: "message", text: filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests.", color: colors.muted })
-	for (const [repository, pullRequests] of groups) {
-		rows.push({ _tag: "group", repository, pullRequests })
-		for (const pullRequest of pullRequests) rows.push({ _tag: "pull-request", pullRequest, groupPullRequests: pullRequests })
-	}
-	if (status === "ready" && itemCount > 0 && (hasMore || isLoadingMore)) {
-		rows.push({ _tag: "load-more", text: isLoadingMore ? `${loadingIndicator} Loading more pull requests... (${loadedCount} loaded)` : `- ${loadedCount} loaded, more available` })
-	}
-	return rows
-}
-
-export const pullRequestListRowIndex = (rows: readonly PullRequestListRow[], url: string | null) => {
-	if (!url) return null
-	const index = rows.findIndex((row) => row._tag === "pull-request" && row.pullRequest.url === url)
-	return index >= 0 ? index : null
-}
-
-const PullRequestRow = ({
-	pullRequest,
-	selected,
-	contentWidth,
-	numWidth,
-	ageColWidth,
-	filterText,
-	onSelect,
-}: {
-	pullRequest: PullRequestItem
-	selected: boolean
-	contentWidth: number
-	numWidth: number
-	ageColWidth: number
-	filterText: string
-	onSelect: () => void
-}) => {
-	const ageText = `${daysOpen(pullRequest.createdAt)}d`
-	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth, ageColWidth)
-	const rowWidth = reviewWidth + 1 + numberWidth + 1 + titleWidth + checkWidth + ageWidth
-	const fillerWidth = Math.max(0, contentWidth - rowWidth)
-	const display = pullRequestRowDisplay(pullRequest, selected)
-
-	return (
-		<box width={contentWidth} height={1} onMouseDown={onSelect}>
-			<TextLine width={contentWidth} fg={display.rowFg} bg={selected ? colors.selectedBg : undefined}>
-				<span fg={display.indicatorFg}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
-				<span> </span>
-				<span fg={display.numberFg}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
-				<span> </span>
-				<span><MatchedCell text={pullRequest.title} width={titleWidth} query={filterText} /></span>
-				<span fg={display.checkFg}>{fitCell(display.checkText, checkWidth, "right")}</span>
-				<span fg={colors.muted}>{fitCell(ageText, ageWidth, "right")}</span>
-				{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
-			</TextLine>
-		</box>
-	)
-}
-
-export const PullRequestList = ({
-	groups,
-	selectedUrl,
-	status,
-	error,
-	contentWidth,
-	filterText,
-	showFilterBar,
-	isFilterEditing,
-	loadedCount,
-	hasMore,
-	isLoadingMore,
-	loadingIndicator,
-	onSelectPullRequest,
-}: {
-	groups: PullRequestGroups
-	selectedUrl: string | null
-	status: LoadStatus
-	error: string | null
-	contentWidth: number
-	filterText: string
-	showFilterBar: boolean
-	isFilterEditing: boolean
-	loadedCount: number
-	hasMore: boolean
-	isLoadingMore: boolean
-	loadingIndicator: string
-	onSelectPullRequest: (url: string) => void
-}) => {
-	const rows = buildPullRequestListRows({ groups, status, error, filterText, showFilterBar, loadedCount, hasMore, isLoadingMore, loadingIndicator })
-
-	return (
-		<box width={contentWidth} flexDirection="column">
-			{rows.map((row, index) => {
-				if (row._tag === "title") return <SectionTitle key="title" title="PULL REQUESTS" />
-				if (row._tag === "filter") {
-					return (
-						<TextLine key="filter">
-							<span fg={colors.count}>/</span>
-							<span fg={colors.muted}> </span>
-							<span fg={isFilterEditing ? colors.text : colors.count}>{filterText.length > 0 ? filterText : "type to filter..."}</span>
-						</TextLine>
-					)
-				}
-				if (row._tag === "message") return <PlainLine key={`message-${index}`} text={row.text} fg={row.color} />
-				if (row._tag === "load-more") return <PlainLine key="load-more" text={row.text} fg={colors.muted} />
-				if (row._tag === "group") return <GroupTitle key={`group-${row.repository}`} label={row.repository} color={repoColor(row.repository)} filterText={filterText} />
-
-				const numWidth = groupNumberWidth(row.groupPullRequests)
-				const ageColWidth = groupAgeWidth(row.groupPullRequests)
-				return (
-					<PullRequestRow
-						key={row.pullRequest.url}
-						pullRequest={row.pullRequest}
-						selected={row.pullRequest.url === selectedUrl}
-						contentWidth={contentWidth}
-						numWidth={numWidth}
-						ageColWidth={ageColWidth}
-						filterText={filterText}
-						onSelect={() => onSelectPullRequest(row.pullRequest.url)}
-					/>
-				)
-			})}
-		</box>
-	)
-}