claudeup 6.5.1 → 6.6.0

package/src/ui/renderers/cliToolRenderers.tsx

@@ -2,12 +2,17 @@ import type React from "react";
 import type { CliTool } from "../../data/cli-tools.js";
 import {
 	type InstallMethod,
-	cliToolInstall,
 	cliToolUninstall,
 } from "../../services/cli-tool-commands.js";
-import type { Command } from "../../utils/command-utils.js";
 import { formatCommand } from "../../utils/command-utils.js";
+import {
+	type CliToolRow,
+	cliToolStatusText,
+	displayVersion,
+	isInstalled,
+} from "../adapters/cliToolsAdapter.js";
 import { type UiColor, theme } from "../theme.js";
+import type { StatusTone } from "./pluginStatusText.js";
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
@@ -32,52 +37,58 @@ function uninstallHint(
 	return cmd ? formatCommand(cmd) : "";
 }
 
-// ─── Status type ───────────────────────────────────────────────────────────────
-
-export interface CliToolStatus {
-	tool: CliTool;
-	installed: boolean;
-	installedVersion?: string;
-	latestVersion?: string;
-	hasUpdate?: boolean;
-	checking: boolean;
-	installMethod?: InstallMethod;
-	allMethods?: InstallMethod[];
-	updateCommand?: Command;
-	brewFormula?: string;
+function toneColor(tone: StatusTone): UiColor {
+	switch (tone) {
+		case "warning":
+			return theme.colors.warning;
+		case "danger":
+			return theme.colors.danger;
+		case "success":
+			return theme.colors.success;
+		case "info":
+			return theme.colors.info;
+		case "muted":
+			return theme.colors.muted;
+	}
 }
 
 // ─── Row renderer ──────────────────────────────────────────────────────────────
 
 export function renderCliToolRow(
-	status: CliToolStatus,
+	row: CliToolRow,
 	_index: number,
 	isSelected: boolean,
 ): React.ReactNode {
-	const { tool, installed, installedVersion, hasUpdate, checking, allMethods } =
-		status;
-	const hasConflict = allMethods && allMethods.length > 1;
+	const { tool, status, install } = row;
+	const installed = isInstalled(status);
+	const allMethods = install?.all ?? [];
+	const hasConflict = 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) {
+	} else if (status?.state === "upgrade") {
 		icon = "*";
 		iconColor = theme.colors.warning;
+	} else if (status?.state === "unknown") {
+		icon = "?";
+		iconColor = theme.colors.warning;
 	} else {
 		icon = "●";
 		iconColor = theme.colors.success;
 	}
 
-	const versionText = installedVersion ? ` v${installedVersion}` : "";
+	const versionText = status?.installed
+		? ` ${displayVersion(status.installed)}`
+		: "";
 	const methodTag =
-		installed && allMethods?.length ? ` ${allMethods.join("+")}` : "";
+		installed && allMethods.length ? ` ${allMethods.join("+")}` : "";
+	const { suffix, tone } = cliToolStatusText(row);
 
 	if (isSelected) {
 		return (
@@ -86,7 +97,7 @@ export function renderCliToolRow(
 				{icon} {tool.displayName}
 				{versionText}
 				{methodTag}
-				{checking ? " ..." : ""}{" "}
+				{suffix}{" "}
 			</text>
 		);
 	}
@@ -103,7 +114,7 @@ export function renderCliToolRow(
 					{methodTag}
 				</span>
 			) : null}
-			{checking ? <span fg={theme.colors.muted}>{" ..."}</span> : null}
+			{suffix ? <span fg={toneColor(tone)}>{suffix}</span> : null}
 		</text>
 	);
 }
