@dexto/tui 1.6.2

package/dist/components/overlays/ToolBrowser.js

@@ -0,0 +1,831 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+  useMemo
+} from "react";
+import { Box, Text } from "ink";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import { writeToClipboard } from "../../utils/clipboardUtils.js";
+import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
+import { HintBar } from "../shared/HintBar.js";
+const LIST_ACTIONS = ["view", "config", "back"];
+const ToolBrowser = forwardRef(function ToolBrowser2({ isVisible, onClose, agent, sessionId }, ref) {
+  const { columns, rows } = useTerminalSize();
+  const maxVisibleTools = useMemo(() => {
+    return getMaxVisibleItemsForTerminalRows({
+      rows,
+      hardCap: 10,
+      reservedRows: 16
+    });
+  }, [rows]);
+  const [tools, setTools] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const [selection, setSelection] = useState({ index: 0, offset: 0 });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState("list");
+  const [selectedTool, setSelectedTool] = useState(null);
+  const [detailScrollOffset, setDetailScrollOffset] = useState(0);
+  const [copyFeedback, setCopyFeedback] = useState(null);
+  const [listActionsIndex, setListActionsIndex] = useState(0);
+  const [configIndex, setConfigIndex] = useState(0);
+  const [scopeToolName, setScopeToolName] = useState(null);
+  const [scopeNextEnabled, setScopeNextEnabled] = useState(true);
+  const [scopeTarget, setScopeTarget] = useState("session");
+  const selectedIndexRef = useRef(0);
+  const viewModeRef = useRef(viewMode);
+  const detailScrollOffsetRef = useRef(detailScrollOffset);
+  const detailMaxScrollOffsetRef = useRef(0);
+  const selectedToolRef = useRef(null);
+  const toolsRef = useRef([]);
+  const listActionsIndexRef = useRef(listActionsIndex);
+  const configIndexRef = useRef(configIndex);
+  const scopeTargetRef = useRef(scopeTarget);
+  const scopeNextEnabledRef = useRef(scopeNextEnabled);
+  const scopeToolNameRef = useRef(scopeToolName);
+  selectedIndexRef.current = selection.index;
+  viewModeRef.current = viewMode;
+  detailScrollOffsetRef.current = detailScrollOffset;
+  selectedToolRef.current = selectedTool;
+  toolsRef.current = tools;
+  listActionsIndexRef.current = listActionsIndex;
+  configIndexRef.current = configIndex;
+  scopeTargetRef.current = scopeTarget;
+  scopeNextEnabledRef.current = scopeNextEnabled;
+  scopeToolNameRef.current = scopeToolName;
+  useEffect(() => {
+    if (!isVisible) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setSearchQuery("");
+    setSelection({ index: 0, offset: 0 });
+    setViewMode("list");
+    setSelectedTool(null);
+    setListActionsIndex(0);
+    setConfigIndex(0);
+    setLoadError(null);
+    const fetchTools = async () => {
+      try {
+        const [allTools, mcpTools, enabledTools, autoApprovedTools] = await Promise.all([
+          agent.getAllTools(),
+          agent.getAllMcpTools(),
+          agent.getEnabledTools(sessionId || void 0),
+          sessionId ? agent.getSessionAutoApproveTools(sessionId) : Promise.resolve([])
+        ]);
+        const toolList = [];
+        const mcpToolNames = new Set(Object.keys(mcpTools));
+        const enabledToolNames = new Set(Object.keys(enabledTools));
+        const autoApprovedToolNames = new Set(autoApprovedTools ?? []);
+        for (const [toolName, toolInfo] of Object.entries(allTools)) {
+          const isMcpTool = mcpToolNames.has(toolName) || toolName.startsWith("mcp--");
+          let serverName;
+          if (toolName.startsWith("mcp--")) {
+            const parts = toolName.split("--");
+            if (parts.length >= 2) {
+              serverName = parts[1];
+            }
+          }
+          toolList.push({
+            name: toolName,
+            description: toolInfo.description || "No description available",
+            source: isMcpTool ? "mcp" : "local",
+            serverName,
+            inputSchema: toolInfo.parameters,
+            isEnabled: enabledToolNames.has(toolName),
+            isAutoApproved: autoApprovedToolNames.has(toolName)
+          });
+        }
+        toolList.sort((a, b) => {
+          if (a.source !== b.source) {
+            return a.source === "local" ? -1 : 1;
+          }
+          return a.name.localeCompare(b.name);
+        });
+        if (!cancelled) {
+          setTools(toolList);
+          setIsLoading(false);
+          setLoadError(null);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          const message = error instanceof Error ? error.message : "Unknown error";
+          setTools([]);
+          setIsLoading(false);
+          setLoadError(`Failed to load tools: ${message}`);
+        }
+      }
+    };
+    void fetchTools();
+    return () => {
+      cancelled = true;
+    };
+  }, [isVisible, agent, sessionId]);
+  const filteredTools = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return tools;
+    }
+    const query = searchQuery.toLowerCase();
+    return tools.filter((tool) => {
+      const name = tool.name.toLowerCase();
+      const desc = tool.description.toLowerCase();
+      const server = (tool.serverName || "").toLowerCase();
+      return name.includes(query) || desc.includes(query) || server.includes(query);
+    });
+  }, [tools, searchQuery]);
+  useEffect(() => {
+    setSelection((prev) => {
+      const maxIndex = Math.max(0, filteredTools.length - 1);
+      const nextIndex = Math.min(prev.index, maxIndex);
+      let nextOffset = prev.offset;
+      if (nextIndex < nextOffset) {
+        nextOffset = nextIndex;
+      } else if (nextIndex >= nextOffset + maxVisibleTools) {
+        nextOffset = Math.max(0, nextIndex - maxVisibleTools + 1);
+      }
+      const maxOffset = Math.max(0, filteredTools.length - maxVisibleTools);
+      nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+      if (nextIndex === prev.index && nextOffset === prev.offset) {
+        return prev;
+      }
+      selectedIndexRef.current = nextIndex;
+      return { index: nextIndex, offset: nextOffset };
+    });
+  }, [filteredTools.length, maxVisibleTools]);
+  const openListActions = (tool) => {
+    setSelectedTool(tool);
+    setListActionsIndex(0);
+    setViewMode("list-actions");
+  };
+  const openToolDetails = (tool) => {
+    setSelectedTool(tool);
+    setViewMode("detail");
+    setDetailScrollOffset(0);
+  };
+  const openConfigMenu = (tool) => {
+    setSelectedTool(tool);
+    setConfigIndex(0);
+    setViewMode("config");
+  };
+  const openScopePrompt = (tool) => {
+    const nextEnabled = !tool.isEnabled;
+    const nextScope = sessionId ? "session" : "global";
+    setSelectedTool(tool);
+    setScopeToolName(tool.name);
+    setScopeNextEnabled(nextEnabled);
+    setScopeTarget(nextScope);
+    setViewMode("scope");
+    scopeToolNameRef.current = tool.name;
+    scopeNextEnabledRef.current = nextEnabled;
+    scopeTargetRef.current = nextScope;
+  };
+  const closeScopePrompt = () => {
+    setViewMode("config");
+    setScopeToolName(null);
+  };
+  const applyToolToggle = async (overrideTarget) => {
+    const targetToolName = scopeToolNameRef.current ?? scopeToolName ?? selectedToolRef.current?.name;
+    if (!targetToolName) return;
+    const effectiveTarget = overrideTarget ?? scopeTargetRef.current;
+    const nextEnabled = scopeNextEnabledRef.current;
+    const previousTools = toolsRef.current;
+    const updatedTools = previousTools.map((tool) => {
+      if (tool.name !== targetToolName) {
+        return tool;
+      }
+      const updatedTool = { ...tool, isEnabled: nextEnabled };
+      if (!nextEnabled && tool.isAutoApproved) {
+        updatedTool.isAutoApproved = false;
+      }
+      return updatedTool;
+    });
+    setTools(updatedTools);
+    const updatedSelected = updatedTools.find((tool) => tool.name === targetToolName) ?? null;
+    setSelectedTool(updatedSelected);
+    const autoApprovedTools = updatedTools.filter((tool) => tool.isAutoApproved).map((tool) => tool.name);
+    if (sessionId) {
+      agent.setSessionAutoApproveTools(sessionId, autoApprovedTools);
+    }
+    const disabledTools = updatedTools.filter((tool) => !tool.isEnabled).map((tool) => tool.name);
+    if (effectiveTarget === "session" && sessionId) {
+      agent.setSessionDisabledTools(sessionId, disabledTools);
+    } else if (effectiveTarget === "global") {
+      try {
+        const { updateAgentPreferences, saveAgentPreferences, agentPreferencesExist } = await import("@dexto/agent-management");
+        if (agentPreferencesExist(agent.config.agentId)) {
+          await updateAgentPreferences(agent.config.agentId, {
+            tools: { disabled: disabledTools }
+          });
+        } else {
+          await saveAgentPreferences(agent.config.agentId, {
+            tools: { disabled: disabledTools }
+          });
+        }
+        agent.setGlobalDisabledTools(disabledTools);
+      } catch (_error) {
+        if (sessionId) {
+          agent.setSessionDisabledTools(sessionId, disabledTools);
+        } else {
+          setTools(previousTools);
+          setSelectedTool(
+            previousTools.find((tool) => tool.name === targetToolName) ?? null
+          );
+        }
+      }
+    }
+    closeScopePrompt();
+  };
+  const toggleAutoApprove = () => {
+    if (!sessionId) return;
+    const updatedTools = toolsRef.current.map(
+      (tool) => tool.name === selectedToolRef.current?.name ? { ...tool, isAutoApproved: !tool.isAutoApproved } : tool
+    );
+    const updatedSelected = updatedTools.find(
+      (tool) => tool.name === selectedToolRef.current?.name
+    );
+    setTools(updatedTools);
+    setSelectedTool(updatedSelected ?? null);
+    const autoApprovedTools = updatedTools.filter((tool) => tool.isAutoApproved).map((tool) => tool.name);
+    agent.setSessionAutoApproveTools(sessionId, autoApprovedTools);
+  };
+  const closeConfigMenu = () => {
+    setViewMode("list-actions");
+  };
+  const closeDetailView = () => {
+    setViewMode("list-actions");
+  };
+  const closeListActions = () => {
+    setViewMode("list");
+    setSelectedTool(null);
+  };
+  useImperativeHandle(
+    ref,
+    () => ({
+      handleInput: (input, key) => {
+        if (!isVisible) return false;
+        if (isLoading) {
+          if (key.escape) {
+            onClose();
+          }
+          return true;
+        }
+        if (viewModeRef.current === "scope") {
+          if (key.escape || key.backspace || key.delete) {
+            closeScopePrompt();
+            return true;
+          }
+          if (key.upArrow || key.downArrow) {
+            setScopeTarget((prev) => prev === "session" ? "global" : "session");
+            return true;
+          }
+          if (key.return) {
+            if (scopeTargetRef.current === "session" && !sessionId) {
+              setScopeTarget("global");
+              scopeTargetRef.current = "global";
+              void applyToolToggle("global");
+              return true;
+            }
+            void applyToolToggle();
+            return true;
+          }
+          return true;
+        }
+        if (viewModeRef.current === "config") {
+          if (key.escape || key.backspace || key.delete) {
+            closeConfigMenu();
+            return true;
+          }
+          if (key.upArrow) {
+            const nextIndex = (configIndexRef.current - 1 + 3) % 3;
+            setConfigIndex(nextIndex);
+            return true;
+          }
+          if (key.downArrow) {
+            const nextIndex = (configIndexRef.current + 1) % 3;
+            setConfigIndex(nextIndex);
+            return true;
+          }
+          if (key.return) {
+            const tool = selectedToolRef.current;
+            if (tool) {
+              if (configIndexRef.current === 0) {
+                openScopePrompt(tool);
+              } else if (configIndexRef.current === 1) {
+                if (sessionId && tool.isEnabled) {
+                  toggleAutoApprove();
+                }
+              } else {
+                closeConfigMenu();
+              }
+            }
+            return true;
+          }
+          return true;
+        }
+        if (viewModeRef.current === "detail") {
+          if (key.escape || key.backspace || key.delete) {
+            closeDetailView();
+            return true;
+          }
+          if (key.upArrow) {
+            if (detailScrollOffsetRef.current > 0) {
+              setDetailScrollOffset((prev) => prev - 1);
+            }
+            return true;
+          }
+          if (key.downArrow) {
+            if (detailScrollOffsetRef.current < detailMaxScrollOffsetRef.current) {
+              setDetailScrollOffset((prev) => prev + 1);
+            }
+            return true;
+          }
+          if (input === "c" || input === "C") {
+            const tool = selectedToolRef.current;
+            if (tool) {
+              const schema = {
+                type: "function",
+                name: tool.name,
+                description: tool.description,
+                parameters: tool.inputSchema || {}
+              };
+              void writeToClipboard(JSON.stringify(schema, null, 2)).then(
+                (success) => {
+                  setCopyFeedback(success ? "Copied!" : "Copy failed");
+                  setTimeout(() => setCopyFeedback(null), 1500);
+                }
+              );
+            }
+            return true;
+          }
+          if (key.return) {
+            const tool = selectedToolRef.current;
+            if (tool) {
+              openConfigMenu(tool);
+            }
+            return true;
+          }
+          return true;
+        }
+        if (viewModeRef.current === "list-actions") {
+          if (key.escape || key.backspace || key.delete) {
+            closeListActions();
+            return true;
+          }
+          if (key.upArrow) {
+            const nextIndex = (listActionsIndexRef.current - 1 + LIST_ACTIONS.length) % LIST_ACTIONS.length;
+            setListActionsIndex(nextIndex);
+            return true;
+          }
+          if (key.downArrow) {
+            const nextIndex = (listActionsIndexRef.current + 1) % LIST_ACTIONS.length;
+            setListActionsIndex(nextIndex);
+            return true;
+          }
+          if (key.return) {
+            const tool = selectedToolRef.current;
+            const action = LIST_ACTIONS[listActionsIndexRef.current];
+            if (!tool) {
+              closeListActions();
+              return true;
+            }
+            if (action === "view") {
+              openToolDetails(tool);
+            } else if (action === "config") {
+              openConfigMenu(tool);
+            } else {
+              closeListActions();
+            }
+            return true;
+          }
+          return true;
+        }
+        if (key.escape) {
+          onClose();
+          return true;
+        }
+        if (input && !key.return && !key.upArrow && !key.downArrow && !key.tab) {
+          if (key.backspace || key.delete) {
+            setSearchQuery((prev) => prev.slice(0, -1));
+            return true;
+          }
+          if (input.length === 1 && input.charCodeAt(0) >= 32) {
+            setSearchQuery((prev) => prev + input);
+            selectedIndexRef.current = 0;
+            setSelection({ index: 0, offset: 0 });
+            return true;
+          }
+        }
+        if (key.backspace || key.delete) {
+          setSearchQuery((prev) => prev.slice(0, -1));
+          return true;
+        }
+        const itemsLength = filteredTools.length;
+        if (itemsLength === 0) return false;
+        if (key.upArrow) {
+          const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
+          selectedIndexRef.current = nextIndex;
+          setSelection((prev) => {
+            let nextOffset = prev.offset;
+            if (nextIndex < prev.offset) {
+              nextOffset = nextIndex;
+            } else if (nextIndex >= prev.offset + maxVisibleTools) {
+              nextOffset = Math.max(0, nextIndex - maxVisibleTools + 1);
+            }
+            const maxOffset = Math.max(0, itemsLength - maxVisibleTools);
+            nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+            return { index: nextIndex, offset: nextOffset };
+          });
+          return true;
+        }
+        if (key.downArrow) {
+          const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
+          selectedIndexRef.current = nextIndex;
+          setSelection((prev) => {
+            let nextOffset = prev.offset;
+            if (nextIndex < prev.offset) {
+              nextOffset = nextIndex;
+            } else if (nextIndex >= prev.offset + maxVisibleTools) {
+              nextOffset = Math.max(0, nextIndex - maxVisibleTools + 1);
+            }
+            const maxOffset = Math.max(0, itemsLength - maxVisibleTools);
+            nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+            return { index: nextIndex, offset: nextOffset };
+          });
+          return true;
+        }
+        if (key.return && itemsLength > 0) {
+          const tool = filteredTools[selectedIndexRef.current];
+          if (tool) {
+            openListActions(tool);
+            return true;
+          }
+        }
+        return false;
+      }
+    }),
+    [isVisible, isLoading, filteredTools, maxVisibleTools, onClose, sessionId]
+  );
+  if (!isVisible) return null;
+  if (viewMode === "list-actions" && selectedTool) {
+    return /* @__PURE__ */ jsx(
+      ToolActionsMenu,
+      {
+        tool: selectedTool,
+        columns,
+        listActionsIndex
+      }
+    );
+  }
+  if (viewMode === "detail" && selectedTool) {
+    const maxVisibleLines = Math.min(18, Math.max(5, rows - 6));
+    return /* @__PURE__ */ jsx(
+      ToolDetailView,
+      {
+        tool: selectedTool,
+        columns,
+        scrollOffset: detailScrollOffset,
+        maxVisibleLines,
+        maxScrollOffsetRef: detailMaxScrollOffsetRef,
+        copyFeedback
+      }
+    );
+  }
+  if (viewMode === "config" && selectedTool) {
+    return /* @__PURE__ */ jsx(
+      ToolSettingsView,
+      {
+        tool: selectedTool,
+        columns,
+        configIndex,
+        sessionAvailable: Boolean(sessionId)
+      }
+    );
+  }
+  if (viewMode === "scope" && selectedTool) {
+    return /* @__PURE__ */ jsx(
+      ToolScopeView,
+      {
+        tool: selectedTool,
+        columns,
+        scopeTarget,
+        scopeNextEnabled,
+        sessionAvailable: Boolean(sessionId)
+      }
+    );
+  }
+  const selectedIndex = selection.index;
+  const scrollOffset = selection.offset;
+  const visibleTools = filteredTools.slice(scrollOffset, scrollOffset + maxVisibleTools);
+  const filteredLocalCount = filteredTools.filter((t) => t.source === "local").length;
+  const filteredMcpCount = filteredTools.filter((t) => t.source === "mcp").length;
+  const selectedToolInList = filteredTools[selectedIndex];
+  let detailLine = "";
+  if (isLoading) {
+    detailLine = "Loading tools\u2026";
+  } else if (loadError) {
+    detailLine = loadError;
+  } else if (searchQuery.trim() && filteredTools.length === 0) {
+    detailLine = "No tools match your search";
+  } else if (selectedToolInList) {
+    detailLine = selectedToolInList.description;
+  }
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tools" }),
+      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        " ",
+        "(",
+        filteredTools.length,
+        " tools: ",
+        filteredLocalCount,
+        " local, ",
+        filteredMcpCount,
+        " ",
+        "MCP)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Search: " }),
+      /* @__PURE__ */ jsx(Text, { color: searchQuery ? "white" : "gray", wrap: "truncate-end", children: searchQuery || "Type to filter tools\u2026" })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: maxVisibleTools, marginTop: 1, children: isLoading || filteredTools.length === 0 ? Array.from({ length: maxVisibleTools }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `tool-empty-${index}`)) : Array.from({ length: maxVisibleTools }, (_, rowIndex) => {
+      const tool = visibleTools[rowIndex];
+      if (!tool) {
+        return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `tool-empty-${rowIndex}`);
+      }
+      const actualIndex = scrollOffset + rowIndex;
+      const isSelected = actualIndex === selectedIndex;
+      return /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+        /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", children: isSelected ? "\u25B6 " : "  " }),
+        /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: truncateText(tool.name, 35) }),
+        /* @__PURE__ */ jsxs(Text, { color: tool.source === "local" ? "magenta" : "blue", children: [
+          " ",
+          "[",
+          tool.source === "local" ? "Local" : "MCP",
+          "]"
+        ] }),
+        tool.serverName && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          " (",
+          tool.serverName,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { color: tool.isEnabled ? "green" : "red", children: [
+          " ",
+          tool.isEnabled ? "Enabled" : "Disabled"
+        ] }),
+        tool.isAutoApproved && /* @__PURE__ */ jsx(Text, { color: "yellow", children: " [auto-approved]" })
+      ] }, tool.name);
+    }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: loadError ? "red" : "gray", wrap: "truncate-end", children: detailLine }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(HintBar, { hints: ["\u2191\u2193 navigate", "Enter options", "Esc close"] }) })
+  ] });
+});
+function buildDetailLineData(tool, maxWidth) {
+  const lines = [];
+  lines.push({ type: "title", text: tool.name });
+  lines.push({ type: "source", source: tool.source, serverName: tool.serverName });
+  lines.push({ type: "empty" });
+  lines.push({ type: "header", text: "Description:" });
+  const descriptionLines = wrapText(tool.description, maxWidth - 2).split("\n");
+  for (const descLine of descriptionLines) {
+    lines.push({ type: "description", text: descLine });
+  }
+  if (tool.inputSchema) {
+    const properties = tool.inputSchema.properties;
+    const required = tool.inputSchema.required || [];
+    if (properties && Object.keys(properties).length > 0) {
+      lines.push({ type: "empty" });
+      lines.push({ type: "header", text: "Parameters:" });
+      for (const [propName, propSchema] of Object.entries(properties)) {
+        const paramType = propSchema.type || "any";
+        const description = propSchema.description;
+        const isRequired = required.includes(propName);
+        const enumValues = propSchema.enum;
+        lines.push({
+          type: "param-name",
+          name: propName,
+          paramType,
+          required: isRequired
+        });
+        if (description) {
+          const descLines = wrapText(description, maxWidth - 2).split("\n");
+          for (const descLine of descLines) {
+            lines.push({ type: "param-desc", text: descLine });
+          }
+        }
+        if (enumValues && enumValues.length > 0) {
+          lines.push({ type: "param-enum", values: enumValues });
+        }
+      }
+    }
+  }
+  return lines;
+}
+function renderDetailLine(line, _index) {
+  switch (line.type) {
+    case "title":
+      return /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: line.text });
+    case "source":
+      return /* @__PURE__ */ jsxs(Text, { color: line.source === "local" ? "magenta" : "blue", children: [
+        line.source === "local" ? "Local Tool" : "MCP Tool",
+        line.serverName ? ` (${line.serverName})` : ""
+      ] });
+    case "empty":
+      return /* @__PURE__ */ jsx(Text, { children: " " });
+    case "header":
+      return /* @__PURE__ */ jsx(Text, { color: "gray", children: line.text });
+    case "description":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { children: " " }),
+        /* @__PURE__ */ jsx(Text, { children: line.text })
+      ] });
+    case "param-name":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { children: " " }),
+        /* @__PURE__ */ jsx(Text, { color: "cyan", children: line.name }),
+        /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          " (",
+          line.paramType,
+          ")"
+        ] }),
+        line.required && /* @__PURE__ */ jsx(Text, { color: "red", children: " *required" })
+      ] });
+    case "param-desc":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { children: " " }),
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: line.text })
+      ] });
+    case "param-enum":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { children: " " }),
+        /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          "Allowed: ",
+          line.values.join(" | ")
+        ] })
+      ] });
+  }
+}
+function ToolActionsMenu({
+  tool,
+  columns,
+  listActionsIndex
+}) {
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tool Options" }),
+      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        " ",
+        tool.name
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 0 ? "cyan" : "gray", children: [
+      listActionsIndex === 0 ? "\u25B6 " : "  ",
+      "View details"
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 1 ? "cyan" : "gray", children: [
+      listActionsIndex === 1 ? "\u25B6 " : "  ",
+      "Edit tool settings"
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 2 ? "cyan" : "gray", children: [
+      listActionsIndex === 2 ? "\u25B6 " : "  ",
+      "Back"
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
+  ] });
+}
+function ToolDetailView({
+  tool,
+  columns,
+  scrollOffset,
+  maxVisibleLines,
+  maxScrollOffsetRef,
+  copyFeedback
+}) {
+  const maxWidth = Math.min(80, columns - 4);
+  const lineData = useMemo(() => buildDetailLineData(tool, maxWidth), [tool, maxWidth]);
+  const totalLines = lineData.length;
+  const maxScrollOffset = Math.max(0, totalLines - maxVisibleLines);
+  maxScrollOffsetRef.current = maxScrollOffset;
+  const clampedOffset = Math.min(scrollOffset, maxScrollOffset);
+  const hasMoreAbove = clampedOffset > 0;
+  const hasMoreBelow = clampedOffset + maxVisibleLines < totalLines;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tool Details" }),
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: " - \u2191\u2193 scroll, c copy schema, Enter settings, Esc back" }),
+      copyFeedback && /* @__PURE__ */ jsxs(Text, { color: "green", bold: true, children: [
+        " ",
+        copyFeedback
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2500".repeat(Math.min(60, columns - 2)) }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: hasMoreAbove ? `\u2191 ${clampedOffset} more above` : " " }) }),
+    Array.from({ length: maxVisibleLines }, (_, i) => {
+      const absoluteIndex = clampedOffset + i;
+      const line = lineData[absoluteIndex];
+      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: line ? renderDetailLine(line, absoluteIndex) : /* @__PURE__ */ jsx(Text, { children: " " }) }, i);
+    }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: hasMoreBelow ? `\u2193 ${totalLines - clampedOffset - maxVisibleLines} more below` : " " }) })
+  ] });
+}
+function ToolSettingsView({
+  tool,
+  columns,
+  configIndex,
+  sessionAvailable
+}) {
+  const autoApproveDisabled = !tool.isEnabled;
+  const autoApproveUnavailable = !sessionAvailable || autoApproveDisabled;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tool Settings" }),
+      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        " ",
+        tool.name
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Status: " }),
+      /* @__PURE__ */ jsx(Text, { color: tool.isEnabled ? "green" : "red", children: tool.isEnabled ? "Enabled" : "Disabled" }),
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: " \xB7 Auto-approve: " }),
+      /* @__PURE__ */ jsx(Text, { color: tool.isAutoApproved ? "green" : "red", children: tool.isAutoApproved ? "On" : "Off" }),
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: " (session)" })
+    ] }),
+    autoApproveDisabled && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Enable the tool to allow auto-approve." }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: configIndex === 0 ? "cyan" : "gray", children: [
+      configIndex === 0 ? "\u25B6 " : "  ",
+      tool.isEnabled ? "Disable tool" : "Enable tool"
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(
+      Text,
+      {
+        color: configIndex === 1 ? autoApproveUnavailable ? "yellow" : "cyan" : "gray",
+        children: [
+          configIndex === 1 ? "\u25B6 " : "  ",
+          tool.isAutoApproved ? "Disable auto-approve (session)" : "Enable auto-approve (session)"
+        ]
+      }
+    ) }),
+    !sessionAvailable && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Auto-approve requires an active session." }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: configIndex === 2 ? "cyan" : "gray", children: [
+      configIndex === 2 ? "\u25B6 " : "  ",
+      "Back"
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
+  ] });
+}
+function ToolScopeView({
+  tool,
+  columns,
+  scopeTarget,
+  scopeNextEnabled,
+  sessionAvailable
+}) {
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: scopeNextEnabled ? "Enable Tool" : "Disable Tool" }),
+      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        " ",
+        tool.name
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Apply to:" }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: scopeTarget === "session" ? "cyan" : "gray", children: [
+      scopeTarget === "session" ? "\u25B6 " : "  ",
+      "Session (default)"
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: scopeTarget === "global" ? "cyan" : "gray", children: [
+      scopeTarget === "global" ? "\u25B6 " : "  ",
+      "Global (persisted)"
+    ] }) }),
+    !sessionAvailable && scopeTarget === "session" && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "No active session; switching to global." }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2191\u2193 choose scope \xB7 Enter confirm \xB7 Esc back" }) })
+  ] });
+}
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 1) + "\u2026";
+}
+function wrapText(text, maxWidth) {
+  if (text.length <= maxWidth) return text;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (currentLine.length + word.length + 1 <= maxWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      if (currentLine) lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  return lines.join("\n");
+}
+var ToolBrowser_default = ToolBrowser;
+export {
+  ToolBrowser_default as default
+};