magus-cli 0.0.0-placeholder → 7.0.0

package/src/ui/App.tsx

@@ -0,0 +1,538 @@
+import fs from "node:fs";
+import { useRenderer } from "@opentui/react";
+import React, { useEffect, useState } from "react";
+import { isClaudeAvailable } from "../services/claude-cli.js";
+import {
+	migrateMarketplaceRename,
+	recoverMarketplaceSettings,
+} from "../services/claude-settings.js";
+import { checkGitignore } from "../services/gitignore-check.js";
+import {
+	applyAllSafeFixes,
+	loadGitignoreState,
+} from "../services/gitignore-service.js";
+import { repairAllMarketplaces } from "../services/local-marketplace.js";
+import { autoAddMissingMarketplaces } from "../services/marketplace-sync.js";
+import {
+	type VersionCheckResult,
+	checkForUpdates,
+	getCurrentVersion,
+} from "../services/version-check.js";
+import { ProgressBar } from "./components/layout/ProgressBar.js";
+import { ModalContainer } from "./components/modals/index.js";
+import { useGitignoreModal } from "./hooks/useGitignoreModal.js";
+import { useKeyboardHandler } from "./hooks/useKeyboardHandler.js";
+import {
+	AliasScreen,
+	CliToolsScreen,
+	GitignoreScreen,
+	McpRegistryScreen,
+	McpScreen,
+	ModelsScreen,
+	PluginsScreen,
+	ProfilesScreen,
+	SettingsScreen,
+	SkillsScreen,
+	StylesScreen,
+} from "./screens/index.js";
+import {
+	AppProvider,
+	useApp,
+	useModal,
+	useNavigation,
+} from "./state/AppContext.js";
+import {
+	DimensionsProvider,
+	useDimensions,
+} from "./state/DimensionsContext.js";
+import type { Screen } from "./state/types.js";
+import { theme } from "./theme.js";
+
+export const VERSION = getCurrentVersion();
+
+/**
+ * Router Component
+ * Renders the current screen based on route
+ */
+function Router() {
+	const { state } = useApp();
+	const { currentRoute } = state;
+
+	switch (currentRoute.screen) {
+		case "plugins":
+			return <PluginsScreen />;
+		case "mcp":
+			return <McpScreen />;
+		case "mcp-registry":
+			return <McpRegistryScreen />;
+		case "settings":
+			return <SettingsScreen />;
+		case "cli-tools":
+			return <CliToolsScreen />;
+		case "profiles":
+			return <ProfilesScreen />;
+		case "skills":
+			return <SkillsScreen />;
+		case "styles":
+			return <StylesScreen />;
+		case "gitignore":
+			return <GitignoreScreen />;
+		case "alias":
+			return <AliasScreen />;
+		case "models":
+			return <ModelsScreen />;
+		default:
+			return <PluginsScreen />;
+	}
+}
+
+/**
+ * GlobalKeyHandler Component
+ * Handles global keyboard shortcuts (1-8, Tab, Escape, q, Ctrl+C, ?, Shift+D)
+ * Does not render anything (returns null)
+ */
+function GlobalKeyHandler({
+	onDebugToggle,
+	onExit,
+}: { onDebugToggle: () => void; onExit: () => void }): null {
+	const { state } = useApp();
+	const { navigateToScreen } = useNavigation();
+	const modal = useModal();
+	const renderer = useRenderer();
+
+	useKeyboardHandler((input, key) => {
+		// Debug key (Shift+D) - always available
+		if (input === "D" && key.shift) {
+			onDebugToggle();
+			// Write debug info to file
+			const debugInfo = {
+				timestamp: new Date().toISOString(),
+				terminal: { rows: renderer.height, columns: renderer.width },
+				state: {
+					currentRoute: state.currentRoute,
+					isSearching: state.isSearching,
+					modal: state.modal ? { type: state.modal.type } : null,
+					plugins: {
+						scope: state.plugins.scope,
+						selectedIndex: state.plugins.selectedIndex,
+						searchQuery: state.plugins.searchQuery,
+						marketplacesStatus: state.plugins.marketplaces.status,
+						pluginsStatus: state.plugins.plugins.status,
+					},
+				},
+			};
+			fs.writeFileSync(
+				"/tmp/magus-debug.json",
+				JSON.stringify(debugInfo, null, 2),
+			);
+			return;
+		}
+
+		// Don't handle keys when modal is open or searching
+		if (state.modal || state.isSearching) return;
+
+		// Global navigation shortcuts (1-9, then 0) - include mcp-registry as it's
+		// a sub-screen of mcp
+		const isTopLevel = [
+			"plugins",
+			"mcp",
+			"mcp-registry",
+			"settings",
+			"cli-tools",
+			"profiles",
+			"skills",
+			"styles",
+			"gitignore",
+			"alias",
+			"models",
+		].includes(state.currentRoute.screen);
+
+		if (isTopLevel) {
+			if (input === "1") navigateToScreen("plugins");
+			else if (input === "2") navigateToScreen("skills");
+			else if (input === "3") navigateToScreen("mcp");
+			else if (input === "4") navigateToScreen("settings");
+			else if (input === "5") navigateToScreen("profiles");
+			else if (input === "6") navigateToScreen("cli-tools");
+			else if (input === "7") navigateToScreen("gitignore");
+			else if (input === "8") navigateToScreen("alias");
+			else if (input === "9") navigateToScreen("styles");
+			else if (input === "0") navigateToScreen("models");
+
+			// Tab navigation cycling
+			if (key.tab) {
+				const screens: Screen[] = [
+					"plugins",
+					"skills",
+					"mcp",
+					"settings",
+					"profiles",
+					"cli-tools",
+					"gitignore",
+					"alias",
+					"styles",
+					"models",
+				];
+				const currentIndex = screens.indexOf(
+					state.currentRoute.screen as Screen,
+				);
+				if (currentIndex !== -1) {
+					const nextIndex = key.shift
+						? (currentIndex - 1 + screens.length) % screens.length
+						: (currentIndex + 1) % screens.length;
+					navigateToScreen(screens[nextIndex]);
+				}
+			}
+		}
+
+		// q or Ctrl+C quits from anywhere — no need to bounce to home first.
+		if (input === "q" || (key.ctrl && input === "c")) {
+			onExit();
+			return;
+		}
+
+		// Escape goes back: registry → mcp, any other tab → plugins home,
+		// already-home → exit. But when a screen has a focused sub-view open
+		// (e.g. the Alias flag-detail editor), that sub-view owns Escape and
+		// backs out to itself — don't let the global handler jump to home.
+		// Scoped to the Escape branch ONLY so q/Ctrl+C still quit from anywhere.
+		if (key.escape) {
+			if (state.detailActive) return;
+			if (state.currentRoute.screen === "plugins") {
+				onExit();
+			} else if (state.currentRoute.screen === "mcp-registry") {
+				navigateToScreen("mcp");
+			} else {
+				navigateToScreen("plugins");
+			}
+		}
+
+		// ? for help
+		if (input === "?") {
+			modal.message(
+				"magus Help",
+				`Navigation
+  ↑/↓ or j/k    Move selection
+  Enter         Select / Toggle
+  Escape        Back (to home)
+  q / Ctrl+C    Quit (from anywhere)
+  ?             This help
+
+Quick Navigation
+  1  Plugins      4  Settings    7  Git State   0  Models
+  2  Skills       5  Profiles    8  Alias
+  3  MCP Servers  6  CLI Tools   9  Styles
+
+Plugin Actions
+  u  Update        d  Uninstall
+  a  Update All    r  Refresh
+
+MCP Servers
+  /  Search local + remote
+  r  Browse MCP registry
+
+Styles
+  Space  Tick / untick a style
+  a      Apply the selection to this project
+  x      Reset the selection to what is live
+  c      Clear the active output style
+
+Models
+  a / Enter  Route this project through the selected preset
+  c          Turn model tiers off
+  r          Re-read the config`,
+				"info",
+			);
+		}
+	});
+
+	return null;
+}
+
+/**
+ * UpdateBanner Component
+ * Shows version update notification
+ */
+function UpdateBanner({ result }: { result: VersionCheckResult }) {
+	if (!result.updateAvailable) return null;
+
+	return (
+		<box paddingLeft={1} paddingRight={1}>
+			<text bg={theme.colors.warning} fg={theme.hints.fg}>
+				<strong> UPDATE </strong>
+			</text>
+			<text fg={theme.colors.warning}>
+				{" "}
+				v{result.currentVersion} → v{result.latestVersion}
+			</text>
+			<text fg={theme.colors.muted}> Run: </text>
+			<text fg={theme.colors.info}>magus upgrade</text>
+		</box>
+	);
+}
+
+/**
+ * ProgressIndicator Component
+ * Shows progress bar when operations are running
+ */
+function ProgressIndicator({
+	message,
+	current,
+	total,
+}: {
+	message: string;
+	current?: number;
+	total?: number;
+}) {
+	return (
+		<box paddingLeft={1} paddingRight={1}>
+			<ProgressBar message={message} current={current} total={total} />
+		</box>
+	);
+}
+
+/**
+ * AppContentInner Component
+ * Main app layout with all UI elements
+ */
+interface AppContentInnerProps {
+	showDebug: boolean;
+	onDebugToggle: () => void;
+	updateInfo: VersionCheckResult | null;
+	onExit: () => void;
+	recoveryReport: string | null;
+}
+
+function AppContentInner({
+	showDebug,
+	onDebugToggle,
+	updateInfo,
+	onExit,
+	recoveryReport,
+}: AppContentInnerProps) {
+	const { state } = useApp();
+	const { progress } = state;
+	const dimensions = useDimensions();
+
+	return (
+		<box flexDirection="column" height={dimensions.terminalHeight}>
+			{updateInfo?.updateAvailable && <UpdateBanner result={updateInfo} />}
+			{recoveryReport && (
+				<box paddingLeft={1} paddingRight={1}>
+					<text fg={theme.colors.success}>✓ Fixed: {recoveryReport}</text>
+				</box>
+			)}
+			{showDebug && (
+				<box paddingLeft={1} paddingRight={1}>
+					<text fg={theme.colors.muted}>
+						DEBUG: {dimensions.terminalWidth}x{dimensions.terminalHeight} |
+						content={dimensions.contentHeight} | screen=
+						{state.currentRoute.screen}
+					</text>
+				</box>
+			)}
+			{progress && <ProgressIndicator {...progress} />}
+			<box
+				flexDirection="column"
+				height={dimensions.contentHeight}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<Router />
+			</box>
+			<GlobalKeyHandler onDebugToggle={onDebugToggle} onExit={onExit} />
+			<ModalContainer />
+		</box>
+	);
+}
+
+/**
+ * AppContent Component
+ * Wraps app with DimensionsProvider and manages state for debug/updates
+ */
+interface AppContentProps {
+	onExit: () => void;
+}
+
+function AppContent({ onExit }: AppContentProps) {
+	const { state, dispatch } = useApp();
+	const { progress } = state;
+	const [showDebug, setShowDebug] = useState(false);
+	const [updateInfo, setUpdateInfo] = useState<VersionCheckResult | null>(null);
+	const [recoveryReport, setRecoveryReport] = useState<string | null>(null);
+	const [gitignoreData, setGitignoreData] = useState<{
+		violationCount: number;
+		safeCount: number;
+	} | null>(null);
+	const gitignoreModal = useGitignoreModal();
+
+	// Check for updates on startup, then re-check periodically (force-bypassing
+	// the session cache) so the banner reflects a release that lands while
+	// magus is left open — otherwise it shows the stale startup value.
+	useEffect(() => {
+		checkForUpdates()
+			.then(setUpdateInfo)
+			.catch(() => {});
+		const id = setInterval(
+			() => {
+				checkForUpdates(true)
+					.then(setUpdateInfo)
+					.catch(() => {});
+			},
+			15 * 60 * 1000, // 15 min
+		);
+		return () => clearInterval(id);
+	}, []);
+
+	// Auto-dismiss recovery banner after 5 seconds
+	useEffect(() => {
+		if (!recoveryReport) return;
+		const timer = setTimeout(() => setRecoveryReport(null), 5000);
+		return () => clearTimeout(timer);
+	}, [recoveryReport]);
+
+	// Show gitignore modal — wait for the modal slot to be free so we don't
+	// stomp on another modal that may have just been shown.
+	useEffect(() => {
+		if (!gitignoreData) return;
+		if (state.modal) return;
+		gitignoreModal.show({
+			violationCount: gitignoreData.violationCount,
+			safeCount: gitignoreData.safeCount,
+			onFixSafe: async () => {
+				const s = await loadGitignoreState(state.projectPath);
+				await applyAllSafeFixes(state.projectPath, s.violations);
+			},
+		});
+		setGitignoreData(null);
+	}, [gitignoreData, gitignoreModal, state.modal, state.projectPath]);
+
+	// Auto-refresh marketplaces on startup
+	useEffect(() => {
+		const noRefresh = process.argv.includes("--no-refresh");
+		if (noRefresh) return;
+
+		dispatch({
+			type: "SHOW_PROGRESS",
+			state: { message: "Scanning marketplaces..." },
+		});
+
+		// Migrate old marketplace names -> magus (idempotent), then repair plugin.json files
+		migrateMarketplaceRename().catch(() => {}); // non-blocking, best-effort
+
+		// Auto-add marketplaces referenced by enabledPlugins but missing from
+		// the local registry. Fixes the "fresh clone of a project whose
+		// .claude/settings.json enables @magus plugins but this machine has
+		// never run `claude plugin marketplace add`" case.
+		(async () => {
+			try {
+				if (!(await isClaudeAvailable())) return;
+				const added = await autoAddMissingMarketplaces(process.cwd());
+				if (added.length > 0) {
+					setRecoveryReport(`added marketplace(s): ${added.join(", ")}`);
+				}
+			} catch {
+				// non-fatal: user can still install marketplaces manually
+			}
+		})();
+
+		// Recover stale marketplace registry entries (e.g. "directory" -> "github")
+		recoverMarketplaceSettings()
+			.then(async (recovery) => {
+				const parts: string[] = [];
+				if (recovery.reregistered.length > 0) {
+					// Update the marketplace clone now that the source is fixed
+					const { updateMarketplace } = await import(
+						"../services/claude-cli.js"
+					);
+					for (const mp of recovery.reregistered) {
+						try {
+							await updateMarketplace(mp);
+							parts.push(`${mp} refreshed`);
+						} catch {
+							parts.push(`${mp} (update failed)`);
+						}
+					}
+				}
+				if (recovery.enabledAutoUpdate.length > 0) {
+					parts.push(`auto-update: ${recovery.enabledAutoUpdate.join(", ")}`);
+				}
+				if (recovery.removed.length > 0) {
+					parts.push(`removed: ${recovery.removed.join(", ")}`);
+				}
+				if (parts.length > 0) {
+					setRecoveryReport(parts.join(" | "));
+				}
+			})
+			.catch(() => {}); // non-fatal
+
+		// Check for gitignore manifest violations and surface a popup if any.
+		// Loads twice (once for count, once when user picks "fix safe") because
+		// the second load happens after edits — keeps detection cheap on startup.
+		(async () => {
+			try {
+				const result = await checkGitignore(process.cwd());
+				if (result.violationCount > 0) {
+					const s = await loadGitignoreState(process.cwd());
+					const safeCount = s.violations.filter(
+						(v) => v.severity === "safe",
+					).length;
+					setGitignoreData({
+						violationCount: result.violationCount,
+						safeCount,
+					});
+				}
+			} catch {
+				// non-fatal
+			}
+		})();
+
+		repairAllMarketplaces()
+			.then(async () => {
+				dispatch({ type: "HIDE_PROGRESS" });
+				dispatch({ type: "DATA_REFRESH_COMPLETE" });
+			})
+			.catch(() => {
+				dispatch({ type: "HIDE_PROGRESS" });
+			});
+	}, [dispatch]);
+
+	// Count transient banners for dimension calculation
+	const transientBannerCount = recoveryReport ? 1 : 0;
+
+	return (
+		<DimensionsProvider
+			showProgress={!!progress}
+			showDebug={showDebug}
+			showUpdateBanner={!!updateInfo?.updateAvailable}
+			transientBannerCount={transientBannerCount}
+		>
+			<AppContentInner
+				showDebug={showDebug}
+				onDebugToggle={() => setShowDebug((s) => !s)}
+				updateInfo={updateInfo}
+				onExit={onExit}
+				recoveryReport={recoveryReport}
+			/>
+		</DimensionsProvider>
+	);
+}
+
+/**
+ * App Component (Root)
+ * Entry point for the OpenTUI application
+ * Wraps everything with AppProvider
+ */
+interface AppProps {
+	onExit: () => void;
+}
+
+export function App({ onExit }: AppProps) {
+	return (
+		<AppProvider>
+			<AppContent onExit={onExit} />
+		</AppProvider>
+	);
+}
+
+export default App;

