magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/components/EmptyFilterState.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { theme } from "../theme.js";
+
+interface EmptyFilterStateProps {
+	query: string;
+	entityName?: string; // "plugins", "skills", "MCP servers"
+}
+
+export function EmptyFilterState({
+	query,
+	entityName = "items",
+}: EmptyFilterStateProps) {
+	return (
+		<box flexDirection="column" marginTop={2} paddingLeft={2} paddingRight={2}>
+			<text fg={theme.colors.warning}>
+				No {entityName} found for "{query}"
+			</text>
+			<box marginTop={1}>
+				<text fg={theme.colors.muted}>
+					Try a different search term, or if you think
+				</text>
+			</box>
+			<text fg={theme.colors.muted}>this is a bug, report it at:</text>
+			<box marginTop={1}>
+				<text fg={theme.colors.link}>github.com/MadAppGang/magus/issues</text>
+			</box>
+			<box marginTop={1}>
+				<text fg={theme.colors.muted}>Press Esc to clear the filter.</text>
+			</box>
+		</box>
+	);
+}

package/src/ui/components/ScopeIndicator.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { type UiColor, theme } from "../theme.js";
+
+/**
+ * Scope indicator for list items.
+ * Shows colored letter badges when installed, empty space when not.
+ *
+ * Installed in user+project:  u p
+ * Installed in project only:    p
+ * Not installed:              (3 spaces)
+ *
+ * Colors match the detail panel: cyan=user, green=project, yellow=local
+ */
+
+export function scopeIndicatorText(
+	user?: boolean,
+	project?: boolean,
+	local?: boolean,
+): {
+	text: string;
+	segments: Array<{ char: string; bg: UiColor; fg: UiColor }>;
+} {
+	const segments: Array<{ char: string; bg: UiColor; fg: UiColor }> = [
+		user
+			? { char: "u", bg: theme.colors.info, fg: theme.hints.fg }
+			: { char: " ", bg: "", fg: "" },
+		project
+			? { char: "p", bg: theme.colors.success, fg: theme.hints.fg }
+			: { char: " ", bg: "", fg: "" },
+		local
+			? { char: "l", bg: theme.colors.warning, fg: theme.hints.fg }
+			: { char: " ", bg: "", fg: "" },
+	];
+
+	const text = segments.map((s) => s.char).join("");
+	return { text, segments };
+}
+
+interface ScopeIndicatorProps {
+	user?: boolean;
+	project?: boolean;
+	local?: boolean;
+}
+
+export function ScopeIndicator({ user, project, local }: ScopeIndicatorProps) {
+	const { segments } = scopeIndicatorText(user, project, local);
+
+	return (
+		<text fg={theme.colors.text}>
+			{segments.map((s, i) =>
+				s.bg ? (
+					// biome-ignore lint/suspicious/noArrayIndexKey: segments are fixed-position scope squares (user/project/local); the slot is the identity and the list never reorders
+					<span key={i} bg={s.bg} fg={s.fg}>
+						{s.char}
+					</span>
+				) : (
+					// biome-ignore lint/suspicious/noArrayIndexKey: same fixed-slot list as above
+					<span key={i}> </span>
+				),
+			)}
+		</text>
+	);
+}

package/src/ui/components/ScrollableList.tsx

