@carlesandres/house 0.3.0 → 0.4.0

package/src/Browser.tsx

@@ -14,7 +14,10 @@ import { SyntaxStyle } from "@opentui/core"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
 import { useAtomValue, useAtomSet } from "@effect/atom-react"
 import { Effect } from "effect"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { buildCommands } from "./commands/buildCommands.ts"
+import { clampSelectedIndex, filterCommands } from "./commands/score.ts"
+import { CommandPalette } from "./CommandPalette.tsx"
 import { filterFiles } from "./discovery/filter.ts"
 import { type FileEntry } from "./discovery/walk.ts"
 import { Footer, FOOTER_HEIGHT } from "./Footer.tsx"
@@ -22,18 +25,32 @@ import { HelpOverlay } from "./HelpOverlay.tsx"
 import { readFileText } from "./io/readFile.ts"
 import { browserBindings, type BrowserCtx } from "./keymap/browser.ts"
 import { dispatch } from "./keymap/keymap.ts"
+import {
+	canFitInline,
+	defaultPreferredWidth,
+	initialShownForAuto,
+	resolveSidebarWidth,
+} from "./layout/resolve.ts"
 import { openInBrowser } from "./serve/openBrowser.ts"
 import { startServer, type ServerHandle } from "./serve/server.ts"
 import { colors, setActiveTheme } from "./theme/colors.ts"
 import { themeAtom } from "./theme/atom.ts"
 import { themeDefinitions, getThemeDefinition } from "./theme/registry.ts"
 
