@carlesandres/house 0.4.5 → 0.4.7

package/src/Browser.tsx

@@ -22,7 +22,7 @@ import { CommandPalette } from "./CommandPalette.tsx"
 import { filterFiles } from "./discovery/filter.ts"
 import { type FileEntry } from "./discovery/walk.ts"
 import { BRAND, BRAND_NAME } from "./brand.ts"
-import { Footer, FOOTER_HEIGHT } from "./Footer.tsx"
+import { Footer, FOOTER_HEIGHT, type FooterProps } from "./Footer.tsx"
 import { Header, HEADER_HEIGHT } from "./Header.tsx"
 import { HelpOverlay } from "./HelpOverlay.tsx"
 import { openInEditor, resolveEditor } from "./io/editor.ts"
@@ -37,6 +37,7 @@ import {
 } from "./layout/resolve.ts"
 import { formatSidebarRow } from "./layout/sidebarRow.ts"
 import { PromptRow } from "./PromptRow.tsx"
+import { buildReaderEmptyStateTips, pickTipByRotation } from "./tips.ts"
 import { openInBrowser } from "./serve/openBrowser.ts"
 import { startServer, type ServerHandle } from "./serve/server.ts"
 import { colors, setActiveTheme } from "./theme/colors.ts"
@@ -44,6 +45,7 @@ import { themeAtom } from "./theme/atom.ts"
 import { themeDefinitions, getThemeDefinition } from "./theme/registry.ts"
 
 export type SidebarMode = "auto" | "on" | "off"
