magus-cli 0.0.0-placeholder → 7.1.0

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

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { useKeyboard } from "../../hooks/useKeyboard.js";
+import { useApp } from "../../state/AppContext.js";
+import { ConfirmModal } from "./ConfirmModal.js";
+import { InputModal } from "./InputModal.js";
+import { LoadingModal } from "./LoadingModal.js";
+import { MessageModal } from "./MessageModal.js";
+import { SelectModal } from "./SelectModal.js";
+
+/**
+ * Container that renders the active modal as an overlay
+ * Handles ALL keyboard events when a modal is open to avoid
+ * conflicts with multiple useKeyboard hooks in child components
+ *
+ * Input modal: Enter/Escape handled by OpenTUI <input> onSubmit + ModalContainer escape
+ * Select modal: keyboard fully handled here (index tracking + Enter/arrows)
+ */
+export function ModalContainer() {
+	const { state } = useApp();
+	const { modal } = state;
+
+	// Track select modal index here (lifted from SelectModal)
+	const [selectIndex, setSelectIndex] = useState(0);
+
+	// Reset select index when modal changes
+	const modalRef = React.useRef(modal);
+	if (modal !== modalRef.current) {
+		modalRef.current = modal;
+		if (modal?.type === "select") {
+			setSelectIndex(modal.defaultIndex ?? 0);
+		}
+	}
+
+	// Handle keyboard events for modals
+	useKeyboard((key) => {
+		if (!modal) return;
+		if (modal.type === "loading") return;
+
+		// Escape — close any modal
+		if (key.name === "escape") {
+			if (modal.type === "confirm") modal.onCancel();
+			else if (modal.type === "input") modal.onCancel();
+			else if (modal.type === "select") modal.onCancel();
+			else if (modal.type === "message") modal.onDismiss();
+			return;
+		}
+
+		// 'q' to close — but NOT for input modals (need to type 'q')
+		if (key.name === "q" && modal.type !== "input") {
+			if (modal.type === "confirm") modal.onCancel();
+			else if (modal.type === "select") modal.onCancel();
+			else if (modal.type === "message") modal.onDismiss();
+			return;
+		}
+
+		// Input modal — let OpenTUI <input> handle Enter via onSubmit
+		if (modal.type === "input") {
+			return;
+		}
+
+		// Select modal — handle navigation and selection
+		if (modal.type === "select") {
+			if (key.name === "return" || key.name === "enter") {
+				modal.onSelect(modal.options[selectIndex].value);
+			} else if (key.name === "up" || key.name === "k") {
+				setSelectIndex((prev) => Math.max(0, prev - 1));
+			} else if (key.name === "down" || key.name === "j") {
+				setSelectIndex((prev) => Math.min(modal.options.length - 1, prev + 1));
+			}
+			return;
+		}
+
+		// Message modal — Enter to dismiss
+		if (modal.type === "message") {
+			if (key.name === "return" || key.name === "enter") {
+				modal.onDismiss();
+			}
+		}
+
+		// Confirm modal — Enter to confirm
+		if (modal.type === "confirm") {
+			if (key.name === "return" || key.name === "enter") {
+				modal.onConfirm();
+			}
+		}
+	});
+
+	if (!modal) {
+		return null;
+	}
+
+	const renderModal = () => {
+		switch (modal.type) {
+			case "confirm":
+				return (
+					<ConfirmModal
+						title={modal.title}
+						message={modal.message}
+						onConfirm={modal.onConfirm}
+						onCancel={modal.onCancel}
+					/>
+				);
+
+			case "input":
+				return (
+					<InputModal
+						title={modal.title}
+						label={modal.label}
+						defaultValue={modal.defaultValue}
+						onSubmit={modal.onSubmit}
+						onCancel={modal.onCancel}
+					/>
+				);
+
+			case "select":
+				return (
+					<SelectModal
+						title={modal.title}
+						message={modal.message}
+						options={modal.options}
+						defaultIndex={selectIndex}
+						onSelect={modal.onSelect}
+						onCancel={modal.onCancel}
+					/>
+				);
+
+			case "message":
+				return (
+					<MessageModal
+						title={modal.title}
+						message={modal.message}
+						variant={modal.variant}
+						onDismiss={modal.onDismiss}
+					/>
+				);
+
+			case "loading":
+				return <LoadingModal message={modal.message} />;
+
+			default:
+				return null;
+		}
+	};
+
+	// Center the modal on screen
+	return (
+		<box
+			position="absolute"
+			width="100%"
+			height="100%"
+			justifyContent="center"
+			alignItems="center"
+		>
+			{renderModal()}
+		</box>
+	);
+}
+
+export default ModalContainer;

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { useDimensions } from "../../state/DimensionsContext.js";
+import type { SelectOption } from "../../state/types.js";
+import { theme } from "../../theme.js";
+
+interface SelectModalProps {
+	/** Modal title */
+	title: string;
+	/** Modal message */
+	message: string;
+	/** Select options */
+	options: SelectOption[];
+	/** Currently selected index (controlled by ModalContainer) */
+	defaultIndex?: number;
+	/** Callback when option selected */
+	onSelect: (value: string) => void;
+	/** Callback when cancelled */
+	onCancel: () => void;
+}
+
+export function SelectModal({
+	title,
+	message,
+	options,
+	defaultIndex,
+	onSelect: _onSelect,
+	onCancel: _onCancel,
+}: SelectModalProps) {
+	// Keyboard handling is done by ModalContainer
+	// defaultIndex is the live selectedIndex from ModalContainer state
+	const selectedIndex = defaultIndex ?? 0;
+
+	// Size to terminal width: 60% of available, clamped to [50, 90].
+	// Previously hardcoded at 50, which forced descriptions and long item
+	// labels (e.g. plugin specs) to wrap mid-sentence and produce orphan
+	// punctuation lines.
+	const dimensions = useDimensions();
+	const width = Math.max(
+		50,
+		Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)),
+	);
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle="rounded"
+			borderColor={theme.colors.dim}
+			backgroundColor={theme.surface.bg}
+			paddingLeft={3}
+			paddingRight={3}
+			paddingTop={1}
+			paddingBottom={1}
+			width={width}
+		>
+			<box marginBottom={1}>
+				<text fg={theme.colors.text}>
+					<strong>{title}</strong>
+				</text>
+			</box>
+
+			<box marginBottom={1}>
+				<text fg={theme.colors.muted}>{message}</text>
+			</box>
+
+			<box flexDirection="column" paddingLeft={1}>
+				{options.map((option, idx) => {
+					const isSelected = idx === selectedIndex;
+					return (
+						<text
+							key={option.value}
+							fg={isSelected ? theme.colors.text : theme.colors.muted}
+						>
+							<span fg={isSelected ? theme.colors.text : theme.colors.muted}>
+								{isSelected ? "❯ " : "  "}
+							</span>
+							{isSelected ? <strong>{option.label}</strong> : option.label}
+						</text>
+					);
+				})}
+			</box>
+
+			<box marginTop={1}>
+				<text fg={theme.colors.muted}>↑↓ Select • ↵ Confirm • Esc Cancel</text>
+			</box>
+		</box>
+	);
+}
+
+export default SelectModal;

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

