@dexto/tui 1.6.2

package/dist/components/overlays/MarketplaceBrowser.js

@@ -0,0 +1,358 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+  useMemo
+} from "react";
+import { Box, Text } from "ink";
+import {
+  listMarketplaces,
+  listAllMarketplacePlugins,
+  installPluginFromMarketplace,
+  getUninstalledDefaults,
+  addMarketplace,
+  listInstalledPlugins
+} from "@dexto/agent-management";
+import { logger } from "@dexto/core";
+import { BaseSelector } from "../base/BaseSelector.js";
+function getSourceIcon(type) {
+  switch (type) {
+    case "github":
+      return "\u{1F419}";
+    case "git":
+      return "\u{1F4E6}";
+    case "local":
+      return "\u{1F4C1}";
+    default:
+      return "\u{1F4E6}";
+  }
+}
+const MarketplaceBrowser = forwardRef(
+  function MarketplaceBrowser2({ isVisible, onAction, onClose }, ref) {
+    const baseSelectorRef = useRef(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [view, setView] = useState("marketplaces");
+    const [marketplaces, setMarketplaces] = useState([]);
+    const [plugins, setPlugins] = useState([]);
+    const [selectedMarketplace, setSelectedMarketplace] = useState(null);
+    const [isInstalling, setIsInstalling] = useState(false);
+    const [uninstalledDefaults, setUninstalledDefaults] = useState([]);
+    const [pendingPlugin, setPendingPlugin] = useState(null);
+    const [installedPluginNames, setInstalledPluginNames] = useState(/* @__PURE__ */ new Set());
+    useImperativeHandle(
+      ref,
+      () => ({
+        handleInput: (input, key) => {
+          return baseSelectorRef.current?.handleInput(input, key) ?? false;
+        }
+      }),
+      []
+    );
+    useEffect(() => {
+      if (isVisible) {
+        loadMarketplaces();
+      }
+    }, [isVisible]);
+    const loadMarketplaces = () => {
+      setIsLoading(true);
+      setLoadError(null);
+      setView("marketplaces");
+      setSelectedMarketplace(null);
+      setSelectedIndex(0);
+      try {
+        const mktplaces = listMarketplaces();
+        setMarketplaces(mktplaces);
+        const allPlugins = listAllMarketplacePlugins();
+        setPlugins(allPlugins);
+        const defaults = getUninstalledDefaults();
+        setUninstalledDefaults(defaults);
+        const installed = listInstalledPlugins();
+        setInstalledPluginNames(new Set(installed.map((p) => p.name.toLowerCase())));
+      } catch (error) {
+        setLoadError(
+          `Failed to load: ${error instanceof Error ? error.message : String(error)}`
+        );
+        setMarketplaces([]);
+        setPlugins([]);
+        setUninstalledDefaults([]);
+        setInstalledPluginNames(/* @__PURE__ */ new Set());
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const showMarketplacePlugins = (marketplaceName) => {
+      setSelectedMarketplace(marketplaceName);
+      setView("plugins");
+      setSelectedIndex(0);
+    };
+    const goBackToMarketplaces = () => {
+      setView("marketplaces");
+      setSelectedMarketplace(null);
+      setSelectedIndex(0);
+    };
+    const showScopeSelection = (plugin) => {
+      setPendingPlugin(plugin);
+      setView("scope-select");
+      setSelectedIndex(0);
+    };
+    const goBackToPlugins = () => {
+      setPendingPlugin(null);
+      setView("plugins");
+      setSelectedIndex(0);
+    };
+    const items = useMemo(() => {
+      if (view === "marketplaces") {
+        const list = [];
+        list.push({ type: "back" });
+        for (const def of uninstalledDefaults) {
+          list.push({
+            type: "default-marketplace",
+            name: def.name,
+            sourceValue: def.source.value,
+            sourceType: def.source.type
+          });
+        }
+        for (const m of marketplaces) {
+          const pluginCount = plugins.filter((p) => p.marketplace === m.name).length;
+          list.push({
+            type: "marketplace",
+            marketplace: m,
+            pluginCount
+          });
+        }
+        list.push({ type: "add-new" });
+        return list;
+      } else if (view === "scope-select") {
+        const list = [{ type: "back" }];
+        list.push({
+          type: "scope",
+          scope: "user",
+          label: "Global (user)",
+          description: "Available in all projects",
+          icon: "\u{1F310}"
+        });
+        list.push({
+          type: "scope",
+          scope: "project",
+          label: "Project only",
+          description: "Only in current project, can be committed to git",
+          icon: "\u{1F4C1}"
+        });
+        return list;
+      } else {
+        const filteredPlugins = selectedMarketplace ? plugins.filter((p) => p.marketplace === selectedMarketplace) : plugins;
+        const list = [{ type: "back" }];
+        for (const plugin of filteredPlugins) {
+          const isInstalled = installedPluginNames.has(plugin.name.toLowerCase());
+          list.push({
+            type: "plugin",
+            plugin,
+            isInstalled
+          });
+        }
+        return list;
+      }
+    }, [
+      view,
+      marketplaces,
+      plugins,
+      selectedMarketplace,
+      uninstalledDefaults,
+      installedPluginNames
+    ]);
+    const formatItem = (item, isSelected) => {
+      if (item.type === "back") {
+        const label = view === "scope-select" ? "Back to plugins" : view === "plugins" ? "Back to marketplaces" : "Back to menu";
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u25B8 " : "  " }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2190 " }),
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "white" : "gray", children: label })
+        ] });
+      }
+      if (item.type === "scope") {
+        return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u25B8 " : "  " }),
+            /* @__PURE__ */ jsxs(Text, { children: [
+              item.icon,
+              " "
+            ] }),
+            /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: item.label })
+          ] }),
+          isSelected && /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: item.description }) })
+        ] });
+      }
+      if (item.type === "add-new") {
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u25B8 " : "  " }),
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : "gray", children: "+ " }),
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : "gray", children: "Add custom marketplace" })
+        ] });
+      }
+      if (item.type === "default-marketplace") {
+        const icon = getSourceIcon(item.sourceType);
+        return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u25B8 " : "  " }),
+            /* @__PURE__ */ jsxs(Text, { children: [
+              icon,
+              " "
+            ] }),
+            /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: item.name }),
+            /* @__PURE__ */ jsx(Text, { color: "yellow", children: " (not installed)" })
+          ] }),
+          isSelected && /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: item.sourceValue }) })
+        ] });
+      }
+      if (item.type === "marketplace") {
+        const m = item.marketplace;
+        const icon = getSourceIcon(m.source.type);
+        return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u25B8 " : "  " }),
+            /* @__PURE__ */ jsxs(Text, { children: [
+              icon,
+              " "
+            ] }),
+            /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: m.name }),
+            /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+              " ",
+              "(",
+              item.pluginCount,
+              " plugins)"
+            ] })
+          ] }),
+          isSelected && /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: m.source.value }) })
+        ] });
+      }
+      const p = item.plugin;
+      const statusBadge = item.isInstalled ? /* @__PURE__ */ jsx(Text, { color: "green", children: " \u2713" }) : null;
+      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u25B8 " : "  " }),
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "white" : "gray", children: "\u{1F4E6} " }),
+          /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: p.name }),
+          p.version && /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+            "@",
+            p.version
+          ] }),
+          p.category && /* @__PURE__ */ jsxs(Text, { color: "magenta", dimColor: true, children: [
+            " ",
+            "[",
+            p.category,
+            "]"
+          ] }),
+          statusBadge
+        ] }),
+        isSelected && p.description && /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: p.description }) }),
+        isSelected && item.isInstalled && /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: "Already installed" }) })
+      ] });
+    };
+    const handleSelect = async (item) => {
+      if (item.type === "back") {
+        if (view === "scope-select") {
+          goBackToPlugins();
+        } else if (view === "plugins") {
+          goBackToMarketplaces();
+        } else {
+          onClose();
+        }
+        return;
+      }
+      if (item.type === "add-new") {
+        onAction({ type: "add-marketplace" });
+        return;
+      }
+      if (item.type === "default-marketplace" && !isInstalling) {
+        setIsInstalling(true);
+        try {
+          await addMarketplace(item.sourceValue, { name: item.name });
+          onAction({ type: "marketplace-added", marketplaceName: item.name });
+          loadMarketplaces();
+        } catch (error) {
+          logger.error(
+            `Failed to add marketplace ${item.name}: ${error instanceof Error ? error.message : String(error)}`
+          );
+        } finally {
+          setIsInstalling(false);
+        }
+        return;
+      }
+      if (item.type === "marketplace") {
+        showMarketplacePlugins(item.marketplace.name);
+        return;
+      }
+      if (item.type === "plugin" && !item.isInstalled) {
+        showScopeSelection(item.plugin);
+        return;
+      }
+      if (item.type === "scope" && pendingPlugin && !isInstalling) {
+        setIsInstalling(true);
+        try {
+          const result = await installPluginFromMarketplace(
+            `${pendingPlugin.name}@${pendingPlugin.marketplace}`,
+            { scope: item.scope }
+          );
+          setInstalledPluginNames((prev) => {
+            const next = new Set(prev);
+            next.add(result.pluginName.toLowerCase());
+            return next;
+          });
+          onAction({
+            type: "plugin-installed",
+            pluginName: result.pluginName,
+            marketplace: result.marketplace
+          });
+          goBackToPlugins();
+        } catch (error) {
+          logger.error(
+            `Failed to install ${pendingPlugin.name}: ${error instanceof Error ? error.message : String(error)}`
+          );
+        } finally {
+          setIsInstalling(false);
+        }
+      }
+    };
+    const getTitle = () => {
+      if (view === "scope-select" && pendingPlugin) {
+        return `Install ${pendingPlugin.name} \u203A Choose Scope`;
+      }
+      if (view === "plugins" && selectedMarketplace) {
+        return `${selectedMarketplace} \u203A Plugins`;
+      }
+      return "Marketplace";
+    };
+    const getEmptyMessage = () => {
+      if (loadError) return loadError;
+      if (view === "plugins") return "No plugins found in this marketplace";
+      return "No marketplaces. Add one to browse plugins.";
+    };
+    return /* @__PURE__ */ jsx(
+      BaseSelector,
+      {
+        ref: baseSelectorRef,
+        items,
+        isVisible,
+        isLoading: isLoading || isInstalling,
+        selectedIndex,
+        onSelectIndex: setSelectedIndex,
+        onSelect: handleSelect,
+        onClose,
+        formatItem,
+        title: getTitle(),
+        borderColor: "green",
+        emptyMessage: getEmptyMessage(),
+        loadingMessage: isInstalling ? "Installing..." : "Loading..."
+      }
+    );
+  }
+);
+var MarketplaceBrowser_default = MarketplaceBrowser;
+export {
+  MarketplaceBrowser_default as default
+};

