@kitlangton/ghui 0.1.16 → 0.1.18

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

@@ -11,7 +11,9 @@ export const FooterHints = ({
 	showFilterClear,
 	detailFullView,
 	diffFullView,
+	diffCommentMode,
 	hasSelection,
+	canCloseSelection,
 	hasError,
 	isLoading,
 	loadingIndicator,
@@ -21,7 +23,9 @@ export const FooterHints = ({
 	showFilterClear: boolean
 	detailFullView: boolean
 	diffFullView: boolean
+	diffCommentMode: boolean
 	hasSelection: boolean
+	canCloseSelection: boolean
 	hasError: boolean
 	isLoading: boolean
 	loadingIndicator: string
@@ -47,6 +51,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>
@@ -55,6 +81,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>
@@ -72,6 +100,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>
@@ -84,6 +136,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>
@@ -117,6 +171,12 @@ export const FooterHints = ({
 					<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}
 					<span fg={colors.count}>o</span>
 					<span fg={colors.muted}> open  </span>
 					<span fg={colors.count}>y</span>

package/src/ui/PullRequestDiffPane.tsx

@@ -1,8 +1,8 @@
-import type { ScrollBoxRenderable } from "@opentui/core"
+import type { DiffRenderable, ScrollBoxRenderable } from "@opentui/core"
 import { useMemo, type Ref } from "react"
-import type { PullRequestItem } from "../domain.js"
+import type { PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { createDiffSyntaxStyle, diffStatText, patchRenderableLineCount, type PullRequestDiffState } from "./diff.js"
+import { createDiffSyntaxStyle, diffFileStats, diffFileStatText, diffStatText, safeDiffFileIndex, type DiffCommentAnchor, type PullRequestDiffState, 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,9 +27,35 @@ const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
 	)
 }
 
+const FileStats = ({ file }: { file: StackedDiffFilePatch["file"] }) => {
+	const stats = diffFileStats(file)
+	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 }: { file: StackedDiffFilePatch["file"]; index: number; count: number; width: number }) => {
+	const counter = `${index + 1}/${count}`
+	const statsText = diffFileStatText(file)
+	const nameWidth = Math.max(1, width - counter.length - statsText.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 file={file} />
+		</TextLine>
+	)
+}
+
 export const PullRequestDiffPane = ({
 	pullRequest,
 	diffState,
+	stackedFiles,
 	fileIndex,
 	view,
 	wrapMode,
@@ -37,10 +63,16 @@ export const PullRequestDiffPane = ({
 	height,
 	loadingIndicator,
 	scrollRef,
+	setDiffRef,
+	commentMode,
+	selectedCommentAnchor,
+	selectedCommentThread,
+	commentCount,
 	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	diffState: PullRequestDiffState | undefined
+	stackedFiles: readonly StackedDiffFilePatch[]
 	fileIndex: number
 	view: "unified" | "split"
 	wrapMode: "none" | "word"
@@ -48,15 +80,16 @@ export const PullRequestDiffPane = ({
 	height: number
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
+	setDiffRef: (index: number, diff: DiffRenderable | null) => void
+	commentMode: boolean
+	selectedCommentAnchor: DiffCommentAnchor | null
+	selectedCommentThread: readonly PullRequestReviewComment[]
+	commentCount: number
 	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 safeIndex = safeDiffFileIndex(readyFiles, fileIndex)
 	const file = readyFiles[safeIndex] ?? null
-	const diffHeight = useMemo(
-		() => file ? patchRenderableLineCount(file.patch, view, wrapMode, paneWidth) : 1,
-		[file?.patch, view, wrapMode, paneWidth],
-	)
 	const syntaxStyle = useMemo(() => createDiffSyntaxStyle(), [themeId])
 
 	if (!pullRequest) {
@@ -102,7 +135,23 @@ export const PullRequestDiffPane = ({
 	}
 
 	const fileCounter = `${safeIndex + 1}/${readyFiles.length}`
-	const fileNameWidth = Math.max(8, headerWidth - fileCounter.length - 2)
+	const currentFileStatsText = file ? diffFileStatText(file) : ""
+	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
+	const commentLabel = commentMode && selectedCommentAnchor
+		? `  ${selectedSideLabel} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
+		: commentMode ? "  c no lines" : commentCount > 0 ? `  ● ${commentCount}` : ""
+	const commentLabelColor = commentMode && selectedCommentAnchor?.side === "LEFT"
+		? colors.status.failing
+		: commentMode ? colors.status.passing : colors.status.passing
+	const fileNameWidth = Math.max(8, headerWidth - fileCounter.length - currentFileStatsText.length - commentLabel.length - 4)
+	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`
+		: ""
 
 	return (
 		<box height={height} flexDirection="column">
@@ -118,34 +167,57 @@ export const PullRequestDiffPane = ({
 				<TextLine>
 					<span fg={colors.text}>{fitCell(file.name, fileNameWidth)}</span>
 					<span fg={colors.muted}>  {fileCounter}</span>
+					{currentFileStatsText ? <span fg={colors.muted}>  </span> : null}
+					<FileStats file={file} />
+					{commentLabel ? <span fg={commentLabelColor}>{commentLabel}</span> : null}
 				</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}>
+				{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>
+			{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

@@ -25,10 +25,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,30 +53,38 @@ const PullRequestRow = ({
 	selected,
 	contentWidth,
 	numWidth,
+	filterText,
 	onSelect,
 }: {
 	pullRequest: PullRequestItem
 	selected: boolean
 	contentWidth: number
 	numWidth: number
+	filterText: string
 	onSelect: () => void
 }) => {
-	const checkText = checkLabel(pullRequest)?.replace(/^checks\s+/, "") ?? ""
+	const isClosed = pullRequest.state === "closed"
+	const isMerged = pullRequest.state === "merged"
+	const isFinal = isClosed || isMerged
+	const checkText = isMerged ? "merged" : isClosed ? "closed" : checkLabel(pullRequest)?.replace(/^checks\s+/, "") ?? ""
 	const ageText = `${daysOpen(pullRequest.createdAt)}d`
 	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth)
 	const rowWidth = reviewWidth + 1 + numberWidth + 1 + titleWidth + checkWidth + ageWidth
 	const fillerWidth = Math.max(0, contentWidth - rowWidth)
-	const indicatorColor = pullRequest.autoMergeEnabled ? colors.accent : statusColor(pullRequest.reviewStatus)
+	const indicatorColor = isMerged ? colors.status.passing : isClosed ? colors.muted : pullRequest.autoMergeEnabled ? colors.accent : statusColor(pullRequest.reviewStatus)
+	const rowTextColor = selected ? colors.selectedText : isFinal ? colors.muted : colors.text
+	const numberColor = selected ? colors.accent : isFinal ? colors.muted : colors.count
+	const checkColor = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
 
 	return (
 		<box height={1} onMouseDown={onSelect}>
-			<TextLine fg={selected ? colors.selectedText : colors.text} bg={selected ? colors.selectedBg : undefined}>
+			<TextLine fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
 				<span fg={indicatorColor}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
 				<span> </span>
-				<span fg={selected ? colors.accent : colors.count}>{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 fg={statusColor(pullRequest.checkStatus)}>{fitCell(checkText, checkWidth, "right")}</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}
 			</TextLine>
@@ -109,15 +133,16 @@ 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}
 								pullRequest={pullRequest}
-								selected={pullRequest.url === selectedUrl}
-								contentWidth={contentWidth}
-								numWidth={numWidth}
-								onSelect={() => onSelectPullRequest(pullRequest.url)}
+							selected={pullRequest.url === selectedUrl}
+							contentWidth={contentWidth}
+							numWidth={numWidth}
+							filterText={filterText}
+							onSelect={() => onSelectPullRequest(pullRequest.url)}
 							/>
 						))}
 					</box>

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