@kitlangton/ghui 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.13",
+	"version": "0.1.15",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",

package/src/App.tsx

@@ -11,7 +11,7 @@ import { formatShortDate, formatTimestamp } from "./date.js"
 import { availableMergeActions, mergeInfoFromPullRequest } from "./mergeActions.js"
 import { Observability } from "./observability.js"
 import { GitHubService } from "./services/GitHubService.js"
-import { colors, setActiveTheme, themeDefinitions, type ThemeId } from "./ui/colors.js"
+import { colors, filterThemeDefinitions, setActiveTheme, themeDefinitions, type ThemeId } from "./ui/colors.js"
 import { pullRequestDiffKey, splitPatchFiles, type PullRequestDiffState } from "./ui/diff.js"
 import { DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailBodyHeight, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
 import { FooterHints, type RetryProgress } from "./ui/FooterHints.js"
@@ -264,6 +264,10 @@ export const App = () => {
 	const [themeId, setThemeId] = useAtom(themeIdAtom)
 	const [themeModal, setThemeModal] = useAtom(themeModalAtom)
 	setActiveTheme(themeId)
+	const themeIdRef = useRef(themeId)
+	const themeModalRef = useRef(themeModal)
+	themeIdRef.current = themeId
+	themeModalRef.current = themeModal
 	const [labelCache, setLabelCache] = useAtom(labelCacheAtom)
 	const [pullRequestOverrides, setPullRequestOverrides] = useAtom(pullRequestOverridesAtom)
 	const retryProgress = useAtomValue(retryProgressAtom)
@@ -559,12 +563,14 @@ export const App = () => {
 		setMergeModal(initialMergeModalState)
 		setThemeModal({
 			open: true,
+			query: "",
+			filterMode: false,
 			initialThemeId: themeId,
 		})
 	}
 
 	const closeThemeModal = (confirm: boolean) => {
-		const selectedTheme = themeDefinitions.find((theme) => theme.id === themeId)
+		const selectedTheme = themeDefinitions.find((theme) => theme.id === themeIdRef.current)
 		if (!confirm) {
 			setThemeId(themeModal.initialThemeId)
 		} else if (selectedTheme) {
@@ -573,12 +579,42 @@ export const App = () => {
 		setThemeModal(initialThemeModalState)
 	}
 
+	const previewTheme = (id: ThemeId) => {
+		if (id === themeIdRef.current) return
+		themeIdRef.current = id
+		setThemeId(id)
+	}
+
 	const moveThemeSelection = (delta: number) => {
-		const currentIndex = Math.max(0, themeDefinitions.findIndex((theme) => theme.id === themeId))
-		const selectedIndex = Math.max(0, Math.min(themeDefinitions.length - 1, currentIndex + delta))
+		const filteredThemes = filterThemeDefinitions(themeModalRef.current.query)
+		if (filteredThemes.length === 0) return
+		const currentIndex = Math.max(0, filteredThemes.findIndex((theme) => theme.id === themeIdRef.current))
+		const selectedIndex = Math.max(0, Math.min(filteredThemes.length - 1, currentIndex + delta))
 		if (selectedIndex === currentIndex) return
-		const theme = themeDefinitions[selectedIndex]
-		if (theme && theme.id !== themeId) setThemeId(theme.id)
+		const theme = filteredThemes[selectedIndex]
+		if (theme) previewTheme(theme.id)
+	}
+
+	const updateThemeQuery = (query: string, options: { readonly previewFirst?: boolean; readonly filterMode?: boolean } = {}) => {
+		const current = themeModalRef.current
+		const next = {
+			...current,
+			query,
+			filterMode: options.filterMode ?? current.filterMode,
+		}
+		if (next.query === current.query && next.filterMode === current.filterMode) return
+
+		themeModalRef.current = next
+		setThemeModal(next)
+
+		if (options.previewFirst && query.trim().length > 0) {
+			const firstTheme = filterThemeDefinitions(query)[0]
+			if (firstTheme) previewTheme(firstTheme.id)
+		}
+	}
+
+	const editThemeQuery = (transform: (query: string) => string) => {
+		updateThemeQuery(transform(themeModalRef.current.query), { previewFirst: true })
 	}
 
 	const openLabelModal = () => {
@@ -714,7 +750,7 @@ export const App = () => {
 	}
 
 	useKeyboard((key) => {
-		if (key.name === "q" || (key.ctrl && key.name === "c")) {
+		if ((key.name === "q" && !(themeModal.open && themeModal.filterMode)) || (key.ctrl && key.name === "c")) {
 			if (themeModal.open) {
 				closeThemeModal(false)
 				return
@@ -733,21 +769,42 @@ export const App = () => {
 
 		if (themeModal.open) {
 			if (key.name === "escape") {
+				if (themeModal.filterMode) {
+					updateThemeQuery("", { filterMode: false })
+					return
+				}
 				closeThemeModal(false)
 				return
 			}
+			if (key.name === "/") {
+				updateThemeQuery("", { filterMode: true })
+				return
+			}
 			if (key.name === "return" || key.name === "enter") {
+				if (themeModal.filterMode && filterThemeDefinitions(themeModal.query).length === 0) return
 				closeThemeModal(true)
 				return
 			}
-			if (key.name === "up" || key.name === "k") {
+			if (key.name === "up" || (!themeModal.filterMode && key.name === "k")) {
 				moveThemeSelection(-1)
 				return
 			}
-			if (key.name === "down" || key.name === "j") {
+			if (key.name === "down" || (!themeModal.filterMode && key.name === "j")) {
 				moveThemeSelection(1)
 				return
 			}
+			if (themeModal.filterMode && key.name === "backspace") {
+				editThemeQuery((query) => query.slice(0, -1))
+				return
+			}
+			if (themeModal.filterMode && key.ctrl && key.name === "u") {
+				updateThemeQuery("")
+				return
+			}
+			if (themeModal.filterMode && !key.ctrl && !key.meta && key.sequence.length === 1 && key.name !== "return") {
+				editThemeQuery((query) => query + key.sequence)
+				return
+			}
 			return
 		}
 
@@ -1229,7 +1286,7 @@ export const App = () => {
 
 	return (
 		<box width={terminalWidth} height={terminalHeight} flexDirection="column" backgroundColor={colors.background}>
-			<box paddingLeft={1} paddingRight={1} flexDirection="column" backgroundColor={colors.panel}>
+			<box paddingLeft={1} paddingRight={1} flexDirection="column" backgroundColor={colors.background}>
 				<PlainLine text={headerLine} fg={colors.muted} bold />
 			</box>
 			{isWideLayout && !detailFullView && !diffFullView && !isInitialLoading ? (
@@ -1263,6 +1320,7 @@ export const App = () => {
 							showChecks
 							placeholderContent={detailPlaceholderContent}
 							loadingIndicator={loadingIndicator}
+							themeId={themeId}
 						/>
 					</scrollbox>
 				</box>
@@ -1279,7 +1337,7 @@ export const App = () => {
 							<>
 								<DetailHeader pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={rightPaneWidth} showChecks />
 								<scrollbox flexGrow={1} verticalScrollbarOptions={{ visible: wideDetailBodyScrollable }}>
-									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} loadingIndicator={loadingIndicator} />
+									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} loadingIndicator={loadingIndicator} themeId={themeId} />
 								</scrollbox>
 							</>
 						) : (
@@ -1297,12 +1355,13 @@ export const App = () => {
 							paneWidth={contentWidth}
 							placeholderContent={detailPlaceholderContent}
 							loadingIndicator={loadingIndicator}
+							themeId={themeId}
 						/>
 					</scrollbox>
 				</box>
 			) : (
 				<box height={wideBodyHeight} flexDirection="column">
-					<DetailsPane pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} />
+					<DetailsPane pullRequest={selectedPullRequest} contentWidth={rightContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
 					<Divider width={contentWidth} />
 					<box flexGrow={1} flexDirection="column">
 						<scrollbox flexGrow={1}>
@@ -1319,7 +1378,7 @@ export const App = () => {
 			) : (
 				<Divider width={contentWidth} />
 			)}
-			<box paddingLeft={1} paddingRight={1} backgroundColor={colors.footer}>
+			<box paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
 				{footerNotice ? (
 					<PlainLine text={footerNotice} fg={colors.count} />
 				) : (

package/src/ui/DetailsPane.tsx

@@ -2,7 +2,7 @@ import { TextAttributes } from "@opentui/core"
 import { Fragment, useMemo } from "react"
 import { formatRelativeDate } from "../date.js"
 import type { CheckItem, PullRequestItem } from "../domain.js"
-import { colors } from "./colors.js"
+import { colors, type ThemeId } from "./colors.js"
 import { diffStatText } from "./diff.js"
 import { centerCell, Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, labelTextColor, reviewLabel, shortRepoName, statusColor } from "./pullRequests.js"
@@ -387,15 +387,17 @@ export const DetailBody = ({
 	contentWidth,
 	bodyLines = DETAIL_BODY_LINES,
 	loadingIndicator,
+	themeId,
 }: {
 	pullRequest: PullRequestItem
 	contentWidth: number
 	bodyLines?: number
 	loadingIndicator: string
+	themeId: ThemeId
 }) => {
 	const previewLines = useMemo(
 		() => bodyPreview(pullRequest.body, contentWidth, bodyLines),
-		[pullRequest.body, contentWidth, bodyLines],
+		[pullRequest.body, contentWidth, bodyLines, themeId],
 	)
 
 	if (!pullRequest.detailLoaded) {
@@ -486,6 +488,7 @@ export const DetailsPane = ({
 	showChecks = false,
 	placeholderContent,
 	loadingIndicator,
+	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	contentWidth: number
@@ -494,6 +497,7 @@ export const DetailsPane = ({
 	showChecks?: boolean
 	placeholderContent: DetailPlaceholderContent
 	loadingIndicator: string
+	themeId: ThemeId
 }) => {
 	const contentHeight = getDetailsPaneHeight({ pullRequest, contentWidth, bodyLines, paneWidth, showChecks })
 
@@ -502,7 +506,7 @@ export const DetailsPane = ({
 			{pullRequest ? (
 				<>
 					<DetailHeader pullRequest={pullRequest} contentWidth={contentWidth} paneWidth={paneWidth} showChecks={showChecks} />
-					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} loadingIndicator={loadingIndicator} />
+					<DetailBody pullRequest={pullRequest} contentWidth={contentWidth} bodyLines={bodyLines} loadingIndicator={loadingIndicator} themeId={themeId} />
 				</>
 			) : (
 				<>

package/src/ui/colors.ts

@@ -1,9 +1,20 @@
-export type ThemeId = "ghui" | "tokyo-night" | "catppuccin" | "rose-pine" | "gruvbox" | "nord" | "dracula" | "opencode"
+export type ThemeId =
+	| "ghui"
+	| "tokyo-night"
+	| "catppuccin"
+	| "rose-pine"
+	| "gruvbox"
+	| "nord"
+	| "dracula"
+	| "kanagawa"
+	| "one-dark"
+	| "monokai"
+	| "solarized-dark"
+	| "everforest"
+	| "opencode"
 
 export interface ColorPalette {
 	readonly background: string
-	readonly panel: string
-	readonly footer: string
 	readonly modalBackground: string
 	readonly text: string
 	readonly muted: string
@@ -50,8 +61,6 @@ export interface ThemeDefinition {
 
 const ghuiColors: ColorPalette = {
 	background: "#111018",
-	panel: "#161923",
-	footer: "#1d2430",
 	modalBackground: "#1a1a2e",
 	text: "#ede7da",
 	muted: "#9f9788",
@@ -91,8 +100,6 @@ const ghuiColors: ColorPalette = {
 
 const tokyoNightColors: ColorPalette = {
 	background: "#1a1b26",
-	panel: "#16161e",
-	footer: "#24283b",
 	modalBackground: "#24283b",
 	text: "#c0caf5",
 	muted: "#787c99",
@@ -132,8 +139,6 @@ const tokyoNightColors: ColorPalette = {
 
 const opencodeColors: ColorPalette = {
 	background: "#0a0a0a",
-	panel: "#141414",
-	footer: "#1e1e1e",
 	modalBackground: "#1e1e1e",
 	text: "#eeeeee",
 	muted: "#808080",
@@ -173,8 +178,6 @@ const opencodeColors: ColorPalette = {
 
 const catppuccinColors: ColorPalette = {
 	background: "#1e1e2e",
-	panel: "#181825",
-	footer: "#313244",
 	modalBackground: "#313244",
 	text: "#cdd6f4",
 	muted: "#7f849c",
@@ -214,8 +217,6 @@ const catppuccinColors: ColorPalette = {
 
 const rosePineColors: ColorPalette = {
 	background: "#191724",
-	panel: "#1f1d2e",
-	footer: "#26233a",
 	modalBackground: "#26233a",
 	text: "#e0def4",
 	muted: "#908caa",
@@ -255,8 +256,6 @@ const rosePineColors: ColorPalette = {
 
 const gruvboxColors: ColorPalette = {
 	background: "#282828",
-	panel: "#1d2021",
-	footer: "#3c3836",
 	modalBackground: "#3c3836",
 	text: "#ebdbb2",
 	muted: "#928374",
@@ -296,8 +295,6 @@ const gruvboxColors: ColorPalette = {
 
 const nordColors: ColorPalette = {
 	background: "#2e3440",
-	panel: "#242933",
-	footer: "#3b4252",
 	modalBackground: "#3b4252",
 	text: "#eceff4",
 	muted: "#8892a7",
@@ -337,8 +334,6 @@ const nordColors: ColorPalette = {
 
 const draculaColors: ColorPalette = {
 	background: "#282a36",
-	panel: "#21222c",
-	footer: "#343746",
 	modalBackground: "#343746",
 	text: "#f8f8f2",
 	muted: "#8f94b8",
@@ -376,6 +371,201 @@ const draculaColors: ColorPalette = {
 	},
 }
 
+const kanagawaColors: ColorPalette = {
+	background: "#1f1f28",
+	modalBackground: "#2a2a37",
+	text: "#dcd7ba",
+	muted: "#727169",
+	separator: "#54546d",
+	accent: "#7e9cd8",
+	inlineCode: "#d27e99",
+	error: "#c34043",
+	selectedBg: "#363646",
+	selectedText: "#fff7d6",
+	count: "#ffa066",
+	status: {
+		draft: "#c0a36e",
+		approved: "#76946a",
+		changes: "#c34043",
+		review: "#7e9cd8",
+		none: "#727169",
+		passing: "#76946a",
+		pending: "#c0a36e",
+		failing: "#c34043",
+	},
+	repos: {
+		opencode: "#7e9cd8",
+		"effect-smol": "#98bb6c",
+		"opencode-console": "#957fb8",
+		opencontrol: "#ffa066",
+		default: "#7fb4ca",
+	},
+	diff: {
+		addedBg: "#253326",
+		removedBg: "#3a2528",
+		contextBg: "transparent",
+		lineNumberBg: "#16161d",
+		addedLineNumberBg: "#223025",
+		removedLineNumberBg: "#352326",
+	},
+}
+
+const oneDarkColors: ColorPalette = {
+	background: "#282c34",
+	modalBackground: "#2c313c",
+	text: "#abb2bf",
+	muted: "#7f848e",
+	separator: "#4b5263",
+	accent: "#61afef",
+	inlineCode: "#c678dd",
+	error: "#e06c75",
+	selectedBg: "#3e4451",
+	selectedText: "#ffffff",
+	count: "#d19a66",
+	status: {
+		draft: "#e5c07b",
+		approved: "#98c379",
+		changes: "#e06c75",
+		review: "#61afef",
+		none: "#7f848e",
+		passing: "#98c379",
+		pending: "#e5c07b",
+		failing: "#e06c75",
+	},
+	repos: {
+		opencode: "#61afef",
+		"effect-smol": "#98c379",
+		"opencode-console": "#c678dd",
+		opencontrol: "#d19a66",
+		default: "#56b6c2",
+	},
+	diff: {
+		addedBg: "#27362b",
+		removedBg: "#3a282c",
+		contextBg: "transparent",
+		lineNumberBg: "#21252b",
+		addedLineNumberBg: "#243228",
+		removedLineNumberBg: "#35262a",
+	},
+}
+
+const monokaiColors: ColorPalette = {
+	background: "#272822",
+	modalBackground: "#383830",
+	text: "#f8f8f2",
+	muted: "#90908a",
+	separator: "#5b5b50",
+	accent: "#66d9ef",
+	inlineCode: "#ae81ff",
+	error: "#f92672",
+	selectedBg: "#49483e",
+	selectedText: "#ffffff",
+	count: "#fd971f",
+	status: {
+		draft: "#e6db74",
+		approved: "#a6e22e",
+		changes: "#f92672",
+		review: "#66d9ef",
+		none: "#90908a",
+		passing: "#a6e22e",
+		pending: "#e6db74",
+		failing: "#f92672",
+	},
+	repos: {
+		opencode: "#66d9ef",
+		"effect-smol": "#a6e22e",
+		"opencode-console": "#ae81ff",
+		opencontrol: "#fd971f",
+		default: "#a1efe4",
+	},
+	diff: {
+		addedBg: "#2f3a22",
+		removedBg: "#3d2430",
+		contextBg: "transparent",
+		lineNumberBg: "#1f201b",
+		addedLineNumberBg: "#2b3620",
+		removedLineNumberBg: "#38222d",
+	},
+}
+
+const solarizedDarkColors: ColorPalette = {
+	background: "#002b36",
+	modalBackground: "#123d48",
+	text: "#eee8d5",
+	muted: "#839496",
+	separator: "#586e75",
+	accent: "#268bd2",
+	inlineCode: "#2aa198",
+	error: "#dc322f",
+	selectedBg: "#174652",
+	selectedText: "#fdf6e3",
+	count: "#cb4b16",
+	status: {
+		draft: "#b58900",
+		approved: "#859900",
+		changes: "#dc322f",
+		review: "#268bd2",
+		none: "#839496",
+		passing: "#859900",
+		pending: "#b58900",
+		failing: "#dc322f",
+	},
+	repos: {
+		opencode: "#268bd2",
+		"effect-smol": "#859900",
+		"opencode-console": "#d33682",
+		opencontrol: "#cb4b16",
+		default: "#2aa198",
+	},
+	diff: {
+		addedBg: "#123c2e",
+		removedBg: "#3c262a",
+		contextBg: "transparent",
+		lineNumberBg: "#073642",
+		addedLineNumberBg: "#10372b",
+		removedLineNumberBg: "#362429",
+	},
+}
+
+const everforestColors: ColorPalette = {
+	background: "#2d353b",
+	modalBackground: "#343f44",
+	text: "#d3c6aa",
+	muted: "#859289",
+	separator: "#56635f",
+	accent: "#7fbbb3",
+	inlineCode: "#d699b6",
+	error: "#e67e80",
+	selectedBg: "#465258",
+	selectedText: "#fff4d6",
+	count: "#e69875",
+	status: {
+		draft: "#dbbc7f",
+		approved: "#a7c080",
+		changes: "#e67e80",
+		review: "#7fbbb3",
+		none: "#859289",
+		passing: "#a7c080",
+		pending: "#dbbc7f",
+		failing: "#e67e80",
+	},
+	repos: {
+		opencode: "#7fbbb3",
+		"effect-smol": "#a7c080",
+		"opencode-console": "#d699b6",
+		opencontrol: "#e69875",
+		default: "#83c092",
+	},
+	diff: {
+		addedBg: "#33422f",
+		removedBg: "#463333",
+		contextBg: "transparent",
+		lineNumberBg: "#232a2e",
+		addedLineNumberBg: "#303d2d",
+		removedLineNumberBg: "#403030",
+	},
+}
+
 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 },
@@ -384,6 +574,11 @@ export const themeDefinitions: readonly ThemeDefinition[] = [
 	{ id: "gruvbox", name: "Gruvbox", description: "Retro warm earth tones with punchy semantic accents", colors: gruvboxColors },
 	{ id: "nord", name: "Nord", description: "Arctic blue-gray surfaces with frosty accents", colors: nordColors },
 	{ id: "dracula", name: "Dracula", description: "High-contrast purple, pink, cyan, and green", colors: draculaColors },
+	{ id: "kanagawa", name: "Kanagawa", description: "Ink-wash indigo, wave blues, and autumn accents", colors: kanagawaColors },
+	{ id: "one-dark", name: "One Dark", description: "Atom-style charcoal with clean blue and green accents", colors: oneDarkColors },
+	{ 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: "opencode", name: "OpenCode", description: "Charcoal panels with peach, violet, and blue highlights", colors: opencodeColors },
 ] as const
 
@@ -393,6 +588,16 @@ export const colors: ColorPalette = { ...ghuiColors }
 
 export const getThemeDefinition = (id: ThemeId) => themeDefinitions.find((theme) => theme.id === id) ?? themeDefinitions[0]!
 
+export const filterThemeDefinitions = (query: string) => {
+	const normalized = query.trim().toLowerCase()
+	if (normalized.length === 0) return themeDefinitions
+	return themeDefinitions.filter((theme) =>
+		theme.id.includes(normalized) ||
+		theme.name.toLowerCase().includes(normalized) ||
+		theme.description.toLowerCase().includes(normalized),
+	)
+}
+
 export const setActiveTheme = (id: ThemeId) => {
 	if (activeTheme.id === id) return
 	activeTheme = getThemeDefinition(id)

package/src/ui/modals.tsx

@@ -1,7 +1,7 @@
 import { TextAttributes } from "@opentui/core"
 import type { PullRequestLabel, PullRequestMergeInfo } from "../domain.js"
 import { availableMergeActions } from "../mergeActions.js"
-import { colors, themeDefinitions, type ThemeId } from "./colors.js"
+import { colors, filterThemeDefinitions, themeDefinitions, type ThemeId } from "./colors.js"
 import { centerCell, Divider, fitCell, ModalFrame, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
 
@@ -27,6 +27,8 @@ export interface MergeModalState {
 
 export interface ThemeModalState {
 	readonly open: boolean
+	readonly query: string
+	readonly filterMode: boolean
 	readonly initialThemeId: ThemeId
 }
 
@@ -52,6 +54,8 @@ export const initialMergeModalState: MergeModalState = {
 
 export const initialThemeModalState: ThemeModalState = {
 	open: false,
+	query: "",
+	filterMode: false,
 	initialThemeId: "ghui",
 }
 
@@ -276,21 +280,27 @@ export const ThemeModal = ({
 	const innerWidth = Math.max(16, modalWidth - 2)
 	const contentWidth = Math.max(14, innerWidth - 2)
 	const rowWidth = innerWidth
-	const maxVisible = Math.max(1, modalHeight - 7)
-	const activeIndex = themeDefinitions.findIndex((theme) => theme.id === activeThemeId)
+	const filteredThemes = filterThemeDefinitions(state.query)
+	const maxVisible = Math.max(1, modalHeight - 8)
+	const activeIndex = filteredThemes.findIndex((theme) => theme.id === activeThemeId)
 	const selectedIndex = Math.max(0, activeIndex)
-	const selectedTheme = themeDefinitions[selectedIndex]!
+	const selectedTheme = filteredThemes[selectedIndex] ?? themeDefinitions.find((theme) => theme.id === activeThemeId) ?? themeDefinitions[0]!
 	const scrollStart = Math.min(
-		Math.max(0, themeDefinitions.length - maxVisible),
+		Math.max(0, filteredThemes.length - maxVisible),
 		Math.max(0, selectedIndex - maxVisible + 1),
 	)
-	const visibleThemes = themeDefinitions.slice(scrollStart, scrollStart + maxVisible)
-	const countText = `${selectedIndex + 1}/${themeDefinitions.length}`
+	const visibleThemes = filteredThemes.slice(scrollStart, scrollStart + maxVisible)
+	const countText = `${filteredThemes.length === 0 ? 0 : selectedIndex + 1}/${filteredThemes.length}`
 	const title = "Themes"
 	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
+	const queryText = state.query.length > 0 ? state.query : "type to filter themes"
+	const queryPrefix = "/ "
+	const queryWidth = Math.max(1, contentWidth - queryPrefix.length)
+	const messageTopRows = Math.max(0, Math.floor((maxVisible - 1) / 2))
+	const messageBottomRows = Math.max(0, maxVisible - messageTopRows - 1)
 
 	return (
-		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
+		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[3, modalHeight - 4]}>
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<TextLine>
 					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{title}</span>
@@ -301,9 +311,21 @@ export const ThemeModal = ({
 			<box height={1} paddingLeft={1} paddingRight={1}>
 				<PlainLine text={fitCell(selectedTheme.description, contentWidth)} fg={colors.muted} />
 			</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 height={maxVisible} flexDirection="column">
-				{visibleThemes.map((theme, index) => {
+				{visibleThemes.length === 0 ? (
+					<>
+						{Array.from({ length: messageTopRows }, (_, index) => <box key={`top-${index}`} height={1} />)}
+						<PlainLine text={centerCell("No matching themes", rowWidth)} fg={colors.muted} />
+						{Array.from({ length: messageBottomRows }, (_, index) => <box key={`bottom-${index}`} height={1} />)}
+					</>
+				) : visibleThemes.map((theme, index) => {
 					const actualIndex = scrollStart + index
 					const isSelected = actualIndex === selectedIndex
 					const isActive = theme.id === activeThemeId
@@ -317,7 +339,7 @@ export const ThemeModal = ({
 							<span> </span>
 							<span>{fitCell(theme.name, nameWidth)}</span>
 							<span bg={theme.colors.background}> </span>
-							<span bg={theme.colors.panel}> </span>
+							<span bg={theme.colors.modalBackground}> </span>
 							<span bg={theme.colors.accent}> </span>
 							<span bg={theme.colors.status.passing}> </span>
 							<span bg={theme.colors.status.failing}> </span>
@@ -331,6 +353,8 @@ export const ThemeModal = ({
 				<TextLine>
 					<span fg={colors.count}>↑↓</span>
 					<span fg={colors.muted}> preview  </span>
+					<span fg={colors.count}>/</span>
+					<span fg={colors.muted}> filter  </span>
 					<span fg={colors.count}>enter</span>
 					<span fg={colors.muted}> select  </span>
 					<span fg={colors.count}>esc</span>