claudeup 4.35.0 → 4.36.0

package/src/ui/renderers/cliToolRenderers.tsx

@@ -1,227 +1,284 @@
 import React from "react";
 import type { CliTool } from "../../data/cli-tools.js";
-import { theme } from "../theme.js";
+import { theme, type UiColor } from "../theme.js";
 
 // ─── Status type ───────────────────────────────────────────────────────────────
 
-export type InstallMethod = "npm" | "bun" | "pnpm" | "yarn" | "brew" | "pip" | "unknown";
+export type InstallMethod =
+	| "npm"
+	| "bun"
+	| "pnpm"
+	| "yarn"
+	| "brew"
+	| "pip"
+	| "unknown";
 
 export interface CliToolStatus {
-  tool: CliTool;
-  installed: boolean;
-  installedVersion?: string;
-  latestVersion?: string;
-  hasUpdate?: boolean;
-  checking: boolean;
-  installMethod?: InstallMethod;
-  allMethods?: InstallMethod[];
-  updateCommand?: string;
-  brewFormula?: string;
+	tool: CliTool;
+	installed: boolean;
+	installedVersion?: string;
+	latestVersion?: string;
+	hasUpdate?: boolean;
+	checking: boolean;
+	installMethod?: InstallMethod;
+	allMethods?: InstallMethod[];
+	updateCommand?: string;
+	brewFormula?: string;
 }
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
-function getUninstallHint(tool: CliTool, method: InstallMethod, brewFormula?: string): string {
-  switch (method) {
-    case "bun": return `bun remove -g ${tool.packageName}`;
-    case "npm": return `npm uninstall -g ${tool.packageName}`;
-    case "pnpm": return `pnpm remove -g ${tool.packageName}`;
-    case "yarn": return `yarn global remove ${tool.packageName}`;
-    case "brew": return `brew uninstall ${brewFormula || tool.name}`;
-    case "pip": return `pip uninstall ${tool.packageName}`;
-    default: return "";
-  }
+function getUninstallHint(
+	tool: CliTool,
+	method: InstallMethod,
+	brewFormula?: string,
+): string {
+	switch (method) {
+		case "bun":
+			return `bun remove -g ${tool.packageName}`;
+		case "npm":
+			return `npm uninstall -g ${tool.packageName}`;
+		case "pnpm":
+			return `pnpm remove -g ${tool.packageName}`;
+		case "yarn":
+			return `yarn global remove ${tool.packageName}`;
+		case "brew":
+			return `brew uninstall ${brewFormula || tool.name}`;
+		case "pip":
+			return `pip uninstall ${tool.packageName}`;
+		default:
+			return "";
+	}
 }
 
 // ─── Row renderer ──────────────────────────────────────────────────────────────
 
 export function renderCliToolRow(
-  status: CliToolStatus,
-  _index: number,
-  isSelected: boolean,
+	status: CliToolStatus,
+	_index: number,
+	isSelected: boolean,
 ): React.ReactNode {
-  const { tool, installed, installedVersion, hasUpdate, checking, allMethods } = status;
-  const hasConflict = allMethods && allMethods.length > 1;
-
-  let icon: string;
-  let iconColor: string;
-
-  if (!installed) {
-    icon = "○";
-    iconColor = theme.colors.muted;
-  } else if (hasConflict) {
-    icon = "!";
-    iconColor = theme.colors.danger;
-  } else if (hasUpdate) {
-    icon = "*";
-    iconColor = theme.colors.warning;
-  } else {
-    icon = "●";
-    iconColor = theme.colors.success;
-  }
-
-  const versionText = installedVersion ? ` v${installedVersion}` : "";
-  const methodTag = installed && allMethods?.length
-    ? ` ${allMethods.join("+")}`
-    : "";
-
-  if (isSelected) {
-    return (
-      <text bg={theme.selection.bg} fg={theme.selection.fg}>
-        {" "}{icon} {tool.displayName}{versionText}{methodTag}
-        {checking ? " ..." : ""}{" "}
-      </text>
-    );
-  }
-
-  return (
-    <text>
-      <span fg={iconColor}> {icon}</span>
-      <span fg={theme.colors.text}> {tool.displayName}</span>
-      {versionText ? <span fg={theme.colors.success}>{versionText}</span> : null}
-      {methodTag ? <span fg={hasConflict ? theme.colors.danger : theme.colors.dim}>{methodTag}</span> : null}
-      {checking ? <span fg={theme.colors.muted}>{" ..."}</span> : null}
-    </text>
-  );
+	const { tool, installed, installedVersion, hasUpdate, checking, allMethods } =
+		status;
+	const hasConflict = allMethods && allMethods.length > 1;
+
+	let icon: string;
+	let iconColor: UiColor;
+
+	if (!installed) {
+		icon = "○";
+		iconColor = theme.colors.muted;
+	} else if (hasConflict) {
+		icon = "!";
+		iconColor = theme.colors.danger;
+	} else if (hasUpdate) {
+		icon = "*";
+		iconColor = theme.colors.warning;
+	} else {
+		icon = "●";
+		iconColor = theme.colors.success;
+	}
+
+	const versionText = installedVersion ? ` v${installedVersion}` : "";
+	const methodTag =
+		installed && allMethods?.length ? ` ${allMethods.join("+")}` : "";
+
+	if (isSelected) {
+		return (
+			<text bg={theme.selection.bg} fg={theme.selection.fg}>
+				{" "}
+				{icon} {tool.displayName}
+				{versionText}
+				{methodTag}
+				{checking ? " ..." : ""}{" "}
+			</text>
+		);
+	}
+
+	return (
+		<text fg={theme.colors.text}>
+			<span fg={iconColor}> {icon}</span>
+			<span fg={theme.colors.text}> {tool.displayName}</span>
+			{versionText ? (
+				<span fg={theme.colors.success}>{versionText}</span>
+			) : null}
+			{methodTag ? (
+				<span fg={hasConflict ? theme.colors.danger : theme.colors.dim}>
+					{methodTag}
+				</span>
+			) : null}
+			{checking ? <span fg={theme.colors.muted}>{" ..."}</span> : null}
+		</text>
+	);
 }
 
 // ─── Detail renderer ───────────────────────────────────────────────────────────
 
 export function renderCliToolDetail(
-  status: CliToolStatus | undefined,
+	status: CliToolStatus | undefined,
 ): React.ReactNode {
-  if (!status) {
-    return (
-      <box
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-        flexGrow={1}
-      >
-        <text fg={theme.colors.muted}>Select a tool to see details</text>
-      </box>
-    );
-  }
-
-  const { tool, installed, installedVersion, latestVersion, hasUpdate, checking, installMethod, allMethods, updateCommand, brewFormula } =
-    status;
-
-  const hasConflict = allMethods && allMethods.length > 1;
-
-  return (
-    <box flexDirection="column">
-      <box marginBottom={1}>
-        <text fg={theme.colors.info}>
-          <strong>{"⚙ "}{tool.displayName}</strong>
-        </text>
-        {hasUpdate ? <text fg={theme.colors.warning}> ⬆</text> : null}
-        {hasConflict ? <text fg={theme.colors.danger}> !</text> : null}
-      </box>
-
-      <text fg={theme.colors.muted}>{tool.description}</text>
-
-      <box marginTop={1} flexDirection="column">
-        <box>
-          <text fg={theme.colors.muted}>{"Status   "}</text>
-          {!installed ? (
-            <text fg={theme.colors.muted}>{"○ Not installed"}</text>
-          ) : checking ? (
-            <text fg={theme.colors.success}>{"● Checking..."}</text>
-          ) : hasUpdate ? (
-            <text fg={theme.colors.warning}>{"● Update available"}</text>
-          ) : (
-            <text fg={theme.colors.success}>{"● Up to date"}</text>
-          )}
-        </box>
-        {installedVersion ? (
-          <box>
-            <text fg={theme.colors.muted}>{"Version  "}</text>
-            <text>
-              <span fg={theme.colors.success}>v{installedVersion}</span>
-              {latestVersion && hasUpdate ? (
-                <span fg={theme.colors.warning}> → v{latestVersion}</span>
-              ) : null}
-            </text>
-          </box>
-        ) : latestVersion ? (
-          <box>
-            <text fg={theme.colors.muted}>{"Latest   "}</text>
-            <text fg={theme.colors.text}>v{latestVersion}</text>
-          </box>
-        ) : null}
-        {installed && updateCommand ? (
-          <box>
-            <text fg={theme.colors.muted}>{"Update   "}</text>
-            <text fg={theme.colors.accent}>{updateCommand}</text>
-          </box>
-        ) : !installed ? (
-          <box>
-            <text fg={theme.colors.muted}>{"Install  "}</text>
-            <text fg={theme.colors.accent}>{tool.installCommand}</text>
-          </box>
-        ) : null}
-        <box>
-          <text fg={theme.colors.muted}>{"Website  "}</text>
-          <text fg={theme.colors.link}>{tool.website}</text>
-        </box>
-      </box>
-
-      {/* Conflict warning */}
-      {hasConflict ? (
-        <box marginTop={1} flexDirection="column">
-          <box>
-            <text bg={theme.colors.danger} fg="white">
-              <strong>{" "}Conflict: installed via {allMethods.join(" + ")}{" "}</strong>
-            </text>
-          </box>
-          <box marginTop={1}>
-            <text fg={theme.colors.muted}>
-              Multiple installs can cause version mismatches.
-              {"\n"}Keep one, remove the rest:
-            </text>
-          </box>
-          {allMethods.map((method, i) => (
-            <box key={method}>
-              <text>
-                <span fg={i === 0 ? theme.colors.success : theme.colors.danger}>
-                  {i === 0 ? "  ● keep  " : "  ○ remove "}
-                </span>
-                <span fg={theme.colors.warning}>{method}</span>
-                {i > 0 ? (
-                  <span fg={theme.colors.dim}>{`  ${getUninstallHint(tool, method, brewFormula)}`}</span>
-                ) : (
-                  <span fg={theme.colors.dim}>  (active in PATH)</span>
-                )}
-              </text>
-            </box>
-          ))}
-          <box marginTop={1}>
-            <text bg={theme.colors.danger} fg="white">{" "}c{" "}</text>
-            <text fg={theme.colors.muted}> Resolve — pick which to keep</text>
-          </box>
-        </box>
-      ) : null}
-
-      {/* Actions */}
-      <box marginTop={2} flexDirection="column">
-        {!installed ? (
-          <box>
-            <text bg={theme.colors.success} fg="black">{" "}Enter{" "}</text>
-            <text fg={theme.colors.muted}> Install</text>
-            <text fg={theme.colors.dim}>  {tool.installCommand}</text>
-          </box>
-        ) : hasUpdate ? (
-          <box>
-            <text bg={theme.colors.warning} fg="black">{" "}Enter{" "}</text>
-            <text fg={theme.colors.muted}> Update to v{latestVersion}</text>
-          </box>
-        ) : (
-          <box>
-            <text bg={theme.colors.muted} fg="white">{" "}Enter{" "}</text>
-            <text fg={theme.colors.muted}> Reinstall</text>
-          </box>
-        )}
-      </box>
-    </box>
-  );
+	if (!status) {
+		return (
+			<box
+				flexDirection="column"
+				alignItems="center"
+				justifyContent="center"
+				flexGrow={1}
+			>
+				<text fg={theme.colors.muted}>Select a tool to see details</text>
+			</box>
+		);
+	}
+
+	const {
+		tool,
+		installed,
+		installedVersion,
+		latestVersion,
+		hasUpdate,
+		checking,
+		installMethod,
+		allMethods,
+		updateCommand,
+		brewFormula,
+	} = status;
+
+	const hasConflict = allMethods && allMethods.length > 1;
+
+	return (
+		<box flexDirection="column">
+			<box marginBottom={1}>
+				<text fg={theme.colors.info}>
+					<strong>
+						{"⚙ "}
+						{tool.displayName}
+					</strong>
+				</text>
+				{hasUpdate ? <text fg={theme.colors.warning}> ⬆</text> : null}
+				{hasConflict ? <text fg={theme.colors.danger}> !</text> : null}
+			</box>
+
+			<text fg={theme.colors.muted}>{tool.description}</text>
+
+			<box marginTop={1} flexDirection="column">
+				<box>
+					<text fg={theme.colors.muted}>{"Status   "}</text>
+					{!installed ? (
+						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
+					) : checking ? (
+						<text fg={theme.colors.success}>{"● Checking..."}</text>
+					) : hasUpdate ? (
+						<text fg={theme.colors.warning}>{"● Update available"}</text>
+					) : (
+						<text fg={theme.colors.success}>{"● Up to date"}</text>
+					)}
+				</box>
+				{installedVersion ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Version  "}</text>
+						<text fg={theme.colors.text}>
+							<span fg={theme.colors.success}>v{installedVersion}</span>
+							{latestVersion && hasUpdate ? (
+								<span fg={theme.colors.warning}> → v{latestVersion}</span>
+							) : null}
+						</text>
+					</box>
+				) : latestVersion ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Latest   "}</text>
+						<text fg={theme.colors.text}>v{latestVersion}</text>
+					</box>
+				) : null}
+				{installed && updateCommand ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Update   "}</text>
+						<text fg={theme.colors.accent}>{updateCommand}</text>
+					</box>
+				) : !installed ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Install  "}</text>
+						<text fg={theme.colors.accent}>{tool.installCommand}</text>
+					</box>
+				) : null}
+				<box>
+					<text fg={theme.colors.muted}>{"Website  "}</text>
+					<text fg={theme.colors.link}>{tool.website}</text>
+				</box>
+			</box>
+
+			{/* Conflict warning */}
+			{hasConflict ? (
+				<box marginTop={1} flexDirection="column">
+					<box>
+						<text bg={theme.colors.danger} fg={theme.hints.fg}>
+							<strong>
+								{" "}
+								Conflict: installed via {allMethods.join(" + ")}{" "}
+							</strong>
+						</text>
+					</box>
+					<box marginTop={1}>
+						<text fg={theme.colors.muted}>
+							Multiple installs can cause version mismatches.
+							{"\n"}Keep one, remove the rest:
+						</text>
+					</box>
+					{allMethods.map((method, i) => (
+						<box key={method}>
+							<text fg={theme.colors.text}>
+								<span fg={i === 0 ? theme.colors.success : theme.colors.danger}>
+									{i === 0 ? "  ● keep  " : "  ○ remove "}
+								</span>
+								<span fg={theme.colors.warning}>{method}</span>
+								{i > 0 ? (
+									<span
+										fg={theme.colors.dim}
+									>{`  ${getUninstallHint(tool, method, brewFormula)}`}</span>
+								) : (
+									<span fg={theme.colors.dim}> (active in PATH)</span>
+								)}
+							</text>
+						</box>
+					))}
+					<box marginTop={1}>
+						<text bg={theme.colors.danger} fg={theme.hints.fg}>
+							{" "}
+							c{" "}
+						</text>
+						<text fg={theme.colors.muted}> Resolve — pick which to keep</text>
+					</box>
+				</box>
+			) : null}
+
+			{/* Actions */}
+			<box marginTop={2} flexDirection="column">
+				{!installed ? (
+					<box>
+						<text bg={theme.colors.success} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}> Install</text>
+						<text fg={theme.colors.dim}> {tool.installCommand}</text>
+					</box>
+				) : hasUpdate ? (
+					<box>
+						<text bg={theme.colors.warning} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}> Update to v{latestVersion}</text>
+					</box>
+				) : (
+					<box>
+						<text bg={theme.colors.muted} fg={theme.hints.fg}>
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg={theme.colors.muted}> Reinstall</text>
+					</box>
+				)}
+			</box>
+		</box>
+	);
 }

