@kitlangton/ghui 0.1.7 → 0.1.9

package/src/ui/PullRequestDiffPane.tsx

@@ -0,0 +1,148 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { useMemo, type Ref } from "react"
+import type { PullRequestItem } from "../domain.js"
+import { colors } from "./colors.js"
+import { diffStatText, diffSyntaxStyle, patchRenderableLineCount, type PullRequestDiffState } from "./diff.js"
+import { LoadingPane, StatusCard } from "./DetailsPane.js"
+import { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
+import { shortRepoName } from "./pullRequests.js"
+
+const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
+	if (!pullRequest.detailLoaded) return <span fg={colors.muted}>loading details</span>
+	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
+	type Part = { key: string; text: string; color: string }
+	const rawParts: Array<Part | null> = [
+		pullRequest.additions > 0 ? { key: "additions", text: `+${pullRequest.additions}`, color: colors.status.passing } : null,
+		pullRequest.deletions > 0 ? { key: "deletions", text: `-${pullRequest.deletions}`, color: colors.status.failing } : null,
+		{ key: "files", text: files, color: colors.muted },
+	]
+	const parts = rawParts.filter((part): part is Part => part !== null)
+
+	return (
+		<>
+			{parts.map((part, index) => (
+				<span key={part.key} fg={part.color}>{`${index > 0 ? " " : ""}${part.text}`}</span>
+			))}
+		</>
+	)
+}
+
+export const PullRequestDiffPane = ({
+	pullRequest,
+	diffState,
+	fileIndex,
+	view,
+	wrapMode,
+	paneWidth,
+	height,
+	loadingIndicator,
+	scrollRef,
+}: {
+	pullRequest: PullRequestItem | null
+	diffState: PullRequestDiffState | undefined
+	fileIndex: number
+	view: "unified" | "split"
+	wrapMode: "none" | "word"
+	paneWidth: number
+	height: number
+	loadingIndicator: string
+	scrollRef: Ref<ScrollBoxRenderable>
+}) => {
+	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],
+	)
+
+	if (!pullRequest) {
+		return <LoadingPane content={{ title: "No pull request selected", hint: "Press esc to go back" }} width={paneWidth} height={height} />
+	}
+
+	const stats = diffStatText(pullRequest)
+	const headerWidth = Math.max(24, paneWidth - 2)
+	const leftHeader = `#${pullRequest.number} ${shortRepoName(pullRequest.repository)}`
+	const headerGap = Math.max(2, headerWidth - leftHeader.length - stats.length)
+
+	if (!diffState || diffState.status === "loading") {
+		return (
+			<box height={height} flexDirection="column">
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					<TextLine>
+						<span fg={colors.count}>#{pullRequest.number}</span>
+						<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
+						<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+						<DiffStats pullRequest={pullRequest} />
+					</TextLine>
+				</box>
+				<Divider width={paneWidth} />
+				<LoadingPane content={{ title: `${loadingIndicator} Loading diff`, hint: "Fetching patch from GitHub" }} width={paneWidth} height={Math.max(1, height - 2)} />
+			</box>
+		)
+	}
+
+	if (diffState.status === "error") {
+		return (
+			<box height={height} flexDirection="column">
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					<PlainLine text={`#${pullRequest.number} ${shortRepoName(pullRequest.repository)} diff`} fg={colors.count} bold />
+				</box>
+				<Divider width={paneWidth} />
+				<StatusCard content={{ title: "Could not load diff", hint: diffState.error }} width={paneWidth} />
+			</box>
+		)
+	}
+
+	if (readyFiles.length === 0 || !file) {
+		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)
+
+	return (
+		<box height={height} flexDirection="column">
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>#{pullRequest.number}</span>
+					<span fg={colors.muted}> {shortRepoName(pullRequest.repository)}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<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={diffSyntaxStyle}
+					showLineNumbers
+					wrapMode={wrapMode}
+					addedBg="#17351f"
+					removedBg="#3a1e22"
+					contextBg="transparent"
+					addedSignColor={colors.status.passing}
+					removedSignColor={colors.status.failing}
+					lineNumberFg={colors.muted}
+					lineNumberBg="#151515"
+					addedLineNumberBg="#12301a"
+					removedLineNumberBg="#35171b"
+					selectionBg={colors.selectedBg}
+					selectionFg={colors.selectedText}
+					height={diffHeight}
+					style={{ flexShrink: 0 }}
+				/>
+			</scrollbox>
+		</box>
+	)
+}