@@ -0,0 +1,95 @@
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { theme } from "../theme.js";
+
+interface ScrollableListProps<T> {
+	/** Array of items to display */
+	items: T[];
+	/** Currently selected index */
+	selectedIndex: number;
+	/** Render function for each item */
+	renderItem: (item: T, index: number, isSelected: boolean) => React.ReactNode;
+	/** Maximum visible height (number of lines) */
+	maxHeight: number;
+	/** Show scroll indicators */
+	showScrollIndicators?: boolean;
+	/** Item key extractor */
+	getKey?: (item: T, index: number) => string;
+}
+
+export function ScrollableList<T>({
+	items,
+	selectedIndex,
+	renderItem,
+	maxHeight,
+	showScrollIndicators = true,
+	getKey,
+}: ScrollableListProps<T>) {
+	const [scrollOffset, setScrollOffset] = useState(0);
+
+	const hasItemsAbove = scrollOffset > 0;
+	const hasItemsBelow = scrollOffset + maxHeight < items.length;
+	const indicatorLines =
+		(showScrollIndicators && hasItemsAbove ? 1 : 0) +
+		(showScrollIndicators && hasItemsBelow ? 1 : 0);
+	const effectiveMaxHeight = Math.max(1, maxHeight - indicatorLines);
+
+	// Adjust scroll offset to keep selected item visible
+	useEffect(() => {
+		if (selectedIndex < scrollOffset) {
+			setScrollOffset(selectedIndex);
+		} else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
+			setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
+		}
+	}, [selectedIndex, effectiveMaxHeight, scrollOffset]);
+
+	// Reset scroll when items change drastically (e.g. search)
+	useEffect(() => {
+		if (scrollOffset >= items.length) {
+			setScrollOffset(Math.max(0, items.length - effectiveMaxHeight));
+		}
+	}, [items.length, scrollOffset, effectiveMaxHeight]);
+
+	const visibleItems = useMemo(() => {
+		const start = scrollOffset;
+		const end = Math.min(scrollOffset + effectiveMaxHeight, items.length);
+		return items.slice(start, end).map((item, idx) => ({
+			item,
+			originalIndex: start + idx,
+		}));
+	}, [items, scrollOffset, effectiveMaxHeight]);
+
+	const itemsBelow = items.length - scrollOffset - effectiveMaxHeight;
+
+	return (
+		<box flexDirection="column">
+			{showScrollIndicators && hasItemsAbove && (
+				<text fg={theme.colors.info}>↑ {scrollOffset} more</text>
+			)}
+
+			{visibleItems.map(({ item, originalIndex }) => (
+				<box
+					key={getKey ? getKey(item, originalIndex) : `${originalIndex}`}
+					width="100%"
+					// height=1 is load-bearing, not cosmetic. overflow="hidden" alone clips
+					// CONTENT but lets the box GROW: an over-wide <text> wraps to a second
+					// line, the row becomes two lines tall, and every item below shifts —
+					// which rendered as a phantom blank line under "Magus Marketing" and
+					// the last two plugins composited onto one row. The list's scroll math
+					// assumes one line per item; this makes that assumption true.
+					height={1}
+					flexShrink={0}
+					overflow="hidden"
+				>
+					{renderItem(item, originalIndex, originalIndex === selectedIndex)}
+				</box>
+			))}
+
+			{showScrollIndicators && hasItemsBelow && (
+				<text fg={theme.colors.info}>↓ {itemsBelow} more</text>
+			)}
+		</box>
+	);
+}
+
+export default ScrollableList;

package/src/ui/components/SearchInput.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
+import { theme } from "../theme.js";
+
+interface SearchInputProps {
+	/** Current search value */
+	value: string;
+	/** Called when value changes */
+	onChange: (value: string) => void;
+	/** Placeholder text when empty */
+	placeholder?: string;
+	/** Whether the input is focused/active */
+	isActive: boolean;
+	/** Called when user presses escape to exit search */
+	onExit?: () => void;
+	/** Called when user presses enter */
+	onSubmit?: () => void;
+}
+
+export function SearchInput({
+	value,
+	onChange,
+	placeholder = "Search...",
+	isActive,
+	onExit,
+	onSubmit,
+}: SearchInputProps) {
+	// Handle keyboard shortcuts when active
+	useKeyboardHandler((_input, key) => {
+		if (!isActive) return;
+
+		if (key.escape) {
+			onExit?.();
+			return;
+		}
+
+		if (key.return) {
+			onSubmit?.();
+			return;
+		}
+	});
+
+	return (
+		<box flexDirection="row">
+			<text fg={theme.colors.info}>❯ </text>
+			<input
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				focused={isActive}
+				width={40}
+			/>
+		</box>
+	);
+}
+
+export default SearchInput;

package/src/ui/components/StyledText.tsx