package/dist/components/overlays/McpAddChoice.cjs

@@ -0,0 +1,100 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var McpAddChoice_exports = {};
+__export(McpAddChoice_exports, {
+  default: () => McpAddChoice_default
+});
+module.exports = __toCommonJS(McpAddChoice_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_BaseSelector = require("../base/BaseSelector.js");
+const CHOICES = [
+  {
+    id: "registry",
+    type: "registry",
+    label: "Explore registry",
+    description: "Browse available MCP server presets",
+    icon: "\u{1F4E6}"
+  },
+  {
+    id: "custom",
+    type: "custom",
+    label: "Add custom server",
+    description: "Configure your own MCP server",
+    icon: "\u2699\uFE0F"
+  },
+  {
+    id: "back",
+    type: "back",
+    label: "Back",
+    description: "Return to server list",
+    icon: "\u2190"
+  }
+];
+const McpAddChoice = (0, import_react.forwardRef)(function McpAddChoice2({ isVisible, onSelect, onClose }, ref) {
+  const baseSelectorRef = (0, import_react.useRef)(null);
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        return baseSelectorRef.current?.handleInput(input, key) ?? false;
+      }
+    }),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (isVisible) {
+      setSelectedIndex(0);
+    }
+  }, [isVisible]);
+  const formatItem = (item, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+      item.icon,
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", children: [
+      " - ",
+      item.description
+    ] })
+  ] });
+  const handleSelect = (item) => {
+    onSelect(item.type);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_BaseSelector.BaseSelector,
+    {
+      ref: baseSelectorRef,
+      items: CHOICES,
+      isVisible,
+      isLoading: false,
+      selectedIndex,
+      onSelectIndex: setSelectedIndex,
+      onSelect: handleSelect,
+      onClose,
+      formatItem,
+      title: "Add MCP Server",
+      borderColor: "green",
+      emptyMessage: "No options available"
+    }
+  );
+});
+var McpAddChoice_default = McpAddChoice;

