claudeup 4.18.0 → 4.22.0

package/src/ui/screens/McpScreen.js

@@ -1,176 +0,0 @@
-import { jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { 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 { getMcpServersByCategory, getCategoryDisplayName, categoryOrder, } from "../../data/mcp-servers.js";
-import { addMcpServer, removeMcpServer, getInstalledMcpServers, getEnabledMcpServers, } from "../../services/claude-settings.js";
-import { renderMcpRow, renderMcpDetail, } from "../renderers/mcpRenderers.js";
-import { ScrollableList } from "../components/ScrollableList.js";
-export function McpScreen() {
-    const { state, dispatch } = useApp();
-    const { mcp } = state;
-    const modal = useModal();
-    const { navigateToScreen } = useNavigation();
-    const dimensions = useDimensions();
-    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);
-            const servers = [];
-            for (const category of categoryOrder) {
-                const categoryServers = serversByCategory[category];
-                if (categoryServers) {
-                    servers.push(...categoryServers);
-                }
-            }
-            const installedAsBooleans = {};
-            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]);
-    const allListItems = useMemo(() => {
-        if (mcp.servers.status !== "success")
-            return [];
-        const serversByCategory = getMcpServersByCategory();
-        const items = [];
-        for (const category of categoryOrder) {
-            const servers = serversByCategory[category];
-            if (!servers || servers.length === 0)
-                continue;
-            items.push({ kind: "category", label: getCategoryDisplayName(category) });
-            for (const server of servers) {
-                const isInstalled = mcp.installedServers[server.name] !== undefined;
-                items.push({ kind: "server", server, isInstalled });
-            }
-        }
-        return items;
-    }, [mcp.servers.status, mcp.installedServers]);
-    useKeyboard((event) => {
-        if (state.isSearching || state.modal)
-            return;
-        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(allListItems.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 = allListItems[mcp.selectedIndex];
-        if (!item || item.kind === "category")
-            return;
-        const { server, isInstalled } = item;
-        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 {
-            await installMcpServer(server);
-        }
-    };
-    const installMcpServer = async (server) => {
-        let config;
-        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,
-            };
-        }
-        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;
-                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");
-        }
-    };
-    const selectedItem = allListItems[mcp.selectedIndex];
-    const isLoading = mcp.servers.status === "loading";
-    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 (_jsx(ScreenLayout, { title: "claudeup MCP Servers", subtitle: subtitle, currentScreen: "mcp", footerHints: [
-            { keys: ["↑", "↓"], label: "nav" },
-            { keys: ["Enter"], label: "toggle" },
-            { keys: ["/"], label: "search" },
-            { keys: ["r"], label: "registry" },
-        ], listPanel: _jsx(ScrollableList, { items: allListItems, selectedIndex: mcp.selectedIndex, renderItem: renderMcpRow, maxHeight: dimensions.listPanelHeight }), detailPanel: renderMcpDetail(selectedItem, isLoading) }));
-}
-export default McpScreen;

package/src/ui/screens/ModelSelectorScreen.js

@@ -1,296 +0,0 @@
-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 { fuzzyFilter, highlightMatches } from "../../utils/fuzzy-search.js";
-import { useKeyboard } from "../hooks/useKeyboard.js";
-import { ScrollableList } from "../components/ScrollableList.js";
-import { FooterHints } from "../components/layout/index.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: "#5c9aff", 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 = [
-        { keys: ["↑", "↓"], label: "choose" },
-        { keys: ["tab"], label: "toggle type" },
-        { keys: ["enter"], label: "choose" },
-        { keys: ["esc"], label: "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, getKey: (item) => item.id }) }), _jsx("box", { height: 1, children: _jsx(FooterHints, { hints: footerHints }) })] }));
-}
-export default ModelSelectorScreen;