magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/screens/GitignoreScreen.tsx

@@ -0,0 +1,562 @@
+import { spawn } from "node:child_process";
+import { appendFileSync } from "node:fs";
+import { useRenderer } from "@opentui/react";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { getGitignoreRuleReason } from "../../data/gitignore-reasons.js";
+import { BUILTIN_TEMPLATES } from "../../data/gitignore-templates.js";
+import {
+	type GitignoreState,
+	applyDestructiveFix,
+	applyTemplate,
+	ensureProjectManifestForEdit,
+	loadGitignoreState,
+} from "../../services/gitignore-service.js";
+import type { ResolvedRule, Tier, Violation } from "../../types/gitignore.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
+import {
+	type RuleRow,
+	renderRuleRow,
+} from "../renderers/gitignoreRenderers.js";
+import { useApp, useModal } from "../state/AppContext.js";
+import { theme } from "../theme.js";
+
+// Clean rows are grouped by the manifest that defined them. Order = display
+// order, top to bottom. "Default" is the user-facing name for the built-in
+// rules. Each label names where you'd go to change that group's rules.
+const SOURCE_ORDER: Tier[] = ["project", "global", "profile", "builtin"];
+const SOURCE_LABELS: Record<Tier, string> = {
+	project: "Project · .claude/gitignore.json",
+	global: "Global · ~/.claude/gitignore.json",
+	profile: "Profile",
+	builtin: "Default · built into magus",
+};
+
+export function GitignoreScreen() {
+	const { state } = useApp();
+	const modal = useModal();
+	const renderer = useRenderer();
+	const cwd = state.projectPath;
+
+	const [data, setData] = useState<GitignoreState | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [selectedIdx, setSelectedIdx] = useState(0);
+
+	const reload = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const s = await loadGitignoreState(cwd);
+			setData(s);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setLoading(false);
+		}
+	}, [cwd]);
+
+	useEffect(() => {
+		void reload();
+	}, [reload]);
+
+	// Build the managed list: every desired gitignore rule, with all matching
+	// violations grouped under the rule that owns them.
+	const rows: RuleRow[] = useMemo(() => {
+		if (!data) return [];
+
+		const annotated: RuleRow[] = data.resolved.rules.map((rule) => {
+			const violations = data.violations.filter((v) =>
+				violationMatchesRule(rule, v),
+			);
+			return { rule, violations };
+		});
+
+		// Display order = flat index order (the keyboard handler walks this array),
+		// so the on-screen layout must match this sort exactly:
+		//   1. violations first (most violations first)
+		//   2. then clean rows grouped by source manifest (SOURCE_ORDER)
+		//   3. alphabetical within each group
+		const sourceRank = (tier: ResolvedRule["source"]): number => {
+			const i = SOURCE_ORDER.indexOf(tier);
+			return i === -1 ? SOURCE_ORDER.length : i;
+		};
+		return annotated.sort((a, b) => {
+			const aViol = a.violations.length > 0;
+			const bViol = b.violations.length > 0;
+			if (aViol !== bViol) return aViol ? -1 : 1;
+			if (aViol && bViol && a.violations.length !== b.violations.length) {
+				return b.violations.length - a.violations.length;
+			}
+			if (!aViol) {
+				const sr = sourceRank(a.rule.source) - sourceRank(b.rule.source);
+				if (sr !== 0) return sr;
+			}
+			return a.rule.pattern.localeCompare(b.rule.pattern);
+		});
+	}, [data]);
+
+	// Clamp selection when rows shrink.
+	useEffect(() => {
+		if (selectedIdx >= rows.length) {
+			setSelectedIdx(Math.max(0, rows.length - 1));
+		}
+	}, [rows.length, selectedIdx]);
+
+	const selectedRow = rows[selectedIdx];
+	const ignoreRuleCount =
+		data?.resolved.rules.filter((rule) => rule.action === "ignore").length ?? 0;
+	const trackRuleCount =
+		data?.resolved.rules.filter((rule) => rule.action === "track").length ?? 0;
+	const toFixCount = data?.violations.length ?? 0;
+
+	// Group rows for display while preserving each row's flat index in `rows`
+	// (the keyboard handler walks `rows` by index, so the highlight must track
+	// the original index, not the position within a rendered group).
+	const indexed = rows.map((row, index) => ({ row, index }));
+	const toFixRows = indexed.filter((r) => r.row.violations.length > 0);
+	// Clean rows grouped by which manifest defined them. Sections render only
+	// when non-empty, so e.g. the Profile group stays hidden until profiles
+	// actually contribute rules.
+	const cleanIndexed = indexed.filter((r) => r.row.violations.length === 0);
+	const sourceGroups = SOURCE_ORDER.map((tier) => ({
+		tier,
+		label: SOURCE_LABELS[tier],
+		items: cleanIndexed.filter((r) => r.row.rule.source === tier),
+	})).filter((g) => g.items.length > 0);
+	const cleanCount = cleanIndexed.length;
+
+	// ── Action handlers ───────────────────────────────────────────────────
+
+	// Fix every out-of-sync row. Iterates the grouped rows (not the flat
+	// violation list) so each .gitignore entry uses the rule's pattern/glob,
+	// not one specific path under it — same association handleApplyOne relies on.
+	const handleFixAll = useCallback(async () => {
+		if (!data || toFixRows.length === 0) return;
+		try {
+			const messages: string[] = [];
+			const failures: string[] = [];
+			for (const { row } of toFixRows) {
+				for (const v of row.violations) {
+					const r = await applyDestructiveFix(cwd, v, row.rule.pattern);
+					(r.applied ? messages : failures).push(r.message);
+				}
+			}
+			await reload();
+			if (failures.length > 0) {
+				await modal.message(
+					"Some fixes didn't apply",
+					[...failures, ...messages].join("\n"),
+					"error",
+				);
+			}
+		} catch (err) {
+			await modal.message(
+				"Fix failed",
+				err instanceof Error ? err.message : String(err),
+				"error",
+			);
+		}
+	}, [cwd, data, toFixRows, reload, modal]);
+
+	// Fix just the highlighted row.
+	const handleFixOne = useCallback(async () => {
+		if (!selectedRow) {
+			await modal.message(
+				"No row selected",
+				"Use ↑↓ to highlight a row that needs fixing, then press f.",
+				"info",
+			);
+			return;
+		}
+		if (selectedRow.violations.length === 0) {
+			await modal.message(
+				"Nothing to fix",
+				`${selectedRow.rule.pattern} already matches. f only applies to rows that need fixing.`,
+				"info",
+			);
+			return;
+		}
+
+		try {
+			const results: Array<{ applied: boolean; message: string }> = [];
+			for (const v of selectedRow.violations) {
+				results.push(
+					await applyDestructiveFix(cwd, v, selectedRow.rule.pattern),
+				);
+			}
+			const failed = results.filter((r) => !r.applied);
+			await reload();
+			// Success is silent — the reload removes the fixed row. Only surface a
+			// modal when something didn't apply.
+			if (failed.length > 0) {
+				await modal.message(
+					"Some fixes didn't apply",
+					results.map((r) => r.message).join("\n"),
+					"error",
+				);
+			}
+		} catch (err) {
+			await modal.message(
+				"Fix failed",
+				err instanceof Error ? err.message : String(err),
+				"error",
+			);
+		}
+	}, [selectedRow, modal, cwd, reload]);
+
+	const handleApplyTemplate = useCallback(async () => {
+		const names = Object.keys(BUILTIN_TEMPLATES);
+		if (names.length === 0) {
+			await modal.message(
+				"No templates",
+				"No built-in templates available.",
+				"info",
+			);
+			return;
+		}
+		const selected = await modal.select(
+			"Apply template",
+			"Merge the template into the project manifest at .claude/gitignore.json.",
+			names.map((n) => ({ label: n, value: n })),
+		);
+		if (!selected) return;
+		try {
+			const r = await applyTemplate(cwd, selected);
+			const conflictNote =
+				r.conflicts.length > 0
+					? `\n\nSkipped due to conflicts: ${r.conflicts.join(", ")}`
+					: "";
+			await modal.message(
+				"Template applied",
+				`Wrote ${r.appliedTo}\n\nAdded ${r.added.ignore.length} ignore + ${r.added.track.length} track entries.${conflictNote}`,
+				"success",
+			);
+		} catch (err) {
+			await modal.message(
+				"Template failed",
+				err instanceof Error ? err.message : String(err),
+				"error",
+			);
+		}
+		await reload();
+	}, [cwd, modal, reload]);
+
+	const handleEditManifest = useCallback(async () => {
+		const current = data ?? (await loadGitignoreState(cwd));
+		const projectManifest = await ensureProjectManifestForEdit(
+			cwd,
+			current.resolved,
+		);
+		const editor = process.env.EDITOR ?? process.env.VISUAL ?? "vi";
+		renderer.suspend();
+		try {
+			await new Promise<void>((resolveEdit) => {
+				const child = spawn(editor, [projectManifest], { stdio: "inherit" });
+				child.on("exit", () => resolveEdit());
+				child.on("error", () => resolveEdit());
+			});
+		} finally {
+			renderer.resume();
+		}
+		await reload();
+		renderer.requestRender();
+	}, [cwd, data, reload, renderer]);
+
+	useKeyboardHandler((input, key) => {
+		if (process.env.MAGUS_DEBUG_KEYS === "1") {
+			try {
+				appendFileSync(
+					"/tmp/magus-keys.log",
+					`${new Date().toISOString()} screen=gitignore input=${JSON.stringify(input)} name=${JSON.stringify(key.name)} shift=${key.shift} ctrl=${key.ctrl} meta=${key.meta}\n`,
+				);
+			} catch {
+				// best-effort logging — never break the UI
+			}
+		}
+		if (state.modal) return;
+		if (input === "j" || key.downArrow) {
+			setSelectedIdx((i) => Math.min(i + 1, Math.max(0, rows.length - 1)));
+			return;
+		}
+		if (input === "k" || key.upArrow) {
+			setSelectedIdx((i) => Math.max(i - 1, 0));
+			return;
+		}
+		// F = fix everything out of sync; f = fix just the selected row.
+		if (input === "F" || (input === "f" && key.shift)) {
+			void handleFixAll();
+			return;
+		}
+		if (input === "f") {
+			void handleFixOne();
+			return;
+		}
+		if (input === "t") {
+			void handleApplyTemplate();
+			return;
+		}
+		if (input === "e") {
+			void handleEditManifest();
+			return;
+		}
+		if (input === "r") {
+			void reload();
+		}
+	});
+
+	// ── Rendering ─────────────────────────────────────────────────────────
+
+	const summary = data
+		? renderSummary(rows.length, ignoreRuleCount, trackRuleCount, toFixCount)
+		: null;
+
+	const listBody = loading ? (
+		<text fg={theme.colors.muted}>Loading...</text>
+	) : error ? (
+		<text fg={theme.colors.danger}>Error: {error}</text>
+	) : rows.length === 0 ? (
+		<text fg={theme.colors.muted}>No rules resolved.</text>
+	) : (
+		<box flexDirection="column">
+			{toFixRows.length > 0 && (
+				<box flexDirection="column">
+					<text
+						fg={theme.colors.danger}
+					>{`Needs fixing (${toFixRows.length})`}</text>
+					{toFixRows
+						.slice(0, 100)
+						.map(({ row, index }) => renderRuleRow(row, index === selectedIdx))}
+					<text fg={theme.colors.text}> </text>
+				</box>
+			)}
+			<text fg={theme.colors.muted}>{`Managed items (${cleanCount})`}</text>
+			{/* One section per manifest source (Default / Global / Project /
+          Profile). Empty sources are dropped, so headers only appear when
+          they have rows. The header names where you'd change those rules. */}
+			{sourceGroups.map((group, gi) => (
+				<box flexDirection="column" key={group.tier}>
+					{gi > 0 && <text fg={theme.colors.text}> </text>}
+					<text fg={theme.colors.muted}>{`  ${group.label}`}</text>
+					{group.items.map(({ row, index }) =>
+						renderRuleRow(row, index === selectedIdx),
+					)}
+				</box>
+			))}
+		</box>
+	);
+
+	const listPanel = (
+		<box flexDirection="column">
+			{summary}
+			<text fg={theme.colors.text}> </text>
+			{listBody}
+		</box>
+	);
+
+	const detailPanel = renderDetail(selectedRow, data?.warnings ?? []);
+
+	const subtitle = data
+		? toFixCount === 0
+			? `${rows.length} managed`
+			: `${toFixCount} to fix`
+		: "";
+
+	return (
+		<ScreenLayout
+			title="Managed Git State"
+			subtitle={subtitle}
+			currentScreen="gitignore"
+			footerHints={[
+				{ keys: ["↑", "↓"], label: "move" },
+				{ keys: ["f"], label: "fix selected" },
+				{ keys: ["F"], label: "fix all" },
+				{ keys: ["t"], label: "template" },
+				{ keys: ["e"], label: "edit" },
+				{ keys: ["r"], label: "reload" },
+			]}
+			listPanel={listPanel}
+			detailPanel={detailPanel}
+		/>
+	);
+}
+
+function violationMatchesRule(
+	rule: ResolvedRule,
+	violation: Violation,
+): boolean {
+	if (violation.path === rule.pattern) return true;
+	if (!rule.pattern.endsWith("/") && !rule.pattern.includes("*")) return false;
+	const prefix = rule.pattern.replace(/\*+$/, "");
+	return violation.path.startsWith(prefix);
+}
+
+function renderSummary(
+	rules: number,
+	ignoreRules: number,
+	trackRules: number,
+	toFix: number,
+): React.ReactNode {
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.text}>
+				<span
+					fg={theme.colors.text}
+				>{`${rules} managed item${rules === 1 ? "" : "s"}`}</span>
+			</text>
+			<text fg={theme.colors.text}>
+				<span
+					fg={theme.colors.muted}
+				>{`${ignoreRules} ignored  ${trackRules} tracked`}</span>
+			</text>
+			{toFix === 0 ? (
+				<text fg={theme.colors.success}>
+					Everything matches — nothing to fix.
+				</text>
+			) : (
+				<text
+					fg={theme.colors.warning}
+				>{`${toFix} need${toFix === 1 ? "s" : ""} fixing — f one, F all`}</text>
+			)}
+		</box>
+	);
+}
+
+function renderDetail(
+	row: RuleRow | undefined,
+	warnings: string[],
+): React.ReactNode {
+	if (!row) {
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.muted}>No rule selected.</text>
+				{warnings.length > 0 && (
+					<box flexDirection="column" marginTop={1}>
+						<text fg={theme.colors.warning}>Warnings:</text>
+						{warnings.map((w, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: warnings are plain strings that may repeat and are replaced as a whole list; the index is the only stable key
+							<text fg={theme.colors.muted} key={i}>
+								{w}
+							</text>
+						))}
+					</box>
+				)}
+			</box>
+		);
+	}
+
+	const { rule, violations } = row;
+	const reason = getGitignoreRuleReason(rule.action, rule.pattern);
+
+	const setIn = sourceName(rule.source);
+
+	if (violations.length === 0) {
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.text}>
+					<strong>{rule.pattern}</strong>
+				</text>
+				<text fg={theme.colors.text}> </text>
+				<text
+					fg={theme.colors.success}
+				>{`✓ Already ${rule.action === "ignore" ? "ignored" : "tracked"} — nothing to do.`}</text>
+				<text fg={theme.colors.text}> </text>
+				<text fg={theme.colors.muted}>{reason}</text>
+				<text fg={theme.colors.text}> </text>
+				<text fg={theme.colors.muted}>{`Set in: ${setIn}`}</text>
+				{renderWarnings(warnings)}
+			</box>
+		);
+	}
+
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.text}>
+				<strong>{rule.pattern}</strong>
+			</text>
+			<text fg={theme.colors.text}> </text>
+			<text fg={theme.colors.text}>
+				<span fg={theme.colors.muted}>Should be: </span>
+				<span fg={theme.colors.text}>
+					{rule.action === "ignore" ? "ignored by git" : "tracked by git"}
+				</span>
+			</text>
+			<text fg={theme.colors.muted}>{reason}</text>
+			<text fg={theme.colors.muted}>{`Set in: ${setIn}`}</text>
+			<text fg={theme.colors.text}> </text>
+			<text
+				fg={theme.colors.warning}
+			>{`Needs fixing (${violations.length}):`}</text>
+			{violations.map((v, i) => (
+				<box
+					key={`${v.kind}:${v.path}:${i}`}
+					flexDirection="column"
+					marginTop={i === 0 ? 0 : 1}
+				>
+					<text fg={theme.colors.text}>{v.path}</text>
+					<text fg={theme.colors.muted}>{describeKind(v.kind)}</text>
+					<text fg={v.severity === "safe" ? "cyan" : "red"}>
+						{actionHint(v.kind)}
+					</text>
+				</box>
+			))}
+			{renderWarnings(warnings)}
+		</box>
+	);
+}
+
+/** Friendly, where-to-change-it name for a rule's source manifest. */
+function sourceName(source: ResolvedRule["source"]): string {
+	switch (source) {
+		case "project":
+			return "Project (.claude/gitignore.json)";
+		case "global":
+			return "Global (~/.claude/gitignore.json)";
+		case "profile":
+			return "Profile";
+		case "builtin":
+			return "Default (built into magus)";
+	}
+}
+
+function describeKind(kind: Violation["kind"]): string {
+	switch (kind) {
+		case "tracked-but-should-ignore":
+			return "Git is tracking it, but it should be ignored.";
+		case "ignored-but-should-track":
+			return "A .gitignore rule hides it, but it should be in git.";
+		case "untracked-and-should-track":
+			return "It's on disk but git isn't tracking it yet.";
+		case "missing-from-gitignore":
+			return "It should be ignored, but nothing in .gitignore covers it.";
+	}
+}
+
+function actionHint(kind: Violation["kind"]): string {
+	switch (kind) {
+		case "tracked-but-should-ignore":
+			return "Press f to stop tracking it and add it to .gitignore.";
+		case "ignored-but-should-track":
+			return "Press f to remove the .gitignore line and add it to git.";
+		case "untracked-and-should-track":
+			return "Press f to add it to git.";
+		case "missing-from-gitignore":
+			return "Press f to add it to .gitignore (F to fix all).";
+	}
+}
+
+function renderWarnings(warnings: string[]): React.ReactNode {
+	if (warnings.length === 0) return null;
+	return (
+		<box flexDirection="column" marginTop={1}>
+			<text fg={theme.colors.warning}>Warnings:</text>
+			{warnings.map((w, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: warnings are plain strings that may repeat and are replaced as a whole list; the index is the only stable key
+				<text fg={theme.colors.muted} key={i}>
+					{w}
+				</text>
+			))}
+		</box>
+	);
+}