package/dist/components/overlays/McpAddChoice.d.ts

@@ -0,0 +1,22 @@
+/**
+ * McpAddChoice Component
+ * Asks user whether to add from registry or custom
+ * Shown when "Add new server" is selected from McpServerList
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+export type McpAddChoiceType = 'registry' | 'custom' | 'back';
+interface McpAddChoiceProps {
+    isVisible: boolean;
+    onSelect: (choice: McpAddChoiceType) => void;
+    onClose: () => void;
+}
+export interface McpAddChoiceHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+/**
+ * MCP Add Choice - registry vs custom
+ */
+declare const McpAddChoice: React.ForwardRefExoticComponent<McpAddChoiceProps & React.RefAttributes<McpAddChoiceHandle>>;
+export default McpAddChoice;
+//# sourceMappingURL=McpAddChoice.d.ts.map

package/dist/components/overlays/McpAddChoice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McpAddChoice.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpAddChoice.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9D,UAAU,iBAAiB;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAkCD;;GAEG;AACH,QAAA,MAAM,YAAY,8FAyDhB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/components/overlays/McpAddChoice.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from "react";
+import { Box, Text } from "ink";
+import { BaseSelector } from "../base/BaseSelector.js";
+const CHOICES = [
+  {
+    id: "registry",
+    type: "registry",
+    label: "Explore registry",
+    description: "Browse available MCP server presets",
+    icon: "\u{1F4E6}"
+  },
+  {
+    id: "custom",
+    type: "custom",
+    label: "Add custom server",
+    description: "Configure your own MCP server",
+    icon: "\u2699\uFE0F"
+  },
+  {
+    id: "back",
+    type: "back",
+    label: "Back",
+    description: "Return to server list",
+    icon: "\u2190"
+  }
+];
+const McpAddChoice = forwardRef(function McpAddChoice2({ isVisible, onSelect, onClose }, ref) {
+  const baseSelectorRef = useRef(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  useImperativeHandle(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        return baseSelectorRef.current?.handleInput(input, key) ?? false;
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (isVisible) {
+      setSelectedIndex(0);
+    }
+  }, [isVisible]);
+  const formatItem = (item, isSelected) => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
+      item.icon,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: item.label }),
+    /* @__PURE__ */ jsxs(Text, { color: isSelected ? "white" : "gray", children: [
+      " - ",
+      item.description
+    ] })
+  ] });
+  const handleSelect = (item) => {
+    onSelect(item.type);
+  };
+  return /* @__PURE__ */ jsx(
+    BaseSelector,
+    {
+      ref: baseSelectorRef,
+      items: CHOICES,
+      isVisible,
+      isLoading: false,
+      selectedIndex,
+      onSelectIndex: setSelectedIndex,
+      onSelect: handleSelect,
+      onClose,
+      formatItem,
+      title: "Add MCP Server",
+      borderColor: "green",
+      emptyMessage: "No options available"
+    }
+  );
+});
+var McpAddChoice_default = McpAddChoice;
+export {
+  McpAddChoice_default as default
+};

