@kitlangton/ghui 0.2.1 → 0.3.0

package/src/ui/modals.tsx

@@ -1,10 +1,11 @@
 import { Data } from "effect"
-import type { PullRequestLabel, PullRequestMergeInfo, PullRequestReviewComment } from "../domain.js"
+import type { PullRequestLabel, PullRequestMergeInfo, PullRequestReviewComment, PullRequestReviewEvent } from "../domain.js"
 import { availableMergeActions } from "../mergeActions.js"
 import { clampCursor, commentEditorLines, cursorLineIndexForLines } from "./commentEditor.js"
 import { colors, filterThemeDefinitions, themeDefinitions, type ThemeId } from "./colors.js"
 import { commentDisplayRows, CommentSegmentsLine, type CommentDisplayLine } from "./comments.js"
-import { centerCell, Filler, fitCell, HintRow, PlainLine, StandardModal, standardModalDims, TextLine } from "./primitives.js"
+import { diffFileStats, diffFileStatsText, type DiffFilePatch } from "./diff.js"
+import { centerCell, Filler, fitCell, HintRow, MatchedCell, PlainLine, searchModalDims, SearchModalFrame, StandardModal, standardModalDims, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
 
 export interface LabelModalState {
@@ -44,6 +45,21 @@ export interface CommentThreadModalState {
 	readonly scrollOffset: number
 }
 
+export interface ChangedFilesModalState {
+	readonly query: string
+	readonly selectedIndex: number
+}
+
+export interface SubmitReviewModalState {
+	readonly repository: string | null
+	readonly number: number | null
+	readonly selectedIndex: number
+	readonly body: string
+	readonly cursor: number
+	readonly running: boolean
+	readonly error: string | null
+}
+
 export interface ThemeModalState {
 	readonly query: string
 	readonly filterMode: boolean
@@ -66,6 +82,178 @@ export const filterLabels = (labels: readonly PullRequestLabel[], query: string)
 	return labels.filter((label) => label.name.toLowerCase().includes(normalized))
 }
 
+export interface ChangedFileSearchResult {
+	readonly file: DiffFilePatch
+	readonly index: number
+	readonly matchIndexes: readonly number[]
+}
+
+interface PathSegment {
+	readonly text: string
+	readonly lower: string
+	readonly start: number
+	readonly index: number
+	readonly isBasename: boolean
+}
+
+interface FileTokenMatch {
+	readonly score: number
+	readonly indexes: readonly number[]
+	readonly start: number
+}
+
+const PATH_WORD_BOUNDARIES = new Set(["-", "_", "."])
+
+const pathSearchTokens = (query: string) => query.trim().toLowerCase().split(/\s+/).filter((token) => token.length > 0)
+
+const pathSegments = (path: string): readonly PathSegment[] => {
+	const parts = path.split("/")
+	let start = 0
+	return parts.map((part, index) => {
+		const segment = {
+			text: part,
+			lower: part.toLowerCase(),
+			start,
+			index,
+			isBasename: index === parts.length - 1,
+		}
+		start += part.length + 1
+		return segment
+	})
+}
+
+const isPathWordBoundary = (segment: string, index: number) => index === 0 || PATH_WORD_BOUNDARIES.has(segment[index - 1] ?? "")
+
+const fuzzyIndexesFrom = (text: string, token: string, start: number): readonly number[] | null => {
+	const indexes: number[] = []
+	let tokenIndex = 0
+	for (let index = start; index < text.length && tokenIndex < token.length; index++) {
+		if (text[index] === token[tokenIndex]) {
+			indexes.push(index)
+			tokenIndex++
+		}
+	}
+	return tokenIndex === token.length ? indexes : null
+}
+
+const scoreSegmentMatch = (segment: PathSegment, token: string, localIndexes: readonly number[], contiguous: boolean): number => {
+	const localStart = localIndexes[0] ?? 0
+	const localEnd = localIndexes[localIndexes.length - 1] ?? localStart
+	const span = localEnd - localStart + 1
+	let score = 1000
+
+	if (segment.lower === token) score += 700
+	else if (contiguous && localStart === 0) score += 460
+	else if (contiguous && isPathWordBoundary(segment.lower, localStart)) score += 380
+	else if (contiguous) score += 280
+	else score += 120
+
+	if (segment.isBasename) score += 320
+	if (isPathWordBoundary(segment.lower, localStart)) score += 80
+	if (localStart === 0) score += 60
+	score += Math.min(segment.index, 8) * 18
+	score += Math.max(0, 120 - span * 4)
+	score += Math.max(0, 40 - localStart * 2)
+
+	if (segment.index === 0 && segment.lower === "packages" && segment.lower !== token) score -= 360
+
+	return score
+}
+
+const tokenMatchInSegment = (segment: PathSegment, token: string): FileTokenMatch | null => {
+	let best: FileTokenMatch | null = null
+	const addCandidate = (localIndexes: readonly number[], contiguous: boolean) => {
+		const score = scoreSegmentMatch(segment, token, localIndexes, contiguous)
+		const start = segment.start + (localIndexes[0] ?? 0)
+		const indexes = localIndexes.map((index) => segment.start + index)
+		if (!best || score > best.score || (score === best.score && start < best.start)) {
+			best = { score, indexes, start }
+		}
+	}
+
+	let substringStart = segment.lower.indexOf(token)
+	while (substringStart >= 0) {
+		addCandidate(Array.from({ length: token.length }, (_, index) => substringStart + index), true)
+		substringStart = segment.lower.indexOf(token, substringStart + 1)
+	}
+
+	for (let index = 0; index < segment.lower.length; index++) {
+		if (segment.lower[index] !== token[0]) continue
+		const indexes = fuzzyIndexesFrom(segment.lower, token, index)
+		if (indexes) addCandidate(indexes, false)
+	}
+
+	return best
+}
+
+const tokenMatchInPath = (segments: readonly PathSegment[], token: string): FileTokenMatch | null => {
+	let best: FileTokenMatch | null = null
+	for (const segment of segments) {
+		const match = tokenMatchInSegment(segment, token)
+		if (!match) continue
+		if (!best || match.score > best.score || (match.score === best.score && match.start < best.start)) {
+			best = match
+		}
+	}
+	return best
+}
+
+const fuzzyPathMatch = (path: string, query: string): { readonly score: number; readonly matchIndexes: readonly number[] } | null => {
+	const tokens = pathSearchTokens(query)
+	if (tokens.length === 0) return { score: 0, matchIndexes: [] }
+
+	const segments = pathSegments(path)
+	const matchIndexes = new Set<number>()
+	let score = 0
+	let previousStart = -1
+
+	for (const token of tokens) {
+		const match = tokenMatchInPath(segments, token)
+		if (!match) return null
+		score += match.score
+		score += previousStart < 0 || match.start >= previousStart ? 80 : -80
+		previousStart = match.start
+		for (const index of match.indexes) matchIndexes.add(index)
+	}
+
+	return { score, matchIndexes: [...matchIndexes].sort((left, right) => left - right) }
+}
+
+export const filterChangedFiles = (files: readonly DiffFilePatch[], query: string): readonly ChangedFileSearchResult[] => {
+	const hasQuery = pathSearchTokens(query).length > 0
+	const results: Array<ChangedFileSearchResult & { readonly score: number }> = []
+	for (const [index, file] of files.entries()) {
+		const match = fuzzyPathMatch(file.name, query)
+		if (match) results.push({ file, index, matchIndexes: match.matchIndexes, score: match.score })
+	}
+	if (hasQuery) {
+		results.sort((left, right) => {
+			return right.score - left.score || left.index - right.index
+		})
+	}
+	return results
+}
+
+export interface SubmitReviewOption {
+	readonly event: PullRequestReviewEvent
+	readonly title: string
+	readonly description: string
+}
+
+export const submitReviewOptions: readonly SubmitReviewOption[] = [
+	{ event: "COMMENT", title: "Comment", description: "Submit a general review without changing status" },
+	{ event: "APPROVE", title: "Approve", description: "Approve this pull request" },
+	{ event: "REQUEST_CHANGES", title: "Request changes", description: "Block merge until follow-up changes are made" },
+]
+
+const submitReviewEventColors = {
+	COMMENT: colors.status.review,
+	APPROVE: colors.status.passing,
+	REQUEST_CHANGES: colors.status.failing,
+} satisfies Record<PullRequestReviewEvent, string>
+
+const submitReviewEventColor = (event: PullRequestReviewEvent) => submitReviewEventColors[event]
+
 export const initialLabelModalState: LabelModalState = {
 	repository: null,
 	query: "",
@@ -103,6 +291,21 @@ export const initialCommentThreadModalState: CommentThreadModalState = {
 	scrollOffset: 0,
 }
 
+export const initialChangedFilesModalState: ChangedFilesModalState = {
+	query: "",
+	selectedIndex: 0,
+}
+
+export const initialSubmitReviewModalState: SubmitReviewModalState = {
+	repository: null,
+	number: null,
+	selectedIndex: 0,
+	body: "",
+	cursor: 0,
+	running: false,
+	error: null,
+}
+
 export const initialThemeModalState: ThemeModalState = {
 	query: "",
 	filterMode: false,
@@ -126,6 +329,8 @@ export type Modal = Data.TaggedEnum<{
 	Merge: MergeModalState
 	Comment: CommentModalState
 	CommentThread: CommentThreadModalState
+	ChangedFiles: ChangedFilesModalState
+	SubmitReview: SubmitReviewModalState
 	Theme: ThemeModalState
 	CommandPalette: CommandPaletteState
 	OpenRepository: OpenRepositoryModalState
@@ -143,6 +348,8 @@ export const modalInitialStates = {
 	Merge: initialMergeModalState,
 	Comment: initialCommentModalState,
 	CommentThread: initialCommentThreadModalState,
+	ChangedFiles: initialChangedFilesModalState,
+	SubmitReview: initialSubmitReviewModalState,
 	Theme: initialThemeModalState,
 	CommandPalette: initialCommandPaletteState,
 	OpenRepository: initialOpenRepositoryModalState,
@@ -215,7 +422,7 @@ export const LabelModal = ({
 	offsetTop: number
 	loadingIndicator: string
 }) => {
-	const { contentWidth, bodyHeight: maxVisible, rowWidth } = standardModalDims(modalWidth, modalHeight)
+	const { bodyHeight: maxVisible, rowWidth } = searchModalDims(modalWidth, modalHeight)
 	const currentNames = new Set(currentLabels.map((l) => l.name.toLowerCase()))
 	const filtered = filterLabels(state.availableLabels, state.query)
 	const labelMessageTopRows = Math.max(0, Math.floor((maxVisible - 1) / 2))
@@ -228,24 +435,17 @@ export const LabelModal = ({
 	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 queryText = state.query.length > 0 ? state.query : "type to filter labels"
-	const queryPrefix = "/ "
-	const queryWidth = Math.max(1, contentWidth - queryPrefix.length)
 
 	return (
-		<StandardModal
+		<SearchModalFrame
 			left={offsetLeft}
 			top={offsetTop}
 			width={modalWidth}
 			height={modalHeight}
 			title={title}
-			headerRight={{ text: countText }}
-			subtitle={
-				<TextLine>
-					<span fg={colors.count}>{queryPrefix}</span>
-					<span fg={state.query.length > 0 ? colors.text : colors.muted}>{fitCell(queryText, queryWidth)}</span>
-				</TextLine>
-			}
+			query={state.query}
+			placeholder="filter labels"
+			countText={countText}
 			footer={
 				<TextLine>
 					<span fg={colors.count}>↑↓</span>
@@ -287,7 +487,72 @@ export const LabelModal = ({
 					)
 				})
 			)}
-		</StandardModal>
+		</SearchModalFrame>
+	)
+}
+
+export const ChangedFilesModal = ({
+	state,
+	results,
+	totalCount,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+}: {
+	state: ChangedFilesModalState
+	results: readonly ChangedFileSearchResult[]
+	totalCount: number
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+}) => {
+	const { bodyHeight: maxVisible, rowWidth } = searchModalDims(modalWidth, modalHeight)
+	const filtered = results
+	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 visibleFiles = filtered.slice(scrollStart, scrollStart + maxVisible)
+	const title = "Files"
+	const countText = `${filtered.length}/${totalCount}`
+	const messageTopRows = Math.max(0, Math.floor((maxVisible - 1) / 2))
+	const messageBottomRows = Math.max(0, maxVisible - messageTopRows - 1)
+
+	return (
+		<SearchModalFrame
+			left={offsetLeft}
+			top={offsetTop}
+			width={modalWidth}
+			height={modalHeight}
+			title={title}
+			query={state.query}
+			placeholder="Filter"
+			countText={countText}
+			footer={<HintRow items={[{ key: "↑↓", label: "move" }, { key: "enter", label: "jump" }, { key: "esc", label: "close" }]} />}
+		>
+			{visibleFiles.length === 0 ? (
+				<>
+					<Filler rows={messageTopRows} prefix="top" />
+					<PlainLine text={centerCell(state.query.length > 0 ? "No matching files" : "No changed files", rowWidth)} fg={colors.muted} />
+					<Filler rows={messageBottomRows} prefix="bottom" />
+				</>
+			) : visibleFiles.map((entry, index) => {
+				const actualIndex = scrollStart + index
+				const isSelected = actualIndex === selectedIndex
+				const stats = diffFileStatsText(diffFileStats(entry.file)) || "0"
+				const statsWidth = Math.min(10, Math.max(3, stats.length))
+				const nameWidth = Math.max(1, rowWidth - statsWidth)
+				return (
+					<TextLine key={`${entry.index}:${entry.file.name}`} width={rowWidth} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+						<MatchedCell text={entry.file.name} width={nameWidth} query={state.query} matchIndexes={entry.matchIndexes} />
+						<span fg={colors.muted}>{fitCell(stats, statsWidth, "right")}</span>
+					</TextLine>
+				)
+			})}
+		</SearchModalFrame>
 	)
 }
 
@@ -484,6 +749,91 @@ export const CommentModal = ({
 	)
 }
 
+export const SubmitReviewModal = ({
+	state,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+	loadingIndicator,
+}: {
+	state: SubmitReviewModalState
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+	loadingIndicator: string
+}) => {
+	const { contentWidth, bodyHeight } = standardModalDims(modalWidth, modalHeight)
+	const selectedIndex = Math.max(0, Math.min(state.selectedIndex, submitReviewOptions.length - 1))
+	const editorHeight = Math.max(1, bodyHeight - submitReviewOptions.length - (state.error ? 1 : 0))
+	const lineRanges = commentEditorLines(state.body)
+	const cursor = clampCursor(state.body, state.cursor)
+	const cursorLineIndex = cursorLineIndexForLines(lineRanges, cursor)
+	const visibleStart = Math.min(
+		Math.max(0, lineRanges.length - editorHeight),
+		Math.max(0, cursorLineIndex - editorHeight + 1),
+	)
+	const visibleLines = lineRanges.slice(visibleStart, visibleStart + editorHeight)
+	const title = state.number ? `Submit review  #${state.number}` : "Submit review"
+	const rightText = state.running ? `${loadingIndicator} submitting` : submitReviewOptions[selectedIndex]?.title ?? "review"
+	const subtitleText = state.repository ? shortRepoName(state.repository) : "Choose a review action and optional summary"
+	const renderEditorLine = (line: { readonly text: string; readonly start: number; readonly end: number }, index: number) => {
+		const lineIndex = visibleStart + index
+		const isCursorLine = lineIndex === cursorLineIndex
+		const cursorColumn = Math.max(0, Math.min(cursor - line.start, line.text.length))
+		const viewStart = isCursorLine ? Math.max(0, cursorColumn - contentWidth + 1) : 0
+		const visibleText = line.text.slice(viewStart, viewStart + contentWidth)
+
+		if (!isCursorLine) {
+			return <PlainLine key={lineIndex} text={fitCell(visibleText, contentWidth)} fg={state.body.length > 0 ? colors.text : colors.muted} />
+		}
+
+		const cursorInView = cursorColumn - viewStart
+		const before = visibleText.slice(0, cursorInView)
+		const placeholder = state.body.length === 0 ? "Optional review summary..." : ""
+		const cursorChar = placeholder ? placeholder[0] ?? " " : visibleText[cursorInView] ?? " "
+		const after = placeholder ? placeholder.slice(1) : visibleText.slice(cursorInView + 1)
+
+		return (
+			<TextLine key={lineIndex}>
+				{before ? <span fg={colors.text}>{before}</span> : null}
+				<span bg={colors.accent} fg={colors.background}>{cursorChar}</span>
+				{after ? <span fg={placeholder ? colors.muted : colors.text}>{after}</span> : null}
+			</TextLine>
+		)
+	}
+
+	return (
+		<StandardModal
+			left={offsetLeft}
+			top={offsetTop}
+			width={modalWidth}
+			height={modalHeight}
+			title={title}
+			headerRight={{ text: rightText, pending: state.running }}
+			subtitle={<PlainLine text={fitCell(subtitleText, contentWidth)} fg={colors.muted} />}
+			bodyPadding={1}
+			footer={<HintRow items={[{ key: "tab", label: "action" }, { key: "enter", label: "submit" }, { key: "shift-enter", label: "newline" }, { key: "esc", label: "cancel" }]} />}
+		>
+			{submitReviewOptions.map((option, index) => {
+				const isSelected = index === selectedIndex
+				const titleWidth = Math.min(18, Math.max(8, contentWidth - 8))
+				const descriptionWidth = Math.max(1, contentWidth - titleWidth - 4)
+				return (
+					<TextLine key={option.event} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+						<span fg={submitReviewEventColor(option.event)}>{isSelected ? "›" : " "}</span>
+						<span> {fitCell(option.title, titleWidth)}</span>
+						<span fg={isSelected ? colors.selectedText : colors.muted}>{fitCell(option.description, descriptionWidth)}</span>
+					</TextLine>
+				)
+			})}
+			{state.error ? <PlainLine text={fitCell(state.error, contentWidth)} fg={colors.error} /> : null}
+			{visibleLines.map(renderEditorLine)}
+		</StandardModal>
+	)
+}
+
 const commentThreadRows = (comments: readonly PullRequestReviewComment[], width: number): readonly CommentDisplayLine[] =>
 	comments.flatMap((comment) => commentDisplayRows({ item: comment, width }))
 
@@ -522,7 +872,7 @@ export const CommentThreadModal = ({
 			headerRight={{ text: countText }}
 			subtitle={<PlainLine text={fitCell(anchorLabel, contentWidth)} fg={colors.muted} />}
 			bodyPadding={1}
-			footer={<HintRow items={[{ key: "↑↓", label: "scroll" }, { key: "a", label: "comment" }, { key: "esc", label: "close" }]} />}
+			footer={<HintRow items={[{ key: "↑↓", label: "scroll" }, { key: "enter", label: "comment" }, { key: "esc", label: "close" }]} />}
 		>
 			{visibleRows.length === 0 ? (
 				<PlainLine text={fitCell("No comments on this line.", contentWidth)} fg={colors.muted} />

package/src/ui/primitives.tsx

@@ -1,4 +1,4 @@
-import { TextAttributes } from "@opentui/core"
+import { TextAttributes, type MouseEvent } from "@opentui/core"
 import type React from "react"
 import { colors } from "./colors.js"
 
@@ -43,6 +43,42 @@ export const TextLine = ({ children, fg = colors.text, bg, width }: { children:
 	</box>
 )
 
+export const MatchedCell = ({ text, width, query, align = "left", matchIndexes }: { text: string; width: number; query: string; align?: "left" | "right"; matchIndexes?: readonly number[] }) => {
+	const fitted = fitCell(text, width, align)
+	if (matchIndexes && matchIndexes.length > 0) {
+		const highlighted = new Set(matchIndexes.filter((index) => index >= 0 && index < fitted.length))
+		if (highlighted.size > 0) {
+			const segments: Array<{ text: string; highlight: boolean }> = []
+			for (let index = 0; index < fitted.length; index++) {
+				const char = fitted[index]!
+				const highlight = highlighted.has(index)
+				const previous = segments[segments.length - 1]
+				if (previous && previous.highlight === highlight) previous.text += char
+				else segments.push({ text: char, highlight })
+			}
+			return (
+				<>
+					{segments.map((segment, index) => segment.highlight
+						? <span key={index} fg={colors.accent} attributes={TextAttributes.BOLD}>{segment.text}</span>
+						: <span key={index}>{segment.text}</span>)}
+				</>
+			)
+		}
+	}
+	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}
+		</>
+	)
+}
+
 export const SectionTitle = ({ title }: { title: string }) => (
 	<TextLine>
 		<span fg={colors.accent} attributes={TextAttributes.BOLD}>
@@ -160,6 +196,115 @@ export const StandardModal = ({
 	)
 }
 
+export type SearchModalDims = StandardModalDims
+
+export const searchModalDims = (modalWidth: number, modalHeight: number): SearchModalDims => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const bodyHeight = Math.max(1, modalHeight - 6)
+	return { innerWidth, contentWidth, bodyHeight, rowWidth: innerWidth }
+}
+
+const searchModalTitleText = (title: string, contentWidth: number, countText: string) => {
+	const reserved = 1 + 1 + 1 + 8 + (countText.length > 0 ? countText.length + 2 : 0)
+	return trimCell(title, Math.max(6, Math.min(title.length, contentWidth - reserved)))
+}
+
+export const SearchModalHeader = ({
+	title,
+	query,
+	placeholder,
+	countText = "",
+	contentWidth,
+}: {
+	title: string
+	query: string
+	placeholder: string
+	countText?: string
+	contentWidth: number
+}) => {
+	const titleText = searchModalTitleText(title, contentWidth, countText)
+	const headerGap = 1
+	const headerDivider = "│"
+	const searchGap = 1
+	const searchStart = titleText.length + headerGap + headerDivider.length + searchGap
+	const countGap = countText.length > 0 ? 2 : 0
+	const searchWidth = Math.max(1, contentWidth - searchStart - countGap - countText.length)
+	const queryText = trimCell(query, Math.max(0, searchWidth - 1))
+	const queryPadding = Math.max(0, searchWidth - queryText.length - 1)
+	const caretFg = colors.background === "transparent" ? colors.text : colors.background
+
+	return (
+		<TextLine>
+			<span fg={colors.accent} attributes={TextAttributes.BOLD}>{titleText}</span>
+			<span>{" ".repeat(headerGap)}</span>
+			<span fg={colors.separator}>{headerDivider}</span>
+			<span>{" ".repeat(searchGap)}</span>
+			{query.length > 0 ? (
+				<>
+					<span fg={colors.text}>{queryText}</span>
+					<span bg={colors.muted} fg={caretFg}> </span>
+					{queryPadding > 0 ? <span>{" ".repeat(queryPadding)}</span> : null}
+				</>
+			) : (
+				<>
+					<span bg={colors.muted} fg={caretFg}>{placeholder[0] ?? " "}</span>
+					<span fg={colors.muted}>{fitCell(placeholder.slice(1), Math.max(0, searchWidth - 1))}</span>
+				</>
+			)}
+			{countText.length > 0 && searchWidth > placeholder.length ? (
+				<>
+					<span>{" ".repeat(countGap)}</span>
+					<span fg={colors.muted}>{countText}</span>
+				</>
+			) : null}
+		</TextLine>
+	)
+}
+
+export const SearchModalFrame = ({
+	left,
+	top,
+	width,
+	height,
+	title,
+	query,
+	placeholder,
+	countText = "",
+	footer,
+	bodyPadding = 0,
+	onBodyMouseScroll,
+	children,
+}: {
+	left: number
+	top: number
+	width: number
+	height: number
+	title: string
+	query: string
+	placeholder: string
+	countText?: string
+	footer: React.ReactNode
+	bodyPadding?: number
+	onBodyMouseScroll?: (event: MouseEvent) => void
+	children: React.ReactNode
+}) => {
+	const { innerWidth, contentWidth, bodyHeight } = searchModalDims(width, height)
+	const titleText = searchModalTitleText(title, contentWidth, countText)
+	const dividerColumn = 1 + titleText.length + 1
+	return (
+		<ModalFrame left={left} top={top} width={width} height={height} junctionRows={[1, height - 4]} topJunctionColumns={[dividerColumn]}>
+			<PaddedRow>
+				<SearchModalHeader title={title} query={query} placeholder={placeholder} countText={countText} contentWidth={contentWidth} />
+			</PaddedRow>
+			<Divider width={innerWidth} junctionAt={dividerColumn} junctionChar="┴" />
+			<box height={bodyHeight} flexDirection="column" paddingLeft={bodyPadding} paddingRight={bodyPadding} {...(onBodyMouseScroll ? { onMouseScroll: onBodyMouseScroll } : {})}>{children}</box>
+			<Divider width={innerWidth} />
+			<PaddedRow>{footer}</PaddedRow>
+		</ModalFrame>
+	)
+}
+
 export const ModalFrame = ({
 	children,
 	left,