magus-cli 7.3.1 → 7.4.1

package/src/ui/components/layout/ScreenLayout.tsx

@@ -1,13 +1,20 @@
 import type { ScrollBoxRenderable } from "@opentui/core";
 import type React from "react";
 import { useEffect, useRef } from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
-import { useApp } from "../../state/AppContext.js";
+import { useKeyLayer } from "../../input/KeyRouter.js";
+import { isScrollKey } from "../../input/key-dispatch.js";
+import {
+	type FooterOptions,
+	SCROLL_BINDINGS,
+	type ScrollHandlers,
+	footerHints,
+	runBindings,
+} from "../../keymap.js";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import type { Screen } from "../../state/types.js";
 import { theme } from "../../theme.js";
 import { TabBar } from "../TabBar.js";
-import { type FooterHint, FooterHints } from "./FooterHints.js";
+import { FooterHints } from "./FooterHints.js";
 
 /**
  * Panel content: a node, or a function handed the panel's usable columns.
@@ -30,6 +37,8 @@ export type PanelContent =
  * `terminalWidth - 2`.
  */
 const APP_SIDE_PADDING = 2;
+/** The footer row's own `paddingLeft`. */
+const FOOTER_PADDING = 1;
 const LIST_FRACTION = 0.49;
 const DETAIL_FRACTION = 0.5;
 /** The list panel's own `paddingRight`. */
@@ -73,13 +82,13 @@ export function detailPanelWidth(terminalWidth: number): number {
 	return panelWidth(terminalWidth, DETAIL_FRACTION, DETAIL_CHROME);
 }
 