@@ -0,0 +1,75 @@
+import type React from "react";
+import { theme } from "../theme.js";
+
+interface StyledTextProps {
+	/** Text content */
+	children: React.ReactNode;
+	/** Bold text */
+	bold?: boolean;
+	/** Foreground color */
+	color?: string;
+	/** Background color */
+	bgColor?: string;
+	/** Dimmed text */
+	dim?: boolean;
+	/** Italic text */
+	italic?: boolean;
+	/** Underlined text */
+	underline?: boolean;
+	/** Inverse colors */
+	inverse?: boolean;
+}
+
+/**
+ * StyledText - Utility component to simplify text styling with OpenTUI
+ *
+ * Converts props to nested tag pattern required by OpenTUI.
+ *
+ * Example:
+ *   <StyledText bold color={theme.colors.success}>Success</StyledText>
+ *   becomes: <text fg={theme.colors.success}><strong>Success</strong></text>
+ */
+export function StyledText({
+	children,
+	bold = false,
+	color,
+	bgColor,
+	dim = false,
+	italic = false,
+	underline = false,
+	inverse = false,
+}: StyledTextProps) {
+	let content: React.ReactNode = children;
+
+	// Apply text modifiers (innermost to outermost)
+	if (bold) {
+		content = <strong>{content}</strong>;
+	}
+	if (italic) {
+		content = <em>{content}</em>;
+	}
+	if (underline) {
+		content = <u>{content}</u>;
+	}
+	// Note: dim and inverse use span with colors since OpenTUI doesn't have these as React elements
+	if (dim) {
+		content = <span fg={theme.colors.muted}>{content}</span>;
+	}
+	if (inverse) {
+		// Inverse effect approximated with contrasting colors
+		content = (
+			<span fg={theme.hints.fg} bg={theme.colors.text}>
+				{content}
+			</span>
+		);
+	}
+
+	// Apply colors (outer layer)
+	const textProps: { fg?: string; bg?: string } = {};
+	if (color) textProps.fg = color;
+	if (bgColor) textProps.bg = bgColor;
+
+	return <text {...textProps}>{content}</text>;
+}
+
+export default StyledText;

package/src/ui/components/TabBar.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { useDimensions } from "../state/DimensionsContext.js";
+import type { Screen } from "../state/types.js";
+import { theme } from "../theme.js";
+
+interface Tab {
+	key: string;
+	label: string;
+	screen: Screen;
+}
+
+export const TABS: Tab[] = [
+	{ key: "1", label: "Plugins", screen: "plugins" },
+	{ key: "2", label: "Skills", screen: "skills" },
+	{ key: "3", label: "MCP", screen: "mcp" },
+	{ key: "4", label: "Settings", screen: "settings" },
+	{ key: "5", label: "Profiles", screen: "profiles" },
+	{ key: "6", label: "CLI", screen: "cli-tools" },
+	{ key: "7", label: "Git State", screen: "gitignore" },
+	{ key: "8", label: "Alias", screen: "alias" },
+	{ key: "9", label: "Styles", screen: "styles" },
+	// Last, and keyed "0" because the digits ran out. The number row reads
+	// 1…9 then 0, so a tenth tab keyed 0 sits under the finger that follows 9 —
+	// which is the only reason the order here and the order on the keyboard
+	// agree.
+	{ key: "0", label: "Models", screen: "models" },
+];
+
+/** Columns one tab occupies: the text plus its one-space padding each side. */
+function cellWidth(text: string): number {
+	return text.length + 2;
+}
+
+/** Columns the whole bar occupies: every cell plus the separators between. */
+export function barWidth(texts: string[]): number {
+	if (texts.length === 0) return 0;
+	return texts.reduce((n, t) => n + cellWidth(t), 0) + (texts.length - 1);
+}
+
+/**
+ * Choose what each tab shows for the space available.
+ *
+ * The full bar is ~110 columns at ten tabs, so on a standard 100-column window
+ * it overflows and OpenTUI clips each cell — producing a row of truncated stubs
+ * ("1:", "4:", "7:Git ") that names nothing. Dropping the inactive labels keeps
+ * the bar honest: the number is what you press, and the one tab whose name
+ * matters is the one you are on. Compacted, ten tabs need ~46 columns.
+ */
+export function layoutTabs(
+	tabs: Tab[],
+	currentScreen: Screen,
+	available: number,
+): string[] {
+	const full = tabs.map((tab) => `${tab.key}:${tab.label}`);
+	if (barWidth(full) <= available) return full;
+	return tabs.map((tab) =>
+		tab.screen === currentScreen ? `${tab.key}:${tab.label}` : tab.key,
+	);
+}
+
+interface TabBarProps {
+	currentScreen: Screen;
+}
+
+export function TabBar({ currentScreen }: TabBarProps) {
+	const dimensions = useDimensions();
+	// ScreenLayout pads the bar by 1 each side, inside a container padded by 1.
+	const available = Math.max(10, dimensions.terminalWidth - 4);
+	const texts = layoutTabs(TABS, currentScreen, available);
+
+	return (
+		<box flexDirection="row" gap={0}>
+			{TABS.map((tab, index) => {
+				const isSelected = tab.screen === currentScreen;
+				const isLast = index === TABS.length - 1;
+				const text = texts[index];
+
+				return (
+					<box key={tab.key} flexDirection="row">
+						{/* Tab content */}
+						{isSelected ? (
+							<box>
+								<text bg={theme.colors.accent} fg={theme.hints.fg}>
+									<strong> {text} </strong>
+								</text>
+							</box>
+						) : (
+							<box>
+								<text fg={theme.colors.muted}> {text} </text>
+							</box>
+						)}
+						{/* Separator */}
+						{!isLast && <text fg={theme.colors.muted}>│</text>}
+					</box>
+				);
+			})}
+		</box>
+	);
+}
+
+export default TabBar;

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

