claudeup 4.35.0 → 4.36.0

package/src/ui/screens/GitignoreScreen.tsx

@@ -6,539 +6,556 @@ import { useApp, useModal } from "../state/AppContext.js";
 import { useKeyboardHandler } from "../hooks/useKeyboardHandler.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import {
-  loadGitignoreState,
-  applyDestructiveFix,
-  ensureProjectManifestForEdit,
-  applyTemplate,
-  type GitignoreState,
+	loadGitignoreState,
+	applyDestructiveFix,
+	ensureProjectManifestForEdit,
+	applyTemplate,
+	type GitignoreState,
 } from "../../services/gitignore-service.js";
 import { BUILTIN_TEMPLATES } from "../../data/gitignore-templates.js";
 import { getGitignoreRuleReason } from "../../data/gitignore-reasons.js";
 import {
-  renderRuleRow,
-  type RuleRow,
+	renderRuleRow,
+	type RuleRow,
 } from "../renderers/gitignoreRenderers.js";
 import type { ResolvedRule, Tier, Violation } from "../../types/gitignore.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 claudeup",
+	project: "Project · .claude/gitignore.json",
+	global: "Global · ~/.claude/gitignore.json",
+	profile: "Profile",
+	builtin: "Default · built into claudeup",
 };
 
 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\n` +
-          `Added ${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.CLAUDEUP_DEBUG_KEYS === "1") {
-      try {
-        appendFileSync(
-          "/tmp/claudeup-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="gray">Loading...</text>
-  ) : error ? (
-    <text fg="red">Error: {error}</text>
-  ) : rows.length === 0 ? (
-    <text fg="gray">No rules resolved.</text>
-  ) : (
-    <box flexDirection="column">
-      {toFixRows.length > 0 && (
-        <box flexDirection="column">
-          <text fg="red">{`Needs fixing (${toFixRows.length})`}</text>
-          {toFixRows
-            .slice(0, 100)
-            .map(({ row, index }) => renderRuleRow(row, index === selectedIdx))}
-          <text> </text>
-        </box>
-      )}
-      <text fg="gray">{`Managed items (${cleanCount})`}</text>
-      {/* One section per manifest source (Default / Global / Project /
+	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\n` +
+					`Added ${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.CLAUDEUP_DEBUG_KEYS === "1") {
+			try {
+				appendFileSync(
+					"/tmp/claudeup-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> </text>}
-          <text fg="gray">{`  ${group.label}`}</text>
-          {group.items.map(({ row, index }) =>
-            renderRuleRow(row, index === selectedIdx),
-          )}
-        </box>
-      ))}
-    </box>
-  );
-
-  const listPanel = (
-    <box flexDirection="column">
-      {summary}
-      <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}
-    />
-  );
+			{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,
+	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);
+	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,
+	rules: number,
+	ignoreRules: number,
+	trackRules: number,
+	toFix: number,
 ): React.ReactNode {
-  return (
-    <box flexDirection="column">
-      <text>
-        <span fg="white">{`${rules} managed item${rules === 1 ? "" : "s"}`}</span>
-      </text>
-      <text>
-        <span fg="gray">{`${ignoreRules} ignored  ${trackRules} tracked`}</span>
-      </text>
-      {toFix === 0 ? (
-        <text fg="green">Everything matches — nothing to fix.</text>
-      ) : (
-        <text fg="yellow">{`${toFix} need${toFix === 1 ? "s" : ""} fixing — f one, F all`}</text>
-      )}
-    </box>
-  );
+	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[],
+	row: RuleRow | undefined,
+	warnings: string[],
 ): React.ReactNode {
-  if (!row) {
-    return (
-      <box flexDirection="column">
-        <text fg="gray">No rule selected.</text>
-        {warnings.length > 0 && (
-          <box flexDirection="column" marginTop={1}>
-            <text fg="yellow">Warnings:</text>
-            {warnings.map((w, i) => (
-              <text fg="gray" 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="white">
-          <strong>{rule.pattern}</strong>
-        </text>
-        <text> </text>
-        <text fg="green">{`✓ Already ${rule.action === "ignore" ? "ignored" : "tracked"} — nothing to do.`}</text>
-        <text> </text>
-        <text fg="gray">{reason}</text>
-        <text> </text>
-        <text fg="gray">{`Set in: ${setIn}`}</text>
-        {renderWarnings(warnings)}
-      </box>
-    );
-  }
-
-  return (
-    <box flexDirection="column">
-      <text fg="white">
-        <strong>{rule.pattern}</strong>
-      </text>
-      <text> </text>
-      <text>
-        <span fg="gray">Should be: </span>
-        <span fg="white">
-          {rule.action === "ignore" ? "ignored by git" : "tracked by git"}
-        </span>
-      </text>
-      <text fg="gray">{reason}</text>
-      <text fg="gray">{`Set in: ${setIn}`}</text>
-      <text> </text>
-      <text fg="yellow">{`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="white">{v.path}</text>
-          <text fg="gray">{describeKind(v.kind)}</text>
-          <text fg={v.severity === "safe" ? "cyan" : "red"}>
-            {actionHint(v.kind)}
-          </text>
-        </box>
-      ))}
-      {renderWarnings(warnings)}
-    </box>
-  );
+	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) => (
+							<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 claudeup)";
-  }
+	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 claudeup)";
+	}
 }
 
 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.";
-  }
+	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).";
-  }
+	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="yellow">Warnings:</text>
-      {warnings.map((w, i) => (
-        <text fg="gray" key={i}>
-          {w}
-        </text>
-      ))}
-    </box>
-  );
+	if (warnings.length === 0) return null;
+	return (
+		<box flexDirection="column" marginTop={1}>
+			<text fg={theme.colors.warning}>Warnings:</text>
+			{warnings.map((w, i) => (
+				<text fg={theme.colors.muted} key={i}>
+					{w}
+				</text>
+			))}
+		</box>
+	);
 }