@kitlangton/ghui 0.1.22 → 0.2.0

package/src/ui/PullRequestDiffPane.tsx

@@ -2,7 +2,8 @@ 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, diffCommentAnchorLabel, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.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"
 import { DiffStats } from "./diffStats.js"
 import { Divider, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
@@ -65,17 +66,13 @@ 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,
 	stackedFiles,
 	scrollTop,
 	view,
+	whitespaceMode,
 	wrapMode,
 	paneWidth,
 	height,
@@ -93,6 +90,7 @@ export const PullRequestDiffPane = ({
 	stackedFiles: readonly StackedDiffFilePatch[]
 	scrollTop: number
 	view: DiffView
+	whitespaceMode: DiffWhitespaceMode
 	wrapMode: DiffWrapMode
 	paneWidth: number
 	height: number
@@ -135,22 +133,26 @@ export const PullRequestDiffPane = ({
 	}
 
 	if (readyFiles.length === 0 || stackedFiles.length === 0) {
-		return <LoadingPane content={{ title: "No diff", hint: "This PR has no patch contents" }} width={paneWidth} height={height} />
+		return <LoadingPane content={{ title: whitespaceMode === "ignore" ? "No non-whitespace diff" : "No diff", hint: whitespaceMode === "ignore" ? "Use the command palette to show whitespace changes" : "This PR has no patch contents" }} width={paneWidth} height={height} />
 	}
 
-	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
 	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 ? firstCommentBodyLine(commentPeek.body) : "(empty comment)"
 	const commentPeekMeta = commentPeek && selectedCommentAnchor
-		? `${selectedCommentLabel ?? selectedSideLabel ?? "line"}  ${commentPeek.author}  ${commentPeekCount}  enter thread`
-		: ""
+		? commentMetaSegments({
+			item: commentPeek,
+			markerLabel: diffCommentLineLabel(selectedCommentAnchor),
+			groups: [
+				[{ text: commentCountText(selectedCommentThread.length), fg: colors.muted }],
+				[{ text: "enter", fg: colors.text }, { text: " thread", fg: colors.muted }],
+			],
+		})
+		: []
 	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
-	const stickyFile = stackedDiffFileAtLine(stackedFiles, stickyScrollTop) ?? stackedFiles[0]
-	const stickyArrayIndex = stickyFile ? stackedFiles.indexOf(stickyFile) : -1
+	const stickyArrayIndex = stackedDiffFileIndexAtLine(stackedFiles, stickyScrollTop)
+	const stickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex] : stackedFiles[0]
 	const incomingStickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex + 1] : undefined
 	const incomingHeaderDistance = incomingStickyFile ? incomingStickyFile.headerLine - stickyScrollTop : Number.POSITIVE_INFINITY
 	const incomingFile = incomingHeaderDistance === 1 ? incomingStickyFile : undefined
@@ -177,7 +179,7 @@ export const PullRequestDiffPane = ({
 		<box height={height} flexDirection="column">
 			<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focused flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
+			<scrollbox ref={scrollRef} focusable={false} 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}
@@ -234,10 +236,10 @@ export const PullRequestDiffPane = ({
 				<>
 					<Divider width={paneWidth} />
 					<PaddedRow>
-						<PlainLine text={fitCell(commentPeekMeta, Math.max(1, paneWidth - 2))} fg={colors.count} />
+						<CommentSegmentsLine segments={commentPeekMeta} />
 					</PaddedRow>
 					<PaddedRow>
-						<PlainLine text={fitCell(commentPeekBody, Math.max(1, paneWidth - 2))} fg={colors.text} />
+						<CommentBodyLine body={commentPeek.body} width={Math.max(1, paneWidth - 2)} />
 					</PaddedRow>
 				</>
 			) : null}

package/src/ui/comments.tsx

@@ -0,0 +1,143 @@
+import { TextAttributes } from "@opentui/core"
+import { formatRelativeDate } from "../date.js"
+import type { DiffCommentSide } from "../domain.js"
+import { colors } from "./colors.js"
+import { fitCell, TextLine } from "./primitives.js"
+
+export interface CommentSegment {
+	readonly text: string
+	readonly fg: string
+	readonly bold?: boolean
+}
+
+export interface CommentDisplayLine {
+	readonly key: string
+	readonly segments: readonly CommentSegment[]
+}
+
+export interface CommentDisplayItem {
+	readonly id: string
+	readonly author: string
+	readonly body: string
+	readonly createdAt: Date | null
+	readonly side?: DiffCommentSide | null
+}
+
+export const commentCountText = (count: number) => count === 1 ? "1 comment" : `${count} comments`
+
+export const commentSideColor = (side: DiffCommentSide | null | undefined) =>
+	side === "LEFT" ? colors.status.failing : side === "RIGHT" ? colors.status.passing : colors.count
+
+const commentTimestamp = (date: Date | null) => {
+	if (!date) return ""
+	const ageMs = Date.now() - date.getTime()
+	const minuteMs = 60_000
+	const hourMs = 60 * minuteMs
+	if (ageMs < minuteMs) return "just now"
+	if (ageMs < hourMs) return `${Math.max(1, Math.floor(ageMs / minuteMs))}m ago`
+	if (ageMs < 24 * hourMs) return `${Math.max(1, Math.floor(ageMs / hourMs))}h ago`
+	return formatRelativeDate(date)
+}
+
+const inlineCommentSegments = (text: string, fg = colors.text): readonly CommentSegment[] =>
+	text.split(/(`[^`]+`)/g).filter((part) => part.length > 0).map((part) =>
+		part.startsWith("`") && part.endsWith("`")
+			? { text: part.slice(1, -1), fg: colors.inlineCode }
+			: { text: part, fg },
+	)
+
+const wrapCommentText = (body: string, width: number) => {
+	const safeWidth = Math.max(1, width)
+	const lines = body.trim().length === 0 ? ["(empty comment)"] : body.replace(/\r/g, "").trim().split("\n")
+	return lines.flatMap((line) => {
+		const trimmed = line.trim()
+		if (trimmed.length === 0) return []
+		const wrapped: string[] = []
+		for (let index = 0; index < trimmed.length; index += safeWidth) {
+			wrapped.push(trimmed.slice(index, index + safeWidth))
+		}
+		return wrapped
+	})
+}
+
+const appendMetaGroup = (segments: CommentSegment[], group: readonly CommentSegment[]) => {
+	if (group.length === 0) return
+	segments.push({ text: " · ", fg: colors.muted }, ...group)
+}
+
+export const commentMetaSegments = ({
+	item,
+	markerLabel,
+	groups = [],
+}: {
+	readonly item: CommentDisplayItem
+	readonly markerLabel?: string | null | undefined
+	readonly groups?: readonly (readonly CommentSegment[])[] | undefined
+}): readonly CommentSegment[] => {
+	const sideColor = commentSideColor(item.side)
+	const timestamp = commentTimestamp(item.createdAt)
+	const segments: CommentSegment[] = [
+		{ text: "•", fg: colors.count, bold: true },
+		...(markerLabel ? [{ text: ` ${markerLabel}`, fg: sideColor, bold: true }] : []),
+		{ text: " ", fg: colors.muted },
+		{ text: item.author, fg: colors.count, bold: true },
+	]
+	if (timestamp) appendMetaGroup(segments, [{ text: timestamp, fg: colors.muted }])
+	for (const group of groups) appendMetaGroup(segments, group)
+	return segments
+}
+
+export const commentBodyRows = ({
+	keyPrefix,
+	body,
+	width,
+}: {
+	readonly keyPrefix: string
+	readonly body: string
+	readonly width: number
+}): readonly CommentDisplayLine[] =>
+	wrapCommentText(body, Math.max(1, width - 2)).map((line, index) => ({
+		key: `${keyPrefix}:body:${index}`,
+		segments: [
+			{ text: "│ ", fg: colors.muted },
+			...inlineCommentSegments(line),
+		],
+	}))
+
+export const commentDisplayRows = ({
+	item,
+	width,
+	markerLabel,
+	groups,
+}: {
+	readonly item: CommentDisplayItem
+	readonly width: number
+	readonly markerLabel?: string | null | undefined
+	readonly groups?: readonly (readonly CommentSegment[])[] | undefined
+}): readonly CommentDisplayLine[] => [
+	{ key: `${item.id}:meta`, segments: commentMetaSegments({ item, markerLabel, groups }) },
+	...commentBodyRows({ keyPrefix: item.id, body: item.body, width }),
+]
+
+export const firstCommentBodyLine = (body: string) => {
+	const text = body.trim().length > 0 ? body : "(empty comment)"
+	const newlineIndex = text.indexOf("\n")
+	return (newlineIndex >= 0 ? text.slice(0, newlineIndex) : text).trim() || "(empty comment)"
+}
+
+export const CommentSegmentsLine = ({ segments }: { segments: readonly CommentSegment[] }) => (
+	<TextLine>
+		{segments.map((segment, index) => segment.bold ? (
+			<span key={index} fg={segment.fg} attributes={TextAttributes.BOLD}>{segment.text}</span>
+		) : (
+			<span key={index} fg={segment.fg}>{segment.text}</span>
+		))}
+	</TextLine>
+)
+
+export const CommentBodyLine = ({ body, width }: { body: string; width: number }) => (
+	<CommentSegmentsLine segments={[
+		{ text: "│ ", fg: colors.muted },
+		{ text: fitCell(firstCommentBodyLine(body), Math.max(1, width - 2)), fg: colors.text },
+	]} />
+)

package/src/ui/diff.ts

@@ -9,6 +9,9 @@ export type DiffView = Schema.Schema.Type<typeof DiffView>
 export const DiffWrapMode = Schema.Literals(["none", "word"])
 export type DiffWrapMode = Schema.Schema.Type<typeof DiffWrapMode>
 
+export const DiffWhitespaceMode = Schema.Literals(["ignore", "show"])
+export type DiffWhitespaceMode = Schema.Schema.Type<typeof DiffWhitespaceMode>
+
 export const DiffCommentKind = Schema.Literals(["addition", "deletion", "context"])
 export type DiffCommentKind = Schema.Schema.Type<typeof DiffCommentKind>
 
@@ -154,6 +157,153 @@ const normalizeHunkLineCounts = (patch: string) => {
 	return normalized.join("\n")
 }
 
+const whitespaceComparableText = (text: string) => text.replace(/\s+/g, "")
+const MAX_WHITESPACE_LCS_CELLS = 40_000
+
+const linearWhitespaceEquivalentMatches = (deletions: readonly string[], additions: readonly string[]) => {
+	const additionsByKey = new Map<string, number[]>()
+	const cursors = new Map<string, number>()
+	for (let index = 0; index < additions.length; index++) {
+		const key = whitespaceComparableText(additions[index]!.slice(1))
+		let bucket = additionsByKey.get(key)
+		if (!bucket) {
+			bucket = []
+			additionsByKey.set(key, bucket)
+		}
+		bucket.push(index)
+	}
+
+	const matches: Array<{ readonly oldIndex: number; readonly newIndex: number }> = []
+	let minimumNewIndex = 0
+	for (let oldIndex = 0; oldIndex < deletions.length; oldIndex++) {
+		const key = whitespaceComparableText(deletions[oldIndex]!.slice(1))
+		const candidates = additionsByKey.get(key)
+		if (!candidates) continue
+		let cursor = cursors.get(key) ?? 0
+		while (cursor < candidates.length && candidates[cursor]! < minimumNewIndex) cursor++
+		const newIndex = candidates[cursor]
+		if (newIndex === undefined) continue
+		matches.push({ oldIndex, newIndex })
+		cursors.set(key, cursor + 1)
+		minimumNewIndex = newIndex + 1
+	}
+	return matches
+}
+
+const whitespaceEquivalentMatches = (deletions: readonly string[], additions: readonly string[]) => {
+	if ((deletions.length + 1) * (additions.length + 1) > MAX_WHITESPACE_LCS_CELLS) {
+		return linearWhitespaceEquivalentMatches(deletions, additions)
+	}
+
+	const oldKeys = deletions.map((line) => whitespaceComparableText(line.slice(1)))
+	const newKeys = additions.map((line) => whitespaceComparableText(line.slice(1)))
+	const lengths = Array.from({ length: oldKeys.length + 1 }, () => Array<number>(newKeys.length + 1).fill(0))
+
+	for (let oldIndex = oldKeys.length - 1; oldIndex >= 0; oldIndex--) {
+		for (let newIndex = newKeys.length - 1; newIndex >= 0; newIndex--) {
+			lengths[oldIndex]![newIndex] = oldKeys[oldIndex] === newKeys[newIndex]
+				? lengths[oldIndex + 1]![newIndex + 1]! + 1
+				: Math.max(lengths[oldIndex + 1]![newIndex]!, lengths[oldIndex]![newIndex + 1]!)
+		}
+	}
+
+	const matches: Array<{ readonly oldIndex: number; readonly newIndex: number }> = []
+	let oldIndex = 0
+	let newIndex = 0
+	while (oldIndex < oldKeys.length && newIndex < newKeys.length) {
+		if (oldKeys[oldIndex] === newKeys[newIndex]) {
+			matches.push({ oldIndex, newIndex })
+			oldIndex++
+			newIndex++
+		} else if (lengths[oldIndex + 1]![newIndex]! >= lengths[oldIndex]![newIndex + 1]!) {
+			oldIndex++
+		} else {
+			newIndex++
+		}
+	}
+
+	return matches
+}
+
+const mergeWhitespaceEquivalentChanges = (deletions: readonly string[], additions: readonly string[]) => {
+	const matches = whitespaceEquivalentMatches(deletions, additions)
+	const merged: string[] = []
+	let oldCursor = 0
+	let newCursor = 0
+
+	for (const match of matches) {
+		while (oldCursor < match.oldIndex) merged.push(deletions[oldCursor++]!)
+		while (newCursor < match.newIndex) merged.push(additions[newCursor++]!)
+		merged.push(` ${additions[match.newIndex]!.slice(1)}`)
+		oldCursor = match.oldIndex + 1
+		newCursor = match.newIndex + 1
+	}
+
+	while (oldCursor < deletions.length) merged.push(deletions[oldCursor++]!)
+	while (newCursor < additions.length) merged.push(additions[newCursor++]!)
+	return merged
+}
+
+const minimizeWhitespaceHunk = (header: string, body: readonly string[]) => {
+	const minimized: string[] = []
+	let deletions: string[] = []
+	let additions: string[] = []
+
+	const flushChangeBlock = () => {
+		if (deletions.length === 0 && additions.length === 0) return
+		minimized.push(...mergeWhitespaceEquivalentChanges(deletions, additions))
+		deletions = []
+		additions = []
+	}
+
+	for (const line of body) {
+		const firstChar = line[0]
+		if (firstChar === "-") {
+			deletions.push(line)
+			continue
+		}
+
+		if (firstChar === "+") {
+			additions.push(line)
+			continue
+		}
+
+		flushChangeBlock()
+		minimized.push(line)
+	}
+
+	flushChangeBlock()
+	return minimized.some((line) => line[0] === "-" || line[0] === "+") ? [header, ...minimized] : []
+}
+
+export const minimizeWhitespacePatch = (patch: string) => {
+	const lines = patch.split("\n")
+	const minimized: string[] = []
+
+	for (let index = 0; index < lines.length;) {
+		const line = lines[index]!
+		if (!line.match(hunkHeaderPattern)) {
+			minimized.push(line)
+			index++
+			continue
+		}
+
+		let end = index + 1
+		while (end < lines.length && !lines[end]!.match(hunkHeaderPattern) && !lines[end]!.startsWith("diff --git ")) end++
+		minimized.push(...minimizeWhitespaceHunk(line, lines.slice(index + 1, end)))
+		index = end
+	}
+
+	return normalizeHunkLineCounts(minimized.join("\n")).trimEnd()
+}
+
+export const minimizeWhitespaceDiffFiles = (files: readonly DiffFilePatch[]): readonly DiffFilePatch[] =>
+	files.flatMap((file) => {
+		const patch = minimizeWhitespacePatch(file.patch)
+		if (file.patch.split("\n").some((line) => line.match(hunkHeaderPattern)) && !patch.split("\n").some((line) => line.match(hunkHeaderPattern))) return []
+		return [{ ...file, patch }]
+	})
+
 export const splitPatchFiles = (patch: string): readonly DiffFilePatch[] => {
 	const trimmed = patch.trimEnd()
 	if (trimmed.length === 0) return []
@@ -200,8 +350,24 @@ export const buildStackedDiffFiles = (
 	})
 }
 
+export const stackedDiffFileIndexAtLine = (stackedFiles: readonly StackedDiffFilePatch[], line: number) => {
+	let low = 0
+	let high = stackedFiles.length - 1
+	let match = -1
+	while (low <= high) {
+		const mid = (low + high) >>> 1
+		if (stackedFiles[mid]!.headerLine <= line) {
+			match = mid
+			low = mid + 1
+		} else {
+			high = mid - 1
+		}
+	}
+	return match
+}
+
 export const stackedDiffFileAtLine = (stackedFiles: readonly StackedDiffFilePatch[], line: number) =>
-	stackedFiles.reduce<StackedDiffFilePatch | undefined>((current, file) => file.headerLine <= line ? file : current, undefined)
+	stackedFiles[stackedDiffFileIndexAtLine(stackedFiles, line)]
 
 export const diffStatText = (pullRequest: PullRequestItem) => {
 	if (!pullRequest.detailLoaded) return "loading details"
@@ -212,9 +378,7 @@ export const diffStatText = (pullRequest: PullRequestItem) => {
 
 export const diffCommentLocationKey = (location: Pick<PullRequestReviewComment, "path" | "side" | "line">) => `${location.path}:${location.side}:${location.line}`
 
-export const diffCommentAnchorKey = diffCommentLocationKey
-
-export const diffCommentSideLabel = (anchor: Pick<DiffCommentAnchor, "side">) => anchor.side === "RIGHT" ? "right" : "left"
+export const diffCommentSideLabel = (anchor: Pick<DiffCommentAnchor, "side">) => anchor.side === "RIGHT" ? "→" : "←"
 
 export const diffCommentLineLabel = (anchor: Pick<DiffCommentAnchor, "side" | "line">) => `${anchor.side === "RIGHT" ? "+" : "-"}${anchor.line}`
 
@@ -250,10 +414,6 @@ export const diffFileStats = (file: DiffFilePatch): DiffFileStats => {
 	return { additions, deletions }
 }
 
-export const diffFileStatText = (file: DiffFilePatch) => {
-	return diffFileStatsText(diffFileStats(file))
-}
-
 export const diffFileStatsText = (stats: DiffFileStats) => {
 	return [
 		stats.additions > 0 ? `+${stats.additions}` : null,
@@ -353,6 +513,32 @@ export const getStackedDiffCommentAnchors = (
 		renderLine: stackedFile.diffStartLine + anchor.renderLine,
 	})))
 
+export const verticalDiffAnchor = <Anchor extends Pick<DiffCommentAnchor, "renderLine" | "side">>(
+	anchors: readonly Anchor[],
+	currentAnchor: Anchor | null,
+	delta: number,
+	preferredSide: DiffCommentSide | null = null,
+) => {
+	if (anchors.length === 0) return null
+	const rows = [...new Set(anchors.map((anchor) => anchor.renderLine))].sort((left, right) => left - right)
+	const current = currentAnchor && anchors.includes(currentAnchor) ? currentAnchor : anchors[0]!
+	const currentRowIndex = Math.max(0, rows.indexOf(current.renderLine))
+	const nextRow = rows[Math.max(0, Math.min(rows.length - 1, currentRowIndex + delta))]
+	if (nextRow === undefined) return null
+	const targetSide = preferredSide ?? current.side
+	return anchors.find((anchor) => anchor.renderLine === nextRow && anchor.side === targetSide)
+		?? anchors.find((anchor) => anchor.renderLine === nextRow)
+		?? null
+}
+
+export const diffAnchorOnSide = <Anchor extends Pick<DiffCommentAnchor, "renderLine" | "side">>(
+	anchors: readonly Anchor[],
+	currentAnchor: Anchor | null,
+	side: DiffCommentSide,
+) => currentAnchor
+	? anchors.find((anchor) => anchor.renderLine === currentAnchor.renderLine && anchor.side === side) ?? null
+	: null
+
 export const nearestDiffCommentAnchorIndex = (anchors: readonly DiffCommentAnchor[], renderLine: number) => {
 	if (anchors.length === 0) return 0
 	const nextIndex = anchors.findIndex((anchor) => anchor.renderLine >= renderLine)

package/src/ui/modals.tsx

@@ -1,9 +1,9 @@
 import { Data } from "effect"
-import { formatShortDate, formatTimestamp } from "../date.js"
 import type { PullRequestLabel, PullRequestMergeInfo, PullRequestReviewComment } from "../domain.js"
 import { availableMergeActions } from "../mergeActions.js"
 import { clampCursor, commentEditorLines, cursorLineIndexForLines } from "./commentEditor.js"
 import { colors, filterThemeDefinitions, themeDefinitions, type ThemeId } from "./colors.js"
+import { commentDisplayRows, CommentSegmentsLine, type CommentDisplayLine } from "./comments.js"
 import { centerCell, Filler, fitCell, HintRow, PlainLine, StandardModal, standardModalDims, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
 
@@ -484,41 +484,8 @@ export const CommentModal = ({
 	)
 }
 
-type CommentThreadRow = {
-	readonly key: string
-	readonly text: string
-	readonly fg: string
-	readonly bold?: boolean
-}
-
-const wrapCommentBody = (body: string, width: number) => {
-	const lines = body.length === 0 ? [""] : body.split("\n")
-	return lines.flatMap((line) => {
-		if (line.length === 0) return [""]
-		const wrapped: string[] = []
-		for (let index = 0; index < line.length; index += width) {
-			wrapped.push(line.slice(index, index + width))
-		}
-		return wrapped
-	})
-}
-
-const formatCommentDate = (date: Date | null) => date ? `${formatShortDate(date)} ${formatTimestamp(date)}` : ""
-
-const commentThreadRows = (comments: readonly PullRequestReviewComment[], width: number): readonly CommentThreadRow[] =>
-	comments.flatMap((comment, commentIndex) => {
-		const timestamp = formatCommentDate(comment.createdAt)
-		const header = timestamp ? `${comment.author}  ${timestamp}` : comment.author
-		return [
-			{ key: `${comment.id}:header`, text: header, fg: colors.count, bold: true },
-			...wrapCommentBody(comment.body, width).map((line, lineIndex) => ({
-				key: `${comment.id}:body:${lineIndex}`,
-				text: line,
-				fg: colors.text,
-			})),
-			...(commentIndex < comments.length - 1 ? [{ key: `${comment.id}:gap`, text: "", fg: colors.muted }] : []),
-		]
-	})
+const commentThreadRows = (comments: readonly PullRequestReviewComment[], width: number): readonly CommentDisplayLine[] =>
+	comments.flatMap((comment) => commentDisplayRows({ item: comment, width }))
 
 export const CommentThreadModal = ({
 	state,
@@ -559,9 +526,7 @@ export const CommentThreadModal = ({
 		>
 			{visibleRows.length === 0 ? (
 				<PlainLine text={fitCell("No comments on this line.", contentWidth)} fg={colors.muted} />
-			) : visibleRows.map((row) => (
-				<PlainLine key={row.key} text={fitCell(row.text, contentWidth)} fg={row.fg} bold={row.bold ?? false} />
-			))}
+			) : visibleRows.map((row) => <CommentSegmentsLine key={row.key} segments={row.segments} />)}
 		</StandardModal>
 	)
 }

package/src/ui/primitives.tsx

@@ -167,6 +167,7 @@ export const ModalFrame = ({
 	width,
 	height,
 	junctionRows = [],
+	topJunctionColumns = [],
 	backgroundColor = colors.modalBackground,
 }: {
 	children: React.ReactNode
@@ -175,15 +176,18 @@ export const ModalFrame = ({
 	width: number
 	height: number
 	junctionRows?: readonly number[]
+	topJunctionColumns?: readonly number[]
 	backgroundColor?: string
 }) => {
 	const innerWidth = Math.max(1, width - 2)
 	const innerHeight = Math.max(1, height - 2)
 	const junctions = new Set(junctionRows)
+	const topJunctions = new Set(topJunctionColumns)
+	const topBorder = Array.from({ length: innerWidth }, (_, index) => topJunctions.has(index) ? "┬" : "─").join("")
 
 	return (
 		<box position="absolute" left={left} top={top} width={width} height={height} flexDirection="column" backgroundColor={backgroundColor}>
-			<PlainLine text={`┌${"─".repeat(innerWidth)}┐`} fg={colors.separator} />
+			<PlainLine text={`┌${topBorder}┐`} fg={colors.separator} />
 			<box height={innerHeight} flexDirection="row">
 				<box width={1} height={innerHeight} flexDirection="column">
 					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />)}

package/src/ui/singleLineInput.ts

@@ -11,7 +11,8 @@ export const singleLineText = (text: string) => text.replace(/[\r\n]+/g, " ")
 
 export const printableKeyText = (key: Pick<SingleLineInputKey, "ctrl" | "meta" | "sequence">) => {
 	if (key.ctrl || key.meta || key.sequence.length === 0) return null
-	return /^[^\x00-\x1f\x7f]+$/.test(key.sequence) ? key.sequence : null
+	// oxlint-disable-next-line no-control-regex -- intentional: skip control characters
+	return /^[^\u0000-\u001f\u007f]+$/.test(key.sequence) ? key.sequence : null
 }
 
 export const editSingleLineInput = (value: string, key: SingleLineInputKey) => {

package/src/ui/spinner.ts

@@ -0,0 +1 @@
+export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;

package/src/keyboard/createKeymap.ts

@@ -1,25 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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: [],
-	}), [])
-}