@@ -111,9 +122,9 @@ export function renderCliToolRow(
 // ─── Detail renderer ───────────────────────────────────────────────────────────
 
 export function renderCliToolDetail(
-	status: CliToolStatus | undefined,
+	row: CliToolRow | undefined,
 ): React.ReactNode {
-	if (!status) {
+	if (!row) {
 		return (
 			<box
 				flexDirection="column"
@@ -126,20 +137,13 @@ export function renderCliToolDetail(
 		);
 	}
 
-	const {
-		tool,
-		installed,
-		installedVersion,
-		latestVersion,
-		hasUpdate,
-		checking,
-		installMethod,
-		allMethods,
-		updateCommand,
-		brewFormula,
-	} = status;
-
-	const hasConflict = allMethods && allMethods.length > 1;
+	const { tool, status, checking, install, updateCommand, installCommand } =
+		row;
+	const installed = isInstalled(status);
+	const allMethods = install?.all ?? [];
+	const brewFormula = install?.brewFormula;
+	const hasConflict = allMethods.length > 1;
+	const state = status?.state;
 
 	return (
 		<box flexDirection="column">
@@ -150,7 +154,7 @@ export function renderCliToolDetail(
 						{tool.displayName}
 					</strong>
 				</text>
-				{hasUpdate ? <text fg={theme.colors.warning}> ⬆</text> : null}
+				{state === "upgrade" ? <text fg={theme.colors.warning}> ⬆</text> : null}
 				{hasConflict ? <text fg={theme.colors.danger}> !</text> : null}
 			</box>
 
@@ -159,30 +163,56 @@ export function renderCliToolDetail(
 			<box marginTop={1} flexDirection="column">
 				<box>
 					<text fg={theme.colors.muted}>{"Status   "}</text>
-					{!installed ? (
+					{checking || !status ? (
+						<text fg={theme.colors.muted}>{"● Checking..."}</text>
+					) : state === "install" ? (
 						<text fg={theme.colors.muted}>{"○ Not installed"}</text>
-					) : checking ? (
-						<text fg={theme.colors.success}>{"● Checking..."}</text>
-					) : hasUpdate ? (
+					) : state === "upgrade" ? (
 						<text fg={theme.colors.warning}>{"● Update available"}</text>
+					) : state === "unknown" ? (
+						<text fg={theme.colors.warning}>{"? Unverified"}</text>
 					) : (
 						<text fg={theme.colors.success}>{"● Up to date"}</text>
 					)}
 				</box>
-				{installedVersion ? (
+				{state === "unknown" && status?.note ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Why      "}</text>
+						<text fg={theme.colors.warning}>{status.note}</text>
+					</box>
+				) : null}
+				{/* An upgrade that also takes the tool over from another installer. */}
+				{status?.adopted ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Note     "}</text>
+						<text fg={theme.colors.warning}>{status.adopted}</text>
+					</box>
+				) : null}
+				{status?.installed ? (
 					<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>
+							<span fg={theme.colors.success}>
+								{displayVersion(status.installed)}
+							</span>
+							{state === "upgrade" && status.target ? (
+								<span fg={theme.colors.warning}>
+									{" "}
+									→ {displayVersion(status.target)}
+								</span>
 							) : null}
 						</text>
 					</box>
-				) : latestVersion ? (
+				) : status?.latest ? (
 					<box>
 						<text fg={theme.colors.muted}>{"Latest   "}</text>
-						<text fg={theme.colors.text}>v{latestVersion}</text>
+						<text fg={theme.colors.text}>{displayVersion(status.latest)}</text>
+					</box>
+				) : null}
+				{status?.pin ? (
+					<box>
+						<text fg={theme.colors.muted}>{"Pinned   "}</text>
+						<text fg={theme.colors.text}>{displayVersion(status.pin)}</text>
 					</box>
 				) : null}
 				{installed && updateCommand ? (
@@ -190,11 +220,11 @@ export function renderCliToolDetail(
 						<text fg={theme.colors.muted}>{"Update   "}</text>
 						<text fg={theme.colors.accent}>{formatCommand(updateCommand)}</text>
 					</box>
-				) : !installed ? (
+				) : !installed && !checking ? (
 					<box>
 						<text fg={theme.colors.muted}>{"Install  "}</text>
 						<text fg={theme.colors.accent}>
-							{formatCommand(cliToolInstall(tool))}
+							{formatCommand(installCommand)}
 						</text>
 					</box>
 				) : null}
@@ -250,33 +280,44 @@ export function renderCliToolDetail(
 
 			{/* Actions */}
 			<box marginTop={2} flexDirection="column">
-				{!installed ? (
+				{checking || !status ? null : !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}>
-							{" "}
-							{formatCommand(cliToolInstall(tool))}
-						</text>
+						<text fg={theme.colors.dim}> {formatCommand(installCommand)}</text>
 					</box>
-				) : hasUpdate ? (
+				) : state === "upgrade" ? (
 					<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}>
+						<text fg={theme.colors.muted}>
 							{" "}
-							Enter{" "}
+							Update
+							{status.target ? ` to ${displayVersion(status.target)}` : ""}
 						</text>
-						<text fg={theme.colors.muted}> Reinstall</text>
+					</box>
+				) : (
+					<box flexDirection="column">
+						<box>
+							<text bg={theme.colors.muted} fg={theme.hints.fg}>
+								{" "}
+								Enter{" "}
+							</text>
+							<text fg={theme.colors.muted}>
+								{state === "unknown" ? " Update anyway" : " Reinstall"}
+							</text>
+						</box>
+						{/* The status warns that this command may not replace the
+						    running binary; the menu still offers it, as an explicit
+						    user action, and says so beside it. */}
+						{status.reason === "not-managed" && status.note ? (
+							<text fg={theme.colors.warning}>{`  ${status.note}`}</text>
+						) : null}
 					</box>
 				)}
 			</box>