claudeup 4.16.0 → 4.18.0

package/src/ui/App.tsx

@@ -22,6 +22,7 @@ import {
 	ProfilesScreen,
 	SkillsScreen,
 	GitignoreScreen,
+	AliasScreen,
 } from "./screens/index.js";
 import type { Screen } from "./state/types.js";
 import { checkGitignore } from "../services/gitignore-prerun.js";
@@ -79,6 +80,8 @@ function Router() {
 			return <SkillsScreen />;
 		case "gitignore":
 			return <GitignoreScreen />;
+		case "alias":
+			return <AliasScreen />;
 		default:
 			return <PluginsScreen />;
 	}
@@ -129,7 +132,7 @@ function GlobalKeyHandler({
 		// Don't handle keys when modal is open or searching
 		if (state.modal || state.isSearching) return;
 
-		// Global navigation shortcuts (1-7) - include mcp-registry as it's a sub-screen of mcp
+		// Global navigation shortcuts (1-8) - include mcp-registry as it's a sub-screen of mcp
 		const isTopLevel = [
 			"plugins",
 			"mcp",
@@ -140,6 +143,7 @@ function GlobalKeyHandler({
 			"profiles",
 			"skills",
 			"gitignore",
+			"alias",
 		].includes(state.currentRoute.screen);
 
 		if (isTopLevel) {
@@ -150,6 +154,7 @@ function GlobalKeyHandler({
 			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");
 
 			// Tab navigation cycling
 			if (key.tab) {
@@ -161,6 +166,7 @@ function GlobalKeyHandler({
 					"profiles",
 					"cli-tools",
 					"gitignore",
+					"alias",
 				];
 				const currentIndex = screens.indexOf(
 					state.currentRoute.screen as Screen,
@@ -199,8 +205,8 @@ function GlobalKeyHandler({
   ?             This help
 
 Quick Navigation
-  1  Plugins      4  Settings    7  Gitignore
-  2  Skills       5  Profiles
+  1  Plugins      4  Settings    7  Git State
+  2  Skills       5  Profiles    8  Alias
   3  MCP Servers  6  CLI Tools
 
 Plugin Actions

package/src/ui/components/TabBar.js

@@ -6,7 +6,8 @@ const TABS = [
     { key: "4", label: "Settings", screen: "settings" },
     { key: "5", label: "Profiles", screen: "profiles" },
     { key: "6", label: "CLI", screen: "cli-tools" },
-    { key: "7", label: "Gitignore", screen: "gitignore" },
+    { key: "7", label: "Git State", screen: "gitignore" },
+    { key: "8", label: "Alias", screen: "alias" },
 ];
 export function TabBar({ currentScreen }) {
     return (_jsx("box", { flexDirection: "row", gap: 0, children: TABS.map((tab, index) => {

package/src/ui/components/TabBar.tsx

@@ -14,7 +14,8 @@ const TABS: Tab[] = [
 	{ key: "4", label: "Settings", screen: "settings" },
 	{ key: "5", label: "Profiles", screen: "profiles" },
 	{ key: "6", label: "CLI", screen: "cli-tools" },
-	{ key: "7", label: "Gitignore", screen: "gitignore" },
+	{ key: "7", label: "Git State", screen: "gitignore" },
+	{ key: "8", label: "Alias", screen: "alias" },
 ];
 
 interface TabBarProps {

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+const KEY_BG = "#3f3f46";
+const KEY_FG = "#fafafa";
+const LABEL_FG = "gray";
+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 }) {
+    const nodes = [];
+    hints.forEach((hint, i) => {
+        if (i > 0) {
+            nodes.push(_jsx("span", { fg: LABEL_FG, children: GAP }, `gap-${i}`));
+        }
+        nodes.push(_jsx("span", { bg: KEY_BG, fg: KEY_FG, children: ` ${hint.keys.join("")} ` }, `k-${i}`));
+        nodes.push(_jsx("span", { fg: LABEL_FG, children: ` ${hint.label}` }, `l-${i}`));
+    });
+    return _jsx("text", { children: nodes });
+}
+/** Convenience for callers that already have a node: same as <FooterHints>. */
+export function renderFooterHints(hints) {
+    return _jsx(FooterHints, { hints: hints });
+}
+export default FooterHints;

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+/** 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 for display. */
+  keys: string[];
+  label: string;
+}
+
+const KEY_BG = "#3f3f46";
+const KEY_FG = "#fafafa";
+const LABEL_FG = "gray";
+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) => {
+    if (i > 0) {
+      nodes.push(
+        <span key={`gap-${i}`} fg={LABEL_FG}>
+          {GAP}
+        </span>,
+      );
+    }
+    nodes.push(
+      <span key={`k-${i}`} bg={KEY_BG} fg={KEY_FG}>
+        {` ${hint.keys.join("")} `}
+      </span>,
+    );
+    nodes.push(
+      <span key={`l-${i}`} fg={LABEL_FG}>
+        {` ${hint.label}`}
+      </span>,
+    );
+  });
+  return <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/ScreenLayout.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import { TabBar } from "../TabBar.js";
+import { FooterHints } from "./FooterHints.js";
 const HEADER_COLOR = "#7e57c2";
 export function ScreenLayout({ title, subtitle, currentScreen, search, statusLine, footerHints, listPanel, detailPanel, }) {
     const dimensions = useDimensions();
@@ -10,6 +11,6 @@ export function ScreenLayout({ title, subtitle, currentScreen, search, statusLin
     const fixedHeight = 6 + (hasSearchBar ? 1 : 0);
     const panelHeight = Math.max(5, dimensions.contentHeight - fixedHeight);
     const lineWidth = Math.max(10, dimensions.terminalWidth - 4);
-    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(TabBar, { currentScreen: currentScreen }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsxs("box", { height: 1, paddingLeft: 1, paddingRight: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle }), !subtitle && statusLine ? statusLine : null] }), hasSearchBar && (_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: search.isActive ? (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "white", children: search.query }), _jsx("span", { bg: "white", fg: "black", children: " " })] })) : (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "yellow", children: search.query }), _jsx("span", { fg: "gray", children: "  (Esc to clear)" })] })) })), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#444444", children: "─".repeat(lineWidth) }) }), _jsxs("box", { flexDirection: "row", height: panelHeight, children: [_jsx("box", { flexDirection: "column", width: "49%", height: panelHeight, paddingRight: 1, children: listPanel }), _jsx("box", { flexDirection: "column", width: 1, height: panelHeight, children: _jsx("text", { fg: "#444444", children: "│".repeat(panelHeight) }) }), _jsx("box", { width: "50%", height: panelHeight, paddingLeft: 1, children: _jsx("scrollbox", { height: panelHeight, scrollY: true, scrollX: false, children: _jsx("box", { flexDirection: "column", children: detailPanel }) }) })] }), _jsx("box", { height: 1, paddingLeft: 1, children: _jsx("text", { fg: "gray", children: footerHints }) })] }));
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(TabBar, { currentScreen: currentScreen }) }), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#333333", children: "─".repeat(lineWidth) }) }), _jsxs("box", { height: 1, paddingLeft: 1, paddingRight: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsx("text", { fg: HEADER_COLOR, children: _jsx("strong", { children: title }) }), subtitle && _jsx("text", { fg: "gray", children: subtitle }), !subtitle && statusLine ? statusLine : null] }), hasSearchBar && (_jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: search.isActive ? (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "white", children: search.query }), _jsx("span", { bg: "white", fg: "black", children: " " })] })) : (_jsxs("text", { children: [_jsx("span", { fg: "green", children: "Filter: " }), _jsx("span", { fg: "yellow", children: search.query }), _jsx("span", { fg: "gray", children: "  (Esc to clear)" })] })) })), _jsx("box", { height: 1, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: "#444444", children: "─".repeat(lineWidth) }) }), _jsxs("box", { flexDirection: "row", height: panelHeight, children: [_jsx("box", { flexDirection: "column", width: "49%", height: panelHeight, paddingRight: 1, children: listPanel }), _jsx("box", { flexDirection: "column", width: 1, height: panelHeight, children: _jsx("text", { fg: "#444444", children: "│".repeat(panelHeight) }) }), _jsx("box", { width: "50%", height: panelHeight, paddingLeft: 1, children: _jsx("scrollbox", { height: panelHeight, scrollY: true, scrollX: false, children: _jsx("box", { flexDirection: "column", children: detailPanel }) }) })] }), _jsx("box", { height: 1, paddingLeft: 1, children: Array.isArray(footerHints) ? (_jsx(FooterHints, { hints: footerHints })) : typeof footerHints === "string" ? (_jsx("text", { fg: "gray", children: footerHints })) : (footerHints) })] }));
 }
 export default ScreenLayout;

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

