magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/hooks/useGitignoreModal.ts

@@ -0,0 +1,95 @@
+import { useCallback } from "react";
+import { useApp, useNavigation } from "../state/AppContext.js";
+import type { ModalState } from "../state/types.js";
+
+/**
+ * Startup gitignore-violation modal: magus launches, detects a problem, and
+ * asks "add missing ignores / open the tab / dismiss".
+ *
+ * Pure builder is exported separately for tests.
+ */
+
+export interface BuildModalArgs {
+	violationCount: number;
+	safeCount: number;
+	onFixSafe: () => void;
+	onOpenTab: () => void;
+	onDismiss: () => void;
+}
+
+export function buildGitignoreModal(args: BuildModalArgs): ModalState {
+	const { violationCount, safeCount, onFixSafe, onOpenTab, onDismiss } = args;
+	const options = [
+		{
+			label:
+				safeCount > 0
+					? `Add ${safeCount} missing .gitignore entr${safeCount === 1 ? "y" : "ies"}`
+					: "(no missing .gitignore entries)",
+			value: "fix-safe",
+		},
+		{
+			label: "Open Git State tab to review",
+			value: "open-tab",
+		},
+		{
+			label: "Dismiss",
+			value: "dismiss",
+		},
+	];
+	return {
+		type: "select",
+		title: "Gitignore violations detected",
+		message: `Found ${violationCount} managed gitignore item(s) that do not match the current repo state.\n\nMissing .gitignore entries can be added now. Items that change git tracking are reviewed and fixed from the Gitignore tab.`,
+		options,
+		onSelect: (value: string) => {
+			if (value === "fix-safe") onFixSafe();
+			else if (value === "open-tab") onOpenTab();
+			else onDismiss();
+		},
+		onCancel: onDismiss,
+	};
+}
+
+export function useGitignoreModal() {
+	const { dispatch } = useApp();
+	const { navigateToScreen } = useNavigation();
+
+	const show = useCallback(
+		(args: {
+			violationCount: number;
+			safeCount: number;
+			onFixSafe: () => Promise<void> | void;
+		}) => {
+			if (args.violationCount === 0) return;
+			const dismiss = () => dispatch({ type: "HIDE_MODAL" });
+			const modal = buildGitignoreModal({
+				violationCount: args.violationCount,
+				safeCount: args.safeCount,
+				onFixSafe: () => {
+					dispatch({ type: "HIDE_MODAL" });
+					void Promise.resolve(args.onFixSafe()).catch((err) => {
+						dispatch({
+							type: "SHOW_MODAL",
+							modal: {
+								type: "message",
+								title: "Safe fixes failed",
+								message: err instanceof Error ? err.message : String(err),
+								variant: "error",
+								onDismiss: dismiss,
+							},
+						});
+					});
+				},
+				onOpenTab: () => {
+					dispatch({ type: "HIDE_MODAL" });
+					navigateToScreen("gitignore");
+				},
+				onDismiss: dismiss,
+			});
+			dispatch({ type: "SHOW_MODAL", modal });
+		},
+		[dispatch, navigateToScreen],
+	);
+
+	return { show };
+}

package/src/ui/hooks/useKeyboard.ts

@@ -0,0 +1,24 @@
+import { useKeyboard as useOpenTUIKeyboard } from "@opentui/react";
+
+/**
+ * OpenTUI keyboard event type
+ */
+export interface KeyEvent {
+	name: string;
+	ctrl?: boolean;
+	shift?: boolean;
+	meta?: boolean;
+}
+
+/**
+ * Simple re-export of OpenTUI's useKeyboard hook
+ * Used by modals for direct keyboard event handling
+ *
+ * Key names in OpenTUI:
+ * - Single characters: "a", "1", etc.
+ * - Arrow keys: "up", "down", "left", "right"
+ * - Special: "enter", "escape", "tab", "backspace", "delete"
+ */
+export function useKeyboard(handler: (event: KeyEvent) => void): void {
+	useOpenTUIKeyboard(handler);
+}

package/src/ui/hooks/useKeyboardHandler.ts