@@ -0,0 +1,6 @@
+export { ConfirmModal } from "./ConfirmModal.js";
+export { InputModal } from "./InputModal.js";
+export { SelectModal } from "./SelectModal.js";
+export { MessageModal } from "./MessageModal.js";
+export { LoadingModal } from "./LoadingModal.js";
+export { ModalContainer } from "./ModalContainer.js";

package/src/ui/components/primitives/ActionHints.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+export interface Hint {
+	key: string;
+	label: string;
+	tone?: "default" | "primary" | "danger";
+}
+
+interface ActionHintsProps {
+	hints: Hint[];
+}
+
+/**
+ * Keyboard shortcut badges for detail panels.
+ * Renders: [bg] key [/bg] label
+ */
+export function ActionHints({ hints }: ActionHintsProps) {
+	return (
+		<box flexDirection="column" marginTop={1}>
+			{hints.map((hint) => (
+				// A box with no flexDirection lays out as a column here, which put
+				// every key chip on its own line above its label. The chip and what
+				// it does are one unit — the footer hints already render that way.
+				<box key={`${hint.key}:${hint.label}`} flexDirection="row">
+					<text
+						bg={
+							hint.tone === "danger"
+								? theme.hints.dangerBg
+								: hint.tone === "primary"
+									? theme.hints.primaryBg
+									: theme.hints.defaultBg
+						}
+						fg={theme.hints.fg}
+					>
+						{" "}
+						{hint.key}{" "}
+					</text>
+					<text fg={theme.colors.muted}> {hint.label}</text>
+				</box>
+			))}
+		</box>
+	);
+}

package/src/ui/components/primitives/DetailSection.tsx

@@ -0,0 +1,23 @@
+import type React from "react";
+import { theme } from "../../theme.js";
+
+interface DetailSectionProps {
+	title?: string;
+	children: React.ReactNode;
+}
+
+/**
+ * A labeled section in a detail panel with optional title header.
+ */
+export function DetailSection({ title, children }: DetailSectionProps) {
+	return (
+		<box flexDirection="column" marginTop={1}>
+			{title ? (
+				<text fg={theme.colors.info}>
+					<strong>{title}</strong>
+				</text>
+			) : null}
+			{children}
+		</box>
+	);
+}

