@kitlangton/ghui 0.1.6 → 0.1.8

package/src/config.ts

@@ -1,9 +1,18 @@
-const parsePositiveInt = (value: string | undefined, fallback: number) => {
-	const parsed = Number.parseInt(value ?? "", 10)
-	return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback
-}
+import { Config, Effect } from "effect"
 
-export const config = {
-	author: process.env.GHUI_AUTHOR?.trim() || "@me",
-	prFetchLimit: parsePositiveInt(process.env.GHUI_PR_FETCH_LIMIT, 200),
-} as const
+const positiveIntOr = (fallback: number) => (value: number) => Number.isFinite(value) && value > 0 ? value : fallback
+
+const appConfig = Config.all({
+	author: Config.string("GHUI_AUTHOR").pipe(
+		Config.withDefault("@me"),
+		Config.map((value) => value.trim() || "@me"),
+	),
+	prFetchLimit: Config.int("GHUI_PR_FETCH_LIMIT").pipe(
+		Config.withDefault(200),
+		Config.map(positiveIntOr(200)),
+	),
+})
+
+export const config = Effect.runSync(Effect.gen(function*() {
+	return yield* appConfig
+}))

package/src/domain.ts

@@ -27,7 +27,24 @@ export interface PullRequestItem {
 	readonly checkStatus: "passing" | "pending" | "failing" | "none"
 	readonly checkSummary: string | null
 	readonly checks: readonly CheckItem[]
+	readonly autoMergeEnabled: boolean
+	readonly detailLoaded: boolean
 	readonly createdAt: Date
 	readonly closedAt: Date | null
 	readonly url: string
 }
+
+export interface PullRequestMergeInfo {
+	readonly repository: string
+	readonly number: number
+	readonly title: string
+	readonly state: PullRequestState
+	readonly isDraft: boolean
+	readonly mergeable: "mergeable" | "conflicting" | "unknown"
+	readonly reviewStatus: PullRequestItem["reviewStatus"]
+	readonly checkStatus: PullRequestItem["checkStatus"]
+	readonly checkSummary: string | null
+	readonly autoMergeEnabled: boolean
+}
+
+export type PullRequestMergeAction = "squash" | "auto" | "admin" | "disable-auto"

package/src/index.tsx