@@ -0,0 +1,63 @@
+import { useKeyboard as useOpenTUIKeyboard } from "@opentui/react";
+
+/**
+ * Wrapper hook for OpenTUI's useKeyboard that provides an Ink-like API
+ * Maps Ink key names to OpenTUI key names for easier migration
+ */
+
+export interface InkLikeKey {
+	name: string;
+	ctrl: boolean;
+	shift: boolean;
+	meta: boolean;
+	return?: boolean;
+	upArrow?: boolean;
+	downArrow?: boolean;
+	leftArrow?: boolean;
+	rightArrow?: boolean;
+	escape?: boolean;
+	tab?: boolean;
+}
+
+type KeyHandler = (input: string, key: InkLikeKey) => void;
+
+/**
+ * useKeyboardHandler hook
+ * Provides Ink-like API for keyboard events
+ *
+ * @param handler - Callback function with Ink-compatible signature
+ *
+ * @example
+ * ```tsx
+ * useKeyboardHandler((input, key) => {
+ *   if (key.return) handleEnter();
+ *   if (key.upArrow) handleUp();
+ *   if (key.escape) handleEscape();
+ *   if (input === 'q') handleQuit();
+ * });
+ * ```
+ */
+export function useKeyboardHandler(handler: KeyHandler): void {
+	useOpenTUIKeyboard((event) => {
+		// Map OpenTUI key names to Ink-like key names
+		const key: InkLikeKey = {
+			name: event.name,
+			ctrl: event.ctrl || false,
+			shift: event.shift || false,
+			meta: event.meta || false,
+			return: event.name === "enter" || event.name === "return",
+			upArrow: event.name === "up",
+			downArrow: event.name === "down",
+			leftArrow: event.name === "left",
+			rightArrow: event.name === "right",
+			escape: event.name === "escape",
+			tab: event.name === "tab",
+		};
+
+		// For printable characters, pass the character as input
+		// For special keys, pass empty string
+		const input = event.name.length === 1 ? event.name : "";
+
+		handler(input, key);
+	});
+}

package/src/ui/registry.ts

@@ -0,0 +1,33 @@
+import type React from "react";
+
+export interface RowRenderProps<T> {
+	item: T;
+	isSelected: boolean;
+	width?: number;
+}
+
+export interface DetailRenderProps<T> {
+	item: T;
+	/**
+	 * Usable columns in the detail panel. Optional — renderers that only emit
+	 * short lines can ignore it. Renderers that print wrapped body text need it,
+	 * because OpenTUI does not reflow: an unwrapped line is clipped, not folded.
+	 */
+	width?: number;
+}
+
+export interface Hint {
+	key: string;
+	label: string;
+	tone?: "default" | "primary" | "danger";
+}
+
+export interface ItemRenderer<T> {
+	renderRow: (props: RowRenderProps<T>) => React.ReactNode;
+	renderDetail: (props: DetailRenderProps<T>) => React.ReactNode;
+	getActionHints?: (item: T) => Hint[];
+}
+
+export type RendererRegistry<TItem extends { kind: string }> = {
+	[K in TItem["kind"]]: ItemRenderer<Extract<TItem, { kind: K }>>;
+};

package/src/ui/renderers/cliToolRenderers.tsx