package/src/ui/renderers/gitignoreRenderers.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import type { ResolvedRule, Violation } from "../../types/gitignore.js";
+import { theme } from "../theme.js";
 
 /**
  * A unified row for the Gitignore screen — represents one resolved rule,
  * annotated with every violation it has against the working tree.
  */
 export interface RuleRow {
-  rule: ResolvedRule;
-  violations: Violation[];
+	rule: ResolvedRule;
+	violations: Violation[];
 }
 
 // Two color channels that never collide:
@@ -15,17 +16,17 @@ export interface RuleRow {
 //     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
+const TRACK_FG = theme.colors.success; // green — item ends up tracked by git
+const IGNORE_FG = theme.colors.danger; // reddish — item ends up ignored / dropped
+const VIOLATION_PATH_FG = theme.colors.danger; // bright red filename = look here
+const CLEAN_PATH_FG = theme.colors.muted;
+const SELECTED_BG = theme.surface.bg; // faint slate highlight for the cursor row
 
 // Violation badges are solid chips so the required direction reads at a glance:
 // green chip = will be tracked, red chip = will be ignored/dropped.
-const TRACK_CHIP_BG = "#1f5132";
-const IGNORE_CHIP_BG = "#5a2323";
-const CHIP_FG = "white";
+const TRACK_CHIP_BG = theme.colors.success;
+const IGNORE_CHIP_BG = theme.colors.danger;
+const CHIP_FG = theme.colors.text;
 
 // The only marker is the cursor: ▶ on the selected row, blank otherwise.
 // Action (track/ignore) is read from the badge word and, for clean items,
@@ -38,42 +39,42 @@ const MARKER_NONE = " ";
 const MAX_PATH_LEN = 22;
 
 function truncatePath(p: string): string {
-  return p.length > MAX_PATH_LEN ? p.slice(0, MAX_PATH_LEN - 1) + "…" : p;
+	return p.length > MAX_PATH_LEN ? p.slice(0, MAX_PATH_LEN - 1) + "…" : p;
 }
 
 export function renderRuleRow(
-  row: RuleRow,
-  isSelected: boolean,
+	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;
+	const { rule, violations } = row;
+	const path = truncatePath(rule.pattern);
+	const key = `${rule.action}:${rule.pattern}`;
+	// Badge text padded to a fixed width so paths line up in a column.
+	const badge = rule.action === "ignore" ? "ignore" : "track ";
+	const badgeFg = rule.action === "ignore" ? IGNORE_FG : TRACK_FG;
+	const suffix = violations.length > 1 ? ` +${violations.length - 1}` : "";
+	const rowBg = isSelected ? SELECTED_BG : undefined;
+	const marker = isSelected ? MARKER_SELECTED : MARKER_NONE;
+	const isViolation = violations.length > 0;
 
-  if (isViolation) {
-    // Solid badge chip + red filename. The chip color is the fix direction.
-    const chipBg = rule.action === "ignore" ? IGNORE_CHIP_BG : TRACK_CHIP_BG;
-    return (
-      <text key={key} bg={rowBg}>
-        <span fg={VIOLATION_PATH_FG}>{`  ${marker} `}</span>
-        <span bg={chipBg} fg={CHIP_FG}>{` ${badge} `}</span>
-        <span fg={VIOLATION_PATH_FG}>{`  ${path}${suffix}`}</span>
-      </text>
-    );
-  }
+	if (isViolation) {
+		// Solid badge chip + red filename. The chip color is the fix direction.
+		const chipBg = rule.action === "ignore" ? IGNORE_CHIP_BG : TRACK_CHIP_BG;
+		return (
+			<text key={key} bg={rowBg}>
+				<span fg={VIOLATION_PATH_FG}>{`  ${marker} `}</span>
+				<span bg={chipBg} fg={CHIP_FG}>{` ${badge} `}</span>
+				<span fg={VIOLATION_PATH_FG}>{`  ${path}${suffix}`}</span>
+			</text>
+		);
+	}
 
-  // Clean row: flat colored badge word, dim path, no chip.
-  return (
-    <text key={key} bg={rowBg}>
-      <span fg={badgeFg}>{`  ${marker} `}</span>
-      <span fg={badgeFg}>{badge}</span>
-      <span fg={CLEAN_PATH_FG}>{`  ${path}`}</span>
-    </text>
-  );
+	// Clean row: flat colored badge word, dim path, no chip.
+	return (
+		<text key={key} bg={rowBg}>
+			<span fg={badgeFg}>{`  ${marker} `}</span>
+			<span fg={badgeFg}>{badge}</span>
+			<span fg={CLEAN_PATH_FG}>{`  ${path}`}</span>
+		</text>
+	);
 }