claudeup 1.8.0 → 3.3.0

package/src/ui/screens/McpScreen.tsx

@@ -0,0 +1,392 @@
+import React, { useEffect, useCallback, useMemo } 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 {
+	getMcpServersByCategory,
+	getCategoryDisplayName,
+	categoryOrder,
+} from "../../data/mcp-servers.js";
+import {
+	addMcpServer,
+	removeMcpServer,
+	getInstalledMcpServers,
+	getEnabledMcpServers,
+} from "../../services/claude-settings.js";
+import type { McpServer, McpServerConfig } from "../../types/index.js";
+
+interface ListItem {
+	label: string;
+	server?: McpServer;
+	isCategory?: boolean;
+}
+
+export function McpScreen() {
+	const { state, dispatch } = useApp();
+	const { mcp } = state;
+	const modal = useModal();
+	const { navigateToScreen } = useNavigation();
+	const dimensions = useDimensions();
+
+	// Fetch data
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "MCP_DATA_LOADING" });
+		try {
+			const serversByCategory = getMcpServersByCategory();
+			const installedServers = await getInstalledMcpServers(state.projectPath);
+			const enabledServers = await getEnabledMcpServers(state.projectPath);
+
+			// Build flat list of all servers
+			const servers: McpServer[] = [];
+			for (const category of categoryOrder) {
+				const categoryServers = serversByCategory[category];
+				if (categoryServers) {
+					servers.push(...categoryServers);
+				}
+			}
+
+			// Convert McpServerConfig to boolean - server exists = installed
+			const installedAsBooleans: Record<string, boolean> = {};
+			for (const name of Object.keys(installedServers)) {
+				installedAsBooleans[name] = true;
+			}
+
+			dispatch({
+				type: "MCP_DATA_SUCCESS",
+				servers,
+				installedServers: { ...installedAsBooleans, ...enabledServers },
+			});
+		} catch (error) {
+			dispatch({
+				type: "MCP_DATA_ERROR",
+				error: error instanceof Error ? error : new Error(String(error)),
+			});
+		}
+	}, [dispatch, state.projectPath]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	// Build list items with categories
+	const allListItems = useMemo((): ListItem[] => {
+		if (mcp.servers.status !== "success") return [];
+
+		const serversByCategory = getMcpServersByCategory();
+		const items: ListItem[] = [];
+
+		for (const category of categoryOrder) {
+			const servers = serversByCategory[category];
+			if (!servers || servers.length === 0) continue;
+
+			items.push({
+				label: getCategoryDisplayName(category),
+				isCategory: true,
+			});
+
+			for (const server of servers) {
+				const isInstalled = mcp.installedServers[server.name] !== undefined;
+				const isEnabled = mcp.installedServers[server.name] === true;
+
+				let status = "○";
+				if (isInstalled && isEnabled) {
+					status = "●";
+				} else if (isInstalled) {
+					status = "●";
+				}
+
+				const configTag = server.requiresConfig ? " *" : "";
+
+				items.push({
+					label: `  ${status} ${server.name}${configTag}`,
+					server,
+				});
+			}
+		}
+
+		return items;
+	}, [mcp.servers.status, mcp.installedServers]);
+
+	// Use all items - search goes to global registry, not local filter
+	const listItems = allListItems;
+
+	// Keyboard handling
+	useKeyboard((event) => {
+		if (state.isSearching || state.modal) return;
+
+		// Start search - navigate to registry with search mode active
+		if (event.name === "/") {
+			dispatch({ type: "SET_SEARCHING", isSearching: true });
+			navigateToScreen("mcp-registry");
+			return;
+		}
+
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, mcp.selectedIndex - 1);
+			dispatch({ type: "MCP_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(listItems.length - 1, mcp.selectedIndex + 1);
+			dispatch({ type: "MCP_SELECT", index: newIndex });
+		} else if (event.name === "r") {
+			navigateToScreen("mcp-registry");
+		} else if (event.name === "enter") {
+			handleSelect();
+		}
+	});
+
+	const handleSelect = async () => {
+		const item = listItems[mcp.selectedIndex];
+		if (!item || item.isCategory || !item.server) return;
+
+		const server = item.server;
+		const isInstalled = mcp.installedServers[server.name] !== undefined;
+
+		if (isInstalled) {
+			const confirmed = await modal.confirm(
+				`Remove ${server.name}?`,
+				"This will remove the MCP server configuration.",
+			);
+			if (confirmed) {
+				modal.loading(`Removing ${server.name}...`);
+				try {
+					await removeMcpServer(server.name, state.projectPath);
+					modal.hideModal();
+					await modal.message(
+						"Removed",
+						`${server.name} has been removed.`,
+						"success",
+					);
+					fetchData();
+				} catch (error) {
+					modal.hideModal();
+					await modal.message("Error", `Failed to remove: ${error}`, "error");
+				}
+			}
+		} else {
+			// Install server
+			await installMcpServer(server);
+		}
+	};
+
+	const installMcpServer = async (server: McpServer) => {
+		let config: McpServerConfig;
+
+		if (server.type === "http") {
+			config = { type: "http", url: server.url! };
+		} else {
+			config = {
+				command: server.command!,
+				args: server.args ? [...server.args] : undefined,
+				env: server.env ? { ...server.env } : undefined,
+			};
+		}
+
+		// Handle configuration fields if required
+		if (server.requiresConfig && server.configFields) {
+			for (const field of server.configFields) {
+				const envVarName = field.envVar || field.name;
+				const existingValue = process.env[envVarName];
+
+				if (existingValue) {
+					const useExisting = await modal.confirm(
+						`Use ${envVarName}?`,
+						`${envVarName} is set in your environment. Use the existing value?`,
+					);
+					if (useExisting) {
+						config.env = config.env || {};
+						config.env[envVarName] = `\${${envVarName}}`;
+						continue;
+					}
+				}
+
+				const value = await modal.input(
+					`Configure ${server.name}`,
+					`${field.label}${field.required ? " (required)" : ""}:`,
+					field.default,
+				);
+
+				if (value === null) return; // User cancelled
+
+				if (field.required && !value) {
+					await modal.message(
+						"Required Field",
+						`${field.label} is required.`,
+						"error",
+					);
+					return;
+				}
+
+				if (value) {
+					config.env = config.env || {};
+					config.env[envVarName] = value;
+				}
+			}
+		}
+
+		modal.loading(`Installing ${server.name}...`);
+		try {
+			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",
+			);
+			fetchData();
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to install: ${error}`, "error");
+		}
+	};
+
+	// Get selected item
+	const selectedItem = listItems[mcp.selectedIndex];
+
+	const renderDetail = () => {
+		if (mcp.servers.status === "loading") {
+			return <text fg="gray">Loading MCP servers...</text>;
+		}
+
+		if (!selectedItem || selectedItem.isCategory || !selectedItem.server) {
+			return (
+				<box
+					flexDirection="column"
+					alignItems="center"
+					justifyContent="center"
+					flexGrow={1}
+				>
+					<text fg="gray">Select a server to see details</text>
+				</box>
+			);
+		}
+
+		const server = selectedItem.server;
+		const isInstalled = mcp.installedServers[server.name] !== undefined;
+		const isEnabled = mcp.installedServers[server.name] === true;
+
+		return (
+			<box flexDirection="column">
+				<box marginBottom={1}>
+					<text fg="cyan"><strong>⚡ {server.name}</strong></text>
+					{server.requiresConfig && <text fg="yellow"> ⚙</text>}
+				</box>
+
+				<text fg="gray">{server.description}</text>
+
+				<box marginTop={1} flexDirection="column">
+					<box>
+						<text fg="gray">Status </text>
+						{isInstalled && isEnabled ? (
+							<text fg="green">● Installed</text>
+						) : isInstalled ? (
+							<text fg="yellow">● Disabled</text>
+						) : (
+							<text fg="gray">○ Not installed</text>
+						)}
+					</box>
+					<box>
+						<text fg="gray">Type </text>
+						<text fg="white">
+							{server.type === "http" ? "HTTP" : "Command"}
+						</text>
+					</box>
+					{server.type === "http" ? (
+						<box>
+							<text fg="gray">URL </text>
+							<text fg="blue">{server.url}</text>
+						</box>
+					) : (
+						<box>
+							<text fg="gray">Command </text>
+							<text fg="cyan">{server.command}</text>
+						</box>
+					)}
+					{server.requiresConfig && (
+						<box>
+							<text fg="gray">Config </text>
+							<text fg="yellow">
+								{server.configFields?.length || 0} fields required
+							</text>
+						</box>
+					)}
+				</box>
+
+				<box marginTop={2}>
+					{isInstalled ? (
+						<box>
+							<text bg="red" fg="white"> Enter </text>
+							<text fg="gray"> Remove server</text>
+						</box>
+					) : (
+						<box>
+							<text bg="green" fg="black"> Enter </text>
+							<text fg="gray"> Install server</text>
+						</box>
+					)}
+				</box>
+			</box>
+		);
+	};
+
+	const renderListItem = (
+		item: ListItem,
+		_idx: number,
+		isSelected: boolean,
+	) => {
+		// Category header
+		if (item.isCategory) {
+			return (
+				<text fg="magenta"><strong>▸ {item.label}</strong></text>
+			);
+		}
+
+		// Server item
+		const server = item.server;
+		const isInstalled =
+			server && mcp.installedServers[server.name] !== undefined;
+		const icon = isInstalled ? "●" : "○";
+		const iconColor = isInstalled ? "green" : "gray";
+
+		return isSelected ? (
+			<text bg="magenta" fg="white">
+				{" "}
+				{icon} {server?.name || ""}{" "}
+			</text>
+		) : (
+			<text>
+				<span fg={iconColor}>{icon}</span>
+				<span fg="white"> {server?.name || ""}</span>
+				{server?.requiresConfig && <span fg="yellow"> ⚙</span>}
+			</text>
+		);
+	};
+
+	// Calculate status counts
+	const installedCount = Object.keys(mcp.installedServers).length;
+	const enabledCount = Object.values(mcp.installedServers).filter(
+		(v) => v === true,
+	).length;
+	const subtitle = `${enabledCount} enabled │ ${installedCount} configured │ / to search`;
+
+	return (
+		<ScreenLayout
+			title="claudeup MCP Servers"
+			subtitle={subtitle}
+			currentScreen="mcp"
+			footerHints="↑↓:nav │ Enter:toggle │ /:search │ r:registry"
+			listPanel={
+				<ScrollableList
+					items={listItems}
+					selectedIndex={mcp.selectedIndex}
+					renderItem={renderListItem}
+					maxHeight={dimensions.listPanelHeight}
+				/>
+			}
+			detailPanel={renderDetail()}
+		/>
+	);
+}
+
+export default McpScreen;

package/src/ui/screens/ModelSelectorScreen.js

@@ -0,0 +1,292 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import { useApp } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+const RECENT_MODELS = [
+    {
+        id: "recent-1",
+        type: "model",
+        label: "MoonshotAI: Kimi K2 0905 (exacto)",
+        provider: "OpenRouter",
+        modelId: "moonshot/kimi-k2-0905",
+        configured: true,
+    },
+];
+const ANTHROPIC_MODELS = [
+    {
+        id: "claude-opus-4",
+        type: "model",
+        label: "Claude Opus 4",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-opus-4",
+        configured: true,
+    },
+    {
+        id: "claude-sonnet-4",
+        type: "model",
+        label: "Claude Sonnet 4",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-sonnet-4",
+        configured: true,
+    },
+    {
+        id: "claude-opus-4.1",
+        type: "model",
+        label: "Claude Opus 4.1",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-opus-4.1",
+        configured: true,
+    },
+    {
+        id: "claude-opus-4.5",
+        type: "model",
+        label: "Claude Opus 4.5",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-opus-4.5",
+        configured: true,
+    },
+    {
+        id: "claude-3.5-haiku",
+        type: "model",
+        label: "Claude 3.5 Haiku",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-3.5-haiku",
+        configured: true,
+    },
+    {
+        id: "claude-4.5-haiku",
+        type: "model",
+        label: "Claude 4.5 Haiku",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-4.5-haiku",
+        configured: true,
+    },
+    {
+        id: "claude-3.7-sonnet",
+        type: "model",
+        label: "Claude 3.7 Sonnet",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-3.7-sonnet",
+        configured: true,
+    },
+    {
+        id: "claude-sonnet-4.5",
+        type: "model",
+        label: "Claude Sonnet 4.5",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-sonnet-4.5",
+        configured: true,
+    },
+    {
+        id: "claude-3.5-sonnet-new",
+        type: "model",
+        label: "Claude 3.5 Sonnet (New)",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-3-5-sonnet-new",
+        configured: true,
+    },
+    {
+        id: "claude-3.5-sonnet-old",
+        type: "model",
+        label: "Claude 3.5 Sonnet (Old)",
+        provider: "Anthropic",
+        modelId: "anthropic/claude-3-5-sonnet-old",
+        configured: true,
+    },
+];
+const OPENAI_MODELS = [
+    {
+        id: "gpt-5-codex",
+        type: "model",
+        label: "GPT-5 Codex",
+        provider: "OpenAI",
+        modelId: "openai/gpt-5-codex",
+        configured: true,
+    },
+    {
+        id: "gpt-5.1-codex",
+        type: "model",
+        label: "GPT-5.1 Codex",
+        provider: "OpenAI",
+        modelId: "openai/gpt-5.1-codex",
+        configured: true,
+    },
+    {
+        id: "gpt-5.1-codex-max",
+        type: "model",
+        label: "GPT-5.1 Codex Max",
+        provider: "OpenAI",
+        modelId: "openai/gpt-5.1-codex-max",
+        configured: true,
+    },
+    {
+        id: "gpt-5.1-codex-mini",
+        type: "model",
+        label: "GPT-5.1 Codex Mini",
+        provider: "OpenAI",
+        modelId: "openai/gpt-5.1-codex-mini",
+        configured: true,
+    },
+];
+const XAI_MODELS = [
+    {
+        id: "grok-code-fast",
+        type: "model",
+        label: "Grok Code Fast",
+        provider: "xAI",
+        modelId: "xai/grok-code-fast",
+        configured: false,
+    }, // Configured check missing in reference image? No, line is very faint. Assuming not configured or just separator missing.
+];
+export function ModelSelectorScreen() {
+    const { state, dispatch } = useApp();
+    const { modelSelector } = state;
+    const dimensions = useDimensions();
+    // Combine items into display list
+    const allItems = useMemo(() => {
+        return [
+            {
+                id: "header-recent",
+                type: "header",
+                label: "Recently used",
+                provider: "OpenRouter",
+            }, // Provider column used for right text
+            ...RECENT_MODELS,
+            {
+                id: "header-anthropic",
+                type: "header",
+                label: "Anthropic",
+                configured: true,
+            },
+            ...ANTHROPIC_MODELS,
+            {
+                id: "header-openai",
+                type: "header",
+                label: "OpenAI",
+                configured: true,
+            },
+            ...OPENAI_MODELS,
+            { id: "header-xai", type: "header", label: "xAI" },
+            ...XAI_MODELS,
+        ];
+    }, []);
+    // Filter items
+    const filteredItems = useMemo(() => {
+        if (!modelSelector.searchQuery)
+            return allItems;
+        // Filter only models
+        const models = allItems.filter((i) => i.type === "model");
+        const fuzzyResults = fuzzyFilter(models, modelSelector.searchQuery, (item) => item.label);
+        // If searching, just show matched models without headers to keep it clean, or keep hierarchy?
+        // "Switch Model" TUI usually flattens on search.
+        return fuzzyResults.map((r) => ({ ...r.item, _matches: r.matches }));
+    }, [allItems, modelSelector.searchQuery]);
+    // Ensure selection is valid (not a header) on mount or search change
+    useEffect(() => {
+        // If current selection is a header or out of bounds, find first model
+        const current = filteredItems[modelSelector.selectedIndex];
+        if (!current || current.type === "header") {
+            const firstModelIndex = filteredItems.findIndex((i) => i.type === "model");
+            if (firstModelIndex !== -1 &&
+                firstModelIndex !== modelSelector.selectedIndex) {
+                dispatch({ type: "MODEL_SELECTOR_SELECT", index: firstModelIndex });
+            }
+        }
+    }, [filteredItems, modelSelector.selectedIndex, dispatch]);
+    // Handle keyboard
+    useKeyboard((event) => {
+        // Search input handling
+        if (event.name === "backspace" || event.name === "delete") {
+            dispatch({
+                type: "MODEL_SELECTOR_SET_SEARCH",
+                query: modelSelector.searchQuery.slice(0, -1),
+            });
+            return;
+        }
+        // Toggle Task Size
+        if (event.name === "tab") {
+            const newSize = modelSelector.taskSize === "large" ? "small" : "large";
+            dispatch({ type: "MODEL_SELECTOR_SET_TASK_SIZE", size: newSize });
+            return;
+        }
+        // Navigation
+        if (event.name === "up" || (event.ctrl && event.name === "p")) {
+            // Standard navigation
+            let newIndex = modelSelector.selectedIndex - 1;
+            // Skip headers while moving up
+            while (newIndex >= 0 && filteredItems[newIndex]?.type === "header") {
+                newIndex--;
+            }
+            if (newIndex >= 0) {
+                dispatch({ type: "MODEL_SELECTOR_SELECT", index: newIndex });
+            }
+            return;
+        }
+        if (event.name === "down" || (event.ctrl && event.name === "n")) {
+            let newIndex = modelSelector.selectedIndex + 1;
+            // Skip headers while moving down
+            while (newIndex < filteredItems.length &&
+                filteredItems[newIndex]?.type === "header") {
+                newIndex++;
+            }
+            if (newIndex < filteredItems.length) {
+                dispatch({ type: "MODEL_SELECTOR_SELECT", index: newIndex });
+            }
+            return;
+        }
+        if (event.name === "enter" || event.name === "return") {
+            // Just log selection for now or exit
+            // dispatch({ type: 'NAVIGATE', route: { screen: 'plugins' } });
+            return;
+        }
+        // Regular text input (single character keys)
+        if (event.name.length === 1 &&
+            !event.ctrl &&
+            !event.shift) {
+            dispatch({
+                type: "MODEL_SELECTOR_SET_SEARCH",
+                query: modelSelector.searchQuery + event.name,
+            });
+            return;
+        }
+    });
+    // Render list item
+    const renderItem = (item, _index, isSelected) => {
+        if (item.type === "header") {
+            // Header style: "Name ----------------------------- Status"
+            const status = item.configured ? "✔ Configured" : "";
+            return (_jsxs("box", { margin: 0, children: [_jsxs("text", { fg: "gray", children: [item.label, " "] }), _jsx("text", { fg: "#888888", children: "\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF\u23AF" }), status && _jsxs("text", { fg: "green", children: [" ", status] }), item.provider && _jsxs("text", { fg: "blue", children: [" ", item.provider] })] }));
+        }
+        // Model item
+        // Matches highlighting
+        const matches = item._matches;
+        const labelSegment = matches ? highlightMatches(item.label, matches) : null;
+        const Label = () => (_jsx("text", { fg: isSelected ? "white" : "white", children: labelSegment
+                ? labelSegment.map((seg, i) => (_jsx("text", { fg: seg.highlighted
+                        ? isSelected
+                            ? "white"
+                            : "cyan"
+                        : isSelected
+                            ? "white"
+                            : "white", children: seg.highlighted ? _jsx("u", { children: _jsx("strong", { children: seg.text }) }) : seg.text }, i)))
+                : item.label }));
+        if (isSelected) {
+            return (_jsxs("box", { overflow: "hidden", children: [_jsx("text", { bg: "magenta", fg: "white", children: " " }), _jsx("text", { bg: "magenta", fg: "white", children: _jsx(Label, {}) }), _jsx("box", { flexGrow: 1, children: _jsx("text", { bg: "magenta", children: " " }) }), item.provider && (_jsxs("text", { bg: "magenta", fg: "white", children: [item.provider, " "] }))] }));
+        }
+        else {
+            return (_jsxs("box", { overflow: "hidden", children: [_jsx(Label, {}), _jsx("box", { flexGrow: 1 }), item.provider && _jsx("text", { fg: "gray", children: item.provider })] }));
+        }
+    };
+    const footerHints = "↑↓ choose • tab toggle type • enter choose • esc exit";
+    // Available height calculation
+    // Header: 1 line (title) + 1 line (search) + 1 line (separator) = 3 lines?
+    // Title line: Switch Model /// (o) Large
+    // Cursor line: > c
+    // Separator: handled by list? or explicit?
+    const listHeight = Math.max(5, dimensions.contentHeight - 5);
+    return (_jsxs("box", { flexDirection: "column", height: dimensions.contentHeight, children: [_jsx("box", { flexDirection: "row", border: true, borderStyle: "single", borderColor: "#7e57c2", paddingLeft: 1, paddingRight: 1, children: _jsxs("box", { flexDirection: "column", flexGrow: 1, children: [_jsx("box", { flexDirection: "row", justifyContent: "space-between", children: _jsxs("box", { children: [_jsx("text", { fg: "#7e57c2", children: "Switch Model " }), _jsxs("text", { fg: modelSelector.taskSize === "large" ? "white" : "gray", children: [modelSelector.taskSize === "large" ? "◎" : "○", " Large Task", "  "] }), _jsxs("text", { fg: modelSelector.taskSize === "small" ? "white" : "gray", children: [modelSelector.taskSize === "small" ? "◎" : "○", " Small Task"] })] }) }), _jsxs("box", { flexDirection: "row", marginTop: 1, children: [_jsx("text", { fg: "green", children: "> " }), _jsx("text", { children: modelSelector.searchQuery }), _jsx("text", { bg: "gray", fg: "black", children: " " })] })] }) }), _jsx("box", { flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: _jsx(ScrollableList, { items: filteredItems, selectedIndex: modelSelector.selectedIndex, renderItem: renderItem, maxHeight: listHeight, showScrollIndicators: false }) }), _jsx("box", { height: 1, children: _jsx("text", { fg: "#888888", children: footerHints }) })] }));
+}
+export default ModelSelectorScreen;