+export type SidebarMode = "auto" | "on" | "off"
+
 export interface BrowserProps {
 	readonly files: readonly FileEntry[]
 	readonly title?: string
 	readonly initialIndex?: number
 	/** Cap the rendered markdown's width at N columns. Null = fill the pane. */
 	readonly maxWidth?: number | null
+	/** Persistent footer indicator (e.g. "indexing… 42"). Pass null/undefined
+	 *  when discovery has finished; the indicator clears. */
+	readonly discoveryStatus?: string | null
+	/** Initial sidebar visibility (`--sidebar` flag). `auto` consults the
+	 *  launch viewport bucket once; subsequent visibility goes through `s`. */
+	readonly sidebarMode?: SidebarMode
 	readonly onQuit?: () => void
 	/** Test seam: replaces the file reader. */
 	readonly readFile?: (path: string) => Promise<string>
@@ -44,12 +61,15 @@ const defaultReadFile = (path: string): Promise<string> => Effect.runPromise(rea
 const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n))
 
 /** Bindings the help overlay lets through. Single source of truth for both
- *  the keyboard early-return and the footer hint filter. */
+ *  the keyboard early-return and the footer hint filter. `palette.open`
+ *  passes through so users can jump from help into the palette in one
+ *  keystroke — `openPalette` closes help on its way in. */
 const HELP_ALLOWED_IDS: ReadonlySet<string> = new Set([
 	"help.toggle",
 	"theme.next",
 	"theme.prev",
 	"theme.toneToggle",
+	"palette.open",
 ])
 
 export const Browser = ({
@@ -57,6 +77,8 @@ export const Browser = ({
 	title = "house",
 	initialIndex = 0,
 	maxWidth = null,
+	discoveryStatus = null,
+	sidebarMode = "auto",
 	onQuit,
 	readFile = defaultReadFile,
 }: BrowserProps) => {
@@ -69,20 +91,49 @@ export const Browser = ({
 	const [selectedIndex, setSelectedIndex] = useState(() =>
 		clamp(initialIndex, 0, Math.max(0, files.length - 1)),
 	)
-	const [content, setContent] = useState<string>("")
+	const [loaded, setLoaded] = useState<{ path: string; content: string } | null>(null)
 	const [error, setError] = useState<string | null>(null)
-	const [focus, setFocus] = useState<"sidebar" | "reader">("sidebar")
-	const [sidebarVisible, setSidebarVisible] = useState<boolean>(true)
+	// `shown` is the user's sticky preference. Visibility is derived:
+	// `visible = shown || focus === "sidebar"`. See DESIGN.md §7.1.
+	//
+	// Launch consults the viewport bucket once for `--sidebar=auto`. The
+	// useState initializer pins this to the first render — buckets are
+	// launch-only by design, so resize must NOT re-evaluate.
+	const [shown, setShown] = useState<boolean>(() => {
+		switch (sidebarMode) {
+			case "on":
+				return true
+			case "off":
+				return false
+			case "auto":
+				return initialShownForAuto(width)
+		}
+	})
+	const [focus, setFocus] = useState<"sidebar" | "reader">(() => (shown ? "sidebar" : "reader"))
 	const [sidebarScroll, setSidebarScroll] = useState<number>(0)
 	const [helpVisible, setHelpVisible] = useState<boolean>(false)
 	const [filterOpen, setFilterOpen] = useState<boolean>(false)
 	const [filterQuery, setFilterQuery] = useState<string>("")
+	const [paletteOpen, setPaletteOpen] = useState<boolean>(false)
+	const [paletteQuery, setPaletteQuery] = useState<string>("")
+	const [paletteIndex, setPaletteIndex] = useState<number>(0)
+	// Synchronous mirrors for the keyboard handler — same reason filterOpenRef
+	// exists. Modal input can arrive in one React batch (e.g. ctrl+p, Down,
+	// Return), so every palette field read by later keys must update its ref
+	// before React state commits.
+	const paletteOpenRef = useRef(false)
+	const paletteQueryRef = useRef("")
+	const paletteIndexRef = useRef(0)
 	// 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(false)
 	const filterQueryRef = useRef("")
+	// Snapshot the query at filter-open so Esc reverts edits but commit (Return)
+	// keeps them. Layout snapshots are no longer needed — focus drives drawer
+	// dismissal under the §7.1 visibility rule.
+	const priorFilterQueryRef = useRef("")
 	const [footerNotice, setFooterNotice] = useState<string | null>(null)
 	const serverRef = useRef<ServerHandle | null>(null)
 
@@ -121,7 +172,6 @@ export const Browser = ({
 	}
 
 	const displayedFiles = useMemo(() => filterFiles(files, filterQuery), [files, filterQuery])
-
 	// 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.
@@ -145,24 +195,24 @@ export const Browser = ({
 		if (target === renderedPath) return
 		const timer = setTimeout(() => setRenderedPath(target), 80)
 		return () => clearTimeout(timer)
-	}, [selected, renderedPath])
+	}, [selected?.path, renderedPath])
 
 	useEffect(() => {
 		if (!renderedPath) {
-			setContent("")
+			setLoaded(null)
 			return
 		}
 		let cancelled = false
 		readFile(renderedPath).then(
 			(text) => {
 				if (!cancelled) {
-					setContent(text)
+					setLoaded({ path: renderedPath, content: text })
 					setError(null)
 				}
 			},
 			(err: unknown) => {
 				if (!cancelled) {
-					setContent("")
+					setLoaded(null)
 					setError(`Cannot read ${renderedPath}: ${String(err)}`)
 				}
 			},
@@ -182,17 +232,51 @@ export const Browser = ({
 	const ctx: BrowserCtx = {
 		files: displayedFiles,
 		focus,
-		sidebarVisible,
+		sidebarShown: shown,
 		helpVisible,
 		filterOpen,
+		paletteOpen,
 		setFocus,
 		setSelectedIndex,
-		setSidebarVisible,
+		toggleShown: () => {
+			// Per DESIGN.md §7.1 s-behavior table:
+			//   shown=true,  focus=sidebar → shown=false, focus=reader
+			//                                (otherwise the drawer would
+			//                                 immediately re-appear)
+			//   shown=true,  focus=reader  → shown=false, focus=reader
+			//   shown=false, focus=reader  → shown=true,  focus=sidebar
+			//   shown=false, focus=sidebar → shown=true,  focus=sidebar
+			if (shown) {
+				setShown(false)
+				if (focus === "sidebar") setFocus("reader")
+			} else {
+				setShown(true)
+				if (focus === "reader") setFocus("sidebar")
+			}
+		},
 		setHelpVisible,
 		openFilter: () => {
+			// Focus the sidebar so the filter input has a home. Under §7.1's
+			// `visible = shown || focus==="sidebar"` rule, focus alone makes
+			// the sidebar visible (as a drawer when `shown=false`), so we no
+			// longer need to mutate `shown` here.
+			priorFilterQueryRef.current = filterQueryRef.current
+			if (focus !== "sidebar") setFocus("sidebar")
 			filterOpenRef.current = true
 			setFilterOpen(true)
 		},
+		openPalette: () => {
+			// Close help if it was open — palette is the active modal now.
+			// Reset query/index so each open starts fresh (no stale state from
+			// the previous session).
+			if (helpVisible) setHelpVisible(() => false)
+			paletteQueryRef.current = ""
+			setPaletteQuery("")
+			paletteIndexRef.current = 0
+			setPaletteIndex(0)
+			paletteOpenRef.current = true
+			setPaletteOpen(true)
+		},
 		cycleTheme,
 		toggleTone,
 		serveCurrent: () => {
@@ -250,17 +334,46 @@ export const Browser = ({
 			//
 			// Centralized so the dual filterOpenRef / filterOpen invariant
 			// only has to be maintained in one place (plus `openFilter`).
-			const closeFilter = (focusReader: boolean) => {
+			const closeFilter = (commit: boolean) => {
 				const picked = displayedFiles[selectedIndex] ?? null
+				// Return on a zero-match list has nothing to commit. Treat it
+				// as Esc so the user isn't stranded in an "applied filter with
+				// no visible files" state they'd have to back out of manually.
+				const effectiveCommit = commit && picked !== null
 				filterOpenRef.current = false
-				filterQueryRef.current = ""
 				setFilterOpen(false)
-				setFilterQuery("")
-				if (picked) {
-					const fullIdx = files.findIndex((f) => f.path === picked.path)
-					if (fullIdx >= 0) setSelectedIndex(() => fullIdx)
+				if (effectiveCommit) {
+					// Return keeps the query. selectedIndex is already a valid
+					// position in the (still-filtered) displayedFiles list, so
+					// no translation is needed.
+				} else {
+					// Esc reverts the query to its pre-session value. After the
+					// revert, displayedFiles may change shape — translate the
+					// cursor by path so it stays on whatever the user was
+					// looking at, instead of snapping to a numerically-equivalent
+					// row in the restored list.
+					const before = priorFilterQueryRef.current
+					filterQueryRef.current = before
+					setFilterQuery(before)
+					if (picked) {
+						const restored = before === "" ? files : filterFiles(files, before)
+						const idx = restored.findIndex((f) => f.path === picked.path)
+						if (idx >= 0) setSelectedIndex(() => idx)
+					}
+				}
+				// Where focus lands depends on layout intent (DESIGN.md §7.1):
+				//   commit (Return on a real pick) → reader, always. The user
+				//     asked to open the match; show them what they picked.
+				//   cancel (Esc, or Return with no pick) → if the sidebar is
+				//     inline (shown && fits), keep focus there so j/k keeps
+				//     walking the list; if the sidebar was only up as a drawer
+				//     (shown=false), dismiss focus to the reader so the drawer
+				//     disappears under the §7.1 visibility rule.
+				if (effectiveCommit) {
+					setFocus("reader")
+				} else {
+					setFocus(shown && canFitInline(width) ? "sidebar" : "reader")
 				}
-				if (focusReader && picked) setFocus("reader")
 			}
 			if (key.name === "escape") {
 				closeFilter(false)
@@ -270,7 +383,15 @@ export const Browser = ({
 				closeFilter(true)
 				return
 			}
-			if (key.name === "backspace") {
+			if (key.name === "backspace" || key.name === "delete") {
+				// Pressing backspace/delete with no query left removes the
+				// leading `/` — i.e. closes the modal. Equivalent to Esc:
+				// reverts to the pre-session query (so an applied filter
+				// survives a "I changed my mind" tap).
+				if (filterQueryRef.current.length === 0) {
+					closeFilter(false)
+					return
+				}
 				filterQueryRef.current = filterQueryRef.current.slice(0, -1)
 				setFilterQuery(filterQueryRef.current)
 				setSelectedIndex(() => 0)
@@ -297,6 +418,74 @@ export const Browser = ({
 			}
 			return
 		}
+		// Command palette modal: capture keystrokes for the query input and
+		// list navigation. Esc closes (single press, regardless of query —
+		// #70 Q7a). Return runs the selected command. Up/Down navigate.
+		// Backspace edits the query and is a no-op on empty (#70 Q7b —
+		// intentionally diverges from the filter modal, which closes on
+		// empty-backspace, because accidental close feels worse in the
+		// palette). Printable characters extend the query and snap selection
+		// to 0 (#70 Q7c). Ctrl/Meta-modified keys are swallowed except
+		// ctrl+p, which toggles the palette closed (matches help-toggle's
+		// re-press-to-close behavior).
+		if (paletteOpenRef.current) {
+			const closePalette = () => {
+				paletteOpenRef.current = false
+				paletteQueryRef.current = ""
+				paletteIndexRef.current = 0
+				setPaletteOpen(false)
+				setPaletteQuery("")
+				setPaletteIndex(0)
+			}
+			const setPaletteIndexSync = (next: number) => {
+				paletteIndexRef.current = next
+				setPaletteIndex(next)
+			}
+			const allCommands = buildCommands(ctx)
+			const filtered = filterCommands(allCommands, paletteQueryRef.current)
+			if (key.name === "escape") {
+				closePalette()
+				return
+			}
+			if (key.name === "return") {
+				const picked = filtered[clampSelectedIndex(paletteIndexRef.current, filtered)]
+				closePalette()
+				picked?.run()
+				return
+			}
+			if (key.name === "up") {
+				setPaletteIndexSync(Math.max(0, paletteIndexRef.current - 1))
+				return
+			}
+			if (key.name === "down") {
+				setPaletteIndexSync(Math.min(Math.max(0, filtered.length - 1), paletteIndexRef.current + 1))
+				return
+			}
+			if (key.name === "backspace" || key.name === "delete") {
+				if (paletteQueryRef.current.length === 0) return
+				paletteQueryRef.current = paletteQueryRef.current.slice(0, -1)
+				setPaletteQuery(paletteQueryRef.current)
+				setPaletteIndexSync(0)
+				return
+			}
+			// ctrl+p again closes — matches help-toggle behavior.
+			if (key.ctrl && !key.meta && key.name === "p") {
+				closePalette()
+				return
+			}
+			if (key.ctrl || key.meta) return
+			let char: string | null = null
+			if (key.name === "space") char = " "
+			else if (typeof key.name === "string" && key.name.length === 1) {
+				char = key.shift ? key.name.toUpperCase() : key.name
+			}
+			if (char !== null) {
+				paletteQueryRef.current = paletteQueryRef.current + char
+				setPaletteQuery(paletteQueryRef.current)
+				setPaletteIndexSync(0)
+			}
+			return
+		}
 		// While help is open, swallow most keys: only ? (toggle), esc
 		// (close), and the theme bindings pass through. Theme keys stay live
 		// so users can preview palette changes against the overlay itself —
@@ -321,22 +510,49 @@ export const Browser = ({
 		dispatch(browserBindings, ctx, key)
 	})
 
-	// Min/max-clamped percentage of viewport: narrow terminals stay readable,
-	// wide terminals get more room without wasting space at extremes.
-	// User-configurable width is deferred — see DESIGN.md §12.
-	const sidebarWidth = Math.max(28, Math.min(60, Math.floor(width * 0.25)))
+	// Sidebar width is a pure function of viewport (DESIGN.md §7.1). Until
+	// persistent config (#13) lands, `preferred` is derived from viewport,
+	// matching the pre-#22 inline math.
+	const sidebarWidth = resolveSidebarWidth(width, defaultPreferredWidth(width))
 	const sidebarActive = focus === "sidebar"
 	const readerActive = focus === "reader"
+	// Visibility = shown OR sidebar-focused. When visible-because-focused
+	// only, render as a drawer (absolute) on top of the reader. We also
+	// fall back to drawer rendering when the viewport is too narrow for
+	// the inline two-pane layout even with `shown=true` (Q2 in DESIGN.md
+	// §7.1) — preserves the user's preference without squeezing the reader
+	// below READER_MIN_WIDTH.
+	const sidebarVisible = shown || sidebarActive
+	const sidebarAsDrawer = sidebarVisible && (!shown || !canFitInline(width))
+	const sidebarInline = sidebarVisible && !sidebarAsDrawer
+	// Drawer is offset 1 row from the top so the reader's title stays visible.
+	// That row comes off the drawer's own height, so the body has one fewer
+	// usable row than the inline sidebar. Tracked here so the virtualization
+	// slice matches the wrapper that actually paints it.
+	const drawerTopOffset = 1
 	const sidebarTitle = sidebarActive ? " ▸ files " : "   files "
 	const readerLabel = selected?.relativePath ?? title
 	const readerTitle = readerActive ? ` ▸ ${readerLabel} ` : `   ${readerLabel} `
+	const content = loaded?.path === renderedPath ? loaded.content : ""
 
 	// Sidebar virtualization: render only the visible window. Without this,
 	// every keystroke re-renders all N file rows even though only the bg of
 	// two of them changed (old + new selected). On a 195-file vault that
 	// dominates the per-keystroke cost.
-	// Sidebar box adds top/bottom borders (2); footer eats FOOTER_HEIGHT.
-	const sidebarBodyHeight = Math.max(1, height - 2 - FOOTER_HEIGHT)
+	// Sidebar box adds top/bottom borders (2); footer eats FOOTER_HEIGHT;
+	// the filter row eats one more cell when files are present *or* while
+	// discovery is in flight (allocates the row up front so it doesn't pop
+	// in when the first file arrives).
+	const discoveryActive = discoveryStatus !== null && discoveryStatus.length > 0
+	const filterRowVisible = files.length > 0 || discoveryActive
+	const sidebarBodyHeight = Math.max(
+		1,
+		height -
+			2 -
+			FOOTER_HEIGHT -
+			(filterRowVisible ? 1 : 0) -
+			(sidebarAsDrawer ? drawerTopOffset : 0),
+	)
 	const maxScroll = Math.max(0, displayedFiles.length - sidebarBodyHeight)
 	const desiredScroll = (() => {
 		let s = sidebarScroll
@@ -352,16 +568,92 @@ export const Browser = ({
 	const sidebarTextWidth = Math.max(4, sidebarWidth - 2)
 	// Right-anchored truncation: keep the filename visible, lose the prefix
 	// with a leading ellipsis when the path is too long.
-	const truncatePath = (s: string): string =>
-		s.length <= sidebarTextWidth ? s : "…" + s.slice(s.length - sidebarTextWidth + 1)
+	const truncatePath = useCallback(
+		(s: string): string =>
+			s.length <= sidebarTextWidth ? s : "…" + s.slice(s.length - sidebarTextWidth + 1),
+		[sidebarTextWidth],
+	)
+
+	// Filter row content + color. Three reachable states:
+	//   editing  — filterOpen=true              → /<query>▏  in textStrong
+	//   applied  — !filterOpen && query !== ""  → /<query>   in text
+	//   idle     — !filterOpen && query === ""  → "/ filter…" in textMuted
+	const filterRowFg = filterOpen
+		? colors.textStrong
+		: filterQuery.length > 0
+			? colors.text
+			: colors.textMuted
+	const filterRowRaw = filterOpen
+		? `/${filterQuery}▏`
+		: filterQuery.length > 0
+			? `/${filterQuery}`
+			: "/ filter…"
+	// Editing keeps the cursor visible — anchor the right edge with a leading
+	// ellipsis when the query overflows. Applied/idle anchor the left edge
+	// (lose the tail) so the leading `/` always reads as a filter marker.
+	const filterRowContent =
+		filterRowRaw.length <= sidebarTextWidth
+			? filterRowRaw
+			: filterOpen
+				? "…" + filterRowRaw.slice(filterRowRaw.length - sidebarTextWidth + 1)
+				: filterRowRaw.slice(0, sidebarTextWidth - 1) + "…"
 
 	// While help is open, the `?` key closes the overlay — relabel its hint
 	// so the footer accurately describes what pressing the key will do.
-	const footerBindings = helpVisible
-		? browserBindings
-				.filter((b) => HELP_ALLOWED_IDS.has(b.id))
-				.map((b) => (b.id === "help.toggle" ? { ...b, hint: "close" } : b))
-		: browserBindings
+	// Memoized: `helpVisible` changes rarely; `browserBindings` and
+	// `HELP_ALLOWED_IDS` are module-level constants.
+	const footerBindings = useMemo(
+		() =>
+			helpVisible
+				? browserBindings
+						.filter((b) => HELP_ALLOWED_IDS.has(b.id))
+						.map((b) => (b.id === "help.toggle" ? { ...b, hint: "close" } : b))
+				: browserBindings,
+		[helpVisible],
+	)
+
+	// One sidebar element is reused for inline and drawer rendering; only
+	// the wrapper differs (flex sibling vs absolute-positioned). The body is
+	// identical so file rows / filter row don't drift between modes.
+	const sidebarBody = (
+		<>
+			{filterRowVisible && (
+				<text content={filterRowContent} wrapMode="none" style={{ fg: filterRowFg }} />
+			)}
+			{displayedFiles.length === 0 ? (
+				<text
+					content={
+						files.length === 0
+							? discoveryActive
+								? "(scanning…)"
+								: "(no markdown files)"
+							: "(no matches)"
+					}
+					style={{ fg: colors.textMuted }}
+				/>
+			) : (
+				visibleFiles.map((file, idx) => {
+					const realIdx = desiredScroll + idx
+					const isSelected = realIdx === selectedIndex
+					const display = truncatePath(file.relativePath)
+					if (!isSelected) {
+						return (
+							<text key={file.path} content={display} wrapMode="none" style={{ fg: colors.text }} />
+						)
+					}
+					const bg = sidebarActive ? colors.selectedBg : colors.selectedBgInactive
+					return (
+						<text
+							key={file.path}
+							content={display}
+							wrapMode="none"
+							style={{ fg: colors.textStrong, bg }}
+						/>
+					)
+				})
+			)}
+		</>
+	)
 
 	return (
 		<box style={{ width, height, flexDirection: "column", backgroundColor: colors.background }}>
@@ -373,7 +665,7 @@ export const Browser = ({
 					backgroundColor: colors.background,
 				}}
 			>
-				{sidebarVisible && (
+				{sidebarInline && (
 					<box
 						title={sidebarTitle}
 						titleAlignment="left"
@@ -386,37 +678,7 @@ export const Browser = ({
 							backgroundColor: colors.surface,
 						}}
 					>
-						{displayedFiles.length === 0 ? (
-							<text
-								content={files.length === 0 ? "(no markdown files)" : "(no matches)"}
-								style={{ fg: colors.textMuted }}
-							/>
-						) : (
-							visibleFiles.map((file, idx) => {
-								const realIdx = desiredScroll + idx
-								const isSelected = realIdx === selectedIndex
-								const display = truncatePath(file.relativePath)
-								if (!isSelected) {
-									return (
-										<text
-											key={file.path}
-											content={display}
-											wrapMode="none"
-											style={{ fg: colors.text }}
-										/>
-									)
-								}
-								const bg = sidebarActive ? colors.selectedBg : colors.selectedBgInactive
-								return (
-									<text
-										key={file.path}
-										content={display}
-										wrapMode="none"
-										style={{ fg: colors.textStrong, bg }}
-									/>
-								)
-							})
-						)}
+						{sidebarBody}
 					</box>
 				)}
 				<box
@@ -442,7 +704,15 @@ export const Browser = ({
 								flexShrink: 1,
 								backgroundColor: colors.background,
 							}}
-							focused={readerActive}
+							// opentui's scrollbox consumes arrow keys at the focused-element
+							// level *before* useKeyboard fires, so a modal that handles
+							// arrow keys itself (palette nav, help dismissal) would still
+							// see the reader scroll alongside its own action. Unfocus the
+							// scrollbox while any blocking modal is up — useKeyboard's
+							// modal branches own the keys in that state. Filter is not
+							// listed because it force-focuses the sidebar (readerActive
+							// is already false).
+							focused={readerActive && !paletteOpen && !helpVisible}
 						>
 							<markdown
 								key={renderedPath ?? "empty"}
@@ -457,16 +727,50 @@ export const Browser = ({
 					)}
 				</box>
 			</box>
+			{sidebarAsDrawer && (
+				// Offset by 1 row so the reader pane's top border (which carries
+				// the current file name) stays visible above the drawer. Without
+				// this, the user loses the only on-screen indicator of which
+				// file they're reading whenever the drawer is up.
+				<box
+					position="absolute"
+					left={0}
+					top={drawerTopOffset}
+					width={sidebarWidth}
+					height={Math.max(1, height - FOOTER_HEIGHT - drawerTopOffset)}
+					zIndex={5}
+					title={sidebarTitle}
+					titleAlignment="left"
+					style={{
+						border: true,
+						borderColor: sidebarActive ? colors.borderActive : colors.border,
+						flexDirection: "column",
+						backgroundColor: colors.surface,
+					}}
+				>
+					{sidebarBody}
+				</box>
+			)}
 			<Footer
 				bindings={footerBindings}
 				ctx={ctx}
 				width={width}
 				notice={footerNotice}
-				filter={filterOpen ? { query: filterQuery } : null}
+				discoveryStatus={discoveryStatus}
+				filterQuery={!filterOpen && filterQuery.length > 0 ? filterQuery : null}
 			/>
 			{helpVisible && (
 				<HelpOverlay bindings={browserBindings} viewportWidth={width} viewportHeight={height} />
 			)}
+			{paletteOpen && (
+				<CommandPalette
+					commands={filterCommands(buildCommands(ctx), paletteQuery)}
+					query={paletteQuery}
+					selectedIndex={paletteIndex}
+					viewportWidth={width}
+					viewportHeight={height}
+				/>
+			)}
 		</box>
 	)
 }