@kitlangton/ghui 0.1.20 → 0.1.22

package/src/appCommands.ts

@@ -21,7 +21,9 @@ interface AppCommandActions {
 	readonly toggleDiffRenderView: () => void
 	readonly toggleDiffWrapMode: () => void
 	readonly jumpDiffFile: (delta: 1 | -1) => void
-	readonly toggleDiffCommentMode: () => void
+	readonly openSelectedDiffComment: () => void
+	readonly toggleDiffCommentRange: () => void
+	readonly moveDiffCommentThread: (delta: 1 | -1) => void
 	readonly openDiffCommentModal: () => void
 	readonly togglePullRequestDraftStatus: () => void
 	readonly openLabelModal: () => void
@@ -50,8 +52,10 @@ interface BuildAppCommandsInput {
 	readonly diffWrapMode: DiffWrapMode
 	readonly readyDiffFileCount: number
 	readonly diffFileIndex: number
-	readonly diffCommentMode: boolean
+	readonly diffRangeActive: boolean
 	readonly selectedDiffCommentAnchorLabel: string | null
+	readonly selectedDiffCommentThreadCount: number
+	readonly hasDiffCommentThreads: boolean
 	readonly actions: AppCommandActions
 }
 
@@ -73,8 +77,10 @@ export const buildAppCommands = ({
 	diffWrapMode,
 	readyDiffFileCount,
 	diffFileIndex,
-	diffCommentMode,
+	diffRangeActive,
 	selectedDiffCommentAnchorLabel,
+	selectedDiffCommentThreadCount,
+	hasDiffCommentThreads,
 	actions,
 }: BuildAppCommandsInput): readonly AppCommand[] => {
 	const selectedPullRequestLabel = selectedPullRequest ? `#${selectedPullRequest.number} ${selectedPullRequest.repository}` : "No pull request selected"
@@ -84,6 +90,12 @@ export const buildAppCommands = ({
 		? diffReady ? null : "Load the diff before running this command."
 		: noPullRequestReason
 	const diffOpenReadyReason = diffFullView ? diffReadyReason : "Open a diff first."
+	const selectedDiffLineReason = diffFullView && diffReady
+		? selectedDiffCommentAnchorLabel ? null : "No diff line selected."
+		: diffOpenReadyReason
+	const diffThreadReason = diffFullView && diffReady
+		? hasDiffCommentThreads ? null : "No diff comments loaded."
+		: diffOpenReadyReason
 	const loadMoreDisabledReason = isLoadingMorePullRequests
 		? "Already loading more pull requests."
 		: hasMorePullRequests ? null : "No more pull requests loaded by this view."
@@ -219,7 +231,7 @@ export const buildAppCommands = ({
 			title: "Toggle diff split/unified view",
 			scope: "Diff",
 			subtitle: effectiveDiffRenderView === "split" ? "Switch to unified view" : "Switch to split view",
-			shortcut: "v",
+			shortcut: "shift-v",
 			disabledReason: diffFullView ? null : "Open a diff first.",
 			run: actions.toggleDiffRenderView,
 		}),
@@ -251,14 +263,44 @@ export const buildAppCommands = ({
 			run: () => actions.jumpDiffFile(-1),
 		}),
 		defineCommand({
-			id: "diff.comment-mode",
-			title: diffCommentMode ? "Exit diff comment mode" : "Enter diff comment mode",
+			id: "diff.open-comment-target",
+			title: selectedDiffCommentThreadCount > 0 ? "Open selected diff thread" : "Comment on selected diff line",
+			scope: "Diff",
+			subtitle: selectedDiffCommentAnchorLabel ?? "No diff line selected",
+			shortcut: "enter",
+			disabledReason: selectedDiffLineReason,
+			keywords: ["review", "comment", "thread", "line"],
+			run: actions.openSelectedDiffComment,
+		}),
+		defineCommand({
+			id: "diff.toggle-range",
+			title: diffRangeActive ? "Clear diff comment range" : "Start diff comment range",
+			scope: "Diff",
+			subtitle: selectedDiffCommentAnchorLabel ?? "No diff line selected",
+			shortcut: "v",
+			disabledReason: selectedDiffLineReason,
+			keywords: ["review", "comment", "range", "visual"],
+			run: actions.toggleDiffCommentRange,
+		}),
+		defineCommand({
+			id: "diff.next-thread",
+			title: "Next diff thread",
+			scope: "Diff",
+			subtitle: hasDiffCommentThreads ? "Jump to the next commented line" : "No diff comments loaded",
+			shortcut: "n",
+			disabledReason: diffThreadReason,
+			keywords: ["review", "comment", "thread"],
+			run: () => actions.moveDiffCommentThread(1),
+		}),
+		defineCommand({
+			id: "diff.previous-thread",
+			title: "Previous diff thread",
 			scope: "Diff",
-			subtitle: diffCommentMode ? "Return to diff scrolling" : "Choose a line to comment on",
-			shortcut: "c",
-			disabledReason: diffFullView && diffReady ? null : diffOpenReadyReason,
-			keywords: ["review", "comment", "line"],
-			run: actions.toggleDiffCommentMode,
+			subtitle: hasDiffCommentThreads ? "Jump to the previous commented line" : "No diff comments loaded",
+			shortcut: "p",
+			disabledReason: diffThreadReason,
+			keywords: ["review", "comment", "thread"],
+			run: () => actions.moveDiffCommentThread(-1),
 		}),
 		defineCommand({
 			id: "diff.add-comment",
@@ -266,7 +308,7 @@ export const buildAppCommands = ({
 			scope: "Diff",
 			subtitle: selectedDiffCommentAnchorLabel ?? "No diff line selected",
 			shortcut: "a",
-			disabledReason: diffCommentMode && selectedDiffCommentAnchorLabel ? null : "Enter diff comment mode and select a line first.",
+			disabledReason: selectedDiffLineReason,
 			keywords: ["review", "reply"],
 			run: actions.openDiffCommentModal,
 		}),

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/domain.ts

@@ -62,6 +62,8 @@ export interface CreatePullRequestCommentInput {
 	readonly path: string
 	readonly line: number
 	readonly side: DiffCommentSide
+	readonly startLine?: number
+	readonly startSide?: DiffCommentSide
 	readonly body: 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 { KeymapProvider } from "@opentui/keymap/react"
+import { createKeymap } from "./keyboard/createKeymap.js"
 
 process.env.OTUI_USE_ALTERNATE_SCREEN = "true"
 
@@ -43,8 +45,12 @@ const renderer = await createCliRenderer({
 
 process.stdout.write(FOCUS_REPORTING_ENABLE)
 
+const keymap = createKeymap(renderer)
+
 createRoot(renderer).render(
 	<RegistryProvider>
-		<App />
+		<KeymapProvider keymap={keymap}>
+			<App />
+		</KeymapProvider>
 	</RegistryProvider>,
 )

package/src/keyboard/createKeymap.ts

@@ -0,0 +1,25 @@
+import type { CliRenderer } from "@opentui/core"
+import { createDefaultOpenTuiKeymap } from "@opentui/keymap/opentui"
+
+/**
+ * Creates the OpenTUI keymap with ghui's customizations.
+ *
+ * The default emacs-style parser only treats whitespace-separated input as a
+ * sequence when at least one stroke has a "+" modifier. Prepend a parser that
+ * handles plain plain-key sequences ("g g") so vim-style multi-stroke bindings
+ * can be authored directly.
+ */
+export const createKeymap = (renderer: CliRenderer) => {
+	const keymap = createDefaultOpenTuiKeymap(renderer)
+	keymap.prependBindingParser(({ input, index, parseObjectKey }) => {
+		if (index !== 0) return undefined
+		const strokes = input.trim().split(/\s+/).filter(Boolean)
+		if (strokes.length <= 1) return undefined
+		if (strokes.some((stroke) => stroke.includes("+"))) return undefined
+		return {
+			parts: strokes.map((stroke) => parseObjectKey({ name: stroke.toLowerCase() })),
+			nextIndex: input.length,
+		}
+	})
+	return keymap
+}

package/src/keyboard/useAppCommandRegistry.ts

@@ -0,0 +1,30 @@
+import { useBindings } from "@opentui/keymap/react"
+import type { RefObject } from "react"
+import { useRef } from "react"
+import type { AppCommand } from "../commands.js"
+
+/**
+ * Registers each AppCommand under its ID as a named keymap command, so
+ * bindings can reference them by ID (`cmd: "pull.refresh"`) and the keymap's
+ * introspection (queryCommands, useActiveKeys) sees our commands.
+ *
+ * The set of IDs is captured at first render — adding to the static list
+ * later in the session would not be picked up.
+ */
+export const useAppCommandRegistry = (
+	appCommands: readonly AppCommand[],
+	runCommandByIdRef: RefObject<(id: string, options?: { readonly notifyDisabled?: boolean }) => boolean>,
+) => {
+	const idsRef = useRef(appCommands.map((command) => command.id))
+
+	useBindings(() => ({
+		commands: idsRef.current.map((id) => ({
+			name: id,
+			run: () => {
+				runCommandByIdRef.current(id)
+				return true
+			},
+		})),
+		bindings: [],
+	}), [])
+}

package/src/keyboard/useScopedBindings.ts

@@ -0,0 +1,66 @@
+import { useBindings } from "@opentui/keymap/react"
+import { useRef } from "react"
+
+export type ScopedBindingAction = (() => void) | string
+
+export interface ScopedBindingsOptions {
+	readonly when: boolean
+	readonly bindings: Readonly<Record<string, ScopedBindingAction>>
+}
+
+/**
+ * Wraps `@opentui/keymap/react`'s `useBindings` so callers don't have to write
+ * the ref dance themselves. The layer registers exactly once (deps=[]); the
+ * `when` flag and the action callbacks read latest values via refs, so the
+ * binding-shape is captured at first render but closures stay fresh.
+ *
+ * Don't change which keys you bind across renders — only what they do.
+ */
+export const useScopedBindings = ({ when, bindings }: ScopedBindingsOptions): void => {
+	const activeRef = useRef(false)
+	activeRef.current = when
+
+	const actionsRef = useRef(bindings)
+	actionsRef.current = bindings
+
+	useBindings(() => ({
+		enabled: () => activeRef.current,
+		bindings: Object.entries(bindings).map(([key, action]) => ({
+			key,
+			cmd: typeof action === "string" ? action : () => {
+				const current = actionsRef.current[key]
+				if (typeof current === "function") current()
+			},
+		})),
+	}), [])
+}
+
+/**
+ * Vim-style scroll bindings: j/k/up/down for line scroll, ctrl-u/d/v + pageup/down
+ * for half-page scroll. When `scrollTo` is given, also adds home/end and gg/G to
+ * jump to start/end.
+ */
+export const scrollBindings = (
+	scrollBy: (delta: number) => void,
+	halfPage: number,
+	scrollTo?: (y: number) => void,
+): Record<string, ScopedBindingAction> => {
+	const bindings: Record<string, ScopedBindingAction> = {
+		up: () => scrollBy(-1),
+		k: () => scrollBy(-1),
+		down: () => scrollBy(1),
+		j: () => scrollBy(1),
+		pageup: () => scrollBy(-halfPage),
+		pagedown: () => scrollBy(halfPage),
+		"ctrl+u": () => scrollBy(-halfPage),
+		"ctrl+d": () => scrollBy(halfPage),
+		"ctrl+v": () => scrollBy(halfPage),
+	}
+	if (scrollTo) {
+		bindings.home = () => scrollTo(0)
+		bindings.end = () => scrollTo(Number.MAX_SAFE_INTEGER)
+		bindings["g g"] = () => scrollTo(0)
+		bindings["shift+g"] = () => scrollTo(Number.MAX_SAFE_INTEGER)
+	}
+	return bindings
+}

package/src/services/GitHubService.ts

@@ -663,6 +663,7 @@ export class GitHubService extends Context.Service<GitHubService, {
 					"-f", `path=${input.path}`,
 					"-F", `line=${input.line}`,
 					"-f", `side=${input.side}`,
+					...(input.startLine === undefined ? [] : ["-F", `start_line=${input.startLine}`, "-f", `start_side=${input.startSide ?? input.side}`]),
 				])
 				return parsePullRequestComment(response) ?? fallbackCreatedComment(input)
 			})

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
 		}
@@ -78,8 +80,9 @@ 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 queryText = query.length > 0 ? query : "type a command, state, or shortcut"
-	const queryWidth = Math.max(1, contentWidth - 2)
+	const queryWidth = Math.max(1, contentWidth)
+	const placeholder = "Search word"
+	const queryText = trimCell(query, Math.max(0, queryWidth - 1))
 	const emptyTopRows = Math.max(0, Math.floor((listHeight - 1) / 2))
 	const emptyBottomRows = Math.max(0, listHeight - emptyTopRows - 1)
 	useEffect(() => {
@@ -92,12 +95,21 @@ export const CommandPalette = ({
 			top={offsetTop}
 			width={modalWidth}
 			height={modalHeight}
-			title="Command Palette"
+			title="Commands"
 			headerRight={{ text: countText }}
 			subtitle={
 				<TextLine>
-					<span fg={colors.count}>› </span>
-					<span fg={query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
+					{query.length > 0 ? (
+						<>
+							<span fg={colors.text}>{queryText}</span>
+							<span bg={colors.accent} fg={colors.background}> </span>
+						</>
+					) : (
+						<>
+							<span bg={colors.accent} fg={colors.background}>{placeholder[0]}</span>
+							<span fg={colors.muted}>{fitCell(placeholder.slice(1), Math.max(0, queryWidth - 1))}</span>
+						</>
+					)}
 				</TextLine>
 			}
 			footer={<HintRow items={[{ key: "↑↓", label: "select" }, { key: "enter", label: "run" }, { key: "ctrl-u", label: "clear" }, { key: "ctrl-w", label: "word" }, { key: "esc", label: "close" }]} />}
@@ -112,24 +124,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>

package/src/ui/DetailsPane.tsx

@@ -26,6 +26,9 @@ export const DETAIL_PLACEHOLDER_ROWS = 4
 export const DETAIL_BODY_SCROLL_LIMIT = 1_000
 
 const pullRequestReferencePattern = /(#[0-9]+)/g
+const codeFencePattern = /^```\s*([a-zA-Z0-9_-]+)?/
+const codeTokenPattern = /(\/\/.*|`(?:\\.|[^`])*`|"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|\b(?:async|await|break|case|catch|class|const|continue|default|else|export|extends|finally|for|from|function|if|import|interface|let|new|return|switch|throw|try|type|var|while|yield)\b|\b(?:true|false|null|undefined)\b|\b\d+(?:\.\d+)?\b)/g
+const codeFenceLine = (line: string) => line.trim().replace(/\\`/g, "`").match(codeFencePattern)
 
 export const wrapText = (text: string, width: number): string[] => {
 	if (text.length === 0 || width <= 0) return [""]
@@ -63,6 +66,29 @@ const parseInlineSegments = (text: string, fg: string, bold = false): PreviewLin
 	})
 }
 
+const parseCodeSegments = (text: string): PreviewLine["segments"] => {
+	const segments: Array<PreviewLine["segments"][number]> = []
+	let index = 0
+	for (const match of text.matchAll(codeTokenPattern)) {
+		const start = match.index ?? 0
+		if (start > index) segments.push({ text: text.slice(index, start), fg: colors.text })
+		const token = match[0]
+		const fg = token.startsWith("//")
+			? colors.muted
+			: token.startsWith("`") || token.startsWith("\"") || token.startsWith("'")
+				? colors.inlineCode
+				: /^\d/.test(token)
+					? colors.status.review
+					: token === "true" || token === "false" || token === "null" || token === "undefined"
+						? colors.status.review
+						: colors.accent
+		segments.push({ text: token, fg, bold: fg === colors.accent })
+		index = start + token.length
+	}
+	if (index < text.length) segments.push({ text: text.slice(index), fg: colors.text })
+	return segments.length > 0 ? segments : [{ text: "", fg: colors.muted }]
+}
+
 const wrapPreviewSegments = (segments: PreviewLine["segments"], width: number, indent = ""): Array<PreviewLine> => {
 	const tokens = segments.flatMap((segment) =>
 		segment.text.split(/(\s+)/).filter((token) => token.length > 0).map((token) => ({ ...segment, text: token })),
@@ -102,11 +128,13 @@ const bodyPreview = (body: string, width: number, limit = DETAIL_BODY_LINES): Ar
 	for (const rawLine of sourceLines) {
 		if (preview.length >= limit) break
 
-		const line = rawLine.trim()
-		if (line.startsWith("```")) {
+		const fence = codeFenceLine(rawLine)
+		if (fence) {
 			inCodeBlock = !inCodeBlock
 			continue
 		}
+
+		const line = inCodeBlock ? rawLine.replace(/\t/g, "  ") : rawLine.trim()
 		if (line.length === 0) continue
 
 		let text = line
@@ -142,11 +170,9 @@ const bodyPreview = (body: string, width: number, limit = DETAIL_BODY_LINES): Ar
 			text = `> ${line.replace(/^>\s+/, "")}`
 			fg = colors.muted
 			indent = "  "
-		} else if (inCodeBlock) {
-			fg = colors.muted
 		}
 
-		const wrapped = wrapPreviewSegments(parseInlineSegments(text, fg, bold), Math.max(16, width), indent)
+		const wrapped = wrapPreviewSegments(inCodeBlock ? parseCodeSegments(text) : parseInlineSegments(text, fg, bold), Math.max(16, width), indent)
 		for (const wrappedLine of wrapped) {
 			preview.push(wrappedLine)
 			if (preview.length >= limit) break
@@ -204,9 +230,10 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 	const unique = deduplicateChecks(checks)
 	if (unique.length === 0) return null
 
-	const colWidth = Math.floor((contentWidth - 1) / 2)
+	const columns = 2
+	const colWidth = Math.floor((contentWidth - 1) / columns)
 	const nameCol = Math.max(4, colWidth - 2)
-	const rows = Math.ceil(unique.length / 2)
+	const rows = Math.ceil(unique.length / columns)
 
 	return (
 		<box flexDirection="column">
@@ -214,23 +241,22 @@ const ChecksSection = ({ checks, contentWidth }: { checks: readonly CheckItem[];
 				<span fg={colors.count} attributes={TextAttributes.BOLD}>Checks</span>
 			</TextLine>
 			{Array.from({ length: rows }, (_, rowIndex) => {
-				const left = unique[rowIndex * 2]
-				const right = unique[rowIndex * 2 + 1]
 				return (
 					<TextLine key={rowIndex}>
-						{left ? (
-							<>
-								<span fg={checkColor(left)}>{checkIcon(left)} </span>
-								<span fg={colors.text}>{fitCell(left.name, nameCol)}</span>
-							</>
-						) : null}
-						{right ? (
-							<>
-								<span fg={colors.muted}> </span>
-								<span fg={checkColor(right)}>{checkIcon(right)} </span>
-								<span fg={colors.text}>{right.name}</span>
-							</>
-						) : null}
+						{Array.from({ length: columns }, (_, columnIndex) => {
+							const check = unique[rowIndex * columns + columnIndex]
+							return (
+								<Fragment key={columnIndex}>
+									{columnIndex > 0 ? <span fg={colors.muted}> </span> : null}
+									{check ? (
+										<>
+											<span fg={checkColor(check)}>{checkIcon(check)} </span>
+											<span fg={colors.text}>{fitCell(check.name, nameCol)}</span>
+										</>
+									) : <span>{" ".repeat(colWidth)}</span>}
+								</Fragment>
+							)
+						})}
 					</TextLine>
 				)
 			})}

package/src/ui/FooterHints.tsx

@@ -15,7 +15,7 @@ interface HintsContext {
 	readonly showFilterClear: boolean
 	readonly detailFullView: boolean
 	readonly diffFullView: boolean
-	readonly diffCommentMode: boolean
+	readonly diffRangeActive: boolean
 	readonly hasSelection: boolean
 	readonly canCloseSelection: boolean
 	readonly hasError: boolean
@@ -33,26 +33,17 @@ const filterEditingHints: readonly HintItem[] = [
 	{ key: "ctrl-w", label: "word" },
 ]
 
-const diffCommentModeHints: readonly HintItem[] = [
-	{ key: "↑↓", label: "line" },
-	{ key: "pgup/pgdn", label: "jump" },
-	{ key: "←→", label: "side" },
-	{ key: "enter", label: "open" },
-	{ key: "a", label: "comment" },
-	{ key: "c", label: "done" },
-	{ key: "[]", label: "files" },
-	{ key: "esc", label: "back" },
-]
-
-const diffViewHints: readonly HintItem[] = [
+const diffViewHints = (ctx: HintsContext): readonly HintItem[] => [
 	{ key: "esc", label: "back" },
-	{ key: "v", label: "view" },
-	{ key: "w", label: "wrap" },
-	{ key: "c", label: "comment" },
+	{ key: "↑↓", label: ctx.diffRangeActive ? "range" : "line" },
+	{ key: "enter", label: ctx.diffRangeActive ? "comment" : "open" },
+	{ key: "v", label: ctx.diffRangeActive ? "clear" : "range" },
+	{ key: "n/p", label: "threads" },
 	{ key: "[]", label: "files" },
+	{ key: "V", label: "view" },
+	{ key: "w", label: "wrap" },
 	{ key: "r", label: "reload" },
 	{ key: "o", label: "open" },
-	{ key: "q", label: "quit" },
 ]
 
 const detailFullViewHints = (ctx: HintsContext): readonly HintItem[] => [
@@ -91,7 +82,7 @@ const defaultHints = (ctx: HintsContext): readonly HintItem[] => {
 
 const footerHints = (ctx: HintsContext): readonly HintItem[] => {
 	if (ctx.filterEditing) return filterEditingHints
-	if (ctx.diffFullView) return ctx.diffCommentMode ? diffCommentModeHints : diffViewHints
+	if (ctx.diffFullView) return diffViewHints(ctx)
 	if (ctx.detailFullView) return detailFullViewHints(ctx)
 	return defaultHints(ctx)
 }

package/src/ui/PullRequestDiffPane.tsx

@@ -2,7 +2,7 @@ import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/c
 import { useMemo, type Ref } from "react"
 import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { createDiffSyntaxStyle, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
+import { createDiffSyntaxStyle, diffCommentAnchorLabel, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
 import { DiffStats } from "./diffStats.js"
 import { Divider, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
@@ -65,6 +65,11 @@ const FileHeader = ({
 	)
 }
 
+const firstCommentBodyLine = (body: string) => {
+	const newlineIndex = body.indexOf("\n")
+	return (newlineIndex >= 0 ? body.slice(0, newlineIndex) : body).trim() || "(empty comment)"
+}
+
 export const PullRequestDiffPane = ({
 	pullRequest,
 	diffState,
@@ -77,8 +82,8 @@ export const PullRequestDiffPane = ({
 	loadingIndicator,
 	scrollRef,
 	setDiffRef,
-	commentMode,
 	selectedCommentAnchor,
+	selectedCommentLabel,
 	selectedCommentThread,
 	onSelectCommentLine,
 	themeId,
@@ -94,8 +99,8 @@ export const PullRequestDiffPane = ({
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
 	setDiffRef: (index: number, diff: DiffRenderable | null) => void
-	commentMode: boolean
 	selectedCommentAnchor: StackedDiffCommentAnchor | null
+	selectedCommentLabel: string | null
 	selectedCommentThread: readonly PullRequestReviewComment[]
 	onSelectCommentLine: (renderLine: number, side: DiffCommentSide | null) => void
 	themeId: ThemeId
@@ -134,13 +139,14 @@ export const PullRequestDiffPane = ({
 	}
 
 	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
-	const commentPeek = commentMode && selectedCommentAnchor && selectedCommentThread.length > 0
+	const hasSelectedCommentAnchor = selectedCommentAnchor !== null
+	const commentPeek = hasSelectedCommentAnchor && selectedCommentThread.length > 0
 		? selectedCommentThread[selectedCommentThread.length - 1]!
 		: null
 	const commentPeekCount = selectedCommentThread.length === 1 ? "1 comment" : `${selectedCommentThread.length} comments`
-	const commentPeekBody = commentPeek?.body.split("\n")[0]?.trim() || "(empty comment)"
+	const commentPeekBody = commentPeek ? firstCommentBodyLine(commentPeek.body) : "(empty comment)"
 	const commentPeekMeta = commentPeek && selectedCommentAnchor
-		? `${selectedSideLabel ?? "line"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}  ${commentPeek.author}  ${commentPeekCount}  enter thread  a comment`
+		? `${selectedCommentLabel ?? selectedSideLabel ?? "line"}  ${commentPeek.author}  ${commentPeekCount}  enter thread`
 		: ""
 	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
 	const stickyFile = stackedDiffFileAtLine(stackedFiles, stickyScrollTop) ?? stackedFiles[0]
@@ -149,10 +155,9 @@ export const PullRequestDiffPane = ({
 	const incomingHeaderDistance = incomingStickyFile ? incomingStickyFile.headerLine - stickyScrollTop : Number.POSITIVE_INFINITY
 	const incomingFile = incomingHeaderDistance === 1 ? incomingStickyFile : undefined
 	const stickyCommentLabelFor = (stackedFile: StackedDiffFilePatch | undefined) => {
-		if (!commentMode) return ""
-		if (!selectedCommentAnchor) return "  c no lines"
+		if (!selectedCommentAnchor) return "  no lines"
 		if (selectedCommentAnchor.fileIndex !== stackedFile?.index) return ""
-		return `  ${selectedCommentAnchor.side === "RIGHT" ? "right" : "left"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
+		return `  ${selectedCommentLabel ?? diffCommentAnchorLabel(selectedCommentAnchor)}`
 	}
 	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
 	const handleDiffMouseDown = function (this: ScrollBoxRenderable, event: MouseEvent) {
@@ -172,7 +177,7 @@ export const PullRequestDiffPane = ({
 		<box height={height} flexDirection="column">
 			<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focused={!commentMode} flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
+			<scrollbox ref={scrollRef} focused flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
 				{stackedFiles.map((stackedFile) => (
 					<box key={`${pullRequest.url}-${stackedFile.index}-${view}-${wrapMode}`} flexDirection="column" flexShrink={0}>
 						{stackedFile.index > 0 ? <Divider width={paneWidth} /> : null}