@kitlangton/ghui 0.2.0 → 0.3.0

package/src/domain.ts

@@ -16,10 +16,10 @@ export const pullRequestQueueLabels = {
 	mentioned: "mentioned",
 } as const satisfies Record<PullRequestQueueMode, string>
 
-export const pullRequestQueueSearchQualifier = (mode: PullRequestQueueMode, author: string, repository: string | null) => {
+export const pullRequestQueueSearchQualifier = (mode: PullRequestQueueMode, repository: string | null) => {
 	const qualifiers = {
-		repository: repository ? `repo:${repository}` : `author:${author}`,
-		authored: `author:${author}`,
+		repository: repository ? `repo:${repository}` : "author:@me",
+		authored: "author:@me",
 		review: "review-requested:@me",
 		assigned: "assignee:@me",
 		mentioned: "mentions:@me",
@@ -44,6 +44,9 @@ export type DiffCommentSide = Schema.Schema.Type<typeof DiffCommentSide>
 
 export type PullRequestMergeAction = "squash" | "auto" | "admin" | "disable-auto"
 
+export const pullRequestReviewEvents = ["COMMENT", "APPROVE", "REQUEST_CHANGES"] as const
+export type PullRequestReviewEvent = (typeof pullRequestReviewEvents)[number]
+
 export interface CheckItem {
 	readonly name: string
 	readonly status: CheckRunStatus
@@ -67,6 +70,13 @@ export interface CreatePullRequestCommentInput {
 	readonly body: string
 }
 
+export interface SubmitPullRequestReviewInput {
+	readonly repository: string
+	readonly number: number
+	readonly event: PullRequestReviewEvent
+	readonly body: string
+}
+
 export interface PullRequestReviewComment {
 	readonly id: string
 	readonly path: string

package/src/keymap/all.ts

@@ -1,4 +1,5 @@
 import { context } from "@ghui/keymap"
+import { changedFilesModalKeymap, type ChangedFilesModalCtx } from "./changedFilesModal.ts"
 import { closeModalKeymap, type CloseModalCtx } from "./closeModal.ts"
 import { commandPaletteKeymap, type CommandPaletteCtx } from "./commandPalette.ts"
 import { commentModalKeymap, type CommentModalCtx } from "./commentModal.ts"
@@ -10,6 +11,7 @@ import { labelModalKeymap, type LabelModalCtx } from "./labelModal.ts"
 import { listNavKeymap, type ListNavCtx } from "./listNav.ts"
 import { mergeModalKeymap, type MergeModalCtx } from "./mergeModal.ts"
 import { openRepositoryModalKeymap, type OpenRepositoryModalCtx } from "./openRepositoryModal.ts"
+import { submitReviewModalKeymap, type SubmitReviewModalCtx } from "./submitReviewModal.ts"
 import { themeModalKeymap, type ThemeModalCtx } from "./themeModal.ts"
 
 export interface AppCtx {
@@ -17,6 +19,8 @@ export interface AppCtx {
 	readonly closeModalActive: boolean
 	readonly mergeModalActive: boolean
 	readonly commentThreadModalActive: boolean
+	readonly changedFilesModalActive: boolean
+	readonly submitReviewModalActive: boolean
 	readonly labelModalActive: boolean
 	readonly themeModalActive: boolean
 	readonly openRepositoryModalActive: boolean
@@ -34,6 +38,8 @@ export interface AppCtx {
 	readonly closeModal: CloseModalCtx
 	readonly mergeModal: MergeModalCtx
 	readonly commentThreadModal: CommentThreadModalCtx
+	readonly changedFilesModal: ChangedFilesModalCtx
+	readonly submitReviewModal: SubmitReviewModalCtx
 	readonly labelModal: LabelModalCtx
 	readonly themeModal: ThemeModalCtx
 	readonly openRepositoryModal: OpenRepositoryModalCtx
@@ -51,15 +57,20 @@ export interface AppCtx {
 
 const App = context<AppCtx>()
 
+const modalActive = (a: AppCtx): boolean =>
+	a.closeModalActive
+	|| a.mergeModalActive
+	|| a.commentThreadModalActive
+	|| a.changedFilesModalActive
+	|| a.submitReviewModalActive
+	|| a.labelModalActive
+	|| a.themeModalActive
+	|| a.openRepositoryModalActive
+	|| a.commentModalActive
+	|| a.commandPaletteActive
+
 const inListMode = (a: AppCtx): boolean =>
-	!a.closeModalActive
-	&& !a.mergeModalActive
-	&& !a.commentThreadModalActive
-	&& !a.labelModalActive
-	&& !a.themeModalActive
-	&& !a.openRepositoryModalActive
-	&& !a.commentModalActive
-	&& !a.commandPaletteActive
+	!modalActive(a)
 	&& !a.filterMode
 	&& !a.diffFullView
 	&& !a.detailFullView
@@ -87,6 +98,8 @@ export const appKeymap = App(
 	closeModalKeymap.scope((a) => a.closeModalActive && a.closeModal),
 	mergeModalKeymap.scope((a) => a.mergeModalActive && a.mergeModal),
 	commentThreadModalKeymap.scope((a) => a.commentThreadModalActive && a.commentThreadModal),
+	changedFilesModalKeymap.scope((a) => a.changedFilesModalActive && a.changedFilesModal),
+	submitReviewModalKeymap.scope((a) => a.submitReviewModalActive && a.submitReviewModal),
 	labelModalKeymap.scope((a) => a.labelModalActive && a.labelModal),
 	themeModalKeymap.scope((a) => a.themeModalActive && a.themeModal),
 	openRepositoryModalKeymap.scope((a) => a.openRepositoryModalActive && a.openRepositoryModal),
@@ -95,8 +108,8 @@ export const appKeymap = App(
 	filterModeKeymap.scope((a) => a.filterMode && a.filterModeCtx),
 
 	// Full-view layers (only when no modal is on top)
-	diffViewKeymap.scope((a) => a.diffFullView && !a.commandPaletteActive && a.diff),
-	detailViewKeymap.scope((a) => a.detailFullView && !a.commandPaletteActive && a.detail),
+	diffViewKeymap.scope((a) => a.diffFullView && !modalActive(a) && a.diff),
+	detailViewKeymap.scope((a) => a.detailFullView && !modalActive(a) && a.detail),
 
 	// PR list nav
 	listNavKeymap.scope((a) => inListMode(a) && a.listNav),

package/src/keymap/changedFilesModal.ts

@@ -0,0 +1,23 @@
+import { context } from "@ghui/keymap"
+
+export interface ChangedFilesModalCtx {
+	readonly hasResults: boolean
+	readonly closeModal: () => void
+	readonly selectFile: () => void
+	readonly moveSelection: (delta: -1 | 1) => void
+}
+
+const ChangedFiles = context<ChangedFilesModalCtx>()
+
+export const changedFilesModalKeymap = ChangedFiles(
+	{ id: "changed-files.close", title: "Close", keys: ["escape"], run: (s) => s.closeModal() },
+	{
+		id: "changed-files.select",
+		title: "Jump to file",
+		keys: ["return"],
+		enabled: (s) => s.hasResults ? true : "No matching files.",
+		run: (s) => s.selectFile(),
+	},
+	{ id: "changed-files.up", title: "Up", keys: ["k", "up", "ctrl+p", "ctrl+k"], run: (s) => s.moveSelection(-1) },
+	{ id: "changed-files.down", title: "Down", keys: ["j", "down", "ctrl+n", "ctrl+j"], run: (s) => s.moveSelection(1) },
+)

package/src/keymap/commandPalette.ts

@@ -11,6 +11,6 @@ const Palette = context<CommandPaletteCtx>()
 export const commandPaletteKeymap = Palette(
 	{ id: "palette.close", title: "Close palette", keys: ["escape", "ctrl+c"], run: (s) => s.closeModal() },
 	{ id: "palette.run", title: "Run command", keys: ["return"], run: (s) => s.runSelected() },
-	{ id: "palette.up", title: "Up", keys: ["up"], run: (s) => s.moveSelection(-1) },
-	{ id: "palette.down", title: "Down", keys: ["down"], run: (s) => s.moveSelection(1) },
+	{ id: "palette.up", title: "Up", keys: ["up", "ctrl+p", "ctrl+k"], run: (s) => s.moveSelection(-1) },
+	{ id: "palette.down", title: "Down", keys: ["down", "ctrl+n", "ctrl+j"], run: (s) => s.moveSelection(1) },
 )

package/src/keymap/commentThreadModal.ts

@@ -11,7 +11,7 @@ const Thread = context<CommentThreadModalCtx>()
 
 export const commentThreadModalKeymap = Thread(
 	{ id: "comment-thread.close", title: "Close", keys: ["escape"], run: (s) => s.closeModal() },
-	{ id: "comment-thread.reply", title: "Reply", keys: ["return", "a", "c"], run: (s) => s.openInlineComment() },
+	{ id: "comment-thread.reply", title: "Reply", keys: ["return"], run: (s) => s.openInlineComment() },
 	{ id: "comment-thread.up", title: "Up", keys: ["k", "up"], run: (s) => s.scrollBy(-1) },
 	{ id: "comment-thread.down", title: "Down", keys: ["j", "down"], run: (s) => s.scrollBy(1) },
 	{ id: "comment-thread.half-up", title: "Half page up", keys: ["pageup", "ctrl+u"], run: (s) => s.scrollBy(-s.halfPage) },

package/src/keymap/diffView.ts

@@ -8,7 +8,6 @@ export interface DiffViewCtx {
 	readonly halfPage: number
 	readonly handleEscape: () => void          // closes diff, or clears comment range if active
 	readonly openSelectedComment: () => void
-	readonly addComment: () => void
 	readonly toggleRange: () => void
 	readonly toggleView: () => void
 	readonly toggleWrap: () => void
@@ -19,6 +18,8 @@ export interface DiffViewCtx {
 	readonly moveAnchorToBoundary: (boundary: "first" | "last") => void
 	readonly alignAnchor: (align: DiffAlign) => void
 	readonly selectSide: (side: DiffSide) => void
+	readonly openChangedFiles: () => void
+	readonly openSubmitReview: () => void
 	readonly nextFile: () => void
 	readonly previousFile: () => void
 	readonly openInBrowser: () => void
@@ -29,7 +30,6 @@ const Diff = context<DiffViewCtx>()
 export const diffViewKeymap = Diff(
 	{ id: "diff.escape", title: "Close diff / clear range", keys: ["escape"], run: (s) => s.handleEscape() },
 	{ id: "diff.open-comment", title: "Open / add comment", keys: ["return"], run: (s) => s.openSelectedComment() },
-	{ id: "diff.add-comment", title: "Add comment on line", keys: ["a"], run: (s) => s.addComment() },
 	{ id: "diff.toggle-range", title: "Toggle comment range", keys: ["v"], run: (s) => s.toggleRange() },
 	{ id: "diff.toggle-view", title: "Toggle split/unified", keys: ["shift+v"], run: (s) => s.toggleView() },
 	{ id: "diff.toggle-wrap", title: "Toggle wrap", keys: ["w"], run: (s) => s.toggleWrap() },
@@ -77,8 +77,10 @@ export const diffViewKeymap = Diff(
 	{ id: "diff.side-right", title: "New side", keys: ["right", "l"], run: (s) => s.selectSide("RIGHT") },
 
 	// File nav
+	{ id: "diff.changed-files", title: "Changed files", keys: ["f"], run: (s) => s.openChangedFiles() },
 	{ id: "diff.next-file", title: "Next file", keys: ["]"], run: (s) => s.nextFile() },
 	{ id: "diff.previous-file", title: "Previous file", keys: ["["], run: (s) => s.previousFile() },
+	{ id: "diff.submit-review", title: "Submit review", keys: ["shift+r"], run: (s) => s.openSubmitReview() },
 
 	// Boundary jumps + align
 	{ id: "diff.first", title: "First comment", keys: ["g g"], run: (s) => s.moveAnchorToBoundary("first") },

package/src/keymap/labelModal.ts

@@ -11,6 +11,6 @@ const Label = context<LabelModalCtx>()
 export const labelModalKeymap = Label(
 	{ id: "label-modal.close", title: "Close", keys: ["escape"], run: (s) => s.closeModal() },
 	{ id: "label-modal.toggle", title: "Toggle label", keys: ["return"], run: (s) => s.toggleSelected() },
-	{ id: "label-modal.up", title: "Up", keys: ["k", "up"], run: (s) => s.moveSelection(-1) },
-	{ id: "label-modal.down", title: "Down", keys: ["j", "down"], run: (s) => s.moveSelection(1) },
+	{ id: "label-modal.up", title: "Up", keys: ["k", "up", "ctrl+p", "ctrl+k"], run: (s) => s.moveSelection(-1) },
+	{ id: "label-modal.down", title: "Down", keys: ["j", "down", "ctrl+n", "ctrl+j"], run: (s) => s.moveSelection(1) },
 )

package/src/keymap/submitReviewModal.ts

@@ -0,0 +1,48 @@
+import { context } from "@ghui/keymap"
+
+export interface SubmitReviewModalCtx {
+	readonly closeModal: () => void
+	readonly submit: () => void
+	readonly insertNewline: () => void
+	readonly moveActionSelection: (delta: -1 | 1) => void
+	readonly moveLeft: () => void
+	readonly moveRight: () => void
+	readonly moveUp: () => void
+	readonly moveDown: () => void
+	readonly moveLineStart: () => void
+	readonly moveLineEnd: () => void
+	readonly moveWordBackward: () => void
+	readonly moveWordForward: () => void
+	readonly backspace: () => void
+	readonly deleteForward: () => void
+	readonly deleteWordBackward: () => void
+	readonly deleteWordForward: () => void
+	readonly deleteToLineStart: () => void
+	readonly deleteToLineEnd: () => void
+}
+
+const SubmitReview = context<SubmitReviewModalCtx>()
+
+export const submitReviewModalKeymap = SubmitReview(
+	{ id: "submit-review.escape", title: "Cancel", keys: ["escape"], run: (s) => s.closeModal() },
+	{ id: "submit-review.submit", title: "Submit", keys: ["ctrl+s", "return"], run: (s) => s.submit() },
+	{ id: "submit-review.newline", title: "Insert newline", keys: ["shift+return"], run: (s) => s.insertNewline() },
+	{ id: "submit-review.next-action", title: "Next action", keys: ["tab"], run: (s) => s.moveActionSelection(1) },
+	{ id: "submit-review.previous-action", title: "Previous action", keys: ["shift+tab"], run: (s) => s.moveActionSelection(-1) },
+
+	{ id: "submit-review.move-left", title: "Cursor left", keys: ["left", "ctrl+b"], run: (s) => s.moveLeft() },
+	{ id: "submit-review.move-right", title: "Cursor right", keys: ["right", "ctrl+f"], run: (s) => s.moveRight() },
+	{ id: "submit-review.move-up", title: "Cursor up", keys: ["up"], run: (s) => s.moveUp() },
+	{ id: "submit-review.move-down", title: "Cursor down", keys: ["down"], run: (s) => s.moveDown() },
+	{ id: "submit-review.line-start", title: "Line start", keys: ["home", "ctrl+a"], run: (s) => s.moveLineStart() },
+	{ id: "submit-review.line-end", title: "Line end", keys: ["end", "ctrl+e"], run: (s) => s.moveLineEnd() },
+	{ id: "submit-review.word-back", title: "Word backward", keys: ["meta+b", "meta+left"], run: (s) => s.moveWordBackward() },
+	{ id: "submit-review.word-forward", title: "Word forward", keys: ["meta+f", "meta+right"], run: (s) => s.moveWordForward() },
+
+	{ id: "submit-review.backspace", title: "Backspace", keys: ["backspace"], run: (s) => s.backspace() },
+	{ id: "submit-review.delete", title: "Delete", keys: ["delete", "ctrl+d"], run: (s) => s.deleteForward() },
+	{ id: "submit-review.delete-word-back", title: "Delete word backward", keys: ["ctrl+w", "meta+backspace"], run: (s) => s.deleteWordBackward() },
+	{ id: "submit-review.delete-word-forward", title: "Delete word forward", keys: ["meta+delete"], run: (s) => s.deleteWordForward() },
+	{ id: "submit-review.delete-to-line-start", title: "Delete to line start", keys: ["ctrl+u"], run: (s) => s.deleteToLineStart() },
+	{ id: "submit-review.delete-to-line-end", title: "Delete to line end", keys: ["ctrl+k"], run: (s) => s.deleteToLineEnd() },
+)

package/src/keymap/themeModal.ts

@@ -30,8 +30,8 @@ export const themeModalKeymap = Theme(
 		enabled: (s) => s.filterMode && !s.hasFilteredResults ? "No matching themes." : true,
 		run: (s) => s.confirmSelection(),
 	},
-	{ id: "theme-modal.up-arrow", title: "Up", keys: ["up"], run: (s) => s.moveSelection(-1) },
-	{ id: "theme-modal.down-arrow", title: "Down", keys: ["down"], run: (s) => s.moveSelection(1) },
+	{ id: "theme-modal.up-arrow", title: "Up", keys: ["up", "ctrl+p", "ctrl+k"], run: (s) => s.moveSelection(-1) },
+	{ id: "theme-modal.down-arrow", title: "Down", keys: ["down", "ctrl+n", "ctrl+j"], run: (s) => s.moveSelection(1) },
 	{
 		id: "theme-modal.up-letter",
 		title: "Up",

package/src/pullRequestViews.ts

@@ -4,9 +4,7 @@ export type PullRequestView =
 	| { readonly _tag: "Repository"; readonly repository: string }
 	| { readonly _tag: "Queue"; readonly mode: PullRequestUserQueueMode; readonly repository: string | null }
 
-export const initialPullRequestView = (repository: string | null): PullRequestView => repository
-	? { _tag: "Repository", repository }
-	: { _tag: "Queue", mode: "authored", repository: null }
+export const initialPullRequestView = (): PullRequestView => ({ _tag: "Queue", mode: "authored", repository: null })
 
 export const viewMode = (view: PullRequestView): PullRequestQueueMode => view._tag === "Repository" ? "repository" : view.mode
 

package/src/services/GitHubService.ts

@@ -1,6 +1,6 @@
 import { Context, Effect, Layer, Schema } from "effect"
 import { config } from "../config.js"
-import { DiffCommentSide, pullRequestQueueSearchQualifier, type CheckItem, type CreatePullRequestCommentInput, type ListPullRequestPageInput, type Mergeable, type PullRequestConversationItem, type PullRequestItem, type PullRequestMergeAction, type PullRequestMergeInfo, type PullRequestPage, type PullRequestQueueMode, type PullRequestReviewComment, type ReviewStatus } from "../domain.js"
+import { DiffCommentSide, pullRequestQueueSearchQualifier, type CheckItem, type CreatePullRequestCommentInput, type ListPullRequestPageInput, type Mergeable, type PullRequestConversationItem, type PullRequestItem, type PullRequestMergeAction, type PullRequestMergeInfo, type PullRequestPage, type PullRequestQueueMode, type PullRequestReviewComment, type ReviewStatus, type SubmitPullRequestReviewInput } from "../domain.js"
 import { getMergeActionDefinition } from "../mergeActions.js"
 import { CommandError, CommandRunner, type JsonParseError } from "./CommandRunner.js"
 
@@ -413,9 +413,9 @@ const parsePullRequest = (item: RawPullRequestNode): PullRequestItem => {
 	}
 }
 
-const searchQuery = (mode: PullRequestQueueMode, author: string, repository: string | null) => {
+const searchQuery = (mode: PullRequestQueueMode, repository: string | null) => {
 	const sort = mode === "repository" ? "sort:updated-desc" : "sort:created-desc"
-	return `${pullRequestQueueSearchQualifier(mode, author, repository)} is:pr is:open ${sort}`
+	return `${pullRequestQueueSearchQualifier(mode, repository)} is:pr is:open ${sort}`
 }
 
 const pullRequestPage = <Item>(connection: PullRequestConnection<Item>, parse: (node: Item) => PullRequestItem): PullRequestPage => ({
@@ -506,7 +506,7 @@ const fallbackCreatedComment = (input: CreatePullRequestCommentInput): PullReque
 	path: input.path,
 	line: input.line,
 	side: input.side,
-	author: config.author.replace(/^@/, "") || "you",
+	author: "you",
 	body: input.body,
 	createdAt: new Date(),
 	url: null,
@@ -522,6 +522,12 @@ const MERGEABLE_BY_RAW: Record<string, Mergeable> = {
 const normalizeMergeable = (value: string): Mergeable =>
 	MERGEABLE_BY_RAW[value] ?? "unknown"
 
+const REVIEW_EVENT_CLI_FLAG = {
+	COMMENT: "--comment",
+	APPROVE: "--approve",
+	REQUEST_CHANGES: "--request-changes",
+} as const satisfies Record<SubmitPullRequestReviewInput["event"], string>
+
 export class GitHubService extends Context.Service<GitHubService, {
 	readonly listOpenPullRequests: (mode: PullRequestQueueMode, repository: string | null) => Effect.Effect<readonly PullRequestItem[], GitHubError>
 	readonly listOpenPullRequestPage: (input: ListPullRequestPageInput) => Effect.Effect<PullRequestPage, GitHubError>
@@ -535,6 +541,7 @@ export class GitHubService extends Context.Service<GitHubService, {
 	readonly mergePullRequest: (repository: string, number: number, action: PullRequestMergeAction) => Effect.Effect<void, CommandError>
 	readonly closePullRequest: (repository: string, number: number) => Effect.Effect<void, CommandError>
 	readonly createPullRequestComment: (input: CreatePullRequestCommentInput) => Effect.Effect<PullRequestReviewComment, GitHubError>
+	readonly submitPullRequestReview: (input: SubmitPullRequestReviewInput) => 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>
@@ -557,7 +564,7 @@ export class GitHubService extends Context.Service<GitHubService, {
 					const response: SearchResponse<Item["Type"]> = yield* command.runSchema(responseSchema, "gh", [
 						"api", "graphql",
 						"-f", `query=${query}`,
-						"-F", `searchQuery=${searchQuery(input.mode, config.author, input.repository)}`,
+						"-F", `searchQuery=${searchQuery(input.mode, input.repository)}`,
 						"-F", `first=${input.pageSize}`,
 						...(input.cursor ? ["-F", `after=${input.cursor}`] : []),
 					])
@@ -702,6 +709,13 @@ export class GitHubService extends Context.Service<GitHubService, {
 				return parsePullRequestComment(response) ?? fallbackCreatedComment(input)
 			})
 
+			const submitPullRequestReview = (input: SubmitPullRequestReviewInput) =>
+				ghVoid("submitPullRequestReview", [
+					"pr", "review", String(input.number), "--repo", input.repository,
+					REVIEW_EVENT_CLI_FLAG[input.event],
+					"--body", input.body,
+				])
+
 			const toggleDraftStatus = (repository: string, number: number, isDraft: boolean) =>
 				ghVoid("toggleDraftStatus", ["pr", "ready", String(number), "--repo", repository, ...(isDraft ? [] : ["--undo"])])
 
@@ -729,6 +743,7 @@ export class GitHubService extends Context.Service<GitHubService, {
 				mergePullRequest,
 				closePullRequest,
 				createPullRequestComment,
+				submitPullRequestReview,
 				toggleDraftStatus,
 				listRepoLabels,
 				addPullRequestLabel,

package/src/services/MockGitHubService.ts

@@ -171,6 +171,7 @@ export const MockGitHubService = {
 					createdAt: new Date(),
 					url: null,
 				} satisfies PullRequestReviewComment),
+				submitPullRequestReview: () => Effect.void,
 				toggleDraftStatus: () => Effect.void,
 				listRepoLabels: () => Effect.succeed([]),
 				addPullRequestLabel: () => Effect.void,

package/src/ui/CommandPalette.tsx

@@ -4,7 +4,7 @@ import type { AppCommand } from "../commands.js"
 import { clampCommandIndex } from "../commands.js"
 import { colors } from "./colors.js"
 import { scrollTopForVisibleLine } from "./diff.js"
-import { centerCell, Divider, Filler, fitCell, HintRow, ModalFrame, PaddedRow, PlainLine, standardModalDims, TextLine, trimCell } from "./primitives.js"
+import { centerCell, Filler, fitCell, HintRow, PlainLine, searchModalDims, SearchModalFrame, TextLine, trimCell } from "./primitives.js"
 
 const scopeLabels = {
 	Global: "App",
@@ -79,8 +79,7 @@ export const CommandPalette = ({
 	onSelectCommandIndex: (index: number) => void
 	onRunCommand: (command: AppCommand) => void
 }) => {
-	const { innerWidth, contentWidth, rowWidth } = standardModalDims(modalWidth, modalHeight)
-	const listHeight = Math.max(1, modalHeight - 6)
+	const { bodyHeight: listHeight, rowWidth } = searchModalDims(modalWidth, modalHeight)
 	const clampedIndex = clampCommandIndex(selectedIndex, commands)
 	const [scrollTop, setScrollTop] = useState(0)
 	const rows = useMemo(() => buildCommandPaletteRows(commands), [commands])
@@ -88,18 +87,6 @@ export const CommandPalette = ({
 	const visibleRows = rows.slice(scrollTop, scrollTop + listHeight)
 	const bottomPaddingRows = Math.max(0, listHeight - visibleRows.length)
 	const countText = commands.length === 1 ? "1 command" : `${commands.length} commands`
-	const placeholder = "Search"
-	const titleText = "Commands"
-	const headerGap = 1
-	const headerDivider = "│"
-	const searchGap = 1
-	const dividerColumn = 1 + titleText.length + headerGap
-	const searchStart = titleText.length + headerGap + headerDivider.length + searchGap
-	const countGap = countText.length > 0 ? 2 : 0
-	const searchWidth = Math.max(1, contentWidth - searchStart - countGap - countText.length)
-	const queryText = trimCell(query, Math.max(0, searchWidth - 1))
-	const queryPadding = Math.max(0, searchWidth - queryText.length - 1)
-	const caretFg = colors.background === "transparent" ? colors.text : colors.background
 	const emptyTopRows = Math.max(0, Math.floor((listHeight - 1) / 2))
 	const emptyBottomRows = Math.max(0, listHeight - emptyTopRows - 1)
 	const runCommandOnMouseDown = (command: AppCommand) => (event: MouseEvent) => {
@@ -171,46 +158,19 @@ export const CommandPalette = ({
 		setScrollTop((current) => commandPaletteScrollTop({ current, rowsLength: rows.length, listHeight, selectedRowIndex }))
 	}, [listHeight, rows.length, selectedRowIndex])
 	return (
-		<ModalFrame
+		<SearchModalFrame
 			left={offsetLeft}
 			top={offsetTop}
 			width={modalWidth}
 			height={modalHeight}
-			junctionRows={[1, modalHeight - 4]}
-			topJunctionColumns={[dividerColumn]}
+			title="Commands"
+			query={query}
+			placeholder="Search"
+			countText={countText}
+			onBodyMouseScroll={handleMouseScroll}
+			footer={<HintRow items={[{ key: "↑↓", label: "select" }, { key: "enter", label: "run" }, { key: "esc", label: "close" }]} />}
 		>
-			<PaddedRow>
-				<TextLine>
-					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{titleText}</span>
-					<span>{" ".repeat(headerGap)}</span>
-					<span fg={colors.separator}>{headerDivider}</span>
-					<span>{" ".repeat(searchGap)}</span>
-					{query.length > 0 ? (
-						<>
-							<span fg={colors.text}>{queryText}</span>
-							<span bg={colors.muted} fg={caretFg}> </span>
-							{queryPadding > 0 ? <span>{" ".repeat(queryPadding)}</span> : null}
-						</>
-					) : (
-						<>
-							<span bg={colors.muted} fg={caretFg}>{placeholder[0]}</span>
-							<span fg={colors.muted}>{fitCell(placeholder.slice(1), Math.max(0, searchWidth - 1))}</span>
-						</>
-					)}
-					{countText.length > 0 && searchWidth > placeholder.length ? (
-						<>
-							<span>{" ".repeat(countGap)}</span>
-							<span fg={colors.muted}>{countText}</span>
-						</>
-					) : null}
-				</TextLine>
-			</PaddedRow>
-			<Divider width={innerWidth} junctionAt={dividerColumn} junctionChar="┴" />
-			<box height={listHeight} flexDirection="column" onMouseScroll={handleMouseScroll}>{content}</box>
-			<Divider width={innerWidth} />
-			<PaddedRow>
-				<HintRow items={[{ key: "↑↓", label: "select" }, { key: "enter", label: "run" }, { key: "ctrl-u", label: "clear" }, { key: "ctrl-w", label: "word" }, { key: "esc", label: "close" }]} />
-			</PaddedRow>
-		</ModalFrame>
+			{content}
+		</SearchModalFrame>
 	)
 }

package/src/ui/DetailsPane.tsx

@@ -345,35 +345,43 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 
 const conversationDividerBodyRow = (pullRequest: PullRequestItem, contentWidth: number, conversationItems: readonly PullRequestConversationItem[], conversationStatus: DetailConversationStatus) => {
 	if (!pullRequest.detailLoaded) return null
-	const summaryRows = bodyPreview(pullRequest.body, contentWidth, DETAIL_BODY_SCROLL_LIMIT)
-	const conversationRows = conversationPreview({
-		items: conversationItems,
-		status: conversationStatus,
-		width: contentWidth,
-		limit: Math.max(0, DETAIL_BODY_SCROLL_LIMIT - summaryRows.length - 1),
-	})
-	return conversationRows.length > 0 ? summaryRows.length : null
+	const dividerIndex = detailBodyPreview({ pullRequest, contentWidth, limit: DETAIL_BODY_SCROLL_LIMIT, conversationItems, conversationStatus })
+		.findIndex((line) => line.divider === true)
+	return dividerIndex >= 0 ? dividerIndex : null
 }
 
-export const getDetailJunctionRows = (
-	pullRequest: PullRequestItem | null,
-	paneWidth: number,
+export const getDetailJunctionRows = ({
+	pullRequest,
+	paneWidth,
 	showChecks = false,
-	contentWidth = Math.max(1, paneWidth - 2),
-	conversationItems: readonly PullRequestConversationItem[] = [],
-	conversationStatus: DetailConversationStatus = "idle",
-): readonly number[] => {
+	contentWidth,
+	conversationItems = [],
+	conversationStatus = "idle",
+	bodyScrollTop = 0,
+	bodyViewportHeight = Number.POSITIVE_INFINITY,
+}: {
+	readonly pullRequest: PullRequestItem | null
+	readonly paneWidth: number
+	readonly showChecks?: boolean
+	readonly contentWidth?: number
+	readonly conversationItems?: readonly PullRequestConversationItem[]
+	readonly conversationStatus?: DetailConversationStatus
+	readonly bodyScrollTop?: number
+	readonly bodyViewportHeight?: number
+}): readonly number[] => {
 	if (!pullRequest) return [DETAIL_PLACEHOLDER_ROWS]
+	const resolvedContentWidth = contentWidth ?? Math.max(1, paneWidth - 2)
 	const titleLines = wrapText(pullRequest.title, Math.max(1, paneWidth - 2)).length
 	const detailDividerRow = 1 + titleLines + 1
 	const checks = deduplicateChecks(pullRequest.checks)
 	const checksDividerRow = checks.length > 0 ? detailDividerRow + 1 + checksRowCount(checks) + 1 : -1
 	const headerHeight = getDetailHeaderHeight(pullRequest, paneWidth, showChecks)
-	const conversationDivider = conversationDividerBodyRow(pullRequest, contentWidth, conversationItems, conversationStatus)
+	const conversationDivider = conversationDividerBodyRow(pullRequest, resolvedContentWidth, conversationItems, conversationStatus)
+	const visibleConversationDivider = conversationDivider === null ? null : conversationDivider - Math.max(0, Math.floor(bodyScrollTop))
 	return [
 		detailDividerRow,
 		showChecks && checks.length > 0 ? checksDividerRow : -1,
-		conversationDivider === null ? -1 : headerHeight + conversationDivider,
+		visibleConversationDivider === null || visibleConversationDivider < 0 || visibleConversationDivider >= bodyViewportHeight ? -1 : headerHeight + visibleConversationDivider,
 	].filter((row) => row >= 0)
 }
 

package/src/ui/PullRequestDiffPane.tsx

@@ -1,7 +1,7 @@
 import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/core"
 import { useMemo, type Ref } from "react"
 import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
-import { colors, type ThemeId } from "./colors.js"
+import { colors, lineNumberTextColor, type ThemeId } from "./colors.js"
 import { CommentBodyLine, commentCountText, commentMetaSegments, CommentSegmentsLine } from "./comments.js"
 import { createDiffSyntaxStyle, diffCommentAnchorLabel, diffCommentLineLabel, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileIndexAtLine, type DiffFileStats, type DiffView, type DiffWhitespaceMode, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
@@ -162,6 +162,7 @@ export const PullRequestDiffPane = ({
 		return `  ${selectedCommentLabel ?? diffCommentAnchorLabel(selectedCommentAnchor)}`
 	}
 	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
+	const diffLineNumberFg = lineNumberTextColor(colors.diff.lineNumberBg, colors.text)
 	const handleDiffMouseDown = function (this: ScrollBoxRenderable, event: MouseEvent) {
 		if (event.button !== 0) return
 		const localY = event.y - this.viewport.y
@@ -201,7 +202,7 @@ export const PullRequestDiffPane = ({
 							contextBg={colors.diff.contextBg}
 							addedSignColor={colors.status.passing}
 							removedSignColor={colors.status.failing}
-							lineNumberFg={colors.muted}
+							lineNumberFg={diffLineNumberFg}
 							lineNumberBg={colors.diff.lineNumberBg}
 							addedLineNumberBg={colors.diff.addedLineNumberBg}
 							removedLineNumberBg={colors.diff.removedLineNumberBg}

package/src/ui/PullRequestList.tsx

@@ -2,7 +2,7 @@ import { TextAttributes } from "@opentui/core"
 import type { LoadStatus, PullRequestItem } from "../domain.js"
 import { daysOpen } from "../date.js"
 import { colors } from "./colors.js"
-import { fitCell, PlainLine, SectionTitle, TextLine } from "./primitives.js"
+import { fitCell, MatchedCell, PlainLine, SectionTitle, TextLine } from "./primitives.js"
 import { pullRequestRowDisplay, repoColor, reviewIcon } from "./pullRequests.js"
 
 export type PullRequestGroups = Array<[string, PullRequestItem[]]>
@@ -37,22 +37,6 @@ const groupAgeWidth = (pullRequests: readonly PullRequestItem[]) => {
 	return Math.max(4, maxLen + 1)
 }
 
-const MatchedCell = ({ text, width, query, align = "left" }: { text: string; width: number; query: string; align?: "left" | "right" }) => {
-	const fitted = fitCell(text, width, align)
-	const needle = query.trim().toLowerCase()
-	const index = needle.length > 0 ? fitted.toLowerCase().indexOf(needle) : -1
-	if (index < 0) return <span>{fitted}</span>
-
-	const end = Math.min(fitted.length, index + needle.length)
-	return (
-		<>
-			{index > 0 ? <span>{fitted.slice(0, index)}</span> : null}
-			<span fg={colors.accent} attributes={TextAttributes.BOLD}>{fitted.slice(index, end)}</span>
-			{end < fitted.length ? <span>{fitted.slice(end)}</span> : null}
-		</>
-	)
-}
-
 const GroupTitle = ({ label, color, filterText }: { label: string; color: string; filterText: string }) => (
 	<TextLine>
 		<span fg={color}>{GROUP_ICON} </span>

package/src/ui/colors.ts

@@ -154,6 +154,13 @@ const mutedTextColor = (background: string) => {
 
 const contrastText = (background: string) => luminance(background) > 128 ? "#000000" : "#ffffff"
 
+export const lineNumberTextColor = (background: string, foreground: string) => {
+	const bg = readableHex(background, foreground)
+	const fg = readableHex(foreground, contrastText(bg))
+	const contrast = Math.abs(luminance(bg) - luminance(fg))
+	return mixHex(bg, fg, contrast < 90 ? 0.62 : 0.5)
+}
+
 const ghuiColors: ColorPalette = {
 	background: "#111018",
 	modalBackground: "#1a1a2e",