package/src/ui/PullRequestList.tsx

@@ -0,0 +1,128 @@
+import { TextAttributes } from "@opentui/core"
+import type { 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 = "◆"
+
+const getRowLayout = (contentWidth: number, numberWidth = 6) => {
+	const reviewWidth = 1
+	const checkWidth = 6
+	const ageWidth = 4
+	const fixedWidth = reviewWidth + 1 + numberWidth + 1 + checkWidth + ageWidth
+	const titleWidth = Math.max(8, contentWidth - fixedWidth)
+	return { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth }
+}
+
+const groupNumberWidth = (pullRequests: readonly PullRequestItem[]) => {
+	if (pullRequests.length === 0) return 4
+	const maxLen = Math.max(...pullRequests.map((pr) => String(pr.number).length))
+	return maxLen + 1
+}
+
+const GroupTitle = ({ label, color }: { label: string; color: string }) => (
+	<TextLine>
+		<span fg={color}>{GROUP_ICON} </span>
+		<span fg={color} attributes={TextAttributes.BOLD}>{label}</span>
+	</TextLine>
+)
+
+const PullRequestRow = ({
+	pullRequest,
+	selected,
+	contentWidth,
+	numWidth,
+	onSelect,
+}: {
+	pullRequest: PullRequestItem
+	selected: boolean
+	contentWidth: number
+	numWidth: number
+	onSelect: () => void
+}) => {
+	const checkText = 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)
+
+	return (
+		<box height={1} onMouseDown={onSelect}>
+			<TextLine fg={selected ? colors.selectedText : colors.text} 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> </span>
+				<span>{fitCell(pullRequest.title, titleWidth)}</span>
+				<span fg={statusColor(pullRequest.checkStatus)}>{fitCell(checkText, checkWidth, "right")}</span>
+				<span fg={colors.muted}>{fitCell(ageText, ageWidth, "right")}</span>
+				{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
+			</TextLine>
+		</box>
+	)
+}
+
+export const PullRequestList = ({
+	groups,
+	selectedUrl,
+	status,
+	error,
+	contentWidth,
+	filterText,
+	showFilterBar,
+	isFilterEditing,
+	onSelectPullRequest,
+}: {
+	groups: PullRequestGroups
+	selectedUrl: string | null
+	status: LoadStatus
+	error: string | null
+	contentWidth: number
+	filterText: string
+	showFilterBar: boolean
+	isFilterEditing: boolean
+	onSelectPullRequest: (url: string) => void
+}) => {
+	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
+	const emptyText = filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests."
+
+	return (
+		<box flexDirection="column">
+			<SectionTitle title="PULL REQUESTS" />
+			{showFilterBar ? (
+				<TextLine>
+					<span fg={colors.count}>/</span>
+					<span fg={colors.muted}> </span>
+					<span fg={isFilterEditing ? colors.text : colors.count}>{filterText.length > 0 ? filterText : "type to filter..."}</span>
+				</TextLine>
+			) : null}
+			{status === "loading" && itemCount === 0 ? <PlainLine text="- Loading pull requests..." fg={colors.muted} /> : null}
+			{status === "error" ? <PlainLine text={`- ${error ?? "Could not load pull requests."}`} fg={colors.error} /> : null}
+			{status === "ready" && itemCount === 0 ? <PlainLine text={emptyText} fg={colors.muted} /> : null}
+			{groups.map(([repo, pullRequests]) => {
+				const numWidth = groupNumberWidth(pullRequests)
+				return (
+					<box key={repo} flexDirection="column">
+						<GroupTitle label={repo} color={repoColor(repo)} />
+						{pullRequests.map((pullRequest) => (
+							<PullRequestRow
+								key={pullRequest.url}
+								pullRequest={pullRequest}
+								selected={pullRequest.url === selectedUrl}
+								contentWidth={contentWidth}
+								numWidth={numWidth}
+								onSelect={() => onSelectPullRequest(pullRequest.url)}
+							/>
+						))}
+					</box>
+				)
+			})}
+		</box>
+	)
+}

package/src/ui/colors.ts

@@ -0,0 +1,28 @@
+export const colors = {
+	text: "#ede7da",
+	muted: "#9f9788",
+	separator: "#6f685d",
+	accent: "#f4a51c",
+	inlineCode: "#d7c5a1",
+	error: "#f97316",
+	selectedBg: "#1d2430",
+	selectedText: "#f8fafc",
+	count: "#d7c5a1",
+	status: {
+		draft: "#f59e0b",
+		approved: "#7dd3a3",
+		changes: "#f87171",
+		review: "#93c5fd",
+		none: "#9f9788",
+		passing: "#7dd3a3",
+		pending: "#f4a51c",
+		failing: "#f87171",
+	},
+	repos: {
+		opencode: "#60a5fa",
+		"effect-smol": "#34d399",
+		"opencode-console": "#f472b6",
+		opencontrol: "#f59e0b",
+		default: "#93c5fd",
+	},
+} as const

package/src/ui/diff.ts

@@ -0,0 +1,220 @@
+import { parseColor, SyntaxStyle } from "@opentui/core"
+import type { PullRequestItem } from "../domain.js"
+import { colors } from "./colors.js"
+
+export interface DiffFilePatch {
+	readonly name: string
+	readonly filetype: string | undefined
+	readonly patch: string
+}
+
+export type PullRequestDiffState =
+	| { readonly status: "loading" }
+	| { readonly status: "ready"; readonly patch: string; readonly files: readonly DiffFilePatch[] }
+	| { readonly status: "error"; readonly error: string }
+
+export const diffSyntaxStyle = SyntaxStyle.fromStyles({
+	keyword: { fg: parseColor("#f4a51c"), bold: true },
+	"keyword.import": { fg: parseColor("#f4a51c"), bold: true },
+	string: { fg: parseColor("#d7c5a1") },
+	comment: { fg: parseColor(colors.muted), italic: true },
+	number: { fg: parseColor("#93c5fd") },
+	boolean: { fg: parseColor("#93c5fd") },
+	constant: { fg: parseColor("#93c5fd") },
+	function: { fg: parseColor("#7dd3a3") },
+	"function.call": { fg: parseColor("#7dd3a3") },
+	constructor: { fg: parseColor("#f59e0b") },
+	type: { fg: parseColor("#f59e0b") },
+	operator: { fg: parseColor("#f87171") },
+	variable: { fg: parseColor(colors.text) },
+	property: { fg: parseColor("#93c5fd") },
+	bracket: { fg: parseColor(colors.text) },
+	punctuation: { fg: parseColor(colors.text) },
+	default: { fg: parseColor(colors.text) },
+})
+
+const extensionFiletypes: Record<string, string> = {
+	c: "c",
+	cc: "cpp",
+	cpp: "cpp",
+	cs: "csharp",
+	css: "css",
+	go: "go",
+	h: "c",
+	hpp: "cpp",
+	html: "html",
+	java: "java",
+	js: "javascript",
+	jsx: "javascript",
+	json: "json",
+	kt: "kotlin",
+	md: "markdown",
+	mjs: "javascript",
+	py: "python",
+	rs: "rust",
+	rb: "ruby",
+	sh: "bash",
+	svelte: "svelte",
+	toml: "toml",
+	ts: "typescript",
+	tsx: "typescript",
+	txt: "text",
+	vue: "vue",
+	yaml: "yaml",
+	yml: "yaml",
+	zig: "zig",
+}
+
+const filetypeForPath = (path: string) => {
+	const basename = path.split("/").at(-1) ?? path
+	if (basename === "Dockerfile") return "dockerfile"
+	const extension = basename.includes(".") ? basename.split(".").at(-1)?.toLowerCase() : undefined
+	return extension ? extensionFiletypes[extension] : undefined
+}
+
+const unquoteDiffPath = (path: string) => path.replace(/^"|"$/g, "").replace(/^a\//, "").replace(/^b\//, "")
+
+const patchFileName = (patch: string) => {
+	const diffLine = patch.split("\n").find((line) => line.startsWith("diff --git "))
+	if (diffLine) {
+		const match = diffLine.match(/^diff --git\s+(\S+)\s+(\S+)/)
+		if (match) {
+			const next = unquoteDiffPath(match[2]!)
+			if (next !== "/dev/null") return next
+			return unquoteDiffPath(match[1]!)
+		}
+	}
+
+	const nextLine = patch.split("\n").find((line) => line.startsWith("+++ "))
+	return nextLine ? unquoteDiffPath(nextLine.slice(4).trim()) : "diff"
+}
+
+export const splitPatchFiles = (patch: string): readonly DiffFilePatch[] => {
+	const trimmed = patch.trimEnd()
+	if (trimmed.length === 0) return []
+
+	const matches = [...trimmed.matchAll(/^diff --git .+$/gm)]
+	if (matches.length === 0) {
+		return [{ name: "diff", filetype: undefined, patch: trimmed }]
+	}
+
+	return matches.map((match, index) => {
+		const start = match.index ?? 0
+		const end = index + 1 < matches.length ? matches[index + 1]!.index ?? trimmed.length : trimmed.length
+		const filePatch = trimmed.slice(start, end).trimEnd()
+		const name = patchFileName(filePatch)
+		return { name, filetype: filetypeForPath(name), patch: filePatch }
+	})
+}
+
+export const pullRequestDiffKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}#${pullRequest.number}`
+
+export const diffStatText = (pullRequest: PullRequestItem) => {
+	if (!pullRequest.detailLoaded) return "loading details"
+	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
+	return [
+		pullRequest.additions > 0 ? `+${pullRequest.additions}` : null,
+		pullRequest.deletions > 0 ? `-${pullRequest.deletions}` : null,
+		files,
+	].filter((part): part is string => part !== null).join(" ")
+}
+
+const estimatedWrappedLineCount = (text: string, width: number, wrapMode: "none" | "word") => {
+	if (wrapMode === "none") return 1
+	return Math.max(1, Math.ceil(Bun.stringWidth(text) / Math.max(1, width)))
+}
+
+const patchLineNumberGutterWidth = (lines: readonly string[]) => {
+	let maxLineNumber = 1
+	let hasSigns = false
+	let oldLine = 0
+	let newLine = 0
+
+	for (const line of lines) {
+		const hunk = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/)
+		if (hunk) {
+			oldLine = Number(hunk[1])
+			newLine = Number(hunk[2])
+			maxLineNumber = Math.max(maxLineNumber, oldLine, newLine)
+			continue
+		}
+
+		const firstChar = line[0]
+		if (firstChar === "-") {
+			hasSigns = true
+			maxLineNumber = Math.max(maxLineNumber, oldLine)
+			oldLine++
+		} else if (firstChar === "+") {
+			hasSigns = true
+			maxLineNumber = Math.max(maxLineNumber, newLine)
+			newLine++
+		} else if (firstChar === " ") {
+			maxLineNumber = Math.max(maxLineNumber, oldLine, newLine)
+			oldLine++
+			newLine++
+		}
+	}
+
+	const digits = Math.floor(Math.log10(maxLineNumber)) + 1
+	return Math.max(3, digits + 2) + (hasSigns ? 2 : 0)
+}
+
+export const patchRenderableLineCount = (patch: string, view: "unified" | "split", wrapMode: "none" | "word", width: number) => {
+	const lines = patch.split("\n")
+	const lineNumberGutterWidth = patchLineNumberGutterWidth(lines)
+	const splitPaneWidth = Math.max(1, Math.floor(width / 2) - lineNumberGutterWidth)
+	const unifiedPaneWidth = Math.max(1, width - lineNumberGutterWidth)
+	const contentWidth = view === "split" ? splitPaneWidth : unifiedPaneWidth
+	let count = 0
+	let inHunk = false
+	let deletions: number[] = []
+	let additions: number[] = []
+
+	const flushChangeBlock = () => {
+		if (deletions.length === 0 && additions.length === 0) return
+		if (view === "split") {
+			const rows = Math.max(deletions.length, additions.length)
+			for (let index = 0; index < rows; index++) {
+				const deletionCount = index < deletions.length ? deletions[index]! : 1
+				const additionCount = index < additions.length ? additions[index]! : 1
+				count += Math.max(deletionCount, additionCount)
+			}
+		} else {
+			for (const deletion of deletions) count += deletion
+			for (const addition of additions) count += addition
+		}
+		deletions = []
+		additions = []
+	}
+
+	for (const line of lines) {
+		if (line.startsWith("@@")) {
+			flushChangeBlock()
+			inHunk = true
+			continue
+		}
+
+		if (!inHunk) continue
+
+		const firstChar = line[0]
+		if (firstChar === "\\") continue
+
+		if (firstChar === "-") {
+			deletions.push(estimatedWrappedLineCount(line.slice(1), contentWidth, wrapMode))
+			continue
+		}
+
+		if (firstChar === "+") {
+			additions.push(estimatedWrappedLineCount(line.slice(1), contentWidth, wrapMode))
+			continue
+		}
+
+		if (firstChar === " ") {
+			flushChangeBlock()
+			count += estimatedWrappedLineCount(line.slice(1), contentWidth, wrapMode)
+		}
+	}
+
+	flushChangeBlock()
+	return Math.max(1, count)
+}