package/src/ui/components/primitives/KeyValueLine.tsx

@@ -0,0 +1,26 @@
+import type React from "react";
+import { theme } from "../../theme.js";
+
+interface KeyValueLineProps {
+	label: string;
+	value: React.ReactNode;
+}
+
+/**
+ * Aligned label-value pair for detail panels.
+ *
+ * Labels pad to a 10-column gutter. The trailing space is inside the padding,
+ * not appended after it, so a label at or past 10 columns still separates from
+ * its value instead of running into it: every caller used to pass a short fixed
+ * label, and the first arbitrary one — a skill's `disable-model-invocation`
+ * frontmatter key — rendered as `disable-model-invocationtrue`. Labels of 9
+ * columns or fewer are unaffected.
+ */
+export function KeyValueLine({ label, value }: KeyValueLineProps) {
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>{`${label} `.padEnd(10)}</span>
+			{value}
+		</text>
+	);
+}

package/src/ui/components/primitives/ListCategoryRow.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { theme } from "../../theme.js";
+import { SelectableRow } from "./SelectableRow.js";
+
+interface ListCategoryRowProps {
+	title: string;
+	expanded?: boolean;
+	count?: number;
+	badge?: string;
+	tone?: keyof typeof theme.category;
+	selected: boolean;
+	/**
+	 * Whether the row can be opened and closed. Default true, which is what
+	 * every collapsible list wants. Set false for a heading that is purely a
+	 * label — a ▶ on a row that does not respond to Enter reads as a control
+	 * that is broken rather than as a section title.
+	 */
+	expandable?: boolean;
+}
+
+export function ListCategoryRow({
+	title,
+	expanded = false,
+	count,
+	badge,
+	tone = "gray",
+	selected,
+	expandable = true,
+}: ListCategoryRowProps) {
+	const colors = theme.category[tone];
+	const marker = expandable ? (expanded ? "▼ " : "▶ ") : "";
+	const label = `${marker}${title}${count !== undefined ? ` (${count})` : ""}`;
+
+	return (
+		<SelectableRow selected={selected}>
+			{!selected && (
+				<span bg={colors.bg} fg={colors.fg}>
+					<strong> {label} </strong>
+				</span>
+			)}
+			{selected && <strong> {label} </strong>}
+			{!selected && badge ? <span fg={colors.badgeFg}> {badge}</span> : null}
+		</SelectableRow>
+	);
+}

package/src/ui/components/primitives/MetaText.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface MetaTextProps {
+	text: string;
+	tone?: "muted" | "warning" | "success" | "danger";
+	/**
+	 * True when this sits inside a SELECTED row. Not cosmetic.
+	 *
+	 * Every `theme.meta` tone is chosen against the terminal's own background,
+	 * and none of them survives the selection fill: measured on a screenshot,
+	 * `muted` is 1.11:1 on it, `warning` 1.07:1, `danger` 1.11:1. So a selected
+	 * row's `(default)`, `(new)`, `(needed)` and version strings were drawn in a
+	 * colour indistinguishable from the purple behind them.
+	 *
+	 * On a selected row the tone's HUE is surrendered — the selection owns the
+	 * colour channel there — and only the emphasis survives: `fg` for a tone
+	 * that was saying something, `dim` for one that was only muttering. The
+	 * label is words, so its meaning does not depend on the hue.
+	 */
+	selected?: boolean;
+}
+
+/**
+ * Subdued text for versions, stars, status indicators.
+ */
+export function MetaText({
+	text,
+	tone = "muted",
+	selected = false,
+}: MetaTextProps) {
+	if (selected) {
+		return (
+			<span fg={tone === "muted" ? theme.selection.dim : theme.selection.fg}>
+				{text}
+			</span>
+		);
+	}
+	return <span fg={theme.meta[tone]}>{text}</span>;
+}

package/src/ui/components/primitives/ScopeDetail.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface ScopeDetailScope {
+	user?: boolean;
+	project?: boolean;
+	local?: boolean;
+}
+
+interface ScopeDetailPaths {
+	user?: string;
+	project?: string;
+	local?: string;
+}
+
+interface ScopeDetailProps {
+	scopes: ScopeDetailScope;
+	paths?: ScopeDetailPaths;
+}
+
+/**
+ * The u/p/l badges used in detail panels.
+ * Renders each scope as: [bg=color] key [/bg] ● or ○ Label path
+ */
+export function ScopeDetail({ scopes, paths }: ScopeDetailProps) {
+	const items = [
+		{
+			key: "u",
+			label: "User",
+			color: theme.scopes.user,
+			active: scopes.user,
+			path: paths?.user,
+		},
+		{
+			key: "p",
+			label: "Project",
+			color: theme.scopes.project,
+			active: scopes.project,
+			path: paths?.project,
+		},
+		{
+			key: "l",
+			label: "Local",
+			color: theme.scopes.local,
+			active: scopes.local,
+			path: paths?.local,
+		},
+	].filter((i) => i.path !== undefined || i.active !== undefined);
+
+	return (
+		<box flexDirection="column">
+			{items.map((item) => (
+				<text key={item.key}>
+					<span bg={item.color} fg={theme.hints.fg}>
+						{" "}
+						{item.key}{" "}
+					</span>
+					<span fg={item.active ? item.color : theme.colors.muted}>
+						{item.active ? " ● " : " ○ "}
+					</span>
+					<span fg={item.color}>{item.label}</span>
+					{item.path && <span fg={theme.colors.muted}> {item.path}</span>}
+				</text>
+			))}
+		</box>
+	);
+}