@@ -0,0 +1,326 @@
+import type React from "react";
+import type { CliTool } from "../../data/cli-tools.js";
+import {
+	type InstallMethod,
+	cliToolUninstall,
+} from "../../services/cli-tool-commands.js";
+import { formatCommand } from "../../utils/command-utils.js";
+import {
+	type CliToolRow,
+	cliToolStatusText,
+	displayVersion,
+	isInstalled,
+} from "../adapters/cliToolsAdapter.js";
+import { type UiColor, theme } from "../theme.js";
+import type { StatusTone } from "./pluginStatusText.js";
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+/**
+ * The uninstall command as a line the reader can copy.
+ *
+ * This used to be a second, hand-written copy of the screen's own uninstall
+ * switch — same shape, and already drifted (`pip uninstall` here,
+ * `pip uninstall -y` there). Both spelled a bare `pip`, which on many machines
+ * is not an executable. Now the renderer and the screen ask the same function,
+ * so what is shown is what would run.
+ *
+ * Empty string when there is nothing to offer, which is what the caller
+ * interpolates into the conflict list.
+ */
+function uninstallHint(
+	tool: CliTool,
+	method: InstallMethod,
+	brewFormula?: string,
+): string {
+	const cmd = cliToolUninstall(tool, method, brewFormula);
+	return cmd ? formatCommand(cmd) : "";
+}
+
+function toneColor(tone: StatusTone): UiColor {
+	switch (tone) {
+		case "warning":
+			return theme.colors.warning;
+		case "danger":
+			return theme.colors.danger;
+		case "success":
+			return theme.colors.success;
+		case "info":
+			return theme.colors.info;
+		case "muted":
+			return theme.colors.muted;
+	}
+}
+
+// ─── Row renderer ──────────────────────────────────────────────────────────────
+
+export function renderCliToolRow(
+	row: CliToolRow,
+	_index: number,
+	isSelected: boolean,
+): React.ReactNode {
+	const { tool, status, install } = row;
+	const installed = isInstalled(status);
+	const allMethods = install?.all ?? [];
+	const hasConflict = allMethods.length > 1;
+
+	let icon: string;
+	let iconColor: UiColor;
+	if (!installed) {
+		icon = "○";
+		iconColor = theme.colors.muted;
+	} else if (hasConflict) {
+		icon = "!";
+		iconColor = theme.colors.danger;
+	} else if (status?.state === "upgrade") {
+		icon = "*";
+		iconColor = theme.colors.warning;
+	} else if (status?.state === "unknown") {
+		icon = "?";
+		iconColor = theme.colors.warning;
+	} else {
+		icon = "●";
+		iconColor = theme.colors.success;
+	}
+
+	const versionText = status?.installed
+		? ` ${displayVersion(status.installed)}`
+		: "";
+	const methodTag =
+		installed && allMethods.length ? ` ${allMethods.join("+")}` : "";
+	const { suffix, tone } = cliToolStatusText(row);
+
+	if (isSelected) {
+		return (
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{" "}
+				{icon} {tool.displayName}
+				{versionText}
+				{methodTag}
+				{suffix}{" "}
+			</text>
+		);
+	}
+
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={iconColor}> {icon}</span>
+			<span fg={theme.colors.text}> {tool.displayName}</span>
+			{versionText ? (
+				<span fg={theme.colors.success}>{versionText}</span>
+			) : null}
+			{methodTag ? (
+				<span fg={hasConflict ? theme.colors.danger : theme.colors.dim}>
+					{methodTag}
+				</span>
+			) : null}
+			{suffix ? <span fg={toneColor(tone)}>{suffix}</span> : null}
+		</text>
+	);
+}
+
+// ─── Detail renderer ───────────────────────────────────────────────────────────
+
+export function renderCliToolDetail(
+	row: CliToolRow | undefined,
+): React.ReactNode {
+	if (!row) {
+		return (
+			<box
+				flexDirection="column"
+				alignItems="center"
+				justifyContent="center"
+				flexGrow={1}
+			>
+				<text fg={theme.colors.muted}>Select a tool to see details</text>
+			</box>
+		);
+	}
+
+	const { tool, status, checking, install, updateCommand, installCommand } =
+		row;
+	const installed = isInstalled(status);
+	const allMethods = install?.all ?? [];
+	const brewFormula = install?.brewFormula;
+	const hasConflict = allMethods.length > 1;
+	const state = status?.state;
+
+	return (
+		<box flexDirection="column">
+			<box marginBottom={1}>
+				<text fg={theme.colors.info}>
+					<strong>
+						{"⚙ "}
+						{tool.displayName}
+					</strong>
+				</text>
+				{state === "upgrade" ? <text fg={theme.colors.warning}> ⬆</text> : null}
+				{hasConflict ? <text fg={theme.colors.danger}> !</text> : null}
+			</box>
+
+			<text fg={theme.colors.muted}>{tool.description}</text>
+
+			<box marginTop={1} flexDirection="column">
+				<box>
+					<text fg={theme.colors.muted}>{"Status   "}</text>
+					{checking || !status ? (
+						<text fg={theme.colors.muted}>{"● Checking..."}</text>
+					) : state === "install" ? (
+						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
+					) : state === "upgrade" ? (
+						<text fg={theme.colors.warning}>{"● Update available"}</text>
+					) : state === "unknown" ? (
+						<text fg={theme.colors.warning}>{"? Unverified"}</text>
+					) : (
+						<text fg={theme.colors.success}>{"● Up to date"}</text>
+					)}
+				</box>
+				{state === "unknown" && status?.note ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Why      "}</text>
+						<text fg={theme.colors.warning}>{status.note}</text>
+					</box>
+				) : null}
+				{/* An upgrade that also takes the tool over from another installer. */}
+				{status?.adopted ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Note     "}</text>
+						<text fg={theme.colors.warning}>{status.adopted}</text>
+					</box>
+				) : null}
+				{status?.installed ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Version  "}</text>
+						<text fg={theme.colors.text}>
+							<span fg={theme.colors.success}>
+								{displayVersion(status.installed)}
+							</span>
+							{state === "upgrade" && status.target ? (
+								<span fg={theme.colors.warning}>
+									{" "}
+									→ {displayVersion(status.target)}
+								</span>
+							) : null}
+						</text>
+					</box>
+				) : status?.latest ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Latest   "}</text>
+						<text fg={theme.colors.text}>{displayVersion(status.latest)}</text>
+					</box>
+				) : null}
+				{status?.pin ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Pinned   "}</text>
+						<text fg={theme.colors.text}>{displayVersion(status.pin)}</text>
+					</box>
+				) : null}
+				{installed && updateCommand ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Update   "}</text>
+						<text fg={theme.colors.accent}>{formatCommand(updateCommand)}</text>
+					</box>
+				) : !installed && !checking ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Install  "}</text>
+						<text fg={theme.colors.accent}>
+							{formatCommand(installCommand)}
+						</text>
+					</box>
+				) : null}
+				<box>
+					<text fg={theme.colors.muted}>{"Website  "}</text>
+					<text fg={theme.colors.link}>{tool.website}</text>
+				</box>
+			</box>
+
+			{/* Conflict warning */}
+			{hasConflict ? (
+				<box marginTop={1} flexDirection="column">
+					<box>
+						<text bg={theme.colors.danger} fg={theme.hints.fg}>
+							<strong>
+								{" "}
+								Conflict: installed via {allMethods.join(" + ")}{" "}
+							</strong>
+						</text>
+					</box>
+					<box marginTop={1}>
+						<text fg={theme.colors.muted}>
+							Multiple installs can cause version mismatches.
+							{"\n"}Keep one, remove the rest:
+						</text>
+					</box>
+					{allMethods.map((method, i) => (
+						<box key={method}>
+							<text fg={theme.colors.text}>
+								<span fg={i === 0 ? theme.colors.success : theme.colors.danger}>
+									{i === 0 ? "  ● keep  " : "  ○ remove "}
+								</span>
+								<span fg={theme.colors.warning}>{method}</span>
+								{i > 0 ? (
+									<span
+										fg={theme.colors.dim}
+									>{`  ${uninstallHint(tool, method, brewFormula)}`}</span>
+								) : (
+									<span fg={theme.colors.dim}> (active in PATH)</span>
+								)}
+							</text>
+						</box>
+					))}
+					<box marginTop={1}>
+						<text bg={theme.colors.danger} fg={theme.hints.fg}>
+							{" "}
+							c{" "}
+						</text>
+						<text fg={theme.colors.muted}> Resolve — pick which to keep</text>
+					</box>
+				</box>
+			) : null}
+
+			{/* Actions */}
+			<box marginTop={2} flexDirection="column">
+				{checking || !status ? null : !installed ? (
+					<box>
+						<text bg={theme.colors.success} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}> Install</text>
+						<text fg={theme.colors.dim}> {formatCommand(installCommand)}</text>
+					</box>
+				) : state === "upgrade" ? (
+					<box>
+						<text bg={theme.colors.warning} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}>
+							{" "}
+							Update
+							{status.target ? ` to ${displayVersion(status.target)}` : ""}
+						</text>
+					</box>
+				) : (
+					<box flexDirection="column">
+						<box>
+							<text bg={theme.colors.muted} fg={theme.hints.fg}>
+								{" "}
+								Enter{" "}
+							</text>
+							<text fg={theme.colors.muted}>
+								{state === "unknown" ? " Update anyway" : " Reinstall"}
+							</text>
+						</box>
+						{/* The status warns that this command may not replace the
+						    running binary; the menu still offers it, as an explicit
+						    user action, and says so beside it. */}
+						{status.reason === "not-managed" && status.note ? (
+							<text fg={theme.colors.warning}>{`  ${status.note}`}</text>
+						) : null}
+					</box>
+				)}
+			</box>
+		</box>
+	);
+}

