@kitlangton/ghui 0.1.6 → 0.1.8

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)
+}

package/src/ui/modals.tsx

@@ -0,0 +1,294 @@
+import { TextAttributes } from "@opentui/core"
+import type { PullRequestLabel, PullRequestMergeAction, PullRequestMergeInfo } from "../domain.js"
+import { colors } from "./colors.js"
+import { centerCell, Divider, fitCell, ModalFrame, PlainLine, TextLine } from "./primitives.js"
+import { labelColor, shortRepoName } from "./pullRequests.js"
+
+export interface LabelModalState {
+	readonly open: boolean
+	readonly repository: string | null
+	readonly query: string
+	readonly selectedIndex: number
+	readonly availableLabels: readonly PullRequestLabel[]
+	readonly loading: boolean
+}
+
+export interface MergeModalState {
+	readonly open: boolean
+	readonly repository: string | null
+	readonly number: number | null
+	readonly selectedIndex: number
+	readonly loading: boolean
+	readonly running: boolean
+	readonly info: PullRequestMergeInfo | null
+	readonly error: string | null
+}
+
+interface MergeModalOption {
+	readonly action: PullRequestMergeAction
+	readonly title: string
+	readonly description: string
+	readonly danger?: boolean
+}
+
+export const initialLabelModalState: LabelModalState = {
+	open: false,
+	repository: null,
+	query: "",
+	selectedIndex: 0,
+	availableLabels: [],
+	loading: false,
+}
+
+export const initialMergeModalState: MergeModalState = {
+	open: false,
+	repository: null,
+	number: null,
+	selectedIndex: 0,
+	loading: false,
+	running: false,
+	info: null,
+	error: null,
+}
+
+const isCleanlyMergeable = (info: PullRequestMergeInfo) =>
+	info.state === "open" &&
+	!info.isDraft &&
+	info.mergeable === "mergeable" &&
+	info.reviewStatus !== "changes" &&
+	info.reviewStatus !== "review" &&
+	info.checkStatus !== "pending" &&
+	info.checkStatus !== "failing"
+
+export const mergeModalOptions = (info: PullRequestMergeInfo | null): readonly MergeModalOption[] => {
+	if (!info || info.state !== "open") return []
+	const options: MergeModalOption[] = []
+
+	if (isCleanlyMergeable(info)) {
+		options.push({
+			action: "squash",
+			title: "Squash merge now",
+			description: "Merge this pull request and delete the branch.",
+		})
+	}
+
+	if (!info.autoMergeEnabled && !info.isDraft && info.mergeable !== "conflicting") {
+		options.push({
+			action: "auto",
+			title: "Enable auto-merge",
+			description: "Squash merge automatically after GitHub requirements pass.",
+		})
+	}
+
+	if (info.autoMergeEnabled) {
+		options.push({
+			action: "disable-auto",
+			title: "Disable auto-merge",
+			description: "Cancel the pending GitHub auto-merge request.",
+		})
+	}
+
+	if (!info.isDraft && info.mergeable !== "conflicting") {
+		options.push({
+			action: "admin",
+			title: "Admin override merge",
+			description: "Bypass unmet merge requirements with --admin.",
+			danger: true,
+		})
+	}
+
+	return options
+}
+
+const mergeUnavailableReason = (info: PullRequestMergeInfo | null) => {
+	if (!info) return "Loading merge status from GitHub."
+	if (info.state !== "open") return "This pull request is not open."
+	if (info.isDraft) return "Draft pull requests cannot be merged."
+	if (info.mergeable === "conflicting") return "This branch has merge conflicts."
+	return "No merge actions are currently available."
+}
+
+export const mergeActionPastTense = (action: PullRequestMergeAction) => {
+	if (action === "auto") return "Enabled auto-merge"
+	if (action === "disable-auto") return "Disabled auto-merge"
+	if (action === "admin") return "Admin merged"
+	return "Merged"
+}
+
+export const LabelModal = ({
+	state,
+	currentLabels,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+	loadingIndicator,
+}: {
+	state: LabelModalState
+	currentLabels: readonly PullRequestLabel[]
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+	loadingIndicator: string
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const currentNames = new Set(currentLabels.map((l) => l.name.toLowerCase()))
+	const filtered = state.availableLabels.filter((label) =>
+		state.query.length === 0 || label.name.toLowerCase().includes(state.query.toLowerCase()),
+	)
+	const maxVisible = Math.max(1, modalHeight - 8)
+	const selectedIndex = filtered.length === 0 ? 0 : Math.max(0, Math.min(state.selectedIndex, filtered.length - 1))
+	const scrollStart = Math.min(
+		Math.max(0, filtered.length - maxVisible),
+		Math.max(0, selectedIndex - maxVisible + 1),
+	)
+	const visibleLabels = filtered.slice(scrollStart, scrollStart + maxVisible)
+	const title = state.repository ? `Labels  ${shortRepoName(state.repository)}` : "Labels"
+	const countText = state.loading ? "loading" : `${filtered.length}/${state.availableLabels.length}`
+	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
+	const queryText = state.query.length > 0 ? state.query : "type to filter labels"
+	const queryPrefix = state.query.length > 0 ? "/ " : "/ "
+	const queryWidth = Math.max(1, contentWidth - queryPrefix.length)
+
+	return (
+		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{title}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={colors.muted}>{countText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>{queryPrefix}</span>
+					<span fg={state.query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
+				</TextLine>
+			</box>
+			<Divider width={innerWidth} />
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{state.loading ? (
+					<PlainLine text={centerCell(`${loadingIndicator} Loading labels`, contentWidth)} fg={colors.muted} />
+				) : visibleLabels.length === 0 ? (
+					<PlainLine text={centerCell(state.query.length > 0 ? "No matching labels" : "No labels found", contentWidth)} fg={colors.muted} />
+				) : (
+					visibleLabels.map((label, index) => {
+						const actualIndex = scrollStart + index
+						const isActive = currentNames.has(label.name.toLowerCase())
+						const isSelected = actualIndex === selectedIndex
+						const marker = isActive ? "✓" : " "
+						const nameWidth = Math.max(1, contentWidth - 5)
+						return (
+							<box key={label.name} height={1}>
+								<TextLine bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+									<span fg={isActive ? colors.status.passing : colors.muted}>{marker}</span>
+									<span> </span>
+									<span bg={labelColor(label)}>  </span>
+									<span> {fitCell(label.name, nameWidth)}</span>
+								</TextLine>
+							</box>
+						)
+					})
+				)}
+			</box>
+			<box flexGrow={1} />
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> move  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> close</span>
+					{filtered.length > maxVisible ? <span fg={colors.muted}>  {selectedIndex + 1}/{filtered.length}</span> : null}
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}
+
+export const MergeModal = ({
+	state,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+	loadingIndicator,
+}: {
+	state: MergeModalState
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+	loadingIndicator: string
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const options = mergeModalOptions(state.info)
+	const selectedIndex = options.length === 0 ? 0 : Math.max(0, Math.min(state.selectedIndex, options.length - 1))
+	const title = state.info ? `Merge  #${state.info.number}` : state.number ? `Merge  #${state.number}` : "Merge"
+	const rightText = state.running ? "running" : state.loading ? "loading" : state.info?.autoMergeEnabled ? "auto on" : "manual"
+	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
+	const repo = state.info?.repository ?? state.repository
+	const statusLine = state.info
+		? `${shortRepoName(state.info.repository)}  ${state.info.mergeable}  ${state.info.reviewStatus}  ${state.info.checkSummary ?? state.info.checkStatus}`
+		: repo ? shortRepoName(repo) : ""
+	const optionRows = Math.max(1, Math.floor((modalHeight - 9) / 2))
+	const visibleOptions = options.slice(0, optionRows)
+
+	return (
+		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{title}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={state.running || state.loading ? colors.status.pending : colors.muted}>{rightText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<PlainLine text={fitCell(statusLine, contentWidth)} fg={colors.muted} />
+			</box>
+			<Divider width={innerWidth} />
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{state.loading ? (
+					<PlainLine text={centerCell(`${loadingIndicator} Loading merge status`, contentWidth)} fg={colors.muted} />
+				) : state.error ? (
+					<PlainLine text={centerCell(state.error, contentWidth)} fg={colors.error} />
+				) : visibleOptions.length === 0 ? (
+					<PlainLine text={centerCell(mergeUnavailableReason(state.info), contentWidth)} fg={colors.muted} />
+				) : (
+					visibleOptions.map((option, index) => {
+						const isSelected = index === selectedIndex
+						const titleColor = option.danger ? colors.error : isSelected ? colors.selectedText : colors.text
+						const titleWidth = Math.max(1, contentWidth - 1)
+						const descriptionWidth = Math.max(1, contentWidth - 1)
+
+						return (
+							<box key={option.action} height={2} flexDirection="column">
+								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
+									<span fg={titleColor}> {fitCell(option.title, titleWidth)}</span>
+								</TextLine>
+								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
+									<span fg={colors.muted}> {fitCell(option.description, descriptionWidth)}</span>
+								</TextLine>
+							</box>
+						)
+					})
+				)}
+			</box>
+			<box flexGrow={1} />
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> move  </span>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> confirm  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> close</span>
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}

package/src/ui/primitives.tsx

@@ -0,0 +1,111 @@
+import { TextAttributes } from "@opentui/core"
+import type React from "react"
+import { colors } from "./colors.js"
+
+export const fitCell = (text: string, width: number, align: "left" | "right" = "left") => {
+	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+	return align === "right" ? trimmed.padStart(width, " ") : trimmed.padEnd(width, " ")
+}
+
+export const trimCell = (text: string, width: number) => text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+
+export const centerCell = (text: string, width: number) => {
+	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
+	const left = Math.floor((width - trimmed.length) / 2)
+	return `${" ".repeat(Math.max(0, left))}${trimmed}`.padEnd(width, " ")
+}
+
+export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: string; fg?: string; bold?: boolean }) => (
+	<box height={1}>
+		{bold ? (
+			<text wrapMode="none" truncate fg={fg} attributes={TextAttributes.BOLD}>
+				{text}
+			</text>
+		) : (
+			<text wrapMode="none" truncate fg={fg}>
+				{text}
+			</text>
+		)}
+	</box>
+)
+
+export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => (
+	<box height={1}>
+		{bg ? (
+			<text wrapMode="none" truncate fg={fg} bg={bg}>
+				{children}
+			</text>
+		) : (
+			<text wrapMode="none" truncate fg={fg}>
+				{children}
+			</text>
+		)}
+	</box>
+)
+
+export const SectionTitle = ({ title }: { title: string }) => (
+	<TextLine>
+		<span fg={colors.accent} attributes={TextAttributes.BOLD}>
+			{title}
+		</span>
+	</TextLine>
+)
+
+export const Divider = ({ width, junctionAt, junctionChar }: { width: number; junctionAt?: number; junctionChar?: string }) => {
+	if (junctionAt === undefined || junctionChar === undefined || junctionAt < 0 || junctionAt >= width) {
+		return <PlainLine text={"─".repeat(Math.max(1, width))} fg={colors.separator} />
+	}
+
+	return <PlainLine text={`${"─".repeat(junctionAt)}${junctionChar}${"─".repeat(Math.max(0, width - junctionAt - 1))}`} fg={colors.separator} />
+}
+
+export const SeparatorColumn = ({ height, junctionRows }: { height: number; junctionRows?: readonly number[] }) => {
+	const junctions = new Set(junctionRows)
+	return (
+		<box width={1} height={height} flexDirection="column">
+			{Array.from({ length: height }, (_, index) => (
+				<PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />
+			))}
+		</box>
+	)
+}
+
+export const ModalFrame = ({
+	children,
+	left,
+	top,
+	width,
+	height,
+	junctionRows = [],
+	backgroundColor = "#1a1a2e",
+}: {
+	children: React.ReactNode
+	left: number
+	top: number
+	width: number
+	height: number
+	junctionRows?: readonly number[]
+	backgroundColor?: string
+}) => {
+	const innerWidth = Math.max(1, width - 2)
+	const innerHeight = Math.max(1, height - 2)
+	const junctions = new Set(junctionRows)
+
+	return (
+		<box position="absolute" left={left} top={top} width={width} height={height} flexDirection="column" backgroundColor={backgroundColor}>
+			<PlainLine text={`┌${"─".repeat(innerWidth)}┐`} fg={colors.separator} />
+			<box height={innerHeight} flexDirection="row">
+				<box width={1} height={innerHeight} flexDirection="column">
+					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />)}
+				</box>
+				<box width={innerWidth} height={innerHeight} flexDirection="column">
+					{children}
+				</box>
+				<box width={1} height={innerHeight} flexDirection="column">
+					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "┤" : "│"} fg={colors.separator} />)}
+				</box>
+			</box>
+			<PlainLine text={`└${"─".repeat(innerWidth)}┘`} fg={colors.separator} />
+		</box>
+	)
+}