package/src/ui/adapters/catalogNotice.ts

@@ -0,0 +1,122 @@
+/**
+ * catalogNotice.ts — the text of the Plugins screen's warning line.
+ *
+ * Extracted from PluginsScreen for the same reason as pluginsAdapter: so it can
+ * be tested without importing a React/OpenTUI screen. That is not merely tidier —
+ * importing the screen into a test pulls the renderer into the shared test process
+ * and broke fifteen unrelated tests.
+ *
+ * What this does NOT warn about, deliberately
+ * -------------------------------------------
+ * `autoUpdate: false` and a marketplace clone sitting behind its remote are both
+ * NORMAL here. Plugins are not auto-updated by policy; the UI's job is to show
+ * that an update exists, not to advance the install source. An earlier version of
+ * this banner reported both as problems and suggested
+ * `claude plugin marketplace update`, which would have defeated the policy it was
+ * complaining about. A warning that fires on intended behaviour trains the user to
+ * ignore the line.
+ *
+ * The one thing worth warning about is an update check that did not happen —
+ * because the alternative is claiming a plugin is current when nobody looked.
+ */
+
+import { formatWait } from "../../services/github-budget.js";
+import type { MarketplaceFetchFailure } from "../../services/marketplace-fetcher.js";
+
+export interface CatalogNoticeInput {
+	/** Catalogs that could not be read from any authoritative source. */
+	failures: MarketplaceFetchFailure[];
+	/** Installed plugins whose version could not be verified against upstream. */
+	unverifiedPlugins: number;
+	/** Terminal columns available for the line. */
+	width: number;
+	/** For the countdown; injected so tests are not clock-dependent. */
+	now?: number;
+}
+
+/**
+ * One line naming why some versions on screen could not be verified — or `null`
+ * when everything was actually checked.
+ *
+ * Returns `null` when there is nothing wrong: a banner that is always present is
+ * a banner nobody reads.
+ *
+ * Segments are added in priority order and dropped from the end when they do not
+ * fit `width`. Listing every failing marketplace overflowed an 80-column pane and
+ * took the retry hint with it — a warning truncated mid-sentence is barely better
+ * than no warning.
+ */
+export function buildCatalogNoticeText({
+	failures,
+	unverifiedPlugins,
+	width,
+	now = Date.now(),
+}: CatalogNoticeInput): string | null {
+	if (failures.length === 0) return null;
+
+	const segments: string[] = [];
+
+	// Lead with the reason, not the names: "rate limit" tells the user to wait,
+	// "timed out" tells them to check the network. That distinction is the whole
+	// value of classifying the failure, and it costs few characters.
+	const kinds = new Set(failures.map((f) => f.kind));
+	const rateLimited = kinds.has("rate-limited");
+	const reason = rateLimited
+		? "GitHub rate limit"
+		: kinds.has("timeout")
+			? "GitHub timed out"
+			: (failures[0]?.detail ?? "fetch failed");
+
+	const noun = failures.length === 1 ? "catalog" : "catalogs";
+	// Naming them only pays off when there are one or two; past that the count
+	// carries the same information in a fraction of the width.
+	const named =
+		failures.length <= 2
+			? `: ${failures.map((f) => f.marketplace).join(", ")}`
+			: "";
+	segments.push(`${failures.length} ${noun} unchecked (${reason})${named}`);
+
+	if (unverifiedPlugins > 0) {
+		segments.push(
+			`${unverifiedPlugins} version${unverifiedPlugins === 1 ? "" : "s"} unverified`,
+		);
+	}
+
+	// The countdown replaces the bare retry hint when we know when the window
+	// reopens. Answering "when can I try again" is the point: "try later" leaves
+	// the user to guess, and guessing wrong spends another request against the
+	// limit. Soonest retry across all failures, since that is when anything at all
+	// becomes possible again.
+	const retryAt = failures
+		.map((f) => f.retryAt)
+		.filter((t): t is number => typeof t === "number" && t > now)
+		.sort((a, b) => a - b)[0];
+
+	const hint = retryAt
+		? ` · retrying in ${formatWait(retryAt - now)}`
+		: " · r to retry";
+
+	// Column budget. `⚠` renders double-width in most terminals while
+	// `String.length` counts it as one, so one column is held back for it.
+	const maxColumns = Math.max(1, width - 1);
+
+	// The retry affordance is reserved out of the budget rather than appended: it
+	// is the only action the line offers, so it is the last thing that may be cut.
+	// No floor on what remains — a floor is what let a 40-column pane overflow by
+	// two, which is the whole failure mode this budget exists to prevent.
+	const messageBudget = maxColumns - hint.length;
+
+	let line = `⚠ ${segments[0]}`;
+	for (const segment of segments.slice(1)) {
+		const candidate = `${line} · ${segment}`;
+		if (candidate.length > messageBudget) break;
+		line = candidate;
+	}
+	if (line.length > messageBudget) {
+		line = messageBudget > 1 ? `${line.slice(0, messageBudget - 1)}…` : "";
+	}
+
+	// Absurdly narrow pane: the hint alone does not fit. Truncate it rather than
+	// return a line that overflows and corrupts the layout.
+	return `${line}${hint}`.slice(0, maxColumns);
+}