@kitlangton/ghui 0.1.17 → 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,6 +11,7 @@ export const FooterHints = ({
 	showFilterClear,
 	detailFullView,
 	diffFullView,
+	diffCommentMode,
 	hasSelection,
 	canCloseSelection,
 	hasError,
@@ -22,6 +23,7 @@ export const FooterHints = ({
 	showFilterClear: boolean
 	detailFullView: boolean
 	diffFullView: boolean
+	diffCommentMode: boolean
 	hasSelection: boolean
 	canCloseSelection: boolean
 	hasError: boolean
@@ -49,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>
@@ -57,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>
@@ -74,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>
@@ -86,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>

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,12 +53,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"
@@ -63,9 +81,9 @@ const PullRequestRow = ({
 			<TextLine 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}
@@ -115,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
 

package/src/ui/commentEditor.ts

@@ -0,0 +1,126 @@
+export interface CommentEditorValue {
+	readonly body: string
+	readonly cursor: number
+}
+
+export interface CommentEditorLine {
+	readonly text: string
+	readonly start: number
+	readonly end: number
+}
+
+export const clampCursor = (body: string, cursor: number) => Math.max(0, Math.min(cursor, body.length))
+
+export const commentEditorLines = (body: string): readonly CommentEditorLine[] => body.split("\n").reduce<CommentEditorLine[]>((ranges, text) => {
+	const start = ranges.length === 0 ? 0 : ranges[ranges.length - 1]!.end + 1
+	ranges.push({ text, start, end: start + text.length })
+	return ranges
+}, [])
+
+export const cursorLineIndexForLines = (lines: readonly CommentEditorLine[], cursor: number) =>
+	Math.max(0, lines.findIndex((line, index) => cursor <= line.end || index === lines.length - 1))
+
+export const cursorLineIndex = (body: string, cursor: number) => {
+	const lines = commentEditorLines(body)
+	const safeCursor = clampCursor(body, cursor)
+	return cursorLineIndexForLines(lines, safeCursor)
+}
+
+export const lineStartAt = (body: string, cursor: number) => body.lastIndexOf("\n", Math.max(0, clampCursor(body, cursor) - 1)) + 1
+
+export const lineEndAt = (body: string, cursor: number) => {
+	const end = body.indexOf("\n", clampCursor(body, cursor))
+	return end === -1 ? body.length : end
+}
+
+const previousWordStart = (body: string, cursor: number) => {
+	let index = clampCursor(body, cursor)
+	while (index > 0 && /\s/.test(body[index - 1]!)) index--
+	while (index > 0 && !/\s/.test(body[index - 1]!)) index--
+	return index
+}
+
+const nextWordEnd = (body: string, cursor: number) => {
+	let index = clampCursor(body, cursor)
+	while (index < body.length && /\s/.test(body[index]!)) index++
+	while (index < body.length && !/\s/.test(body[index]!)) index++
+	return index
+}
+
+const replaceRange = (state: CommentEditorValue, start: number, end: number, text = ""): CommentEditorValue => ({
+	body: `${state.body.slice(0, start)}${text}${state.body.slice(end)}`,
+	cursor: start + text.length,
+})
+
+export const insertText = (state: CommentEditorValue, text: string): CommentEditorValue =>
+	replaceRange(state, clampCursor(state.body, state.cursor), clampCursor(state.body, state.cursor), text)
+
+export const moveLeft = (state: CommentEditorValue): CommentEditorValue => ({
+	...state,
+	cursor: Math.max(0, clampCursor(state.body, state.cursor) - 1),
+})
+
+export const moveRight = (state: CommentEditorValue): CommentEditorValue => ({
+	...state,
+	cursor: Math.min(state.body.length, clampCursor(state.body, state.cursor) + 1),
+})
+
+export const moveLineStart = (state: CommentEditorValue): CommentEditorValue => ({
+	...state,
+	cursor: lineStartAt(state.body, state.cursor),
+})
+
+export const moveLineEnd = (state: CommentEditorValue): CommentEditorValue => ({
+	...state,
+	cursor: lineEndAt(state.body, state.cursor),
+})
+
+export const moveWordBackward = (state: CommentEditorValue): CommentEditorValue => ({
+	...state,
+	cursor: previousWordStart(state.body, state.cursor),
+})
+
+export const moveWordForward = (state: CommentEditorValue): CommentEditorValue => ({
+	...state,
+	cursor: nextWordEnd(state.body, state.cursor),
+})
+
+export const moveVertically = (state: CommentEditorValue, delta: number): CommentEditorValue => {
+	const lines = commentEditorLines(state.body)
+	const safeCursor = clampCursor(state.body, state.cursor)
+	const currentLineIndex = cursorLineIndexForLines(lines, safeCursor)
+	const currentLine = lines[currentLineIndex] ?? { text: state.body, start: 0, end: state.body.length }
+	const targetLine = lines[Math.max(0, Math.min(lines.length - 1, currentLineIndex + delta))] ?? currentLine
+	const column = safeCursor - currentLine.start
+	return { ...state, cursor: Math.min(targetLine.end, targetLine.start + column) }
+}
+
+export const backspace = (state: CommentEditorValue): CommentEditorValue => {
+	const cursor = clampCursor(state.body, state.cursor)
+	return cursor === 0 ? { ...state, cursor } : replaceRange({ ...state, cursor }, cursor - 1, cursor)
+}
+
+export const deleteForward = (state: CommentEditorValue): CommentEditorValue => {
+	const cursor = clampCursor(state.body, state.cursor)
+	return cursor >= state.body.length ? { ...state, cursor } : replaceRange({ ...state, cursor }, cursor, cursor + 1)
+}
+
+export const deleteWordBackward = (state: CommentEditorValue): CommentEditorValue => {
+	const cursor = clampCursor(state.body, state.cursor)
+	return replaceRange({ ...state, cursor }, previousWordStart(state.body, cursor), cursor)
+}
+
+export const deleteWordForward = (state: CommentEditorValue): CommentEditorValue => {
+	const cursor = clampCursor(state.body, state.cursor)
+	return replaceRange({ ...state, cursor }, cursor, nextWordEnd(state.body, cursor))
+}
+
+export const deleteToLineStart = (state: CommentEditorValue): CommentEditorValue => {
+	const cursor = clampCursor(state.body, state.cursor)
+	return replaceRange({ ...state, cursor }, lineStartAt(state.body, cursor), cursor)
+}
+
+export const deleteToLineEnd = (state: CommentEditorValue): CommentEditorValue => {
+	const cursor = clampCursor(state.body, state.cursor)
+	return replaceRange({ ...state, cursor }, cursor, lineEndAt(state.body, cursor))
+}