@@ -11,6 +11,7 @@ const renderer = await createCliRenderer({
 	exitOnCtrlC: false,
 	screenMode: "alternate-screen",
 	externalOutputMode: "passthrough",
+	onDestroy: () => process.exit(0),
 })
 
 createRoot(renderer).render(

package/src/observability.ts

@@ -0,0 +1,46 @@
+import { Config, Effect, Layer } from "effect"
+import { FetchHttpClient } from "effect/unstable/http"
+import { OtlpLogger, OtlpSerialization, OtlpTracer } from "effect/unstable/observability"
+
+const observabilityConfig = Config.all({
+	endpoint: Config.string("GHUI_OTLP_ENDPOINT").pipe(
+		Config.withDefault(""),
+		Config.map((value) => value.trim()),
+	),
+	motelPort: Config.string("GHUI_MOTEL_PORT").pipe(
+		Config.withDefault(""),
+		Config.map((value) => value.trim()),
+	),
+})
+
+const resource = {
+	serviceName: "ghui",
+	serviceVersion: "local",
+}
+
+export const Observability = {
+	layer: Layer.unwrap(Effect.gen(function*() {
+		const { endpoint, motelPort } = yield* observabilityConfig
+		const baseUrl = endpoint || (motelPort ? `http://127.0.0.1:${motelPort}` : null)
+
+		return baseUrl === null
+			? Layer.empty
+			: Layer.merge(
+				OtlpTracer.layer({
+					url: `${baseUrl}/v1/traces`,
+					exportInterval: "500 millis",
+					shutdownTimeout: "1 second",
+					resource,
+				}),
+				OtlpLogger.layer({
+					url: `${baseUrl}/v1/logs`,
+					exportInterval: "500 millis",
+					shutdownTimeout: "1 second",
+					resource,
+				}),
+			).pipe(
+				Layer.provide(OtlpSerialization.layerJson),
+				Layer.provide(FetchHttpClient.layer),
+			)
+	})),
+} as const

package/src/services/CommandRunner.ts

@@ -49,7 +49,12 @@ export class CommandRunner extends Context.Service<CommandRunner, {
 			)
 
 			const run = Effect.fn("CommandRunner.run")(function*(command: string, args: readonly string[]) {
-				const result = yield* runProcess(command, args)
+				const result = yield* runProcess(command, args).pipe(Effect.withSpan("ghui.command.runProcess", {
+					attributes: {
+						"process.command": command,
+						"process.argv.count": args.length,
+					},
+				}))
 				if (result.exitCode !== 0) {
 					const detail = result.stderr.trim() || result.stdout.trim() || `exit code ${result.exitCode}`
 					return yield* new CommandError({ command, args: [...args], detail, cause: detail })

package/src/services/GitHubService.ts

@@ -1,11 +1,24 @@
 import { Context, Effect, Layer } from "effect"
 import { config } from "../config.js"
-import type { CheckItem, PullRequestItem } from "../domain.js"
+import type { CheckItem, PullRequestItem, PullRequestMergeAction, PullRequestMergeInfo } from "../domain.js"
 import { CommandRunner, type CommandError, type JsonParseError } from "./CommandRunner.js"
 
-interface GitHubPullRequestNode {
+interface GitHubPullRequestSummaryNode {
 	readonly number: number
 	readonly title: string
+	readonly isDraft: boolean
+	readonly reviewDecision: string | null
+	readonly autoMergeRequest: unknown | null
+	readonly state: string
+	readonly createdAt: string
+	readonly closedAt?: string | null
+	readonly url: string
+	readonly repository: {
+		readonly nameWithOwner: string
+	}
+}
+
+interface GitHubPullRequestNode extends GitHubPullRequestSummaryNode {
 	readonly body: string
 	readonly labels: {
 		readonly nodes: readonly {
@@ -16,20 +29,11 @@ interface GitHubPullRequestNode {
 	readonly additions: number
 	readonly deletions: number
 	readonly changedFiles: number
-	readonly isDraft: boolean
-	readonly reviewDecision: string | null
 	readonly statusCheckRollup?: {
 		readonly contexts: {
 			readonly nodes: readonly GraphQLCheckContext[]
 		}
 	} | null
-	readonly state: string
-	readonly createdAt: string
-	readonly closedAt?: string | null
-	readonly url: string
-	readonly repository: {
-		readonly nameWithOwner: string
-	}
 }
 
 type GraphQLCheckContext =
@@ -57,10 +61,33 @@ interface GraphQLSearchResponse {
 	}
 }
 
+interface GraphQLSearchSummaryResponse {
+	readonly data: {
+		readonly search: {
+			readonly nodes: readonly (GitHubPullRequestSummaryNode | null)[]
+			readonly pageInfo: {
+				readonly hasNextPage: boolean
+				readonly endCursor: string | null
+			}
+		}
+	}
+}
+
 interface GitHubViewer {
 	readonly login: string
 }
 
+interface GitHubMergeInfoResponse {
+	readonly number: number
+	readonly title: string
+	readonly state: string
+	readonly isDraft: boolean
+	readonly mergeable: string
+	readonly reviewDecision: string | null
+	readonly autoMergeRequest: unknown | null
+	readonly statusCheckRollup: readonly GraphQLCheckContext[]
+}
+
 const pullRequestSearchQuery = `
 query PullRequests($searchQuery: String!, $first: Int!, $after: String) {
   search(query: $searchQuery, type: ISSUE, first: $first, after: $after) {
@@ -71,6 +98,7 @@ query PullRequests($searchQuery: String!, $first: Int!, $after: String) {
         body
         isDraft
         reviewDecision
+        autoMergeRequest { enabledAt }
         additions
         deletions
         changedFiles
@@ -96,12 +124,34 @@ query PullRequests($searchQuery: String!, $first: Int!, $after: String) {
 }
 `
 
+const pullRequestSummarySearchQuery = `
+query PullRequests($searchQuery: String!, $first: Int!, $after: String) {
+  search(query: $searchQuery, type: ISSUE, first: $first, after: $after) {
+    nodes {
+      ... on PullRequest {
+        number
+        title
+        isDraft
+        reviewDecision
+        autoMergeRequest { enabledAt }
+        state
+        createdAt
+        closedAt
+        url
+        repository { nameWithOwner }
+      }
+    }
+    pageInfo { hasNextPage endCursor }
+  }
+}
+`
+
 const normalizeDate = (value: string | null | undefined) => {
 	if (!value || value.startsWith("0001-01-01")) return null
 	return new Date(value)
 }
 
-const getReviewStatus = (item: GitHubPullRequestNode): PullRequestItem["reviewStatus"] => {
+const getReviewStatus = (item: { readonly isDraft: boolean; readonly reviewDecision: string | null }): PullRequestItem["reviewStatus"] => {
 	if (item.isDraft) return "draft"
 	if (item.reviewDecision === "APPROVED") return "approved"
 	if (item.reviewDecision === "CHANGES_REQUESTED") return "changes"
@@ -139,8 +189,7 @@ const getContextConclusion = (context: GraphQLCheckContext): CheckItem["conclusi
 	return null
 }
 
-const getCheckInfo = (item: GitHubPullRequestNode): Pick<PullRequestItem, "checkStatus" | "checkSummary" | "checks"> => {
-	const contexts = item.statusCheckRollup?.contexts.nodes ?? []
+const getCheckInfoFromContexts = (contexts: readonly GraphQLCheckContext[]): Pick<PullRequestItem, "checkStatus" | "checkSummary" | "checks"> => {
 	if (contexts.length === 0) {
 		return { checkStatus: "none", checkSummary: null, checks: [] }
 	}
@@ -182,6 +231,9 @@ const getCheckInfo = (item: GitHubPullRequestNode): Pick<PullRequestItem, "check
 	return { checkStatus: "passing", checkSummary: `checks ${successful}/${contexts.length}`, checks }
 }
 
+const getCheckInfo = (item: GitHubPullRequestNode): Pick<PullRequestItem, "checkStatus" | "checkSummary" | "checks"> =>
+	getCheckInfoFromContexts(item.statusCheckRollup?.contexts.nodes ?? [])
+
 const parsePullRequest = (item: GitHubPullRequestNode): PullRequestItem => {
 	const checkInfo = getCheckInfo(item)
 
@@ -202,20 +254,52 @@ const parsePullRequest = (item: GitHubPullRequestNode): PullRequestItem => {
 		checkStatus: checkInfo.checkStatus,
 		checkSummary: checkInfo.checkSummary,
 		checks: checkInfo.checks,
+		autoMergeEnabled: item.autoMergeRequest !== null,
+		detailLoaded: true,
 		createdAt: new Date(item.createdAt),
 		closedAt: normalizeDate(item.closedAt),
 		url: item.url,
 	}
 }
 
+const parsePullRequestSummary = (item: GitHubPullRequestSummaryNode): PullRequestItem => ({
+	repository: item.repository.nameWithOwner,
+	number: item.number,
+	title: item.title,
+	body: "",
+	labels: [],
+	additions: 0,
+	deletions: 0,
+	changedFiles: 0,
+	state: item.state.toLowerCase() === "open" ? "open" : "closed",
+	reviewStatus: getReviewStatus(item),
+	checkStatus: "none",
+	checkSummary: null,
+	checks: [],
+	autoMergeEnabled: item.autoMergeRequest !== null,
+	detailLoaded: false,
+	createdAt: new Date(item.createdAt),
+	closedAt: normalizeDate(item.closedAt),
+	url: item.url,
+})
+
 const searchQuery = (author: string) => `author:${author} is:pr is:open sort:created-desc`
 
 type GitHubError = CommandError | JsonParseError
 
+const normalizeMergeable = (value: string): PullRequestMergeInfo["mergeable"] => {
+	if (value === "MERGEABLE") return "mergeable"
+	if (value === "CONFLICTING") return "conflicting"
+	return "unknown"
+}
+
 export class GitHubService extends Context.Service<GitHubService, {
 	readonly listOpenPullRequests: () => Effect.Effect<readonly PullRequestItem[], GitHubError>
+	readonly listOpenPullRequestDetails: () => Effect.Effect<readonly PullRequestItem[], GitHubError>
 	readonly getAuthenticatedUser: () => Effect.Effect<string, GitHubError>
 	readonly getPullRequestDiff: (repository: string, number: number) => Effect.Effect<string, CommandError>
+	readonly getPullRequestMergeInfo: (repository: string, number: number) => Effect.Effect<PullRequestMergeInfo, GitHubError>
+	readonly mergePullRequest: (repository: string, number: number, action: PullRequestMergeAction) => Effect.Effect<void, CommandError>
 	readonly toggleDraftStatus: (repository: string, number: number, isDraft: boolean) => Effect.Effect<void, CommandError>
 	readonly listRepoLabels: (repository: string) => Effect.Effect<readonly { readonly name: string; readonly color: string | null }[], GitHubError>
 	readonly addPullRequestLabel: (repository: string, number: number, label: string) => Effect.Effect<void, CommandError>
@@ -230,6 +314,32 @@ export class GitHubService extends Context.Service<GitHubService, {
 				const pullRequests: PullRequestItem[] = []
 				let cursor: string | null = null
 
+				while (pullRequests.length < config.prFetchLimit) {
+					const pageSize = Math.min(100, config.prFetchLimit - pullRequests.length)
+					const response: GraphQLSearchSummaryResponse = yield* command.runJson<GraphQLSearchSummaryResponse>("gh", [
+						"api", "graphql",
+						"-f", `query=${pullRequestSummarySearchQuery}`,
+						"-F", `searchQuery=${searchQuery(config.author)}`,
+						"-F", `first=${pageSize}`,
+						...(cursor ? ["-F", `after=${cursor}`] : []),
+					])
+
+					for (const node of response.data.search.nodes) {
+						if (node) pullRequests.push(parsePullRequestSummary(node))
+					}
+
+					if (!response.data.search.pageInfo.hasNextPage) break
+					cursor = response.data.search.pageInfo.endCursor
+					if (!cursor) break
+				}
+
+				return pullRequests.sort((left, right) => right.createdAt.getTime() - left.createdAt.getTime())
+			})
+
+			const listOpenPullRequestDetails = Effect.fn("GitHubService.listOpenPullRequestDetails")(function*() {
+				const pullRequests: PullRequestItem[] = []
+				let cursor: string | null = null
+
 				while (pullRequests.length < config.prFetchLimit) {
 					const pageSize = Math.min(100, config.prFetchLimit - pullRequests.length)
 					const response: GraphQLSearchResponse = yield* command.runJson<GraphQLSearchResponse>("gh", [
@@ -262,6 +372,40 @@ export class GitHubService extends Context.Service<GitHubService, {
 				return result.stdout
 			})
 
+			const getPullRequestMergeInfo = Effect.fn("GitHubService.getPullRequestMergeInfo")(function*(repository: string, number: number) {
+				const info = yield* command.runJson<GitHubMergeInfoResponse>("gh", [
+					"pr", "view", String(number), "--repo", repository,
+					"--json", "number,title,state,isDraft,mergeable,reviewDecision,autoMergeRequest,statusCheckRollup",
+				])
+				const checkInfo = getCheckInfoFromContexts(info.statusCheckRollup)
+
+				return {
+					repository,
+					number: info.number,
+					title: info.title,
+					state: info.state.toLowerCase() === "open" ? "open" : "closed",
+					isDraft: info.isDraft,
+					mergeable: normalizeMergeable(info.mergeable),
+					reviewStatus: getReviewStatus(info),
+					checkStatus: checkInfo.checkStatus,
+					checkSummary: checkInfo.checkSummary,
+					autoMergeEnabled: info.autoMergeRequest !== null,
+				} satisfies PullRequestMergeInfo
+			})
+
+			const mergePullRequest = Effect.fn("GitHubService.mergePullRequest")(function*(repository: string, number: number, action: PullRequestMergeAction) {
+				const base = ["pr", "merge", String(number), "--repo", repository] as const
+				if (action === "disable-auto") {
+					yield* command.run("gh", [...base, "--disable-auto"])
+				} else if (action === "auto") {
+					yield* command.run("gh", [...base, "--squash", "--auto", "--delete-branch"])
+				} else if (action === "admin") {
+					yield* command.run("gh", [...base, "--squash", "--admin", "--delete-branch"])
+				} else {
+					yield* command.run("gh", [...base, "--squash", "--delete-branch"])
+				}
+			})
+
 			const toggleDraftStatus = Effect.fn("GitHubService.toggleDraftStatus")(function*(repository: string, number: number, isDraft: boolean) {
 				yield* command.run("gh", ["pr", "ready", String(number), "--repo", repository, ...(isDraft ? [] : ["--undo"])])
 			})
@@ -283,8 +427,11 @@ export class GitHubService extends Context.Service<GitHubService, {
 
 			return GitHubService.of({
 				listOpenPullRequests,
+				listOpenPullRequestDetails,
 				getAuthenticatedUser,
 				getPullRequestDiff,
+				getPullRequestMergeInfo,
+				mergePullRequest,
 				toggleDraftStatus,
 				listRepoLabels,
 				addPullRequestLabel,

package/src/ui/FooterHints.tsx

@@ -0,0 +1,145 @@
+import { colors } from "./colors.js"
+import { TextLine } from "./primitives.js"
+
+export interface RetryProgress {
+	readonly attempt: number
+	readonly max: number
+}
+
+export const FooterHints = ({
+	filterEditing,
+	showFilterClear,
+	detailFullView,
+	diffFullView,
+	hasSelection,
+	hasError,
+	isLoading,
+	loadingIndicator,
+	retryProgress,
+}: {
+	filterEditing: boolean
+	showFilterClear: boolean
+	detailFullView: boolean
+	diffFullView: boolean
+	hasSelection: 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>
+		)
+	}
+
+	if (diffFullView) {
+		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}>[]</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>
+		)
+	}
+
+	if (detailFullView) {
+		return (
+			<TextLine>
+				<span fg={colors.count}>esc</span>
+				<span fg={colors.muted}> back  </span>
+				<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>
+		)
+	}
+
+	return (
+		<TextLine>
+			<span fg={colors.count}>/</span>
+			<span fg={colors.muted}> filter  </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  " : " ref  "}</span>
+			{hasSelection ? (
+				<>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> move  </span>
+				</>
+			) : null}
+			{hasSelection && detailFullView ? (
+				<>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> back  </span>
+				</>
+			) : hasSelection ? (
+				<>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> expand  </span>
+				</>
+			) : null}
+			{hasSelection ? (
+				<>
+					<span fg={colors.count}>d</span>
+					<span fg={colors.muted}> draft  </span>
+					<span fg={colors.count}>p</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>
+					<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>
+	)
+}

package/src/ui/PullRequestList.tsx

@@ -0,0 +1,128 @@
+import { TextAttributes } from "@opentui/core"
+import type { PullRequestItem } from "../domain.js"
+import { daysOpen } from "../date.js"
+import { colors } from "./colors.js"
+import { fitCell, PlainLine, SectionTitle, TextLine } from "./primitives.js"
+import { checkLabel, repoColor, reviewIcon, statusColor } from "./pullRequests.js"
+
+export type LoadStatus = "loading" | "ready" | "error"
+export type PullRequestGroups = Array<[string, PullRequestItem[]]>
+
+const GROUP_ICON = "◆"
+
+const getRowLayout = (contentWidth: number, numberWidth = 6) => {
+	const reviewWidth = 1
+	const checkWidth = 6
+	const ageWidth = 4
+	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 GroupTitle = ({ label, color }: { label: string; color: string }) => (
+	<TextLine>
+		<span fg={color}>{GROUP_ICON} </span>
+		<span fg={color} attributes={TextAttributes.BOLD}>{label}</span>
+	</TextLine>
+)
+
+const PullRequestRow = ({
+	pullRequest,
+	selected,
+	contentWidth,
+	numWidth,
+	onSelect,
+}: {
+	pullRequest: PullRequestItem
+	selected: boolean
+	contentWidth: number
+	numWidth: number
+	onSelect: () => void
+}) => {
+	const checkText = checkLabel(pullRequest)?.replace(/^checks\s+/, "") ?? ""
+	const ageText = `${daysOpen(pullRequest.createdAt)}d`
+	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth)
+	const rowWidth = reviewWidth + 1 + numberWidth + 1 + titleWidth + checkWidth + ageWidth
+	const fillerWidth = Math.max(0, contentWidth - rowWidth)
+	const indicatorColor = pullRequest.autoMergeEnabled ? colors.accent : statusColor(pullRequest.reviewStatus)
+
+	return (
+		<box height={1} onMouseDown={onSelect}>
+			<TextLine fg={selected ? colors.selectedText : colors.text} bg={selected ? colors.selectedBg : undefined}>
+				<span fg={indicatorColor}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
+				<span> </span>
+				<span fg={selected ? colors.accent : colors.count}>{fitCell(`#${pullRequest.number}`, numberWidth, "right")}</span>
+				<span> </span>
+				<span>{fitCell(pullRequest.title, titleWidth)}</span>
+				<span fg={statusColor(pullRequest.checkStatus)}>{fitCell(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,
+	onSelectPullRequest,
+}: {
+	groups: PullRequestGroups
+	selectedUrl: string | null
+	status: LoadStatus
+	error: string | null
+	contentWidth: number
+	filterText: string
+	showFilterBar: boolean
+	isFilterEditing: boolean
+	onSelectPullRequest: (url: string) => void
+}) => {
+	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
+	const emptyText = filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests."
+
+	return (
+		<box flexDirection="column">
+			<SectionTitle title="PULL REQUESTS" />
+			{showFilterBar ? (
+				<TextLine>
+					<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>
+			) : null}
+			{status === "loading" && itemCount === 0 ? <PlainLine text="- Loading pull requests..." fg={colors.muted} /> : null}
+			{status === "error" ? <PlainLine text={`- ${error ?? "Could not load pull requests."}`} fg={colors.error} /> : null}
+			{status === "ready" && itemCount === 0 ? <PlainLine text={emptyText} fg={colors.muted} /> : null}
+			{groups.map(([repo, pullRequests]) => {
+				const numWidth = groupNumberWidth(pullRequests)
+				return (
+					<box key={repo} flexDirection="column">
+						<GroupTitle label={repo} color={repoColor(repo)} />
+						{pullRequests.map((pullRequest) => (
+							<PullRequestRow
+								key={pullRequest.url}
+								pullRequest={pullRequest}
+								selected={pullRequest.url === selectedUrl}
+								contentWidth={contentWidth}
+								numWidth={numWidth}
+								onSelect={() => onSelectPullRequest(pullRequest.url)}
+							/>
+						))}
+					</box>
+				)
+			})}
+		</box>
+	)
+}