claudeup 1.8.0 → 3.3.0

package/{dist → src}/ui/screens/CliToolsScreen.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useCallback, useState, useRef } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { exec, execSync } from 'child_process';
-import { promisify } from 'util';
-import { useApp, useModal } from '../state/AppContext.js';
-import { useDimensions } from '../state/DimensionsContext.js';
-import { ScreenLayout } from '../components/layout/index.js';
-import { ScrollableList } from '../components/ScrollableList.js';
-import { cliTools } from '../../data/cli-tools.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useEffect, useCallback, useState, useRef } from "react";
+import { exec, execSync } from "child_process";
+import { promisify } from "util";
+import { useApp, useModal } from "../state/AppContext.js";
+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 } from "../../data/cli-tools.js";
 const execAsync = promisify(exec);
 // Session-level cache
 let cachedToolStatuses = null;
@@ -22,11 +22,11 @@ function parseVersion(versionOutput) {
 }
 async function isInstalledViaHomebrew(toolName) {
     try {
-        const { stdout } = await execAsync('brew list --formula 2>/dev/null', {
+        const { stdout } = await execAsync("brew list --formula 2>/dev/null", {
             timeout: 2000,
-            shell: '/bin/bash',
+            shell: "/bin/bash",
         });
-        const formulas = stdout.trim().split('\n');
+        const formulas = stdout.trim().split("\n");
         return formulas.some((f) => f.trim() === toolName);
     }
     catch {
@@ -55,7 +55,7 @@ async function getLatestPipVersion(packageName) {
     try {
         const { stdout } = await execAsync(`pip index versions ${packageName} 2>/dev/null | head -1`, {
             timeout: 10000,
-            shell: '/bin/bash',
+            shell: "/bin/bash",
         });
         const match = stdout.trim().match(/\(([^)]+)\)/);
         return match ? match[1] : undefined;
@@ -65,7 +65,7 @@ async function getLatestPipVersion(packageName) {
     }
 }
 async function getLatestVersion(tool) {
-    if (tool.packageManager === 'npm') {
+    if (tool.packageManager === "npm") {
         return getLatestNpmVersion(tool.packageName);
     }
     else {
@@ -91,12 +91,13 @@ export function CliToolsScreen() {
     const modal = useModal();
     const dimensions = useDimensions();
     const [toolStatuses, setToolStatuses] = useState(() => {
-        return cachedToolStatuses || cliTools.map((tool) => ({
-            tool,
-            installed: false,
-            installedVersion: undefined,
-            checking: true,
-        }));
+        return (cachedToolStatuses ||
+            cliTools.map((tool) => ({
+                tool,
+                installed: false,
+                installedVersion: undefined,
+                checking: true,
+            })));
     });
     const statusesRef = useRef(toolStatuses);
     statusesRef.current = toolStatuses;
@@ -140,24 +141,24 @@ export function CliToolsScreen() {
         }
     }, [fetchVersionInfo, toolStatuses]);
     // Keyboard handling
-    useInput((input, key) => {
+    useKeyboard((event) => {
         if (state.isSearching || state.modal)
             return;
-        if (key.upArrow || input === 'k') {
+        if (event.name === "up" || event.name === "k") {
             const newIndex = Math.max(0, cliToolsState.selectedIndex - 1);
-            dispatch({ type: 'CLITOOLS_SELECT', index: newIndex });
+            dispatch({ type: "CLITOOLS_SELECT", index: newIndex });
         }
-        else if (key.downArrow || input === 'j') {
+        else if (event.name === "down" || event.name === "j") {
             const newIndex = Math.min(toolStatuses.length - 1, cliToolsState.selectedIndex + 1);
-            dispatch({ type: 'CLITOOLS_SELECT', index: newIndex });
+            dispatch({ type: "CLITOOLS_SELECT", index: newIndex });
         }
-        else if (input === 'r') {
+        else if (event.name === "r") {
             handleRefresh();
         }
-        else if (input === 'a') {
+        else if (event.name === "a") {
             handleUpdateAll();
         }
-        else if (key.return) {
+        else if (event.name === "enter") {
             handleInstall();
         }
     });
@@ -177,8 +178,14 @@ export function CliToolsScreen() {
         if (!status)
             return;
         const { tool, installed, hasUpdate } = status;
-        const action = !installed ? 'Installing' : hasUpdate ? 'Updating' : 'Reinstalling';
-        const viaHomebrew = installed ? await isInstalledViaHomebrew(tool.name) : false;
+        const action = !installed
+            ? "Installing"
+            : hasUpdate
+                ? "Updating"
+                : "Reinstalling";
+        const viaHomebrew = installed
+            ? await isInstalledViaHomebrew(tool.name)
+            : false;
         let command;
         if (!installed) {
             command = tool.installCommand;
@@ -192,22 +199,22 @@ export function CliToolsScreen() {
         modal.loading(`${action} ${tool.displayName}...`);
         try {
             execSync(command, {
-                encoding: 'utf-8',
-                stdio: 'pipe',
-                shell: '/bin/bash',
+                encoding: "utf-8",
+                stdio: "pipe",
+                shell: "/bin/bash",
             });
             modal.hideModal();
             handleRefresh();
         }
         catch (error) {
             modal.hideModal();
-            await modal.message('Error', `Failed to ${action.toLowerCase()} ${tool.displayName}.\n\nTry running manually:\n${command}`, 'error');
+            await modal.message("Error", `Failed to ${action.toLowerCase()} ${tool.displayName}.\n\nTry running manually:\n${command}`, "error");
         }
     };
     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;
         }
         modal.loading(`Updating ${updatable.length} tool(s)...`);
@@ -218,9 +225,9 @@ export function CliToolsScreen() {
                 : status.tool.installCommand;
             try {
                 execSync(command, {
-                    encoding: 'utf-8',
-                    stdio: 'pipe',
-                    shell: '/bin/bash',
+                    encoding: "utf-8",
+                    stdio: "pipe",
+                    shell: "/bin/bash",
                 });
             }
             catch {
@@ -234,35 +241,34 @@ export function CliToolsScreen() {
     const selectedStatus = toolStatuses[cliToolsState.selectedIndex];
     const renderDetail = () => {
         if (!selectedStatus) {
-            return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx(Text, { color: "gray", children: "Select a tool to see details" }) }));
+            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: [_jsxs(Text, { bold: true, color: "cyan", children: ["\u2699 ", tool.displayName] }), hasUpdate && _jsx(Text, { color: "yellow", children: " \u2B06" })] }), _jsx(Text, { color: "gray", children: tool.description }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Status    " }), !installed ? (_jsx(Text, { color: "gray", children: "\u25CB Not installed" })) : checking ? (_jsx(Text, { color: "green", children: "\u25CF Checking..." })) : hasUpdate ? (_jsx(Text, { color: "yellow", children: "\u25CF Update available" })) : (_jsx(Text, { color: "green", children: "\u25CF Up to date" }))] }), installedVersion && (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Installed " }), _jsxs(Text, { color: "green", children: ["v", installedVersion] })] })), latestVersion && (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Latest    " }), _jsxs(Text, { color: "white", children: ["v", latestVersion] })] })), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "Website   " }), _jsx(Text, { color: "blue", children: tool.website })] })] }), _jsx(Box, { marginTop: 2, children: !installed ? (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: "green", color: "black", children: [' ', "Enter", ' '] }), _jsx(Text, { color: "gray", children: " Install" })] })) : hasUpdate ? (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: "yellow", color: "black", children: [' ', "Enter", ' '] }), _jsxs(Text, { color: "gray", children: [" Update to v", latestVersion] })] })) : (_jsxs(Box, { children: [_jsxs(Text, { backgroundColor: "gray", color: "white", children: [' ', "Enter", ' '] }), _jsx(Text, { color: "gray", children: " Reinstall" })] })) })] }));
+        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: "blue", 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';
+            icon = "○";
+            iconColor = "gray";
         }
         else if (hasUpdate) {
-            icon = '⬆';
-            iconColor = 'yellow';
+            icon = "⬆";
+            iconColor = "yellow";
         }
         else {
-            icon = '●';
-            iconColor = 'green';
+            icon = "●";
+            iconColor = "green";
         }
-        const versionText = installedVersion ? `v${installedVersion}` : '';
-        return isSelected ? (_jsxs(Text, { backgroundColor: "magenta", color: "white", wrap: "truncate", children: [' ', icon, " ", tool.displayName, " ", versionText, checking ? '...' : '', ' '] })) : (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: iconColor, children: icon }), _jsxs(Text, { color: "white", children: [" ", tool.displayName] }), versionText && _jsxs(Text, { color: "green", children: [" ", versionText] }), checking && _jsx(Text, { color: "gray", children: "..." })] }));
+        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(_Fragment, { children: [_jsx(Text, { color: "gray", children: "Installed: " }), _jsxs(Text, { color: "cyan", children: [installedCount, "/", toolStatuses.length] }), updateCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u2502 Updates: " }), _jsx(Text, { color: "yellow", children: updateCount })] }))] }));
+    const installedCount = toolStatuses.filter((s) => s.installed).length;
+    const updateCount = toolStatuses.filter((s) => s.hasUpdate).length;
+    const statusContent = (_jsxs(_Fragment, { children: [_jsx("text", { fg: "gray", children: "Installed: " }), _jsxs("text", { fg: "cyan", children: [installedCount, "/", toolStatuses.length] }), updateCount > 0 && (_jsxs(_Fragment, { children: [_jsx("text", { fg: "gray", children: " \u2502 Updates: " }), _jsx("text", { 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() }));
 }
 export default CliToolsScreen;
-//# sourceMappingURL=CliToolsScreen.js.map