@within-7/minto 0.3.9 → 0.4.0

package/dist/commands/mcp-interactive.js

@@ -1,62 +1,34 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Box, Text, useInput } from "ink";
-import { Select } from "../components/CustomSelect/select.js";
-import { getTheme } from "../utils/theme.js";
-import { SEMANTIC_COLORS } from "../constants/colors.js";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
   listMCPServers,
   getClients,
   refreshMCPConnections,
-  getMcpServer
+  getMcpServer,
+  addMcpServer,
+  removeMcpServer
 } from "../services/mcpClient.js";
-import { SimpleSpinner } from "../components/Spinner.js";
 import {
   getCurrentProjectConfig,
   saveCurrentProjectConfig
 } from "../utils/config.js";
-const MainMenu = ({ onNavigate, onExit, isActive = true }) => {
-  const theme = getTheme();
-  const options = [
-    { label: "\u{1F4CB} View all MCP servers", value: "list" },
-    { label: "\u{1F504} Refresh connections", value: "refresh" }
-  ];
-  useInput(
-    (input, key) => {
-      if (key.escape) onExit();
-    },
-    { isActive }
-  );
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      flexDirection: "column",
-      borderStyle: "round",
-      borderColor: theme.primary,
-      padding: 1
-    },
-    /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, "MCP Server Manager")),
-    /* @__PURE__ */ React.createElement(
-      Select,
-      {
-        options,
-        onChange: (value) => {
-          if (value === "list") onNavigate({ screen: "server-list" });
-          else if (value === "refresh") {
-            refreshMCPConnections();
-            onNavigate({ screen: "server-list" });
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "ESC"), " to exit"))
-  );
-};
-const ServerList = ({ onNavigate, onBack, isActive = true }) => {
-  const theme = getTheme();
-  const [loading, setLoading] = useState(true);
+import { TabbedListView } from "../components/TabbedListView/TabbedListView.js";
+import { t } from "../i18n/index.js";
+const ID_ADD_SERVER = "__add__";
+const ID_REFRESH_ALL = "__refresh__";
+const ID_TOGGLE = "__toggle__";
+const ID_DELETE = "__delete__";
+const ID_BACK = "__back__";
+const ID_CONFIRM_YES = "__yes__";
+const ID_CONFIRM_NO = "__no__";
+const MCPInteractive = ({ onDone }) => {
+  const [phase, setPhase] = useState({ type: "main" });
+  const [activeTab, setActiveTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusOverlay, setStatusOverlay] = useState(null);
   const [servers, setServers] = useState([]);
-  useEffect(() => {
-    const loadServers = async () => {
+  const [loading, setLoading] = useState(true);
+  const loadServers = useCallback(async () => {
+    try {
       const serverConfigs = listMCPServers();
       const clients = await getClients();
       const serverStatuses = Object.entries(serverConfigs).map(
@@ -71,198 +43,434 @@ const ServerList = ({ onNavigate, onBack, isActive = true }) => {
         }
       );
       setServers(serverStatuses);
-      setLoading(false);
-    };
-    loadServers();
+    } catch {
+      setServers([]);
+    }
   }, []);
-  const handleServerSelect = useCallback(
-    (serverName) => {
-      onNavigate({ screen: "server-details", serverName });
+  useEffect(() => {
+    setLoading(true);
+    loadServers().finally(() => setLoading(false));
+  }, [loadServers]);
+  useEffect(() => {
+    if (phase.type === "main") {
+      loadServers();
+      setSearchQuery("");
+    }
+  }, [phase, loadServers]);
+  const toggleServer = useCallback(
+    async (serverName) => {
+      setStatusOverlay({
+        type: "loading",
+        message: t("commands.mcp.toggling")
+      });
+      try {
+        const projectConfig = getCurrentProjectConfig();
+        const currentServer = projectConfig.mcpServers?.[serverName];
+        if (currentServer) {
+          const newEnabled = !(currentServer.enabled ?? true);
+          await saveCurrentProjectConfig({
+            ...projectConfig,
+            mcpServers: {
+              ...projectConfig.mcpServers,
+              [serverName]: { ...currentServer, enabled: newEnabled }
+            }
+          });
+        } else {
+          const serverConfig = getMcpServer(serverName);
+          if (serverConfig) {
+            await saveCurrentProjectConfig({
+              ...projectConfig,
+              mcpServers: {
+                ...projectConfig.mcpServers,
+                [serverName]: { ...serverConfig, enabled: false }
+              }
+            });
+          }
+        }
+        await refreshMCPConnections();
+        await loadServers();
+        setStatusOverlay({
+          type: "success",
+          message: t("commands.mcp.toggleSuccess")
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setStatusOverlay({ type: "error", message: msg });
+      }
     },
-    [onNavigate]
+    [loadServers]
   );
-  useInput(
-    (input, key) => {
-      if (key.escape) onBack();
+  const deleteServer = useCallback(
+    async (serverName, scope) => {
+      setStatusOverlay({
+        type: "loading",
+        message: t("commands.mcp.deleting")
+      });
+      try {
+        removeMcpServer(serverName, scope);
+        await refreshMCPConnections();
+        await loadServers();
+        setStatusOverlay({
+          type: "success",
+          message: t("commands.mcp.deleteSuccess")
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setStatusOverlay({ type: "error", message: msg });
+      }
     },
-    { isActive }
+    [loadServers]
   );
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement(SimpleSpinner, { label: "Loading MCP servers..." }));
-  }
-  if (servers.length === 0) {
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement(Text, null, "No MCP servers configured."), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "ESC"), " to go back")));
-  }
-  const options = servers.map((server) => {
-    const statusIcon = server.status === "connected" ? "\u2713" : "\u2717";
-    const statusColor = server.status === "connected" ? theme.success : theme.error;
-    return {
-      label: /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusIcon), " ", server.name, " ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "(", server.config.scope, ")")),
-      value: server.name
-    };
-  });
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      flexDirection: "column",
-      borderStyle: "round",
-      borderColor: theme.primary,
-      padding: 1
+  const addNewServer = useCallback(
+    async (name, commandOrUrl) => {
+      setStatusOverlay({
+        type: "loading",
+        message: t("commands.mcp.adding")
+      });
+      try {
+        if (commandOrUrl.startsWith("http://") || commandOrUrl.startsWith("https://")) {
+          addMcpServer(name, { type: "sse", url: commandOrUrl }, "project");
+        } else {
+          const parts = commandOrUrl.split(/\s+/);
+          const command = parts[0];
+          const args = parts.slice(1);
+          addMcpServer(
+            name,
+            { type: "stdio", command, args: args.length > 0 ? args : [] },
+            "project"
+          );
+        }
+        await refreshMCPConnections();
+        await loadServers();
+        setStatusOverlay({
+          type: "success",
+          message: t("commands.mcp.addSuccess")
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setStatusOverlay({
+          type: "error",
+          message: `${t("commands.mcp.addFailed")}: ${msg}`
+        });
+      }
     },
-    /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, "MCP Servers")),
-    /* @__PURE__ */ React.createElement(Select, { options, onChange: handleServerSelect }),
-    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "ESC"), " to go back"))
+    [loadServers]
   );
-};
-const ServerDetails = ({ serverName, onBack, onRefresh, isActive = true }) => {
-  const theme = getTheme();
-  const [loading, setLoading] = useState(true);
-  const [server, setServer] = useState(null);
-  const [toggling, setToggling] = useState(false);
-  useEffect(() => {
-    const loadServer = async () => {
-      const config = getMcpServer(serverName);
-      if (!config) {
-        onBack();
+  const refreshAll = useCallback(async () => {
+    setStatusOverlay({
+      type: "loading",
+      message: t("commands.mcp.refreshing")
+    });
+    try {
+      await refreshMCPConnections();
+      await loadServers();
+      setStatusOverlay(null);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setStatusOverlay({ type: "error", message: msg });
+    }
+  }, [loadServers]);
+  const { tabs, items, title, footerHint, searchEnabled, searchPlaceholder } = useMemo(() => {
+    switch (phase.type) {
+      case "main": {
+        const projectCount = servers.filter(
+          (s) => s.config.scope === "project"
+        ).length;
+        const globalCount = servers.filter(
+          (s) => s.config.scope === "global"
+        ).length;
+        const mainTabs = [
+          {
+            id: "all",
+            label: t("commands.mcp.tabAll"),
+            badge: servers.length
+          },
+          {
+            id: "project",
+            label: t("commands.mcp.tabProject"),
+            badge: projectCount
+          },
+          {
+            id: "global",
+            label: t("commands.mcp.tabGlobal"),
+            badge: globalCount
+          }
+        ];
+        const filtered = activeTab === "all" ? servers : servers.filter((s) => s.config.scope === activeTab);
+        const mainItems = filtered.map((server) => {
+          const isEnabled = "enabled" in server.config ? server.config.enabled : true;
+          return {
+            id: server.name,
+            label: server.name,
+            description: `${server.config.scope} \xB7 ${server.config.type}`,
+            status: !isEnabled ? "disabled" : server.status === "connected" ? "enabled" : "error",
+            data: { type: "server", server }
+          };
+        });
+        mainItems.push({
+          id: ID_ADD_SERVER,
+          label: `+ ${t("commands.mcp.addServer")}`,
+          data: { type: "action" }
+        });
+        mainItems.push({
+          id: ID_REFRESH_ALL,
+          label: `\u21BB ${t("commands.mcp.refreshAll")}`,
+          data: { type: "action" }
+        });
+        return {
+          tabs: mainTabs,
+          items: mainItems,
+          title: t("commands.mcp.title"),
+          footerHint: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Tab Switch \xB7 / Search \xB7 Esc Exit",
+          searchEnabled: true,
+          searchPlaceholder: void 0
+        };
+      }
+      case "server-actions": {
+        const server = servers.find((s) => s.name === phase.serverName);
+        const isEnabled = server ? "enabled" in server.config ? server.config.enabled : true : true;
+        const actionItems = [
+          {
+            id: ID_TOGGLE,
+            label: isEnabled ? t("commands.mcp.disable") : t("commands.mcp.enable")
+          },
+          { id: ID_DELETE, label: t("commands.mcp.deleteServer") },
+          { id: ID_BACK, label: `\u2190 ${t("commands.mcp.back")}` }
+        ];
+        return {
+          tabs: [
+            { id: "actions", label: t("commands.mcp.actions") }
+          ],
+          items: actionItems,
+          title: phase.serverName,
+          footerHint: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Esc Back",
+          searchEnabled: false,
+          searchPlaceholder: void 0
+        };
+      }
+      case "confirm-delete": {
+        const confirmItems = [
+          { id: ID_CONFIRM_YES, label: t("commands.mcp.confirmYes") },
+          { id: ID_CONFIRM_NO, label: t("commands.mcp.confirmNo") }
+        ];
+        return {
+          tabs: [
+            { id: "actions", label: t("commands.mcp.actions") }
+          ],
+          items: confirmItems,
+          title: t("commands.mcp.confirmDeleteTitle").replace(
+            "{name}",
+            phase.serverName
+          ),
+          footerHint: "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Esc Back",
+          searchEnabled: false,
+          searchPlaceholder: void 0
+        };
+      }
+      case "add-name": {
+        return {
+          tabs: [
+            { id: "add", label: t("commands.mcp.addServer") }
+          ],
+          items: [],
+          title: t("commands.mcp.addServer"),
+          footerHint: t("commands.mcp.addFooterHint"),
+          searchEnabled: true,
+          searchPlaceholder: t("commands.mcp.addNamePlaceholder")
+        };
+      }
+      case "add-command": {
+        const exampleItems = [
+          {
+            id: "example-stdio",
+            label: "npx -y @modelcontextprotocol/server-xxx",
+            description: "stdio command"
+          },
+          {
+            id: "example-sse",
+            label: "https://example.com/mcp/sse",
+            description: "SSE endpoint"
+          }
+        ];
+        return {
+          tabs: [
+            { id: "add", label: t("commands.mcp.addServer") }
+          ],
+          items: exampleItems,
+          title: `${t("commands.mcp.addServer")}: ${phase.name}`,
+          footerHint: t("commands.mcp.addCommandFooterHint"),
+          searchEnabled: true,
+          searchPlaceholder: t("commands.mcp.addCommandPlaceholder")
+        };
+      }
+      default:
+        return {
+          tabs: [],
+          items: [],
+          title: "",
+          footerHint: "",
+          searchEnabled: false,
+          searchPlaceholder: void 0
+        };
+    }
+  }, [phase, activeTab, servers]);
+  const handleTabChange = useCallback((tabId) => {
+    setActiveTab(tabId);
+    setSearchQuery("");
+  }, []);
+  const handleStatusDismiss = useCallback(() => {
+    setStatusOverlay(null);
+    setPhase({ type: "main" });
+  }, []);
+  const handleBack = useCallback(() => {
+    if (statusOverlay && statusOverlay.type !== "loading") {
+      handleStatusDismiss();
+      return;
+    }
+    switch (phase.type) {
+      case "main":
+        onDone();
+        break;
+      case "server-actions":
+        setPhase({ type: "main" });
+        setSearchQuery("");
+        break;
+      case "confirm-delete":
+        setPhase({
+          type: "server-actions",
+          serverName: phase.serverName,
+          scope: phase.scope
+        });
+        break;
+      case "add-name":
+      case "add-command":
+        setPhase({ type: "main" });
+        setSearchQuery("");
+        break;
+    }
+  }, [phase, statusOverlay, onDone, handleStatusDismiss]);
+  const handleClose = useCallback(() => {
+    if (statusOverlay && statusOverlay.type !== "loading") {
+      handleStatusDismiss();
+      return;
+    }
+    if (phase.type === "main") {
+      onDone();
+    } else {
+      setPhase({ type: "main" });
+      setSearchQuery("");
+    }
+  }, [phase, statusOverlay, onDone, handleStatusDismiss]);
+  const handleSearchSubmit = useCallback(
+    async (query) => {
+      if (!query.trim()) return;
+      if (phase.type === "add-name") {
+        setPhase({ type: "add-command", name: query.trim() });
+        setSearchQuery("");
         return;
       }
-      const clients = await getClients();
-      const client = clients.find((c) => c.name === serverName);
-      setServer({
-        name: serverName,
-        status: client?.type === "connected" ? "connected" : "failed",
-        config
-      });
-      setLoading(false);
-    };
-    loadServer();
-  }, [serverName]);
-  const toggleEnabled = async () => {
-    if (!server) return;
-    setToggling(true);
-    const projectConfig = getCurrentProjectConfig();
-    const currentServer = projectConfig.mcpServers?.[serverName];
-    if (currentServer) {
-      const newEnabled = !(currentServer.enabled ?? true);
-      await saveCurrentProjectConfig({
-        ...projectConfig,
-        mcpServers: {
-          ...projectConfig.mcpServers,
-          [serverName]: {
-            ...currentServer,
-            enabled: newEnabled
+      if (phase.type === "add-command") {
+        await addNewServer(phase.name, query.trim());
+        setSearchQuery("");
+      }
+    },
+    [phase, addNewServer]
+  );
+  const handleSelect = useCallback(
+    async (item) => {
+      switch (phase.type) {
+        case "main": {
+          if (item.id === ID_ADD_SERVER) {
+            setPhase({ type: "add-name" });
+            setSearchQuery("");
+            return;
+          }
+          if (item.id === ID_REFRESH_ALL) {
+            await refreshAll();
+            return;
+          }
+          const data = item.data;
+          if (data.type === "server" && data.server) {
+            setPhase({
+              type: "server-actions",
+              serverName: data.server.name,
+              scope: data.server.config.scope
+            });
           }
+          break;
         }
-      });
-    } else {
-      const serverConfig = getMcpServer(serverName);
-      if (serverConfig) {
-        await saveCurrentProjectConfig({
-          ...projectConfig,
-          mcpServers: {
-            ...projectConfig.mcpServers,
-            [serverName]: {
-              ...serverConfig,
-              enabled: false
-            }
+        case "server-actions": {
+          if (item.id === ID_BACK) {
+            setPhase({ type: "main" });
+            return;
           }
-        });
+          if (item.id === ID_TOGGLE) {
+            await toggleServer(phase.serverName);
+            return;
+          }
+          if (item.id === ID_DELETE) {
+            setPhase({
+              type: "confirm-delete",
+              serverName: phase.serverName,
+              scope: phase.scope
+            });
+          }
+          break;
+        }
+        case "confirm-delete": {
+          if (item.id === ID_CONFIRM_YES) {
+            await deleteServer(phase.serverName, phase.scope);
+          } else {
+            setPhase({
+              type: "server-actions",
+              serverName: phase.serverName,
+              scope: phase.scope
+            });
+          }
+          break;
+        }
+        case "add-command": {
+          setSearchQuery(item.label);
+          break;
+        }
       }
-    }
-    setToggling(false);
-    refreshMCPConnections();
-    onRefresh();
-  };
-  useInput(
-    (input, key) => {
-      if (key.escape) onBack();
     },
-    { isActive }
+    [phase, refreshAll, toggleServer, deleteServer]
   );
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement(SimpleSpinner, { label: "Loading server details..." }));
-  }
-  if (!server) {
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", padding: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.error }, "Server not found"));
-  }
-  const isEnabled = "enabled" in server.config ? server.config.enabled : true;
-  const statusColor = server.status === "connected" ? theme.success : theme.error;
-  const enabledColor = isEnabled ? theme.success : theme.error;
-  const options = [
-    {
-      label: isEnabled ? "\u{1F534} Disable server" : "\u{1F7E2} Enable server",
-      value: "toggle"
-    },
-    { label: "\u{1F504} Refresh connection", value: "refresh" },
-    { label: "\u2190 Back to list", value: "back" }
-  ];
+  const currentTab = phase.type === "main" ? activeTab : phase.type === "server-actions" || phase.type === "confirm-delete" ? "actions" : "add";
+  const needsSearchSubmit = phase.type === "add-name" || phase.type === "add-command";
   return /* @__PURE__ */ React.createElement(
-    Box,
+    TabbedListView,
     {
-      flexDirection: "column",
-      borderStyle: "round",
-      borderColor: theme.primary,
-      padding: 1
-    },
-    /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: theme.primary }, server.name)),
-    /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, null, "Status: ", /* @__PURE__ */ React.createElement(Text, { color: statusColor }, server.status)), /* @__PURE__ */ React.createElement(Text, null, "Enabled: ", /* @__PURE__ */ React.createElement(Text, { color: enabledColor }, isEnabled ? "Yes" : "No")), /* @__PURE__ */ React.createElement(Text, null, "Scope: ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, server.config.scope)), /* @__PURE__ */ React.createElement(Text, null, "Type: ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, server.config.type))),
-    toggling ? /* @__PURE__ */ React.createElement(SimpleSpinner, { label: "Toggling server..." }) : /* @__PURE__ */ React.createElement(
-      Select,
-      {
-        options,
-        onChange: (value) => {
-          if (value === "toggle") toggleEnabled();
-          else if (value === "refresh") {
-            refreshMCPConnections();
-            onRefresh();
-          } else if (value === "back") onBack();
-        }
-      }
-    ),
-    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "ESC"), " to go back"))
-  );
-};
-const MCPInteractive = ({ onDone }) => {
-  const [navState, setNavState] = useState({
-    screen: "main-menu"
-  });
-  const handleNavigate = (state) => {
-    setNavState(state);
-  };
-  const handleBack = () => {
-    if (navState.screen === "server-details") {
-      setNavState({ screen: "server-list" });
-    } else {
-      setNavState({ screen: "main-menu" });
+      title,
+      tabs,
+      activeTab: currentTab,
+      onTabChange: handleTabChange,
+      items,
+      searchEnabled,
+      searchPlaceholder,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      onSearchSubmit: needsSearchSubmit ? handleSearchSubmit : void 0,
+      onSelect: handleSelect,
+      onClose: handleClose,
+      onBack: handleBack,
+      statusOverlay,
+      footerHint,
+      groupByCategory: false,
+      isLoading: loading,
+      emptyText: t("commands.mcp.noServers"),
+      statusDismissHint: "Enter Continue \xB7 Esc Back"
     }
-  };
-  const handleRefresh = () => {
-    setNavState({ ...navState });
-  };
-  switch (navState.screen) {
-    case "main-menu":
-      return /* @__PURE__ */ React.createElement(MainMenu, { onNavigate: handleNavigate, onExit: () => onDone() });
-    case "server-list":
-      return /* @__PURE__ */ React.createElement(ServerList, { onNavigate: handleNavigate, onBack: handleBack });
-    case "server-details":
-      return /* @__PURE__ */ React.createElement(
-        ServerDetails,
-        {
-          serverName: navState.serverName,
-          onBack: handleBack,
-          onRefresh: handleRefresh
-        }
-      );
-    default:
-      return /* @__PURE__ */ React.createElement(Text, null, "Unknown screen");
-  }
+  );
 };
 const mcpInteractive = {
   type: "local-jsx",
   name: "mcp",
-  description: "Interactive MCP server management",
+  description: t("commands.mcp.description"),
   isEnabled: true,
   isHidden: false,
+  hidePromptInput: true,
   async call(onDone) {
     return /* @__PURE__ */ React.createElement(MCPInteractive, { onDone });
   },