@kitlangton/ghui 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.20",
+	"version": "0.1.21",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",
@@ -42,19 +42,26 @@
 		"start": "bun run src/index.tsx",
 		"start:mock": "GHUI_MOCK_PR_COUNT=400 GHUI_MOCK_REPO_COUNT=4 bun run src/index.tsx",
 		"test": "bun test test",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsc --noEmit",
+		"lint": "oxlint --tsconfig tsconfig.json src/ test/",
+		"format": "oxfmt src/ test/",
+		"format:check": "oxfmt --check src/ test/"
 	},
 	"dependencies": {
-		"@effect/atom-react": "4.0.0-beta.47",
-		"@opentui/core": "0.1.97",
-		"@opentui/react": "0.1.97",
-		"effect": "4.0.0-beta.47",
+		"@effect/atom-react": "4.0.0-beta.59",
+		"@opentui/core": "0.2.1",
+		"@opentui/keymap": "0.2.1",
+		"@opentui/react": "0.2.1",
+		"effect": "4.0.0-beta.59",
 		"react": "19.2.5",
 		"scheduler": "0.27.0"
 	},
 	"devDependencies": {
+		"@effect/language-service": "0.85.1",
 		"@types/bun": "1.3.12",
 		"@types/react": "19.2.14",
+		"oxfmt": "0.47.0",
+		"oxlint": "1.62.0",
 		"typescript": "6.0.2"
 	}
 }

package/src/App.tsx

@@ -1,5 +1,6 @@
 import type { DiffRenderable, PasteEvent, ScrollBoxRenderable } from "@opentui/core"
 import { RegistryContext, useAtom, useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react"
+import { useBindings } from "@opentui/keymap/react"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
 import { Cause, Effect, Layer, Schedule } from "effect"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
@@ -8,7 +9,7 @@ import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry"
 import { useContext, useEffect, useMemo, useRef, useState } from "react"
 import { buildAppCommands } from "./appCommands.js"
 import type { AppCommand } from "./commands.js"
-import { clampCommandIndex, commandEnabled, filterCommands } from "./commands.js"
+import { clampCommandIndex, commandEnabled, defineCommand, filterCommands, sortCommandsByScope } from "./commands.js"
 import { config } from "./config.js"
 import { type CreatePullRequestCommentInput, type DiffCommentSide, type ListPullRequestPageInput, type LoadStatus, type PullRequestItem, type PullRequestLabel, type PullRequestMergeAction, type PullRequestReviewComment } from "./domain.js"
 import { formatShortDate, formatTimestamp } from "./date.js"
@@ -108,6 +109,7 @@ const DIFF_STICKY_HEADER_LINES = 2
 const LOADING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const
 const MAX_REPOSITORY_CACHE_ENTRIES = 8
 const LOAD_MORE_SELECTION_THRESHOLD = 8
+const LOAD_MORE_SCROLL_THRESHOLD = 3
 const DETAIL_PREFETCH_BEHIND = 1
 const DETAIL_PREFETCH_AHEAD = 3
 const DETAIL_PREFETCH_CONCURRENCY = 3
@@ -904,6 +906,20 @@ export const App = () => {
 		if (selectedIndex >= thresholdIndex) loadMorePullRequests()
 	}, [selectedIndex, visiblePullRequests.length, filterMode, filterQuery, hasMorePullRequests, isLoadingMorePullRequests, currentQueueCacheKey])
 