@@ -0,0 +1,78 @@
+import type React from "react";
+import { theme } from "../../theme.js";
+
+/** One footer hint: a key (or key group) and the action it performs. */
+export interface FooterHint {
+	/** Key(s) for this action, e.g. ["↑", "↓"] or ["U"]. Joined by `joinKeys`. */
+	keys: string[];
+	label: string;
+}
+
+/**
+ * Render a key group as one chip's text.
+ *
+ * Single-character keys butt together, because `↑↓` is how an arrow pair is written
+ * everywhere and a separator there would be noise. Anything longer needs a gap, or the
+ * names run into each other and read as one key that does not exist — MEASURED on screen:
+ * `["Enter", "a"]` rendered as `Entera`, and the layout's own scroll hint
+ * `["^U/^D", "PgUp/Dn"]` rendered as `^U/^DPgUp/Dn` on every screen in the app.
+ *
+ * A space rather than a slash, because several key names already contain one.
+ */
+export function joinKeys(keys: string[]): string {
+	return keys.every((k) => [...k].length === 1)
+		? keys.join("")
+		: keys.join(" ");
+}
+
+// The shared chip palette, not a local one. This file used to define its own
+// (`theme.colors.dim` block + terminal-foreground ink), which is why the footer
+// stayed a low-contrast grey-on-grey strip after the palette was made vivid —
+// the new colours simply never reached it. Anything chip-shaped uses theme.hints.
+const KEY_BG = theme.hints.defaultBg;
+const KEY_FG = theme.hints.fg;
+const LABEL_FG = theme.colors.muted;
+const GAP = "   ";
+
+/**
+ * Render a row of footer hints as key badges + labels:
+ *
+ *   [↑↓] move   [U] update   [/] search
+ *
+ * Each key is shown in a chip so it reads as a pressable key, not prose.
+ * Shared across screens so every footer looks the same.
+ */
+export function FooterHints({
+	hints,
+}: { hints: FooterHint[] }): React.ReactNode {
+	const nodes: React.ReactNode[] = [];
+	hints.forEach((hint, i) => {
+		// A hint is identified by its key chord plus label, not its position.
+		const id = `${joinKeys(hint.keys)}:${hint.label}`;
+		if (i > 0) {
+			nodes.push(
+				<span key={`gap-${id}`} fg={LABEL_FG}>
+					{GAP}
+				</span>,
+			);
+		}
+		nodes.push(
+			<span key={`k-${id}`} bg={KEY_BG} fg={KEY_FG}>
+				{` ${joinKeys(hint.keys)} `}
+			</span>,
+		);
+		nodes.push(
+			<span key={`l-${id}`} fg={LABEL_FG}>
+				{` ${hint.label}`}
+			</span>,
+		);
+	});
+	return <text fg={theme.colors.text}>{nodes}</text>;
+}
+
+/** Convenience for callers that already have a node: same as <FooterHints>. */
+export function renderFooterHints(hints: FooterHint[]): React.ReactNode {
+	return <FooterHints hints={hints} />;
+}
+
+export default FooterHints;

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

