Function McpLibraryConfig

frontend/src/components/workflow/McpLibraryConfig.tsx:25–322

({ value, onChange, disabled = false }: McpLibraryConfigProps)

 * Fetches available servers from /api/v1/mcp-servers.
 */
export function McpLibraryConfig({ value, onChange, disabled = false }: McpLibraryConfigProps) {
  const { servers, tools, isLoading, error, fetchServers, fetchAllTools } = useMcpServerStore();

  // Filter out servers that belong to MCP groups - only show custom/individual servers
  const customServers = servers.filter((s) => !s.groupId);

  const [selectedServers, setSelectedServers] = useState<Set<string>>(new Set(value));
  const [isRefreshing, setIsRefreshing] = useState(false);

  // Fetch servers and tools on mount
  useEffect(() => {
    fetchServers();
    fetchAllTools();
  }, [fetchServers, fetchAllTools]);

  // Sync external value changes to local state
  useEffect(() => {
    setSelectedServers(new Set(value));
  }, [value]);

  // Notify parent of changes
  useEffect(() => {
    const selectedArray = Array.from(selectedServers).sort();
    const valueSorted = [...value].sort();
    if (JSON.stringify(selectedArray) !== JSON.stringify(valueSorted)) {
      onChange(selectedArray);
    }
  }, [selectedServers, onChange, value]);

  const toggleServer = (serverId: string) => {
    if (disabled) return;

    setSelectedServers((prev) => {
      const newSelected = new Set(prev);
      if (newSelected.has(serverId)) {
        newSelected.delete(serverId);
      } else {
        newSelected.add(serverId);
      }
      return newSelected;
    });
  };

  const handleRefresh = async () => {
    if (disabled || isRefreshing) return;

    setIsRefreshing(true);
    try {
      await Promise.all([fetchServers({ force: true }), fetchAllTools()]);
    } finally {
      setIsRefreshing(false);
    }
  };

  const getHealthIndicator = (serverId: string) => {
    const server = servers.find((s) => s.id === serverId);
    const status = server?.lastHealthStatus ?? 'unknown';
    switch (status) {