+	useEffect(() => {
+		if (filterMode || filterQuery.length > 0 || visiblePullRequests.length === 0 || detailFullView || diffFullView) return
+		if (!hasMorePullRequests || isLoadingMorePullRequests) return
+		const checkScroll = () => {
+			const scroll = prListScrollRef.current
+			if (!scroll || scroll.viewport.height <= 0) return
+			const bottom = scroll.scrollTop + scroll.viewport.height
+			if (bottom >= scroll.scrollHeight - LOAD_MORE_SCROLL_THRESHOLD) loadMorePullRequests()
+		}
+		checkScroll()
+		const interval = globalThis.setInterval(checkScroll, 120)
+		return () => globalThis.clearInterval(interval)
+	}, [visiblePullRequests.length, filterMode, filterQuery, detailFullView, diffFullView, hasMorePullRequests, isLoadingMorePullRequests, currentQueueCacheKey])
+
 	useEffect(() => {
 		const scroll = prListScrollRef.current
 		if (!scroll || selectedPullRequestRowIndex === null) return
@@ -1739,69 +1755,324 @@ export const App = () => {
 		const command = appCommands.find((entry) => entry.id === id)
 		return command ? runCommand(command, options) : false
 	}
-	const commandPaletteCommands = commandPaletteActive ? filterCommands(appCommands.filter((command) => command.id !== "command.open" && commandEnabled(command)), commandPalette.query) : []
+	const dynamicPaletteCommands: readonly AppCommand[] = (() => {
+		if (!commandPaletteActive) return []
+		const repository = parseRepositoryInput(commandPalette.query)
+		if (!repository || repository === selectedRepository) return []
+		return [defineCommand({
+			id: `view.repository.dynamic:${repository}`,
+			title: `Open ${repository}`,
+			scope: "View",
+			subtitle: "Switch to this repository",
+			run: () => switchViewTo({ _tag: "Repository", repository }),
+		})]
+	})()
+	// Dynamic commands always pin to the top of the palette; they came directly from the
+	// user's typed input so they shouldn't be filtered by fuzzy score against themselves.
+	const commandPaletteCommands = commandPaletteActive
+		? [
+			...dynamicPaletteCommands,
+			...sortCommandsByScope(filterCommands(appCommands.filter((command) => command.id !== "command.open" && commandEnabled(command)), commandPalette.query)),
+		]
+		: []
 	const selectedCommandIndex = clampCommandIndex(commandPalette.selectedIndex, commandPaletteCommands)
 	const selectedCommand = commandPaletteCommands[selectedCommandIndex] ?? null
 
+	// Keymap migration phase 2: simple cmd-id bindings move out of useKeyboard.
+	// Gated to "global mode" — no modal active, no full-view, not in filter editing —
+	// so these don't dispatch on top of modal-specific handlers below.
+	const globalKeymapActiveRef = useRef(false)
+	globalKeymapActiveRef.current = !commandPaletteActive
+		&& !openRepositoryModalActive
+		&& !labelModalActive
+		&& !commentModalActive
+		&& !commentThreadModalActive
+		&& !closeModalActive
+		&& !mergeModalActive
+		&& !themeModalActive
+		&& !diffFullView
+		&& !detailFullView
+		&& !filterMode
+	const runCommandByIdRef = useRef(runCommandById)
+	runCommandByIdRef.current = runCommandById
+	useBindings(() => ({
+		enabled: () => globalKeymapActiveRef.current,
+		bindings: [
+			{ key: "/", cmd: () => runCommandByIdRef.current("filter.open") },
+			{ key: "r", cmd: () => runCommandByIdRef.current("pull.refresh") },
+			{ key: "t", cmd: () => runCommandByIdRef.current("theme.open") },
+			{ key: "d", cmd: () => runCommandByIdRef.current("diff.open") },
+			{ key: "l", cmd: () => runCommandByIdRef.current("pull.labels") },
+			{ key: "m", cmd: () => runCommandByIdRef.current("pull.merge") },
+			{ key: "shift+m", cmd: () => runCommandByIdRef.current("pull.merge") },
+			{ key: "x", cmd: () => runCommandByIdRef.current("pull.close") },
+			{ key: "o", cmd: () => runCommandByIdRef.current("pull.open-browser") },
+			{ key: "s", cmd: () => runCommandByIdRef.current("pull.toggle-draft") },
+			{ key: "shift+s", cmd: () => runCommandByIdRef.current("pull.toggle-draft") },
+			{ key: "y", cmd: () => runCommandByIdRef.current("pull.copy-metadata") },
+			{ key: "return", cmd: () => runCommandByIdRef.current("detail.open") },
+		],
+	}), [])
+	// Always-on bindings — work even while modals are open.
+	useBindings(() => ({
+		bindings: [
+			{ key: "ctrl+p", cmd: () => runCommandByIdRef.current("command.open") },
+			{ key: "meta+k", cmd: () => runCommandByIdRef.current("command.open") },
+		],
+	}), [])
+
+	// CloseModal: escape closes, enter confirms.
+	const closeModalActiveRef = useRef(false)
+	closeModalActiveRef.current = closeModalActive
+	const closeActiveModalRef = useRef(closeActiveModal)
+	closeActiveModalRef.current = closeActiveModal
+	const confirmClosePullRequestRef = useRef(confirmClosePullRequest)
+	confirmClosePullRequestRef.current = confirmClosePullRequest
+	useBindings(() => ({
+		enabled: () => closeModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "return", cmd: () => confirmClosePullRequestRef.current() },
+		],
+	}), [])
+
+	// MergeModal: escape, enter (when options>0), up/down/j/k navigation.
+	const mergeModalActiveRef = useRef(false)
+	mergeModalActiveRef.current = mergeModalActive
+	const mergeModalContextRef = useRef({ availableCount: 0, confirm: confirmMergeAction, setMergeModal })
+	mergeModalContextRef.current = {
+		availableCount: availableMergeActions(mergeModal.info).length,
+		confirm: confirmMergeAction,
+		setMergeModal,
+	}
+	const moveMergeSelection = (delta: -1 | 1) => mergeModalContextRef.current.setMergeModal((current) => {
+		const max = Math.max(0, mergeModalContextRef.current.availableCount - 1)
+		return { ...current, selectedIndex: Math.max(0, Math.min(max, current.selectedIndex + delta)) }
+	})
+	useBindings(() => ({
+		enabled: () => mergeModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "return", cmd: () => {
+				if (mergeModalContextRef.current.availableCount > 0) mergeModalContextRef.current.confirm()
+			} },
+			{ key: "up", cmd: () => moveMergeSelection(-1) },
+			{ key: "k", cmd: () => moveMergeSelection(-1) },
+			{ key: "down", cmd: () => moveMergeSelection(1) },
+			{ key: "j", cmd: () => moveMergeSelection(1) },
+		],
+	}), [])
+
+	// CommentThreadModal: scroll the thread, shortcut to compose a reply.
+	const commentThreadModalActiveRef = useRef(false)
+	commentThreadModalActiveRef.current = commentThreadModalActive
+	const commentThreadCtxRef = useRef({ openDiffCommentModal, setCommentThreadModal, halfPage })
+	commentThreadCtxRef.current = { openDiffCommentModal, setCommentThreadModal, halfPage }
+	const scrollCommentThread = (delta: number) => commentThreadCtxRef.current.setCommentThreadModal((current) => ({
+		...current,
+		scrollOffset: Math.max(0, current.scrollOffset + delta),
+	}))
+	useBindings(() => ({
+		enabled: () => commentThreadModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "return", cmd: () => commentThreadCtxRef.current.openDiffCommentModal() },
+			{ key: "a", cmd: () => commentThreadCtxRef.current.openDiffCommentModal() },
+			{ key: "c", cmd: () => commentThreadCtxRef.current.openDiffCommentModal() },
+			{ key: "up", cmd: () => scrollCommentThread(-1) },
+			{ key: "k", cmd: () => scrollCommentThread(-1) },
+			{ key: "down", cmd: () => scrollCommentThread(1) },
+			{ key: "j", cmd: () => scrollCommentThread(1) },
+			{ key: "pageup", cmd: () => scrollCommentThread(-commentThreadCtxRef.current.halfPage) },
+			{ key: "ctrl+u", cmd: () => scrollCommentThread(-commentThreadCtxRef.current.halfPage) },
+			{ key: "pagedown", cmd: () => scrollCommentThread(commentThreadCtxRef.current.halfPage) },
+			{ key: "ctrl+d", cmd: () => scrollCommentThread(commentThreadCtxRef.current.halfPage) },
+			{ key: "ctrl+v", cmd: () => scrollCommentThread(commentThreadCtxRef.current.halfPage) },
+		],
+	}), [])
+
+	// LabelModal: nav keys via keymap; text input stays in useKeyboard fallback.
+	const labelModalActiveRef = useRef(false)
+	labelModalActiveRef.current = labelModalActive
+	const labelModalCtxRef = useRef({ toggleLabelAtIndex, setLabelModal, filteredCount: 0 })
+	labelModalCtxRef.current = {
+		toggleLabelAtIndex,
+		setLabelModal,
+		filteredCount: filterLabels(labelModal.availableLabels, labelModal.query).length,
+	}
+	const moveLabelSelection = (delta: -1 | 1) => labelModalCtxRef.current.setLabelModal((current) => {
+		const max = Math.max(0, labelModalCtxRef.current.filteredCount - 1)
+		return { ...current, selectedIndex: Math.max(0, Math.min(max, current.selectedIndex + delta)) }
+	})
+	useBindings(() => ({
+		enabled: () => labelModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "return", cmd: () => labelModalCtxRef.current.toggleLabelAtIndex() },
+			{ key: "up", cmd: () => moveLabelSelection(-1) },
+			{ key: "k", cmd: () => moveLabelSelection(-1) },
+			{ key: "down", cmd: () => moveLabelSelection(1) },
+			{ key: "j", cmd: () => moveLabelSelection(1) },
+		],
+	}), [])
+
+	// ThemeModal: nav + filter-mode toggle. j/k only navigate when not in filter mode
+	// (so users can type those letters into the query).
+	const themeModalActiveRef = useRef(false)
+	themeModalActiveRef.current = themeModalActive
+	const themeModalCtxRef = useRef({
+		filterMode: false,
+		hasResults: true,
+		closeThemeModal,
+		updateThemeQuery,
+		moveThemeSelection,
+	})
+	themeModalCtxRef.current = {
+		filterMode: themeModal.filterMode,
+		hasResults: filterThemeDefinitions(themeModal.query).length > 0,
+		closeThemeModal,
+		updateThemeQuery,
+		moveThemeSelection,
+	}
+	useBindings(() => ({
+		enabled: () => themeModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => {
+				if (themeModalCtxRef.current.filterMode) themeModalCtxRef.current.updateThemeQuery("", { filterMode: false })
+				else themeModalCtxRef.current.closeThemeModal(false)
+			} },
+			{ key: "/", cmd: () => themeModalCtxRef.current.updateThemeQuery("", { filterMode: true }) },
+			{ key: "return", cmd: () => {
+				if (themeModalCtxRef.current.filterMode && !themeModalCtxRef.current.hasResults) return
+				themeModalCtxRef.current.closeThemeModal(true)
+			} },
+			{ key: "up", cmd: () => themeModalCtxRef.current.moveThemeSelection(-1) },
+			{ key: "down", cmd: () => themeModalCtxRef.current.moveThemeSelection(1) },
+			{ key: "k", cmd: () => { if (!themeModalCtxRef.current.filterMode) themeModalCtxRef.current.moveThemeSelection(-1) } },
+			{ key: "j", cmd: () => { if (!themeModalCtxRef.current.filterMode) themeModalCtxRef.current.moveThemeSelection(1) } },
+		],
+	}), [])
+
+	// OpenRepositoryModal: escape closes, return submits.
+	const openRepositoryModalActiveRef = useRef(false)
+	openRepositoryModalActiveRef.current = openRepositoryModalActive
+	const openRepositoryFromInputRef = useRef(openRepositoryFromInput)
+	openRepositoryFromInputRef.current = openRepositoryFromInput
+	useBindings(() => ({
+		enabled: () => openRepositoryModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "return", cmd: () => openRepositoryFromInputRef.current() },
+		],
+	}), [])
+
+	// CommentModal: full text editor — escape, submit, all the cursor/edit bindings.
+	const commentModalActiveRef = useRef(false)
+	commentModalActiveRef.current = commentModalActive
+	const commentModalCtxRef = useRef({ submitDiffComment, editComment })
+	commentModalCtxRef.current = { submitDiffComment, editComment }
+	const editComm = (transform: Parameters<typeof editComment>[0]) => commentModalCtxRef.current.editComment(transform)
+	useBindings(() => ({
+		enabled: () => commentModalActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "ctrl+s", cmd: () => commentModalCtxRef.current.submitDiffComment() },
+			{ key: "ctrl+a", cmd: () => editComm(moveLineStart) },
+			{ key: "ctrl+e", cmd: () => editComm(moveLineEnd) },
+			{ key: "ctrl+b", cmd: () => editComm(editorMoveLeft) },
+			{ key: "ctrl+f", cmd: () => editComm(editorMoveRight) },
+			{ key: "ctrl+w", cmd: () => editComm(deleteWordBackward) },
+			{ key: "ctrl+u", cmd: () => editComm(deleteToLineStart) },
+			{ key: "ctrl+k", cmd: () => editComm(deleteToLineEnd) },
+			{ key: "ctrl+d", cmd: () => editComm(editorDeleteForward) },
+			{ key: "meta+b", cmd: () => editComm(moveWordBackward) },
+			{ key: "meta+left", cmd: () => editComm(moveWordBackward) },
+			{ key: "meta+f", cmd: () => editComm(moveWordForward) },
+			{ key: "meta+right", cmd: () => editComm(moveWordForward) },
+			{ key: "meta+backspace", cmd: () => editComm(deleteWordBackward) },
+			{ key: "meta+delete", cmd: () => editComm(deleteWordForward) },
+			{ key: "backspace", cmd: () => editComm(editorBackspace) },
+			{ key: "delete", cmd: () => editComm(editorDeleteForward) },
+			{ key: "left", cmd: () => editComm(editorMoveLeft) },
+			{ key: "right", cmd: () => editComm(editorMoveRight) },
+			{ key: "up", cmd: () => editComm((state) => moveVertically(state, -1)) },
+			{ key: "down", cmd: () => editComm((state) => moveVertically(state, 1)) },
+			{ key: "home", cmd: () => editComm(moveLineStart) },
+			{ key: "end", cmd: () => editComm(moveLineEnd) },
+			{ key: "shift+return", cmd: () => editComm((state) => insertText(state, "\n")) },
+			{ key: "return", cmd: () => commentModalCtxRef.current.submitDiffComment() },
+		],
+	}), [])
+
+	// CommandPalette: escape closes, return runs, up/k & down/j navigate.
+	const commandPaletteActiveRef = useRef(false)
+	commandPaletteActiveRef.current = commandPaletteActive
+	const commandPaletteCtxRef = useRef({
+		runSelected: () => {},
+		setCommandPalette,
+		paletteCommands: commandPaletteCommands,
+	})
+	commandPaletteCtxRef.current = {
+		runSelected: () => { if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true }) },
+		setCommandPalette,
+		paletteCommands: commandPaletteCommands,
+	}
+	const moveCommandPaletteSelection = (delta: -1 | 1) => commandPaletteCtxRef.current.setCommandPalette((current) => {
+		const selectedIndex = clampCommandIndex(current.selectedIndex + delta, commandPaletteCtxRef.current.paletteCommands)
+		return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
+	})
+	useBindings(() => ({
+		enabled: () => commandPaletteActiveRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => closeActiveModalRef.current() },
+			{ key: "ctrl+c", cmd: () => closeActiveModalRef.current() },
+			{ key: "return", cmd: () => commandPaletteCtxRef.current.runSelected() },
+			{ key: "up", cmd: () => moveCommandPaletteSelection(-1) },
+			{ key: "down", cmd: () => moveCommandPaletteSelection(1) },
+		],
+	}), [])
+
+	// FilterMode: escape cancels, return commits.
+	const filterModeRef = useRef(false)
+	filterModeRef.current = filterMode
+	const filterCtxRef = useRef({ filterQuery, filterDraft, setFilterQuery, setFilterDraft, setFilterMode })
+	filterCtxRef.current = { filterQuery, filterDraft, setFilterQuery, setFilterDraft, setFilterMode }
+	useBindings(() => ({
+		enabled: () => filterModeRef.current,
+		bindings: [
+			{ key: "escape", cmd: () => {
+				filterCtxRef.current.setFilterDraft(filterCtxRef.current.filterQuery)
+				filterCtxRef.current.setFilterMode(false)
+			} },
+			{ key: "return", cmd: () => {
+				filterCtxRef.current.setFilterQuery(filterCtxRef.current.filterDraft)
+				filterCtxRef.current.setFilterMode(false)
+			} },
+		],
+	}), [])
+
 	useKeyboard((key) => {
 		if (commandPaletteActive) {
-			if (key.name === "escape" || key.ctrl && key.name === "c") {
-				closeActiveModal()
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true })
-				return
-			}
-			if (key.name === "up" || key.name === "k" && !key.ctrl && !key.meta) {
-				setCommandPalette((current) => {
-					const selectedIndex = clampCommandIndex(current.selectedIndex - 1, commandPaletteCommands)
-					return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
-				})
-				return
-			}
-			if (key.name === "down" || key.name === "j" && !key.ctrl && !key.meta) {
-				setCommandPalette((current) => {
-					const selectedIndex = clampCommandIndex(current.selectedIndex + 1, commandPaletteCommands)
-					return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
-				})
-				return
-			}
 			if (isSingleLineInputKey(key)) {
 				setCommandPalette((current) => {
 					const query = editSingleLineInput(current.query, key) ?? current.query
 					return current.query === query && current.selectedIndex === 0 ? current : { ...current, query, selectedIndex: 0 }
 				})
-				return
 			}
 			return
 		}
 
 		if (openRepositoryModalActive) {
-			if (key.name === "escape" || key.ctrl && key.name === "c") {
-				closeActiveModal()
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				openRepositoryFromInput()
-				return
-			}
 			if (isSingleLineInputKey(key)) {
 				setOpenRepositoryModal((current) => ({
 					...current,
 					query: editSingleLineInput(current.query, key) ?? current.query,
 					error: null,
 				}))
-				return
 			}
 			return
 		}
 
