@kitlangton/ghui 0.1.17 → 0.1.19

package/src/ui/DetailsPane.tsx

@@ -298,11 +298,13 @@ export const getDetailsPaneHeight = ({
 
 export const DetailHeader = ({
 	pullRequest,
+	viewerUsername,
 	contentWidth,
 	paneWidth,
 	showChecks = false,
 }: {
 	pullRequest: PullRequestItem
+	viewerUsername: string | null
 	contentWidth: number
 	paneWidth: number
 	showChecks?: boolean
@@ -319,34 +321,31 @@ export const DetailHeader = ({
 		: "no labels".length
 	const showStats = contentWidth - labelsWidth - statsText.length >= 2
 	const statsGap = Math.max(2, contentWidth - labelsWidth - statsText.length)
+	const opened = formatRelativeDate(pullRequest.createdAt)
+	const repo = shortRepoName(pullRequest.repository)
+	const author = viewerUsername && pullRequest.author !== viewerUsername ? ` by ${pullRequest.author}` : ""
+	const number = String(pullRequest.number)
+	const review = reviewLabel(pullRequest)
+	const checks = pullRequest.checkSummary?.replace(/^checks\s+/, "")
+	const statusParts = [review, checks].filter((part): part is string => Boolean(part))
+	const rightSide = statusParts.length > 0 ? `${statusParts.join(" ")} ${opened}` : opened
+	const leftWidth = 1 + number.length + 1 + repo.length + author.length
+	const gap = Math.max(2, contentWidth - leftWidth - rightSide.length)
 
 	return (
 		<>
 			<box height={1} paddingLeft={1} paddingRight={1}>
-			{(() => {
-				const opened = formatRelativeDate(pullRequest.createdAt)
-				const repo = shortRepoName(pullRequest.repository)
-				const number = String(pullRequest.number)
-				const review = reviewLabel(pullRequest)
-				const checks = pullRequest.checkSummary?.replace(/^checks\s+/, "")
-				const statusParts = [review, checks].filter((part): part is string => Boolean(part))
-				const rightSide = statusParts.length > 0 ? `${statusParts.join(" ")} ${opened}` : opened
-				const leftWidth = 1 + number.length + 1 + repo.length
-				const gap = Math.max(2, contentWidth - leftWidth - rightSide.length)
-
-				return (
-					<TextLine>
-						<span fg={colors.count}>#{number}</span>
-						<span fg={colors.muted}> {repo}</span>
-						<span fg={colors.muted}>{" ".repeat(gap)}</span>
-						{review ? <span fg={statusColor(pullRequest.reviewStatus)}>{review}</span> : null}
-						{review && checks ? <span fg={colors.muted}> </span> : null}
-						{checks ? <span fg={statusColor(pullRequest.checkStatus)}>{checks}</span> : null}
-						{statusParts.length > 0 ? <span fg={colors.muted}> </span> : null}
-						<span fg={colors.muted}>{opened}</span>
-					</TextLine>
-				)
-			})()}
+				<TextLine>
+					<span fg={colors.count}>#{number}</span>
+					<span fg={colors.muted}> {repo}</span>
+					{author ? <span fg={colors.muted}>{author}</span> : null}
+					<span fg={colors.muted}>{" ".repeat(gap)}</span>
+					{review ? <span fg={statusColor(pullRequest.reviewStatus)}>{review}</span> : null}
+					{review && checks ? <span fg={colors.muted}> </span> : null}
+					{checks ? <span fg={statusColor(pullRequest.checkStatus)}>{checks}</span> : null}
+					{statusParts.length > 0 ? <span fg={colors.muted}> </span> : null}
+					<span fg={colors.muted}>{opened}</span>
+				</TextLine>
 			</box>
 			<box height={wrappedTitle.length} flexDirection="column" paddingLeft={1} paddingRight={1}>
 				{wrappedTitle.map((line, index) => (
@@ -482,6 +481,7 @@ export const LoadingPane = ({ content, width, height }: { content: DetailPlaceho
 
 export const DetailsPane = ({
 	pullRequest,
+	viewerUsername,
 	contentWidth,
 	bodyLines = DETAIL_BODY_LINES,
 	paneWidth = contentWidth + 2,
@@ -491,6 +491,7 @@ export const DetailsPane = ({
 	themeId,
 }: {
 	pullRequest: PullRequestItem | null
+	viewerUsername: string | null
 	contentWidth: number
 	bodyLines?: number
 	paneWidth?: number
@@ -505,7 +506,7 @@ export const DetailsPane = ({
 		<box flexDirection="column" height={contentHeight}>
 			{pullRequest ? (
 				<>
-					<DetailHeader pullRequest={pullRequest} contentWidth={contentWidth} paneWidth={paneWidth} showChecks={showChecks} />
+					<DetailHeader pullRequest={pullRequest} viewerUsername={viewerUsername} contentWidth={contentWidth} paneWidth={paneWidth} showChecks={showChecks} />
 					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} loadingIndicator={loadingIndicator} themeId={themeId} />
 				</>
 			) : (

package/src/ui/FooterHints.tsx

@@ -1,16 +1,21 @@
+import { Data } from "effect"
 import { colors } from "./colors.js"
 import { TextLine } from "./primitives.js"
 
-export interface RetryProgress {
-	readonly attempt: number
-	readonly max: number
-}
+export type RetryProgress = Data.TaggedEnum<{
+	Idle: {}
+	Retrying: { readonly attempt: number; readonly max: number }
+}>
+
+export const RetryProgress = Data.taggedEnum<RetryProgress>()
+export const initialRetryProgress: RetryProgress = RetryProgress.Idle()
 
 export const FooterHints = ({
 	filterEditing,
 	showFilterClear,
 	detailFullView,
 	diffFullView,
+	diffCommentMode,
 	hasSelection,
 	canCloseSelection,
 	hasError,
@@ -22,12 +27,13 @@ export const FooterHints = ({
 	showFilterClear: boolean
 	detailFullView: boolean
 	diffFullView: boolean
+	diffCommentMode: boolean
 	hasSelection: boolean
 	canCloseSelection: boolean
 	hasError: boolean
 	isLoading: boolean
 	loadingIndicator: string
-	retryProgress: RetryProgress | null
+	retryProgress: RetryProgress
 }) => {
 	if (filterEditing) {
 		return (
@@ -49,6 +55,28 @@ export const FooterHints = ({
 	}
 
 	if (diffFullView) {
+		if (diffCommentMode) {
+			return (
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> line  </span>
+					<span fg={colors.count}>pgup/pgdn</span>
+					<span fg={colors.muted}> jump  </span>
+					<span fg={colors.count}>←→</span>
+					<span fg={colors.muted}> side  </span>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> open  </span>
+					<span fg={colors.count}>a</span>
+					<span fg={colors.muted}> comment  </span>
+					<span fg={colors.count}>c</span>
+					<span fg={colors.muted}> done  </span>
+					<span fg={colors.count}>[]</span>
+					<span fg={colors.muted}> files  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> back</span>
+				</TextLine>
+			)
+		}
 		return (
 			<TextLine>
 				<span fg={colors.count}>esc</span>
@@ -57,6 +85,8 @@ export const FooterHints = ({
 				<span fg={colors.muted}> view  </span>
 				<span fg={colors.count}>w</span>
 				<span fg={colors.muted}> wrap  </span>
+				<span fg={colors.count}>c</span>
+				<span fg={colors.muted}> comment  </span>
 				<span fg={colors.count}>[]</span>
 				<span fg={colors.muted}> files  </span>
 				<span fg={colors.count}>r</span>
@@ -74,6 +104,30 @@ export const FooterHints = ({
 			<TextLine>
 				<span fg={colors.count}>esc</span>
 				<span fg={colors.muted}> back  </span>
+				<span fg={colors.count}>↑↓</span>
+				<span fg={colors.muted}> scroll  </span>
+				<span fg={colors.count}>r</span>
+				<span fg={colors.muted}>{hasError ? " retry  " : " refresh  "}</span>
+				<span fg={colors.count}>t</span>
+				<span fg={colors.muted}> theme  </span>
+				{hasSelection ? (
+					<>
+						<span fg={colors.count}>s</span>
+						<span fg={colors.muted}> state  </span>
+						<span fg={colors.count}>d</span>
+						<span fg={colors.muted}> diff  </span>
+						<span fg={colors.count}>l</span>
+						<span fg={colors.muted}> labels  </span>
+						<span fg={colors.count}>m</span>
+						<span fg={colors.muted}> merge  </span>
+						{canCloseSelection ? (
+							<>
+								<span fg={colors.count}>x</span>
+								<span fg={colors.muted}> close  </span>
+							</>
+						) : null}
+					</>
+				) : null}
 				<span fg={colors.count}>o</span>
 				<span fg={colors.muted}> open  </span>
 				<span fg={colors.count}>y</span>
@@ -86,6 +140,8 @@ export const FooterHints = ({
 
 	return (
 		<TextLine>
+			<span fg={colors.count}>tab</span>
+			<span fg={colors.muted}> queue  </span>
 			<span fg={colors.count}>/</span>
 			<span fg={colors.muted}> filter  </span>
 			<span fg={colors.count}>t</span>
@@ -96,7 +152,7 @@ export const FooterHints = ({
 					<span fg={colors.muted}> clear  </span>
 				</>
 			) : null}
-			{retryProgress ? (
+			{retryProgress._tag === "Retrying" ? (
 				<>
 					<span fg={colors.status.pending}>retry</span>
 					<span fg={colors.muted}> {retryProgress.attempt}/{retryProgress.max}  </span>

package/src/ui/PullRequestDiffPane.tsx

@@ -1,8 +1,8 @@
-import type { ScrollBoxRenderable } from "@opentui/core"
+import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/core"
 import { useMemo, type Ref } from "react"
-import type { PullRequestItem } from "../domain.js"
+import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { createDiffSyntaxStyle, diffStatText, patchRenderableLineCount, type PullRequestDiffState } from "./diff.js"
+import { createDiffSyntaxStyle, 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 { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
 import { shortRepoName } from "./pullRequests.js"
@@ -27,36 +27,82 @@ const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
 	)
 }
 
+const FileStats = ({ stats }: { stats: DiffFileStats }) => {
+	return (
+		<>
+			{stats.additions > 0 ? <span fg={colors.status.passing}>{`+${stats.additions}`}</span> : null}
+			{stats.additions > 0 && stats.deletions > 0 ? <span fg={colors.muted}> </span> : null}
+			{stats.deletions > 0 ? <span fg={colors.status.failing}>{`-${stats.deletions}`}</span> : null}
+		</>
+	)
+}
+
+const FileHeader = ({
+	file,
+	index,
+	count,
+	width,
+	suffix = "",
+	suffixColor = colors.muted,
+}: {
+	file: StackedDiffFilePatch["file"]
+	index: number
+	count: number
+	width: number
+	suffix?: string
+	suffixColor?: string
+}) => {
+	const counter = `${index + 1}/${count}`
+	const stats = diffFileStats(file)
+	const statsText = diffFileStatsText(stats)
+	const nameWidth = Math.max(1, width - counter.length - statsText.length - suffix.length - 5)
+	return (
+		<TextLine>
+			<span fg={colors.muted}>{counter} </span>
+			<span fg={colors.text}>{fitCell(file.name, nameWidth)}</span>
+			{statsText ? <span fg={colors.muted}>  </span> : null}
+			<FileStats stats={stats} />
+			{suffix ? <span fg={suffixColor}>{suffix}</span> : null}
+		</TextLine>
+	)
+}
+
 export const PullRequestDiffPane = ({
 	pullRequest,
 	diffState,
-	fileIndex,
+	stackedFiles,
+	scrollTop,
 	view,
 	wrapMode,
 	paneWidth,
 	height,
 	loadingIndicator,
 	scrollRef,
+	setDiffRef,
+	commentMode,
+	selectedCommentAnchor,
+	selectedCommentThread,
+	onSelectCommentLine,
 	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	diffState: PullRequestDiffState | undefined
-	fileIndex: number
-	view: "unified" | "split"
-	wrapMode: "none" | "word"
+	stackedFiles: readonly StackedDiffFilePatch[]
+	scrollTop: number
+	view: DiffView
+	wrapMode: DiffWrapMode
 	paneWidth: number
 	height: number
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
+	setDiffRef: (index: number, diff: DiffRenderable | null) => void
+	commentMode: boolean
+	selectedCommentAnchor: StackedDiffCommentAnchor | null
+	selectedCommentThread: readonly PullRequestReviewComment[]
+	onSelectCommentLine: (renderLine: number, side: DiffCommentSide | null) => void
 	themeId: ThemeId
 }) => {
-	const readyFiles = diffState?.status === "ready" ? diffState.files : []
-	const safeIndex = readyFiles.length > 0 ? Math.max(0, Math.min(fileIndex, readyFiles.length - 1)) : 0
-	const file = readyFiles[safeIndex] ?? null
-	const diffHeight = useMemo(
-		() => file ? patchRenderableLineCount(file.patch, view, wrapMode, paneWidth) : 1,
-		[file?.patch, view, wrapMode, paneWidth],
-	)
+	const readyFiles = diffState?._tag === "Ready" ? diffState.files : []
 	const syntaxStyle = useMemo(() => createDiffSyntaxStyle(), [themeId])
 
 	if (!pullRequest) {
@@ -68,7 +114,7 @@ export const PullRequestDiffPane = ({
 	const leftHeader = `#${pullRequest.number} ${shortRepoName(pullRequest.repository)}`
 	const headerGap = Math.max(2, headerWidth - leftHeader.length - stats.length)
 
-	if (!diffState || diffState.status === "loading") {
+	if (!diffState || diffState._tag === "Loading") {
 		return (
 			<box height={height} flexDirection="column">
 				<box height={1} paddingLeft={1} paddingRight={1}>
@@ -85,7 +131,7 @@ export const PullRequestDiffPane = ({
 		)
 	}
 
-	if (diffState.status === "error") {
+	if (diffState._tag === "Error") {
 		return (
 			<box height={height} flexDirection="column">
 				<box height={1} paddingLeft={1} paddingRight={1}>
@@ -97,12 +143,44 @@ export const PullRequestDiffPane = ({
 		)
 	}
 
-	if (readyFiles.length === 0 || !file) {
+	if (readyFiles.length === 0 || stackedFiles.length === 0) {
 		return <LoadingPane content={{ title: "No diff", hint: "This PR has no patch contents" }} width={paneWidth} height={height} />
 	}
 
-	const fileCounter = `${safeIndex + 1}/${readyFiles.length}`
-	const fileNameWidth = Math.max(8, headerWidth - fileCounter.length - 2)
+	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
+	const commentPeek = commentMode && selectedCommentAnchor && 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 commentPeekMeta = commentPeek && selectedCommentAnchor
+		? `${selectedSideLabel ?? "line"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}  ${commentPeek.author}  ${commentPeekCount}  enter thread  a comment`
+		: ""
+	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
+	const stickyFile = stackedDiffFileAtLine(stackedFiles, stickyScrollTop) ?? stackedFiles[0]
+	const stickyArrayIndex = stickyFile ? stackedFiles.indexOf(stickyFile) : -1
+	const incomingStickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex + 1] : undefined
+	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.fileIndex !== stackedFile?.index) return ""
+		return `  ${selectedCommentAnchor.side === "RIGHT" ? "right" : "left"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
+	}
+	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
+	const handleDiffMouseDown = function (this: ScrollBoxRenderable, event: MouseEvent) {
+		if (event.button !== 0) return
+		const localY = event.y - this.viewport.y
+		if (localY < 0 || localY >= this.viewport.height) return
+		const localX = event.x - this.viewport.x
+		const side = view === "split"
+			? localX < Math.floor(paneWidth / 2) ? "LEFT" : "RIGHT"
+			: null
+		onSelectCommentLine(Math.max(0, Math.floor(this.scrollTop + localY)), side)
+		event.preventDefault()
+		event.stopPropagation()
+	}
 
 	return (
 		<box height={height} flexDirection="column">
@@ -114,38 +192,71 @@ export const PullRequestDiffPane = ({
 					<DiffStats pullRequest={pullRequest} />
 				</TextLine>
 			</box>
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<TextLine>
-					<span fg={colors.text}>{fitCell(file.name, fileNameWidth)}</span>
-					<span fg={colors.muted}>  {fileCounter}</span>
-				</TextLine>
-			</box>
 			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focused flexGrow={1} scrollY scrollX={false}>
-				<diff
-					key={`${pullRequest.url}-${safeIndex}-${view}-${wrapMode}`}
-					diff={file.patch}
-					view={view}
-					syncScroll
-					filetype={file.filetype ?? "text"}
-					syntaxStyle={syntaxStyle}
-					showLineNumbers
-					wrapMode={wrapMode}
-					addedBg={colors.diff.addedBg}
-					removedBg={colors.diff.removedBg}
-					contextBg={colors.diff.contextBg}
-					addedSignColor={colors.status.passing}
-					removedSignColor={colors.status.failing}
-					lineNumberFg={colors.muted}
-					lineNumberBg={colors.diff.lineNumberBg}
-					addedLineNumberBg={colors.diff.addedLineNumberBg}
-					removedLineNumberBg={colors.diff.removedLineNumberBg}
-					selectionBg={colors.selectedBg}
-					selectionFg={colors.selectedText}
-					height={diffHeight}
-					style={{ flexShrink: 0 }}
-				/>
+			<scrollbox ref={scrollRef} focused={!commentMode} 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}
+						<box height={1} paddingLeft={1} paddingRight={1}>
+							<FileHeader file={stackedFile.file} index={stackedFile.index} count={readyFiles.length} width={paneWidth} />
+						</box>
+						<Divider width={paneWidth} />
+						<diff
+							ref={(diff: DiffRenderable | null) => setDiffRef(stackedFile.index, diff)}
+							diff={stackedFile.file.patch}
+							view={view}
+							syncScroll
+							filetype={stackedFile.file.filetype ?? "text"}
+							syntaxStyle={syntaxStyle}
+							showLineNumbers
+							wrapMode={wrapMode}
+							addedBg={colors.diff.addedBg}
+							removedBg={colors.diff.removedBg}
+							contextBg={colors.diff.contextBg}
+							addedSignColor={colors.status.passing}
+							removedSignColor={colors.status.failing}
+							lineNumberFg={colors.muted}
+							lineNumberBg={colors.diff.lineNumberBg}
+							addedLineNumberBg={colors.diff.addedLineNumberBg}
+							removedLineNumberBg={colors.diff.removedLineNumberBg}
+							selectionBg={colors.selectedBg}
+							selectionFg={colors.selectedText}
+							height={stackedFile.diffHeight}
+							style={{ flexShrink: 0 }}
+						/>
+					</box>
+				))}
 			</scrollbox>
+			{stickyFile ? (
+				<box position="absolute" top={2} left={0} width={paneWidth} height={2} zIndex={10} flexDirection="column" backgroundColor={colors.background}>
+					{incomingFile ? (
+						<>
+							<Divider width={paneWidth} />
+							<box height={1} paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
+								<FileHeader file={incomingFile.file} index={incomingFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(incomingFile)} suffixColor={stickyCommentColor} />
+							</box>
+						</>
+					) : (
+						<>
+							<box height={1} paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
+								<FileHeader file={stickyFile.file} index={stickyFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(stickyFile)} suffixColor={stickyCommentColor} />
+							</box>
+							<Divider width={paneWidth} />
+						</>
+					)}
+				</box>
+			) : null}
+			{commentPeek ? (
+				<>
+					<Divider width={paneWidth} />
+					<box height={1} paddingLeft={1} paddingRight={1}>
+						<PlainLine text={fitCell(commentPeekMeta, Math.max(1, paneWidth - 2))} fg={colors.count} />
+					</box>
+					<box height={1} paddingLeft={1} paddingRight={1}>
+						<PlainLine text={fitCell(commentPeekBody, Math.max(1, paneWidth - 2))} fg={colors.text} />
+					</box>
+				</>
+			) : null}
 		</box>
 	)
 }

package/src/ui/PullRequestList.tsx

@@ -1,11 +1,10 @@
 import { TextAttributes } from "@opentui/core"
-import type { PullRequestItem } from "../domain.js"
+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 { checkLabel, repoColor, reviewIcon, statusColor } from "./pullRequests.js"
 
-export type LoadStatus = "loading" | "ready" | "error"
 export type PullRequestGroups = Array<[string, PullRequestItem[]]>
 
 const GROUP_ICON = "◆"
@@ -25,10 +24,26 @@ const groupNumberWidth = (pullRequests: readonly PullRequestItem[]) => {
 	return maxLen + 1
 }
 
-const GroupTitle = ({ label, color }: { label: string; color: string }) => (
+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>
-		<span fg={color} attributes={TextAttributes.BOLD}>{label}</span>
+		<span fg={color} attributes={TextAttributes.BOLD}><MatchedCell text={label} width={label.length} query={filterText} /></span>
 	</TextLine>
 )
 
@@ -37,12 +52,14 @@ const PullRequestRow = ({
 	selected,
 	contentWidth,
 	numWidth,
+	filterText,
 	onSelect,
 }: {
 	pullRequest: PullRequestItem
 	selected: boolean
 	contentWidth: number
 	numWidth: number
+	filterText: string
 	onSelect: () => void
 }) => {
 	const isClosed = pullRequest.state === "closed"
@@ -59,13 +76,13 @@ const PullRequestRow = ({
 	const checkColor = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
 
 	return (
-		<box height={1} onMouseDown={onSelect}>
-			<TextLine fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
+		<box width={contentWidth} height={1} onMouseDown={onSelect}>
+			<TextLine width={contentWidth} fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
 				<span fg={indicatorColor}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
 				<span> </span>
-				<span fg={numberColor}>{fitCell(`#${pullRequest.number}`, numberWidth, "right")}</span>
+				<span fg={numberColor}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
 				<span> </span>
-				<span>{fitCell(pullRequest.title, titleWidth)}</span>
+				<span><MatchedCell text={pullRequest.title} width={titleWidth} query={filterText} /></span>
 				<span fg={checkColor}>{fitCell(checkText, checkWidth, "right")}</span>
 				<span fg={colors.muted}>{fitCell(ageText, ageWidth, "right")}</span>
 				{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
@@ -99,7 +116,7 @@ export const PullRequestList = ({
 	const emptyText = filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests."
 
 	return (
-		<box flexDirection="column">
+		<box width={contentWidth} flexDirection="column">
 			<SectionTitle title="PULL REQUESTS" />
 			{showFilterBar ? (
 				<TextLine>
@@ -115,7 +132,7 @@ export const PullRequestList = ({
 				const numWidth = groupNumberWidth(pullRequests)
 				return (
 					<box key={repo} flexDirection="column">
-						<GroupTitle label={repo} color={repoColor(repo)} />
+						<GroupTitle label={repo} color={repoColor(repo)} filterText={filterText} />
 						{pullRequests.map((pullRequest) => (
 							<PullRequestRow
 								key={pullRequest.url}
@@ -123,6 +140,7 @@ export const PullRequestList = ({
 								selected={pullRequest.url === selectedUrl}
 								contentWidth={contentWidth}
 								numWidth={numWidth}
+								filterText={filterText}
 								onSelect={() => onSelectPullRequest(pullRequest.url)}
 							/>
 						))}

package/src/ui/colors.ts

@@ -11,6 +11,7 @@ export type ThemeId =
 	| "monokai"
 	| "solarized-dark"
 	| "everforest"
+	| "vesper"
 	| "opencode"
 
 export interface ColorPalette {
@@ -566,6 +567,45 @@ const everforestColors: ColorPalette = {
 	},
 }
 
+const vesperColors: ColorPalette = {
+	background: "#101010",
+	modalBackground: "#1A1A1A",
+	text: "#FFFFFF",
+	muted: "#A0A0A0",
+	separator: "#282828",
+	accent: "#FFC799",
+	inlineCode: "#99FFE4",
+	error: "#FF8080",
+	selectedBg: "#232323",
+	selectedText: "#FFFFFF",
+	count: "#FFC799",
+	status: {
+		draft: "#FFC799",
+		approved: "#99FFE4",
+		changes: "#FF8080",
+		review: "#B0B0B0",
+		none: "#7E7E7E",
+		passing: "#99FFE4",
+		pending: "#FFC799",
+		failing: "#FF8080",
+	},
+	repos: {
+		opencode: "#FFC799",
+		"effect-smol": "#99FFE4",
+		"opencode-console": "#FFD1A8",
+		opencontrol: "#FFC799",
+		default: "#B0B0B0",
+	},
+	diff: {
+		addedBg: "#17312d",
+		removedBg: "#351f1f",
+		contextBg: "transparent",
+		lineNumberBg: "#101010",
+		addedLineNumberBg: "#142b28",
+		removedLineNumberBg: "#2f1c1c",
+	},
+}
+
 export const themeDefinitions: readonly ThemeDefinition[] = [
 	{ id: "ghui", name: "GHUI", description: "Warm parchment accents on a deep slate background", colors: ghuiColors },
 	{ id: "tokyo-night", name: "Tokyo Night", description: "Cool indigo surfaces with neon editor accents", colors: tokyoNightColors },
@@ -579,6 +619,7 @@ export const themeDefinitions: readonly ThemeDefinition[] = [
 	{ id: "monokai", name: "Monokai", description: "Classic dark olive with electric syntax colors", colors: monokaiColors },
 	{ id: "solarized-dark", name: "Solarized Dark", description: "Low-contrast blue-green base with calibrated accents", colors: solarizedDarkColors },
 	{ id: "everforest", name: "Everforest", description: "Soft green-gray forest tones with warm highlights", colors: everforestColors },
+	{ id: "vesper", name: "Vesper", description: "Minimal black surfaces with peach and aqua accents", colors: vesperColors },
 	{ id: "opencode", name: "OpenCode", description: "Charcoal panels with peach, violet, and blue highlights", colors: opencodeColors },
 ] as const