@kitlangton/ghui 0.1.0 → 0.1.2

package/README.md

@@ -4,10 +4,16 @@
 
 Terminal UI for browsing and acting on your open GitHub pull requests across repositories.
 
-## Install Locally
+## Install
+
+```bash
+npm install -g @kitlangton/ghui
+```
 
 Requires `bun` and an authenticated GitHub CLI (`gh auth login`).
 
+## Install Locally
+
 Clone, install, and link:
 
 ```bash
@@ -27,7 +33,7 @@ ghui
 
 This package publishes from GitHub Releases using npm Trusted Publishing.
 
-If this is the first npm publish, publish once from your machine with `npm publish --access public`. Then configure npm Trusted Publishing:
+The first npm publish has already created the package. Configure npm Trusted Publishing:
 
 - Package: `@kitlangton/ghui`
 - Publisher: GitHub Actions
@@ -35,7 +41,7 @@ If this is the first npm publish, publish once from your machine with `npm publi
 - Repository: `ghui`
 - Workflow filename: `publish.yml`
 
-After that, publish by creating a GitHub Release whose tag matches `package.json` version, for example `v0.1.0`.
+After that, publish by creating a GitHub Release whose tag matches `package.json` version, for example `v0.1.1`.
 
 ## Configuration
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",
@@ -31,7 +31,7 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"bin": {
-		"ghui": "./bin/ghui"
+		"ghui": "bin/ghui.js"
 	},
 	"scripts": {
 		"dev": "bun --watch src/index.tsx",

package/src/App.tsx

@@ -1,14 +1,16 @@
 import { TextAttributes } from "@opentui/core"
-import { useAtom } from "@effect/atom-react"
+import { useAtom, useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react"
 import { useKeyboard, useTerminalDimensions } from "@opentui/react"
+import { Cause, Effect, Schedule } from "effect"
+import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import * as Atom from "effect/unstable/reactivity/Atom"
-import { Fragment, useEffect, useMemo, useRef } from "react"
+import { Fragment, useEffect, useMemo, useRef, useState } from "react"
 import { config } from "./config.js"
 import type { CheckItem, PullRequestItem, PullRequestLabel } from "./domain.js"
 import { daysOpen, formatRelativeDate, formatShortDate, formatTimestamp } from "./date.js"
-import { addPullRequestLabel, getAuthenticatedUser, listOpenPullRequests as loadOpenPullRequests, listRepoLabels, removePullRequestLabel, toggleDraftStatus } from "./services/GitHubService.js"
+import { GitHubService } from "./services/GitHubService.js"
 
-const toggleDraft = (repository: string, number: number, isDraft: boolean) => toggleDraftStatus(repository, number, isDraft)
+const githubRuntime = Atom.runtime(GitHubService.layer)
 
 const colors = {
 	text: "#ede7da",
@@ -41,10 +43,8 @@ const colors = {
 
 type LoadStatus = "loading" | "ready" | "error"
 
-interface PullRequestState {
-	readonly status: LoadStatus
+interface PullRequestLoad {
 	readonly data: readonly PullRequestItem[]
-	readonly error: string | null
 	readonly fetchedAt: Date | null
 }
 
@@ -56,19 +56,44 @@ interface PreviewLine {
 	}>
 }
 
-const pullRequestReferencePattern = /(#[0-9]+)/g
+interface DetailPlaceholderContent {
+	readonly title: string
+	readonly hint: string
+}
 
-const initialPullRequestState: PullRequestState = {
-	status: "loading",
-	data: [],
-	error: null,
-	fetchedAt: null,
+interface RetryProgress {
+	readonly attempt: number
+	readonly max: number
 }
 
-const pullRequestStateAtom = Atom.make(initialPullRequestState).pipe(Atom.keepAlive)
+const pullRequestReferencePattern = /(#[0-9]+)/g
+const PR_FETCH_RETRIES = 6
+const DETAIL_PLACEHOLDER_ROWS = 4
+const LOADING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const
+
+const retryProgressAtom = Atom.make<RetryProgress | null>(null).pipe(Atom.keepAlive)
+const pullRequestsAtom = githubRuntime.atom(
+	GitHubService.use((github) =>
+		Effect.gen(function*() {
+			yield* Atom.set(retryProgressAtom, null)
+			const data = yield* github.listOpenPullRequests().pipe(
+				Effect.tapError(() =>
+					Atom.update(retryProgressAtom, (current) => ({
+						attempt: Math.min((current?.attempt ?? 0) + 1, PR_FETCH_RETRIES),
+						max: PR_FETCH_RETRIES,
+					}))
+				),
+				Effect.retry({ times: PR_FETCH_RETRIES, schedule: Schedule.exponential("300 millis", 2) }),
+				Effect.tapError(() => Atom.set(retryProgressAtom, null)),
+			)
+
+			yield* Atom.set(retryProgressAtom, null)
+			return { data, fetchedAt: new Date() } satisfies PullRequestLoad
+		})
+	),
+).pipe(Atom.keepAlive)
 const selectedIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
 const noticeAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
-const refreshNonceAtom = Atom.make(0).pipe(Atom.keepAlive)
 const filterQueryAtom = Atom.make("").pipe(Atom.keepAlive)
 const filterDraftAtom = Atom.make("").pipe(Atom.keepAlive)
 const filterModeAtom = Atom.make(false).pipe(Atom.keepAlive)
@@ -76,8 +101,7 @@ const pendingGAtom = Atom.make(false).pipe(Atom.keepAlive)
 const detailFullViewAtom = Atom.make(false).pipe(Atom.keepAlive)
 const detailScrollOffsetAtom = Atom.make(0).pipe(Atom.keepAlive)
 
-const GROUP_ICONS = ["▸", "◆", "●", "▪", "›", "◈", "▹", "◉", "⬥", "⏵", "⊡", "⬩"] as const
-const groupIconIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+const GROUP_ICON = "◆"
 
 interface LabelModalState {
 	readonly open: boolean
@@ -99,7 +123,25 @@ const initialLabelModalState: LabelModalState = {
 
 const labelModalAtom = Atom.make(initialLabelModalState).pipe(Atom.keepAlive)
 const labelCacheAtom = Atom.make<Record<string, readonly PullRequestLabel[]>>({}).pipe(Atom.keepAlive)
-const usernameAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+const pullRequestOverridesAtom = Atom.make<Record<string, PullRequestItem>>({}).pipe(Atom.keepAlive)
+const usernameAtom = githubRuntime.atom(
+	config.author === "@me"
+		? GitHubService.use((github) => github.getAuthenticatedUser())
+		: Effect.succeed(config.author.replace(/^@/, "")),
+).pipe(Atom.keepAlive)
+
+const listRepoLabelsAtom = githubRuntime.fn<string>()((repository) =>
+	GitHubService.use((github) => github.listRepoLabels(repository))
+)
+const addPullRequestLabelAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number; readonly label: string }>()((input) =>
+	GitHubService.use((github) => github.addPullRequestLabel(input.repository, input.number, input.label))
+)
+const removePullRequestLabelAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number; readonly label: string }>()((input) =>
+	GitHubService.use((github) => github.removePullRequestLabel(input.repository, input.number, input.label))
+)
+const toggleDraftAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number; readonly isDraft: boolean }>()((input) =>
+	GitHubService.use((github) => github.toggleDraftStatus(input.repository, input.number, input.isDraft))
+)
 
 const shortRepoName = (repository: string) => repository.split("/")[1] ?? repository
 
@@ -166,6 +208,12 @@ const fitCell = (text: string, width: number, align: "left" | "right" = "left")
 	return align === "right" ? trimmed.padStart(width, " ") : trimmed.padEnd(width, " ")
 }
 
+const centerCell = (text: string, width: number) => {
+	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+	const left = Math.floor((width - trimmed.length) / 2)
+	return `${" ".repeat(Math.max(0, left))}${trimmed}`.padEnd(width, " ")
+}
+
 const Divider = ({ width, junctionAt, junctionChar }: { width: number; junctionAt?: number; junctionChar?: string }) => {
 	if (junctionAt === undefined || junctionChar === undefined || junctionAt < 0 || junctionAt >= width) {
 		return <PlainLine text={"─".repeat(Math.max(1, width))} fg={colors.separator} />
@@ -245,6 +293,8 @@ const fallbackLabelColor = (name: string) => {
 	return `hsl(${hue} 55% 35%)`
 }
 
+const errorMessage = (error: unknown) => error instanceof Error ? error.message : String(error)
+
 const labelColor = (label: PullRequestLabel) => label.color ?? fallbackLabelColor(label.name)
 
 const labelTextColor = (color: string) => {
@@ -396,43 +446,101 @@ const SectionTitle = ({ title }: { title: string }) => (
 	</TextLine>
 )
 
-const FooterHints = ({ showFilterClear, detailFullView }: { showFilterClear: boolean; detailFullView: boolean }) => (
-	<TextLine>
-		<span fg={colors.count}>↑↓</span>
-		<span fg={colors.muted}> move  </span>
-		<span fg={colors.count}>/</span>
-		<span fg={colors.muted}> filter  </span>
-		{showFilterClear ? (
-			<>
+const FooterHints = ({
+	filterEditing,
+	showFilterClear,
+	detailFullView,
+	hasSelection,
+	hasError,
+	isLoading,
+	loadingIndicator,
+	retryProgress,
+}: {
+	filterEditing: boolean
+	showFilterClear: boolean
+	detailFullView: 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>
-			</>
-		) : null}
-		{detailFullView ? (
-			<>
-				<span fg={colors.count}>esc</span>
-				<span fg={colors.muted}> back  </span>
-			</>
-		) : (
-			<>
-				<span fg={colors.count}>enter</span>
-				<span fg={colors.muted}> expand  </span>
-			</>
-		)}
-		<span fg={colors.count}>r</span>
-		<span fg={colors.muted}> ref  </span>
-		<span fg={colors.count}>d</span>
-		<span fg={colors.muted}> draft  </span>
-		<span fg={colors.count}>l</span>
-		<span fg={colors.muted}> labels  </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>
-)
+				<span fg={colors.count}>ctrl-w</span>
+				<span fg={colors.muted}> word</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}>l</span>
+					<span fg={colors.muted}> labels  </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>
+	)
+}
 
 const GroupTitle = ({ label, color, icon }: { label: string; color: string; icon: string }) => (
 	<TextLine>
@@ -742,18 +850,50 @@ const DetailBody = ({
 	)
 }
 
+const DetailPlaceholder = ({ content, paneWidth }: { content: DetailPlaceholderContent; paneWidth: number }) => {
+	const innerWidth = Math.max(1, paneWidth - 2)
+	const cardWidth = Math.min(innerWidth, Math.max(28, content.title.length + 4, content.hint.length + 4))
+	const offset = " ".repeat(Math.max(0, Math.floor((innerWidth - cardWidth) / 2)))
+	const cardInnerWidth = Math.max(1, cardWidth - 2)
+	const contentLine = (text: string, fg: string, bold = false) => (
+		<TextLine>
+			<span fg={colors.separator}>{offset}│</span>
+			{bold ? (
+				<span fg={fg} attributes={TextAttributes.BOLD}>{centerCell(text, cardInnerWidth)}</span>
+			) : (
+				<span fg={fg}>{centerCell(text, cardInnerWidth)}</span>
+			)}
+			<span fg={colors.separator}>│</span>
+		</TextLine>
+	)
+
+	return (
+		<box flexDirection="column">
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<PlainLine text={`${offset}┌${"─".repeat(cardInnerWidth)}┐`} fg={colors.separator} />
+				{contentLine(content.title, colors.count, true)}
+				{contentLine(content.hint, colors.muted)}
+				<PlainLine text={`${offset}└${"─".repeat(cardInnerWidth)}┘`} fg={colors.separator} />
+			</box>
+			<box height={1}><Divider width={paneWidth} /></box>
+		</box>
+	)
+}
+
 const DetailsPane = ({
 	pullRequest,
 	contentWidth,
 	bodyLines = DETAIL_BODY_LINES,
 	paneWidth = contentWidth + 2,
 	showChecks = false,
+	placeholderContent,
 }: {
 	pullRequest: PullRequestItem | null
 	contentWidth: number
 	bodyLines?: number
 	paneWidth?: number
 	showChecks?: boolean
+	placeholderContent: DetailPlaceholderContent
 }) => {
 	const titleLines = pullRequest ? wrapText(pullRequest.title, Math.max(1, paneWidth - 2)).length : 1
 	const uniqueChecks = pullRequest ? deduplicateChecks(pullRequest.checks) : []
@@ -764,7 +904,7 @@ const DetailsPane = ({
 		() => (pullRequest ? bodyPreview(pullRequest.body, contentWidth, bodyLines) : []),
 		[pullRequest?.body, contentWidth, bodyLines],
 	)
-	const contentHeight = titleLines + 2 + 1 + checksHeight + previewLines.length
+	const contentHeight = pullRequest ? titleLines + 2 + 1 + checksHeight + previewLines.length : bodyLines + DETAIL_PLACEHOLDER_ROWS + 1
 
 	return (
 		<box flexDirection="column" height={contentHeight}>
@@ -774,12 +914,14 @@ const DetailsPane = ({
 					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} />
 				</>
 			) : (
-				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-					<PlainLine text="Select a pull request with up/down." fg={colors.muted} />
-					{Array.from({ length: DETAIL_BODY_LINES + 2 }, (_, index) => (
-						<BlankRow key={index} />
-					))}
-				</box>
+				<>
+					<DetailPlaceholder content={placeholderContent} paneWidth={paneWidth} />
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						{Array.from({ length: bodyLines }, (_, index) => (
+							<BlankRow key={index} />
+						))}
+					</box>
+				</>
 			)}
 		</box>
 	)
@@ -792,6 +934,7 @@ const LabelModal = ({
 	modalHeight,
 	offsetLeft,
 	offsetTop,
+	loadingIndicator,
 }: {
 	state: LabelModalState
 	currentLabels: readonly PullRequestLabel[]
@@ -799,19 +942,26 @@ const LabelModal = ({
 	modalHeight: number
 	offsetLeft: number
 	offsetTop: number
+	loadingIndicator: string
 }) => {
-	const contentWidth = modalWidth - 4
+	const contentWidth = Math.max(16, modalWidth - 2)
 	const currentNames = new Set(currentLabels.map((l) => l.name.toLowerCase()))
 	const filtered = state.availableLabels.filter((label) =>
 		state.query.length === 0 || label.name.toLowerCase().includes(state.query.toLowerCase()),
 	)
-	const maxVisible = Math.max(1, modalHeight - 5)
+	const maxVisible = Math.max(1, modalHeight - 6)
 	const selectedIndex = filtered.length === 0 ? 0 : Math.max(0, Math.min(state.selectedIndex, filtered.length - 1))
 	const scrollStart = Math.min(
 		Math.max(0, filtered.length - maxVisible),
 		Math.max(0, selectedIndex - maxVisible + 1),
 	)
 	const visibleLabels = filtered.slice(scrollStart, scrollStart + maxVisible)
+	const title = state.repository ? `Labels  ${shortRepoName(state.repository)}` : "Labels"
+	const countText = state.loading ? "loading" : `${filtered.length}/${state.availableLabels.length}`
+	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
+	const queryText = state.query.length > 0 ? state.query : "type to filter labels"
+	const queryPrefix = state.query.length > 0 ? "/ " : "/ "
+	const queryWidth = Math.max(1, contentWidth - queryPrefix.length)
 
 	return (
 		<box
@@ -825,34 +975,42 @@ const LabelModal = ({
 		>
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>
-					<span fg={colors.accent} attributes={TextAttributes.BOLD}>Labels</span>
-					{state.repository ? <span fg={colors.muted}> {state.repository}</span> : null}
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{title}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={colors.muted}>{countText}</span>
 				</TextLine>
 			</box>
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>
-					<span fg={colors.count}>&gt; </span>
+					<span fg={colors.count}>{queryPrefix}</span>
 					<span fg={state.query.length > 0 ? colors.text : colors.muted}>
-						{state.query.length > 0 ? state.query : "type to filter..."}
+						{fitCell(queryText, queryWidth)}
 					</span>
 				</TextLine>
 			</box>
 			<Divider width={modalWidth} />
 			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
 				{state.loading ? (
-					<PlainLine text="Loading labels..." fg={colors.muted} />
+					<PlainLine text={centerCell(`${loadingIndicator} Loading labels`, contentWidth)} fg={colors.muted} />
 				) : visibleLabels.length === 0 ? (
-					<PlainLine text={state.query.length > 0 ? "No matching labels." : "No labels found."} fg={colors.muted} />
+					<PlainLine text={centerCell(state.query.length > 0 ? "No matching labels" : "No labels found", contentWidth)} fg={colors.muted} />
 				) : (
 					visibleLabels.map((label, index) => {
 						const actualIndex = scrollStart + index
 						const isActive = currentNames.has(label.name.toLowerCase())
 						const isSelected = actualIndex === selectedIndex
+						const status = isActive ? "added" : ""
+						const nameWidth = Math.max(8, contentWidth - 10 - status.length)
+						const gap = Math.max(1, contentWidth - 8 - Math.min(label.name.length, nameWidth) - status.length)
 						return (
 							<box key={label.name} height={1}>
 								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
-									<span fg={isActive ? colors.status.passing : colors.muted}>{isActive ? "✓ " : "  "}</span>
-									<span bg={labelColor(label)} fg={labelTextColor(labelColor(label))}> {fitCell(label.name, Math.min(label.name.length, contentWidth - 6))} </span>
+									<span fg={isSelected ? colors.accent : colors.muted}>{isSelected ? "›" : " "}</span>
+									<span fg={isActive ? colors.status.passing : colors.muted}>{isActive ? " ✓ " : "   "}</span>
+									<span bg={labelColor(label)}>  </span>
+									<span fg={isSelected ? colors.selectedText : colors.text}> {fitCell(label.name, nameWidth)}</span>
+									<span fg={colors.muted}>{" ".repeat(gap)}</span>
+									{status ? <span fg={colors.status.passing}>{status}</span> : null}
 								</TextLine>
 							</box>
 						)
@@ -863,8 +1021,12 @@ const LabelModal = ({
 			<Divider width={modalWidth} />
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> move  </span>
 					<span fg={colors.count}>enter</span>
 					<span fg={colors.muted}> toggle  </span>
+					<span fg={colors.count}>/type</span>
+					<span fg={colors.muted}> filter  </span>
 					<span fg={colors.count}>esc</span>
 					<span fg={colors.muted}> close</span>
 					{filtered.length > maxVisible ? <span fg={colors.muted}>  {selectedIndex + 1}/{filtered.length}</span> : null}
@@ -876,10 +1038,10 @@ const LabelModal = ({
 
 export const App = () => {
 	const { width, height } = useTerminalDimensions()
-	const [pullRequestState, setPullRequestState] = useAtom(pullRequestStateAtom)
+	const pullRequestResult = useAtomValue(pullRequestsAtom)
+	const refreshPullRequestsAtom = useAtomRefresh(pullRequestsAtom)
 	const [selectedIndex, setSelectedIndex] = useAtom(selectedIndexAtom)
 	const [notice, setNotice] = useAtom(noticeAtom)
-	const [refreshNonce, setRefreshNonce] = useAtom(refreshNonceAtom)
 	const [filterQuery, setFilterQuery] = useAtom(filterQueryAtom)
 	const [filterDraft, setFilterDraft] = useAtom(filterDraftAtom)
 	const [filterMode, setFilterMode] = useAtom(filterModeAtom)
@@ -888,9 +1050,15 @@ export const App = () => {
 	const [_detailScrollOffset, setDetailScrollOffset] = useAtom(detailScrollOffsetAtom)
 	const [labelModal, setLabelModal] = useAtom(labelModalAtom)
 	const [labelCache, setLabelCache] = useAtom(labelCacheAtom)
-	const [username, setUsername] = useAtom(usernameAtom)
-	const [groupIconIndex, setGroupIconIndex] = useAtom(groupIconIndexAtom)
-	const groupIcon = GROUP_ICONS[groupIconIndex % GROUP_ICONS.length]!
+	const [pullRequestOverrides, setPullRequestOverrides] = useAtom(pullRequestOverridesAtom)
+	const retryProgress = useAtomValue(retryProgressAtom)
+	const [loadingFrame, setLoadingFrame] = useState(0)
+	const usernameResult = useAtomValue(usernameAtom)
+	const loadRepoLabels = useAtomSet(listRepoLabelsAtom, { mode: "promise" })
+	const addPullRequestLabel = useAtomSet(addPullRequestLabelAtom, { mode: "promise" })
+	const removePullRequestLabel = useAtomSet(removePullRequestLabelAtom, { mode: "promise" })
+	const toggleDraftStatus = useAtomSet(toggleDraftAtom, { mode: "promise" })
+	const groupIcon = GROUP_ICON
 	const contentWidth = Math.max(60, width ?? 100)
 	const isWideLayout = (width ?? 100) >= 100
 	const splitGap = 1
@@ -925,65 +1093,28 @@ export const App = () => {
 		}
 	}, [])
 
-	useEffect(() => {
-		let cancelled = false
-		if (config.author !== "@me") {
-			setUsername(config.author.replace(/^@/, ""))
-			return () => {
-				cancelled = true
-			}
-		}
-
-		void getAuthenticatedUser()
-			.then((login) => {
-				if (!cancelled) setUsername(login)
-			})
-			.catch(() => {
-				if (!cancelled) setUsername(null)
-			})
-
-		return () => {
-			cancelled = true
-		}
-	}, [setUsername])
+	const pullRequestLoad = AsyncResult.getOrElse(pullRequestResult, () => null)
+	const pullRequests = pullRequestLoad?.data.map((pullRequest) => pullRequestOverrides[pullRequest.url] ?? pullRequest) ?? []
+	const pullRequestStatus: LoadStatus = pullRequestResult.waiting && pullRequestLoad === null
+		? "loading"
+		: AsyncResult.isFailure(pullRequestResult)
+			? "error"
+			: "ready"
+	const pullRequestError = AsyncResult.isFailure(pullRequestResult) ? errorMessage(Cause.squash(pullRequestResult.cause)) : null
+	const username = AsyncResult.isSuccess(usernameResult) ? usernameResult.value : null
 
 	useEffect(() => {
-		let cancelled = false
-
-		setPullRequestState((current) => ({
-			...current,
-			status: current.fetchedAt === null ? "loading" : "ready",
-			error: null,
-		}))
-
-		loadOpenPullRequests()
-			.then((pullRequests) => {
-				if (cancelled) return
-				setPullRequestState({
-					status: "ready",
-					data: pullRequests,
-					error: null,
-					fetchedAt: new Date(),
-				})
-			})
-			.catch((error) => {
-				if (cancelled) return
-				setPullRequestState((current) => ({
-					...current,
-					status: "error",
-					error: error instanceof Error ? error.message : String(error),
-				}))
-			})
-
-		return () => {
-			cancelled = true
-		}
-	}, [refreshNonce])
+		if (pullRequestStatus !== "loading") return
+		const interval = globalThis.setInterval(() => {
+			setLoadingFrame((current) => (current + 1) % LOADING_FRAMES.length)
+		}, 120)
+		return () => globalThis.clearInterval(interval)
+	}, [pullRequestStatus])
 
 	const effectiveFilterQuery = (filterMode ? filterDraft : filterQuery).trim().toLowerCase()
 	const visibleFilterText = filterMode ? filterDraft : filterQuery
 
-	const filteredPullRequests = pullRequestState.data.filter((pullRequest) => {
+	const filteredPullRequests = pullRequests.filter((pullRequest) => {
 		const query = effectiveFilterQuery
 		if (query.length === 0) return true
 		return [pullRequest.title, pullRequest.repository, String(pullRequest.number)]
@@ -1009,9 +1140,9 @@ export const App = () => {
 		}
 		return 0
 	}
-	const summaryRight = pullRequestState.fetchedAt
-		? `updated ${formatShortDate(pullRequestState.fetchedAt)} ${formatTimestamp(pullRequestState.fetchedAt)}`
-		: pullRequestState.status === "loading"
+	const summaryRight = pullRequestLoad?.fetchedAt
+		? `updated ${formatShortDate(pullRequestLoad.fetchedAt)} ${formatTimestamp(pullRequestLoad.fetchedAt)}`
+		: pullRequestStatus === "loading"
 			? "loading pull requests..."
 			: ""
 	const headerLeft = username ? `GHUI  ${username}` : "GHUI"
@@ -1022,13 +1153,13 @@ export const App = () => {
 		if (index >= 0) setSelectedIndex(index)
 	}
 	const updatePullRequest = (url: string, transform: (pullRequest: PullRequestItem) => PullRequestItem) => {
-		setPullRequestState((current) => ({
-			...current,
-			data: current.data.map((pullRequest) => (pullRequest.url === url ? transform(pullRequest) : pullRequest)),
-		}))
+		const pullRequest = pullRequests.find((item) => item.url === url)
+		if (!pullRequest) return
+		setPullRequestOverrides((current) => ({ ...current, [url]: transform(pullRequest) }))
 	}
 	const refreshPullRequests = (message?: string) => {
-		setRefreshNonce((current) => current + 1)
+		setPullRequestOverrides({})
+		refreshPullRequestsAtom()
 		if (message) flashNotice(message)
 	}
 
@@ -1040,6 +1171,31 @@ export const App = () => {
 	}, [visiblePullRequests.length])
 
 	const selectedPullRequest = visiblePullRequests[selectedIndex] ?? null
+	const loadingIndicator = LOADING_FRAMES[loadingFrame % LOADING_FRAMES.length]!
+	const detailPlaceholderContent: DetailPlaceholderContent = pullRequestStatus === "loading"
+		? {
+			title: `${loadingIndicator} Loading pull requests`,
+			hint: retryProgress ? `Retry ${retryProgress.attempt}/${retryProgress.max}` : "Fetching latest open PRs",
+		}
+		: pullRequestStatus === "error"
+			? {
+				title: "Could not load pull requests",
+				hint: "Press r to retry",
+			}
+			: visiblePullRequests.length === 0 && visibleFilterText.length > 0
+				? {
+					title: "No matching pull requests",
+					hint: "Press esc to clear the filter",
+				}
+				: visiblePullRequests.length === 0
+					? {
+						title: "No open pull requests",
+						hint: "Press r to refresh",
+					}
+					: {
+						title: "Select a pull request",
+						hint: "Use up/down to move",
+					}
 	const titleWrapWidth = Math.max(1, rightPaneWidth - 2) // account for paddingLeft/paddingRight in detail pane
 	const titleLines = selectedPullRequest ? wrapText(selectedPullRequest.title, titleWrapWidth).length : 1
 	const detailDividerRow = 1 + titleLines + 1 // info row + title lines + labels row
@@ -1047,7 +1203,9 @@ export const App = () => {
 	const checksRows = checksRowCount(detailChecks)
 	// checks heading (1) + grid rows + divider
 	const checksDividerRow = detailChecks.length > 0 ? detailDividerRow + 1 + checksRows + 1 : -1
-	const detailJunctions = detailChecks.length > 0 ? [detailDividerRow, checksDividerRow] : [detailDividerRow]
+	const detailJunctions = selectedPullRequest
+		? detailChecks.length > 0 ? [detailDividerRow, checksDividerRow] : [detailDividerRow]
+		: [DETAIL_PLACEHOLDER_ROWS]
 
 	const halfPage = Math.max(1, Math.floor(wideBodyHeight / 2))
 
@@ -1068,7 +1226,7 @@ export const App = () => {
 		}
 
 		setLabelModal((current) => ({ ...current, open: true, repository, query: "", selectedIndex: 0, availableLabels: [], loading: true }))
-		void listRepoLabels(repository)
+		void loadRepoLabels(repository)
 			.then((labels) => {
 				setLabelCache((current) => ({ ...current, [repository]: labels }))
 				setLabelModal((current) => current.repository === repository ? { ...current, availableLabels: labels, loading: false } : current)
@@ -1095,7 +1253,7 @@ export const App = () => {
 				...pr,
 				labels: pr.labels.filter((l) => l.name.toLowerCase() !== label.name.toLowerCase()),
 			}))
-			void removePullRequestLabel(selectedPullRequest.repository, selectedPullRequest.number, label.name)
+			void removePullRequestLabel({ repository: selectedPullRequest.repository, number: selectedPullRequest.number, label: label.name })
 				.then(() => flashNotice(`Removed ${label.name} from #${selectedPullRequest.number}`))
 				.catch((error) => {
 					updatePullRequest(selectedPullRequest.url, () => previousPullRequest)
@@ -1106,7 +1264,7 @@ export const App = () => {
 				...pr,
 				labels: [...pr.labels, { name: label.name, color: label.color }],
 			}))
-			void addPullRequestLabel(selectedPullRequest.repository, selectedPullRequest.number, label.name)
+			void addPullRequestLabel({ repository: selectedPullRequest.repository, number: selectedPullRequest.number, label: label.name })
 				.then(() => flashNotice(`Added ${label.name} to #${selectedPullRequest.number}`))
 				.catch((error) => {
 					updatePullRequest(selectedPullRequest.url, () => previousPullRequest)
@@ -1348,14 +1506,6 @@ export const App = () => {
 			openLabelModal()
 			return
 		}
-		if (key.name === "p" || key.name === "P") {
-			setGroupIconIndex((current) => {
-				const next = (current + 1) % GROUP_ICONS.length
-				flashNotice(`icon: ${GROUP_ICONS[next]}`)
-				return next
-			})
-			return
-		}
 		if (key.name === "o" && selectedPullRequest) {
 			void Bun.spawn({ cmd: ["open", selectedPullRequest.url], stdout: "ignore", stderr: "ignore" })
 			flashNotice(`Opened #${selectedPullRequest.number} in browser`)
@@ -1368,7 +1518,7 @@ export const App = () => {
 				...pullRequest,
 				reviewStatus: nextReviewStatus,
 			}))
-			void toggleDraft(selectedPullRequest.repository, selectedPullRequest.number, selectedPullRequest.reviewStatus === "draft")
+			void toggleDraftStatus({ repository: selectedPullRequest.repository, number: selectedPullRequest.number, isDraft: selectedPullRequest.reviewStatus === "draft" })
 				.then(() => {
 					flashNotice(selectedPullRequest.reviewStatus === "draft" ? `Marked #${selectedPullRequest.number} ready` : `Marked #${selectedPullRequest.number} draft`)
 				})
@@ -1395,8 +1545,8 @@ export const App = () => {
 	const prListProps = {
 		groups: visibleGroups,
 		selectedUrl: selectedPullRequest?.url ?? null,
-		status: pullRequestState.status,
-		error: pullRequestState.error,
+		status: pullRequestStatus,
+		error: pullRequestError,
 		filterText: visibleFilterText,
 		showFilterBar: filterMode || filterQuery.length > 0,
 		isFilterEditing: filterMode,
@@ -1428,6 +1578,7 @@ export const App = () => {
 							bodyLines={fullscreenBodyLines}
 							paneWidth={contentWidth}
 							showChecks
+							placeholderContent={detailPlaceholderContent}
 						/>
 					</scrollbox>
 				</box>
@@ -1448,9 +1599,7 @@ export const App = () => {
 								</scrollbox>
 							</>
 						) : (
-							<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-								<PlainLine text="Select a pull request with up/down." fg={colors.muted} />
-							</box>
+							<DetailPlaceholder content={detailPlaceholderContent} paneWidth={rightPaneWidth} />
 						)}
 					</box>
 				</box>
@@ -1462,12 +1611,13 @@ export const App = () => {
 							contentWidth={fullscreenContentWidth}
 							bodyLines={fullscreenBodyLines}
 							paneWidth={contentWidth}
+							placeholderContent={detailPlaceholderContent}
 						/>
 					</scrollbox>
 				</box>
 			) : (
 				<>
-					<DetailsPane pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={contentWidth} />
+					<DetailsPane pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} />
 					<Divider width={contentWidth} />
 					<box flexGrow={1} flexDirection="column">
 						<scrollbox flexGrow={1}>
@@ -1485,7 +1635,20 @@ export const App = () => {
 				<Divider width={contentWidth} />
 			)}
 			<box paddingLeft={1} paddingRight={1}>
-				{footerNotice ? <PlainLine text={footerNotice} fg={colors.count} /> : <FooterHints showFilterClear={filterMode || filterQuery.length > 0} detailFullView={detailFullView} />}
+				{footerNotice ? (
+					<PlainLine text={footerNotice} fg={colors.count} />
+				) : (
+					<FooterHints
+						filterEditing={filterMode}
+						showFilterClear={filterMode || filterQuery.length > 0}
+						detailFullView={detailFullView}
+						hasSelection={selectedPullRequest !== null}
+						hasError={pullRequestStatus === "error"}
+						isLoading={pullRequestStatus === "loading"}
+						loadingIndicator={loadingIndicator}
+						retryProgress={retryProgress}
+					/>
+				)}
 			</box>
 			{labelModal.open ? (
 				<LabelModal
@@ -1495,6 +1658,7 @@ export const App = () => {
 					modalHeight={labelModalHeight}
 					offsetLeft={labelModalLeft}
 					offsetTop={labelModalTop}
+					loadingIndicator={loadingIndicator}
 				/>
 			) : null}
 		</box>

package/src/services/CommandRunner.ts

@@ -1,43 +1,71 @@
+import { Context, Effect, Layer, Schema } from "effect"
+
 export interface CommandResult {
 	readonly stdout: string
 	readonly stderr: string
 	readonly exitCode: number
 }
 
+export class CommandError extends Schema.TaggedErrorClass<CommandError>()("CommandError", {
+	command: Schema.String,
+	args: Schema.Array(Schema.String),
+	detail: Schema.String,
+	cause: Schema.Defect,
+}) {}
+
+export class JsonParseError extends Schema.TaggedErrorClass<JsonParseError>()("JsonParseError", {
+	command: Schema.String,
+	args: Schema.Array(Schema.String),
+	stdout: Schema.String,
+	cause: Schema.Defect,
+}) {}
+
 const readStream = async (stream: ReadableStream | null | undefined) => {
 	if (!stream) return ""
 	return Bun.readableStreamToText(stream)
 }
 
-const runProcess = async (command: string, args: readonly string[]): Promise<CommandResult> => {
-	try {
-		const proc = Bun.spawn({
-			cmd: [command, ...args],
-			stdout: "pipe",
-			stderr: "pipe",
-		})
-
-		const [exitCode, stdout, stderr] = await Promise.all([proc.exited, readStream(proc.stdout), readStream(proc.stderr)])
-		return { stdout, stderr, exitCode }
-	} catch (error) {
-		throw new Error(`Failed to run ${command}: ${String(error)}`)
-	}
-}
+export class CommandRunner extends Context.Service<CommandRunner, {
+	readonly run: (command: string, args: readonly string[]) => Effect.Effect<CommandResult, CommandError>
+	readonly runJson: <A>(command: string, args: readonly string[]) => Effect.Effect<A, CommandError | JsonParseError>
+}>()("ghui/CommandRunner") {
+	static readonly layer = Layer.effect(
+		CommandRunner,
+		Effect.gen(function*() {
+			const runProcess = Effect.fn("CommandRunner.runProcess")((command: string, args: readonly string[]) =>
+				Effect.tryPromise({
+					async try() {
+						const proc = Bun.spawn({
+							cmd: [command, ...args],
+							stdout: "pipe",
+							stderr: "pipe",
+						})
 
-export const run = async (command: string, args: readonly string[]) => {
-	const result = await runProcess(command, args)
-	if (result.exitCode !== 0) {
-		const detail = result.stderr.trim() || result.stdout.trim() || `exit code ${result.exitCode}`
-		throw new Error(`${command} ${args.join(" ")} failed: ${detail}`)
-	}
-	return result
-}
+						const [exitCode, stdout, stderr] = await Promise.all([proc.exited, readStream(proc.stdout), readStream(proc.stderr)])
+						return { stdout, stderr, exitCode }
+					},
+					catch: (cause) => new CommandError({ command, args: [...args], detail: `Failed to run ${command}`, cause }),
+				})
+			)
+
+			const run = Effect.fn("CommandRunner.run")(function*(command: string, args: readonly string[]) {
+				const result = yield* runProcess(command, args)
+				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 })
+				}
+				return result
+			})
+
+			const runJson = Effect.fn("CommandRunner.runJson")(function*<A>(command: string, args: readonly string[]) {
+				const result = yield* run(command, args)
+				return yield* Effect.try({
+					try: () => JSON.parse(result.stdout) as A,
+					catch: (cause) => new JsonParseError({ command, args: [...args], stdout: result.stdout, cause }),
+				})
+			})
 
-export const runJson = async <A>(command: string, args: readonly string[]) => {
-	const result = await run(command, args)
-	try {
-		return JSON.parse(result.stdout) as A
-	} catch (error) {
-		throw new Error(`Could not parse JSON from ${command}: ${String(error)}`)
-	}
+			return CommandRunner.of({ run, runJson })
+		}),
+	)
 }

package/src/services/GitHubService.ts

@@ -1,6 +1,7 @@
+import { Context, Effect, Layer } from "effect"
 import { config } from "../config.js"
-import type { CheckItem, PullRequestItem, PullRequestLabel } from "../domain.js"
-import { run, runJson } from "./CommandRunner.js"
+import type { CheckItem, PullRequestItem } from "../domain.js"
+import { CommandRunner, type CommandError, type JsonParseError } from "./CommandRunner.js"
 
 interface GitHubListPullRequest {
 	readonly number: number
@@ -153,41 +154,72 @@ const searchOpenArgs = (author: string) => [
 	searchJsonFields,
 ] as const
 
-export const listOpenPullRequests = async (): Promise<readonly PullRequestItem[]> => {
-	const searchResults = await runJson<readonly GitHubSearchPullRequest[]>("gh", [...searchOpenArgs(config.author)])
-	const pullRequests = await Promise.all(
-		searchResults.map(async (searchResult) => {
-			const repository = searchResult.repository.nameWithOwner
-			const pullRequest = await runJson<GitHubListPullRequest>("gh", [
-				"pr", "view", String(searchResult.number), "--repo", repository, "--json", detailJsonFields,
-			])
-			return parsePullRequest(repository, pullRequest)
+type GitHubError = CommandError | JsonParseError
+
+export class GitHubService extends Context.Service<GitHubService, {
+	readonly listOpenPullRequests: () => Effect.Effect<readonly PullRequestItem[], GitHubError>
+	readonly getAuthenticatedUser: () => Effect.Effect<string, GitHubError>
+	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>
+	readonly removePullRequestLabel: (repository: string, number: number, label: string) => Effect.Effect<void, CommandError>
+}>()("ghui/GitHubService") {
+	static readonly layerNoDeps = Layer.effect(
+		GitHubService,
+		Effect.gen(function*() {
+			const command = yield* CommandRunner
+
+			const listOpenPullRequests = Effect.fn("GitHubService.listOpenPullRequests")(function*() {
+				const searchResults = yield* command.runJson<readonly GitHubSearchPullRequest[]>("gh", [...searchOpenArgs(config.author)])
+				const pullRequests = yield* Effect.forEach(
+					searchResults,
+					Effect.fn("GitHubService.loadPullRequestDetail")(function*(searchResult) {
+						const repository = searchResult.repository.nameWithOwner
+						const pullRequest = yield* command.runJson<GitHubListPullRequest>("gh", [
+							"pr", "view", String(searchResult.number), "--repo", repository, "--json", detailJsonFields,
+						])
+						return parsePullRequest(repository, pullRequest)
+					}),
+					{ concurrency: 8 },
+				)
+
+				return pullRequests.sort((left, right) => right.createdAt.getTime() - left.createdAt.getTime())
+			})
+
+			const getAuthenticatedUser = Effect.fn("GitHubService.getAuthenticatedUser")(function*() {
+				const viewer = yield* command.runJson<GitHubViewer>("gh", ["api", "user"])
+				return viewer.login
+			})
+
+			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"])])
+			})
+
+			const listRepoLabels = Effect.fn("GitHubService.listRepoLabels")(function*(repository: string) {
+				const labels = yield* command.runJson<readonly { name: string; color: string }[]>("gh", [
+					"label", "list", "--repo", repository, "--json", "name,color", "--limit", "100",
+				])
+				return labels.map((label) => ({ name: label.name, color: `#${label.color}` }))
+			})
+
+			const addPullRequestLabel = Effect.fn("GitHubService.addPullRequestLabel")(function*(repository: string, number: number, label: string) {
+				yield* command.run("gh", ["pr", "edit", String(number), "--repo", repository, "--add-label", label])
+			})
+
+			const removePullRequestLabel = Effect.fn("GitHubService.removePullRequestLabel")(function*(repository: string, number: number, label: string) {
+				yield* command.run("gh", ["pr", "edit", String(number), "--repo", repository, "--remove-label", label])
+			})
+
+			return GitHubService.of({
+				listOpenPullRequests,
+				getAuthenticatedUser,
+				toggleDraftStatus,
+				listRepoLabels,
+				addPullRequestLabel,
+				removePullRequestLabel,
+			})
 		}),
 	)
 
-	return pullRequests.sort((left, right) => right.createdAt.getTime() - left.createdAt.getTime())
-}
-
-export const getAuthenticatedUser = async () => {
-	const viewer = await runJson<GitHubViewer>("gh", ["api", "user"])
-	return viewer.login
-}
-
-export const toggleDraftStatus = async (repository: string, number: number, isDraft: boolean) => {
-	await run("gh", ["pr", "ready", String(number), "--repo", repository, ...(isDraft ? [] : ["--undo"])])
-}
-
-export const listRepoLabels = async (repository: string): Promise<readonly PullRequestLabel[]> => {
-	const labels = await runJson<readonly { name: string; color: string }[]>("gh", [
-		"label", "list", "--repo", repository, "--json", "name,color", "--limit", "100",
-	])
-	return labels.map((label) => ({ name: label.name, color: `#${label.color}` }))
-}
-
-export const addPullRequestLabel = async (repository: string, number: number, label: string) => {
-	await run("gh", ["pr", "edit", String(number), "--repo", repository, "--add-label", label])
-}
-
-export const removePullRequestLabel = async (repository: string, number: number, label: string) => {
-	await run("gh", ["pr", "edit", String(number), "--repo", repository, "--remove-label", label])
+	static readonly layer = GitHubService.layerNoDeps.pipe(Layer.provide(CommandRunner.layer))
 }