claudeup 3.17.0 → 4.0.0

package/src/ui/screens/CliToolsScreen.js

@@ -8,7 +8,9 @@ import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
 import { cliTools } from "../../data/cli-tools.js";
+import { renderCliToolRow, renderCliToolDetail, } from "../renderers/cliToolRenderers.js";
 const execAsync = promisify(exec);
+// ─── Version helpers ───────────────────────────────────────────────────────────
 // Session-level cache
 let cachedToolStatuses = null;
 let cacheInitialized = false;
@@ -53,10 +55,7 @@ async function getLatestNpmVersion(packageName) {
 }
 async function getLatestPipVersion(packageName) {
     try {
-        const { stdout } = await execAsync(`pip index versions ${packageName} 2>/dev/null | head -1`, {
-            timeout: 10000,
-            shell: "/bin/bash",
-        });
+        const { stdout } = await execAsync(`pip index versions ${packageName} 2>/dev/null | head -1`, { timeout: 10000, shell: "/bin/bash" });
         const match = stdout.trim().match(/\(([^)]+)\)/);
         return match ? match[1] : undefined;
     }
@@ -65,12 +64,9 @@ async function getLatestPipVersion(packageName) {
     }
 }
 async function getLatestVersion(tool) {
-    if (tool.packageManager === "npm") {
-        return getLatestNpmVersion(tool.packageName);
-    }
-    else {
-        return getLatestPipVersion(tool.packageName);
-    }
+    return tool.packageManager === "npm"
+        ? getLatestNpmVersion(tool.packageName)
+        : getLatestPipVersion(tool.packageName);
 }
 function compareVersions(v1, v2) {
     const parts1 = v1.split(/[-.]/).map((p) => parseInt(p, 10) || 0);
@@ -85,6 +81,7 @@ function compareVersions(v1, v2) {
     }
     return 0;
 }
+// ─── Component ─────────────────────────────────────────────────────────────────
 export function CliToolsScreen() {
     const { state, dispatch } = useApp();
     const { cliTools: cliToolsState } = state;
@@ -101,7 +98,6 @@ export function CliToolsScreen() {
     });
     const statusesRef = useRef(toolStatuses);
     statusesRef.current = toolStatuses;
