claudeup 1.8.0 → 3.3.0

package/src/ui/screens/EnvVarsScreen.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useCallback, useState } from "react";
+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 {
+	getMcpEnvVars,
+	setMcpEnvVar,
+	removeMcpEnvVar,
+} from "../../services/claude-settings.js";
+
+interface EnvVar {
+	name: string;
+	value: string;
+}
+
+export function EnvVarsScreen() {
+	const { state, dispatch } = useApp();
+	const { envVars } = state;
+	const modal = useModal();
+	const dimensions = useDimensions();
+
+	const [envVarList, setEnvVarList] = useState<EnvVar[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+
+	// Fetch data
+	const fetchData = useCallback(async () => {
+		setIsLoading(true);
+		try {
+			const vars = await getMcpEnvVars(state.projectPath);
+			const list = Object.entries(vars).map(([name, value]) => ({
+				name,
+				value,
+			}));
+			setEnvVarList(list);
+		} catch (error) {
+			setEnvVarList([]);
+		}
+		setIsLoading(false);
+	}, [state.projectPath]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	// Keyboard handling
+	useKeyboard((event) => {
+		if (state.isSearching || state.modal) return;
+
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, envVars.selectedIndex - 1);
+			dispatch({ type: "ENVVARS_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(
+				Math.max(0, envVarList.length - 1),
+				envVars.selectedIndex + 1,
+			);
+			dispatch({ type: "ENVVARS_SELECT", index: newIndex });
+		} else if (event.name === "a") {
+			handleAdd();
+		} else if (event.name === "e" || event.name === "enter") {
+			handleEdit();
+		} else if (event.name === "d") {
+			handleDelete();
+		}
+	});
+
+	const handleAdd = async () => {
+		const varName = await modal.input("Add Variable", "Variable name:");
+		if (varName === null || !varName.trim()) return;
+
+		const cleanName = varName
+			.trim()
+			.toUpperCase()
+			.replace(/[^A-Z0-9_]/g, "_");
+
+		// Check if already exists
+		const existing = envVarList.find((v) => v.name === cleanName);
+		if (existing) {
+			const overwrite = await modal.confirm(
+				`${cleanName} exists`,
+				"Overwrite existing value?",
+			);
+			if (!overwrite) return;
+		}
+
+		const value = await modal.input(`Set ${cleanName}`, "Value:");
+		if (value === null) return;
+
+		modal.loading(`Adding ${cleanName}...`);
+		try {
+			await setMcpEnvVar(cleanName, value, state.projectPath);
+			modal.hideModal();
+			await modal.message(
+				"Added",
+				`${cleanName} added.\nRestart Claude Code to apply.`,
+				"success",
+			);
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to add: ${error}`, "error");
+		}
+	};
+
+	const handleEdit = async () => {
+		if (envVarList.length === 0) return;
+		const envVar = envVarList[envVars.selectedIndex];
+		if (!envVar) return;
+
+		const newValue = await modal.input(
+			`Edit ${envVar.name}`,
+			"New value:",
+			envVar.value,
+		);
+		if (newValue === null) return;
+
+		modal.loading(`Updating ${envVar.name}...`);
+		try {
+			await setMcpEnvVar(envVar.name, newValue, state.projectPath);
+			modal.hideModal();
+			await modal.message(
+				"Updated",
+				`${envVar.name} updated.\nRestart Claude Code to apply.`,
+				"success",
+			);
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to update: ${error}`, "error");
+		}
+	};
+
+	const handleDelete = async () => {
+		if (envVarList.length === 0) return;
+		const envVar = envVarList[envVars.selectedIndex];
+		if (!envVar) return;
+
+		const confirmed = await modal.confirm(
+			`Delete ${envVar.name}?`,
+			"This will remove the variable from configuration.",
+		);
+
+		if (confirmed) {
+			modal.loading(`Deleting ${envVar.name}...`);
+			try {
+				await removeMcpEnvVar(envVar.name, state.projectPath);
+				modal.hideModal();
+				await modal.message("Deleted", `${envVar.name} removed.`, "success");
+				fetchData();
+			} catch (error) {
+				modal.hideModal();
+				await modal.message("Error", `Failed to delete: ${error}`, "error");
+			}
+		}
+	};
+
+	// Get selected item
+	const selectedVar = envVarList[envVars.selectedIndex];
+
+	const renderDetail = () => {
+		if (isLoading) {
+			return <text fg="gray">Loading environment variables...</text>;
+		}
+
+		if (envVarList.length === 0) {
+			return (
+				<box flexDirection="column">
+					<text fg="gray">No environment variables configured.</text>
+					<box marginTop={1}>
+						<text fg="green">Press 'a' to add a new variable</text>
+					</box>
+				</box>
+			);
+		}
+
+		if (!selectedVar) {
+			return <text fg="gray">Select a variable to see details</text>;
+		}
+
+		return (
+			<box flexDirection="column">
+				<text fg="cyan">
+					<strong>{selectedVar.name}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg="gray">Value: </text>
+					<text>
+						{selectedVar.value.length > 50
+							? selectedVar.value.slice(0, 50) + "..."
+							: selectedVar.value}
+					</text>
+				</box>
+				<box marginTop={2} flexDirection="column">
+					<box>
+						<text bg="magenta" fg="white">
+							{" "}
+							Enter{" "}
+						</text>
+						<text fg="gray"> Edit value</text>
+					</box>
+					<box marginTop={1}>
+						<text bg="red" fg="white">
+							{" "}
+							d{" "}
+						</text>
+						<text fg="gray"> Delete variable</text>
+					</box>
+				</box>
+			</box>
+		);
+	};
+
+	const renderListItem = (
+		envVar: EnvVar,
+		_idx: number,
+		isSelected: boolean,
+	) => {
+		const masked =
+			envVar.value.length > 20
+				? envVar.value.slice(0, 20) + "..."
+				: envVar.value;
+		return isSelected ? (
+			<text bg="magenta" fg="white">
+				{" "}
+				{envVar.name} = "{masked}"{" "}
+			</text>
+		) : (
+			<text>
+				<span fg="cyan">{envVar.name}</span>
+				<span fg="gray"> = "{masked}"</span>
+			</text>
+		);
+	};
+
+	const statusContent = (
+		<>
+			<text fg="gray">Variables: </text>
+			<text fg="cyan">{envVarList.length}</text>
+			<text fg="gray"> │ Location: </text>
+			<text fg="green">.claude/settings.local.json</text>
+		</>
+	);
+
+	return (
+		<ScreenLayout
+			title="claudeup Environment Variables"
+			currentScreen="env-vars"
+			statusLine={statusContent}
+			footerHints="↑↓:nav │ Enter/e:edit │ a:add │ d:delete"
+			listPanel={
+				envVarList.length === 0 ? (
+					<text fg="gray">No environment variables configured</text>
+				) : (
+					<ScrollableList
+						items={envVarList}
+						selectedIndex={envVars.selectedIndex}
+						renderItem={renderListItem}
+						maxHeight={dimensions.listPanelHeight}
+					/>
+				)
+			}
+			detailPanel={renderDetail()}
+		/>
+	);
+}
+
+export default EnvVarsScreen;

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

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useCallback, useState, useRef } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { useApp, useModal, useNavigation } from '../state/AppContext.js';
-import { useDimensions } from '../state/DimensionsContext.js';
-import { ScreenLayout } from '../components/layout/index.js';
-import { ScrollableList } from '../components/ScrollableList.js';
-import { searchMcpServers, formatDate } from '../../services/mcp-registry.js';
-import { addMcpServer, setAllowMcp } from '../../services/claude-settings.js';
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useCallback, useState, useRef } from "react";
+import { useApp, useModal, useNavigation } 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 { searchMcpServers, formatDate } from "../../services/mcp-registry.js";
+import { addMcpServer, setAllowMcp } from "../../services/claude-settings.js";
 /**
  * Deduplicate servers by name, keeping only the latest version.
  * Uses version string comparison, falling back to published_at date.
@@ -36,8 +36,8 @@ function deduplicateServers(servers) {
 function compareVersions(a, b) {
     // Try semver comparison first
     if (a.version && b.version) {
-        const aParts = a.version.split('.').map(n => parseInt(n, 10) || 0);
-        const bParts = b.version.split('.').map(n => parseInt(n, 10) || 0);
+        const aParts = a.version.split(".").map((n) => parseInt(n, 10) || 0);
+        const bParts = b.version.split(".").map((n) => parseInt(n, 10) || 0);
         for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
             const aVal = aParts[i] || 0;
             const bVal = bParts[i] || 0;
@@ -48,7 +48,7 @@ function compareVersions(a, b) {
     }
     // Fall back to published_at date
     if (a.published_at && b.published_at) {
-        return new Date(a.published_at).getTime() - new Date(b.published_at).getTime();
+        return (new Date(a.published_at).getTime() - new Date(b.published_at).getTime());
     }
     // If one has a date and other doesn't, prefer the one with date
     if (a.published_at && !b.published_at)
@@ -66,8 +66,10 @@ export function McpRegistryScreen() {
     const [servers, setServers] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
-    const [searchQuery, setSearchQuery] = useState(mcpRegistry.searchQuery || '');
-    const isSearchActive = state.isSearching && state.currentRoute.screen === 'mcp-registry' && !state.modal;
+    const [searchQuery, setSearchQuery] = useState(mcpRegistry.searchQuery || "");
+    const isSearchActive = state.isSearching &&
+        state.currentRoute.screen === "mcp-registry" &&
+        !state.modal;
     const searchTimeoutRef = useRef(null);
     // Load servers
     const loadServers = useCallback(async (query) => {
@@ -76,14 +78,14 @@ export function McpRegistryScreen() {
         try {
             const response = await searchMcpServers({ query, limit: 50 });
             if (!response || !Array.isArray(response.servers)) {
-                throw new Error('Invalid response from MCP Registry API');
+                throw new Error("Invalid response from MCP Registry API");
             }
             // Deduplicate to show only latest version of each server
             const deduplicated = deduplicateServers(response.servers);
             setServers(deduplicated);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to load servers');
+            setError(err instanceof Error ? err.message : "Failed to load servers");
             setServers([]);
         }
         setIsLoading(false);
@@ -106,36 +108,36 @@ export function McpRegistryScreen() {
         };
     }, []);
     // Keyboard handling
-    useInput((input, key) => {
+    useKeyboard((event) => {
         // Handle search mode
         if (isSearchActive) {
-            if (key.escape) {
-                dispatch({ type: 'SET_SEARCHING', isSearching: false });
+            if (event.name === "escape") {
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
             }
-            else if (key.return) {
+            else if (event.name === "enter") {
                 // Exit search mode and stay on list for navigation
-                dispatch({ type: 'SET_SEARCHING', isSearching: false });
+                dispatch({ type: "SET_SEARCHING", isSearching: false });
             }
-            else if (key.upArrow) {
+            else if (event.name === "up") {
                 // Allow navigation while searching
                 const newIndex = Math.max(0, mcpRegistry.selectedIndex - 1);
-                dispatch({ type: 'MCPREGISTRY_SELECT', index: newIndex });
+                dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
             }
-            else if (key.downArrow) {
+            else if (event.name === "down") {
                 // Allow navigation while searching
                 const newIndex = Math.min(Math.max(0, servers.length - 1), mcpRegistry.selectedIndex + 1);
-                dispatch({ type: 'MCPREGISTRY_SELECT', index: newIndex });
+                dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
             }
-            else if (key.backspace || key.delete) {
+            else if (event.name === "backspace" || event.name === "delete") {
                 const newQuery = searchQuery.slice(0, -1);
                 setSearchQuery(newQuery);
-                dispatch({ type: 'MCPREGISTRY_SEARCH', query: newQuery });
+                dispatch({ type: "MCPREGISTRY_SEARCH", query: newQuery });
                 debouncedSearch(newQuery);
             }
-            else if (input && !key.ctrl && !key.meta) {
-                const newQuery = searchQuery + input;
+            else if (event.name.length === 1 && !event.ctrl && !event.meta) {
+                const newQuery = searchQuery + event.name;
                 setSearchQuery(newQuery);
-                dispatch({ type: 'MCPREGISTRY_SEARCH', query: newQuery });
+                dispatch({ type: "MCPREGISTRY_SEARCH", query: newQuery });
                 debouncedSearch(newQuery);
             }
             return;
@@ -143,26 +145,26 @@ export function McpRegistryScreen() {
         if (state.modal)
             return;
         // Start search with /
-        if (input === '/') {
-            dispatch({ type: 'SET_SEARCHING', isSearching: true });
+        if (event.name === "/") {
+            dispatch({ type: "SET_SEARCHING", isSearching: true });
             return;
         }
         // Navigation
-        if (key.upArrow || input === 'k') {
+        if (event.name === "up" || event.name === "k") {
             const newIndex = Math.max(0, mcpRegistry.selectedIndex - 1);
-            dispatch({ type: 'MCPREGISTRY_SELECT', index: newIndex });
+            dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
         }
-        else if (key.downArrow || input === 'j') {
+        else if (event.name === "down" || event.name === "j") {
             const newIndex = Math.min(Math.max(0, servers.length - 1), mcpRegistry.selectedIndex + 1);
-            dispatch({ type: 'MCPREGISTRY_SELECT', index: newIndex });
+            dispatch({ type: "MCPREGISTRY_SELECT", index: newIndex });
         }
-        else if (input === 'l') {
-            navigateToScreen('mcp');
+        else if (event.name === "l") {
+            navigateToScreen("mcp");
         }
-        else if (input === 'R') {
+        else if (event.name === "R") {
             loadServers(searchQuery);
         }
-        else if (key.return) {
+        else if (event.name === "enter") {
             handleInstall();
         }
     });
@@ -171,7 +173,7 @@ export function McpRegistryScreen() {
         if (!server)
             return;
         const config = {
-            type: 'http',
+            type: "http",
             url: server.url,
         };
         modal.loading(`Installing ${server.name}...`);
@@ -179,48 +181,47 @@ export function McpRegistryScreen() {
             await setAllowMcp(true, state.projectPath);
             await addMcpServer(server.name, config, state.projectPath);
             modal.hideModal();
-            await modal.message('Installed', `${server.name} has been configured.\n\nRestart Claude Code to activate.`, 'success');
+            await modal.message("Installed", `${server.name} has been configured.\n\nRestart Claude Code to activate.`, "success");
         }
         catch (error) {
             modal.hideModal();
-            await modal.message('Error', `Failed to install: ${error}`, 'error');
+            await modal.message("Error", `Failed to install: ${error}`, "error");
         }
     };
     // Get selected server
     const selectedServer = servers[mcpRegistry.selectedIndex];
     const renderDetail = () => {
         if (isLoading) {
-            return _jsx(Text, { color: "gray", children: "Loading..." });
+            return _jsx("text", { fg: "gray", children: "Loading..." });
         }
         if (error) {
-            return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+            return _jsxs("text", { fg: "red", children: ["Error: ", error] });
         }
         if (!selectedServer) {
-            return _jsx(Text, { color: "gray", children: "Select a server to see details" });
+            return _jsx("text", { fg: "gray", children: "Select a server to see details" });
         }
         const dateDisplay = selectedServer.published_at
             ? formatDate(selectedServer.published_at)
-            : 'unknown';
+            : "unknown";
         const versionDisplay = selectedServer.version
             ? `v${selectedServer.version}`
-            : 'unknown';
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "magenta", children: selectedServer.name }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: selectedServer.short_description }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, children: "Version: " }), _jsx(Text, { color: "green", children: versionDisplay })] }), _jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Published: " }), _jsx(Text, { color: "cyan", children: dateDisplay })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "URL:" }), _jsx(Text, { color: "cyan", children: selectedServer.url })] }), selectedServer.source_code_url && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Source:" }), _jsx(Text, { color: "gray", children: selectedServer.source_code_url })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "green", children: "Press Enter to install" }) })] }));
+            : "unknown";
+        return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "magenta", children: _jsx("strong", { children: selectedServer.name }) }), _jsx("box", { marginTop: 1, children: _jsx("text", { children: selectedServer.short_description }) }), _jsxs("box", { marginTop: 1, children: [_jsx("text", { children: _jsx("strong", { children: "Version: " }) }), _jsx("text", { fg: "green", children: versionDisplay })] }), _jsxs("box", { children: [_jsx("text", { children: _jsx("strong", { children: "Published: " }) }), _jsx("text", { fg: "cyan", children: dateDisplay })] }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { children: _jsx("strong", { children: "URL:" }) }), _jsx("text", { fg: "cyan", children: selectedServer.url })] }), selectedServer.source_code_url && (_jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { children: _jsx("strong", { children: "Source:" }) }), _jsx("text", { fg: "gray", children: selectedServer.source_code_url })] })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "green", children: "Press Enter to install" }) })] }));
     };
     const renderListItem = (server, _idx, isSelected) => {
-        const version = server.version ? ` v${server.version}` : '';
-        return isSelected ? (_jsxs(Text, { backgroundColor: "magenta", color: "white", wrap: "truncate", children: [' ', server.name, version, ' '] })) : (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { bold: true, children: server.name }), _jsx(Text, { color: "green", children: version })] }));
+        const version = server.version ? ` v${server.version}` : "";
+        return isSelected ? (_jsxs("text", { bg: "magenta", fg: "white", children: [" ", server.name, version, " "] })) : (_jsxs("text", { children: [_jsx("span", { children: _jsx("strong", { children: server.name }) }), _jsx("span", { fg: "green", children: version })] }));
     };
     // Footer hints
     const footerHints = isSearchActive
-        ? 'Type to search │ ↑↓:nav │ Enter:done │ Esc:cancel'
-        : '↑↓:nav │ Enter:install │ /:search │ R:refresh │ l:local';
+        ? "Type to search │ ↑↓:nav │ Enter:done │ Esc:cancel"
+        : "↑↓:nav │ Enter:install │ /:search │ R:refresh │ l:local";
     // Status for search placeholder
     const searchPlaceholder = `${servers.length} servers │ / to search`;
     return (_jsx(ScreenLayout, { title: "claudeup MCP Registry", subtitle: "Powered by MCP Registry", currentScreen: "mcp-registry", search: {
             isActive: isSearchActive,
             query: searchQuery,
             placeholder: searchPlaceholder,
-        }, footerHints: footerHints, listPanel: isLoading ? (_jsx(Text, { color: "gray", children: "Loading..." })) : error ? (_jsxs(Text, { color: "red", children: ["Error: ", error] })) : servers.length === 0 ? (_jsx(Text, { color: "gray", children: "No servers found" })) : (_jsx(ScrollableList, { items: servers, selectedIndex: mcpRegistry.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
+        }, footerHints: footerHints, listPanel: isLoading ? (_jsx("text", { fg: "gray", children: "Loading..." })) : error ? (_jsxs("text", { fg: "red", children: ["Error: ", error] })) : servers.length === 0 ? (_jsx("text", { fg: "gray", children: "No servers found" })) : (_jsx(ScrollableList, { items: servers, selectedIndex: mcpRegistry.selectedIndex, renderItem: renderListItem, maxHeight: dimensions.listPanelHeight })), detailPanel: renderDetail() }));
 }
 export default McpRegistryScreen;
-//# sourceMappingURL=McpRegistryScreen.js.map