@kitlangton/ghui 0.1.19 → 0.1.20

package/src/ui/colors.ts

@@ -1,4 +1,5 @@
 export type ThemeId =
+	| "system"
 	| "ghui"
 	| "tokyo-night"
 	| "catppuccin"
@@ -60,6 +61,99 @@ export interface ThemeDefinition {
 	readonly colors: ColorPalette
 }
 
+interface TerminalThemeColors {
+	readonly palette: readonly (string | null)[]
+	readonly defaultForeground: string | null
+	readonly defaultBackground: string | null
+	readonly highlightBackground: string | null
+	readonly highlightForeground: string | null
+}
+
+const readableHex = (value: string | null | undefined, fallback: string) =>
+	typeof value === "string" && /^#[0-9a-fA-F]{6}(?:[0-9a-fA-F]{2})?$/.test(value) ? value : fallback
+
+const hexToRgb = (hex: string) => {
+	const value = hex.replace(/^#/, "").slice(0, 6)
+	return {
+		r: parseInt(value.slice(0, 2), 16),
+		g: parseInt(value.slice(2, 4), 16),
+		b: parseInt(value.slice(4, 6), 16),
+	}
+}
+
+const luminance = (hex: string) => {
+	const { r, g, b } = hexToRgb(hex)
+	return 0.299 * r + 0.587 * g + 0.114 * b
+}
+
+const rgbToHex = ({ r, g, b }: { readonly r: number; readonly g: number; readonly b: number }) =>
+	`#${[r, g, b].map((component) => Math.max(0, Math.min(255, Math.round(component))).toString(16).padStart(2, "0")).join("")}`
+
+export const mixHex = (base: string, overlay: string, amount: number) => {
+	const from = hexToRgb(base)
+	const to = hexToRgb(overlay)
+	return rgbToHex({
+		r: from.r + (to.r - from.r) * amount,
+		g: from.g + (to.g - from.g) * amount,
+		b: from.b + (to.b - from.b) * amount,
+	})
+}
+
+const grayscaleRamp = (background: string) => {
+	const bg = hexToRgb(background)
+	const bgLum = luminance(background)
+	const isDark = bgLum < 128
+	const grays: Record<number, string> = {}
+
+	for (let i = 1; i <= 12; i++) {
+		const factor = i / 12
+		let r: number
+		let g: number
+		let b: number
+
+		if (isDark) {
+			if (bgLum < 10) {
+				const value = Math.floor(factor * 0.4 * 255)
+				r = value
+				g = value
+				b = value
+			} else {
+				const nextLum = bgLum + (255 - bgLum) * factor * 0.4
+				const ratio = nextLum / bgLum
+				r = Math.min(bg.r * ratio, 255)
+				g = Math.min(bg.g * ratio, 255)
+				b = Math.min(bg.b * ratio, 255)
+			}
+		} else if (bgLum > 245) {
+			const value = Math.floor(255 - factor * 0.4 * 255)
+			r = value
+			g = value
+			b = value
+		} else {
+			const nextLum = bgLum * (1 - factor * 0.4)
+			const ratio = nextLum / bgLum
+			r = Math.max(bg.r * ratio, 0)
+			g = Math.max(bg.g * ratio, 0)
+			b = Math.max(bg.b * ratio, 0)
+		}
+
+		grays[i] = rgbToHex({ r, g, b })
+	}
+
+	return grays
+}
+
+const mutedTextColor = (background: string) => {
+	const bgLum = luminance(background)
+	const isDark = bgLum < 128
+	const value = isDark
+		? bgLum < 10 ? 180 : Math.min(Math.floor(160 + bgLum * 0.3), 200)
+		: bgLum > 245 ? 75 : Math.max(Math.floor(100 - (255 - bgLum) * 0.2), 60)
+	return rgbToHex({ r: value, g: value, b: value })
+}
+
+const contrastText = (background: string) => luminance(background) > 128 ? "#000000" : "#ffffff"
+
 const ghuiColors: ColorPalette = {
 	background: "#111018",
 	modalBackground: "#1a1a2e",
@@ -99,6 +193,70 @@ const ghuiColors: ColorPalette = {
 	},
 }
 
+const makeSystemColors = (terminal?: TerminalThemeColors): ColorPalette => {
+	const palette = terminal?.palette ?? []
+	const terminalBackground = readableHex(terminal?.defaultBackground, readableHex(palette[0], "#000000"))
+	const text = readableHex(terminal?.defaultForeground, readableHex(palette[7], "#ffffff"))
+	const grays = grayscaleRamp(terminalBackground)
+	const isDark = luminance(terminalBackground) < 128
+	const red = readableHex(palette[1], "#cc0000")
+	const green = readableHex(palette[2], "#4e9a06")
+	const yellow = readableHex(palette[3], "#c4a000")
+	const blue = readableHex(palette[4], "#3465a4")
+	const magenta = readableHex(palette[5], "#75507b")
+	const brightBlack = readableHex(palette[8], mutedTextColor(terminalBackground))
+	const brightGreen = readableHex(palette[10], green)
+	const brightBlue = readableHex(palette[12], blue)
+	const brightMagenta = readableHex(palette[13], magenta)
+	const primary = brightBlue
+	const panel = grays[2] ?? mixHex(terminalBackground, text, isDark ? 0.07 : 0.08)
+	const element = grays[3] ?? mixHex(terminalBackground, text, isDark ? 0.1 : 0.1)
+	const border = grays[7] ?? mixHex(terminalBackground, text, isDark ? 0.24 : 0.24)
+	const borderSubtle = grays[6] ?? border
+	const diffAlpha = isDark ? 0.22 : 0.14
+
+	return {
+		background: "transparent",
+		modalBackground: panel,
+		text,
+		muted: mutedTextColor(terminalBackground),
+		separator: border,
+		accent: primary,
+		inlineCode: brightGreen,
+		error: red,
+		selectedBg: primary,
+		selectedText: contrastText(primary),
+		count: primary,
+		status: {
+			draft: yellow,
+			approved: green,
+			changes: red,
+			review: primary,
+			none: brightBlack,
+			passing: green,
+			pending: yellow,
+			failing: red,
+		},
+		repos: {
+			opencode: primary,
+			"effect-smol": green,
+			"opencode-console": brightMagenta,
+			opencontrol: yellow,
+			default: blue,
+		},
+		diff: {
+			addedBg: mixHex(terminalBackground, green, diffAlpha),
+			removedBg: mixHex(terminalBackground, red, diffAlpha),
+			contextBg: panel,
+			lineNumberBg: borderSubtle,
+			addedLineNumberBg: mixHex(element, green, diffAlpha),
+			removedLineNumberBg: mixHex(element, red, diffAlpha),
+		},
+	}
+}
+
+const systemColors: ColorPalette = makeSystemColors()
+
 const tokyoNightColors: ColorPalette = {
 	background: "#1a1b26",
 	modalBackground: "#24283b",
@@ -607,6 +765,7 @@ const vesperColors: ColorPalette = {
 }
 
 export const themeDefinitions: readonly ThemeDefinition[] = [
+	{ id: "system", name: "System", description: "Use the terminal foreground, background, and ANSI palette", colors: systemColors },
 	{ 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 },
 	{ id: "catppuccin", name: "Catppuccin", description: "Mocha lavender, peach, and soft pastel contrast", colors: catppuccinColors },
@@ -623,7 +782,7 @@ export const themeDefinitions: readonly ThemeDefinition[] = [
 	{ id: "opencode", name: "OpenCode", description: "Charcoal panels with peach, violet, and blue highlights", colors: opencodeColors },
 ] as const
 
-let activeTheme = themeDefinitions[0]!
+let activeTheme = themeDefinitions.find((theme) => theme.id === "ghui") ?? themeDefinitions[0]!
 
 export const colors: ColorPalette = { ...ghuiColors }
 
@@ -646,3 +805,10 @@ export const setActiveTheme = (id: ThemeId) => {
 	activeTheme = getThemeDefinition(id)
 	Object.assign(colors, activeTheme.colors)
 }
+
+export const setSystemThemeColors = (terminalColors: TerminalThemeColors) => {
+	Object.assign(systemColors, makeSystemColors(terminalColors))
+	if (activeTheme.id === "system") {
+		Object.assign(colors, systemColors)
+	}
+}

package/src/ui/diff.ts

@@ -1,4 +1,4 @@
-import { parseColor, SyntaxStyle } from "@opentui/core"
+import { parseColor, pathToFiletype, SyntaxStyle } from "@opentui/core"
 import { Data, Schema } from "effect"
 import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors } from "./colors.js"
@@ -73,55 +73,45 @@ export const createDiffSyntaxStyle = () => SyntaxStyle.fromStyles({
 	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 unquoteDiffPath = (path: string) => path.replace(/^"|"$/g, "").replace(/^a\//, "").replace(/^b\//, "")
+
+const readDiffPath = (value: string, start: number) => {
+	if (value[start] === '"') {
+		for (let index = start + 1; index < value.length; index++) {
+			if (value[index] === '"' && value[index - 1] !== "\\") {
+				const raw = value.slice(start, index + 1)
+				try {
+					return { path: JSON.parse(raw) as string, end: index + 1 }
+				} catch {
+					return { path: raw, end: index + 1 }
+				}
+			}
+		}
+	}
 
-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 end = value.slice(start).search(/\s/)
+	const pathEnd = end >= 0 ? start + end : value.length
+	return { path: value.slice(start, pathEnd), end: pathEnd }
 }
 
-const unquoteDiffPath = (path: string) => path.replace(/^"|"$/g, "").replace(/^a\//, "").replace(/^b\//, "")
+const parseDiffGitPaths = (line: string) => {
+	const prefix = "diff --git "
+	if (!line.startsWith(prefix)) return null
+	const left = readDiffPath(line, prefix.length)
+	const rightStart = line.slice(left.end).search(/\S/)
+	if (rightStart < 0) return null
+	const right = readDiffPath(line, left.end + rightStart)
+	return [left.path, right.path] as const
+}
 
 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]!)
+		const paths = parseDiffGitPaths(diffLine)
+		if (paths) {
+			const next = unquoteDiffPath(paths[1])
 			if (next !== "/dev/null") return next
-			return unquoteDiffPath(match[1]!)
+			return unquoteDiffPath(paths[0])
 		}
 	}
 
@@ -178,11 +168,11 @@ export const splitPatchFiles = (patch: string): readonly DiffFilePatch[] => {
 		const end = index + 1 < matches.length ? matches[index + 1]!.index ?? trimmed.length : trimmed.length
 		const filePatch = normalizeHunkLineCounts(trimmed.slice(start, end).trimEnd())
 		const name = patchFileName(filePatch)
-		return { name, filetype: filetypeForPath(name), patch: filePatch }
+		return { name, filetype: pathToFiletype(name), patch: filePatch }
 	})
 }
 
-export const pullRequestDiffKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}#${pullRequest.number}`
+export const pullRequestDiffKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}#${pullRequest.number}:${pullRequest.headRefOid}`
 
 export const safeDiffFileIndex = (files: readonly DiffFilePatch[], index: number) =>
 	files.length > 0 ? Math.max(0, Math.min(index, files.length - 1)) : 0

package/src/ui/diffStats.tsx

@@ -0,0 +1,25 @@
+import type { PullRequestItem } from "../domain.js"
+import { colors } from "./colors.js"
+
+type DiffStatsPart = { readonly key: string; readonly text: string; readonly color: string }
+
+const diffStatsParts = (pullRequest: PullRequestItem): readonly DiffStatsPart[] => {
+	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
+	return [
+		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 },
+	].filter((part): part is DiffStatsPart => part !== null)
+}
+
+export const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
+	if (!pullRequest.detailLoaded) return <span fg={colors.muted}>loading details</span>
+	const parts = diffStatsParts(pullRequest)
+	return (
+		<>
+			{parts.map((part, index) => (
+				<span key={part.key} fg={part.color}>{`${index > 0 ? " " : ""}${part.text}`}</span>
+			))}
+		</>
+	)
+}