-    // Update single tool status
     const updateToolStatus = useCallback((index, updates) => {
         setToolStatuses((prev) => {
             const newStatuses = [...prev];
@@ -110,9 +106,7 @@ export function CliToolsScreen() {
             return newStatuses;
         });
     }, []);
-    // Fetch all version info
     const fetchVersionInfo = useCallback(async () => {
-        // Check installed versions
         for (let i = 0; i < cliTools.length; i++) {
             const tool = cliTools[i];
             getInstalledVersion(tool).then((version) => {
@@ -140,7 +134,6 @@ export function CliToolsScreen() {
             fetchVersionInfo();
         }
     }, [fetchVersionInfo, toolStatuses]);
-    // Keyboard handling
     useKeyboard((event) => {
         if (state.isSearching || state.modal)
             return;
@@ -178,24 +171,15 @@ export function CliToolsScreen() {
         if (!status)
             return;
         const { tool, installed, hasUpdate } = status;
-        const action = !installed
-            ? "Installing"
-            : hasUpdate
-                ? "Updating"
-                : "Reinstalling";
+        const action = !installed ? "Installing" : hasUpdate ? "Updating" : "Reinstalling";
         const viaHomebrew = installed
             ? await isInstalledViaHomebrew(tool.name)
             : false;
-        let command;
-        if (!installed) {
-            command = tool.installCommand;
-        }
-        else if (viaHomebrew) {
-            command = `brew upgrade ${tool.name}`;
-        }
-        else {
-            command = tool.installCommand;
-        }
+        const command = !installed
+            ? tool.installCommand
+            : viaHomebrew
+                ? `brew upgrade ${tool.name}`
+                : tool.installCommand;
         modal.loading(`${action} ${tool.displayName}...`);
         try {
             execSync(command, {
@@ -237,38 +221,10 @@ export function CliToolsScreen() {
         modal.hideModal();
         handleRefresh();
     };
-    // Get selected item
     const selectedStatus = toolStatuses[cliToolsState.selectedIndex];
-    const renderDetail = () => {
-        if (!selectedStatus) {
-            return (_jsx("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx("text", { fg: "gray", children: "Select a tool to see details" }) }));
-        }
-        const { tool, installed, installedVersion, latestVersion, hasUpdate, checking, } = selectedStatus;
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { marginBottom: 1, children: [_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: ["\u2699 ", tool.displayName] }) }), hasUpdate && _jsx("text", { fg: "yellow", children: " \u2B06" })] }), _jsx("text", { fg: "gray", children: tool.description }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Status " }), !installed ? (_jsx("text", { fg: "gray", children: "\u25CB Not installed" })) : checking ? (_jsx("text", { fg: "green", children: "\u25CF Checking..." })) : hasUpdate ? (_jsx("text", { fg: "yellow", children: "\u25CF Update available" })) : (_jsx("text", { fg: "green", children: "\u25CF Up to date" }))] }), installedVersion && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Installed " }), _jsxs("text", { fg: "green", children: ["v", installedVersion] })] })), latestVersion && (_jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Latest " }), _jsxs("text", { fg: "white", children: ["v", latestVersion] })] })), _jsxs("box", { children: [_jsx("text", { fg: "gray", children: "Website " }), _jsx("text", { fg: "#5c9aff", children: tool.website })] })] }), _jsx("box", { marginTop: 2, children: !installed ? (_jsxs("box", { children: [_jsxs("text", { bg: "green", fg: "black", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Install" })] })) : hasUpdate ? (_jsxs("box", { children: [_jsxs("text", { bg: "yellow", fg: "black", children: [" ", "Enter", " "] }), _jsxs("text", { fg: "gray", children: [" Update to v", latestVersion] })] })) : (_jsxs("box", { children: [_jsxs("text", { bg: "gray", fg: "white", children: [" ", "Enter", " "] }), _jsx("text", { fg: "gray", children: " Reinstall" })] })) })] }));
-    };
-    const renderListItem = (status, _idx, isSelected) => {
-        const { tool, installed, installedVersion, hasUpdate, checking } = status;
-        let icon;
-        let iconColor;
-        if (!installed) {
-            icon = "○";
-            iconColor = "gray";
-        }
-        else if (hasUpdate) {
-            icon = "⬆";
-            iconColor = "yellow";
-        }
-        else {
-            icon = "●";
-            iconColor = "green";
-        }
-        const versionText = installedVersion ? `v${installedVersion}` : "";
-        return isSelected ? (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", icon, " ", tool.displayName, " ", versionText, checking ? "..." : "", " "] })) : (_jsxs("text", { children: [_jsx("span", { fg: iconColor, children: icon }), _jsxs("span", { fg: "white", children: [" ", tool.displayName] }), versionText && _jsxs("span", { fg: "green", children: [" ", versionText] }), checking && _jsx("span", { fg: "gray", children: "..." })] }));
-    };
-    // Calculate stats for status line
     const installedCount = toolStatuses.filter((s) => s.installed).length;
     const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
     const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Installed: " }), _jsxs("span", { fg: "cyan", children: [installedCount, "/", toolStatuses.length] }), updateCount > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { fg: "gray", children: " \u2502 Updates: " }), _jsx("span", { fg: "yellow", children: updateCount })] }))] }));
-    return (_jsx(ScreenLayout, { title: "claudeup CLI Tools", currentScreen: "cli-tools", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter:install \u2502 a:update all \u2502 r:refresh", listPanel: _jsx(ScrollableList, { items: toolStatuses, selectedIndex: cliToolsState.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight }), detailPanel: renderDetail() }));
+    return (_jsx(ScreenLayout, { title: "claudeup CLI Tools", currentScreen: "cli-tools", statusLine: statusContent, footerHints: "\u2191\u2193:nav \u2502 Enter:install \u2502 a:update all \u2502 r:refresh", listPanel: _jsx(ScrollableList, { items: toolStatuses, selectedIndex: cliToolsState.selectedIndex, renderItem: renderCliToolRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderCliToolDetail(selectedStatus) }));
 }
 export default CliToolsScreen;

package/src/ui/screens/CliToolsScreen.tsx

@@ -6,21 +6,19 @@ import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
 import { ScrollableList } from "../components/ScrollableList.js";
-import { cliTools, type CliTool } from "../../data/cli-tools.js";
+import { cliTools } from "../../data/cli-tools.js";
+import {
+	renderCliToolRow,
+	renderCliToolDetail,
+	type CliToolStatus,
+} from "../renderers/cliToolRenderers.js";
 
 const execAsync = promisify(exec);
 
-interface ToolStatus {
-	tool: CliTool;
-	installed: boolean;
-	installedVersion?: string;
-	latestVersion?: string;
-	hasUpdate?: boolean;
-	checking: boolean;
-}
+// ─── Version helpers ───────────────────────────────────────────────────────────
 
 // Session-level cache
-let cachedToolStatuses: ToolStatus[] | null = null;
+let cachedToolStatuses: CliToolStatus[] | null = null;
 let cacheInitialized = false;
 
 function clearCliToolsCache(): void {
@@ -46,7 +44,9 @@ async function isInstalledViaHomebrew(toolName: string): Promise<boolean> {
 	}
 }
 
-async function getInstalledVersion(tool: CliTool): Promise<string | undefined> {
+async function getInstalledVersion(
+	tool: import("../../data/cli-tools.js").CliTool,
+): Promise<string | undefined> {
 	try {
 		const { stdout } = await execAsync(tool.checkCommand, { timeout: 5000 });
 		return parseVersion(stdout.trim());
@@ -55,9 +55,7 @@ async function getInstalledVersion(tool: CliTool): Promise<string | undefined> {
 	}
 }
 
-async function getLatestNpmVersion(
-	packageName: string,
-): Promise<string | undefined> {
+async function getLatestNpmVersion(packageName: string): Promise<string | undefined> {
 	try {
 		const { stdout } = await execAsync(
 			`npm view ${packageName} version 2>/dev/null`,
@@ -69,16 +67,11 @@ async function getLatestNpmVersion(
 	}
 }
 
-async function getLatestPipVersion(
-	packageName: string,
-): Promise<string | undefined> {
+async function getLatestPipVersion(packageName: string): Promise<string | undefined> {
 	try {
 		const { stdout } = await execAsync(
 			`pip index versions ${packageName} 2>/dev/null | head -1`,
-			{
-				timeout: 10000,
-				shell: "/bin/bash",
-			},
+			{ timeout: 10000, shell: "/bin/bash" },
 		);
 		const match = stdout.trim().match(/\(([^)]+)\)/);
 		return match ? match[1] : undefined;
@@ -87,18 +80,17 @@ async function getLatestPipVersion(
 	}
 }
 
-async function getLatestVersion(tool: CliTool): Promise<string | undefined> {
-	if (tool.packageManager === "npm") {
-		return getLatestNpmVersion(tool.packageName);
-	} else {
-		return getLatestPipVersion(tool.packageName);
-	}
+async function getLatestVersion(
+	tool: import("../../data/cli-tools.js").CliTool,
+): Promise<string | undefined> {
+	return tool.packageManager === "npm"
+		? getLatestNpmVersion(tool.packageName)
+		: getLatestPipVersion(tool.packageName);
 }
 
 function compareVersions(v1: string, v2: string): number {
 	const parts1 = v1.split(/[-.]/).map((p) => parseInt(p, 10) || 0);
 	const parts2 = v2.split(/[-.]/).map((p) => parseInt(p, 10) || 0);
-
 	for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
 		const p1 = parts1[i] || 0;
 		const p2 = parts2[i] || 0;
@@ -108,13 +100,15 @@ function compareVersions(v1: string, v2: string): number {
 	return 0;
 }
 
+// ─── Component ─────────────────────────────────────────────────────────────────
+
 export function CliToolsScreen() {
 	const { state, dispatch } = useApp();
 	const { cliTools: cliToolsState } = state;
 	const modal = useModal();
 	const dimensions = useDimensions();
 
-	const [toolStatuses, setToolStatuses] = useState<ToolStatus[]>(() => {
+	const [toolStatuses, setToolStatuses] = useState<CliToolStatus[]>(() => {
 		return (
 			cachedToolStatuses ||
 			cliTools.map((tool) => ({
@@ -129,12 +123,11 @@ export function CliToolsScreen() {
 	const statusesRef = useRef(toolStatuses);
 	statusesRef.current = toolStatuses;
 
-	// Update single tool status
 	const updateToolStatus = useCallback(
-		(index: number, updates: Partial<ToolStatus>) => {
+		(index: number, updates: Partial<CliToolStatus>) => {
 			setToolStatuses((prev) => {
 				const newStatuses = [...prev];
-				newStatuses[index] = { ...newStatuses[index], ...updates };
+				newStatuses[index] = { ...newStatuses[index]!, ...updates };
 				cachedToolStatuses = newStatuses;
 				return newStatuses;
 			});
@@ -142,11 +135,9 @@ export function CliToolsScreen() {
 		[],
 	);
 
-	// Fetch all version info
 	const fetchVersionInfo = useCallback(async () => {
-		// Check installed versions
 		for (let i = 0; i < cliTools.length; i++) {
-			const tool = cliTools[i];
+			const tool = cliTools[i]!;
 			getInstalledVersion(tool).then((version) => {
 				updateToolStatus(i, {
 					installedVersion: version,
@@ -155,7 +146,7 @@ export function CliToolsScreen() {
 			});
 
 			getLatestVersion(tool).then((latest) => {
-				const current = statusesRef.current[i];
+				const current = statusesRef.current[i]!;
 				updateToolStatus(i, {
 					latestVersion: latest,
 					checking: false,
@@ -176,7 +167,6 @@ export function CliToolsScreen() {
 		}
 	}, [fetchVersionInfo, toolStatuses]);
 
-	// Keyboard handling
 	useKeyboard((event) => {
 		if (state.isSearching || state.modal) return;
 
@@ -217,27 +207,19 @@ export function CliToolsScreen() {
 		if (!status) return;
 
 		const { tool, installed, hasUpdate } = status;
-		const action = !installed
-			? "Installing"
-			: hasUpdate
-				? "Updating"
-				: "Reinstalling";
+		const action = !installed ? "Installing" : hasUpdate ? "Updating" : "Reinstalling";
 
 		const viaHomebrew = installed
 			? await isInstalledViaHomebrew(tool.name)
 			: false;
 
-		let command: string;
-		if (!installed) {
-			command = tool.installCommand;
-		} else if (viaHomebrew) {
-			command = `brew upgrade ${tool.name}`;
-		} else {
-			command = tool.installCommand;
-		}
+		const command = !installed
+			? tool.installCommand
+			: viaHomebrew
+				? `brew upgrade ${tool.name}`
+				: tool.installCommand;
 
 		modal.loading(`${action} ${tool.displayName}...`);
-
 		try {
 			execSync(command, {
 				encoding: "utf-8",
@@ -259,11 +241,7 @@ export function CliToolsScreen() {
 	const handleUpdateAll = async () => {
 		const updatable = toolStatuses.filter((s) => s.hasUpdate);
 		if (updatable.length === 0) {
-			await modal.message(
-				"Up to Date",
-				"All tools are already up to date.",
-				"info",
-			);
+			await modal.message("Up to Date", "All tools are already up to date.", "info");
 			return;
 		}
 
@@ -274,7 +252,6 @@ export function CliToolsScreen() {
 			const command = viaHomebrew
 				? `brew upgrade ${status.tool.name}`
 				: status.tool.installCommand;
-
 			try {
 				execSync(command, {
 					encoding: "utf-8",
@@ -290,145 +267,8 @@ export function CliToolsScreen() {
 		handleRefresh();
 	};
 
-	// Get selected item
 	const selectedStatus = toolStatuses[cliToolsState.selectedIndex];
 
-	const renderDetail = () => {
-		if (!selectedStatus) {
-			return (
-				<box
-					flexDirection="column"
-					alignItems="center"
-					justifyContent="center"
-					flexGrow={1}
-				>
-					<text fg="gray">Select a tool to see details</text>
-				</box>
-			);
-		}
-
-		const {
-			tool,
-			installed,
-			installedVersion,
-			latestVersion,
-			hasUpdate,
-			checking,
-		} = selectedStatus;
-
-		return (
-			<box flexDirection="column">
-				<box marginBottom={1}>
-					<text fg="cyan">
-						<strong>⚙ {tool.displayName}</strong>
-					</text>
-					{hasUpdate && <text fg="yellow"> ⬆</text>}
-				</box>
-
-				<text fg="gray">{tool.description}</text>
-
-				<box marginTop={1} flexDirection="column">
-					<box>
-						<text fg="gray">Status </text>
-						{!installed ? (
-							<text fg="gray">○ Not installed</text>
-						) : checking ? (
-							<text fg="green">● Checking...</text>
-						) : hasUpdate ? (
-							<text fg="yellow">● Update available</text>
-						) : (
-							<text fg="green">● Up to date</text>
-						)}
-					</box>
-					{installedVersion && (
-						<box>
-							<text fg="gray">Installed </text>
-							<text fg="green">v{installedVersion}</text>
-						</box>
-					)}
-					{latestVersion && (
-						<box>
-							<text fg="gray">Latest </text>
-							<text fg="white">v{latestVersion}</text>
-						</box>
-					)}
-					<box>
-						<text fg="gray">Website </text>
-						<text fg="#5c9aff">{tool.website}</text>
-					</box>
-				</box>
-
-				<box marginTop={2}>
-					{!installed ? (
-						<box>
-							<text bg="green" fg="black">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Install</text>
-						</box>
-					) : hasUpdate ? (
-						<box>
-							<text bg="yellow" fg="black">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Update to v{latestVersion}</text>
-						</box>
-					) : (
-						<box>
-							<text bg="gray" fg="white">
-								{" "}
-								Enter{" "}
-							</text>
-							<text fg="gray"> Reinstall</text>
-						</box>
-					)}
-				</box>
-			</box>
-		);
-	};
-
-	const renderListItem = (
-		status: ToolStatus,
-		_idx: number,
-		isSelected: boolean,
-	) => {
-		const { tool, installed, installedVersion, hasUpdate, checking } = status;
-
-		let icon: string;
-		let iconColor: string;
-
-		if (!installed) {
-			icon = "○";
-			iconColor = "gray";
-		} else if (hasUpdate) {
-			icon = "⬆";
-			iconColor = "yellow";
-		} else {
-			icon = "●";
-			iconColor = "green";
-		}
-
-		const versionText = installedVersion ? `v${installedVersion}` : "";
-
-		return isSelected ? (
-			<text bg="magenta" fg="white">
-				{" "}
-				{icon} {tool.displayName} {versionText}
-				{checking ? "..." : ""}{" "}
-			</text>
-		) : (
-			<text>
-				<span fg={iconColor}>{icon}</span>
-				<span fg="white"> {tool.displayName}</span>
-				{versionText && <span fg="green"> {versionText}</span>}
-				{checking && <span fg="gray">...</span>}
-			</text>
-		);
-	};
-
-	// Calculate stats for status line
 	const installedCount = toolStatuses.filter((s) => s.installed).length;
 	const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
 	const statusContent = (
@@ -456,11 +296,11 @@ export function CliToolsScreen() {
 				<ScrollableList
 					items={toolStatuses}
 					selectedIndex={cliToolsState.selectedIndex}
-					renderItem={renderListItem}
+					renderItem={renderCliToolRow}
 					maxHeight={dimensions.listPanelHeight}
 				/>
 			}
-			detailPanel={renderDetail()}
+			detailPanel={renderCliToolDetail(selectedStatus)}
 		/>
 	);
 }