package/src/ui/components/primitives/ScopeSquares.tsx

@@ -0,0 +1,58 @@
+import type React from "react";
+import { scopeOffFill } from "../../theme-mode.js";
+import { theme } from "../../theme.js";
+
+interface ScopeSquaresProps {
+	user: boolean;
+	project: boolean;
+	local?: boolean;
+	selected?: boolean;
+}
+
+/** Every segment is a filled block; only the fill colour says lit or unlit. */
+const SEGMENT = "■";
+
+/**
+ * Scope bar: three positional segments, user / project / local.
+ *
+ * Reads as a segmented indicator — each segment lit in its scope colour, or
+ * unlit in a fill that recedes toward the page. Position identifies the scope;
+ * the first segment is always user, the second project, the third local.
+ *
+ * The unlit fill used to be `theme.colors.muted` (#6B7280), the same mid-dark
+ * grey as de-emphasised body text. Against a light page that reads as a *dark*
+ * block, giving an unlit segment the same visual weight as a lit one — "non
+ * installed state is dark as well - confusing". The unlit fill now comes from
+ * `scopeOffFill()`, which steps toward the page the resolved mode names; see
+ * theme-mode.ts for why that one value cannot be fixed.
+ */
+export function ScopeSquares({
+	user,
+	project,
+	local,
+	selected = false,
+}: ScopeSquaresProps) {
+	// On a selected row the background is our own accent, so an unlit segment
+	// recedes toward that block rather than toward the page.
+	const off = selected ? theme.selection.bg : scopeOffFill();
+	const lit = (on: boolean, color: string) =>
+		on ? (selected ? theme.selection.fg : color) : off;
+
+	const segments = [
+		lit(user, theme.scopes.user),
+		lit(project, theme.scopes.project),
+		...(local !== undefined ? [lit(local, theme.scopes.local)] : []),
+	];
+
+	// Fragments of <span> — safe to embed inside a coloured <text> parent.
+	return (
+		<>
+			{segments.map((fg, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: fixed positional segments
+				<span key={i} fg={fg}>
+					{SEGMENT}
+				</span>
+			))}
+		</>
+	);
+}

package/src/ui/components/primitives/SelectableRow.tsx

@@ -0,0 +1,30 @@
+import type React from "react";
+import { theme } from "../../theme.js";
+
+interface SelectableRowProps {
+	selected: boolean;
+	indent?: number;
+	children: React.ReactNode;
+}
+
+export function SelectableRow({
+	selected,
+	indent = 0,
+	children,
+}: SelectableRowProps) {
+	return (
+		<text
+			// Unselected: no background, so the row sits on the terminal's own page.
+			bg={selected ? theme.selection.bg : undefined}
+			// Unselected must still NAME a colour. `undefined` does not mean "the
+			// terminal's foreground" — OpenTUI's fallback for an unstyled cell is
+			// truecolor white, so every unselected row here rendered white-on-cream
+			// and vanished on a light theme. Same root cause as the original bug,
+			// reached by omission rather than by a wrong literal.
+			fg={selected ? theme.selection.fg : theme.colors.text}
+		>
+			{" ".repeat(indent)}
+			{children}
+		</text>
+	);
+}

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

@@ -0,0 +1,9 @@
+export { SelectableRow } from "./SelectableRow.js";
+export { ListCategoryRow } from "./ListCategoryRow.js";
+export { ScopeSquares } from "./ScopeSquares.js";
+export { ScopeDetail } from "./ScopeDetail.js";
+export { ActionHints } from "./ActionHints.js";
+export type { Hint } from "./ActionHints.js";
+export { MetaText } from "./MetaText.js";
+export { KeyValueLine } from "./KeyValueLine.js";
+export { DetailSection } from "./DetailSection.js";

package/src/ui/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useKeyboardHandler } from "./useKeyboardHandler.js";
+export { useKeyboard } from "./useKeyboard.js";