+export type StartupFocus = "sidebar" | "reader" | "filter"
 
 export interface BrowserProps {
 	readonly files: readonly FileEntry[]
@@ -53,6 +55,17 @@ export interface BrowserProps {
 	/** Persistent footer indicator (e.g. "indexing… 42"). Pass null/undefined
 	 *  when discovery has finished; the indicator clears. */
 	readonly discoveryStatus?: string | null
+	/** Test seam: override the footer discovery spinner speed. */
+	readonly discoverySpinnerIntervalMs?: number
+	readonly discoverySpinnerInitialFrameIndex?: number
+	/** Test seam: deterministic footer spinner driver. */
+	readonly discoverySpinnerRegisterTick?: ((tick: () => void) => void) | null
+	/** Test seam: override filter debounce timing. */
+	readonly filterDebounceMs?: number
+	/** Test seam: override rendered-path debounce timing. */
+	readonly renderedPathDebounceMs?: number
+	/** Test seam: disable reader-empty-state tip rotation effect. */
+	readonly disableReaderEmptyStateRotation?: boolean
 	/** Initial sidebar visibility (`--sidebar` flag). `auto` consults the
 	 *  launch viewport bucket once; subsequent visibility goes through `s`. */
 	readonly sidebarMode?: SidebarMode
@@ -67,15 +80,16 @@ export interface BrowserProps {
 	/** TTL (ms) for the update-notice toast. Exposed so tests can use a small
 	 *  value instead of sleeping for the production 10s window. */
 	readonly updateNoticeTtlMs?: number
+	/** Test seam: disable footer-notice auto-clear timers. */
+	readonly disableFooterNoticeAutoClear?: boolean
 	/** Flip the parent's discovery vocabulary (#145). Browser doesn't need
 	 *  to know which categories are currently on — the toggle is opaque
 	 *  from this side; we just snapshot the selected path so it can be
 	 *  restored across the re-walk the parent triggers. */
 	readonly onToggleAll?: () => void
-	/** Open the sidebar filter prompt on mount so the user can type
-	 *  immediately. Esc closes it through the normal close path — no
-	 *  special "first close" behavior. */
-	readonly startInFilter?: boolean
+	/** Startup pane/input target. `filter` opens the sidebar filter prompt on
+	 *  mount so the user can type immediately. */
+	readonly startupFocus?: StartupFocus | null
 }
 
 const defaultReadFile = (path: string): Promise<string> => Effect.runPromise(readFileText(path))
@@ -94,18 +108,38 @@ const HELP_ALLOWED_IDS: ReadonlySet<string> = new Set([
 	"palette.open",
 ])
 
+let nextReaderEmptyStateTipRotation = 0
+
+export const resetReaderEmptyStateTipRotationForTests = () => {
+	nextReaderEmptyStateTipRotation = 0
+}
+
+export const setReaderEmptyStateTipRotationForTests = (next: number) => {
+	nextReaderEmptyStateTipRotation = next
+}
+
+const FILTER_DEBOUNCE_MS = 50
+const RENDERED_PATH_DEBOUNCE_MS = 80
+
 export const Browser = ({
 	files,
 	initialIndex = 0,
 	maxWidth = null,
 	discoveryStatus = null,
+	discoverySpinnerIntervalMs,
+	discoverySpinnerInitialFrameIndex,
+	discoverySpinnerRegisterTick = null,
+	filterDebounceMs = FILTER_DEBOUNCE_MS,
+	renderedPathDebounceMs = RENDERED_PATH_DEBOUNCE_MS,
+	disableReaderEmptyStateRotation = false,
 	sidebarMode = "auto",
 	onQuit,
 	readFile = defaultReadFile,
 	updateNotice = null,
 	updateNoticeTtlMs = 10000,
+	disableFooterNoticeAutoClear = false,
 	onToggleAll,
-	startInFilter = false,
+	startupFocus = null,
 }: BrowserProps) => {
 	const renderer = useRenderer()
 	const { width, height } = useTerminalDimensions()
@@ -134,17 +168,29 @@ export const Browser = ({
 				return initialShownForAuto(width)
 		}
 	})
-	// startInFilter mirrors `openFilter`'s focus rule: the filter input lives
-	// in the sidebar, so opening it on mount also forces sidebar focus
-	// regardless of `--sidebar=off` (§7.1's visibility derivation surfaces
-	// the sidebar via focus even when `shown` is false).
+	const startInFilter = startupFocus === "filter"
+	const initialFocus: "sidebar" | "reader" =
+		startupFocus === null
+			? shown
+				? "sidebar"
+				: "reader"
+			: startupFocus === "reader"
+				? "reader"
+				: "sidebar"
+	// `filter` mirrors `openFilter`'s focus rule: the filter input lives in
+	// the sidebar, so opening it on mount also forces sidebar focus regardless
+	// of `--sidebar=off` (§7.1's visibility derivation surfaces the sidebar via
+	// focus even when `shown` is false). Plain `sidebar` startup shares the
+	// same pane focus without opening the prompt. When omitted, preserve the
+	// legacy Browser behavior: initial focus follows visibility.
 	const [focus, setFocus] = useState<"sidebar" | "reader">(() =>
-		shown || startInFilter ? "sidebar" : "reader",
+		shown || initialFocus === "sidebar" ? "sidebar" : "reader",
 	)
 	const [sidebarScroll, setSidebarScroll] = useState<number>(0)
 	const [helpVisible, setHelpVisible] = useState<boolean>(false)
 	const [filterOpen, setFilterOpen] = useState<boolean>(startInFilter)
-	const [filterQuery, setFilterQuery] = useState<string>("")
+	const [filterInput, setFilterInput] = useState<string>("")
+	const [filterApplied, setFilterApplied] = useState<string>("")
 	const [paletteOpen, setPaletteOpen] = useState<boolean>(false)
 	const [paletteQuery, setPaletteQuery] = useState<string>("")
 	const [paletteIndex, setPaletteIndex] = useState<number>(0)
@@ -155,12 +201,20 @@ export const Browser = ({
 	const paletteOpenRef = useRef(false)
 	const paletteQueryRef = useRef("")
 	const paletteIndexRef = useRef(0)
+	const [readerEmptyStateTipRotation, setReaderEmptyStateTipRotation] = useState(
+		() => nextReaderEmptyStateTipRotation,
+	)
+	const readerEmptyStateVisibleRef = useRef(false)
 	// Mirror filter state into refs so the keyboard handler sees synchronous
 	// updates even when multiple keys arrive in a single React batch (the
 	// first key opens the filter; subsequent keys in the same tick would
 	// otherwise still observe filterOpen=false through closure).
 	const filterOpenRef = useRef(startInFilter)
-	const filterQueryRef = useRef("")
+	const filterInputRef = useRef("")
+	const filterAppliedRef = useRef("")
+	const autoSelectForAppliedFilterRef = useRef(true)
+	const focusRef = useRef<"sidebar" | "reader">(focus)
+	const restoreFilterOnSidebarFocusRef = useRef(startInFilter)
 	const [footerNotice, setFooterNoticeState] = useState<{
 		readonly text: string
 		readonly ttlMs: number
@@ -192,15 +246,20 @@ export const Browser = ({
 	// the other's display window.
 	useEffect(() => {
 		if (footerNotice === null) return
+		if (disableFooterNoticeAutoClear) return
 		const timer = setTimeout(() => setFooterNoticeState(null), footerNotice.ttlMs)
 		return () => clearTimeout(timer)
-	}, [footerNotice])
+	}, [disableFooterNoticeAutoClear, footerNotice])
 
 	// Push the update-available nudge once, when it arrives from the parent
 	// (the registry probe resolves asynchronously after boot). 10s gives the
 	// user time to read it before it auto-clears; the quit-time stderr print
 	// is the durable record they can copy from scrollback.
 	const updateNoticeSeenRef = useRef<string | null>(null)
+	useEffect(() => {
+		focusRef.current = focus
+	}, [focus])
+
 	useEffect(() => {
 		if (!updateNotice) return
 		if (updateNoticeSeenRef.current === updateNotice) return
@@ -225,7 +284,29 @@ export const Browser = ({
 		pushFooterNotice(`tone: ${nextTone}`)
 	}
 
-	const displayedFiles = useMemo(() => filterFiles(files, filterQuery), [files, filterQuery])
+	useEffect(() => {
+		if (filterInput === filterApplied) return
+		const timer = setTimeout(() => {
+			filterAppliedRef.current = filterInput
+			setFilterApplied(filterInput)
+		}, filterDebounceMs)
+		return () => clearTimeout(timer)
+	}, [filterApplied, filterDebounceMs, filterInput])
+
+	useEffect(() => {
+		autoSelectForAppliedFilterRef.current = true
+	}, [filterApplied])
+
+	const displayedFiles = useMemo(() => filterFiles(files, filterApplied), [files, filterApplied])
+	const filterHasNoMatches = filterInput.length > 0 && displayedFiles.length === 0
+
+	useEffect(() => {
+		if (filterApplied.length === 0) return
+		if (!autoSelectForAppliedFilterRef.current) return
+		if (displayedFiles.length === 0) return
+		setSelectedIndex(0)
+		autoSelectForAppliedFilterRef.current = false
+	}, [displayedFiles, filterApplied])
 	// When the filtered list shrinks, keep selectedIndex valid. The reset to 0
 	// on every query change happens in the keystroke handler, not here, so a
 	// no-op rerender doesn't snap the cursor back to the top.
@@ -263,9 +344,9 @@ export const Browser = ({
 	useEffect(() => {
 		const target = selected?.path ?? null
 		if (target === renderedPath) return
-		const timer = setTimeout(() => setRenderedPath(target), 80)
+		const timer = setTimeout(() => setRenderedPath(target), renderedPathDebounceMs)
 		return () => clearTimeout(timer)
-	}, [selected?.path, renderedPath])
+	}, [selected?.path, renderedPath, renderedPathDebounceMs])
 
 	useEffect(() => {
 		if (!renderedPath) {
@@ -306,7 +387,8 @@ export const Browser = ({
 		sidebarShown: shown,
 		helpVisible,
 		filterOpen,
-		filterQuery,
+		restoreFilterOnSidebarFocus: restoreFilterOnSidebarFocusRef.current,
+		filterQuery: filterInput,
 		paletteOpen,
 		setFocus,
 		// Wrapped so any keymap-driven selection move (j/k/g/G/[/], reader
@@ -316,6 +398,7 @@ export const Browser = ({
 		// itself) deliberately use the raw `setSelectedIndex` setter.
 		setSelectedIndex: (updater) => {
 			pendingSelectionPathRef.current = null
+			autoSelectForAppliedFilterRef.current = false
 			setSelectedIndex(updater)
 		},
 		toggleShown: () => {
@@ -349,7 +432,9 @@ export const Browser = ({
 			// the inline sidebar back on screen if it was hidden. In narrow,
 			// focusing the sidebar swaps to the sidebar screen. Either way
 			// no need to mutate `shown`.
+			focusRef.current = "sidebar"
 			if (focus !== "sidebar") setFocus("sidebar")
+			restoreFilterOnSidebarFocusRef.current = true
 			filterOpenRef.current = true
 			setFilterOpen(true)
 		},
@@ -357,10 +442,14 @@ export const Browser = ({
 			// Reset both the ref and the state so the freshly-opened modal
 			// shows an empty input and selection lands on the first file in
 			// the (now unfiltered) list.
-			filterQueryRef.current = ""
-			setFilterQuery("")
+			filterInputRef.current = ""
+			filterAppliedRef.current = ""
+			setFilterInput("")
+			setFilterApplied("")
 			setSelectedIndex(() => 0)
+			focusRef.current = "sidebar"
 			if (focus !== "sidebar") setFocus("sidebar")
+			restoreFilterOnSidebarFocusRef.current = true
 			filterOpenRef.current = true
 			setFilterOpen(true)
 		},
@@ -429,7 +518,7 @@ export const Browser = ({
 			if (!file) return
 			const editor = resolveEditor(process.env)
 			if (!editor) {
-				pushFooterNotice("set $EDITOR or $VISUAL to use e")
+				pushFooterNotice("set $EDITOR or $VISUAL to use E")
 				return
 			}
 			if (!renderer) {
@@ -500,13 +589,16 @@ export const Browser = ({
 		// so normal bindings (j/k as nav, `s`, `t`, …) don't fire while
 		// the user is typing. This sits outside the data-driven keymap
 		// for the same reason the help branch does — see DESIGN.md §12.
-		if (filterOpenRef.current) {
+		if (filterOpenRef.current && focusRef.current === "sidebar") {
 			// One close path used by both Esc and Return. `commit=true` is
 			// the Return semantic (open the match in the reader); false is
 			// Esc (stop typing, keep the applied filter, stay in sidebar).
 			const closeFilter = (commit: boolean) => {
+				filterAppliedRef.current = filterInputRef.current
+				setFilterApplied(filterInputRef.current)
 				const picked = displayedFiles[selectedIndex] ?? null
 				const effectiveCommit = commit && picked !== null
+				restoreFilterOnSidebarFocusRef.current = false
 				filterOpenRef.current = false
 				setFilterOpen(false)
 				// Where focus lands after the filter closes:
@@ -515,9 +607,12 @@ export const Browser = ({
 				//   otherwise → sidebar if it's up so j/k keeps walking the
 				//     filtered list; reader if the sidebar was hidden.
 				if (effectiveCommit) {
+					focusRef.current = "reader"
 					setFocus("reader")
 				} else {
-					setFocus(shown ? "sidebar" : "reader")
+					const nextFocus = shown ? "sidebar" : "reader"
+					focusRef.current = nextFocus
+					setFocus(nextFocus)
 				}
 			}
 			if (key.name === "escape") {
@@ -528,25 +623,35 @@ export const Browser = ({
 				closeFilter(true)
 				return
 			}
+			if (key.name === "tab" || (key.ctrl && key.name === "i" && !key.shift && !key.meta)) {
+				focusRef.current = "reader"
+				restoreFilterOnSidebarFocusRef.current = true
+				filterOpenRef.current = false
+				setFilterOpen(false)
+				setFocus("reader")
+				return
+			}
 			if (key.ctrl && key.name === "\\") {
 				// Same action as the `filter.clearOrOpen` binding fires from
 				// outside the modal: clear the query, reset selection. The
 				// keymap doesn't see keys in filter mode, so this branch is
 				// the in-modal half of that single chord.
-				filterQueryRef.current = ""
-				setFilterQuery("")
+				filterInputRef.current = ""
+				filterAppliedRef.current = ""
+				setFilterInput("")
+				setFilterApplied("")
 				setSelectedIndex(() => 0)
 				return
 			}
 			if (key.name === "backspace" || key.name === "delete") {
 				// Backspace on empty input closes the modal — the leading `/`
 				// chevron is the last thing left to "delete."
-				if (filterQueryRef.current.length === 0) {
+				if (filterInputRef.current.length === 0) {
 					closeFilter(false)
 					return
 				}
-				filterQueryRef.current = filterQueryRef.current.slice(0, -1)
-				setFilterQuery(filterQueryRef.current)
+				filterInputRef.current = filterInputRef.current.slice(0, -1)
+				setFilterInput(filterInputRef.current)
 				setSelectedIndex(() => 0)
 				return
 			}
@@ -565,8 +670,8 @@ export const Browser = ({
 				char = key.shift ? key.name.toUpperCase() : key.name
 			}
 			if (char !== null) {
-				filterQueryRef.current = filterQueryRef.current + char
-				setFilterQuery(filterQueryRef.current)
+				filterInputRef.current = filterInputRef.current + char
+				setFilterInput(filterInputRef.current)
 				setSelectedIndex(() => 0)
 			}
 			return
@@ -682,6 +787,22 @@ export const Browser = ({
 	// per-pane border title that used to carry this information).
 	const currentFile = selected?.relativePath ?? null
 	const content = loaded?.path === renderedPath ? loaded.content : ""
+	const readerEmptyStateTitle = filterHasNoMatches
+		? `No files match: ${filterInput}`
+		: `${BRAND} ${BRAND_NAME}`
+	const readerEmptyStateVisible = error == null && renderedPath == null
+
+	useEffect(() => {
+		if (disableReaderEmptyStateRotation) return
+		if (readerEmptyStateVisible) {
+			if (!readerEmptyStateVisibleRef.current) {
+				readerEmptyStateVisibleRef.current = true
+				setReaderEmptyStateTipRotation(nextReaderEmptyStateTipRotation++)
+			}
+			return
+		}
+		readerEmptyStateVisibleRef.current = false
+	}, [disableReaderEmptyStateRotation, readerEmptyStateVisible])
 
 	// Sidebar virtualization: render only the visible window. Without this,
 	// every keystroke re-renders all N file rows even though only the bg of
@@ -732,6 +853,24 @@ export const Browser = ({
 				: browserBindings,
 		[helpVisible],
 	)
+	const footerProps = {
+		bindings: footerBindings,
+		ctx,
+		width,
+		notice: footerNotice?.text ?? null,
+		discoveryStatus,
+		filterQuery: !filterOpen && filterInput.length > 0 ? filterInput : null,
+		...(discoverySpinnerIntervalMs === undefined ? {} : { discoverySpinnerIntervalMs }),
+		...(discoverySpinnerInitialFrameIndex === undefined
+			? {}
+			: { discoverySpinnerInitialFrameIndex }),
+		...(discoverySpinnerRegisterTick === undefined ? {} : { discoverySpinnerRegisterTick }),
+	} satisfies FooterProps<BrowserCtx>
+	const readerEmptyStateTips = useMemo(() => buildReaderEmptyStateTips(browserBindings, ctx), [ctx])
+	const readerEmptyStateTip = useMemo(
+		() => pickTipByRotation(readerEmptyStateTips, readerEmptyStateTipRotation),
+		[readerEmptyStateTipRotation, readerEmptyStateTips],
+	)
 
 	// One sidebar body for both wide-inline and narrow-stack rendering; only
 	// the wrapper differs (fixed-width sibling vs flex-grow full-pane).
@@ -739,7 +878,7 @@ export const Browser = ({
 		<>
 			{filterRowVisible && (
 				<PromptRow
-					query={filterQuery}
+					query={filterInput}
 					editing={filterOpen}
 					placeholder="/ to filter…"
 					width={sidebarTextWidth}
@@ -761,9 +900,17 @@ export const Browser = ({
 					const realIdx = desiredScroll + idx
 					const isSelected = realIdx === selectedIndex
 					const { basename, separator, parent } = layoutSidebarRow(file.relativePath)
-					const basenameFg = isSelected ? colors.textStrong : colors.text
+					const selectedFg =
+						colors.selectedListItemText === colors.background
+							? colors.primary
+							: colors.selectedListItemText
+					const basenameFg = isSelected
+						? sidebarActive
+							? selectedFg
+							: colors.primary
+						: colors.text
 					const rowStyle = isSelected
-						? { bg: sidebarActive ? colors.selectedBg : colors.selectedBgInactive }
+						? { bg: sidebarActive ? colors.backgroundElement : colors.borderSubtle }
 						: {}
 					return (
 						<text key={file.path} wrapMode="none" style={rowStyle}>
@@ -801,14 +948,16 @@ export const Browser = ({
 	} as const
 
 	return (
-		<box style={{ width, height, flexDirection: "column", backgroundColor: colors.surface }}>
+		<box
+			style={{ width, height, flexDirection: "column", backgroundColor: colors.backgroundPanel }}
+		>
 			<Header width={width} currentFile={currentFile} />
 			<box
 				style={{
 					flexDirection: "row",
 					flexGrow: 1,
 					flexShrink: 1,
-					backgroundColor: colors.surface,
+					backgroundColor: colors.backgroundPanel,
 				}}
 			>
 				{sidebarInline && (
@@ -825,7 +974,7 @@ export const Browser = ({
 							// Dim by default. Borders/separators ride on this so they read
 							// as a single connected frame regardless of focus; only the
 							// active pane's inner body overrides to the raised tint below.
-							backgroundColor: colors.surface,
+							backgroundColor: colors.backgroundPanel,
 						}}
 						{...(isNarrow ? {} : { customBorderChars: SIDEBAR_BORDER_CHARS })}
 					>
@@ -835,7 +984,7 @@ export const Browser = ({
 								flexShrink: 1,
 								flexDirection: "column",
 								paddingLeft: 1,
-								backgroundColor: sidebarActive ? colors.background : colors.surface,
+								backgroundColor: sidebarActive ? colors.background : colors.backgroundPanel,
 							}}
 						>
 							{sidebarBody}
@@ -851,7 +1000,7 @@ export const Browser = ({
 							flexShrink: 1,
 							flexDirection: "column",
 							// Dim by default (see sidebar note); inner body overrides when active.
-							backgroundColor: colors.surface,
+							backgroundColor: colors.backgroundPanel,
 						}}
 					>
 						<box
@@ -860,28 +1009,38 @@ export const Browser = ({
 								flexShrink: 1,
 								flexDirection: "column",
 								padding: 1,
-								backgroundColor: readerActive ? colors.background : colors.surface,
+								backgroundColor: readerActive ? colors.background : colors.backgroundPanel,
 							}}
 						>
 							{error ? (
 								<text content={error} style={{ fg: colors.error }} />
 							) : !renderedPath ? (
 								// Reader empty state — no file selected. Brand mark centered as a
-								// welcome anchor; in-app tips (#47) will live here too.
+								// welcome anchor; reusable tips live here too.
 								<box
 									style={{
 										flexGrow: 1,
 										flexShrink: 1,
 										alignItems: "center",
 										justifyContent: "center",
-										backgroundColor: readerActive ? colors.background : colors.surface,
+										backgroundColor: readerActive ? colors.background : colors.backgroundPanel,
 									}}
 								>
-									<text
-										content={`${BRAND} ${BRAND_NAME}`}
-										wrapMode="none"
-										style={{ fg: colors.textMuted }}
-									/>
+									<box style={{ flexDirection: "column", gap: 1, alignItems: "center" }}>
+										<text
+											content={readerEmptyStateTitle}
+											wrapMode="none"
+											style={{ fg: colors.textMuted }}
+										/>
+										{readerEmptyStateTip && (
+											<text
+												key={readerEmptyStateTip.id}
+												content={readerEmptyStateTip.text}
+												wrapMode="none"
+												style={{ fg: colors.textMuted }}
+											/>
+										)}
+									</box>
 								</box>
 							) : (
 								<scrollbox
@@ -890,7 +1049,7 @@ export const Browser = ({
 										scrollX: false,
 										flexGrow: 1,
 										flexShrink: 1,
-										backgroundColor: readerActive ? colors.background : colors.surface,
+										backgroundColor: readerActive ? colors.background : colors.backgroundPanel,
 									}}
 									// opentui's scrollbox consumes arrow keys at the focused-element
 									// level *before* useKeyboard fires, so a modal that handles
@@ -907,7 +1066,7 @@ export const Browser = ({
 										content={content}
 										syntaxStyle={syntaxStyle}
 										fg={colors.text}
-										bg={readerActive ? colors.background : colors.surface}
+										bg={readerActive ? colors.background : colors.backgroundPanel}
 										conceal
 										style={{ width: maxWidth ?? "100%" }}
 									/>
@@ -917,14 +1076,7 @@ export const Browser = ({
 					</box>
 				)}
 			</box>
-			<Footer
-				bindings={footerBindings}
-				ctx={ctx}
-				width={width}
-				notice={footerNotice?.text ?? null}
-				discoveryStatus={discoveryStatus}
-				filterQuery={!filterOpen && filterQuery.length > 0 ? filterQuery : null}
-			/>
+			<Footer {...footerProps} />
 			{helpVisible && (
 				<HelpOverlay bindings={browserBindings} viewportWidth={width} viewportHeight={height} />
 			)}

package/src/CommandPalette.tsx

@@ -102,7 +102,7 @@ export const CommandPalette = ({
 					border: true,
 					borderColor: colors.textMuted,
 					flexDirection: "column",
-					backgroundColor: colors.surface,
+					backgroundColor: colors.backgroundPanel,
 				}}
 			>
 				<PromptRow query={query} editing={true} width={rowWidth} />
@@ -119,15 +119,15 @@ export const CommandPalette = ({
 							? fitRight(cmd.shortcut, SHORTCUT_WIDTH)
 							: " ".repeat(SHORTCUT_WIDTH)
 						// Title and shortcut render as separate spans so the shortcut
-						// can use `textMuted` while the title uses `text`/`textStrong`.
+						// can use `textMuted` while the title uses `text`/`primary`.
 						// Same trick opencode pulls with `--text-weak` — the theme
 						// guarantees the contrast, we just pick the right role.
-						const titleFg = isSelected ? colors.textStrong : colors.text
+						const titleFg = isSelected ? colors.primary : colors.text
 						return (
 							<text
 								key={cmd.id}
 								wrapMode="none"
-								style={isSelected ? { bg: colors.selectedBg } : {}}
+								style={isSelected ? { bg: colors.backgroundElement } : {}}
 							>
 								<span style={{ fg: titleFg }}>{`${selector}${titleText} `}</span>
 								<span style={{ fg: colors.textMuted }}>{shortcutText}</span>