package/src/ui/renderers/gitignoreRenderers.tsx

@@ -0,0 +1,80 @@
+import type React from "react";
+import type { ResolvedRule, Violation } from "../../types/gitignore.js";
+import { theme } from "../theme.js";
+
+/**
+ * A unified row for the Gitignore screen — represents one resolved rule,
+ * annotated with every violation it has against the working tree.
+ */
+export interface RuleRow {
+	rule: ResolvedRule;
+	violations: Violation[];
+}
+
+// Two color channels that never collide:
+//   • Badge color = direction (where the item ends up): green = tracked by git,
+//     reddish = ignored/dropped from git. Same on clean AND violation rows.
+//   • Filename color = severity: dim gray when fine, red when it's a violation.
+// No row background tints — red is reserved entirely for "needs attention".
+const TRACK_FG = theme.colors.success; // green — item ends up tracked by git
+const IGNORE_FG = theme.colors.danger; // reddish — item ends up ignored / dropped
+const VIOLATION_PATH_FG = theme.colors.danger; // bright red filename = look here
+const CLEAN_PATH_FG = theme.colors.muted;
+const SELECTED_BG = theme.surface.bg; // faint slate highlight for the cursor row
+
+// Violation badges are solid chips so the required direction reads at a glance:
+// green chip = will be tracked, red chip = will be ignored/dropped.
+const TRACK_CHIP_BG = theme.colors.success;
+const IGNORE_CHIP_BG = theme.colors.danger;
+const CHIP_FG = theme.colors.text;
+
+// The only marker is the cursor: ▶ on the selected row, blank otherwise.
+// Action (track/ignore) is read from the badge word and, for clean items,
+// from the group the row sits under — so no per-row dot is needed.
+const MARKER_SELECTED = "▶";
+const MARKER_NONE = " ";
+
+// Layout: "  M action  path" — keep the prefix compact so the narrow terminal
+// case still has room for the path without wrapping.
+const MAX_PATH_LEN = 22;
+
+function truncatePath(p: string): string {
+	return p.length > MAX_PATH_LEN ? `${p.slice(0, MAX_PATH_LEN - 1)}…` : p;
+}
+
+export function renderRuleRow(
+	row: RuleRow,
+	isSelected: boolean,
+): React.ReactNode {
+	const { rule, violations } = row;
+	const path = truncatePath(rule.pattern);
+	const key = `${rule.action}:${rule.pattern}`;
+	// Badge text padded to a fixed width so paths line up in a column.
+	const badge = rule.action === "ignore" ? "ignore" : "track ";
+	const badgeFg = rule.action === "ignore" ? IGNORE_FG : TRACK_FG;
+	const suffix = violations.length > 1 ? ` +${violations.length - 1}` : "";
+	const rowBg = isSelected ? SELECTED_BG : undefined;
+	const marker = isSelected ? MARKER_SELECTED : MARKER_NONE;
+	const isViolation = violations.length > 0;
+
+	if (isViolation) {
+		// Solid badge chip + red filename. The chip color is the fix direction.
+		const chipBg = rule.action === "ignore" ? IGNORE_CHIP_BG : TRACK_CHIP_BG;
+		return (
+			<text key={key} bg={rowBg}>
+				<span fg={VIOLATION_PATH_FG}>{`  ${marker} `}</span>
+				<span bg={chipBg} fg={CHIP_FG}>{` ${badge} `}</span>
+				<span fg={VIOLATION_PATH_FG}>{`  ${path}${suffix}`}</span>
+			</text>
+		);
+	}
+
+	// Clean row: flat colored badge word, dim path, no chip.
+	return (
+		<text key={key} bg={rowBg}>
+			<span fg={badgeFg}>{`  ${marker} `}</span>
+			<span fg={badgeFg}>{badge}</span>
+			<span fg={CLEAN_PATH_FG}>{`  ${path}`}</span>
+		</text>
+	);
+}