package/dist/components/overlays/McpAddSelector.cjs

@@ -0,0 +1,113 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var McpAddSelector_exports = {};
+__export(McpAddSelector_exports, {
+  default: () => McpAddSelector_default
+});
+module.exports = __toCommonJS(McpAddSelector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_registry = require("@dexto/registry");
+var import_BaseSelector = require("../base/BaseSelector.js");
+const McpAddSelector = (0, import_react.forwardRef)(
+  function McpAddSelector2({ isVisible, onSelect, onClose }, ref) {
+    const baseSelectorRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        handleInput: (input, key) => {
+          return baseSelectorRef.current?.handleInput(input, key) ?? false;
+        }
+      }),
+      []
+    );
+    const [options, setOptions] = (0, import_react.useState)([]);
+    const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+    (0, import_react.useEffect)(() => {
+      if (!isVisible) return;
+      let cancelled = false;
+      setIsLoading(true);
+      const fetchEntries = async () => {
+        try {
+          const entries = await import_registry.serverRegistry.getEntries();
+          if (cancelled) return;
+          const availablePresets = entries.filter((e) => !e.isInstalled);
+          const optionList = availablePresets.map((entry) => ({
+            id: entry.id,
+            label: entry.name,
+            description: entry.description,
+            icon: entry.icon || "\u{1F4E6}",
+            entry
+          }));
+          setOptions(optionList);
+          setSelectedIndex(0);
+        } catch {
+          if (!cancelled) {
+            setOptions([]);
+          }
+        } finally {
+          if (!cancelled) {
+            setIsLoading(false);
+          }
+        }
+      };
+      void fetchEntries();
+      return () => {
+        cancelled = true;
+      };
+    }, [isVisible]);
+    const formatItem = (option, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+        option.icon,
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: option.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", children: [
+        " ",
+        "- ",
+        option.description.slice(0, 40),
+        option.description.length > 40 ? "..." : ""
+      ] })
+    ] });
+    const handleSelect = (option) => {
+      onSelect({ type: "preset", entry: option.entry });
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_BaseSelector.BaseSelector,
+      {
+        ref: baseSelectorRef,
+        items: options,
+        isVisible,
+        isLoading,
+        selectedIndex,
+        onSelectIndex: setSelectedIndex,
+        onSelect: handleSelect,
+        onClose,
+        formatItem,
+        title: "Add MCP Server (Presets)",
+        borderColor: "green",
+        loadingMessage: "Loading server presets...",
+        emptyMessage: "No server presets available"
+      }
+    );
+  }
+);
+var McpAddSelector_default = McpAddSelector;