@@ -0,0 +1,63 @@
+import type React from "react";
+import { type UiColor, theme } from "../../theme.js";
+
+interface PanelProps {
+	/** Panel title */
+	title?: string;
+	/** Panel content */
+	children: React.ReactNode;
+	/** Border color */
+	borderColor?: UiColor;
+	/** Title color */
+	titleColor?: UiColor;
+	/** Panel width - number or percentage like "50%" */
+	width?: number | `${number}%` | "auto";
+	/** Panel height - number or percentage like "50%" */
+	height?: number | `${number}%` | "auto";
+	/** Whether to use flexGrow */
+	flexGrow?: number;
+	/** Whether panel is focused/active */
+	focused?: boolean;
+}
+
+export function Panel({
+	title,
+	children,
+	borderColor = theme.colors.accent,
+	titleColor = theme.colors.accent,
+	width,
+	height,
+	flexGrow = 1,
+	focused = false,
+}: PanelProps) {
+	const activeColor = focused ? theme.colors.accent : borderColor;
+
+	return (
+		<box
+			flexDirection="column"
+			width={width}
+			height={height}
+			flexGrow={flexGrow}
+			border
+			borderStyle="single"
+			borderColor={activeColor}
+			padding={1}
+		>
+			{/* Title row */}
+			{title && (
+				<box marginBottom={0}>
+					<text fg={titleColor}>
+						<strong>{title}</strong>
+					</text>
+				</box>
+			)}
+
+			{/* Content */}
+			<box flexDirection="column" flexGrow={1}>
+				{children}
+			</box>
+		</box>
+	);
+}
+
+export default Panel;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface ProgressBarProps {
+	/** Progress message */
+	message: string;
+	/** Current progress (if determinate) */
+	current?: number;
+	/** Total items (if determinate) */
+	total?: number;
+}
+
+export function ProgressBar({ message, current, total }: ProgressBarProps) {
+	const isDeterminate =
+		current !== undefined && total !== undefined && total > 0;
+
+	if (isDeterminate) {
+		const barWidth = 20;
+		const filled = Math.round((current / total) * barWidth);
+		const empty = barWidth - filled;
+		const bar = "█".repeat(filled) + "░".repeat(empty);
+
+		return (
+			<box>
+				<text fg={theme.colors.info}>⟳</text>
+				<text fg={theme.colors.text}> {message} </text>
+				<text fg={theme.colors.info}>
+					[{bar}] {current}/{total}
+				</text>
+			</box>
+		);
+	}
+
+	// Indeterminate progress
+	return (
+		<box>
+			<text fg={theme.colors.info}>⟳</text>
+			<text fg={theme.colors.text}> {message}</text>
+			<text fg={theme.colors.muted}> ...</text>
+		</box>
+	);
+}
+
+export default ProgressBar;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { theme } from "../../theme.js";
+
+interface ScopeTabsProps {
+	/** Current scope */
+	scope: "project" | "global";
+	/** Callback when scope changes */
+	onToggle?: () => void;
+	/** Hint text for toggle key */
+	toggleHint?: string;
+}
+
+export function ScopeTabs({
+	scope,
+	onToggle: _onToggle,
+	toggleHint,
+}: ScopeTabsProps) {
+	const isProject = scope === "project";
+
+	return (
+		<box marginBottom={1} flexDirection="row" gap={1}>
+			{/* Project tab */}
+			<box>
+				{isProject ? (
+					<text bg={theme.colors.info} fg={theme.hints.fg}>
+						<strong> ◆ Project </strong>
+					</text>
+				) : (
+					<text fg={theme.colors.muted}> ○ Project </text>
+				)}
+			</box>
+
+			{/* Global tab */}
+			<box>
+				{!isProject ? (
+					<text bg={theme.colors.accent} fg={theme.hints.fg}>
+						<strong> ◆ Global </strong>
+					</text>
+				) : (
+					<text fg={theme.colors.muted}> ○ Global </text>
+				)}
+			</box>
+
+			{/* Toggle hint */}
+			{toggleHint && (
+				<box marginLeft={2}>
+					<text fg={theme.colors.muted}>({toggleHint})</text>
+				</box>
+			)}
+		</box>
+	);
+}
+
+export default ScopeTabs;