-		if ((key.ctrl && key.name === "p") || (key.meta && key.name === "k")) {
-			runCommandById("command.open")
-			return
-		}
-
 		if ((key.name === "q" && !commentModalActive && !(themeModalActive && themeModal.filterMode)) || (key.ctrl && key.name === "c")) {
 			if (themeModalActive) {
 				closeThemeModal(false)
@@ -1816,237 +2087,28 @@ export const App = () => {
 		}
 
 		if (themeModalActive) {
-			if (key.name === "escape") {
-				if (themeModal.filterMode) {
-					updateThemeQuery("", { filterMode: false })
-					return
-				}
-				closeThemeModal(false)
-				return
-			}
-			if (key.name === "/") {
-				updateThemeQuery("", { filterMode: true })
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				if (themeModal.filterMode && filterThemeDefinitions(themeModal.query).length === 0) return
-				closeThemeModal(true)
-				return
-			}
-			if (key.name === "up" || (!themeModal.filterMode && key.name === "k")) {
-				moveThemeSelection(-1)
-				return
-			}
-			if (key.name === "down" || (!themeModal.filterMode && key.name === "j")) {
-				moveThemeSelection(1)
-				return
-			}
 			if (themeModal.filterMode && isSingleLineInputKey(key)) {
 				editThemeQuery((query) => editSingleLineInput(query, key) ?? query)
-				return
 			}
 			return
 		}
 
 		if (commentModalActive) {
-			if (key.name === "escape") {
-				closeActiveModal()
-				return
-			}
-			if (key.ctrl && key.name === "s") {
-				submitDiffComment()
-				return
-			}
-			if (key.ctrl && key.name === "a") {
-				editComment(moveLineStart)
-				return
-			}
-			if (key.ctrl && key.name === "e") {
-				editComment(moveLineEnd)
-				return
-			}
-			if (key.ctrl && key.name === "b") {
-				editComment(editorMoveLeft)
-				return
-			}
-			if (key.ctrl && key.name === "f") {
-				editComment(editorMoveRight)
-				return
-			}
-			if (key.ctrl && key.name === "w") {
-				editComment(deleteWordBackward)
-				return
-			}
-			if (key.ctrl && key.name === "u") {
-				editComment(deleteToLineStart)
-				return
-			}
-			if (key.ctrl && key.name === "k") {
-				editComment(deleteToLineEnd)
-				return
-			}
-			if (key.ctrl && key.name === "d") {
-				editComment(editorDeleteForward)
-				return
-			}
-			if ((key.meta || key.option) && (key.name === "b" || key.name === "left")) {
-				editComment(moveWordBackward)
-				return
-			}
-			if ((key.meta || key.option) && (key.name === "f" || key.name === "right")) {
-				editComment(moveWordForward)
-				return
-			}
-			if ((key.meta || key.option) && (key.name === "backspace" || key.name === "delete")) {
-				editComment(key.name === "delete" ? deleteWordForward : deleteWordBackward)
-				return
-			}
-			if (key.name === "backspace") {
-				editComment(editorBackspace)
-				return
-			}
-			if (key.name === "delete") {
-				editComment(editorDeleteForward)
-				return
-			}
-			if (key.name === "left") {
-				editComment(editorMoveLeft)
-				return
-			}
-			if (key.name === "right") {
-				editComment(editorMoveRight)
-				return
-			}
-			if (key.name === "up") {
-				editComment((state) => moveVertically(state, -1))
-				return
-			}
-			if (key.name === "down") {
-				editComment((state) => moveVertically(state, 1))
-				return
-			}
-			if (key.name === "home") {
-				editComment(moveLineStart)
-				return
-			}
-			if (key.name === "end") {
-				editComment(moveLineEnd)
-				return
-			}
-			if ((key.name === "return" || key.name === "enter") && key.shift) {
-				editComment((state) => insertText(state, "\n"))
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				submitDiffComment()
-				return
-			}
 			const text = printableKeyText(key)
-			if (text) {
-				editComment((state) => insertText(state, text))
-				return
-			}
+			if (text) editComment((state) => insertText(state, text))
 			return
 		}
 
-		if (commentThreadModalActive) {
-			if (key.name === "escape") {
-				closeActiveModal()
-				return
-			}
-			if (key.name === "return" || key.name === "enter" || key.name === "a" || key.name === "c") {
-				openDiffCommentModal()
-				return
-			}
-			if (key.name === "up" || key.name === "k") {
-				setCommentThreadModal((current) => ({ ...current, scrollOffset: Math.max(0, current.scrollOffset - 1) }))
-				return
-			}
-			if (key.name === "down" || key.name === "j") {
-				setCommentThreadModal((current) => ({ ...current, scrollOffset: current.scrollOffset + 1 }))
-				return
-			}
-			if (key.name === "pageup" || key.ctrl && key.name === "u") {
-				setCommentThreadModal((current) => ({ ...current, scrollOffset: Math.max(0, current.scrollOffset - halfPage) }))
-				return
-			}
-			if (key.name === "pagedown" || key.ctrl && (key.name === "d" || key.name === "v")) {
-				setCommentThreadModal((current) => ({ ...current, scrollOffset: current.scrollOffset + halfPage }))
-				return
-			}
-			return
-		}
 
-		if (closeModalActive) {
-			if (key.name === "escape") {
-				closeActiveModal()
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				confirmClosePullRequest()
-				return
-			}
-			return
-		}
 
-		if (mergeModalActive) {
-			const options = availableMergeActions(mergeModal.info)
-			if (key.name === "escape") {
-				closeActiveModal()
-				return
-			}
-			if ((key.name === "return" || key.name === "enter") && options.length > 0) {
-				confirmMergeAction()
-				return
-			}
-			if (key.name === "up" || key.name === "k") {
-				setMergeModal((current) => ({
-					...current,
-					selectedIndex: Math.max(0, current.selectedIndex - 1),
-				}))
-				return
-			}
-			if (key.name === "down" || key.name === "j") {
-				setMergeModal((current) => ({
-					...current,
-					selectedIndex: Math.min(Math.max(0, options.length - 1), current.selectedIndex + 1),
-				}))
-				return
-			}
-			return
-		}
 
 		if (labelModalActive) {
-			if (key.name === "escape") {
-				closeActiveModal()
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				toggleLabelAtIndex()
-				return
-			}
-			if (key.name === "up" || key.name === "k") {
-				setLabelModal((current) => ({
-					...current,
-					selectedIndex: Math.max(0, current.selectedIndex - 1),
-				}))
-				return
-			}
-			if (key.name === "down" || key.name === "j") {
-				const filtered = filterLabels(labelModal.availableLabels, labelModal.query)
-				setLabelModal((current) => ({
-					...current,
-					selectedIndex: Math.min(Math.max(0, filtered.length - 1), current.selectedIndex + 1),
-				}))
-				return
-			}
 			if (isSingleLineInputKey(key)) {
 				setLabelModal((current) => ({
 					...current,
 					query: editSingleLineInput(current.query, key) ?? current.query,
 					selectedIndex: 0,
 				}))
-				return
 			}
 			return
 		}
@@ -2271,20 +2333,10 @@ export const App = () => {
 		}
 
 		if (filterMode) {
-			if (key.name === "escape") {
-				setFilterDraft(filterQuery)
-				setFilterMode(false)
-				return
-			}
-			if (key.name === "return" || key.name === "enter") {
-				setFilterQuery(filterDraft)
-				setFilterMode(false)
-				return
-			}
 			if (isSingleLineInputKey(key)) {
 				setFilterDraft((current) => editSingleLineInput(current, key) ?? current)
-				return
 			}
+			return
 		}
 
 		if (key.name === "tab") {
@@ -2292,23 +2344,10 @@ export const App = () => {
 			return
 		}
 
-		if (isThemeKey(key)) {
-			runCommandById("theme.open")
-			return
-		}
-
-		if (key.name === "/") {
-			runCommandById("filter.open")
-			return
-		}
 		if (key.name === "escape" && filterQuery.length > 0) {
 			runCommandById("filter.clear")
 			return
 		}
-		if (key.name === "r") {
-			runCommandById("pull.refresh")
-			return
-		}
 		if (isWideLayout && selectedPullRequest && !detailFullView && !diffFullView) {
 			if (key.name === "home") {
 				scrollDetailPreviewTo(0)
@@ -2391,38 +2430,6 @@ export const App = () => {
 			() => setSelectedIndex(0),
 			() => setSelectedIndex(visiblePullRequests.length === 0 ? 0 : visiblePullRequests.length - 1),
 		)) return
-		if ((key.name === "return" || key.name === "enter") && !detailFullView) {
-			runCommandById("detail.open")
-			return
-		}
-		if (key.name === "d" && selectedPullRequest) {
-			runCommandById("diff.open")
-			return
-		}
-		if (key.name === "x" && selectedPullRequest?.state === "open") {
-			runCommandById("pull.close")
-			return
-		}
-		if (key.name === "l" && selectedPullRequest) {
-			runCommandById("pull.labels")
-			return
-		}
-		if (key.name === "m" || key.name === "M") {
-			if (selectedPullRequest) runCommandById("pull.merge")
-			return
-		}
-		if (key.name === "o" && selectedPullRequest) {
-			runCommandById("pull.open-browser")
-			return
-		}
-		if ((key.name === "s" || key.name === "S") && selectedPullRequest) {
-			runCommandById("pull.toggle-draft")
-			return
-		}
-		if (key.name === "y" && selectedPullRequest) {
-			runCommandById("pull.copy-metadata")
-			return
-		}
 	})
 
 	const fullscreenContentWidth = Math.max(24, contentWidth - 2)

package/src/commands.ts

@@ -1,5 +1,10 @@
 export type CommandScope = "Global" | "View" | "Pull request" | "Diff" | "Navigation" | "System"
 
+const SCOPE_ORDER: readonly CommandScope[] = ["Global", "View", "Pull request", "Diff", "Navigation", "System"]
+
+export const sortCommandsByScope = (commands: readonly AppCommand[]) =>
+	[...commands].sort((left, right) => SCOPE_ORDER.indexOf(left.scope) - SCOPE_ORDER.indexOf(right.scope))
+
 export interface AppCommand {
 	readonly id: string
 	readonly title: string

package/src/index.tsx

@@ -3,6 +3,8 @@
 import { addDefaultParsers, createCliRenderer, createTerminalPalette } from "@opentui/core"
 import { RegistryProvider } from "@effect/atom-react"
 import { createRoot } from "@opentui/react"
+import { createDefaultOpenTuiKeymap } from "@opentui/keymap/opentui"
+import { KeymapProvider } from "@opentui/keymap/react"
 
 process.env.OTUI_USE_ALTERNATE_SCREEN = "true"
 
@@ -43,8 +45,12 @@ const renderer = await createCliRenderer({
 
 process.stdout.write(FOCUS_REPORTING_ENABLE)
 
+const keymap = createDefaultOpenTuiKeymap(renderer)
+
 createRoot(renderer).render(
 	<RegistryProvider>
-		<App />
+		<KeymapProvider keymap={keymap}>
+			<App />
+		</KeymapProvider>
 	</RegistryProvider>,
 )

package/src/ui/CommandPalette.tsx

@@ -17,6 +17,7 @@ const scopeLabels = {
 
 export type CommandPaletteRow =
 	| { readonly _tag: "section"; readonly scope: AppCommand["scope"] }
+	| { readonly _tag: "spacer" }
 	| { readonly _tag: "command"; readonly command: AppCommand; readonly commandIndex: number }
 
 export const buildCommandPaletteRows = (commands: readonly AppCommand[]): readonly CommandPaletteRow[] => {
@@ -25,6 +26,7 @@ export const buildCommandPaletteRows = (commands: readonly AppCommand[]): readon
 	for (let commandIndex = 0; commandIndex < commands.length; commandIndex++) {
 		const command = commands[commandIndex]!
 		if (command.scope !== previousScope) {
+			if (previousScope !== null) rows.push({ _tag: "spacer" })
 			rows.push({ _tag: "section", scope: command.scope })
 			previousScope = command.scope
 		}
@@ -112,24 +114,35 @@ export const CommandPalette = ({
 				<>
 					{visibleRows.map((row, index) => {
 						const rowIndex = scrollTop + index
+						if (row._tag === "spacer") {
+							return <PlainLine key={`spacer-${rowIndex}`} text="" />
+						}
 						if (row._tag === "section") {
-							return <PlainLine key={`section-${row.scope}-${rowIndex}`} text={fitCell(` ${scopeLabels[row.scope]}`, rowWidth)} fg={colors.accent} bold />
+							return <PlainLine key={`section-${row.scope}-${rowIndex}`} text={fitCell(`  ${scopeLabels[row.scope].toUpperCase()}`, rowWidth)} fg={colors.muted} />
 						}
 
 						const { command, commandIndex } = row
 						const isSelected = commandIndex === clampedIndex
 						const shortcut = command.shortcut ? trimCell(command.shortcut, 16) : ""
-						const rightWidth = shortcut.length === 0 ? 0 : Math.min(18, Math.max(8, shortcut.length + 1))
+						const shortcutWidth = shortcut.length === 0 ? 0 : Math.min(18, Math.max(6, shortcut.length + 1))
 						const trailingPadding = shortcut.length === 0 ? 0 : 1
-						const titleWidth = Math.max(8, rowWidth - rightWidth - trailingPadding - 2)
+						// Layout: "▸ " (2) + title + "  " (2) + subtitle + filler + shortcut + " " (1)
+						const SELECTOR_WIDTH = 2
+						const titleAvailable = Math.max(8, rowWidth - SELECTOR_WIDTH - shortcutWidth - trailingPadding)
+						const titleText = trimCell(command.title, Math.min(titleAvailable, 36))
+						const subtitleSpace = Math.max(0, titleAvailable - titleText.length - 2)
+						const subtitleText = command.subtitle && subtitleSpace > 4 ? trimCell(command.subtitle, subtitleSpace) : ""
+						const fillerWidth = Math.max(0, titleAvailable - titleText.length - (subtitleText ? 2 + subtitleText.length : 0))
 
 						return (
 							<box key={command.id} height={1}>
 								<TextLine width={rowWidth} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
 									<span fg={isSelected ? colors.accent : colors.muted}>{isSelected ? "▸" : " "}</span>
 									<span> </span>
-									{isSelected ? <span attributes={TextAttributes.BOLD}>{fitCell(command.title, titleWidth)}</span> : <span>{fitCell(command.title, titleWidth)}</span>}
-									{rightWidth > 0 ? <span fg={colors.muted}>{fitCell(shortcut, rightWidth, "right")}</span> : null}
+									{isSelected ? <span attributes={TextAttributes.BOLD}>{titleText}</span> : <span>{titleText}</span>}
+									{subtitleText ? <span fg={colors.muted}>{`  ${subtitleText}`}</span> : null}
+									{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
+									{shortcutWidth > 0 ? <span fg={colors.muted}>{fitCell(shortcut, shortcutWidth, "right")}</span> : null}
 									{trailingPadding > 0 ? <span> </span> : null}
 								</TextLine>
 							</box>