-interface ScreenLayoutProps {
+interface ScreenLayoutProps<S extends Screen> {
 	/** Screen title (e.g., "magus Plugins") */
 	title: string;
 	/** Optional subtitle shown to the right of title */
 	subtitle?: string;
-	/** Current screen for tab highlighting */
-	currentScreen: Screen;
+	/** Current screen: highlights its tab and picks its footer bindings. */
+	currentScreen: S;
 	/** Search bar configuration (for screens with search) */
 	search?: {
 		/** Is search currently active */
@@ -100,10 +109,13 @@ interface ScreenLayoutProps {
 	 * while it is present.
 	 */
 	notice?: React.ReactNode;
-	/** Footer hints (left side). Pass a FooterHint[] to render key badges
-	 *  (the standard look). A string or ReactNode is still accepted for
-	 *  free-form footers. */
-	footerHints: FooterHint[] | string | React.ReactNode;
+	/**
+	 * What the footer advertises. The hints themselves always come from the
+	 * keymap (ui/keymap.ts) for `currentScreen`, fitted to the width; this only
+	 * says which of them are worth showing now. While `search.isActive` the
+	 * footer shows the search box's keys instead.
+	 */
+	footer?: FooterOptions<S>;
 	/** Left panel content, or a function given the list panel's usable columns. */
 	listPanel: PanelContent;
 	/** Right panel content, or a function given the detail panel's usable columns. */
@@ -118,20 +130,19 @@ interface ScreenLayoutProps {
 
 const HEADER_COLOR = theme.colors.accent;
 
-export function ScreenLayout({
+export function ScreenLayout<S extends Screen>({
 	title,
 	subtitle,
 	currentScreen,
 	search,
 	statusLine,
 	notice,
-	footerHints,
+	footer,
 	listPanel,
 	detailPanel,
 	detailKey,
-}: ScreenLayoutProps) {
+}: ScreenLayoutProps<S>) {
 	const dimensions = useDimensions();
-	const { state } = useApp();
 
 	const hasSearchBar = search && (search.isActive || search.query);
 
@@ -158,21 +169,38 @@ export function ScreenLayout({
 	// of overlap so a page turn doesn't lose the reader's place; Ctrl+U/Ctrl+D
 	// half-page in the pager tradition — and exist because a MacBook keyboard
 	// hides PgDn behind Fn+↓, where nobody finds it.
+	//
+	// This is the SCROLL key layer: below the screen and the search box, so a
+	// focused search box — which never takes these keys — still scrolls, and a
+	// modal above it stops them.
 	const detailPageStep = Math.max(1, panelHeight - 2);
 	const detailHalfStep = Math.max(1, Math.floor(panelHeight / 2));
-	useKeyboard((event) => {
-		if (state.modal) return;
-		const ctrl = event.ctrl === true;
-		if (event.name === "pageup" || (ctrl && event.name === "u")) {
+	const scrollHandlers: ScrollHandlers = {
+		"scroll-half": (key) => {
 			detailScrollRef.current?.scrollBy(
-				event.name === "pageup" ? -detailPageStep : -detailHalfStep,
+				key.name === "u" ? -detailHalfStep : detailHalfStep,
 			);
-		} else if (event.name === "pagedown" || (ctrl && event.name === "d")) {
+		},
+		"scroll-page": (key) => {
 			detailScrollRef.current?.scrollBy(
-				event.name === "pagedown" ? detailPageStep : detailHalfStep,
+				key.name === "pageup" ? -detailPageStep : detailPageStep,
 			);
-		}
-	});
+		},
+	};
+	useKeyLayer(
+		"scroll",
+		true,
+		(key) =>
+			isScrollKey(key) && runBindings(SCROLL_BINDINGS, scrollHandlers, key),
+	);
+
+	// Fitted to the row, highest priority first, so no hint is ever cut
+	// mid-word at the terminal's edge — see `footerHints`.
+	const footerRow = footerHints(
+		currentScreen,
+		Math.max(0, dimensions.terminalWidth - APP_SIDE_PADDING - FOOTER_PADDING),
+		search?.isActive ? { owner: "input" } : footer,
+	);
 
 	useEffect(() => {
 		if (detailKey !== undefined) detailScrollRef.current?.scrollTo(0);
@@ -220,7 +248,7 @@ export function ScreenLayout({
 				<box height={1} paddingLeft={1} paddingRight={1}>
 					{search.isActive ? (
 						<text fg={theme.colors.text}>
-							<span fg={theme.colors.success}>{"Filter: "}</span>
+							<span fg={theme.colors.muted}>{"Filter: "}</span>
 							<span fg={theme.colors.text}>{search.query}</span>
 							<span bg={theme.colors.text} fg={theme.hints.fg}>
 								{" "}
@@ -228,8 +256,8 @@ export function ScreenLayout({
 						</text>
 					) : (
 						<text fg={theme.colors.text}>
-							<span fg={theme.colors.success}>{"Filter: "}</span>
-							<span fg={theme.colors.warning}>{search.query}</span>
+							<span fg={theme.colors.muted}>{"Filter: "}</span>
+							<span fg={theme.colors.info}>{search.query}</span>
 							<span fg={theme.colors.muted}> (Esc to clear)</span>
 						</text>
 					)}
@@ -293,26 +321,24 @@ export function ScreenLayout({
 							},
 						}}
 					>
-						<box flexDirection="column">{detailContent}</box>
+						{/* The scrollbox gives its content no width, so a row sized itself to its
+						    own text and ran past the visible column; the panel then clipped its
+						    tail with no sign anything was lost. Every screen gets the usable
+						    width here, whether or not its renderer asks for it. */}
+						<box
+							flexDirection="column"
+							width={detailPanelWidth(dimensions.terminalWidth)}
+						>
+							{detailContent}
+						</box>
 					</scrollbox>
 				</box>
 			</box>
 
-			{/* Footer — the layout appends its own scroll hint so every screen
-			    advertises the detail-pane keys without each screen repeating it */}
-			<box height={1} paddingLeft={1}>
-				{Array.isArray(footerHints) ? (
-					<FooterHints
-						hints={[
-							...(footerHints as FooterHint[]),
-							{ keys: ["^U/^D", "PgUp/Dn"], label: "scroll" },
-						]}
-					/>
-				) : typeof footerHints === "string" ? (
-					<text fg={theme.colors.muted}>{footerHints}</text>
-				) : (
-					footerHints
-				)}
+			{/* Footer — the keymap's hints for this screen, scroll and global
+			    keys included, as many as fit */}
+			<box height={1} paddingLeft={FOOTER_PADDING}>
+				<FooterHints hints={footerRow} />
 			</box>
 		</box>
 	);

package/src/ui/components/layout/index.ts

@@ -2,8 +2,4 @@ export { Panel } from "./Panel.js";
 export { ScopeTabs } from "./ScopeTabs.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { ScreenLayout } from "./ScreenLayout.js";
-export {
-	FooterHints,
-	renderFooterHints,
-	type FooterHint,
-} from "./FooterHints.js";
+export { FooterHints, type FooterHint } from "./FooterHints.js";

package/src/ui/components/modals/ConfirmModal.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
 import { theme } from "../../theme.js";
 
 interface ConfirmModalProps {
@@ -7,26 +6,10 @@ interface ConfirmModalProps {
 	title: string;
 	/** Modal message */
 	message: string;
-	/** Callback when confirmed */
-	onConfirm: () => void;
-	/** Callback when cancelled */
-	onCancel: () => void;
 }
 
-export function ConfirmModal({
-	title,
-	message,
-	onConfirm,
-	onCancel,
-}: ConfirmModalProps) {
-	useKeyboard((key) => {
-		if (key.name === "y") {
-			onConfirm();
-		} else if (key.name === "n" || key.name === "escape") {
-			onCancel();
-		}
-	});
-
+/** Draws the question. Its keys (y / Enter, n / Esc / q) are ModalContainer's. */
+export function ConfirmModal({ title, message }: ConfirmModalProps) {
 	return (
 		<box
 			flexDirection="column"

package/src/ui/components/modals/HelpOverlay.tsx

@@ -0,0 +1,186 @@
+import type { ScrollBoxRenderable } from "@opentui/core";
+import type React from "react";
+import {
+	type HelpSection,
+	type KeyBinding,
+	helpSections,
+	joinKeys,
+} from "../../keymap.js";
+import { useDimensions } from "../../state/DimensionsContext.js";
+import type { Screen } from "../../state/types.js";
+import { theme } from "../../theme.js";
+import { FooterHints } from "../layout/FooterHints.js";
+
+/** Border (2), the gap above the hint row (1) and the hint row itself (1). */
+const CHROME_ROWS = 4;
+const MAX_WIDTH = 92;
+/** The key column never grows past this; a longer key group is cut. */
+const MAX_KEY_WIDTH = 12;
+
+export interface HelpOverlaySize {
+	width: number;
+	height: number;
+	/** Rows the scrolling list gets — also one page for PgUp / PgDn. */
+	listHeight: number;
+	/** Cells one list row may use: inside the border, padding and scrollbar. */
+	textWidth: number;
+}
+
+/**
+ * The overlay's box, from the terminal's size. Never taller than the terminal:
+ * two rows short of it when there is room, the whole height when there is not.
+ */
+export function helpOverlaySize(
+	terminalWidth: number,
+	terminalHeight: number,
+): HelpOverlaySize {
+	const height =
+		terminalHeight >= 8 ? terminalHeight - 2 : Math.max(1, terminalHeight);
+	const width = Math.max(20, Math.min(MAX_WIDTH, terminalWidth - 2));
+	return {
+		width,
+		height,
+		listHeight: Math.max(1, height - CHROME_ROWS),
+		// Border 2, padding 2, scrollbar 1, and one spare cell so a glyph a
+		// terminal draws two cells wide cannot push a row onto a second line.
+		textWidth: Math.max(8, width - 6),
+	};
+}
+
+function cells(text: string): number {
+	return [...text].length;
+}
+
+/** Cut `text` to `width` cells, ending in "…" when anything was lost. */
+function fit(text: string, width: number): string {
+	if (cells(text) <= width) return text;
+	if (width <= 0) return "";
+	return `${[...text].slice(0, width - 1).join("")}…`;
+}
+
+function padTo(text: string, width: number): string {
+	const cut = fit(text, width);
+	return cut + " ".repeat(Math.max(0, width - cells(cut)));
+}
+
+function keyColumnWidth(sections: readonly HelpSection[]): number {
+	let widest = 1;
+	for (const section of sections) {
+		for (const binding of section.bindings) {
+			widest = Math.max(widest, cells(joinKeys(binding.keys)));
+		}
+		for (const entry of section.legend ?? []) {
+			widest = Math.max(widest, cells(entry.symbol));
+		}
+	}
+	return Math.min(MAX_KEY_WIDTH, widest);
+}
+
+/**
+ * Every key, from the keymap: the current screen first, then the others, the
+ * search box, the global keys and the scroll keys.
+ *
+ * One `<text>` per entry, cut to the row width, so an entry never wraps onto a
+ * second line and never splits from its key. The ModalContainer owns the keys:
+ * ↑↓ / PgUp / PgDn / Ctrl+U / Ctrl+D scroll `scrollRef`, Esc or `?` close.
+ */
+export function HelpOverlay({
+	screen,
+	scrollRef,
+}: {
+	screen: Screen;
+	scrollRef: React.RefObject<ScrollBoxRenderable | null>;
+}) {
+	const { terminalWidth, terminalHeight } = useDimensions();
+	const size = helpOverlaySize(terminalWidth, terminalHeight);
+	const sections = helpSections(screen);
+	const keyWidth = keyColumnWidth(sections);
+	const textRoom = Math.max(1, size.textWidth - keyWidth - 4);
+
+	const entry = (id: string, keys: string, text: string, muted: boolean) => (
+		<text key={id} fg={theme.colors.text}>
+			<span fg={theme.colors.accent}>{`  ${padTo(keys, keyWidth)}  `}</span>
+			<span fg={muted ? theme.colors.muted : theme.colors.text}>
+				{fit(text, textRoom)}
+			</span>
+		</text>
+	);
+
+	const rows: React.ReactNode[] = [];
+	sections.forEach((section, index) => {
+		if (index > 0) {
+			rows.push(
+				<text key={`gap:${section.title}`} fg={theme.colors.text}>
+					{" "}
+				</text>,
+			);
+		}
+		const title =
+			section.screen === screen
+				? `${section.title} (this screen)`
+				: section.title;
+		rows.push(
+			<text key={`title:${section.title}`} fg={theme.colors.accent}>
+				<strong>{fit(title, size.textWidth)}</strong>
+			</text>,
+		);
+		for (const binding of section.bindings as readonly KeyBinding[]) {
+			rows.push(
+				entry(
+					`${section.title}:${binding.id}`,
+					joinKeys(binding.keys),
+					binding.description,
+					false,
+				),
+			);
+		}
+		for (const item of section.legend ?? []) {
+			rows.push(
+				entry(
+					`${section.title}:legend:${item.symbol}`,
+					item.symbol,
+					item.meaning,
+					true,
+				),
+			);
+		}
+	});
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor={theme.colors.accent}
+			backgroundColor={theme.surface.bg}
+			title="magus keys"
+			titleAlignment="left"
+			paddingLeft={1}
+			paddingRight={1}
+			width={size.width}
+			height={size.height}
+		>
+			<scrollbox
+				ref={scrollRef}
+				height={size.listHeight}
+				scrollY={true}
+				scrollX={false}
+				verticalScrollbarOptions={{
+					showArrows: false,
+					trackOptions: { foregroundColor: theme.colors.muted },
+				}}
+			>
+				<box flexDirection="column">{rows}</box>
+			</scrollbox>
+			<box height={1} marginTop={1} flexShrink={0}>
+				<FooterHints
+					hints={[
+						{ keys: ["↑", "↓"], label: "scroll" },
+						{ keys: ["PgUp/PgDn"], label: "page" },
+						{ keys: ["Esc", "?"], label: "close" },
+					]}
+				/>
+			</box>
+		</box>
+	);
+}

package/src/ui/components/modals/MessageModal.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
 import { theme } from "../../theme.js";
 
 interface MessageModalProps {
@@ -9,29 +8,18 @@ interface MessageModalProps {
 	message: string;
 	/** Message variant */
 	variant: "info" | "success" | "error";
-	/** Callback when dismissed */
-	onDismiss: () => void;
 }
 
 const variantConfig = {
-	info: { icon: "ℹ", color: theme.colors.link },
+	info: { icon: "ℹ", color: theme.colors.info },
 	success: { icon: "✓", color: theme.colors.success },
 	error: { icon: "✗", color: theme.colors.danger },
 } as const;
 
-export function MessageModal({
-	title,
-	message,
-	variant,
-	onDismiss,
-}: MessageModalProps) {
+/** Draws the message. Any key dismisses it — ModalContainer handles that. */
+export function MessageModal({ title, message, variant }: MessageModalProps) {
 	const config = variantConfig[variant];
 
-	useKeyboard(() => {
-		// Any key dismisses
-		onDismiss();
-	});
-
 	return (
 		<box
 			flexDirection="column"