@carlesandres/house 0.4.0 → 0.4.2

package/src/CommandPalette.tsx

@@ -9,9 +9,17 @@
  * no mouse, no recency. See #91/#93/#94/#95/#96 for the follow-ups.
  */
 
+import { RGBA } from "@opentui/core"
 import { colors } from "./theme/colors.ts"
+import { PromptRow } from "./PromptRow.tsx"
 import type { AppCommand } from "./commands/types.ts"
 
+// Semi-transparent black scrim painted across the viewport behind the modal.
+// Opentui composites it over the chrome underneath, so the rest of the UI
+// reads as darkened while the modal stays fully opaque. Mirrors opencode's
+// dialog backdrop (cli/cmd/tui/ui/dialog.tsx).
+const SCRIM = RGBA.fromInts(0, 0, 0, 150)
+
 export interface CommandPaletteProps {
 	readonly commands: readonly AppCommand[]
 	readonly query: string
@@ -73,54 +81,67 @@ export const CommandPalette = ({
 	return (
 		<box
 			position="absolute"
-			left={left}
-			top={top}
-			width={overlayWidth}
-			height={overlayHeight}
+			left={0}
+			top={0}
+			width={viewportWidth}
+			height={viewportHeight}
 			zIndex={20}
-			title=" Commands "
-			titleAlignment="left"
-			paddingLeft={1}
-			paddingRight={1}
-			style={{
-				border: true,
-				borderColor: colors.borderActive,
-				flexDirection: "column",
-				backgroundColor: colors.surface,
-			}}
+			style={{ backgroundColor: SCRIM }}
 		>
-			<text
-				wrapMode="none"
-				content={fit(`> ${query}▏`, rowWidth)}
-				style={{ fg: colors.textStrong }}
-			/>
-			<text content=" " />
-			{commands.length === 0 ? (
-				<text wrapMode="none" content="  (no matches)" style={{ fg: colors.textMuted }} />
-			) : (
-				visible.map((cmd, i) => {
-					const realIdx = scrollTop + i
-					const isSelected = realIdx === selectedIndex
-					const selector = isSelected ? "▸ " : "  "
-					const titleText = fit(cmd.title, titleWidth)
-					const shortcutText = cmd.shortcut
-						? 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`.
-					// 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
-					return (
-						<text key={cmd.id} wrapMode="none" style={isSelected ? { bg: colors.selectedBg } : {}}>
-							<span style={{ fg: titleFg }}>{`${selector}${titleText} `}</span>
-							<span style={{ fg: colors.textMuted }}>{shortcutText}</span>
-						</text>
-					)
-				})
-			)}
-			<text content=" " />
-			<text wrapMode="none" content={fit(FOOTER_HINT, rowWidth)} style={{ fg: colors.textMuted }} />
+			<box
+				position="absolute"
+				left={left}
+				top={top}
+				width={overlayWidth}
+				height={overlayHeight}
+				title=" Commands "
+				titleAlignment="left"
+				paddingLeft={1}
+				paddingRight={1}
+				style={{
+					border: true,
+					borderColor: colors.textMuted,
+					flexDirection: "column",
+					backgroundColor: colors.surface,
+				}}
+			>
+				<PromptRow query={query} editing={true} width={rowWidth} />
+				<text content=" " />
+				{commands.length === 0 ? (
+					<text wrapMode="none" content="  (no matches)" style={{ fg: colors.textMuted }} />
+				) : (
+					visible.map((cmd, i) => {
+						const realIdx = scrollTop + i
+						const isSelected = realIdx === selectedIndex
+						const selector = isSelected ? "▸ " : "  "
+						const titleText = fit(cmd.title, titleWidth)
+						const shortcutText = cmd.shortcut
+							? 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`.
+						// 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
+						return (
+							<text
+								key={cmd.id}
+								wrapMode="none"
+								style={isSelected ? { bg: colors.selectedBg } : {}}
+							>
+								<span style={{ fg: titleFg }}>{`${selector}${titleText} `}</span>
+								<span style={{ fg: colors.textMuted }}>{shortcutText}</span>
+							</text>
+						)
+					})
+				)}
+				<text content=" " />
+				<text
+					wrapMode="none"
+					content={fit(FOOTER_HINT, rowWidth)}
+					style={{ fg: colors.textMuted }}
+				/>
+			</box>
 		</box>
 	)
 }

package/src/Footer.tsx

@@ -71,30 +71,40 @@ const displayKey = (raw: string): string => {
 	}
 }
 
-const formatHint = <C,>(b: KeyBinding<C>): string | null => {
+/** Hint row entries. `key === null` is a standalone chip (e.g. the filter
+ *  chip) and renders as muted text without the key/label split. */
+interface Hint {
+	readonly key: string | null
+	readonly label: string
+}
+
+const hintWidth = (h: Hint): number =>
+	h.key === null ? h.label.length : h.key.length + 1 + h.label.length // key + " " + label
+
+const formatHint = <C,>(b: KeyBinding<C>): Hint | null => {
 	if (!b.hint) return null
 	const first = b.keys[0]
 	if (!first) return null
-	return `${displayKey(first)}:${b.hint}`
+	return { key: displayKey(first), label: b.hint }
 }
 
-/** Drop hints from the end until the joined string fits within `width`.
- *  If not even the first hint fits, fall back to the bare key portion so
- *  the user still sees a discoverability anchor (e.g. `?` instead of an
- *  empty row on an 8-column terminal). */
-const fitHints = (hints: readonly string[], width: number): string => {
-	if (width <= 0 || hints.length === 0) return ""
-	let acc = ""
+/** Drop hints from the end until they fit within `width`. If not even the
+ *  first hint fits, fall back to the bare key (or label chip) truncated to
+ *  width, so the row is never silently blank on tight viewports. */
+const fitHints = (hints: readonly Hint[], width: number): Hint[] => {
+	if (width <= 0 || hints.length === 0) return []
+	const acc: Hint[] = []
+	let used = 0
 	for (const h of hints) {
-		const next = acc.length === 0 ? h : `${acc}${HINT_SEPARATOR}${h}`
-		if (next.length > width) break
-		acc = next
+		const add = acc.length === 0 ? hintWidth(h) : HINT_SEPARATOR.length + hintWidth(h)
+		if (used + add > width) break
+		acc.push(h)
+		used += add
 	}
 	if (acc.length > 0) return acc
-	// Nothing fit. Render just the first hint's key (everything before `:`)
-	// truncated to width, so the row is never silently blank.
-	const firstKey = hints[0]!.split(":")[0] ?? ""
-	return firstKey.slice(0, width)
+	const first = hints[0]!
+	if (first.key === null) return [{ key: null, label: first.label.slice(0, width) }]
+	return [{ key: first.key.slice(0, width), label: "" }]
 }
 
 const STATUS_SEPARATOR = " · "
@@ -116,19 +126,23 @@ export const Footer = <C,>({
 		flexDirection: "row",
 		paddingLeft: 1,
 		paddingRight: 1,
-		backgroundColor: colors.background,
+		backgroundColor: colors.surface,
 	} as const
 
-	const hints: string[] = []
+	const hints: Hint[] = []
 	// The filter chip prepends to the hint row when a filter is applied and the
 	// input is closed. Bracketed to avoid looking like a `key:hint` binding —
 	// "filter" is not a key. Surfaces the otherwise-invisible invariant that
 	// `[`/`]` walks the filtered set. See DESIGN.md §7.1 Q1.
 	if (filterQuery && filterQuery.length > 0) {
-		hints.push(`[filter: ${filterQuery}]`)
+		hints.push({ key: null, label: `[filter: ${filterQuery}]` })
 	}
 	for (const b of bindings) {
-		if (b.when && !b.when(ctx)) continue
+		// Hint visibility prefers `hintWhen` (binding-specific) over `when`
+		// (dispatch gate). Falling back to `when` keeps the original
+		// "hint shows when binding is enabled" behavior for the common case.
+		const visibleGate = b.hintWhen ?? b.when
+		if (visibleGate && !visibleGate(ctx)) continue
 		const h = formatHint(b)
 		if (h !== null) hints.push(h)
 	}
@@ -139,7 +153,7 @@ export const Footer = <C,>({
 	const status = discoveryStatus && discoveryStatus.length > 0 ? discoveryStatus : null
 	const statusBudget = status ? Math.min(status.length + STATUS_SEPARATOR.length, usableWidth) : 0
 	const hintsWidth = Math.max(0, usableWidth - statusBudget)
-	const hintContent = fitHints(hints, hintsWidth)
+	const visibleHints = fitHints(hints, hintsWidth)
 	const statusContent = status
 		? status.slice(0, Math.max(0, statusBudget - STATUS_SEPARATOR.length))
 		: ""
@@ -150,6 +164,40 @@ export const Footer = <C,>({
 			: notice
 		: null
 
+	// Two-tone hint row: keys render in `text` (foreground-strength), the
+	// `:label` portion in `textMuted`. Matches ghui's footer treatment so
+	// the key — the actionable token — visually leads each hint.
+	const renderHints = () =>
+		visibleHints.flatMap((h, i) => {
+			const sep =
+				i > 0
+					? [
+							<text
+								key={`s${i}`}
+								content={HINT_SEPARATOR}
+								wrapMode="none"
+								style={{ fg: colors.textMuted }}
+							/>,
+						]
+					: []
+			if (h.key === null) {
+				return [
+					...sep,
+					<text key={`l${i}`} content={h.label} wrapMode="none" style={{ fg: colors.textMuted }} />,
+				]
+			}
+			return [
+				...sep,
+				<text key={`k${i}`} content={h.key} wrapMode="none" style={{ fg: colors.text }} />,
+				<text
+					key={`l${i}`}
+					content={` ${h.label}`}
+					wrapMode="none"
+					style={{ fg: colors.textMuted }}
+				/>,
+			]
+		})
+
 	// Priority: notice > (status + hints). Notice fg is strong; status sits
 	// at the muted level so it reads as ambient state, not an event.
 	if (noticeContent !== null) {
@@ -165,14 +213,10 @@ export const Footer = <C,>({
 			<box style={rowStyle}>
 				<text content={statusContent} wrapMode="none" style={{ fg: colors.textMuted }} />
 				<text content={STATUS_SEPARATOR} wrapMode="none" style={{ fg: colors.textMuted }} />
-				<text content={hintContent} wrapMode="none" style={{ fg: colors.textMuted }} />
+				{renderHints()}
 			</box>
 		)
 	}
 
-	return (
-		<box style={rowStyle}>
-			<text content={hintContent} wrapMode="none" style={{ fg: colors.textMuted }} />
-		</box>
-	)
+	return <box style={rowStyle}>{renderHints()}</box>
 }

package/src/Header.tsx

@@ -0,0 +1,68 @@
+/**
+ * Header — single-row chrome above the two-pane area.
+ *
+ * Borderless single line modeled on ghui's PlainLine header: brand and
+ * current filename on the left, version on the right. The row is
+ * informational, not interactive — see issue #38 for the design discussion.
+ *
+ * Width degrades gracefully: the version drops first when the row gets
+ * tight, then the filename, leaving the brand mark as the irreducible
+ * identity element. Always rendered — the row is worth one cell on any
+ * viewport so the user never loses the filename indicator (notably, when
+ * the sidebar drawer overlays the reader on narrow viewports).
+ */
+
+import pkg from "../package.json" with { type: "json" }
+import { BRAND, BRAND_NAME } from "./brand.ts"
+import { colors } from "./theme/colors.ts"
+
+export const HEADER_HEIGHT = 1
+
+const FILE_SEPARATOR = " · "
+
+export interface HeaderProps {
+	readonly width: number
+	/** Currently selected file's relative path. When set, the Header shows
+	 *  it next to the brand mark — replaces the per-pane border title that
+	 *  used to carry this information. */
+	readonly currentFile?: string | null
+	/** Optional override for the version string (testing). Defaults to
+	 *  the running package's version. */
+	readonly version?: string
+}
+
+export const Header = ({ width, currentFile, version = pkg.version }: HeaderProps) => {
+	const brand = `${BRAND} ${BRAND_NAME}`
+	const right = `v${version}`
+	const file = currentFile && currentFile.length > 0 ? currentFile : null
+	const usableWidth = Math.max(0, width - 2) // 1-cell horizontal padding each side
+
+	// Priority: brand > filename > version. Brand is the irreducible identity
+	// anchor. Filename is per-selection useful info — keep it before the
+	// largely-static version string. `1` is the minimum gap between left and
+	// right groups so they never visually collide.
+	const leftWithFile = file !== null ? `${brand}${FILE_SEPARATOR}${file}` : brand
+	const showFileWithVersion = leftWithFile.length + 1 + right.length <= usableWidth
+	const showFileWithoutVersion = leftWithFile.length <= usableWidth
+	const showFile = file !== null && (showFileWithVersion || showFileWithoutVersion)
+	const left = showFile ? leftWithFile : brand
+	const showRight = left.length + 1 + right.length <= usableWidth
+
+	return (
+		<box
+			style={{
+				width,
+				height: HEADER_HEIGHT,
+				flexShrink: 0,
+				flexDirection: "row",
+				justifyContent: "space-between",
+				paddingLeft: 1,
+				paddingRight: 1,
+				backgroundColor: colors.surface,
+			}}
+		>
+			<text content={left} wrapMode="none" style={{ fg: colors.text }} />
+			{showRight && <text content={right} wrapMode="none" style={{ fg: colors.text }} />}
+		</box>
+	)
+}

package/src/HelpOverlay.tsx

@@ -6,9 +6,13 @@
  * keys — the dispatcher and the help text are the same source of truth.
  */
 
+import { RGBA } from "@opentui/core"
 import type { KeyBinding } from "./keymap/keymap.ts"
 import { colors } from "./theme/colors.ts"
 
+// See CommandPalette.tsx for the scrim rationale.
+const SCRIM = RGBA.fromInts(0, 0, 0, 150)
+
 export interface HelpOverlayProps<C> {
 	readonly bindings: readonly KeyBinding<C>[]
 	readonly viewportWidth: number
@@ -82,49 +86,63 @@ export const HelpOverlay = <C,>({
 	return (
 		<box
 			position="absolute"
-			left={left}
-			top={top}
-			width={overlayWidth}
-			height={overlayHeight}
+			left={0}
+			top={0}
+			width={viewportWidth}
+			height={viewportHeight}
 			zIndex={10}
-			title=" Help "
-			titleAlignment="left"
-			style={{
-				border: true,
-				borderColor: colors.borderActive,
-				padding: 1,
-				flexDirection: "column",
-				backgroundColor: colors.surface,
-			}}
+			style={{ backgroundColor: SCRIM }}
 		>
-			{rows.map((row) => {
-				switch (row.kind) {
-					case "header":
-						return (
-							<text
-								key={row.key}
-								wrapMode="none"
-								content={row.text}
-								style={{ fg: colors.borderActive, attributes: 1 /* bold */ }}
-							/>
-						)
-					case "footer":
-						return (
-							<text
-								key={row.key}
-								wrapMode="none"
-								content={row.text}
-								style={{ fg: colors.textMuted }}
-							/>
-						)
-					case "spacer":
-						return <text key={row.key} content=" " />
-					case "binding":
-						return (
-							<text key={row.key} wrapMode="none" content={row.text} style={{ fg: colors.text }} />
-						)
-				}
-			})}
+			<box
+				position="absolute"
+				left={left}
+				top={top}
+				width={overlayWidth}
+				height={overlayHeight}
+				title=" Help "
+				titleAlignment="left"
+				style={{
+					border: true,
+					borderColor: colors.textMuted,
+					padding: 1,
+					flexDirection: "column",
+					backgroundColor: colors.surface,
+				}}
+			>
+				{rows.map((row) => {
+					switch (row.kind) {
+						case "header":
+							return (
+								<text
+									key={row.key}
+									wrapMode="none"
+									content={row.text}
+									style={{ fg: colors.borderActive, attributes: 1 /* bold */ }}
+								/>
+							)
+						case "footer":
+							return (
+								<text
+									key={row.key}
+									wrapMode="none"
+									content={row.text}
+									style={{ fg: colors.textMuted }}
+								/>
+							)
+						case "spacer":
+							return <text key={row.key} content=" " />
+						case "binding":
+							return (
+								<text
+									key={row.key}
+									wrapMode="none"
+									content={row.text}
+									style={{ fg: colors.text }}
+								/>
+							)
+					}
+				})}
+			</box>
 		</box>
 	)
 }

package/src/PromptRow.tsx

@@ -0,0 +1,49 @@
+/**
+ * PromptRow — single-line `> query` row shared by the sidebar filter and
+ * the command palette query input.
+ *
+ * Render-only: the parent owns query state and the focus/editing flag.
+ * The `> ` prefix always renders in `textStrong` regardless of state so it
+ * reads as chrome, not placeholder text — only the body span shifts color
+ * (textStrong while editing, text when applied, textMuted as placeholder).
+ *
+ * Overflow: when editing, an overflowing body anchors its right edge with a
+ * leading `…` so the cursor stays on screen; otherwise it anchors the left
+ * edge with a trailing `…`.
+ */
+
+import { colors } from "./theme/colors.ts"
+
+export interface PromptRowProps {
+	readonly query: string
+	/** True while the input is focused — shows a cursor and uses textStrong fg. */
+	readonly editing: boolean
+	/** Body fallback when !editing && query === "". Pass without the `> ` prefix. */
+	readonly placeholder?: string
+	/** Total cell width available for the row (prefix + body). */
+	readonly width: number
+}
+
+const PREFIX = "> "
+const CURSOR = "▏"
+
+export const PromptRow = ({ query, editing, placeholder = "", width }: PromptRowProps) => {
+	const bodyBudget = Math.max(1, width - PREFIX.length)
+
+	const rawBody = editing ? `${query}${CURSOR}` : query.length > 0 ? query : placeholder
+	const bodyFg = editing ? colors.textStrong : query.length > 0 ? colors.text : colors.textMuted
+
+	const body =
+		rawBody.length <= bodyBudget
+			? rawBody
+			: editing
+				? "…" + rawBody.slice(rawBody.length - bodyBudget + 1)
+				: rawBody.slice(0, bodyBudget - 1) + "…"
+
+	return (
+		<text wrapMode="none">
+			<span style={{ fg: colors.textStrong }}>{PREFIX}</span>
+			<span style={{ fg: bodyFg }}>{body}</span>
+		</text>
+	)
+}

package/src/brand.ts

@@ -0,0 +1,7 @@
+/**
+ * Brand mark. U+2302 HOUSE is a single-cell glyph in every monospace font
+ * we care about; falls back to a tofu box on rare fonts that lack it.
+ * Single import point so future placements (#76) stay in sync.
+ */
+export const BRAND = "⌂"
+export const BRAND_NAME = "house"

package/src/cli/argv.ts

@@ -25,6 +25,12 @@ export interface ParsedArgs {
 	readonly configPath: boolean
 	/** Value of `--sidebar <mode>` (`auto`, `on`, `off`), or null. Validated by the boot layer. */
 	readonly sidebar: string | null
+	/** True when `--no-update-check` was passed: suppress the npm-registry
+	 *  probe and the "update available" notice. Mirrors the
+	 *  `NO_UPDATE_NOTIFIER` env var so opt-out is reachable without env state. */
+	readonly noUpdateCheck: boolean
+	/** True when `--no-mdx` was passed: exclude `.mdx` files from discovery. */
+	readonly noMdx: boolean
 }
 
 /**
@@ -47,6 +53,8 @@ export const parseArgv = (argv: readonly string[]): ParsedArgs => {
 	let version = false
 	let configPath = false
 	let sidebar: string | null = null
+	let noUpdateCheck = false
+	let noMdx = false
 
 	for (let i = 0; i < argv.length; i++) {
 		const arg = argv[i]!
@@ -99,13 +107,34 @@ export const parseArgv = (argv: readonly string[]): ParsedArgs => {
 				}
 				continue
 			}
+			case "--no-update-check":
+				noUpdateCheck = true
+				continue
+			case "--no-mdx":
+				noMdx = true
+				continue
 		}
 		if (path === null && !arg.startsWith("-")) {
 			path = arg
 		}
 	}
 
-	return { path, theme, tone, width, all, sort, serve, port, help, version, configPath, sidebar }
+	return {
+		path,
+		theme,
+		tone,
+		width,
+		all,
+		sort,
+		serve,
+		port,
+		help,
+		version,
+		configPath,
+		sidebar,
+		noUpdateCheck,
+		noMdx,
+	}
 }
 
 const themeList = themeDefinitions.map((t) => t.id).join(", ")
@@ -126,9 +155,11 @@ options:
   -h, --help     show this help and exit
   -v, --version  print version and exit
   --config-path  print path to the config file and exit
+  --no-update-check  suppress the "newer version available" check (also via NO_UPDATE_NOTIFIER=1)
+  --no-mdx       exclude .mdx files from discovery (default: included)
 
 configuration:
   file: $XDG_CONFIG_HOME/house/config.toml  (default ~/.config/house/config.toml)
-  keys: theme, tone
-  env:  HOUSE_THEME, HOUSE_TONE
+  keys: theme, tone, mdx
+  env:  HOUSE_THEME, HOUSE_TONE, HOUSE_MDX
   precedence (high → low): flags → env → file → defaults`

package/src/commands/buildCommands.ts

@@ -45,6 +45,7 @@ const annotations: Record<string, Annotation> = {
 	"help.toggle": { title: "Show help", category: "App" },
 	"filter.open": { title: "Filter files…", category: "Navigation" },
 	"serve.current": { title: "Open in browser", category: "File" },
+	"file.edit": { title: "Open in editor", category: "File", keywords: ["editor", "vim", "vscode"] },
 	"theme.next": { category: "Appearance" },
 	"theme.prev": { category: "Appearance" },
 	"theme.toneToggle": { title: "Toggle dark/light tone", category: "Appearance" },