@@ -2,6 +2,7 @@ import React from "react";
 import { useDimensions } from "../../state/DimensionsContext.js";
 import { TabBar } from "../TabBar.js";
 import type { Screen } from "../../state/types.js";
+import { FooterHints, type FooterHint } from "./FooterHints.js";
 
 interface ScreenLayoutProps {
 	/** Screen title (e.g., "claudeup Plugins") */
@@ -21,8 +22,10 @@ interface ScreenLayoutProps {
 	};
 	/** Status line content (for screens without search) - shown in second row */
 	statusLine?: React.ReactNode;
-	/** Footer hints (left side) */
-	footerHints: string;
+	/** Footer hints (left side). Pass a FooterHint[] to render key badges
+	 *  (the standard look). A string or ReactNode is still accepted for
+	 *  free-form footers. */
+	footerHints: FooterHint[] | string | React.ReactNode;
 	/** Left panel content */
 	listPanel: React.ReactNode;
 	/** Right panel content (detail view) */
@@ -134,7 +137,13 @@ export function ScreenLayout({
 
 			{/* Footer */}
 			<box height={1} paddingLeft={1}>
-				<text fg="gray">{footerHints}</text>
+				{Array.isArray(footerHints) ? (
+					<FooterHints hints={footerHints as FooterHint[]} />
+				) : typeof footerHints === "string" ? (
+					<text fg="gray">{footerHints}</text>
+				) : (
+					footerHints
+				)}
 			</box>
 		</box>
 	);

package/src/ui/components/layout/index.js

@@ -2,3 +2,4 @@ export { Panel } from "./Panel.js";
 export { ScopeTabs } from "./ScopeTabs.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { ScreenLayout } from "./ScreenLayout.js";
+export { FooterHints, renderFooterHints, } from "./FooterHints.js";

package/src/ui/components/layout/index.ts

@@ -2,3 +2,8 @@ export { Panel } from "./Panel.js";
 export { ScopeTabs } from "./ScopeTabs.js";
 export { ProgressBar } from "./ProgressBar.js";
 export { ScreenLayout } from "./ScreenLayout.js";
+export {
+  FooterHints,
+  renderFooterHints,
+  type FooterHint,
+} from "./FooterHints.js";

package/src/ui/components/modals/SelectModal.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useDimensions } from "../../state/DimensionsContext.js";
 export function SelectModal({ title, message, options, defaultIndex, onSelect: _onSelect, onCancel: _onCancel, }) {
     // Keyboard handling is done by ModalContainer
     // defaultIndex is the live selectedIndex from ModalContainer state
     const selectedIndex = defaultIndex ?? 0;
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: 50, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { flexDirection: "column", paddingLeft: 1, children: options.map((option, idx) => {
+    // Size to terminal width: 60% of available, clamped to [50, 90].
+    // Previously hardcoded at 50, which forced descriptions and long item
+    // labels (e.g. plugin specs) to wrap mid-sentence and produce orphan
+    // punctuation lines.
+    const dimensions = useDimensions();
+    const width = Math.max(50, Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)));
+    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, width: width, children: [_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#EDEDED", children: _jsx("strong", { children: title }) }) }), _jsx("box", { marginBottom: 1, children: _jsx("text", { fg: "#A1A1AA", children: message }) }), _jsx("box", { flexDirection: "column", paddingLeft: 1, children: options.map((option, idx) => {
                     const isSelected = idx === selectedIndex;
                     return (_jsxs("text", { fg: isSelected ? "#F4F4F5" : "#A1A1AA", children: [_jsx("span", { fg: isSelected ? "#F4F4F5" : "#71717A", children: isSelected ? "❯ " : "  " }), isSelected ? _jsx("strong", { children: option.label }) : option.label] }, option.value));
                 }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#71717A", children: "\u2191\u2193 Select \u2022 \u21B5 Confirm \u2022 Esc Cancel" }) })] }));

package/src/ui/components/modals/SelectModal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { SelectOption } from "../../state/types.js";
+import { useDimensions } from "../../state/DimensionsContext.js";
 
 interface SelectModalProps {
 	/** Modal title */
@@ -28,6 +29,16 @@ export function SelectModal({
 	// defaultIndex is the live selectedIndex from ModalContainer state
 	const selectedIndex = defaultIndex ?? 0;
 
+	// Size to terminal width: 60% of available, clamped to [50, 90].
+	// Previously hardcoded at 50, which forced descriptions and long item
+	// labels (e.g. plugin specs) to wrap mid-sentence and produce orphan
+	// punctuation lines.
+	const dimensions = useDimensions();
+	const width = Math.max(
+		50,
+		Math.min(90, Math.floor(dimensions.terminalWidth * 0.6)),
+	);
+
 	return (
 		<box
 			flexDirection="column"
@@ -39,7 +50,7 @@ export function SelectModal({
 			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
-			width={50}
+			width={width}
 		>
 			<box marginBottom={1}>
 				<text fg="#EDEDED">

package/src/ui/hooks/useGitignoreModal.js

@@ -5,12 +5,12 @@ export function buildGitignoreModal(args) {
     const options = [
         {
             label: safeCount > 0
-                ? `Append ${safeCount} safe entr${safeCount === 1 ? "y" : "ies"} to .gitignore`
-                : "(no safe-fixable entries)",
+                ? `Add ${safeCount} missing .gitignore entr${safeCount === 1 ? "y" : "ies"}`
+                : "(no missing .gitignore entries)",
             value: "fix-safe",
         },
         {
-            label: "Open Gitignore tab to review",
+            label: "Open Git State tab to review",
             value: "open-tab",
         },
         {
@@ -21,11 +21,10 @@ export function buildGitignoreModal(args) {
     return {
         type: "select",
         title: "Gitignore violations detected",
-        message: `Found ${violationCount} issue(s) where the resolved gitignore manifest ` +
-            `disagrees with your working tree.\n\n` +
-            `Safe fixes append to .gitignore (no index mutation). Destructive fixes ` +
-            `(\`git rm --cached\`, removing .gitignore lines) must be applied one at ` +
-            `a time from the Gitignore tab.`,
+        message: `Found ${violationCount} managed gitignore item(s) that do not match ` +
+            `the current repo state.\n\n` +
+            `Missing .gitignore entries can be added now. Items that change git ` +
+            `tracking are reviewed and fixed from the Gitignore tab.`,
         options,
         onSelect: (value) => {
             if (value === "fix-safe")

package/src/ui/hooks/useGitignoreModal.ts

@@ -5,7 +5,7 @@ import type { ModalState } from "../state/types.js";
 /**
  * Startup gitignore-violation modal. Mirrors `useMismatchModal` so the
  * two flows feel identical to the user — claudeup launches, detects
- * a problem, asks "fix safe entries / open the tab / dismiss".
+ * a problem, asks "add missing ignores / open the tab / dismiss".
  *
  * Pure builder is exported separately for tests.
  */
@@ -24,12 +24,12 @@ export function buildGitignoreModal(args: BuildModalArgs): ModalState {
     {
       label:
         safeCount > 0
-          ? `Append ${safeCount} safe entr${safeCount === 1 ? "y" : "ies"} to .gitignore`
-          : "(no safe-fixable entries)",
+          ? `Add ${safeCount} missing .gitignore entr${safeCount === 1 ? "y" : "ies"}`
+          : "(no missing .gitignore entries)",
       value: "fix-safe",
     },
     {
-      label: "Open Gitignore tab to review",
+      label: "Open Git State tab to review",
       value: "open-tab",
     },
     {
@@ -41,11 +41,10 @@ export function buildGitignoreModal(args: BuildModalArgs): ModalState {
     type: "select",
     title: "Gitignore violations detected",
     message:
-      `Found ${violationCount} issue(s) where the resolved gitignore manifest ` +
-      `disagrees with your working tree.\n\n` +
-      `Safe fixes append to .gitignore (no index mutation). Destructive fixes ` +
-      `(\`git rm --cached\`, removing .gitignore lines) must be applied one at ` +
-      `a time from the Gitignore tab.`,
+      `Found ${violationCount} managed gitignore item(s) that do not match ` +
+      `the current repo state.\n\n` +
+      `Missing .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();

package/src/ui/renderers/gitignoreRenderers.js

@@ -1,33 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-const SELECTION_BG = "#7e57c2";
-const SELECTION_FG = "white";
-// Layout: "  X Verb    path" — 2 (gutter) + 2 (status) + 7 (verb) + 4 (gap)
-// = 15 prefix chars. On a 38-col panel inner width that leaves 23 chars for
-// the path; truncate at 22 to keep 1 col safety margin (OpenTUI <text>
-// reserves a second line if the rendered string equals the inner width).
+// 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 = "#5fd787"; // green — item ends up tracked by git
+const IGNORE_FG = "#d78787"; // reddish — item ends up ignored / dropped
+const VIOLATION_PATH_FG = "#ff5f5f"; // bright red filename = look here
+const CLEAN_PATH_FG = "gray";
+const SELECTED_BG = "#2a2a3a"; // 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 = "#1f5132";
+const IGNORE_CHIP_BG = "#5a2323";
+const CHIP_FG = "white";
+// 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) {
     return p.length > MAX_PATH_LEN ? p.slice(0, MAX_PATH_LEN - 1) + "…" : p;
 }
 export function renderRuleRow(row, isSelected) {
-    const { rule, violation } = row;
+    const { rule, violations } = row;
     const path = truncatePath(rule.pattern);
     const key = `${rule.action}:${rule.pattern}`;
-    // Layout: status-glyph (2) + verb (7) + 2 spaces + path
-    // OK rule: ✓ Ignore  path
-    // Violated:! Track   path
-    const verb = rule.action === "ignore" ? "Ignore " : "Track  ";
-    if (!violation) {
-        // Clean rule — muted, just confirmation
-        if (isSelected) {
-            return (_jsx("text", { bg: SELECTION_BG, fg: SELECTION_FG, children: `▶ ✓ ${verb}  ${path}` }, key));
-        }
-        return (_jsxs("text", { children: [_jsx("span", { fg: "green", children: `  ✓ ` }), _jsx("span", { fg: "gray", children: `${verb}  ${path}` })] }, key));
+    // 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 (_jsxs("text", { bg: rowBg, children: [_jsx("span", { fg: VIOLATION_PATH_FG, children: `  ${marker} ` }), _jsx("span", { bg: chipBg, fg: CHIP_FG, children: ` ${badge} ` }), _jsx("span", { fg: VIOLATION_PATH_FG, children: `  ${path}${suffix}` })] }, key));
     }
-    // Violated rule — color encodes severity of the fix
-    const sevColor = violation.severity === "safe" ? "yellow" : "red";
-    if (isSelected) {
-        return (_jsx("text", { bg: SELECTION_BG, fg: SELECTION_FG, children: `▶ ! ${verb}  ${path}` }, key));
-    }
-    return (_jsxs("text", { children: [_jsx("span", { fg: sevColor, children: `  ! ` }), _jsx("span", { fg: "white", children: `${verb}  ${path}` })] }, key));
+    // Clean row: flat colored badge word, dim path, no chip.
+    return (_jsxs("text", { bg: rowBg, children: [_jsx("span", { fg: badgeFg, children: `  ${marker} ` }), _jsx("span", { fg: badgeFg, children: badge }), _jsx("span", { fg: CLEAN_PATH_FG, children: `  ${path}` })] }, key));
 }

package/src/ui/renderers/gitignoreRenderers.tsx

@@ -3,68 +3,77 @@ import type { ResolvedRule, Violation } from "../../types/gitignore.js";
 
 /**
  * A unified row for the Gitignore screen — represents one resolved rule,
- * optionally annotated with the violation it has against the working tree.
+ * annotated with every violation it has against the working tree.
  */
 export interface RuleRow {
   rule: ResolvedRule;
-  violation?: Violation;
+  violations: Violation[];
 }
 
-const SELECTION_BG = "#7e57c2";
-const SELECTION_FG = "white";
+// 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 = "#5fd787"; // green — item ends up tracked by git
+const IGNORE_FG = "#d78787"; // reddish — item ends up ignored / dropped
+const VIOLATION_PATH_FG = "#ff5f5f"; // bright red filename = look here
+const CLEAN_PATH_FG = "gray";
+const SELECTED_BG = "#2a2a3a"; // faint slate highlight for the cursor row
 
-// Layout: "  X Verb    path" — 2 (gutter) + 2 (status) + 7 (verb) + 4 (gap)
-// = 15 prefix chars. On a 38-col panel inner width that leaves 23 chars for
-// the path; truncate at 22 to keep 1 col safety margin (OpenTUI <text>
-// reserves a second line if the rendered string equals the inner width).
+// 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 = "#1f5132";
+const IGNORE_CHIP_BG = "#5a2323";
+const CHIP_FG = "white";
+
+// 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, violation } = row;
+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;
 
-  // Layout: status-glyph (2) + verb (7) + 2 spaces + path
-  // OK rule: ✓ Ignore  path
-  // Violated:! Track   path
-
-  const verb = rule.action === "ignore" ? "Ignore " : "Track  ";
-
-  if (!violation) {
-    // Clean rule — muted, just confirmation
-    if (isSelected) {
-      return (
-        <text key={key} bg={SELECTION_BG} fg={SELECTION_FG}>
-          {`▶ ✓ ${verb}  ${path}`}
-        </text>
-      );
-    }
+  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}>
-        <span fg="green">{`  ✓ `}</span>
-        <span fg="gray">{`${verb}  ${path}`}</span>
+      <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>
     );
   }
 
-  // Violated rule — color encodes severity of the fix
-  const sevColor = violation.severity === "safe" ? "yellow" : "red";
-
-  if (isSelected) {
-    return (
-      <text key={key} bg={SELECTION_BG} fg={SELECTION_FG}>
-        {`▶ ! ${verb}  ${path}`}
-      </text>
-    );
-  }
+  // Clean row: flat colored badge word, dim path, no chip.
   return (
-    <text key={key}>
-      <span fg={sevColor}>{`  ! `}</span>
-      <span fg="white">{`${verb}  ${path}`}</span>
+    <text key={key} bg={rowBg}>
+      <span fg={badgeFg}>{`  ${marker} `}</span>
+      <span fg={badgeFg}>{badge}</span>
+      <span fg={CLEAN_PATH_FG}>{`  ${path}`}</span>
     </text>
   );
 }