@kitlangton/ghui 0.1.16 → 0.1.17

package/README.md

@@ -1,8 +1,8 @@
 # ghui
 
-<img width="1420" height="856" alt="image" src="https://github.com/user-attachments/assets/5e560a4a-5887-4baa-a6d4-e1f4f0410c70" />
+Terminal UI for keeping up with your open GitHub pull requests across repositories.
 
-Terminal UI for browsing and acting on your open GitHub pull requests across repositories.
+`ghui` gives you one keyboard-driven place to review PR details, inspect diffs, manage labels, toggle draft state, merge, open PRs in GitHub, and copy PR metadata without leaving the terminal.
 
 ## Install
 
@@ -10,38 +10,29 @@ Terminal UI for browsing and acting on your open GitHub pull requests across rep
 npm install -g @kitlangton/ghui
 ```
 
-Requires `bun` and an authenticated GitHub CLI (`gh auth login`).
-
-## Install Locally
+Requirements:
 
-Clone, install, and link:
-
-```bash
-git clone https://github.com/kitlangton/ghui.git
-cd ghui
-bun install
-bun link
-```
+- Bun runtime installed
+- GitHub CLI installed and authenticated with `gh auth login`
 
-Run from anywhere:
+Run it from anywhere:
 
 ```bash
 ghui
 ```
 
-## Publish
-
-This package publishes from GitHub Releases using npm Trusted Publishing.
+<img width="1420" height="856" alt="image" src="https://github.com/user-attachments/assets/5e560a4a-5887-4baa-a6d4-e1f4f0410c70" />
 
-The first npm publish has already created the package. Configure npm Trusted Publishing:
+## Local Development
 
-- Package: `@kitlangton/ghui`
-- Publisher: GitHub Actions
-- Owner: `kitlangton`
-- Repository: `ghui`
-- Workflow filename: `publish.yml`
+Clone, install, and link:
 
-After that, publish by creating a GitHub Release whose tag matches `package.json` version, for example `v0.1.1`.
+```bash
+git clone https://github.com/kitlangton/ghui.git
+cd ghui
+bun install
+bun link
+```
 
 ## Configuration
 
@@ -66,7 +57,11 @@ You can also copy `.env.example` to `.env` and edit the values locally.
 - `enter`: expand details
 - `esc`: return from expanded details or close modal
 - `r`: refresh
-- `d`: toggle draft
+- `d`: view diff
+- `s`: toggle draft or ready-for-review state
+- `m`: merge
+- `x`: close with confirmation
+- `t`: choose theme
 - `l`: manage labels
 - `o`: open PR in browser
 - `y`: copy PR metadata

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.16",
+	"version": "0.1.17",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",

package/src/App.tsx

@@ -17,7 +17,7 @@ import { pullRequestDiffKey, splitPatchFiles, type PullRequestDiffState } from "
 import { DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailBodyHeight, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
 import { FooterHints, type RetryProgress } from "./ui/FooterHints.js"
 import { Divider, fitCell, PlainLine, SeparatorColumn } from "./ui/primitives.js"
-import { initialLabelModalState, initialMergeModalState, initialThemeModalState, LabelModal, MergeModal, ThemeModal } from "./ui/modals.js"
+import { CloseModal, initialCloseModalState, initialLabelModalState, initialMergeModalState, initialThemeModalState, LabelModal, MergeModal, ThemeModal } from "./ui/modals.js"
 import { groupBy, reviewLabel } from "./ui/pullRequests.js"
 import { PullRequestDiffPane } from "./ui/PullRequestDiffPane.js"
 import { PullRequestList } from "./ui/PullRequestList.js"
@@ -82,11 +82,13 @@ const diffWrapModeAtom = Atom.make<"none" | "word">("none").pipe(Atom.keepAlive)
 const pullRequestDiffCacheAtom = Atom.make<Record<string, PullRequestDiffState>>({}).pipe(Atom.keepAlive)
 
 const labelModalAtom = Atom.make(initialLabelModalState).pipe(Atom.keepAlive)
+const closeModalAtom = Atom.make(initialCloseModalState).pipe(Atom.keepAlive)
 const mergeModalAtom = Atom.make(initialMergeModalState).pipe(Atom.keepAlive)
 const themeIdAtom = Atom.make<ThemeId>(initialThemeId).pipe(Atom.keepAlive)
 const themeModalAtom = Atom.make(initialThemeModalState).pipe(Atom.keepAlive)
 const labelCacheAtom = Atom.make<Record<string, readonly PullRequestLabel[]>>({}).pipe(Atom.keepAlive)
 const pullRequestOverridesAtom = Atom.make<Record<string, PullRequestItem>>({}).pipe(Atom.keepAlive)
+const recentlyCompletedPullRequestsAtom = Atom.make<Record<string, PullRequestItem>>({}).pipe(Atom.keepAlive)
 const usernameAtom = githubRuntime.atom(
 	config.author === "@me"
 		? GitHubService.use((github) => github.getAuthenticatedUser())
@@ -117,6 +119,9 @@ const getPullRequestMergeInfoAtom = githubRuntime.fn<{ readonly repository: stri
 const mergePullRequestAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number; readonly action: PullRequestMergeAction }>()((input) =>
 	GitHubService.use((github) => github.mergePullRequest(input.repository, input.number, input.action))
 )
+const closePullRequestAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number }>()((input) =>
+	GitHubService.use((github) => github.closePullRequest(input.repository, input.number))
+)
 
 const deleteLastWord = (value: string) => value.replace(/\s*\S+\s*$/, "")
 
@@ -262,6 +267,7 @@ export const App = () => {
 	const [diffWrapMode, setDiffWrapMode] = useAtom(diffWrapModeAtom)
 	const [pullRequestDiffCache, setPullRequestDiffCache] = useAtom(pullRequestDiffCacheAtom)
 	const [labelModal, setLabelModal] = useAtom(labelModalAtom)
+	const [closeModal, setCloseModal] = useAtom(closeModalAtom)
 	const [mergeModal, setMergeModal] = useAtom(mergeModalAtom)
 	const [themeId, setThemeId] = useAtom(themeIdAtom)
 	const [themeModal, setThemeModal] = useAtom(themeModalAtom)
@@ -272,8 +278,11 @@ export const App = () => {
 	themeModalRef.current = themeModal
 	const [labelCache, setLabelCache] = useAtom(labelCacheAtom)
 	const [pullRequestOverrides, setPullRequestOverrides] = useAtom(pullRequestOverridesAtom)
+	const [recentlyCompletedPullRequests, setRecentlyCompletedPullRequests] = useAtom(recentlyCompletedPullRequestsAtom)
 	const retryProgress = useAtomValue(retryProgressAtom)
 	const [loadingFrame, setLoadingFrame] = useState(0)
+	const [refreshCompletionMessage, setRefreshCompletionMessage] = useState<string | null>(null)
+	const [refreshStartedAt, setRefreshStartedAt] = useState<number | null>(null)
 	const [terminalFocused, setTerminalFocused] = useState(true)
 	const usernameResult = useAtomValue(usernameAtom)
 	const loadRepoLabels = useAtomSet(listRepoLabelsAtom, { mode: "promise" })
@@ -284,6 +293,7 @@ export const App = () => {
 	const getPullRequestDiff = useAtomSet(getPullRequestDiffAtom, { mode: "promise" })
 	const getPullRequestMergeInfo = useAtomSet(getPullRequestMergeInfoAtom, { mode: "promise" })
 	const mergePullRequest = useAtomSet(mergePullRequestAtom, { mode: "promise" })
+	const closePullRequest = useAtomSet(closePullRequestAtom, { mode: "promise" })
 	const terminalWidth = width ?? 100
 	const terminalHeight = height ?? 24
 	const contentWidth = Math.max(1, terminalWidth)
@@ -301,6 +311,7 @@ export const App = () => {
 	const pendingGTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const diffPrefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const detailHydrationRef = useRef<number | null>(null)
+	const refreshGenerationRef = useRef(0)
 	const lastPullRequestRefreshAtRef = useRef(0)
 	const terminalFocusedRef = useRef(true)
 	const terminalWasBlurredRef = useRef(false)
@@ -338,10 +349,19 @@ export const App = () => {
 	}, [])
 
 	const pullRequestLoad = AsyncResult.getOrElse(pullRequestResult, () => null)
-	const pullRequests = useMemo(
-		() => pullRequestLoad?.data.map((pullRequest) => pullRequestOverrides[pullRequest.url] ?? pullRequest) ?? [],
-		[pullRequestLoad?.data, pullRequestOverrides],
-	)
+	const pullRequests = useMemo(() => {
+		const source = pullRequestLoad?.data ?? []
+		const seenUrls = new Set<string>()
+		const openPullRequests = source.map((pullRequest) => {
+			seenUrls.add(pullRequest.url)
+			return recentlyCompletedPullRequests[pullRequest.url] ?? pullRequestOverrides[pullRequest.url] ?? pullRequest
+		})
+
+		return [
+			...openPullRequests,
+			...Object.values(recentlyCompletedPullRequests).filter((pullRequest) => !seenUrls.has(pullRequest.url)),
+		]
+	}, [pullRequestLoad?.data, pullRequestOverrides, recentlyCompletedPullRequests])
 	const pullRequestStatus: LoadStatus = pullRequestResult.waiting && pullRequestLoad === null
 		? "loading"
 		: AsyncResult.isFailure(pullRequestResult)
@@ -399,8 +419,14 @@ export const App = () => {
 		setPullRequestOverrides((current) => ({ ...current, [url]: transform(pullRequest) }))
 	}
 	const refreshPullRequests = (message?: string) => {
+		refreshGenerationRef.current += 1
+		setPullRequestOverrides({})
+		if (message) {
+			setNotice(null)
+			setRefreshCompletionMessage(message)
+			setRefreshStartedAt(lastPullRequestRefreshAtRef.current)
+		}
 		refreshPullRequestsAtom()
-		if (message) flashNotice(message)
 	}
 	refreshPullRequestsRef.current = refreshPullRequests
 	maybeRefreshPullRequestsRef.current = (minimumAgeMs) => {
@@ -417,6 +443,21 @@ export const App = () => {
 		}
 	}, [pullRequestLoad?.fetchedAt])
 
+	useEffect(() => {
+		if (!refreshCompletionMessage || refreshStartedAt === null) return
+		const fetchedAt = pullRequestLoad?.fetchedAt?.getTime()
+		const isHydratingDetails = pullRequestStatus === "ready" && pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)
+		if (pullRequestStatus === "ready" && fetchedAt !== undefined && fetchedAt !== refreshStartedAt && !isHydratingDetails) {
+			flashNotice(`✓ ${refreshCompletionMessage}`)
+			setRefreshCompletionMessage(null)
+			setRefreshStartedAt(null)
+		} else if (pullRequestStatus === "error") {
+			flashNotice("Refresh failed")
+			setRefreshCompletionMessage(null)
+			setRefreshStartedAt(null)
+		}
+	}, [refreshCompletionMessage, refreshStartedAt, pullRequestStatus, pullRequestLoad?.fetchedAt, pullRequests])
+
 	useEffect(() => {
 		const handleFocus = () => {
 			terminalFocusedRef.current = true
@@ -464,8 +505,9 @@ export const App = () => {
 	const selectedPullRequest = visiblePullRequests[selectedIndex] ?? null
 	const selectedDiffState = selectedPullRequest ? pullRequestDiffCache[pullRequestDiffKey(selectedPullRequest)] : undefined
 	const effectiveDiffRenderView = contentWidth >= 100 ? diffRenderView : "unified"
-	const isHydratingPullRequestDetails = pullRequestStatus === "ready" && pullRequests.some((pullRequest) => !pullRequest.detailLoaded)
-	const hasActiveLoadingIndicator = pullRequestStatus === "loading" || isHydratingPullRequestDetails || labelModal.loading || mergeModal.loading || mergeModal.running || selectedDiffState?.status === "loading"
+	const isHydratingPullRequestDetails = pullRequestStatus === "ready" && pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)
+	const isRefreshingPullRequests = pullRequestResult.waiting && pullRequestLoad !== null
+	const hasActiveLoadingIndicator = pullRequestResult.waiting || isHydratingPullRequestDetails || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?.status === "loading"
 	const loadingIndicator = LOADING_FRAMES[loadingFrame % LOADING_FRAMES.length]!
 
 	useEffect(() => {
@@ -480,9 +522,11 @@ export const App = () => {
 		const fetchedAt = pullRequestLoad?.fetchedAt?.getTime()
 		if (pullRequestStatus !== "ready" || fetchedAt === undefined) return
 		if (detailHydrationRef.current === fetchedAt) return
-		if (!pullRequests.some((pullRequest) => !pullRequest.detailLoaded)) return
+		if (!pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)) return
 		detailHydrationRef.current = fetchedAt
+		const generation = refreshGenerationRef.current
 		void loadPullRequestDetails().then((details) => {
+			if (generation !== refreshGenerationRef.current) return
 			setPullRequestOverrides((current) => {
 				const next = { ...current }
 				for (const detail of details) {
@@ -560,8 +604,53 @@ export const App = () => {
 			.catch((error) => flashNotice(errorMessage(error)))
 	}
 
+	const openCloseModal = () => {
+		if (!selectedPullRequest || selectedPullRequest.state !== "open") return
+		setLabelModal(initialLabelModalState)
+		setMergeModal(initialMergeModalState)
+		setThemeModal(initialThemeModalState)
+		setCloseModal({
+			open: true,
+			repository: selectedPullRequest.repository,
+			number: selectedPullRequest.number,
+			title: selectedPullRequest.title,
+			url: selectedPullRequest.url,
+			running: false,
+			error: null,
+		})
+	}
+
+	const confirmClosePullRequest = () => {
+		if (!closeModal.repository || closeModal.number === null || !closeModal.url || closeModal.running) return
+		const { repository, number, url } = closeModal
+		const targetPullRequest = pullRequests.find((pullRequest) => pullRequest.url === url)
+		const previousPullRequest = targetPullRequest ?? null
+
+		setCloseModal((current) => ({ ...current, running: true, error: null }))
+		void closePullRequest({ repository, number })
+			.then(() => {
+				if (previousPullRequest) {
+					setRecentlyCompletedPullRequests((current) => ({
+						...current,
+						[previousPullRequest.url]: {
+							...previousPullRequest,
+							state: "closed",
+							autoMergeEnabled: false,
+						},
+					}))
+				}
+				setCloseModal(initialCloseModalState)
+				refreshPullRequests(`Closed #${number}`)
+			})
+			.catch((error) => {
+				setCloseModal((current) => ({ ...current, running: false, error: errorMessage(error) }))
+				flashNotice(errorMessage(error))
+			})
+	}
+
 	const openThemeModal = () => {
 		setLabelModal(initialLabelModalState)
+		setCloseModal(initialCloseModalState)
 		setMergeModal(initialMergeModalState)
 		setThemeModal({
 			open: true,
@@ -622,6 +711,7 @@ export const App = () => {
 
 	const openLabelModal = () => {
 		if (!selectedPullRequest) return
+		setCloseModal(initialCloseModalState)
 		setMergeModal(initialMergeModalState)
 		setThemeModal(initialThemeModalState)
 		const repository = selectedPullRequest.repository
@@ -652,6 +742,7 @@ export const App = () => {
 
 	const openMergeModal = () => {
 		if (!selectedPullRequest) return
+		setCloseModal(initialCloseModalState)
 		setThemeModal(initialThemeModalState)
 		const repository = selectedPullRequest.repository
 		const number = selectedPullRequest.number
@@ -702,6 +793,16 @@ export const App = () => {
 		setMergeModal((current) => ({ ...current, running: true, error: null }))
 		void mergePullRequest({ repository, number, action: option.action })
 			.then(() => {
+				if (option.refreshOnSuccess && previousPullRequest) {
+					setRecentlyCompletedPullRequests((current) => ({
+						...current,
+						[previousPullRequest.url]: {
+							...previousPullRequest,
+							state: "merged",
+							autoMergeEnabled: false,
+						},
+					}))
+				}
 				setMergeModal(initialMergeModalState)
 				if (option.refreshOnSuccess) {
 					refreshPullRequests(`${option.pastTense} #${number}`)
@@ -758,6 +859,10 @@ export const App = () => {
 				closeThemeModal(false)
 				return
 			}
+			if (closeModal.open) {
+				setCloseModal(initialCloseModalState)
+				return
+			}
 			if (mergeModal.open) {
 				setMergeModal(initialMergeModalState)
 				return
@@ -811,6 +916,18 @@ export const App = () => {
 			return
 		}
 
+		if (closeModal.open) {
+			if (key.name === "escape") {
+				setCloseModal(initialCloseModalState)
+				return
+			}
+			if (key.name === "return" || key.name === "enter") {
+				confirmClosePullRequest()
+				return
+			}
+			return
+		}
+
 		if (mergeModal.open) {
 			const options = availableMergeActions(mergeModal.info)
 			if (key.name === "escape") {
@@ -1110,7 +1227,7 @@ export const App = () => {
 			return
 		}
 		if (key.name === "r") {
-			refreshPullRequests("Refreshing pull requests...")
+			refreshPullRequests("Refreshed")
 			return
 		}
 		if (
@@ -1203,6 +1320,10 @@ export const App = () => {
 			openDiffView()
 			return
 		}
+		if (key.name === "x" && selectedPullRequest?.state === "open") {
+			openCloseModal()
+			return
+		}
 		if (key.name === "l" && selectedPullRequest) {
 			openLabelModal()
 			return
@@ -1278,6 +1399,10 @@ export const App = () => {
 	const labelModalHeight = Math.min(20, terminalHeight - 4)
 	const labelModalLeft = Math.floor((contentWidth - labelModalWidth) / 2)
 	const labelModalTop = Math.floor((terminalHeight - labelModalHeight) / 2)
+	const closeModalWidth = Math.min(68, Math.max(46, contentWidth - 12))
+	const closeModalHeight = Math.min(12, terminalHeight - 4)
+	const closeModalLeft = Math.floor((contentWidth - closeModalWidth) / 2)
+	const closeModalTop = Math.floor((terminalHeight - closeModalHeight) / 2)
 	const mergeModalWidth = Math.min(68, Math.max(46, contentWidth - 12))
 	const mergeModalHeight = Math.min(16, terminalHeight - 4)
 	const mergeModalLeft = Math.floor((contentWidth - mergeModalWidth) / 2)
@@ -1391,8 +1516,9 @@ export const App = () => {
 						detailFullView={detailFullView}
 						diffFullView={diffFullView}
 						hasSelection={selectedPullRequest !== null}
+						canCloseSelection={selectedPullRequest?.state === "open"}
 						hasError={pullRequestStatus === "error"}
-						isLoading={pullRequestStatus === "loading"}
+						isLoading={pullRequestStatus === "loading" || isRefreshingPullRequests || isHydratingPullRequestDetails || closeModal.running || mergeModal.running}
 						loadingIndicator={loadingIndicator}
 						retryProgress={retryProgress}
 					/>
@@ -1409,6 +1535,16 @@ export const App = () => {
 					loadingIndicator={loadingIndicator}
 				/>
 			) : null}
+			{closeModal.open ? (
+				<CloseModal
+					state={closeModal}
+					modalWidth={closeModalWidth}
+					modalHeight={closeModalHeight}
+					offsetLeft={closeModalLeft}
+					offsetTop={closeModalTop}
+					loadingIndicator={loadingIndicator}
+				/>
+			) : null}
 			{mergeModal.open ? (
 				<MergeModal
 					state={mergeModal}

package/src/domain.ts

@@ -1,4 +1,4 @@
-export type PullRequestState = "open" | "closed"
+export type PullRequestState = "open" | "closed" | "merged"
 
 export type CheckConclusion = "success" | "failure" | "neutral" | "skipped" | "cancelled" | "timed_out"
 

package/src/services/GitHubService.ts

@@ -301,6 +301,7 @@ export class GitHubService extends Context.Service<GitHubService, {
 	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 closePullRequest: (repository: string, number: number) => 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>
@@ -399,6 +400,10 @@ export class GitHubService extends Context.Service<GitHubService, {
 				yield* command.run("gh", [...base, ...getMergeActionDefinition(action).cliArgs])
 			})
 
+			const closePullRequest = Effect.fn("GitHubService.closePullRequest")(function*(repository: string, number: number) {
+				yield* command.run("gh", ["pr", "close", String(number), "--repo", repository])
+			})
+
 			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"])])
 			})
@@ -425,6 +430,7 @@ export class GitHubService extends Context.Service<GitHubService, {
 				getPullRequestDiff,
 				getPullRequestMergeInfo,
 				mergePullRequest,
+				closePullRequest,
 				toggleDraftStatus,
 				listRepoLabels,
 				addPullRequestLabel,

package/src/ui/FooterHints.tsx

@@ -12,6 +12,7 @@ export const FooterHints = ({
 	detailFullView,
 	diffFullView,
 	hasSelection,
+	canCloseSelection,
 	hasError,
 	isLoading,
 	loadingIndicator,
@@ -22,6 +23,7 @@ export const FooterHints = ({
 	detailFullView: boolean
 	diffFullView: boolean
 	hasSelection: boolean
+	canCloseSelection: boolean
 	hasError: boolean
 	isLoading: boolean
 	loadingIndicator: string
@@ -117,6 +119,12 @@ export const FooterHints = ({
 					<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>

package/src/ui/PullRequestList.tsx

@@ -45,22 +45,28 @@ const PullRequestRow = ({
 	numWidth: number
 	onSelect: () => void
 }) => {
-	const checkText = checkLabel(pullRequest)?.replace(/^checks\s+/, "") ?? ""
+	const isClosed = pullRequest.state === "closed"
+	const isMerged = pullRequest.state === "merged"
+	const isFinal = isClosed || isMerged
+	const checkText = isMerged ? "merged" : isClosed ? "closed" : 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)
+	const indicatorColor = isMerged ? colors.status.passing : isClosed ? colors.muted : pullRequest.autoMergeEnabled ? colors.accent : statusColor(pullRequest.reviewStatus)
+	const rowTextColor = selected ? colors.selectedText : isFinal ? colors.muted : colors.text
+	const numberColor = selected ? colors.accent : isFinal ? colors.muted : colors.count
+	const checkColor = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
 
 	return (
 		<box height={1} onMouseDown={onSelect}>
-			<TextLine fg={selected ? colors.selectedText : colors.text} bg={selected ? colors.selectedBg : undefined}>
+			<TextLine fg={rowTextColor} 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 fg={numberColor}>{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={checkColor}>{fitCell(checkText, checkWidth, "right")}</span>
 				<span fg={colors.muted}>{fitCell(ageText, ageWidth, "right")}</span>
 				{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
 			</TextLine>

package/src/ui/modals.tsx

@@ -25,6 +25,16 @@ export interface MergeModalState {
 	readonly error: string | null
 }
 
+export interface CloseModalState {
+	readonly open: boolean
+	readonly repository: string | null
+	readonly number: number | null
+	readonly title: string
+	readonly url: string | null
+	readonly running: boolean
+	readonly error: string | null
+}
+
 export interface ThemeModalState {
 	readonly open: boolean
 	readonly query: string
@@ -52,6 +62,16 @@ export const initialMergeModalState: MergeModalState = {
 	error: null,
 }
 
+export const initialCloseModalState: CloseModalState = {
+	open: false,
+	repository: null,
+	number: null,
+	title: "",
+	url: null,
+	running: false,
+	error: null,
+}
+
 export const initialThemeModalState: ThemeModalState = {
 	open: false,
 	query: "",
@@ -191,7 +211,7 @@ export const MergeModal = ({
 	const options = availableMergeActions(state.info)
 	const selectedIndex = options.length === 0 ? 0 : Math.max(0, Math.min(state.selectedIndex, options.length - 1))
 	const title = state.info ? `Merge  #${state.info.number}` : state.number ? `Merge  #${state.number}` : "Merge"
-	const rightText = state.running ? "running" : state.loading ? "loading" : state.info?.autoMergeEnabled ? "auto on" : "manual"
+	const rightText = state.running ? `${loadingIndicator} running` : state.loading ? `${loadingIndicator} loading` : state.info?.autoMergeEnabled ? "auto on" : "manual"
 	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
 	const repo = state.info?.repository ?? state.repository
 	const statusLine = state.info
@@ -262,6 +282,73 @@ export const MergeModal = ({
 	)
 }
 
+export const CloseModal = ({
+	state,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+	loadingIndicator,
+}: {
+	state: CloseModalState
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+	loadingIndicator: string
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const title = state.number ? `Close  #${state.number}` : "Close pull request"
+	const rightText = state.running ? `${loadingIndicator} closing` : "confirm"
+	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
+	const repo = state.repository ? shortRepoName(state.repository) : ""
+	const titleLines = [
+		fitCell(repo, contentWidth),
+		fitCell(state.title, contentWidth),
+	]
+	const bodyHeight = Math.max(1, modalHeight - 7)
+	const topRows = Math.max(0, Math.floor((bodyHeight - titleLines.length - 2) / 2))
+	const bottomRows = Math.max(0, bodyHeight - topRows - titleLines.length - 2)
+
+	return (
+		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.error} attributes={TextAttributes.BOLD}>{title}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={state.running ? colors.status.pending : colors.muted}>{rightText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<PlainLine text={fitCell("This will close the pull request without merging it.", contentWidth)} fg={colors.muted} />
+			</box>
+			<Divider width={innerWidth} />
+			<box height={bodyHeight} flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{state.error ? (
+					<PlainLine text={fitCell(state.error, contentWidth)} fg={colors.error} />
+				) : (
+					<>
+						{Array.from({ length: topRows }, (_, index) => <box key={`top-${index}`} height={1} />)}
+						<PlainLine text={titleLines[0]!} fg={colors.muted} />
+						<PlainLine text={titleLines[1]!} fg={colors.text} bold />
+						{Array.from({ length: bottomRows }, (_, index) => <box key={`bottom-${index}`} height={1} />)}
+					</>
+				)}
+			</box>
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> close  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> cancel</span>
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}
+
 export const ThemeModal = ({
 	state,
 	activeThemeId,

package/src/ui/pullRequests.ts

@@ -18,6 +18,8 @@ export const checkLabel = (pullRequest: PullRequestItem) => pullRequest.checkSum
 export const statusColor = (status: PullRequestItem["reviewStatus"] | PullRequestItem["checkStatus"]) => colors.status[status]
 
 export const reviewIcon = (pullRequest: PullRequestItem) => {
+	if (pullRequest.state === "merged") return "✓"
+	if (pullRequest.state === "closed") return "×"
 	if (pullRequest.autoMergeEnabled) return "↻"
 	if (pullRequest.reviewStatus === "draft") return "◌"
 	if (pullRequest.reviewStatus === "approved") return "✓"